Show Select Cells Tip (#70)

* show tip when 0 tracks are on the canvas

* Add files

* Rename numCells to numSelectedCells. Use numSelectedCells rather than canvas.tracks

src/components/App.tsx

@@ -6,14 +6,14 @@ import { Box, Divider, Drawer } from "@mui/material";
 import Scene from "@/components/Scene";
 import CellControls from "@/components/CellControls";
 import DataControls from "@/components/DataControls";
-import TrackControls from "@/components/TrackControls";
 import PlaybackControls from "@/components/PlaybackControls";
 
 import useSelectionBox from "@/hooks/useSelectionBox";
 
 import { ViewerState, clearUrlHash } from "@/lib/ViewerState";
 import { TrackManager, loadTrackManager } from "@/lib/TrackManager";
 import { PointCanvas } from "@/lib/PointCanvas";
+import LeftSidebarWrapper from "./leftSidebar/LeftSidebarWrapper";
 
 // Ideally we do this here so that we can use initial values as default values for React state.
 const initialViewerState = ViewerState.fromUrlHash(window.location.hash);
@@ -34,7 +34,7 @@ export default function App() {
     const [loading, setLoading] = useState(false);
     const [showTracks, setShowTracks] = useState(true);
     const [showTrackHighlights, setShowTrackHighlights] = useState(true);
-    const [numCells, setNumCells] = useState(0);
+    const [numSelectedCells, setNumSelectedCells] = useState(0);
 
     const { selectedPoints } = useSelectionBox(canvas);
     const [trackHighlightLength, setTrackHighlightLength] = useState(11);
@@ -164,7 +164,7 @@ export default function App() {
                     adding.add(l);
                     const [pos, ids] = await trackManager.fetchPointsForTrack(l);
                     canvas.addTrack(l, pos, ids, minTime, maxTime);
-                    setNumCells((numCells) => numCells + 1);
+                    setNumSelectedCells((numSelectedCells) => numSelectedCells + 1);
                 }
             }
         };
@@ -236,17 +236,18 @@ export default function App() {
                     </Box>
                     <Box flexGrow={0} padding="2em">
                         <CellControls
-                            numCells={numCells}
+                            numSelectedCells={numSelectedCells}
                             trackManager={trackManager}
                             clearTracks={() => {
                                 canvas?.removeAllTracks();
-                                setNumCells(0);
+                                setNumSelectedCells(0);
                             }}
                         />
                     </Box>
                     <Divider />
                     <Box flexGrow={4} padding="2em">
-                        <TrackControls
+                        <LeftSidebarWrapper
+                            hasTracks={numSelectedCells > 0}
                             trackManager={trackManager}
                             trackHighlightLength={trackHighlightLength}
                             showTracks={showTracks}

src/components/CellControls.tsx

@@ -4,7 +4,7 @@ import { TrackManager } from "@/lib/TrackManager";
 import { FontS, SmallCapsButton, ControlLabel } from "@/components/Styled";
 
 interface CellControlsProps {
-    numCells?: number;
+    numSelectedCells?: number;
     trackManager: TrackManager | null;
     clearTracks: () => void;
 }
@@ -20,7 +20,7 @@ export default function CellControls(props: CellControlsProps) {
                     </SmallCapsButton>
                 </Box>
                 <FontS>
-                    <strong>{props.numCells ?? 0}</strong> cells selected
+                    <strong>{props.numSelectedCells ?? 0}</strong> cells selected
                 </FontS>
             </Stack>
         </Stack>

src/components/leftSidebar/ControlInstructions.tsx

@@ -0,0 +1,9 @@
+import { Callout } from "@czi-sds/components";
+
+export default function ControlInstructions() {
+    return (
+        <Callout title="Select Cells" intent="info" sx={{ width: "auto" }}>
+            Hold shift + click and drag on the canvas to select cell points
+        </Callout>
+    );
+}

src/components/leftSidebar/LeftSidebarWrapper.tsx

@@ -0,0 +1,43 @@
+import { TrackManager } from "@/lib/TrackManager";
+import TrackControls from "./TrackControls";
+import ControlInstructions from "./ControlInstructions";
+
+interface LeftSidebarWrapperProps {
+    hasTracks: boolean;
+    trackManager: TrackManager | null;
+    trackHighlightLength: number;
+    showTracks: boolean;
+    setShowTracks: (showTracks: boolean) => void;
+    showTrackHighlights: boolean;
+    setShowTrackHighlights: (showTrackHighlights: boolean) => void;
+    setTrackHighlightLength: (trackHighlightLength: number) => void;
+}
+
+export default function LeftSidebarWrapper({
+    hasTracks,
+    trackManager,
+    trackHighlightLength,
+    showTracks,
+    setShowTracks,
+    showTrackHighlights,
+    setShowTrackHighlights,
+    setTrackHighlightLength,
+}: LeftSidebarWrapperProps) {
+    return (
+        <>
+            {hasTracks ? (
+                <TrackControls
+                    trackManager={trackManager}
+                    trackHighlightLength={trackHighlightLength}
+                    showTracks={showTracks}
+                    setShowTracks={setShowTracks}
+                    showTrackHighlights={showTrackHighlights}
+                    setShowTrackHighlights={setShowTrackHighlights}
+                    setTrackHighlightLength={setTrackHighlightLength}
+                />
+            ) : (
+                <ControlInstructions />
+            )}
+        </>
+    );
+}