From 28ee32b095def7a1a1190c01b60cd42b3a3b0573 Mon Sep 17 00:00:00 2001 From: Ashley Anderson Date: Tue, 2 Apr 2024 10:22:29 -0400 Subject: [PATCH 01/12] Update names --- __tests__/main.test.tsx | 2 +- index.html | 2 +- src/components/{app.tsx => App.tsx} | 8 ++++---- src/components/{main.tsx => Main.tsx} | 2 +- .../{playbackControls.tsx => PlaybackControls.tsx} | 0 src/components/{scene.tsx => Scene.tsx} | 0 src/components/{dataControls.tsx => TrackControls.tsx} | 4 ++-- 7 files changed, 9 insertions(+), 9 deletions(-) rename src/components/{app.tsx => App.tsx} (97%) rename src/components/{main.tsx => Main.tsx} (94%) rename src/components/{playbackControls.tsx => PlaybackControls.tsx} (100%) rename src/components/{scene.tsx => Scene.tsx} (100%) rename src/components/{dataControls.tsx => TrackControls.tsx} (96%) diff --git a/__tests__/main.test.tsx b/__tests__/main.test.tsx index d128ef50..72a5bba7 100644 --- a/__tests__/main.test.tsx +++ b/__tests__/main.test.tsx @@ -1,7 +1,7 @@ import { expect, test } from "vitest"; import { PointCanvas } from "../src/lib/PointCanvas.ts"; -import Scene from "../src/components/scene"; +import Scene from "../src/components/Scene"; import React from "react"; import { render } from "@testing-library/react"; diff --git a/index.html b/index.html index 9f2a2f58..7b6e6575 100644 --- a/index.html +++ b/index.html @@ -13,6 +13,6 @@
- + diff --git a/src/components/app.tsx b/src/components/App.tsx similarity index 97% rename from src/components/app.tsx rename to src/components/App.tsx index ac5e5a8d..4574bbcc 100644 --- a/src/components/app.tsx +++ b/src/components/App.tsx @@ -3,9 +3,9 @@ import "@/css/app.css"; import { Box } from "@mui/material"; -import Scene from "@/components/scene.tsx"; -import DataControls from "@/components/dataControls.tsx"; -import PlaybackControls from "@/components/playbackControls.tsx"; +import Scene from "@/components/Scene.tsx"; +import TrackControls from "@/components/TrackControls.tsx"; +import PlaybackControls from "@/components/PlaybackControls.tsx"; import useSelectionBox from "@/hooks/useSelectionBox"; @@ -191,7 +191,7 @@ export default function App() { return ( - void; } -export default function DataControls(props: DataControlsProps) { +export default function TrackControls(props: TrackControlsProps) { const numTimes = props.trackManager?.points.shape[0] ?? 0; const trackLengthPct = numTimes ? (props.trackHighlightLength / 2 / numTimes) * 100 : 0; From ea0a1a2fa210bc14b9deb137f7566124159db246 Mon Sep 17 00:00:00 2001 From: Ashley Anderson Date: Tue, 2 Apr 2024 12:22:28 -0400 Subject: [PATCH 02/12] Icon changes, add DataControls for info, copy URL, and set data URL --- src/components/App.tsx | 110 ++++++++++++++++++++-------- src/components/DataControls.tsx | 31 ++++++++ src/components/PlaybackControls.tsx | 44 ++++++----- src/components/TrackControls.tsx | 10 +-- src/lib/PointCanvas.ts | 4 + 5 files changed, 140 insertions(+), 59 deletions(-) create mode 100644 src/components/DataControls.tsx diff --git a/src/components/App.tsx b/src/components/App.tsx index 4574bbcc..5f84e3fa 100644 --- a/src/components/App.tsx +++ b/src/components/App.tsx @@ -1,11 +1,12 @@ import { useState, useEffect } from "react"; import "@/css/app.css"; -import { Box } 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"; @@ -18,6 +19,8 @@ const initialViewerState = ViewerState.fromUrlHash(window.location.hash); console.log("initial viewer state: %s", JSON.stringify(initialViewerState)); clearUrlHash(); +const drawerWidth = 300; + export default function App() { // Use references here for two things: // * manage objects that should never change, even when the component re-renders @@ -190,33 +193,78 @@ export default function App() { }, [numTimes, curTime, playing]); return ( - - canvas?.removeAllTracks()} - /> - - + + {/* TODO: components *could* go deeper still for organization */} + + + + canvas?.removeAllTracks()} + /> + + + + + + + + + + + + + ); } diff --git a/src/components/DataControls.tsx b/src/components/DataControls.tsx new file mode 100644 index 00000000..320fbdda --- /dev/null +++ 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 ( + + {/* TODO: make this do something */} + + + + + {/* TODO: make this do something */} + + + ); +} diff --git a/src/components/PlaybackControls.tsx b/src/components/PlaybackControls.tsx index 88703be4..c0cb33aa 100644 --- 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 ( - - - { - props.setAutoRotate((e.target as HTMLInputElement).checked); - }} - /> - - + { - props.setPlaying((e.target as HTMLInputElement).checked); - }} + onClick={() => props.setPlaying(!props.playing)} /> props.setCurTime(value as number)} value={props.curTime} /> - + props.setAutoRotate(!props.autoRotate)} + /> + ); } +// { +// props.setAutoRotate((e.target as HTMLInputElement).checked); +// }} +// /> diff --git a/src/components/TrackControls.tsx b/src/components/TrackControls.tsx index 1dd16c39..ca9a8b75 100644 --- 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 { @@ -17,7 +17,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 ( Clear Tracks - ); diff --git a/src/lib/PointCanvas.ts b/src/lib/PointCanvas.ts index e75554fe..1d8f1adf 100644 --- a/src/lib/PointCanvas.ts +++ b/src/lib/PointCanvas.ts @@ -82,6 +82,10 @@ export class PointCanvas { // Set up controls this.controls = new OrbitControls(this.camera, this.renderer.domElement); this.controls.autoRotateSpeed = 1; + + const cameraPosition: Vector3 = new Vector3(500, 500, -1250); + const cameraTarget: Vector3 = new Vector3(500, 500, 250); + this.setCameraProperties(cameraPosition, cameraTarget); } // Use an arrow function so that each instance of the class is bound and From 1af901beb055e5a92aab390d1f313afdfe03dd91 Mon Sep 17 00:00:00 2001 From: Ashley Anderson Date: Tue, 2 Apr 2024 12:52:49 -0400 Subject: [PATCH 03/12] Add Zebrahub logo --- public/zebrahub-favicon-60x60.png | Bin 0 -> 8619 bytes src/components/App.tsx | 16 +++++++++++++++- 2 files changed, 15 insertions(+), 1 deletion(-) create mode 100644 public/zebrahub-favicon-60x60.png diff --git a/public/zebrahub-favicon-60x60.png b/public/zebrahub-favicon-60x60.png new file mode 100644 index 0000000000000000000000000000000000000000..693cdc2d47efec9ea279e65ce813330fa4aacef9 GIT binary patch literal 8619 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 literal 0 HcmV?d00001 diff --git a/src/components/App.tsx b/src/components/App.tsx index 5f84e3fa..a8097ef6 100644 --- a/src/components/App.tsx +++ b/src/components/App.tsx @@ -19,7 +19,7 @@ const initialViewerState = ViewerState.fromUrlHash(window.location.hash); console.log("initial viewer state: %s", JSON.stringify(initialViewerState)); clearUrlHash(); -const drawerWidth = 300; +const drawerWidth = 256; export default function App() { // Use references here for two things: @@ -213,6 +213,20 @@ export default function App() { height: "100%", }} > + + logo + +

ZEBRAHUB

+ Date: Tue, 2 Apr 2024 13:20:14 -0400 Subject: [PATCH 04/12] Remove commented code. Tweak appearance. --- src/components/PlaybackControls.tsx | 8 +------- src/components/TrackControls.tsx | 5 ++++- 2 files changed, 5 insertions(+), 8 deletions(-) diff --git a/src/components/PlaybackControls.tsx b/src/components/PlaybackControls.tsx index c0cb33aa..46dc7440 100644 --- a/src/components/PlaybackControls.tsx +++ b/src/components/PlaybackControls.tsx @@ -33,6 +33,7 @@ export default function PlaybackControls(props: PlaybackControlsProps) { onChange={(_, value) => props.setCurTime(value as number)} value={props.curTime} /> + {/* TODO: add control button groups - perhaps a separate component */} ); } -// { -// props.setAutoRotate((e.target as HTMLInputElement).checked); -// }} -// /> diff --git a/src/components/TrackControls.tsx b/src/components/TrackControls.tsx index ca9a8b75..059a216c 100644 --- a/src/components/TrackControls.tsx +++ b/src/components/TrackControls.tsx @@ -28,7 +28,10 @@ export default function TrackControls(props: TrackControlsProps) { fullWidth={true} intent={props.trackManager ? "default" : "error"} /> - + + Date: Tue, 2 Apr 2024 20:16:18 -0400 Subject: [PATCH 05/12] Match toolbar sizes --- src/components/DataControls.tsx | 11 ++++++++++- 1 file changed, 10 insertions(+), 1 deletion(-) diff --git a/src/components/DataControls.tsx b/src/components/DataControls.tsx index 320fbdda..2cd7fc70 100644 --- a/src/components/DataControls.tsx +++ b/src/components/DataControls.tsx @@ -12,7 +12,16 @@ interface DataControlsProps { export default function DataControls(props: DataControlsProps) { return ( - + {/* TODO: make this do something */} From 722f18673b4350ba429ba113397ab1e419235f42 Mon Sep 17 00:00:00 2001 From: Ashley Anderson Date: Tue, 2 Apr 2024 20:22:08 -0400 Subject: [PATCH 06/12] Fix SDS deprecation warning --- src/components/TrackControls.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/components/TrackControls.tsx b/src/components/TrackControls.tsx index 059a216c..6550855f 100644 --- a/src/components/TrackControls.tsx +++ b/src/components/TrackControls.tsx @@ -48,7 +48,7 @@ export default function TrackControls(props: TrackControlsProps) { value={Math.round(trackLengthPct)} /> - From 89860522efd89687850b86d4231ff03ecd183abc Mon Sep 17 00:00:00 2001 From: Ashley Anderson Date: Wed, 3 Apr 2024 14:52:25 -0400 Subject: [PATCH 07/12] Partially functioning popover for Zarr URL input --- src/components/App.tsx | 4 -- src/components/DataControls.tsx | 69 ++++++++++++++++++++++++++++++-- src/components/TrackControls.tsx | 16 +------- 3 files changed, 67 insertions(+), 22 deletions(-) diff --git a/src/components/App.tsx b/src/components/App.tsx index a8097ef6..6cb8e475 100644 --- a/src/components/App.tsx +++ b/src/components/App.tsx @@ -229,13 +229,9 @@ export default function App() { canvas?.removeAllTracks()} /> diff --git a/src/components/DataControls.tsx b/src/components/DataControls.tsx index 2cd7fc70..7517cb13 100644 --- a/src/components/DataControls.tsx +++ b/src/components/DataControls.tsx @@ -1,6 +1,12 @@ +import { useState } from "react"; + +import { Box, Popover, Stack, Typography } from "@mui/material"; +import { styled } from "@mui/material/styles"; +import { fontBodyXs } from "czifui"; + +import { Button, ButtonIcon, InputText } from "@czi-sds/components"; + import { TrackManager } from "@/lib/TrackManager"; -import { ButtonIcon } from "@czi-sds/components"; -import { Box } from "@mui/material"; interface DataControlsProps { dataUrl: string; @@ -11,6 +17,16 @@ interface DataControlsProps { } export default function DataControls(props: DataControlsProps) { + const [anchorEl, setAnchorEl] = useState(null); + + const handleClick = (event: React.MouseEvent) => { + setAnchorEl(event.currentTarget); + }; + + const handleClose = () => { + setAnchorEl(null); + }; + return ( {/* TODO: make this do something */} - + + + label": { fontSize: "0.83em", fontWeight: "bold" }, + }} + > + props.setDataUrl(e.target.value)} + fullWidth={true} + intent={props.trackManager ? "default" : "error"} + /> + + Note: Changing this URL will replace the image and reset the canvas. + + + + + + + ); } + +const Note = styled(Typography)` + ${fontBodyXs} +`; diff --git a/src/components/TrackControls.tsx b/src/components/TrackControls.tsx index 6550855f..72af94fb 100644 --- a/src/components/TrackControls.tsx +++ b/src/components/TrackControls.tsx @@ -1,15 +1,11 @@ import { TrackManager } from "@/lib/TrackManager"; -import { Button, InputSlider, InputText } from "@czi-sds/components"; +import { Button, InputSlider } from "@czi-sds/components"; import { Stack } from "@mui/material"; interface TrackControlsProps { - dataUrl: string; - initialDataUrl: string; trackManager: TrackManager | null; trackHighlightLength: number; - setDataUrl: (dataUrl: string) => void; setTrackHighlightLength: (trackHighlightLength: number) => void; - copyShareableUrlToClipboard: () => void; clearTracks: () => void; } @@ -19,16 +15,6 @@ export default function TrackControls(props: TrackControlsProps) { return ( - props.setDataUrl(e.target.value)} - fullWidth={true} - intent={props.trackManager ? "default" : "error"} - /> - From 0e9e6b04a4cad58a69d4cfb81c07832131508576 Mon Sep 17 00:00:00 2001 From: Ashley Anderson Date: Wed, 3 Apr 2024 15:35:02 -0400 Subject: [PATCH 08/12] Add snackbar when copying URL --- src/components/DataControls.tsx | 62 +++++++++++++++++++++++++-------- 1 file changed, 48 insertions(+), 14 deletions(-) diff --git a/src/components/DataControls.tsx b/src/components/DataControls.tsx index 7517cb13..e73abf56 100644 --- a/src/components/DataControls.tsx +++ b/src/components/DataControls.tsx @@ -1,6 +1,6 @@ import { useState } from "react"; -import { Box, Popover, Stack, Typography } from "@mui/material"; +import { Alert, Box, Popover, Snackbar, Stack, Typography } from "@mui/material"; import { styled } from "@mui/material/styles"; import { fontBodyXs } from "czifui"; @@ -17,14 +17,24 @@ interface DataControlsProps { } export default function DataControls(props: DataControlsProps) { - const [anchorEl, setAnchorEl] = useState(null); + const [copyUrlSnackBarOpen, setCopyUrlSnackBarOpen] = useState(false); + const [urlPopoverAnchor, setUrlPopoverAnchor] = useState(null); - const handleClick = (event: React.MouseEvent) => { - setAnchorEl(event.currentTarget); + const copyShareableUrlToClipBoard = () => { + props.copyShareableUrlToClipboard(); + setCopyUrlSnackBarOpen(true); }; - const handleClose = () => { - setAnchorEl(null); + const handleShareableUrlSnackBarClose = () => { + setCopyUrlSnackBarOpen(false); + }; + + const showUrlPopover = (event: React.MouseEvent) => { + setUrlPopoverAnchor(event.currentTarget); + }; + + const handleUrlPopoverClose = () => { + setUrlPopoverAnchor(null); }; return ( @@ -39,22 +49,46 @@ export default function DataControls(props: DataControlsProps) { }} > {/* TODO: make this do something */} - + { + window.alert("Not implemented :)"); + }} + /> + + + Shareable URL copied to clipboard! + + - {/* TODO: make this do something */} - + Note: Changing this URL will replace the image and reset the canvas. - - +
+ + + + + Note: Changing this URL will replace the image and reset the canvas. + + + + + - +
);