@cytario/web 2.1.4 → 2.1.6

package/app/components/.client/ImageViewer/README.md

@@ -186,8 +186,8 @@ GeoTIFF decoders are registered at the module level in `ImageViewer.tsx`:
 
 ```typescript
 import { addDecoder } from "geotiff";
-addDecoder(5, () => LZWDecoder);       // LZW compression
-addDecoder(33005, () => JP2KDecoder);   // JPEG2000 compression
+addDecoder(5, () => LZWDecoder); // LZW compression
+addDecoder(33005, () => JP2KDecoder); // JPEG2000 compression
 ```
 
 This runs client-side only — decoders use Web Workers and must not be imported during SSR. The `ImageViewer` component is lazy-loaded from the route via `React.lazy()` + `<ClientOnly>` + `<Suspense>`, ensuring decoders are never evaluated on the server.
@@ -215,9 +215,9 @@ ImageViewer (client)
 
 ### Naming Convention
 
-| Image key | Offsets key |
-|---|---|
-| `data/image.ome.tif` | `data/image.offsets.json` |
+| Image key             | Offsets key               |
+| --------------------- | ------------------------- |
+| `data/image.ome.tif`  | `data/image.offsets.json` |
 | `data/image.ome.tiff` | `data/image.offsets.json` |
 
 Offsets are generated with [`generate-tiff-offsets`](https://github.com/hms-dbmi/generate-tiff-offsets) and placed alongside the OME-TIFF in S3. If the file doesn't exist, the viewer loads normally via sequential IFD traversal.

package/app/components/.client/ImageViewer/components/ChannelsController/ChannelsController.tsx

@@ -20,11 +20,12 @@ export function ChannelsController() {
 
   // Show grouped counts: brightfield R/G/B counts as 1 item in the UI
   const groupOffset = brightfieldGroup ? 2 : 0; // 3 channels → 1 item = -2
-  const isBrightfieldVisible = brightfieldGroup && channelsState
-    ? channelsState[brightfieldGroup.red]?.isVisible &&
-      channelsState[brightfieldGroup.green]?.isVisible &&
-      channelsState[brightfieldGroup.blue]?.isVisible
-    : false;
+  const isBrightfieldVisible =
+    brightfieldGroup && channelsState
+      ? channelsState[brightfieldGroup.red]?.isVisible &&
+        channelsState[brightfieldGroup.green]?.isVisible &&
+        channelsState[brightfieldGroup.blue]?.isVisible
+      : false;
   const visibleGrouped = visibleChannelCount - (isBrightfieldVisible ? 2 : 0);
   const totalGrouped = channelIds.length - groupOffset;
   const badge = `${visibleGrouped}/${totalGrouped}`;
@@ -39,10 +40,7 @@ export function ChannelsController() {
     >
       {layersStates.map((_, index) => (
         <TabPanel key={index} id={String(index)}>
-          <ChannelsControllerItemList
-            isExpanded={isExpanded}
-            setIsExpanded={setIsExpanded}
-          />
+          <ChannelsControllerItemList isExpanded={isExpanded} setIsExpanded={setIsExpanded} />
         </TabPanel>
       ))}
     </FeatureItem>

package/app/components/.client/ImageViewer/components/ChannelsController/ChannelsControllerBrightfieldItem.tsx

@@ -50,8 +50,7 @@ export function ChannelsControllerBrightfieldItem({
 
   // Brightfield needs 3 channel slots
   const disabled =
-    !isVisible &&
-    visibleChannelCount + BRIGHTFIELD_CHANNEL_COUNT > MAX_VISIBLE_CHANNELS;
+    !isVisible && visibleChannelCount + BRIGHTFIELD_CHANNEL_COUNT > MAX_VISIBLE_CHANNELS;
 
   let tooltip = `${isVisible ? "Hide" : "Show"} Brightfield`;
   if (disabled)

package/app/components/.client/ImageViewer/components/ChannelsController/ChannelsControllerItem.tsx

@@ -62,8 +62,7 @@ export function ChannelsControllerItem({
   const disabled = !isVisible && visibleChannelCount >= MAX_VISIBLE_CHANNELS;
   let tooltip = `${isVisible ? "Hide" : "Show"} ${name}`;
 
-  if (disabled)
-    tooltip = `Only ${MAX_VISIBLE_CHANNELS} channels can be visible at once`;
+  if (disabled) tooltip = `Only ${MAX_VISIBLE_CHANNELS} channels can be visible at once`;
 
   return (
     <Radio key={name} value={name} className={cx}>
@@ -88,9 +87,7 @@ export function ChannelsControllerItem({
 
       {/* Pixel Value */}
       {pixelValue > 0 && (
-        <span className="text-xs tabular-nums text-(--color-text-secondary)">
-          {pixelValue}
-        </span>
+        <span className="text-xs tabular-nums text-(--color-text-secondary)">{pixelValue}</span>
       )}
 
       {/* Visibility Toggle */}

package/app/components/.client/ImageViewer/components/ChannelsController/ChannelsControllerItemList.tsx

@@ -31,11 +31,7 @@ export function ChannelsControllerItemList({
 
   const brightfieldChannelIds = useMemo(() => {
     if (!brightfieldGroup) return new Set<string>();
-    return new Set([
-      brightfieldGroup.red,
-      brightfieldGroup.green,
-      brightfieldGroup.blue,
-    ]);
+    return new Set([brightfieldGroup.red, brightfieldGroup.green, brightfieldGroup.blue]);
   }, [brightfieldGroup]);
 
   const isBrightfieldVisible = useMemo(() => {
@@ -50,16 +46,13 @@ export function ChannelsControllerItemList({
   const visibleChannelIds = useMemo(
     () =>
       channelIds.filter(
-        (id) =>
-          !brightfieldChannelIds.has(id) &&
-          (isExpanded || channelsState?.[id]?.isVisible),
+        (id) => !brightfieldChannelIds.has(id) && (isExpanded || channelsState?.[id]?.isVisible),
       ),
     [channelIds, channelsState, isExpanded, brightfieldChannelIds],
   );
 
   // Show brightfield item when expanded or when it's visible
-  const showBrightfield =
-    brightfieldGroup && (isExpanded || isBrightfieldVisible);
+  const showBrightfield = brightfieldGroup && (isExpanded || isBrightfieldVisible);
 
   useEffect(() => {
     if (visibleChannelIds.length === 0 && !showBrightfield) {
@@ -77,7 +70,9 @@ export function ChannelsControllerItemList({
         // Check if enabling this channel/group would exceed the viv limit
         const isBrightfield = name === BRIGHTFIELD_GROUP_ID;
         const slotsNeeded = isBrightfield ? 3 : 1;
-        const alreadyVisible = isBrightfield ? isBrightfieldVisible : channelsState?.[name]?.isVisible;
+        const alreadyVisible = isBrightfield
+          ? isBrightfieldVisible
+          : channelsState?.[name]?.isVisible;
         if (!alreadyVisible && visibleChannelCount + slotsNeeded > MAX_VISIBLE_CHANNELS) return;
 
         setSelectedChannelId(name);
@@ -129,10 +124,7 @@ export function ChannelsControllerItemList({
           visibleChannelCount={visibleChannelCount}
           toggleVisibility={() => {
             const newVisible = !isBrightfieldVisible;
-            setChannelVisibility(
-              BRIGHTFIELD_GROUP_ID as keyof ChannelsStateColumns,
-              newVisible,
-            );
+            setChannelVisibility(BRIGHTFIELD_GROUP_ID as keyof ChannelsStateColumns, newVisible);
 
             if (!newVisible && selectedChannelId === BRIGHTFIELD_GROUP_ID) {
               setSelectedChannelId(null);

package/app/components/.client/ImageViewer/components/ChannelsController/ColorPicker/ColorPicker.tsx

@@ -43,9 +43,7 @@ export function ColorPicker({ color, onColorChange }: ColorPickerProps) {
 
         <PopoverContent placement="bottom start" data-theme="dark">
           <RacColorPicker
-            value={parseColor(
-              `rgb(${color[0]}, ${color[1]}, ${color[2]})`,
-            ).toFormat("hsb")}
+            value={parseColor(`rgb(${color[0]}, ${color[1]}, ${color[2]})`).toFormat("hsb")}
             onChange={(color) => {
               const rgb = color.toFormat("rgb");
               onColorChange([
@@ -78,12 +76,7 @@ export function ColorPicker({ color, onColorChange }: ColorPickerProps) {
                   <ColorThumb className="block w-4 h-4 rounded-full border-2 border-white shadow-md focus-visible:outline-2 focus-visible:outline-(--color-border-focus)" />
                 </ColorArea>
 
-                <ColorSlider
-                  colorSpace="hsb"
-                  channel="hue"
-                  className="w-full"
-                  aria-label="Hue"
-                >
+                <ColorSlider colorSpace="hsb" channel="hue" className="w-full" aria-label="Hue">
                   <SliderTrack className="relative h-3 rounded touch-none">
                     <ColorThumb className="block w-4 h-4 rounded-full border-2 border-white shadow-md top-1/2 focus-visible:outline-2 focus-visible:outline-(--color-border-focus)" />
                   </SliderTrack>

package/app/components/.client/ImageViewer/components/ChannelsController/ColorPicker/ColorSwatch.tsx

@@ -9,10 +9,7 @@ interface ColorSwatchProps extends ButtonProps {
 
 export function ColorSwatch({ color, ...props }: ColorSwatchProps) {
   return (
-    <Button
-      className="group cursor-pointer flex items-center justify-center"
-      {...props}
-    >
+    <Button className="group cursor-pointer flex items-center justify-center" {...props}>
       <div
         className={`
           w-5 h-5 m-1 rounded-full border-2 

package/app/components/.client/ImageViewer/components/ChannelsController/DomainSlider.tsx

@@ -11,9 +11,7 @@ export const DomainSlider = ({ domain }: { domain: ByteDomain }) => {
   const setContrastLimits = useViewerStore(select.setContrastLimits);
   const [min, max] = domain;
 
-  const color = selectedChannel
-    ? rgb(selectedChannel.color)
-    : "var(--color-text-tertiary)";
+  const color = selectedChannel ? rgb(selectedChannel.color) : "var(--color-text-tertiary)";
 
   return (
     <div className="h-0">

package/app/components/.client/ImageViewer/components/ChannelsController/Histogram.tsx

@@ -45,25 +45,23 @@ export function Histogram() {
     <div ref={ref} className="top-0 overflow-hidden px-3 pt-3">
       <div className="p-2 pb-0 bg-[var(--color-surface-subtle)] rounded overflow-visible">
         <svg width={width} height={height}>
-          {channelConfigs.map(
-            ({ histogram, color, contrastLimits, isVisible }, channelIndex) => {
-              if (!isVisible) return null;
+          {channelConfigs.map(({ histogram, color, contrastLimits, isVisible }, channelIndex) => {
+            if (!isVisible) return null;
 
-              return (
-                <HistogramChannel
-                  key={channelIndex}
-                  channelIndex={channelIndex}
-                  maxLogValue={maxLogValue}
-                  width={width}
-                  height={height}
-                  range={maxDomain}
-                  histogram={histogram}
-                  color={rgb(color)}
-                  contrastLimit={contrastLimits}
-                />
-              );
-            },
-          )}
+            return (
+              <HistogramChannel
+                key={channelIndex}
+                channelIndex={channelIndex}
+                maxLogValue={maxLogValue}
+                width={width}
+                height={height}
+                range={maxDomain}
+                histogram={histogram}
+                color={rgb(color)}
+                contrastLimit={contrastLimits}
+              />
+            );
+          })}
         </svg>
 
         <DomainSlider domain={[0, maxDomain]} />

package/app/components/.client/ImageViewer/components/ChannelsController/HistogramChannel.tsx

@@ -6,8 +6,7 @@ const normalizeY = (value: number, maxLogValue: number, height: number) => {
   return height - normalizedY;
 };
 
-const normalizeX = (index: number, length: number, width: number) =>
-  (index / (length - 1)) * width;
+const normalizeX = (index: number, length: number, width: number) => (index / (length - 1)) * width;
 
 interface HistogramChannelProps {
   channelIndex: number;
@@ -76,12 +75,7 @@ export const HistogramChannel = ({
         fill={color}
         fillOpacity={0.1}
       />
-      <polygon
-        points={points}
-        fill={color}
-        fillOpacity={0.5}
-        clipPath={`url(#${id})`}
-      />
+      <polygon points={points} fill={color} fillOpacity={0.5} clipPath={`url(#${id})`} />
     </g>
   );
 };

package/app/components/.client/ImageViewer/components/ChannelsController/MinMaxSettings.tsx

@@ -9,18 +9,14 @@ import { useViewerStore } from "../../state/store/ViewerStoreContext";
 export function MinMaxSettings() {
   const selectedChannel = useViewerStore(select.selectedChannel);
   const setContrastLimits = useViewerStore(select.setContrastLimits);
-  const resetContrastLimits = useViewerStore(
-    (state) => state.resetContrastLimits,
-  );
+  const resetContrastLimits = useViewerStore((state) => state.resetContrastLimits);
 
   // Local state only used while editing (null = not editing, use store value)
   const [editingMin, setEditingMin] = useState<string | null>(null);
   const [editingMax, setEditingMax] = useState<string | null>(null);
 
-  const minValue =
-    editingMin ?? String(selectedChannel?.contrastLimits[0] ?? 0);
-  const maxValue =
-    editingMax ?? String(selectedChannel?.contrastLimits[1] ?? 0);
+  const minValue = editingMin ?? String(selectedChannel?.contrastLimits[0] ?? 0);
+  const maxValue = editingMax ?? String(selectedChannel?.contrastLimits[1] ?? 0);
 
   const commitValue = (type: "min" | "max", value: string) => {
     // Clear editing state first
@@ -54,10 +50,7 @@ export function MinMaxSettings() {
     setContrastLimits(newLimits);
   };
 
-  const handleKeyDown = (
-    e: React.KeyboardEvent<HTMLInputElement>,
-    type: "min" | "max",
-  ) => {
+  const handleKeyDown = (e: React.KeyboardEvent<HTMLInputElement>, type: "min" | "max") => {
     if (e.key === "Enter") {
       e.currentTarget.blur();
     } else if (e.key === "Escape") {
@@ -73,10 +66,8 @@ export function MinMaxSettings() {
 
   const isResetDisabled =
     !selectedChannel ||
-    (selectedChannel.contrastLimits[0] ===
-      selectedChannel.contrastLimitsInitial[0] &&
-      selectedChannel.contrastLimits[1] ===
-        selectedChannel.contrastLimitsInitial[1]);
+    (selectedChannel.contrastLimits[0] === selectedChannel.contrastLimitsInitial[0] &&
+      selectedChannel.contrastLimits[1] === selectedChannel.contrastLimitsInitial[1]);
 
   return (
     <div className="m-2 flex gap-2 items-center">

package/app/components/.client/ImageViewer/components/FeatureBar/FeatureBarDragHandle.tsx

@@ -2,11 +2,7 @@ import { motion, MotionValue } from "motion/react";
 
 import { useFeatureBarStore } from "./useFeatureBar";
 
-export const FeatureBarDragHandle = ({
-  motionWidth,
-}: {
-  motionWidth: MotionValue<number>;
-}) => {
+export const FeatureBarDragHandle = ({ motionWidth }: { motionWidth: MotionValue<number> }) => {
   const { minWidth, maxWidth } = useFeatureBarStore();
 
   return (

package/app/components/.client/ImageViewer/components/FeatureBar/FeatureBarToggle.tsx

@@ -4,11 +4,7 @@ import { MotionValue } from "motion/react";
 
 import { useFeatureBarStore } from "./useFeatureBar";
 
-export const FeatureBarToggle = ({
-  motionWidth,
-}: {
-  motionWidth: MotionValue<number>;
-}) => {
+export const FeatureBarToggle = ({ motionWidth }: { motionWidth: MotionValue<number> }) => {
   const { minWidth, setWidth, width } = useFeatureBarStore();
 
   return (

package/app/components/.client/ImageViewer/components/FeatureBar/FeatureItem.tsx

@@ -53,11 +53,7 @@ function FeatureItemInner({
             </span>
           </button>
 
-          {badge && (
-            <span className="text-xs text-[var(--color-text-tertiary)]">
-              {badge}
-            </span>
-          )}
+          {badge && <span className="text-xs text-[var(--color-text-tertiary)]">{badge}</span>}
 
           {onToggleChange && !toggleHidden && (
             <IconButton

package/app/components/.client/ImageViewer/components/FeatureBar/Presets.tsx

@@ -6,12 +6,8 @@ import { rgb } from "../ChannelsController/ColorPicker/ColorPicker";
 import { SplitViewToggle } from "../SplitViewToggle";
 
 export function Presets({ children }: { children: React.ReactNode }) {
-  const activeChannelsStateIndex = useViewerStore(
-    select.activeChannelsStateIndex,
-  );
-  const setActiveChannelsStateIndex = useViewerStore(
-    select.setActiveChannelsStateIndex,
-  );
+  const activeChannelsStateIndex = useViewerStore(select.activeChannelsStateIndex);
+  const setActiveChannelsStateIndex = useViewerStore(select.setActiveChannelsStateIndex);
 
   const handleSelectionChange = (key: Key) => {
     setActiveChannelsStateIndex(Number(key));
@@ -121,11 +117,7 @@ export const PresetLabel = ({ index }: { index: number }) => {
       {colors.length > 0 && (
         <div className="mt-auto flex w-full">
           {colors.map((color, i) => (
-            <div
-              key={i}
-              className="h-1.5 flex-1"
-              style={{ backgroundColor: color }}
-            />
+            <div key={i} className="h-1.5 flex-1" style={{ backgroundColor: color }} />
           ))}
         </div>
       )}

package/app/components/.client/ImageViewer/components/FeatureBar/useFeatureBar.tsx

@@ -35,8 +35,7 @@ export const useFeatureBarStore = create<ControlBarStore>()(
         maxWidth: 720,
         setWidth: (width: number) => set({ width }, false, "setWidth"),
         listStyle: "grid",
-        setListStyle: (listStyle: FeatureBarListStyle) =>
-          set({ listStyle }, false, "setListStyle"),
+        setListStyle: (listStyle: FeatureBarListStyle) => set({ listStyle }, false, "setListStyle"),
         showCellOutline: true,
         setShowCellOutline: (showCellOutline: boolean) =>
           set({ showCellOutline }, false, "setShowCellOutline"),
@@ -49,20 +48,19 @@ export const useFeatureBarStore = create<ControlBarStore>()(
                   acc[id] = values[index];
                   return acc;
                 },
-                { ...state.pixelValues }
+                { ...state.pixelValues },
               ),
             }),
             false,
-            "setPixelValues"
+            "setPixelValues",
           ),
         isExpanded: true,
-        setIsExpanded: (isExpanded: boolean) =>
-          set({ isExpanded }, false, "setIsExpanded"),
+        setIsExpanded: (isExpanded: boolean) => set({ isExpanded }, false, "setIsExpanded"),
       }),
-      { name }
+      { name },
     ),
-    { name }
-  )
+    { name },
+  ),
 );
 
 export function createFeatureItemStore(name: string) {
@@ -73,16 +71,16 @@ export function createFeatureItemStore(name: string) {
           isOpen: false,
           setIsOpen: (isOpen: boolean) => set({ isOpen }),
         }),
-        { name }
+        { name },
       ),
-      { name }
-    )
+      { name },
+    ),
   );
 }
 
-const FeatureItemStoreContext = createContext<UseBoundStore<
-  StoreApi<FeatureItemStore>
-> | null>(null);
+const FeatureItemStoreContext = createContext<UseBoundStore<StoreApi<FeatureItemStore>> | null>(
+  null,
+);
 
 export function FeatureItemStoreProvider({
   name,
@@ -93,20 +91,13 @@ export function FeatureItemStoreProvider({
 }) {
   const [store] = useState(() => createFeatureItemStore(name));
   return (
-    <FeatureItemStoreContext.Provider value={store}>
-      {children}
-    </FeatureItemStoreContext.Provider>
+    <FeatureItemStoreContext.Provider value={store}>{children}</FeatureItemStoreContext.Provider>
   );
 }
 
 // export function useFeatureItemStore() {
-export const useFeatureItemStore = <T,>(
-  selector: (state: FeatureItemStore) => T
-): T => {
+export const useFeatureItemStore = <T,>(selector: (state: FeatureItemStore) => T): T => {
   const store = useContext(FeatureItemStoreContext);
-  if (!store)
-    throw new Error(
-      "useFeatureItemStore must be used within a FeatureItemStoreProvider"
-    );
+  if (!store) throw new Error("useFeatureItemStore must be used within a FeatureItemStoreProvider");
   return useStore(store, selector);
 };

package/app/components/.client/ImageViewer/components/Image/Channels/useChannelsLayer.ts

@@ -9,14 +9,9 @@ import { useTilesLoading } from "../../../utils/useTilesLoading";
 
 const EMPTY_OBJECT = Object.freeze({});
 
-type MultiscaleImageLayerProps = ConstructorParameters<
-  typeof MultiscaleImageLayer
->[0];
-
-export const useChannelsLayer = (
-  imagePanelId: number,
-  onHover?: (info: PickingInfo) => void
-) => {
+type MultiscaleImageLayerProps = ConstructorParameters<typeof MultiscaleImageLayer>[0];
+
+export const useChannelsLayer = (imagePanelId: number, onHover?: (info: PickingInfo) => void) => {
   const dtype = useViewerStore((state) => {
     const type = state.metadata?.Pixels.Type ?? "Uint8";
     return type;
@@ -31,20 +26,16 @@ export const useChannelsLayer = (
 
   const channelsStateColumns = useMemo(
     () => mapChannelConfigsToState(channelsState ?? {}),
-    [channelsState]
+    [channelsState],
   );
 
   const extensions = useMemo(() => [new ColorPaletteExtension()], []);
 
-  const { selections, contrastLimits, colors, channelsVisible } =
-    channelsStateColumns;
+  const { selections, contrastLimits, colors, channelsVisible } = channelsStateColumns;
 
   const rawLoader = useViewerStore(select.loader);
   const setIsChannelsLoading = useViewerStore(select.setIsChannelsLoading);
-  const { loadTile, finishTile } = useTilesLoading(
-    imagePanelId,
-    setIsChannelsLoading
-  );
+  const { loadTile, finishTile } = useTilesLoading(imagePanelId, setIsChannelsLoading);
   const channelsOpacity = useViewerStore((state) => {
     const channelsStateIndex = state.imagePanels[imagePanelId];
     return state.layersStates[channelsStateIndex]?.channelsOpacity ?? 1;
@@ -62,9 +53,7 @@ export const useChannelsLayer = (
       const wrappedLoader = Object.create(Object.getPrototypeOf(loaderLevel));
       Object.assign(wrappedLoader, loaderLevel);
 
-      wrappedLoader.getTile = async (
-        params: Parameters<typeof originalGetTile>[0]
-      ) => {
+      wrappedLoader.getTile = async (params: Parameters<typeof originalGetTile>[0]) => {
         const tileId = `${params.x}-${params.y}-${params.selection?.z || 0}`;
 
         loadTile(tileId);

package/app/components/.client/ImageViewer/components/Image/ImageContainer.tsx

@@ -56,7 +56,7 @@ export function ImageContainer({
     border-[16px]
     box-border border-[var(--color-text-secondary)]
   `,
-    isActivePanel ? "animate-pulse-once" : "border-none"
+    isActivePanel ? "animate-pulse-once" : "border-none",
   );
 
   return (

package/app/components/.client/ImageViewer/components/Image/ImagePanel.tsx

@@ -1,8 +1,4 @@
-import {
-  InteractionState,
-  OrthographicViewState,
-  PickingInfo,
-} from "@deck.gl/core";
+import { InteractionState, OrthographicViewState, PickingInfo } from "@deck.gl/core";
 import DeckGL from "@deck.gl/react";
 import { ReactNode, useCallback, useEffect, useMemo, useState } from "react";
 
@@ -57,10 +53,7 @@ const ImagePanelInner = ({
   );
 
   /** Setup Orthographic View */
-  const { ids } = useMemo(
-    () => mapChannelConfigsToState(channelsState ?? {}),
-    [channelsState],
-  );
+  const { ids } = useMemo(() => mapChannelConfigsToState(channelsState ?? {}), [channelsState]);
   const setPixelValues = useFeatureBarStore((state) => state.setPixelValues);
 
   const onMultiscaleLayerHover = useCallback(
@@ -73,10 +66,7 @@ const ImagePanelInner = ({
   );
 
   /* Setup Layers */
-  const multiscaleLayer = useChannelsLayer(
-    imagePanelId,
-    onMultiscaleLayerHover,
-  );
+  const multiscaleLayer = useChannelsLayer(imagePanelId, onMultiscaleLayerHover);
   const markersLayers = useOverlaysLayers(imagePanelId, setTooltip);
   const layers = [multiscaleLayer, ...markersLayers];
 
@@ -84,17 +74,10 @@ const ImagePanelInner = ({
     if (!metadata || !width || !height) return;
 
     if (!viewStateActive) {
-      const initViewState = calculateViewStateToFit(
-        metadata,
-        { width, height },
-        { padding },
-      );
+      const initViewState = calculateViewStateToFit(metadata, { width, height }, { padding });
 
       setViewStateActive(initViewState);
-    } else if (
-      viewStateActive.width !== width ||
-      viewStateActive.height !== height
-    ) {
+    } else if (viewStateActive.width !== width || viewStateActive.height !== height) {
       setViewStateActive({ ...viewStateActive, width, height });
     }
   }, [metadata, padding, setViewStateActive, width, height, viewStateActive]);
@@ -109,10 +92,7 @@ const ImagePanelInner = ({
   const handleInteractionStateChange = useCallback(
     (event: InteractionState) => {
       const { isDragging, isPanning, isZooming } = event;
-      if (
-        (isDragging || isPanning || isZooming) &&
-        activeImagePanelId !== imagePanelId
-      ) {
+      if ((isDragging || isPanning || isZooming) && activeImagePanelId !== imagePanelId) {
         setActiveImagePanelId(imagePanelId);
       }
     },

package/app/components/.client/ImageViewer/components/Image/ImagePreview.tsx

@@ -88,19 +88,12 @@ const ImagePreviewInner = ({ viewPort, isInteractive }: ViewProps) => {
   );
 };
 
-export const ImagePreview = ({
-  isInteractive = false,
-}: {
-  isInteractive?: boolean;
-}) => {
+export const ImagePreview = ({ isInteractive = false }: { isInteractive?: boolean }) => {
   return (
     <ImageContainer isPreview>
       {(viewPort) => (
         <>
-          <ImagePreviewInner
-            viewPort={viewPort}
-            isInteractive={isInteractive}
-          />
+          <ImagePreviewInner viewPort={viewPort} isInteractive={isInteractive} />
           <ActiveViewStatePreview />
         </>
       )}

package/app/components/.client/ImageViewer/components/Image/Overlays/AdditivePolygonLayer.tsx

@@ -1,11 +1,7 @@
 import { SolidPolygonLayer } from "@deck.gl/layers";
 
 import { shadersInject } from "./additiveBlending.glsl";
-import {
-  type MarkerProps,
-  type MarkerLayerProps,
-  markerUniforms,
-} from "./markerUniforms";
+import { type MarkerProps, type MarkerLayerProps, markerUniforms } from "./markerUniforms";
 
 export class AdditivePolygonLayer extends SolidPolygonLayer<MarkerLayerProps> {
   static layerName = "AdditivePolygonLayer";

package/app/components/.client/ImageViewer/components/Image/Overlays/AdditiveScatterplotLayer.tsx

@@ -1,11 +1,7 @@
 import { ScatterplotLayer } from "@deck.gl/layers";
 
 import { shadersInject } from "./additiveBlending.glsl";
-import {
-  type MarkerProps,
-  type MarkerLayerProps,
-  markerUniforms,
-} from "./markerUniforms";
+import { type MarkerProps, type MarkerLayerProps, markerUniforms } from "./markerUniforms";
 
 export class AdditiveScatterplotLayer extends ScatterplotLayer<MarkerLayerProps> {
   static layerName = "AdditiveScatterplotLayer";