[WIP] Update highlighted points when time changes

src/components/App.tsx

@@ -37,6 +37,7 @@
     // PointCanvas is a Three.js canvas, updated via reducer
     const [canvas, dispatchCanvas, sceneDivRef] = usePointCanvas(initialViewerState);
     const numTracksLoaded = canvas.tracks.size;
+    const numPointsHighlighted = canvas.selectedPointIndices.length;
     const trackHighlightLength = canvas.maxTime - canvas.minTime;
 
     // this state is pure React
@@ -184,7 +185,7 @@
             },
         );
         // TODO: add missing dependencies
     }, [canvas.selectedPoints]);
 
     // playback time points
     // TODO: this is basic and may drop frames
@@ -245,7 +246,8 @@
                             clearTracks={() => {
                                 dispatchCanvas({ type: ActionType.REMOVE_ALL_TRACKS });
                             }}
-                            numSelectedCells={numTracksLoaded}
+                            numTracksLoaded={numTracksLoaded}
+                            numPointsHighlighted={numPointsHighlighted}
                             trackManager={trackManager}
                             pointBrightness={canvas.pointBrightness}
                             setPointBrightness={(brightness: number) => {

src/components/CellControls.tsx

@@ -7,7 +7,8 @@ import { TrackManager } from "@/lib/TrackManager";
 
 interface CellControlsProps {
     clearTracks: () => void;
-    numSelectedCells?: number;
+    numTracksLoaded?: number;
+    numPointsHighlighted?: number;
     trackManager: TrackManager | null;
     pointBrightness: number;
     setPointBrightness: (value: number) => void;
@@ -31,7 +32,10 @@ export default function CellControls(props: CellControlsProps) {
                 </SmallCapsButton>
             </Box>
             <FontS>
-                <strong>{props.numSelectedCells ?? 0}</strong> cells selected
+                <strong>{props.numTracksLoaded ?? 0}</strong> cells selected
+            </FontS>
+            <FontS>
+                <strong>{props.numPointsHighlighted ?? 0}</strong> points highlighted
             </FontS>
             <label htmlFor="selection-mode-control">
                 <ControlLabel>Selection Mode</ControlLabel>
@@ -52,7 +56,7 @@ export default function CellControls(props: CellControlsProps) {
             <InputSlider
                 id="points-brightness-slider"
                 aria-labelledby="input-slider-points-brightness-slider"
-                disabled={!props.numSelectedCells}
+                disabled={!props.numTracksLoaded}
                 min={0}
                 max={100}
                 valueLabelDisplay="on"

src/hooks/usePointCanvas.ts

@@ -136,6 +136,7 @@ function reducer(canvas: PointCanvas, action: PointCanvasAction): PointCanvas {
             newCanvas.controls.autoRotate = action.autoRotate;
             break;
         case ActionType.HIGHLIGHT_POINTS:
+            newCanvas.selectedPointIndices = action.points;
             newCanvas.highlightPoints(action.points);
             break;
         case ActionType.INIT_POINTS_GEOMETRY:
@@ -148,6 +149,7 @@ function reducer(canvas: PointCanvas, action: PointCanvasAction): PointCanvas {
         case ActionType.POINTS_POSITIONS:
             newCanvas.setPointsPositions(action.positions);
             newCanvas.resetPointColors();
+            newCanvas.updateSelectedPointIndices();
             break;
         case ActionType.REMOVE_ALL_TRACKS:
             newCanvas.removeAllTracks();

src/lib/PointCanvas.ts

@@ -38,6 +38,7 @@ export class PointCanvas {
     readonly selector: PointSelector;
 
     readonly tracks: Tracks = new Map();
+    selectedPointIndices: number[] = [];
 
     showTracks = true;
     showTrackHighlights = true;
@@ -124,6 +125,18 @@ export class PointCanvas {
         this.controls.update();
     };
 
+    updateSelectedPointIndices() {
+        const idOffset = this.curTime * this.maxPointsPerTimepoint;
+        this.selectedPointIndices = [];
+        for (const track of this.tracks.values()) {
+            if (this.curTime < track.startTime || this.curTime > track.endTime) continue;
+            const timeIndex = this.curTime - track.startTime;
+            const pointId = track.pointIds[timeIndex];
+            this.selectedPointIndices.push(pointId - idOffset);
+        }
+        this.highlightPoints(this.selectedPointIndices);
+    }
+
     setCameraProperties(position?: Vector3, target?: Vector3) {
         position && this.camera.position.set(position.x, position.y, position.z);
         target && this.controls.target.set(target.x, target.y, target.z);

src/lib/three/Track.ts

@@ -16,6 +16,9 @@ export class Track extends Mesh {
     type = "Track";
     declare geometry: TrackGeometry;
     declare material: TrackMaterial;
+    pointIds: Int32Array = new Int32Array(0);
+    startTime: number = -1;
+    endTime: number = -1;
 
     static new(positions: Float32Array, pointIDs: Int32Array, maxPointsPerTimepoint: number) {
         const geometry = new TrackGeometry();
@@ -44,6 +47,12 @@ export class Track extends Mesh {
         track.geometry.setColors(colors);
         track.geometry.setTime(time);
         track.geometry.computeBoundingSphere();
+
+        track.pointIds = pointIDs;
+        if (time.length > 0) {
+            track.startTime = time[0];
+            track.endTime = time[time.length - 1];
+        }
         return track;
     }