FE: filter-aware bar colours and dual-series background bars - #1740
Conversation
|
Important Review skippedAuto reviews are disabled on base/target branches other than the default branch. Please check the settings in the CodeRabbit UI or the ⚙️ Run configurationConfiguration used: Repository UI Review profile: CHILL Plan: Pro Run ID: You can disable this status message by setting the Use the checkbox below for a quick retry:
✨ Finishing Touches🧪 Generate unit tests (beta)
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. Comment |
❌ Fast Track: checks did not passFailed guardrails: frontend/complexity (Guardrail threw: Cannot find module 'eslint'
Reflects |
![chatgpt-codex-connector[bot]](https://avatars.githubusercontent.com/in/1144995?s=60&v=4){kind=small}
There was a problem hiding this comment.
💡 Codex Review
Here are some automated review suggestions for this pull request.
Reviewed commit: 2a71db8e96
ℹ️ 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".
| const filteredCount = | ||
| activeCategorical?.filteredBuckets !== undefined | ||
| ? (filteredBucket?.count ?? 0) |
There was a problem hiding this comment.
When categorical metadata has more than the endpoint's top-value limit, the full and filtered queries can return different bucket sets, so matching by id here misattributes the foreground counts. For example, a value grouped into the base Other bucket can become a concrete top bucket under a sidebar filter; the base Other bar then gets the filtered query's Other count (often 0) even though those filtered samples belong in that visible base bucket. Compute filtered counts against the same base bucket definitions before overlaying them.
Useful? React with 👍 / 👎.
| const categoricalMetadataFilteredDistributions = $derived( | ||
| categoricalMetadataFilteredQuery.data | ||
| ); |
There was a problem hiding this comment.
When a user changes sidebar filters after the first categorical response, useCategoricalMetadataDistribution keeps the previous result as placeholderData, so this value stays populated rather than becoming undefined while the new filtered query is in flight. The panel then renders foreground bars for the old filter until the request completes; gate filteredBuckets on the filtered query not being placeholder/fetching, or disable placeholder data for this second query.
Useful? React with 👍 / 👎.
|
|
||
| // Tooltip shows "Total / In filter" when a filter is active and actually | ||
| // reduces the hovered bar; otherwise shows the single "Count" line. | ||
| const formatter = (params: { name: string; value: number }[]) => { |
There was a problem hiding this comment.
This new inline formatter/series construction makes buildEchartsOption handle filter detection, tooltip rendering, foreground/background data shaping, and final option assembly in one large function; please split the formatter and series builders into small helpers so the chart logic stays readable and testable per the repo style guidance.
AGENTS.md reference: AGENTS.md:L39-L41
Useful? React with 👍 / 👎.
When the user selects one or more categorical metadata values the remaining bars now render in grey (#4b5563), matching the existing behaviour of the numeric Histogram where bins outside the selected range are dimmed. The white border on the selected bar has been removed because the green/grey colour contrast already communicates selection clearly. Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
Metadata distribution plots previously passed the full imageAnnotationCountsFilter to the histogram and categorical queries, causing bar heights to shrink as the user applied annotation, dimension, or metadata filters from the left sidebar. This made it hard to understand what was being filtered away because the original distribution context was lost. Introduce distributionBaseFilter — a derived value that omits the analysis filters (metadataFilters, annotationFilter, dimensionsValues) while retaining the collection-scoping context (tagIds, sampleIds, confusionCell, queryExpr). Both distribution queries now use this filter so bar heights always reflect the full dataset; the active selection is communicated through bar colour alone (green = in selection, grey = outside). Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
…al distributions When sidebar filters (annotation class, image dimensions, metadata of other fields) are active, categorical metadata bars previously shrank to show only the filtered counts, losing the original distribution as context. This change fetches a second distribution using the full sidebar filter (imageAnnotationCountsFilter) alongside the existing base-filter query, then passes the filtered counts as `filteredBuckets` to each categorical group. The bar chart renders two ECharts series when any bar's filteredCount differs from its full count: - Background series (grey, #374151): full unfiltered count — stable height - Foreground series (green/grey): filtered count — shows filter effect The tooltip updates to "Total / In filter" for bars where the filter actually reduces the count, falling back to the single-value "Count" line otherwise. When no filter is active the filtered query returns the same counts as the base query, so hasActiveFilter is false and a single series is rendered — no visual change from the pre-filter state. Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
2a71db8 to
4e90537
Compare
007379b to
14054f3
Compare
1 participant
Summary
Stacked on p14. Final visual layer — makes distribution charts aware of active sidebar filters.
Dim unselected bars: when the user has selected one or more categorical values the remaining bars render in grey (
#4b5563), matching numeric Histogram behaviour. The selected-bar border is removed — green/grey contrast communicates selection clearly without it.Keep full distribution visible (
+layout.svelte): introducesdistributionBaseFilter— a derived filter that strips analysis filters (metadata, annotation, dimensions) while keeping collection-scoping context (tagIds, sampleIds, etc.). Both distribution queries use this filter so bar heights always reflect the full dataset, not the currently filtered subset.Dual-series background bars (
buildEchartsOption,BarChart/types):CategoryCountgains an optionalfilteredCountfieldhasActiveFilteris false and a single series is rendered — no visual changeTest plan
make static-checks(frontend) passes (includes Prettier fix for the ternary inbuildEchartsOption)npm run test:unitpasses (new tests inbuildEchartsOption.test.tsfor the dual-series andhasActiveFilterlogic)Part of LIG-9585.