Icon changes, add DataControls for info, copy URL, and set data URL

royerlab · Apr 2, 2024 · 775e317 · 775e317
1 parent 81f249c
commit 775e317
Show file tree

Hide file tree

Showing 4 changed files with 109 additions and 54 deletions.
diff --git a/src/components/App.tsx b/src/components/App.tsx
@@ -1,11 +1,12 @@
 import { useState, useEffect, useRef } from "react";
 import "@/css/app.css";
 
-import { Box, Drawer } from "@mui/material";
+import { Box, Divider, Drawer } from "@mui/material";
 
-import Scene from "@/components/Scene.tsx";
-import TrackControls from "@/components/TrackControls.tsx";
-import PlaybackControls from "@/components/PlaybackControls.tsx";
+import Scene from "@/components/Scene";
+import DataControls from "@/components/DataControls";
+import TrackControls from "@/components/TrackControls";
+import PlaybackControls from "@/components/PlaybackControls";
 
 import useSelectionBox from "@/hooks/useSelectionBox";
 
@@ -200,26 +201,49 @@ export default function App() {
 
     return (
         <Box sx={{ display: "flex", width: "100%", height: "100%" }}>
+            {/* TODO: components *could* go deeper still for organization */}
             <Drawer
                 anchor="left"
                 variant="permanent"
                 sx={{
                     "width": drawerWidth,
                     "flexShrink": 0,
-                    "& .MuiDrawer-paper": { width: drawerWidth, boxSizing: "border-box", padding: "2em" },
+                    "& .MuiDrawer-paper": { width: drawerWidth, boxSizing: "border-box" },
                 }}
             >
-                <TrackControls
-                    dataUrl={dataUrl}
-                    initialDataUrl={initialViewerState.dataUrl}
-                    trackManager={trackManager}
-                    trackHighlightLength={trackHighlightLength}
-                    setDataUrl={setDataUrl}
-                    setTrackManager={setTrackManager}
-                    setTrackHighlightLength={setTrackHighlightLength}
-                    copyShareableUrlToClipboard={copyShareableUrlToClipboard}
-                    clearTracks={() => canvas.current?.removeAllTracks()}
-                />
+                <Box
+                    sx={{
+                        display: "flex",
+                        flexDirection: "column",
+                        justifyContent: "space-between",
+                        width: "100%",
+                        height: "100%",
+                    }}
+                >
+                    <Box flexGrow={1} padding="1em">
+                        <TrackControls
+                            dataUrl={dataUrl}
+                            initialDataUrl={initialViewerState.dataUrl}
+                            trackManager={trackManager}
+                            trackHighlightLength={trackHighlightLength}
+                            setDataUrl={setDataUrl}
+                            setTrackManager={setTrackManager}
+                            setTrackHighlightLength={setTrackHighlightLength}
+                            copyShareableUrlToClipboard={copyShareableUrlToClipboard}
+                            clearTracks={() => canvas.current?.removeAllTracks()}
+                        />
+                    </Box>
+                    <Divider />
+                    <Box flexGrow={0} padding="1em">
+                        <DataControls
+                            dataUrl={dataUrl}
+                            initialDataUrl={initialViewerState.dataUrl}
+                            setDataUrl={setDataUrl}
+                            copyShareableUrlToClipboard={copyShareableUrlToClipboard}
+                            trackManager={trackManager}
+                        />
+                    </Box>
+                </Box>
             </Drawer>
             <Box
                 sx={{
@@ -231,16 +255,18 @@ export default function App() {
                 }}
             >
                 <Scene canvas={canvas} loading={loading} />
-                <PlaybackControls
-                    enabled={true}
-                    autoRotate={autoRotate}
-                    playing={playing}
-                    curTime={curTime}
-                    numTimes={numTimes}
-                    setAutoRotate={setAutoRotate}
-                    setPlaying={setPlaying}
-                    setCurTime={setCurTime}
-                />
+                <Box flexGrow={0} padding="1em">
+                    <PlaybackControls
+                        enabled={true}
+                        autoRotate={autoRotate}
+                        playing={playing}
+                        curTime={curTime}
+                        numTimes={numTimes}
+                        setAutoRotate={setAutoRotate}
+                        setPlaying={setPlaying}
+                        setCurTime={setCurTime}
+                    />
+                </Box>
             </Box>
         </Box>
     );

diff --git a/src/components/DataControls.tsx b/src/components/DataControls.tsx
@@ -0,0 +1,31 @@
+import { TrackManager } from "@/lib/TrackManager";
+import { ButtonIcon } from "@czi-sds/components";
+import { Box } from "@mui/material";
+
+interface DataControlsProps {
+    dataUrl: string;
+    initialDataUrl: string;
+    setDataUrl: (dataUrl: string) => void;
+    copyShareableUrlToClipboard: () => void;
+    trackManager: TrackManager | null; // TODO: remove this?
+}
+
+export default function DataControls(props: DataControlsProps) {
+    return (
+        <Box sx={{ display: "flex", flexDirection: "row", justifyContent: "space-between" }}>
+            {/* TODO: make this do something */}
+            <ButtonIcon sdsIcon="infoCircle" sdsSize="large" sdsType="secondary" />
+
+            <ButtonIcon
+                sdsIcon="share"
+                sdsSize="large"
+                sdsType="secondary"
+                disabled={!props.trackManager}
+                onClick={props.copyShareableUrlToClipboard}
+            />
+
+            {/* TODO: make this do something */}
+            <ButtonIcon sdsIcon="globeBasic" sdsSize="large" sdsType="secondary" />
+        </Box>
+    );
+}
diff --git a/src/components/PlaybackControls.tsx b/src/components/PlaybackControls.tsx
@@ -1,6 +1,5 @@
-import { Stack } from "@mui/material";
-
-import { InputSlider, InputToggle } from "@czi-sds/components";
+import { Box } from "@mui/material";
+import { ButtonIcon, InputSlider } from "@czi-sds/components";
 
 interface PlaybackControlsProps {
     enabled: boolean;
@@ -15,22 +14,14 @@ interface PlaybackControlsProps {
 
 export default function PlaybackControls(props: PlaybackControlsProps) {
     return (
-        <Stack direction="row" spacing={8} sx={{ padding: "2em" }}>
-            <label htmlFor="auto-rotate-toggle">Auto Rotate</label>
-            <InputToggle
-                checked={props.autoRotate}
-                disabled={!props.enabled}
-                onChange={(e) => {
-                    props.setAutoRotate((e.target as HTMLInputElement).checked);
-                }}
-            />
-            <label htmlFor="playback-toggle">Playback</label>
-            <InputToggle
-                checked={props.playing}
+        <Box sx={{ display: "flex", flexDirection: "row", alignItems: "center", gap: "2em" }}>
+            <ButtonIcon
+                sdsIcon="play"
+                sdsSize="large"
+                sdsType="primary"
+                on={props.playing}
                 disabled={!props.enabled}
-                onChange={(e) => {
-                    props.setPlaying((e.target as HTMLInputElement).checked);
-                }}
+                onClick={() => props.setPlaying(!props.playing)}
             />
             <InputSlider
                 id="time-frame-slider"
@@ -42,6 +33,21 @@ export default function PlaybackControls(props: PlaybackControlsProps) {
                 onChange={(_, value) => props.setCurTime(value as number)}
                 value={props.curTime}
             />
-        </Stack>
+            <ButtonIcon
+                sdsIcon="dna"
+                sdsSize="large"
+                sdsType="primary"
+                on={props.autoRotate}
+                disabled={!props.enabled}
+                onClick={() => props.setAutoRotate(!props.autoRotate)}
+            />
+        </Box>
     );
 }
+// <InputToggle
+//     checked={props.autoRotate}
+//     disabled={!props.enabled}
+//     onChange={(e) => {
+//         props.setAutoRotate((e.target as HTMLInputElement).checked);
+//     }}
+// />
diff --git a/src/components/TrackControls.tsx b/src/components/TrackControls.tsx
@@ -1,5 +1,5 @@
 import { TrackManager } from "@/lib/TrackManager";
-import { Button, ButtonIcon, InputSlider, InputText } from "@czi-sds/components";
+import { Button, InputSlider, InputText } from "@czi-sds/components";
 import { Stack } from "@mui/material";
 
 interface TrackControlsProps {
@@ -18,7 +18,6 @@ export default function TrackControls(props: TrackControlsProps) {
     const numTimes = props.trackManager?.points.shape[0] ?? 0;
     const trackLengthPct = numTimes ? (props.trackHighlightLength / 2 / numTimes) * 100 : 0;
 
-    console.log("trackLengthPct: %s", props.trackManager?.maxPointsPerTimepoint);
     return (
         <Stack spacing={4}>
             <InputText
@@ -50,13 +49,6 @@ export default function TrackControls(props: TrackControlsProps) {
                 <Button disabled={!props.trackManager} onClick={props.clearTracks}>
                     Clear Tracks
                 </Button>
-                <ButtonIcon
-                    sdsIcon="share"
-                    sdsSize="large"
-                    sdsType="primary"
-                    disabled={!props.trackManager}
-                    onClick={props.copyShareableUrlToClipboard}
-                />
             </Stack>
         </Stack>
     );