Implement basic sidebar layout

[aganders3]

This wraps the TrackControls and DataControls in a Drawer so that they appear in a sidebar on the left. I think using the Drawer component will make it easier to one day show/hide these controls.

The rest of the UI is just a vertical flexbox. I'm sure I'm still doing a ton wrong, but this is pretty minimal code and approaches the layout we want. It breaks a bit at very small window sizes, but otherwise works pretty well for me.

A couple other features here - mostly on DataControls:

• The globe icon shows a popover to edit the Zarr URL (currently works as it always did, so the Cancel/Apply buttons don't really work)
• Copy shareable URL shoule show a success snackbar
• Info icon just shows an alert - obviously not what we want.
• The little DNA button on the lower right turns on auto-rotate. We are missing some icons for the design, but that is just a placeholder.

Here is a screenshot of this PR:

Compare this to @clarsen-czi's designs in Figma.

I don't want to get too carried away in this PR, so perhaps we should come up with a strategy for sizing design-related PRs. I think once this is merged the remaining changes will be smaller and more orthogonal.

This branch was based on #59, but now rebased on main.

[vercel]

The latest updates on your projects. Learn more about Vercel for Git ↗︎

Name	Status	Preview	Comments	Updated (UTC)
points-web-viewer	✅ Ready (Inspect)	Visit Preview	💬 Add feedback	Apr 5, 2024 2:13pm

[aganders3]

Here are the zebrahub icons if we want a bigger one. We probably also want to set this as our favicon unless we come up with a separate logo for this.

[andy-sweet]

On Chrome, I got an error similar to the following on SO: https://stackoverflow.com/questions/75883720/504-outdated-optimize-dep-while-using-react-vite

My simple workaround was to delete node_modules then npm install again, though unsure if there's a better / more future-proof solution.

[aganders3]

You got the error running (dev server?) locally I assume? I haven't seen this but will keep an eye out, thanks for documenting it.

Any issues with the vercel deployment?

[andy-sweet]

You got the error running (dev server?) locally I assume?

Yes, it's consistent when switching between this branch and the one associated with #59

[aganders3]

Hm, I can't reproduce but I wonder if it's related to some files that were renamed (capitalized file names) and/or moved. I could especially see this causing issues on macOS since it handles case in file names strangely.

[andy-sweet]

Hm, I can't reproduce but I wonder if it's related to some files that were renamed (capitalized file names) and/or moved. I could especially see this causing issues on macOS since it handles case in file names strangely.

Ah, could be. My finer grained fix that works is removing node_modules/.vite/deps, which is much faster.

[aganders3]

As mentioned above, I don't want to get too carried away in this PR so I'm marking it ready for review/feedback.

I think this would be a good spot to stop and demo for the end of the week (can of course build on it if there's time).

I guess the final piece here to finish would be to wire up the Cancel/Accept buttons in the Zarr URL popover. The only indication now that the Zarr was not loaded is the red outline on the input field. With this buried in the popover maybe we should put an alert indicator on the canvas.

The JSX starts to get much hairier when adding these layout components. I don't know if there's anything to be done about that.

[codemonkey800]

lgtm!

[codemonkey800]

The JSX starts to get much hairier when adding these layout components. I don't know if there's anything to be done about that.

yeah as you add more layout, it tends to get more complex with how much nesting you need to add to get things aligned right. When the JSX starts to get more deep, it's good to start breaking it down into smaller components for readability

for example, we could break down the code inApp.tsx to something like this:

function DrawerHeader() {
  return (
    <Box
      sx={{
        flexGrow: 0,
        padding: '1em 1.5em',
        display: 'flex',
        flexDirection: 'row',
        alignItems: 'center',
        justifyContent: 'space-between',
      }}
    >
      <img src="/zebrahub-favicon-60x60.png" alt="logo" />
      <Divider orientation="vertical" flexItem />
      <h2>ZEBRAHUB</h2>
    </Box>
  )
}

function Drawer({ trackControls, dataControls }) {
  return (
    <Drawer
      anchor="left"
      variant="permanent"
      sx={{
        width: drawerWidth,
        flexShrink: 0,
        '& .MuiDrawer-paper': { width: drawerWidth, boxSizing: 'border-box' },
      }}
    >
      <DrawerHeader />

      <Box
        sx={{
          display: 'flex',
          flexDirection: 'column',
          justifyContent: 'space-between',
          width: '100%',
          height: '100%',
        }}
      >
        <Box flexGrow={1} padding="2em">
          {trackControls}
        </Box>

        <Divider />

        <Box flexGrow={0} padding="1em">
          {dataControls}
        </Box>
      </Box>
    </Drawer>
  )
}

function AppContent({ scene, playbackControls }) {
  return (
    <Box
      sx={{
        display: 'flex',
        flexDirection: 'column',
        width: '100%',
        height: '100%',
        overflow: 'hidden',
      }}
    >
      {scene}

      <Box flexGrow={0} padding="1em">
        {playbackControls}
      </Box>
    </Box>
  )
}

function App() {
  return (
    <Box sx={{ display: 'flex', width: '100%', height: '100%' }}>
      <AppDrawer
        dataControls={
          <DataControls
            dataUrl={dataUrl}
            initialDataUrl={initialViewerState.dataUrl}
            setDataUrl={setDataUrl}
            copyShareableUrlToClipboard={copyShareableUrlToClipboard}
            trackManager={trackManager}
          />
        }
        trackControls={
          <TrackControls
            trackManager={trackManager}
            trackHighlightLength={trackHighlightLength}
            setTrackHighlightLength={setTrackHighlightLength}
            clearTracks={() => canvas?.removeAllTracks()}
          />
        }
      />

      <AppContent
        scene={
          <Scene
            setCanvas={setCanvas}
            loading={loading}
            initialCameraPosition={initialViewerState.cameraPosition}
            initialCameraTarget={initialViewerState.cameraTarget}
          />
        }
        playbackControls={
          <PlaybackControls
            enabled={true}
            autoRotate={autoRotate}
            playing={playing}
            curTime={curTime}
            numTimes={numTimes}
            setAutoRotate={setAutoRotate}
            setPlaying={setPlaying}
            setCurTime={setCurTime}
          />
        }
      />
    </Box>
  )
}

[aganders3]

Ah yeah, thanks! I think maybe putting the smaller sub-components in the same file improves readability without blowing up the complexity. I hadn't considered that for some reason.

[andy-sweet]

It's a little hard to read the diff here due to the component refactor and file moves, but the end result looks beautiful to me!

I'm not sure if it's intended or provided in the designs, but one surprising detail is that the bottom layout component (with the time slider) follows my system theme (i.e. dark/light), the but the left layout component is always light.