Skip to content

Adjust DatasetDistributionPanel to be able to render categorical metadata values - #1814

Open
ikondrat wants to merge 1 commit into
feature/lig-9585-categorical-metadata-distribution.ExpandDialogfrom
feature/lig-9585-categorical-metadata-distribution.DatasetDistributionPanel
Open

Adjust DatasetDistributionPanel to be able to render categorical metadata values#1814
ikondrat wants to merge 1 commit into
feature/lig-9585-categorical-metadata-distribution.ExpandDialogfrom
feature/lig-9585-categorical-metadata-distribution.DatasetDistributionPanel

Conversation

@ikondrat

@ikondrat ikondrat commented Jul 30, 2026

Copy link
Copy Markdown
Contributor

What has changed and why?

This PR introduces ability to render categorical metadata values within distribution Panel.

There is no breaking changes for existing functionality for classes and numeric metadata values.

How has it been tested?

Accompanied by test and storybook stores to show how dataset distribition panel looks with categorical metadata values.
Screenshot 2026-07-30 at 16 50 22

Did you update CHANGELOG.md?

Screenshot 2026-07-30 at 16 46 52
  • Yes
  • Not needed (internal change)

Summary by CodeRabbit

  • New Features

    • Added categorical metadata distributions with filtering, selection, orientation controls, expansion, sorting, and retryable loading/error states.
    • Added support for mixed panels combining class, categorical, and numeric distributions.
    • Added customizable labels and manual value selection controls.
    • Improved filter chips to display categorical values, including missing values.
    • Added chart spacing controls and preserved pinned values in limited result views.
  • Bug Fixes

    • Improved selection accuracy when categorical values share labels.
    • Bar click callbacks now ignore unavailable or non-selectable items.

@ikondrat
ikondrat requested a review from a team as a code owner July 30, 2026 14:53
@chatgpt-codex-connector

Copy link
Copy Markdown

You have reached your Codex usage limits for code reviews. You can see your limits in the Codex usage dashboard.

@ikondrat
ikondrat changed the base branch from main to feature/lig-9585-categorical-metadata-distribution.ExpandDialog July 30, 2026 14:53
@coderabbitai

coderabbitai Bot commented Jul 30, 2026

Copy link
Copy Markdown
Contributor

Review Change Stack

📝 Walkthrough

Walkthrough

Changes

Categorical distribution experience

Layer / File(s) Summary
Categorical data contract and panel flow
lightly_studio_view/src/lib/components/DatasetDistributionPanel/types.ts, .../DatasetDistributionPanel.svelte, .../sourceFixtures.ts, .../*.stories.svelte
Categorical buckets, filtered counts, selection state, loading/error state, fixtures, and panel rendering are added for categorical metadata distributions.
Categorical configuration and labeling
lightly_studio_view/src/lib/components/DatasetDistributionPanel/PanelHeader/*, .../DistributionConfigDialog/*, .../ExpandDialog/*
Distribution controls accept category-specific labels, sort mappings, manual items, and count-mode settings, with corresponding UI tests.
Chart interaction and visible bucket selection
lightly_studio_view/src/lib/components/BarChart/*, .../selectVisibleCounts.*, .../DatasetDistributionPanel.test.ts
Chart grid spacing and selectable clicks are configurable; manual selection uses stable IDs and top-N selection retains pinned items.
Categorical filter chip display
lightly_studio_view/src/lib/components/MetadataFilterChips/*
Categorical chip subtitles distinguish literal values from missing values while preserving numeric range formatting.

Estimated code review effort: 4 (Complex) | ~45 minutes

Sequence Diagram(s)

sequenceDiagram
  participant User
  participant DatasetDistributionPanel
  participant MetadataCategoricalFilter
  participant BarChart
  participant DistributionConfigDialog
  User->>MetadataCategoricalFilter: select categorical value
  MetadataCategoricalFilter->>DatasetDistributionPanel: toggle value
  DatasetDistributionPanel->>BarChart: render filtered buckets
  User->>BarChart: click bucket
  BarChart->>DatasetDistributionPanel: report selectable bucket
  User->>DistributionConfigDialog: configure values
  DistributionConfigDialog->>DatasetDistributionPanel: apply categorical configuration
Loading

Possibly related PRs

Suggested reviewers: leonardorosaa

🚥 Pre-merge checks | ✅ 4 | ❌ 1

❌ Failed checks (1 warning)

Check name Status Explanation Resolution
Docstring Coverage ⚠️ Warning Docstring coverage is 50.00% which is insufficient. The required threshold is 80.00%. Write docstrings for the functions missing them to satisfy the coverage threshold.
✅ Passed checks (4 passed)
Check name Status Explanation
Title check ✅ Passed The title clearly describes the main change: adding categorical metadata rendering to DatasetDistributionPanel.
Description check ✅ Passed The description includes the required sections and covers the change, testing, and changelog decision, though testing details are brief.
Linked Issues check ✅ Passed Check skipped because no linked issues were found for this pull request.
Out of Scope Changes check ✅ Passed Check skipped because no linked issues were found for this pull request.
✨ Finishing Touches 💡 1
📝 Generate docstrings 💡
  • Create stacked PR
  • Commit on current branch
🧪 Generate unit tests (beta)
  • Create PR with unit tests
  • Commit unit tests in branch feature/lig-9585-categorical-metadata-distribution.DatasetDistributionPanel

Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

❤️ Share

Comment @coderabbitai help to get the list of available commands.

@lightly-fast-track-bot

lightly-fast-track-bot Bot commented Jul 30, 2026

Copy link
Copy Markdown

❌  Fast Track: checks did not pass

Guardrail Result Message
dummy Always passes.
frontend/complexity 7 file(s) checked, no violations.
backend/complexity 0 file(s) checked.
backend/coverage 0 file(s) checked.
diff-size PR adds 694 line(s), which exceeds the limit of 215.
frontend/coverage [FAIL] lightly_studio_view/src/lib/components/DatasetDistributionPanel/DatasetDistributionPanel.stories.svelte: no test file found [FAIL] lightly_studio_view/src/lib/components/DatasetDistributionPanel/sourceFixtures.ts: no test file found [FAIL] lightly_studio_view/src/lib/components/DatasetDistributionPanel/types.ts: no test file found [FAIL] lightly_studio_view/src/lib/components/DatasetDistributionPanel/DatasetDistributionPanel.svelte: coverage data not found [FAIL] lightly_studio_view/src/lib/components/DatasetDistributionPanel/selectVisibleCounts.ts: coverage data not found

View the guardrail run

To run the guardrails locally, from fast_track/ run make install once, then make run-guardrails (or GUARDRAILS=<name1>,<name2> make run-guardrails for some guardrails).

Reflects cb2995d.

@ikondrat

Copy link
Copy Markdown
Contributor Author

/review

@coderabbitai coderabbitai Bot left a comment

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

🧹 Nitpick comments (2)
lightly_studio_view/src/lib/components/DatasetDistributionPanel/DatasetDistributionPanel.test.ts (1)

232-282: 📐 Maintainability & Code Quality | 🔵 Trivial | ⚡ Quick win

Uncovered categorical paths: onCategoricalValuesClear and filteredBuckets.

The new suite covers toggling, config, orientation, and load/error states, but not the clear-all callback (onCategoricalValuesClear) nor the background/foreground rendering driven by filteredBucketsfilteredCount, which is the main new visual contract in DatasetDistributionPanel.svelte (Lines 129-135). Adding two small cases here would lock that behavior in.

🤖 Prompt for AI Agents
Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.

In
`@lightly_studio_view/src/lib/components/DatasetDistributionPanel/DatasetDistributionPanel.test.ts`
around lines 232 - 282, Extend the DatasetDistributionPanel tests with two
focused cases: verify the clear-all interaction invokes onCategoricalValuesClear
for the relevant group, and verify filteredBuckets drives
filteredCount/background-versus-foreground rendering in the chart options. Reuse
the existing render and echartsMock patterns, and assert the resulting callback
arguments and visual data contract.
lightly_studio_view/src/lib/components/DatasetDistributionPanel/DatasetDistributionPanel.svelte (1)

176-192: 🎯 Functional Correctness | 🔵 Trivial | ⚡ Quick win

Orientation toggle freezes the categorical visible count at the current bucket count.

categoricalConfig only derives n from categoricalData.length while no config is stored for the group. As soon as any setCategoricalConfig call happens — including onToggleOrientation at Line 396, which is unrelated to top-N — the group's n is persisted at the then-current bucket count. If buckets later grow (refetch, different filter), bars beyond that stale n are hidden and a "Show all" hint appears without the user having configured anything.

Consider tracking orientation separately from the top-N config, or keeping mode: 'topN' auto-sized until the user explicitly applies a config from the dialog.

🤖 Prompt for AI Agents
Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.

In
`@lightly_studio_view/src/lib/components/DatasetDistributionPanel/DatasetDistributionPanel.svelte`
around lines 176 - 192, Update the categorical configuration flow around
categoricalConfig and setCategoricalConfig so orientation-only changes from
onToggleOrientation do not persist the current categoricalData.length as a fixed
n. Keep mode: 'topN' automatically sized to the latest bucket count until the
user explicitly applies a top-N configuration from the dialog, while preserving
explicitly configured n values.
🤖 Prompt for all review comments with AI agents
Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.

Nitpick comments:
In
`@lightly_studio_view/src/lib/components/DatasetDistributionPanel/DatasetDistributionPanel.svelte`:
- Around line 176-192: Update the categorical configuration flow around
categoricalConfig and setCategoricalConfig so orientation-only changes from
onToggleOrientation do not persist the current categoricalData.length as a fixed
n. Keep mode: 'topN' automatically sized to the latest bucket count until the
user explicitly applies a top-N configuration from the dialog, while preserving
explicitly configured n values.

In
`@lightly_studio_view/src/lib/components/DatasetDistributionPanel/DatasetDistributionPanel.test.ts`:
- Around line 232-282: Extend the DatasetDistributionPanel tests with two
focused cases: verify the clear-all interaction invokes onCategoricalValuesClear
for the relevant group, and verify filteredBuckets drives
filteredCount/background-versus-foreground rendering in the chart options. Reuse
the existing render and echartsMock patterns, and assert the resulting callback
arguments and visual data contract.

ℹ️ Review info
⚙️ Run configuration

Configuration used: Repository UI

Review profile: CHILL

Plan: Pro Plus

Run ID: b8e47f3c-91ff-4565-a935-e2464bfb80a8

📥 Commits

Reviewing files that changed from the base of the PR and between 1d521e7 and cb2995d.

📒 Files selected for processing (16)
  • lightly_studio_view/src/lib/components/BarChart/BarChart.svelte
  • lightly_studio_view/src/lib/components/DatasetDistributionPanel/DatasetDistributionPanel.stories.svelte
  • lightly_studio_view/src/lib/components/DatasetDistributionPanel/DatasetDistributionPanel.svelte
  • lightly_studio_view/src/lib/components/DatasetDistributionPanel/DatasetDistributionPanel.test.ts
  • lightly_studio_view/src/lib/components/DatasetDistributionPanel/DistributionConfigDialog/DistributionConfigDialog.svelte
  • lightly_studio_view/src/lib/components/DatasetDistributionPanel/DistributionConfigDialog/DistributionConfigDialog.test.ts
  • lightly_studio_view/src/lib/components/DatasetDistributionPanel/ExpandDialog/ExpandDialog.svelte
  • lightly_studio_view/src/lib/components/DatasetDistributionPanel/ExpandDialog/ExpandDialog.test.ts
  • lightly_studio_view/src/lib/components/DatasetDistributionPanel/PanelHeader/PanelHeader.svelte
  • lightly_studio_view/src/lib/components/DatasetDistributionPanel/PanelHeader/PanelHeader.test.ts
  • lightly_studio_view/src/lib/components/DatasetDistributionPanel/selectVisibleCounts.test.ts
  • lightly_studio_view/src/lib/components/DatasetDistributionPanel/selectVisibleCounts.ts
  • lightly_studio_view/src/lib/components/DatasetDistributionPanel/sourceFixtures.ts
  • lightly_studio_view/src/lib/components/DatasetDistributionPanel/types.ts
  • lightly_studio_view/src/lib/components/MetadataFilterChips/MetadataFilterChips.svelte
  • lightly_studio_view/src/lib/components/MetadataFilterChips/MetadataFilterChips.test.ts

@@ -12,12 +12,15 @@
import PanelHeader from './PanelHeader/PanelHeader.svelte';

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This component will be more than 500 lines long. Did you check whether we could factor it out?

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

2 participants