@biongff/vizarr 1.0.1 → 1.2.0

package/src/components/LayerController/ChannelOptions.tsx

@@ -1,183 +0,0 @@
-import { MoreHoriz, Remove } from "@mui/icons-material";
-import { Divider, IconButton, Input, NativeSelect, Paper, Popover, Typography } from "@mui/material";
-import { styled } from "@mui/material/styles";
-import React, { useState } from "react";
-import type { ChangeEvent, MouseEvent } from "react";
-import { useLayerState, useSourceData } from "../../hooks";
-import ColorPalette from "./ColorPalette";
-
-const DenseInput = styled(Input)`
-  width: 5.5em;
-  font-size: 0.7em;
-`;
-
-interface Props {
-  channelIndex: number;
-}
-
-function ChannelOptions({ channelIndex }: Props) {
-  const [sourceData] = useSourceData();
-  const [layer, setLayer] = useLayerState();
-  const [anchorEl, setAnchorEl] = useState<null | Element>(null);
-  const { channel_axis, names } = sourceData;
-
-  const handleClick = (event: MouseEvent<HTMLButtonElement>) => {
-    setAnchorEl(event.currentTarget);
-  };
-
-  const handleClose = () => {
-    setAnchorEl(null);
-  };
-
-  const handleColorChange = (rgb: [number, number, number]) => {
-    setLayer((prev) => {
-      const colors = [...prev.layerProps.colors];
-      colors[channelIndex] = rgb;
-      return { ...prev, layerProps: { ...prev.layerProps, colors } };
-    });
-  };
-
-  const handleContrastLimitChange = (event: ChangeEvent<HTMLInputElement>) => {
-    const targetId = event.target.id;
-    let value = +event.target.value;
-
-    // Only let positive values
-    if (value < 0) value = 0;
-
-    setLayer((prev) => {
-      // Need to move sliders in if contrast limits are narrower
-      const contrastLimitsRange = [...prev.layerProps.contrastLimitsRange];
-      const contrastLimits = [...prev.layerProps.contrastLimits];
-
-      const [cmin, cmax] = contrastLimitsRange[channelIndex];
-      const [smin, smax] = contrastLimits[channelIndex];
-
-      // Calculate climit update
-      const [umin, umax] = targetId === "min" ? [value, cmax] : [cmin, value];
-
-      // Update sliders if needed
-      if (umin > smin) contrastLimits[channelIndex] = [umin, smax];
-      if (umax < smax) contrastLimits[channelIndex] = [smin, umax];
-
-      // Update channel constrast limits range
-      contrastLimitsRange[channelIndex] = [umin, umax];
-
-      return {
-        ...prev,
-        layerProps: { ...prev.layerProps, contrastLimits, contrastLimitsRange },
-      };
-    });
-  };
-
-  const handleRemove = () => {
-    setLayer((prev) => {
-      const { layerProps } = prev;
-      const colors = [...layerProps.colors];
-      const contrastLimits = [...layerProps.contrastLimits];
-      const contrastLimitsRange = [...layerProps.contrastLimitsRange];
-      const selections = [...layerProps.selections];
-      const channelsVisible = [...layerProps.channelsVisible];
-      colors.splice(channelIndex, 1);
-      contrastLimits.splice(channelIndex, 1);
-      contrastLimitsRange.splice(channelIndex, 1);
-      selections.splice(channelIndex, 1);
-      channelsVisible.splice(channelIndex, 1);
-      return {
-        ...prev,
-        layerProps: {
-          ...layerProps,
-          colors,
-          selections,
-          channelsVisible,
-          contrastLimits,
-          contrastLimitsRange,
-        },
-      };
-    });
-  };
-
-  const handleSelectionChange = (event: ChangeEvent<HTMLSelectElement>) => {
-    setLayer((prev) => {
-      const selections = [...prev.layerProps.selections];
-      const channelSelection = [...selections[channelIndex]];
-      if (Number.isInteger(channel_axis)) {
-        channelSelection[channel_axis as number] = +event.target.value;
-        selections[channelIndex] = channelSelection;
-      }
-      return { ...prev, layerProps: { ...prev.layerProps, selections } };
-    });
-  };
-
-  const open = Boolean(anchorEl);
-  const id = open ? `channel-${channelIndex}-${sourceData.name}-options` : undefined;
-  const [min, max] = layer.layerProps.contrastLimitsRange[channelIndex];
-
-  return (
-    <>
-      <IconButton
-        onClick={handleClick}
-        aria-describedby={id}
-        style={{
-          backgroundColor: "transparent",
-          padding: 0,
-          zIndex: 2,
-          cursor: "pointer",
-        }}
-      >
-        <MoreHoriz />
-      </IconButton>
-      <Popover
-        id={id}
-        open={open}
-        anchorEl={anchorEl}
-        onClose={handleClose}
-        anchorOrigin={{
-          vertical: "bottom",
-          horizontal: "left",
-        }}
-        transformOrigin={{
-          vertical: "top",
-          horizontal: "left",
-        }}
-      >
-        <Paper style={{ padding: "0px 4px", marginBottom: 4 }}>
-          <div style={{ display: "flex", justifyContent: "space-between" }}>
-            <Typography variant="caption">remove:</Typography>
-            <IconButton onClick={handleRemove}>
-              <Remove />
-            </IconButton>
-          </div>
-          <Divider />
-          <Typography variant="caption">selection:</Typography>
-          <Divider />
-          <NativeSelect
-            fullWidth
-            style={{ fontSize: "0.7em" }}
-            id={`layer-${sourceData.name}-channel-select`}
-            onChange={handleSelectionChange}
-            value={layer.layerProps.selections[channelIndex][channel_axis as number]}
-          >
-            {names.map((name, i) => (
-              <option value={i} key={name}>
-                ({i}) {name}
-              </option>
-            ))}
-          </NativeSelect>
-          <Divider />
-          <Typography variant="caption">contrast limits:</Typography>
-          <Divider />
-          <DenseInput value={min} onChange={handleContrastLimitChange} type="number" id="min" fullWidth={false} />
-          <DenseInput value={max} onChange={handleContrastLimitChange} type="number" id="max" fullWidth={false} />
-          <Divider />
-          <Typography variant="caption">color:</Typography>
-          <Divider />
-          <div style={{ display: "flex", justifyContent: "center" }}>
-            <ColorPalette handleChange={handleColorChange} />
-          </div>
-        </Paper>
-      </Popover>
-    </>
-  );
-}
-
-export default ChannelOptions;

package/src/components/LayerController/ColorPalette.tsx

@@ -1,40 +0,0 @@
-import { Lens } from "@mui/icons-material";
-import { Container, IconButton } from "@mui/material";
-import React from "react";
-import { COLORS, hexToRGB } from "../../utils";
-
-const RGB_COLORS: [string, [number, number, number]][] = Object.entries(COLORS).map(([name, hex]) => [
-  name,
-  hexToRGB(hex),
-]);
-function ColorPalette({
-  handleChange,
-}: {
-  handleChange: (c: [number, number, number]) => void;
-}) {
-  return (
-    <Container
-      sx={{
-        display: "flex",
-        justifyContent: "space-between",
-        alignItems: "center",
-        padding: "2px",
-      }}
-      aria-label="color-swatch"
-    >
-      {RGB_COLORS.map(([name, rgb]) => {
-        return (
-          <IconButton
-            sx={{ padding: "3px", width: "16px", height: "16px" }}
-            key={name}
-            onClick={() => handleChange(rgb)}
-          >
-            <Lens fontSize="small" style={{ color: `rgb(${rgb})` }} />
-          </IconButton>
-        );
-      })}
-    </Container>
-  );
-}
-
-export default ColorPalette;

package/src/components/LayerController/Content.tsx

@@ -1,71 +0,0 @@
-import { AccordionDetails, Divider, Grid, Typography } from "@mui/material";
-import { styled } from "@mui/material/styles";
-import React from "react";
-
-import AcquisitionController from "./AcquisitionController";
-import AddChannelButton from "./AddChannelButton";
-import AxisSliders from "./AxisSliders";
-import ChannelController from "./ChannelController";
-import Labels from "./Labels";
-import OpacitySlider from "./OpacitySlider";
-
-import { useLayerState } from "../../hooks";
-import { range } from "../../utils";
-
-const Details = styled(AccordionDetails)`
-  padding: 2px 5px;
-  border-left: 1px solid rgba(150, 150, 150, .2);
-  border-right: 1px solid rgba(150, 150, 150, .2);
-`;
-
-function Content() {
-  const [layer] = useLayerState();
-  const nChannels = layer.layerProps.selections.length;
-  return (
-    <Details>
-      <Grid container direction="column">
-        <AcquisitionController />
-        <Grid>
-          <Grid container justifyContent="space-between">
-            <Grid size={{ xs: 3 }}>
-              <Typography variant="caption">opacity:</Typography>
-            </Grid>
-            <Grid size={{ xs: 8 }}>
-              <OpacitySlider />
-            </Grid>
-          </Grid>
-        </Grid>
-        <AxisSliders />
-        <Grid container justifyContent="space-between">
-          <Grid size={{ xs: 3 }}>
-            <Typography variant="caption">channels:</Typography>
-          </Grid>
-          <Grid size={{ xs: 1 }}>
-            <AddChannelButton />
-          </Grid>
-        </Grid>
-        <Divider />
-        <Grid>
-          {range(nChannels).map((i) => (
-            <ChannelController channelIndex={i} key={i} />
-          ))}
-        </Grid>
-        {layer.labels?.length && (
-          <>
-            <Grid container justifyContent="space-between">
-              <Typography variant="caption">labels:</Typography>
-            </Grid>
-            <Divider />
-            <Grid>
-              {layer.labels.map((label, i) => (
-                <Labels labelIndex={i} key={label.layerProps.id} />
-              ))}
-            </Grid>
-          </>
-        )}
-      </Grid>
-    </Details>
-  );
-}
-
-export default Content;

package/src/components/LayerController/Header.tsx

@@ -1,48 +0,0 @@
-import { AccordionSummary, Typography } from "@mui/material";
-import { styled } from "@mui/material/styles";
-import React from "react";
-import LayerVisibilityButton from "./LayerVisibilityButton";
-
-import { useSourceData } from "../../hooks";
-import { LayerFitToViewportButton } from "./LayerFitToViewportButton";
-
-const DenseAccordionSummary = styled(AccordionSummary)`
-  border-bottom: 1px solid rgba(150, 150, 150, .125);
-  background-color: rgba(150, 150, 150, 0.25);
-  display: block;
-  padding: 0 3px;
-  height: 27px;
-  min-height: 27px;
-  overflow: hidden;
-  transition: none;
-
-  &.Mui-expanded {
-    min-height: 27px;
-  }
-
-  .MuiAccordionSummary-content {
-    margin: 0;
-
-    &.Mui-expanded {
-      margin: 0;
-    }
-  }
-`;
-
-function Header({ name }: { name: string }) {
-  const [sourceData] = useSourceData();
-  const label = `layer-controller-${sourceData.id}`;
-  return (
-    <DenseAccordionSummary aria-controls={label} id={label}>
-      <div style={{ display: "flex", flexDirection: "row" }}>
-        <LayerVisibilityButton />
-        <LayerFitToViewportButton />
-        <Typography style={{ marginTop: "4px", marginLeft: "5px" }} variant="body2">
-          {name}
-        </Typography>
-      </div>
-    </DenseAccordionSummary>
-  );
-}
-
-export default Header;

package/src/components/LayerController/Labels.tsx

@@ -1,73 +0,0 @@
-import { RadioButtonChecked, RadioButtonUnchecked } from "@mui/icons-material";
-import { Grid, IconButton, Slider, Typography } from "@mui/material";
-import React from "react";
-
-import { useLayerState, useSourceData } from "../../hooks";
-import { assert } from "../../utils";
-
-export default function Labels({ labelIndex }: { labelIndex: number }) {
-  const [source] = useSourceData();
-  const [layer, setLayer] = useLayerState();
-  assert(source.labels && layer.kind === "multiscale" && layer.labels, "Missing image labels");
-
-  const handleOpacityChange = (_: unknown, value: number | number[]) => {
-    setLayer((prev) => {
-      assert(prev.kind === "multiscale" && prev.labels, "Missing image labels");
-      return {
-        ...prev,
-        labels: prev.labels.with(labelIndex, {
-          ...prev.labels[labelIndex],
-          layerProps: {
-            ...prev.labels[labelIndex].layerProps,
-            opacity: value as number,
-          },
-        }),
-      };
-    });
-  };
-
-  const { name } = source.labels[labelIndex];
-  const label = layer.labels[labelIndex];
-  return (
-    <>
-      <Grid container justifyContent="space-between" wrap="nowrap">
-        <div style={{ width: 165, overflow: "hidden", textOverflow: "ellipsis" }}>
-          <Typography variant="caption" noWrap>
-            {name}
-          </Typography>
-        </div>
-      </Grid>
-      <Grid container justifyContent="space-between">
-        <Grid size={{ xs: 2 }}>
-          <IconButton
-            style={{ backgroundColor: "transparent", padding: 0, zIndex: 2 }}
-            onClick={() => {
-              setLayer((prev) => {
-                assert(prev.kind === "multiscale" && prev.labels, "Missing image labels");
-                return {
-                  ...prev,
-                  labels: prev.labels.with(labelIndex, {
-                    ...prev.labels[labelIndex],
-                    on: !prev.labels[labelIndex].on,
-                  }),
-                };
-              });
-            }}
-          >
-            {label.on ? <RadioButtonChecked /> : <RadioButtonUnchecked />}
-          </IconButton>
-        </Grid>
-        <Grid size={{ xs: 10 }}>
-          <Slider
-            value={label.layerProps.opacity}
-            onChange={handleOpacityChange}
-            min={0}
-            max={1}
-            step={0.01}
-            style={{ padding: "10px 0px 5px 0px" }}
-          />
-        </Grid>
-      </Grid>
-    </>
-  );
-}

package/src/components/LayerController/LayerFitToViewportButton.tsx

@@ -1,43 +0,0 @@
-import { ZoomOutMap } from "@mui/icons-material";
-import { IconButton } from "@mui/material";
-import { useAtomValue } from "jotai";
-import { useLayerState, useSourceData, useViewState } from "../../hooks";
-import { type VizarrLayer, viewportAtom } from "../../state";
-import { fitImageToViewport, getLayerSize } from "../../utils";
-
-export function LayerFitToViewportButton() {
-  const [sourceData] = useSourceData();
-  const [layer] = useLayerState();
-  const [, setViewState] = useViewState();
-  const viewport = useAtomValue(viewportAtom);
-
-  const fitToViewport = (event: React.MouseEvent<HTMLButtonElement>) => {
-    event.stopPropagation();
-    if (viewport) {
-      setViewState(() => ({
-        ...fitImageToViewport({
-          image: getLayerSize({ props: layer.layerProps } as VizarrLayer),
-          viewport: viewport,
-          padding: viewport.width < 400 ? 10 : viewport.width < 600 ? 30 : 50,
-          matrix: layer.layerProps.modelMatrix,
-        }),
-        width: viewport.width,
-        height: viewport.height,
-      }));
-    }
-  };
-
-  return (
-    <IconButton
-      component="span"
-      aria-label={`fit-layer-to-viewport-${sourceData.id}`}
-      onClick={fitToViewport}
-      sx={{
-        backgroundColor: "transparent",
-        color: `rgb(255, 255, 255, ${layer.on ? 1 : 0.5})`,
-      }}
-    >
-      <ZoomOutMap />
-    </IconButton>
-  );
-}

package/src/components/LayerController/LayerVisibilityButton.tsx

@@ -1,32 +0,0 @@
-import { Visibility, VisibilityOff } from "@mui/icons-material";
-import { IconButton } from "@mui/material";
-import React from "react";
-import type { MouseEvent } from "react";
-import { useLayerState, useSourceData } from "../../hooks";
-
-function LayerVisibilityButton() {
-  const [sourceData] = useSourceData();
-  const [layer, setLayer] = useLayerState();
-  const toggle = (event: MouseEvent<HTMLButtonElement>) => {
-    event.stopPropagation();
-    setLayer((prev) => {
-      const on = !prev.on;
-      return { ...prev, on };
-    });
-  };
-  return (
-    <IconButton
-      component="span"
-      aria-label={`toggle-layer-visibility-${sourceData.id}`}
-      onClick={toggle}
-      sx={{
-        backgroundColor: "transparent",
-        color: `rgb(255, 255, 255, ${layer.on ? 1 : 0.5})`,
-      }}
-    >
-      {layer.on ? <Visibility /> : <VisibilityOff />}
-    </IconButton>
-  );
-}
-
-export default LayerVisibilityButton;

package/src/components/LayerController/OpacitySlider.tsx

@@ -1,25 +0,0 @@
-import { Slider } from "@mui/material";
-import { styled } from "@mui/material/styles";
-import React from "react";
-import type { ChangeEvent } from "react";
-import { useLayerState } from "../../hooks";
-
-const DenseSlider = styled(Slider)`
-  color: white;
-  padding: 10px 0px 5px 0px;
-  margin-right: 5px;
-  :active {
-    box-shadow: 0px 0px 0px 8px rgba(158, 158, 158, 0.16);
-  }
-`;
-
-function OpacitySlider() {
-  const [layer, setLayer] = useLayerState();
-  const handleChange = (_: Event, value: number | number[]) => {
-    const opacity = value as number;
-    setLayer((prev) => ({ ...prev, layerProps: { ...prev.layerProps, opacity } }));
-  };
-  return <DenseSlider value={layer.layerProps.opacity} onChange={handleChange} min={0} max={1} step={0.01} />;
-}
-
-export default OpacitySlider;

package/src/components/LayerController/index.tsx

@@ -1,42 +0,0 @@
-import { Accordion as MuiAccordion } from "@mui/material";
-import { styled } from "@mui/material/styles";
-import React from "react";
-
-import { LayerStateContext, useSourceData } from "../../hooks";
-import { layerFamilyAtom } from "../../state";
-import Content from "./Content";
-import Header from "./Header";
-
-const Accordion = styled(MuiAccordion)`
-  border-bottom: 1px solid rgba(150, 150, 150, .2);
-  width: 200;
-  box-shadow: none;
-  "&:not(:last-child)": {
-    border-bottom: 0,
-  }
-  "&:before": {
-    display: none,
-  }
-  "&$expanded": {
-    margin: 0,
-    padding: 0,
-  }
-  &.Mui-expanded : {
-    padding: 1,
-  }
-`;
-
-function LayerController() {
-  const [sourceInfo] = useSourceData();
-  const layerAtom = layerFamilyAtom(sourceInfo);
-  return (
-    <LayerStateContext.Provider value={layerAtom}>
-      <Accordion defaultExpanded>
-        <Header name={sourceInfo.name ?? ""} />
-        <Content />
-      </Accordion>
-    </LayerStateContext.Provider>
-  );
-}
-
-export default LayerController;

package/src/components/Menu.tsx

@@ -1,54 +0,0 @@
-import { Add, Remove } from "@mui/icons-material";
-import { Box, Grid, IconButton } from "@mui/material";
-import { useAtomValue } from "jotai";
-import React, { useReducer } from "react";
-
-import { SourceDataContext } from "../hooks";
-import { sourceInfoAtomAtoms } from "../state";
-import LayerController from "./LayerController";
-
-function Menu(props: { open?: boolean }) {
-  const sourceAtoms = useAtomValue(sourceInfoAtomAtoms);
-  const [hidden, toggle] = useReducer((v) => !v, !(props.open ?? true));
-  return (
-    <Box
-      sx={{
-        zIndex: 1,
-        position: "absolute",
-        backgroundColor: "rgba(0, 0, 0, 0.7)",
-        borderRadius: "5px",
-        left: "5px",
-        top: "5px",
-      }}
-      style={{ padding: `0px 5px ${hidden ? 0 : 5}px 5px` }}
-    >
-      <Grid container direction="column" alignItems="flex-start">
-        <IconButton style={{ backgroundColor: "transparent", padding: 0 }} onClick={toggle}>
-          {hidden ? <Add /> : <Remove />}
-        </IconButton>
-        <Box
-          sx={{
-            maxHeight: 500,
-            overflowX: "hidden",
-            overflowY: "scroll",
-            "&::-webkit-scrollbar": {
-              display: "none",
-              background: "transparent",
-            },
-            scrollbarWidth: "none",
-            flexDirection: "column",
-          }}
-          style={{ display: hidden ? "none" : "flex" }}
-        >
-          {sourceAtoms.map((sourceAtom) => (
-            <SourceDataContext.Provider key={`${sourceAtom}`} value={sourceAtom}>
-              <LayerController />
-            </SourceDataContext.Provider>
-          ))}
-        </Box>
-      </Grid>
-    </Box>
-  );
-}
-
-export default Menu;