Skip to content

FE: categorical distribution orientation toggle and spacing polish - #1739

Open
ikondrat wants to merge 4 commits into
kondrat-lig-9585-frontend-categorical-metadata-bar-chart-filter-ui-8-sp.p12from
kondrat-lig-9585-frontend-categorical-metadata-bar-chart-filter-ui-8-sp.p14
Open

FE: categorical distribution orientation toggle and spacing polish#1739
ikondrat wants to merge 4 commits into
kondrat-lig-9585-frontend-categorical-metadata-bar-chart-filter-ui-8-sp.p12from
kondrat-lig-9585-frontend-categorical-metadata-bar-chart-filter-ui-8-sp.p14

Conversation

@ikondrat

Copy link
Copy Markdown
Contributor

Summary

Stacked on p13. Polish and UX — no new data fetching or filter logic.

Spacing polish (BarChart.svelte, DatasetDistributionPanel, ExpandDialog, PanelHeader, Histogram):

  • Consistent gap between chart header and chart body across numeric histograms and categorical bar charts
  • BarChart gains an explicit height prop instead of relying on implicit container sizing
  • Bar label padding tightened

Orientation toggle (DatasetDistributionPanel, ExpandDialog, PanelHeader):

  • Toggle button in the panel header switches between vertical and horizontal bar chart layouts
  • Chosen orientation is persisted in the distribution config so it survives re-renders
  • ExpandDialog mirrors the orientation from the panel config

Normalization (DatasetDistributionPanel, ExpandDialog, PanelHeader): unified spacing constants so both numeric and categorical distribution groups look consistent.

Test plan

  • make static-checks (frontend) passes
  • npm run test:unit passes (updated render tests for DatasetDistributionPanel, ExpandDialog, PanelHeader, buildHistogramOption)
  • Manual: click the orientation toggle on a categorical chart — verify it switches; check spacing looks uniform next to numeric histograms

Part of LIG-9585.

@ikondrat
ikondrat requested a review from a team as a code owner July 22, 2026 16:12
@coderabbitai

coderabbitai Bot commented Jul 22, 2026

Copy link
Copy Markdown
Contributor

Important

Review skipped

Auto reviews are disabled on base/target branches other than the default branch.

Please check the settings in the CodeRabbit UI or the .coderabbit.yaml file in this repository. To trigger a single review, invoke the @coderabbitai review command.

⚙️ Run configuration

Configuration used: Repository UI

Review profile: CHILL

Plan: Pro

Run ID: 30d52571-6913-4a7c-8bef-e362deb6481a

You can disable this status message by setting the reviews.review_status to false in the CodeRabbit configuration file.

Use the checkbox below for a quick retry:

  • 🔍 Trigger review
✨ Finishing Touches
🧪 Generate unit tests (beta)
  • Create PR with unit tests
  • Commit unit tests in branch kondrat-lig-9585-frontend-categorical-metadata-bar-chart-filter-ui-8-sp.p14

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 22, 2026

Copy link
Copy Markdown

❌  Fast Track: checks did not pass

Guardrail Result Message
dummy Always passes.
frontend/complexity Guardrail threw: Cannot find module 'eslint' Require stack: - /home/runner/work/lightly-studio/lightly-studio/lightly_studio_view/package.json
backend/complexity 0 file(s) checked.
backend/coverage 0 file(s) checked.
diff-size PR adds 364 line(s), which exceeds the limit of 215.
frontend/coverage [FAIL] lightly_studio_view/src/lib/components/BarChart/BarChart.svelte: coverage data not found [FAIL] lightly_studio_view/src/lib/components/BarChart/buildEchartsOption.ts: coverage data not found [FAIL] lightly_studio_view/src/lib/components/DatasetDistributionPanel/DatasetDistributionPanel.svelte: coverage data not found [FAIL] lightly_studio_view/src/lib/components/DatasetDistributionPanel/ExpandDialog/ExpandDialog.svelte: coverage data not found [FAIL] lightly_studio_view/src/lib/components/DatasetDistributionPanel/PanelHeader/PanelHeader.svelte: coverage data not found [FAIL] lightly_studio_view/src/lib/components/Histogram/buildHistogramOption.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 14054f3.

@chatgpt-codex-connector chatgpt-codex-connector Bot left a comment

Copy link
Copy Markdown

Choose a reason for hiding this comment

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

💡 Codex Review

Here are some automated review suggestions for this pull request.

Reviewed commit: 007379b688

ℹ️ About Codex in GitHub

Your team has set up Codex to review pull requests in this repo. Reviews are triggered when you

  • Open a pull request for review
  • Mark a draft as ready
  • Comment "@codex review".

If Codex has suggestions, it will comment; otherwise it will react with 👍.

Codex can also answer questions or update the PR. Try commenting "@codex address that feedback".

Comment on lines +383 to +385
setCategoricalConfig({
...categoricalConfig,
orientation:

Copy link
Copy Markdown

Choose a reason for hiding this comment

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

P2 Badge Avoid freezing the default categorical top-N

When a categorical field is still using its default config, this stores the whole categoricalConfig just to change orientation, including n as the current categoricalData.length. If that same field later refetches with more buckets, for example after clearing filters that previously narrowed it to a few values, selectVisibleCounts will keep showing only the old top-N even though the user only toggled orientation. Update only the orientation or keep the default n dynamic until the user actually changes the visible-value config.

Useful? React with 👍 / 👎.

{totalCount}
onBarClick={activeCategorical ? handleCategoricalBarClick : onBarClick}
emptyState={activeCategorical ? categoricalEmptyState : undefined}
gridTopPx={4}

Copy link
Copy Markdown

Choose a reason for hiding this comment

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

P2 Badge Name the shared chart top padding

This raw spacing value is now repeated in the panel BarChart call, the expanded dialog, histogram grid setup, and tests, so future spacing tweaks require hunting down several unrelated 4s and the intent is easy to lose. Please define a shared named constant for the compact chart top padding and reuse it across these chart variants.

AGENTS.md reference: AGENTS.md:L39-L41

Useful? React with 👍 / 👎.

@ikondrat
ikondrat force-pushed the kondrat-lig-9585-frontend-categorical-metadata-bar-chart-filter-ui-8-sp.p13 branch from 7a34385 to c2eea76 Compare July 22, 2026 17:06
@ikondrat
ikondrat force-pushed the kondrat-lig-9585-frontend-categorical-metadata-bar-chart-filter-ui-8-sp.p14 branch from 007379b to 14054f3 Compare July 22, 2026 17:06
@ikondrat
ikondrat changed the base branch from kondrat-lig-9585-frontend-categorical-metadata-bar-chart-filter-ui-8-sp.p13 to kondrat-lig-9585-frontend-categorical-metadata-bar-chart-filter-ui-8-sp.p12 July 24, 2026 09:58
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.

1 participant