NickAkhmetov/Add slider controls to numeric legends by NickAkhmetov · Pull Request #2365 · vitessce/vitessce

NickAkhmetov · 2025-12-01T17:44:17Z

Background

This PR adds slider controls to the legend package and updates the legend package to use TypeScript.

The min/max values on numeric legends now allow users to click and drag/use keyboard controls to set the min/max values for the legend.

Change List

Add legend controls for slider.
Convert legend package to native TS.

Checklist

Have tested PR with one or more demo configurations
Documentation added, updated, or not applicable

Screen.Recording.2025-12-01.124230.mp4

Screen.Recording.2025-12-01.124313.mp4

…encies

github-actions · 2025-12-02T17:54:12Z

Size Change: +92.8 kB (+1.26%)

Total Size: 7.44 MB

Filename	Size	Change
`./packages/main/prod/dist/index-********.js`	235 kB	+92.8 kB (+65.39%)	🆘
`./packages/main/prod/dist/lzw-********.js`	0 B	-2.07 kB (removed)	🏆
`./packages/main/prod/dist/ReactNeuroglancer-********.js`	0 B	-1.67 MB (removed)	🏆
`./packages/main/prod/dist/lzw-CFcni1-O.js`	2.07 kB	+2.07 kB (new file)	🆕
`./packages/main/prod/dist/ReactNeuroglancer-Dp-ZkbIj.js`	1.67 MB	+1.67 MB (new file)	🆕

ℹ️ View Unchanged

Filename	Size	Change
`./packages/main/prod/dist/blosc-********.js`	612 kB	0 B
`./packages/main/prod/dist/chunk-INHXZS53-********.js`	558 B	0 B
`./packages/main/prod/dist/deflate-oPeRim-T.js`	0 B	-208 B (removed)	🏆
`./packages/main/prod/dist/higlass-********.js`	3.57 MB	0 B
`./packages/main/prod/dist/index.min.js`	1.38 kB	0 B
`./packages/main/prod/dist/jpeg-********.js`	15.6 kB	0 B
`./packages/main/prod/dist/lerc-********.js`	89.3 kB	0 B
`./packages/main/prod/dist/lz4-********.js`	43.9 kB	0 B
`./packages/main/prod/dist/OrbitControls-********.js`	229 kB	0 B
`./packages/main/prod/dist/packbits-********.js`	541 B	0 B
`./packages/main/prod/dist/pako.esm-********.js`	37.1 kB	0 B
`./packages/main/prod/dist/raw-********.js`	133 B	0 B
`./packages/main/prod/dist/troika-three-text.esm-********.js`	179 kB	0 B
`./packages/main/prod/dist/webimage-********.js`	801 B	0 B
`./packages/main/prod/dist/zstd-********.js`	754 kB	0 B
`./packages/main/prod/dist/deflate-********.js`	208 B	+208 B (new file)	🆕

_{compressed-size-action}

github-actions · 2025-12-02T17:59:38Z

Coverage Report

Status	Category	Percentage	Covered / Total
🔵	Lines	13.62%	9130 / 67033
🔵	Statements	13.62%	9130 / 67033
🔵	Functions	48.56%	525 / 1081
🔵	Branches	67.39%	1395 / 2070

File Coverage

File	Stmts	Branches	Functions	Lines	Uncovered Lines
Changed Files
packages/legend/src/Legend.tsx	0%	0%	0%	0%	1-801
packages/legend/src/types.ts	100%	100%	100%	100%
packages/view-types/heatmap/src/HeatmapSubscriber.js	0%	0%	0%	0%	1-323
packages/view-types/scatterplot-embedding/src/EmbeddingScatterplotSubscriber.js	0%	0%	0%	0%	1-679
packages/view-types/spatial/src/SpatialSubscriber.js	0%	0%	0%	0%	1-732

Generated in workflow #4708 for commit 85c93a4 by the Vitest Coverage Report Action

keller-mark · 2025-12-02T18:14:39Z

It looks really great! Can we fix these two minor UI things:

The opacity of the tooltip triangle
The offset of the text and axis line/ticks

NickAkhmetov · 2025-12-02T18:39:58Z

There we go!

The opacity of the tooltip triangle

The offset of the text and axis line/ticks

packages/legend/src/MultiLegend.tsx

keller-mark · 2025-12-03T14:26:49Z

packages/legend/src/Legend.tsx

+  // Determine if interactive slider should be shown
+  const showInteractiveSlider = (
+    setFeatureValueColormapRange
+    && ['geneSelection', 'geneExpression'].includes(obsColorEncoding ?? '')


Suggested change

&& ['geneSelection', 'geneExpression'].includes(obsColorEncoding ?? '')

&& obsColorEncoding === 'geneSelection'

This change would make it so we don't display an interactive slider for the heatmap in e.g. https://vitessce.io/#?dataset=codeluppi-2018

We show "Gene Expression" in the UI, but "geneExpression" should not be a valid value here

vitessce/packages/main/all/src/base-plugins.ts

Line 486 in e2ce2e4

z.enum(['geneSelection', 'cellSetSelection', 'spatialChannelColor', 'spatialLayerColor', 'obsLabels']),

Ah my bad, I see what you mean now, we do use this value here as a prop

vitessce/packages/view-types/heatmap/src/HeatmapSubscriber.js

Line 312 in e2ce2e4

obsColorEncoding="geneExpression"

so please ignore my suggestion above.

I guess this is why typescript is helpful. Can we leave a comment about this in the code here?

I added an explanatory comment, thanks for the clarification 👍🏻

packages/legend/src/ChannelNamesLegend.tsx

keller-mark · 2025-12-03T14:42:32Z

packages/legend/src/Legend.tsx

+        .style('fill', foregroundColor);
+
+      if (hasSubLabel) {
+        g


Would it be possible to render this text above the gradient but still below the slider handle?

http://localhost:3000/?dataset=spatialdata-visium_hd

Should be fixed now:

packages/legend/src/ChannelNamesLegend.tsx

keller-mark · 2025-12-03T14:53:50Z

A few small comments, then it looks good to merge

packages/legend/src/Legend.tsx

Co-authored-by: Mark Keller <7525285+keller-mark@users.noreply.github.com>

NickAkhmetov added 4 commits December 1, 2025 11:49

add sliders to legend

c45a124

convert to .ts

e051255

Ensure heatmap legend is controllable as well

14ef082

Add changeset

f69ae82

NickAkhmetov requested a review from keller-mark December 1, 2025 17:44

NickAkhmetov added 2 commits December 2, 2025 12:40

add missing type definitions

fa41ecd

reorder packages so the legend package is built after its util depend…

f728712

…encies

Fix tick offset, fix opacity of tooltip triangle

28793f0

keller-mark requested changes Dec 3, 2025

View reviewed changes

Fixes from review

cf2aa01

keller-mark reviewed Dec 3, 2025

View reviewed changes

packages/legend/src/Legend.tsx Outdated Show resolved Hide resolved

keller-mark approved these changes Dec 3, 2025

View reviewed changes

Update packages/legend/src/Legend.tsx

85c93a4

Co-authored-by: Mark Keller <7525285+keller-mark@users.noreply.github.com>

NickAkhmetov merged commit 2164057 into main Dec 3, 2025
7 checks passed

NickAkhmetov deleted the nickakhmetov/fix-2347 branch December 3, 2025 16:07

github-actions bot mentioned this pull request Dec 2, 2025

Create release #2367

Merged

	&& ['geneSelection', 'geneExpression'].includes(obsColorEncoding ?? '')
	&& obsColorEncoding === 'geneSelection'

Conversation

NickAkhmetov commented Dec 1, 2025

Background

Change List

Checklist

Uh oh!

github-actions bot commented Dec 2, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

github-actions bot commented Dec 2, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Coverage Report

Uh oh!

keller-mark commented Dec 2, 2025

Uh oh!

NickAkhmetov commented Dec 2, 2025

Uh oh!

Uh oh!

keller-mark Dec 3, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

NickAkhmetov Dec 3, 2025

Choose a reason for hiding this comment

Uh oh!

keller-mark Dec 3, 2025

Choose a reason for hiding this comment

Uh oh!

keller-mark Dec 3, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

NickAkhmetov Dec 3, 2025

Choose a reason for hiding this comment

Uh oh!

Uh oh!

keller-mark Dec 3, 2025

Choose a reason for hiding this comment

Uh oh!

NickAkhmetov Dec 3, 2025

Choose a reason for hiding this comment

Uh oh!

Uh oh!

keller-mark commented Dec 3, 2025

Uh oh!

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

2 participants

github-actions bot commented Dec 2, 2025 •

edited

Loading

github-actions bot commented Dec 2, 2025 •

edited

Loading

keller-mark Dec 3, 2025 •

edited

Loading

keller-mark Dec 3, 2025 •

edited

Loading