Hoover curson over cells for info

CONFIG.ts

@@ -11,7 +11,8 @@ const config = {
     // When opening the viewer, or refreshing the page, the viewer will revert to the following default dataset
     data:{
         // Default dataset URL (must be publically accessible)
-        default_dataset: "https://public.czbiohub.org/royerlab/zoo/Zebrafish/tracks_zebrafish_bundle.zarr/"
+        // default_dataset: "https://public.czbiohub.org/royerlab/zoo/Zebrafish/tracks_zebrafish_bundle.zarr/"
+        default_dataset: "https://public.czbiohub.org/royerlab/zoo/Ascidian/tracks_ascidian_bundle.zarr/"
     },
 
     // Default settings for certain parameters
@@ -32,7 +33,7 @@ const config = {
         highlight_point_color: [0.9, 0, 0.9], //pink
 
         // Point color (when selector hovers over)
-        preview_hightlight_point_color: [0.8, 0.8, 0], //yellow
+        preview_hightlight_point_color: [0.8, 0.8, 0.0], //yellow
 
     }
 }

src/components/App.tsx

@@ -15,7 +15,7 @@
 import { TrackManager, loadTrackManager } from "@/lib/TrackManager";
 import { PointSelectionMode } from "@/lib/PointSelector";
 import LeftSidebarWrapper from "./leftSidebar/LeftSidebarWrapper";
-// import { TimestampOverlay } from "./overlays/TimestampOverlay";
+import { TimestampOverlay } from "./overlays/TimestampOverlay";
 import { ColorMap } from "./overlays/ColorMap";
 import { TrackDownloadData } from "./DownloadButton";
 
@@ -269,7 +269,7 @@
         }
 
         // TODO: add missing dependencies
     }, [trackManager, dispatchCanvas, canvas.selectedPointIds]);
 
     // playback time points
     // TODO: this is basic and may drop frames
@@ -487,6 +487,7 @@
                 >
                     <Scene isLoading={isLoadingPoints || numLoadingTracks > 0} />
                     {/* <TimestampOverlay timestamp={canvas.curTime} /> */}
+                    <TimestampOverlay timestamp={canvas.selector.sphereSelector.closestIndex} />
                     <ColorMap />
                 </Box>
 

src/components/overlays/TimestampOverlay.tsx

@@ -2,20 +2,20 @@ import { Tag } from "@czi-sds/components";
 import "@czi-sds/components/dist/variables.css";
 
 interface TimestampOverlayProps {
-    timestamp: number; // Currently timestamp is a frame number, but it could be the actual timestamp
+    timestamp: number | undefined; // Currently timestamp is a frame number, but it could be the actual timestamp
 }
 
 export const TimestampOverlay = (props: TimestampOverlayProps) => {
     return (
         <Tag
-            label={props.timestamp.toString()}
+            label={props.timestamp !== undefined ? `cell = ${props.timestamp.toString()}` : "-"}
             sdsStyle="square"
             sdsType="secondary"
             size="small"
             sx={{
                 position: "absolute",
                 bottom: "0.5rem",
-                left: "16.5rem",
+                left: "0.5rem",
                 backgroundColor: "rgba(255, 255, 255, 0.6)",
                 zIndex: 100,
                 borderRadius: "var(--sds-corner-m)",

src/lib/SpherePointSelector.ts

@@ -32,6 +32,7 @@ export class SpherePointSelector {
     readonly selectionChanged: SelectionChanged;
     readonly selectionPreviewChanged: SelectionPreviewChanged;
     readonly pointer = new Vector2(0, 0);
+    closestIndex: number | undefined = undefined;
 
     // True if this should not respond to pointer movements, false otherwise.
     cursorLock = true;
@@ -149,6 +150,9 @@ export class SpherePointSelector {
         this.pointer.y = (-(event.clientY - canvasElement.top) / canvasElement.height) * 2 + 1;
         this.raycaster.setFromCamera(this.pointer, this.camera);
         const intersects = this.raycaster.intersectObject(this.points);
+
+        const closestIndex = this.findClosestPointsToSelector();
+        this.closestIndex = closestIndex;
         if (intersects.length > 0) {
             this.cursor.position.set(intersects[0].point.x, intersects[0].point.y, intersects[0].point.z);
             this.findPointsWithinSelector();
@@ -199,6 +203,37 @@ export class SpherePointSelector {
         return selected;
     }
 
+    findClosestPointsToSelector(): number | undefined {
+        // find the points within the cursor sphere
+        const normalMatrix = new Matrix3();
+        normalMatrix.setFromMatrix4(this.cursor.matrixWorld);
+        normalMatrix.invert();
+        const center = this.cursor.position;
+        const geometry = this.points.geometry;
+
+        // Check if geometry has a valid 'position' attribute (not the case in the beginning of the app, when the eventListerer of the cursor already call this function)
+        if (!geometry || !geometry.getAttribute("position") || geometry.getAttribute("position").count === 0) {
+            return;
+        }
+
+        const positions = geometry.getAttribute("position");
+        const numPoints = positions.count;
+        let closestDistance: number = Infinity;
+        let closestIndex: number = -1;
+        for (let i = 0; i < numPoints; i++) {
+            const x = positions.getX(i);
+            const y = positions.getY(i);
+            const z = positions.getZ(i);
+            const vecToCenter = new Vector3(x, y, z).sub(center);
+            const scaledVecToCenter = vecToCenter.applyMatrix3(normalMatrix);
+            if (scaledVecToCenter.length() < closestDistance) {
+                closestIndex = i;
+                closestDistance = scaledVecToCenter.length();
+            }
+        }
+        return closestIndex;
+    }
+
     MobileFindAndSelect() {
         // if used on Mobile Device, this will select the cells upon button click
         const radius = this.cursor.geometry.parameters.radius;