@cytario/web 2.1.4 → 2.1.6

package/app/components/.client/ImageViewer/state/store/getInitialChannelsState.ts

@@ -8,16 +8,12 @@ import { getSelectionStats } from "../../utils/getSelectionStats";
 
 /** Returns the RGB color for a channel, falling back to OVERLAY_COLORS if metadata lacks a Color. */
 const getInitialColor = (channels: Channel[], index: number): RGB => {
-  const colorRaw =
-    channels[index]?.Color ?? OVERLAY_COLORS[index % OVERLAY_COLORS.length];
+  const colorRaw = channels[index]?.Color ?? OVERLAY_COLORS[index % OVERLAY_COLORS.length];
   return colorRaw.slice(0, 3) as RGB;
 };
 
 /** Builds the initial channel configs (color, domain, contrast limits) from OME-TIFF metadata. */
-export const getInitialChannelsState = async (
-  metadata: Image,
-  loader: Loader,
-) => {
+export const getInitialChannelsState = async (metadata: Image, loader: Loader) => {
   const channels = metadata.Pixels.Channels as Channel[];
 
   const selection = { c: 0, x: 0, y: 0, z: 0, t: 0 };

package/app/components/.client/ImageViewer/state/store/selectors.ts

@@ -14,7 +14,12 @@ const EMPTY_ARRAY: readonly string[] = Object.freeze([]);
 // Zustand uses Object.is for equality — returning a new object on every call
 // causes infinite re-render loops.
 let _bfGroupCache: { ids: readonly string[]; result: BrightfieldGroup | null } | null = null;
-let _bfSelectedCache: { r: ChannelConfig; g: ChannelConfig; b: ChannelConfig; result: ChannelConfig } | null = null;
+let _bfSelectedCache: {
+  r: ChannelConfig;
+  g: ChannelConfig;
+  b: ChannelConfig;
+  result: ChannelConfig;
+} | null = null;
 export const select = {
   id: (state: ViewerStore) => state.id,
   error: (state: ViewerStore) => state.error,
@@ -54,10 +59,8 @@ export const select = {
   setCursorPosition: (state: ViewerStore) => state.setCursorPosition,
 
   /* Channels State Management */
-  setActiveChannelsStateIndex: (state: ViewerStore) =>
-    state.setActiveChannelsStateIndex,
-  activeChannelsStateIndex: (state: ViewerStore) =>
-    state.imagePanels[state.imagePanelIndex],
+  setActiveChannelsStateIndex: (state: ViewerStore) => state.setActiveChannelsStateIndex,
+  activeChannelsStateIndex: (state: ViewerStore) => state.imagePanels[state.imagePanelIndex],
 
   /* Layers */
   layersState: (state: ViewerStore) => {
@@ -112,10 +115,7 @@ export const select = {
 
   /* Channels > Selected */
   selectedChannelId: (state: ViewerStore) =>
-    state.selectedChannelId as
-      | keyof ChannelsStateColumns
-      | typeof BRIGHTFIELD_GROUP_ID
-      | null,
+    state.selectedChannelId as keyof ChannelsStateColumns | typeof BRIGHTFIELD_GROUP_ID | null,
   setSelectedChannelId: (state: ViewerStore) => state.setSelectedChannelId,
   selectedChannel: (state: ViewerStore): ChannelConfig | null => {
     const selectedChannelId = select.selectedChannelId(state);

package/app/components/.client/ImageViewer/state/store/types.ts

@@ -55,9 +55,7 @@ export interface BrightfieldGroup {
 }
 
 /** Detects brightfield R/G/B channels by name from UltiStacker output. */
-export const detectBrightfieldGroup = (
-  channelIds: readonly string[],
-): BrightfieldGroup | null => {
+export const detectBrightfieldGroup = (channelIds: readonly string[]): BrightfieldGroup | null => {
   const red = channelIds.find((id) => id.toLowerCase() === "red");
   const green = channelIds.find((id) => id.toLowerCase() === "green");
   const blue = channelIds.find((id) => id.toLowerCase() === "blue");
@@ -140,16 +138,9 @@ interface ViewerStoreActions {
   setContrastLimits: (contrastLimits: ByteDomain) => void;
   resetContrastLimits: () => void;
 
-  setChannelVisibility: (
-    key: keyof ChannelsStateColumns,
-    isVisible: boolean
-  ) => void;
+  setChannelVisibility: (key: keyof ChannelsStateColumns, isVisible: boolean) => void;
 
-  setMarkerVisibility: (
-    fileName: string,
-    markerName: string,
-    isVisible: boolean
-  ) => void;
+  setMarkerVisibility: (fileName: string, markerName: string, isVisible: boolean) => void;
 
   setChannelColor: (key: keyof ChannelsState, color: RGBA) => void;
   setMarkerColor: (fileName: string, markerName: string, color: RGBA) => void;

package/app/components/.client/ImageViewer/state/transport/CredentialedHTTPStore.ts

@@ -13,11 +13,7 @@ export class CredentialedHTTPStore {
   private signedFetch: SignedFetch;
   private extraHeaders: Record<string, string>;
 
-  constructor(
-    url: string,
-    signedFetch: SignedFetch,
-    extraHeaders?: Record<string, string>,
-  ) {
+  constructor(url: string, signedFetch: SignedFetch, extraHeaders?: Record<string, string>) {
     this.baseUrl = new URL(url.endsWith("/") ? url : url + "/");
     this.signedFetch = signedFetch;
     this.extraHeaders = extraHeaders ?? {};

package/app/components/.client/ImageViewer/state/transport/SigV4TiffClient.ts

@@ -15,20 +15,13 @@ export class SigV4TiffClient {
   private signedFetch: SignedFetch;
   private extraHeaders: Record<string, string>;
 
-  constructor(
-    url: string,
-    signedFetch: SignedFetch,
-    extraHeaders?: Record<string, string>,
-  ) {
+  constructor(url: string, signedFetch: SignedFetch, extraHeaders?: Record<string, string>) {
     this.url = url;
     this.signedFetch = signedFetch;
     this.extraHeaders = extraHeaders ?? {};
   }
 
-  async request({
-    headers,
-    signal,
-  }: { headers?: HeadersInit; signal?: AbortSignal } = {}) {
+  async request({ headers, signal }: { headers?: HeadersInit; signal?: AbortSignal } = {}) {
     const response = await this.signedFetch(this.url, {
       headers: {
         ...this.extraHeaders,

package/app/components/.client/ImageViewer/utils/getSelectionStats.ts

@@ -32,10 +32,7 @@ export async function getSelectionStats({
   const sortedPixels = [...pixels].sort((a, b) => a - b);
   // dtype is structurally `string` in @cytario/plugin-api; one of the
   // canonical PixelType values is guaranteed at runtime.
-  const histogram = getHistogram(
-    sortedPixels,
-    getDtypeBitDepth(data.dtype as SupportedDtype),
-  );
+  const histogram = getHistogram(sortedPixels, getDtypeBitDepth(data.dtype as SupportedDtype));
   const domain = getDomain(sortedPixels);
   const contrastLimits = getContrastLimits(sortedPixels);
 

package/app/components/.client/ImageViewer/utils/handleImageViewerHover.ts

@@ -3,7 +3,7 @@
 // import { PickingInfo } from "@deck.gl/core";
 
 export const handleImageViewerHover = (
-  { tile, coordinate, sourceLayer: layer }: any // PickingInfo
+  { tile, coordinate, sourceLayer: layer }: any, // PickingInfo
 ) => {
   let hoverData;
   // Tiled layer needs a custom layerZoomScale.

package/app/components/.client/ImageViewer/utils/mapChannelConfigsToState.ts

@@ -1,8 +1,6 @@
 import { ChannelsStateColumns, ChannelsState } from "../state/store/types";
 
-export const mapChannelConfigsToState = (
-  state: ChannelsState
-): ChannelsStateColumns => {
+export const mapChannelConfigsToState = (state: ChannelsState): ChannelsStateColumns => {
   return Object.entries(state).reduce<ChannelsStateColumns>(
     (acc, [id, config]) => {
       if (!config.isVisible) return acc;
@@ -25,6 +23,6 @@ export const mapChannelConfigsToState = (
       domains: [],
       selections: [],
       histograms: [],
-    }
+    },
   );
 };

package/app/components/.client/ImageViewer/utils/useTilesLoading.ts

@@ -2,7 +2,7 @@ import { useRef, useCallback } from "react";
 
 export const useTilesLoading = (
   imagePanelId: number,
-  setIsTilesLoading: (imagePanelId: number, count: number) => void
+  setIsTilesLoading: (imagePanelId: number, count: number) => void,
 ) => {
   const loadingSet = useRef(new Set<string>());
 
@@ -12,7 +12,7 @@ export const useTilesLoading = (
       loadingSet.current.add(id);
       setIsTilesLoading(imagePanelId, loadingSet.current.size);
     },
-    [imagePanelId, setIsTilesLoading]
+    [imagePanelId, setIsTilesLoading],
   );
 
   const finishTile = useCallback(
@@ -20,7 +20,7 @@ export const useTilesLoading = (
       loadingSet.current.delete(id);
       setIsTilesLoading(imagePanelId, loadingSet.current.size);
     },
-    [imagePanelId, setIsTilesLoading]
+    [imagePanelId, setIsTilesLoading],
   );
 
   return { loadTile, finishTile };

package/app/components/AppHeader.tsx

@@ -53,10 +53,7 @@ export function AppHeader() {
       <div className="h-full flex-none flex gap-2 p-2 items-center">
         <GlobalSearch />
         {data?.accountSettingsUrl && data.user && (
-          <UserMenu
-            user={data.user}
-            accountSettingsUrl={data.accountSettingsUrl}
-          />
+          <UserMenu user={data.user} accountSettingsUrl={data.accountSettingsUrl} />
         )}
       </div>
     </header>

package/app/components/Breadcrumbs/Breadcrumbs.tsx

@@ -1,9 +1,5 @@
-import {
-  Breadcrumbs as DesignBreadcrumbs,
-  type BreadcrumbItem,
-} from "@cytario/design";
-import { Link , UIMatch, useMatches } from "react-router";
-
+import { Breadcrumbs as DesignBreadcrumbs, type BreadcrumbItem } from "@cytario/design";
+import { Link, UIMatch, useMatches } from "react-router";
 
 import { Logo } from "../Logo";
 
@@ -21,9 +17,7 @@ type BreadcrumbMatch = UIMatch<
 
 export function Breadcrumbs() {
   const matches = useMatches() as BreadcrumbMatch[];
-  const filteredMatches = matches.filter(
-    (match) => match.handle && match.handle.breadcrumb
-  );
+  const filteredMatches = matches.filter((match) => match.handle && match.handle.breadcrumb);
 
   const crumbs = filteredMatches.flatMap((match) => {
     const result = match.handle.breadcrumb(match);
@@ -47,10 +41,7 @@ export function Breadcrumbs() {
         </Link>
       )}
       {items.length > 0 && (
-        <DesignBreadcrumbs
-          items={items}
-          className="flex items-center overflow-hidden"
-        />
+        <DesignBreadcrumbs items={items} className="flex items-center overflow-hidden" />
       )}
     </div>
   );

package/app/components/Breadcrumbs/getCrumbs.tsx

@@ -10,7 +10,7 @@ export interface CrumbsOptions {
 export const getCrumbs = (
   basePath: string,
   segments: string[],
-  options?: CrumbsOptions
+  options?: CrumbsOptions,
 ): BreadcrumbData[] => {
   const { dataConnectionName, dataConnectionPath } = options ?? {};
 

package/app/components/ClientOnly.tsx

@@ -6,7 +6,7 @@ export const ClientOnly = ({ children }: { children: React.ReactNode }) => {
   const isClient = useSyncExternalStore(
     emptySubscribe,
     () => true,
-    () => false
+    () => false,
   );
 
   if (!isClient) {

package/app/components/Container.tsx

@@ -18,18 +18,8 @@ export function Section({ children, className, flush }: SectionProps) {
   );
 }
 
-export const Container = ({
-  children,
-  wide,
-}: {
-  children: ReactNode;
-  wide?: boolean;
-}) => {
-  return (
-    <div className={wide ? "mx-auto px-4" : "container mx-auto px-4"}>
-      {children}
-    </div>
-  );
+export const Container = ({ children, wide }: { children: ReactNode; wide?: boolean }) => {
+  return <div className={wide ? "mx-auto px-4" : "container mx-auto px-4"}>{children}</div>;
 };
 
 export function SectionHeader({
@@ -48,9 +38,7 @@ export function SectionHeader({
           {name && <H2 className="grow">{name}</H2>}
           {children}
         </div>
-        {secondaryActions && (
-          <div className="flex items-center gap-2">{secondaryActions}</div>
-        )}
+        {secondaryActions && <div className="flex items-center gap-2">{secondaryActions}</div>}
       </header>
     </Container>
   );

package/app/components/DataGrid/ConvertOverlay.modal.tsx

@@ -4,12 +4,7 @@ import { RouteModal } from "~/components/RouteModal";
 /** CSV to Parquet conversion modal. */
 export default function ConvertOverlayModal({ onClose }: { onClose: () => void }) {
   return (
-    <RouteModal
-      title="Convert CSV to Parquet"
-      onClose={onClose}
-      size="lg"
-      isDismissable={false}
-    >
+    <RouteModal title="Convert CSV to Parquet" onClose={onClose} size="lg" isDismissable={false}>
       <AddOverlay callback={onClose} query="csv" />
     </RouteModal>
   );

package/app/components/DataGrid/DataGrid.tsx

@@ -36,9 +36,7 @@ export const DataGrid = ({ resourceId }: { resourceId: string }) => {
 
   const containerRef = useRef<HTMLDivElement>(null);
   const { connectionName } = parseResourceId(resourceId);
-  const connectionConfig = useConnectionsStore(
-    select.connectionConfig(connectionName),
-  );
+  const connectionConfig = useConnectionsStore(select.connectionConfig(connectionName));
 
   // Initial data fetch
   useEffect(() => {
@@ -77,12 +75,7 @@ export const DataGrid = ({ resourceId }: { resourceId: string }) => {
     } finally {
       setIsFetchingMore(false);
     }
-  }, [
-    resourceId,
-    rows.length,
-    isFetchingMore,
-    hasMore,
-  ]);
+  }, [resourceId, rows.length, isFetchingMore, hasMore]);
 
   const columnHelper = createColumnHelper<Record<string, unknown>>();
 
@@ -161,26 +154,17 @@ export const DataGrid = ({ resourceId }: { resourceId: string }) => {
       <table className="min-w-full border-collapse text-sm">
         <thead className="bg-gray-100 dark:bg-slate-800 sticky top-0 z-10">
           {table.getHeaderGroups().map((headerGroup) => (
-            <tr
-              key={headerGroup.id}
-              className="grid"
-              style={{ gridTemplateColumns }}
-            >
+            <tr key={headerGroup.id} className="grid" style={{ gridTemplateColumns }}>
               {headerGroup.headers.map((header) => (
                 <th
                   key={header.id}
                   className={`border-b border-gray-200 dark:border-slate-700 px-4 py-2 font-semibold ${
-                    RIGHT_ALIGNED_COLUMNS.has(header.id)
-                      ? "text-right"
-                      : "text-left"
+                    RIGHT_ALIGNED_COLUMNS.has(header.id) ? "text-right" : "text-left"
                   }`}
                 >
                   {header.isPlaceholder
                     ? null
-                    : flexRender(
-                        header.column.columnDef.header,
-                        header.getContext(),
-                      )}
+                    : flexRender(header.column.columnDef.header, header.getContext())}
                 </th>
               ))}
             </tr>
@@ -208,9 +192,7 @@ export const DataGrid = ({ resourceId }: { resourceId: string }) => {
                   <td
                     key={cell.id}
                     className={`border-b border-gray-100 dark:border-slate-700 tabular-nums px-4 flex items-center ${
-                      RIGHT_ALIGNED_COLUMNS.has(cell.column.id)
-                        ? "justify-end"
-                        : ""
+                      RIGHT_ALIGNED_COLUMNS.has(cell.column.id) ? "justify-end" : ""
                     }`}
                   >
                     {flexRender(cell.column.columnDef.cell, cell.getContext())}
@@ -221,9 +203,7 @@ export const DataGrid = ({ resourceId }: { resourceId: string }) => {
           })}
         </tbody>
       </table>
-      {isFetchingMore && (
-        <div className="p-2 text-center text-gray-500">Loading more...</div>
-      )}
+      {isFetchingMore && <div className="p-2 text-center text-gray-500">Loading more...</div>}
     </div>
   );
 };

package/app/components/DataGrid/WktSvg.tsx

@@ -87,15 +87,13 @@ function parseWkt(wkt: string): Point[][] {
 
     if (geometry.type === "Polygon") {
       // Polygon: [[[x, y], [x, y], ...]]
-      return (coords as number[][][]).map((ring) =>
-        ring.map(([x, y]) => ({ x, y }))
-      );
+      return (coords as number[][][]).map((ring) => ring.map(([x, y]) => ({ x, y })));
     }
 
     if (geometry.type === "MultiPolygon") {
       // MultiPolygon: [[[[x, y], ...]], [[[x, y], ...]]]
       return (coords as number[][][][]).flatMap((polygon) =>
-        polygon.map((ring) => ring.map(([x, y]) => ({ x, y })))
+        polygon.map((ring) => ring.map(([x, y]) => ({ x, y }))),
       );
     }
 

package/app/components/DataGrid/getParquetSchema.ts

@@ -2,7 +2,6 @@ import { getFileType, getReadFunction } from "./fileReader";
 import { createDatabase } from "../../utils/db/createDatabase";
 import { resolveResourceId } from "~/utils/connectionsStore/selectors";
 
-
 export interface ParquetColumn {
   name: string;
   type: string;
@@ -12,9 +11,7 @@ export interface ParquetColumn {
  * Fetch the schema (column names and types) from a data file on S3.
  * Supports: parquet, csv, json
  */
-export async function getParquetSchema(
-  resourceId: string,
-): Promise<ParquetColumn[]> {
+export async function getParquetSchema(resourceId: string): Promise<ParquetColumn[]> {
   const { credentials, connectionConfig, s3Uri } = resolveResourceId(resourceId);
   const connection = await createDatabase(resourceId, credentials, connectionConfig);
   const fileType = getFileType(resourceId);

package/app/components/DescriptionList.tsx

@@ -16,9 +16,7 @@ const DescriptionList = ({ data, className }: DescriptionListProps<any>) => {
           <React.Fragment key={key}>
             <dt className="font-bold text-sm w-32 truncate">{key}</dt>
             <dd>
-              <code className="text-slate-700 px-2 py-1 bg-slate-50">
-                {String(value)}
-              </code>
+              <code className="text-slate-700 px-2 py-1 bg-slate-50">{String(value)}</code>
             </dd>
           </React.Fragment>
         ))}

package/app/components/DirectoryView/ConnectionMenu.tsx

@@ -20,18 +20,12 @@ export function ConnectionMenu({ connectionName }: ConnectionMenuProps) {
   const focusReturnRef = useRef<HTMLElement | null>(null);
   const { openModal } = useModal();
 
-  const connectionConfig = useConnectionsStore(
-    select.connectionConfig(connectionName),
-  );
+  const connectionConfig = useConnectionsStore(select.connectionConfig(connectionName));
 
-  const rootData = useRouteLoaderData("root") as
-    | { user?: UserProfile }
-    | undefined;
+  const rootData = useRouteLoaderData("root") as { user?: UserProfile } | undefined;
   const user = rootData?.user;
   const userCanModify =
-    user && connectionConfig
-      ? canModify(user, connectionConfig.ownerScope)
-      : false;
+    user && connectionConfig ? canModify(user, connectionConfig.ownerScope) : false;
 
   return (
     <>
@@ -50,9 +44,7 @@ export function ConnectionMenu({ connectionName }: ConnectionMenuProps) {
                 <MenuItem
                   id="edit"
                   icon={Pencil}
-                  onAction={() =>
-                    openModal("edit-connection", { nodeName: connectionName })
-                  }
+                  onAction={() => openModal("edit-connection", { nodeName: connectionName })}
                 >
                   Edit
                 </MenuItem>
@@ -63,8 +55,7 @@ export function ConnectionMenu({ connectionName }: ConnectionMenuProps) {
                   isDanger
                   textValue="Delete connection"
                   onAction={() => {
-                    focusReturnRef.current =
-                      document.activeElement as HTMLElement | null;
+                    focusReturnRef.current = document.activeElement as HTMLElement | null;
                     setConfirmOpen(true);
                   }}
                 >
@@ -83,12 +74,7 @@ export function ConnectionMenu({ connectionName }: ConnectionMenuProps) {
         />
       </Menu>
 
-      <Form
-        method="delete"
-        action="/connections"
-        ref={formRef}
-        className="hidden"
-      >
+      <Form method="delete" action="/connections" ref={formRef} className="hidden">
         <input type="hidden" name="connectionName" value={connectionName} />
       </Form>
 
@@ -103,8 +89,8 @@ export function ConnectionMenu({ connectionName }: ConnectionMenuProps) {
         confirmLabel="Remove"
       >
         <p>
-          This will remove <strong>{connectionName}</strong> and its associated
-          recents and pins. The underlying storage is not affected.
+          This will remove <strong>{connectionName}</strong> and its associated recents and pins.
+          The underlying storage is not affected.
         </p>
       </ConfirmDialog>
     </>

package/app/components/DirectoryView/DirectoryView.tsx

@@ -3,21 +3,11 @@ import { useMemo } from "react";
 
 import { TreeNode } from "./buildDirectoryTree";
 import { DirectoryViewGrid } from "./DirectoryViewGrid";
-import {
-  DirectoryViewTableConnection,
-  connectionColumns,
-} from "./DirectoryViewTableConnection";
-import {
-  DirectoryViewTableDirectory,
-  fileColumns,
-} from "./DirectoryViewTableDirectory";
+import { DirectoryViewTableConnection, connectionColumns } from "./DirectoryViewTableConnection";
+import { DirectoryViewTableDirectory, fileColumns } from "./DirectoryViewTableDirectory";
 import { DirectoryViewTree } from "./DirectoryViewTree";
 import { FilterBar } from "./FilterBar";
-import {
-  filterHiddenNodes,
-  filterNodes,
-  getNodeAccessors,
-} from "./filterNodes";
+import { filterHiddenNodes, filterNodes, getNodeAccessors } from "./filterNodes";
 import { type ViewMode, useLayoutStore } from "./useLayoutStore";
 import { Container, Section, SectionHeader } from "~/components/Container";
 import { useColumnFilters } from "~/components/Table/useColumnFilters";
@@ -73,14 +63,7 @@ export function DirectoryView({
   );
 
   const filteredNodes = useMemo(
-    () =>
-      filterNodes(
-        visibleNodes,
-        columnFilters,
-        columns,
-        kind,
-        connections,
-      ),
+    () => filterNodes(visibleNodes, columnFilters, columns, kind, connections),
     [visibleNodes, columnFilters, columns, kind, connections],
   );
 
@@ -109,8 +92,7 @@ export function DirectoryView({
   // view at prefix level is an anti-pattern anyway — proper tree-based
   // navigation belongs in a global sidebar per C-56
   // (https://app.plane.so/cytario/browse/C-56/).
-  const nameFilter =
-    (columnFilters.find((f) => f.id === "name")?.value as string) ?? "";
+  const nameFilter = (columnFilters.find((f) => f.id === "name")?.value as string) ?? "";
 
   return (
     <Section flush={flush}>
@@ -120,37 +102,19 @@ export function DirectoryView({
 
       {showFilters && viewMode !== "list" && (
         <Container>
-          <FilterBar
-            columns={columns}
-            tableId={kind}
-            dynamicOptions={dynamicOptions}
-          />
+          <FilterBar columns={columns} tableId={kind} dynamicOptions={dynamicOptions} />
         </Container>
       )}
 
       <Container>
         {isTree ? (
-          <DirectoryViewTree
-            nodes={visibleNodes}
-            searchTerm={nameFilter}
-            kind={kind}
-          />
+          <DirectoryViewTree nodes={visibleNodes} searchTerm={nameFilter} kind={kind} />
         ) : isGrid ? (
-          <DirectoryViewGrid
-            nodes={filteredNodes}
-            viewMode={viewMode}
-            kind={kind}
-          />
+          <DirectoryViewGrid nodes={filteredNodes} viewMode={viewMode} kind={kind} />
         ) : kind === "connections" ? (
-          <DirectoryViewTableConnection
-            nodes={filteredNodes}
-            showFilters={showFilters}
-          />
+          <DirectoryViewTableConnection nodes={filteredNodes} showFilters={showFilters} />
         ) : (
-          <DirectoryViewTableDirectory
-            nodes={filteredNodes}
-            showFilters={showFilters}
-          />
+          <DirectoryViewTableDirectory nodes={filteredNodes} showFilters={showFilters} />
         )}
       </Container>
     </Section>