Skip to content

FE: categorical filter chips and page wiring#1735

Open
ikondrat wants to merge 2 commits into
kondrat-lig-9585-frontend-categorical-metadata-bar-chart-filter-ui-8-sp.p9from
kondrat-lig-9585-frontend-categorical-metadata-bar-chart-filter-ui-8-sp.p10
Open

FE: categorical filter chips and page wiring#1735
ikondrat wants to merge 2 commits into
kondrat-lig-9585-frontend-categorical-metadata-bar-chart-filter-ui-8-sp.p9from
kondrat-lig-9585-frontend-categorical-metadata-bar-chart-filter-ui-8-sp.p10

Conversation

@ikondrat

Copy link
Copy Markdown
Contributor

Summary

Stacked on p9.

MetadataFilterChips / useMetadataFilterChips: tracks categorical selections and emits chips with disambiguated labels — Missing (location) for the sentinel bucket vs "Missing" (location) for samples whose literal value is the string "Missing".

Collection layout + video pages: the layout now fetches categorical distributions (useCategoricalMetadataDistribution), exposes toggleCategoricalValue / clearCategoricalField handlers to DatasetDistributionPanel, and merges categoricalMetadataValues into the shared metadataFilters. The frames and videos pages forward the same values to their respective filter hooks.

Test plan

  • make static-checks (frontend) passes
  • npm run test:unit passes (updated useMetadataFilterChips tests, new layout tests)
  • Manual: click a bar in the categorical distribution, verify a filter chip appears; click the chip's ✕, verify the selection clears

Part of LIG-9585.

@ikondrat
ikondrat requested a review from a team as a code owner July 22, 2026 16:11
@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: 645289d3-d1bd-4955-95ce-4e4ff2724111

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.p10

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

Failed guardrails: frontend/complexity (Guardrail threw: Cannot find module 'eslint'
Require stack:

  • /home/runner/work/lightly-studio/lightly-studio/lightly_studio_view/package.json), frontend/coverage ( [FAIL] lightly_studio_view/src/routes/datasets/[dataset_id]/[collection_type]/[collection_id]/frames/+page.svelte: no test file found
    [FAIL] lightly_studio_view/src/routes/datasets/[dataset_id]/[collection_type]/[collection_id]/videos/+page.svelte: no test file found
    [FAIL] lightly_studio_view/src/lib/components/MetadataFilterChips/MetadataFilterChips.svelte: coverage data not found
    [FAIL] lightly_studio_view/src/lib/components/MetadataFilterChips/useMetadataFilterChips.svelte.ts: coverage data not found
    [FAIL] lightly_studio_view/src/routes/datasets/[dataset_id]/[collection_type]/[collection_id]/+layout.svelte: coverage data not found)
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 168 line(s) (limit: 215).
frontend/coverage [FAIL] lightly_studio_view/src/routes/datasets/[dataset_id]/[collection_type]/[collection_id]/frames/+page.svelte: no test file found [FAIL] lightly_studio_view/src/routes/datasets/[dataset_id]/[collection_type]/[collection_id]/videos/+page.svelte: no test file found [FAIL] lightly_studio_view/src/lib/components/MetadataFilterChips/MetadataFilterChips.svelte: coverage data not found [FAIL] lightly_studio_view/src/lib/components/MetadataFilterChips/useMetadataFilterChips.svelte.ts: coverage data not found [FAIL] lightly_studio_view/src/routes/datasets/[dataset_id]/[collection_type]/[collection_id]/+layout.svelte: coverage data not found

Reflects 09a545f.

@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: 52599bb51c

ℹ️ 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 +148 to +149
if (value === null) return hasMissingValue ? 'Missing (no value)' : 'Missing';
if (value === 'Missing' && hasNoValue) return 'Missing (value)';

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 Preserve Missing disambiguation for single selections

For a categorical field that contains both absent values and the literal string Missing, selecting only one of those buckets renders the chip as plain Missing because the formatter only disambiguates when the other value is also selected. This makes the active filter ambiguous even though the distribution picker distinguishes the two buckets; label null and literal Missing independently, or carry the bucket label into the chip.

Useful? React with 👍 / 👎.

Comment on lines +13 to +14
range?: Range;
values?: CategoricalMetadataValue[];

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 Make chip variants a discriminated union

Because kind already distinguishes numeric from categorical chips, keeping both range and values optional permits impossible chip shapes and forces defensive rendering checks. Model this as separate numeric/categorical variants so numeric chips must carry a range and categorical chips must carry values.

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

Useful? React with 👍 / 👎.

ikondrat and others added 2 commits July 22, 2026 19:04
useMetadataFilterChips now tracks categorical selections and produces chips
with a disambiguated label format for literal 'Missing'/'Other' values vs
the sentinel missing bucket.

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
…pages

The layout fetches categorical distributions, exposes toggle/clear handlers
to DatasetDistributionPanel, and passes categoricalMetadataValues into the
shared metadataFilters. Frames and videos pages forward the same values to
their respective filter hooks.

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
@ikondrat
ikondrat force-pushed the kondrat-lig-9585-frontend-categorical-metadata-bar-chart-filter-ui-8-sp.p10 branch from 52599bb to 09a545f Compare July 22, 2026 17:06
@ikondrat
ikondrat force-pushed the kondrat-lig-9585-frontend-categorical-metadata-bar-chart-filter-ui-8-sp.p9 branch from 8755105 to 6982778 Compare July 22, 2026 17:06
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