feat: Connect points with lines

[ShrimpCryptid]

Problem

Part 1 of 2 for #248, "line plots for time series."

This PR adds a UI for drawing lines between points in the scatterplot, based on a category and a numeric feature. Points belonging to the same category have a line drawn between in sorted order based on the feature.

The next change in this series will add UI for controlling additional line settings (e.g. line width, color, and smoothing).

Estimated review size: medium-large, 30-40 minutes

Solution

• Added state + selectors for two features-- the feature used to group points, and the feature used to order the points for line drawing-- and whether or not to show connecting lines/
  • A typical use case would be organizing points by the timelapse they belong to, and sorting by time.
  • Added URL serialization + deserialization.
• Updated selectors for plot data to include calculating a line trace for all points.
• Added UI controls for updating line connection settings.

Type of change

• New feature (non-breaking change which adds functionality)

Steps to Verify:

1. Open PR preview. Lines will be visible onscreen. https://allencell.github.io/cell-feature-explorer/pr-preview/pr-296/?cellSelectedFor3D=1273&colorBy=trajectory_id&dataset=csv&csvUrl=https%253A%252F%252Fvast-files.int.allencell.org%252Fusers%252Fmajid.farhadloo%252F2026-07-23%252Fdetect_normal_abnormal_growth%252Flumenoid_laca_8593__frame_embeddings.csv&plotByOnX=pacmap_y&plotByOnY=pacmap_x&groupBy=trajectory_id&connectBy=true&connectByCategory=trajectory_id&connectByFeature=timepoint&selectedPoint%5B0%5D=1273
2. Toggle off all groups, and enable them one at a time to see the individual lines.
3. Toggle line visibility on and off.
4. Change the sorting feature to another feature.

Screenshots (optional):

Keyfiles (delete if not relevant):

1. ConnectByControl/index.tsx
2. MainPlotContainer/selectors.ts

Thanks for contributing!

[github-actions]

PR Preview Action v1.6.3
🚀 View preview at https://AllenCell.github.io/cell-feature-explorer/pr-preview/pr-296/
Built to branch gh-pages at 2026-08-10 23:06 UTC. Preview will be ready when the GitHub Pages deployment is complete.

[ShrimpCryptid]

I added some additional documentation to this dropdown because I felt that the existing API was a little unclear. I'm styling the new dropdown for controlling line connections in the file above this one (ConnectByControl/style.css) and passing in the style classname instead of defining another class key.

[ShrimpCryptid]

New control component in CFE's plot configuration sidebar!

[Copilot]

Pull request overview

Adds a first-pass “connect points with lines” capability to the main scatter plot, enabling line traces grouped by a categorical feature and ordered by a numeric feature, with corresponding UI controls and URL/state integration.

Changes:

• Introduces new selection state for line-connection settings (category, ordering feature, visibility) and attempts to serialize/deserialize these via URL params.
• Extends plot selectors to compute per-group line traces and renders them as Plotly line traces.
• Adds UI controls (checkbox + feature dropdowns) to configure line connections, plus dataset defaults for the ordering feature.

Reviewed changes

Copilot reviewed 18 out of 18 changed files in this pull request and generated 5 comments.

Show a summary per file

File	Description
src/util/UrlState.ts	Adds URL params and mappings for line-connection settings.
src/state/types.ts	Introduces LinePlotData type for line trace construction.
src/state/selection/types.ts	Adds new selection-state fields and action interfaces for line connections.
src/state/selection/selectors.ts	Adds selectors for connect-by fields and visibility flag.
src/state/selection/reducer.ts	Adds reducer handlers and initial state for connect-by settings.
src/state/selection/logics.ts	Initializes connect-by defaults when datasets change.
src/state/selection/constants.ts	Adds action constants for connect-by settings and visibility toggle.
src/state/selection/actions.ts	Adds action creators for connect-by settings and visibility toggle.
src/state/image-dataset/types.ts	Extends dataset default selections with defaultConnectBy.
src/state/image-dataset/json-dataset/index.ts	Reads connectBy.default into dataset selections.
src/state/image-dataset/firebase/index.ts	Reads optional Firebase connectBy.default into dataset selections.
src/state/image-dataset/csv-dataset/index.ts	Heuristically selects a default “time/frame” feature for ordering lines.
src/containers/MainPlotContainer/selectors.ts	Computes and injects Plotly line traces into the main plot data array.
src/containers/ColorByMenu/index.tsx	Adds the new connect-by control to the existing menu UI.
src/constants/index.ts	Adds a general plot setting for connection line width.
src/components/FeatureSelectDropdown/index.tsx	Adds className override and optional id forwarding to the underlying Select.
src/components/ConnectByControl/style.css	Styles the new connect-by UI row and dropdown sizing.
src/components/ConnectByControl/index.tsx	Implements the connect-by UI control and wires it to selection state/actions.

Suppressed comments (1)

src/util/UrlState.ts:282

• toUrlSearchParameterMap serializes a connectBy selection key, but the selection state uses showConnectedPoints. As a result, toggling line connections won’t round-trip into the URL.

        connectBy: (value) => ({ [URLSearchParam.connectBy]: String(value) }),

---

💡 Add a code-review agent skill or configure MCP servers for context-aware, tailored reviews. Learn more in the docs.