From c8ee579b5f3737b1573e74fb4d48b919ca3d2d1c Mon Sep 17 00:00:00 2001
From: Allison Truhlar <truhlara@janelia.hhmi.org>
Date: Wed, 19 Aug 2026 10:27:19 -0400
Subject: [PATCH 01/16] fix(views): cart rows expand without a Data Link

Metadata + channels are fetched from the internal /api/content URL
(credentialed) instead of the proxied-path URL, so every cart dataset can
be inspected before a View is created - matching the behavior users
already get on the browse page.
---
 .../componentTests/CartList.test.tsx          |  3 -
 .../__tests__/componentTests/CartTab.test.tsx | 52 ++++++------
 .../components/ui/Views/CartDatasetRow.tsx    | 82 +++++++++----------
 frontend/src/components/ui/Views/CartList.tsx | 12 ---
 4 files changed, 62 insertions(+), 87 deletions(-)

diff --git a/frontend/src/__tests__/componentTests/CartList.test.tsx b/frontend/src/__tests__/componentTests/CartList.test.tsx
index f8ff6e6f..bd6512da 100644
--- a/frontend/src/__tests__/componentTests/CartList.test.tsx
+++ b/frontend/src/__tests__/componentTests/CartList.test.tsx
@@ -28,9 +28,6 @@ vi.mock('@/contexts/CartContext', () => ({
     clearCart
   })
 }));
-vi.mock('@/queries/proxiedPathQueries', () => ({
-  useAllProxiedPathsQuery: () => ({ data: [] })
-}));
 vi.mock('@/components/ui/Views/CartDatasetRow', () => ({
   default: ({ label }: { label: string }) => (
     <div data-testid="row">{label}</div>
diff --git a/frontend/src/__tests__/componentTests/CartTab.test.tsx b/frontend/src/__tests__/componentTests/CartTab.test.tsx
index 408f0fa1..672c66b4 100644
--- a/frontend/src/__tests__/componentTests/CartTab.test.tsx
+++ b/frontend/src/__tests__/componentTests/CartTab.test.tsx
@@ -18,10 +18,11 @@ const view: View = {
   layers: []
 };
 
-// Dataset A has an existing Data Link (channel expansion enabled) and TWO
-// cart entries (a base entry + an already-checked "GFP" channel entry), to
-// exercise the multi-entry "Remove" batch path.
-// Dataset B has no Data Link (channel expansion disabled + hint).
+// Dataset A has TWO cart entries (a base entry + an already-checked "GFP"
+// channel entry), to exercise the multi-entry "Remove" batch path.
+// Dataset B is a plain single-entry dataset - both expand identically now
+// that metadata is fetched from the internal /api/content URL rather than
+// a Data Link.
 const cartABase: CartItem = {
   fsp_name: 'fsp1',
   path: '/a',
@@ -92,20 +93,6 @@ vi.mock('@/omezarr-helper', () => ({
   getResolvedScales: () => [1, 0.65, 0.65],
   translateUnitToNeuroglancer: (unit?: string) => unit ?? ''
 }));
-vi.mock('@/queries/proxiedPathQueries', () => ({
-  useAllProxiedPathsQuery: () => ({
-    data: [
-      {
-        fsp_name: 'fsp1',
-        path: '/a',
-        url: 'https://data.example/a',
-        sharing_key: 'k1'
-      }
-    ],
-    error: null,
-    isPending: false
-  })
-}));
 vi.mock('@/components/ui/Views/CreateViewButton', () => ({
   default: ({ label }: { label?: string }) => (
     <button type="button">{label ?? 'Create View'}</button>
@@ -140,18 +127,20 @@ describe('Layer Cart tab', () => {
     expect(screen.getByText('Dataset B')).toBeInTheDocument();
   });
 
-  it('lazy-loads and shows channels when expanding a dataset with a Data Link', async () => {
+  it('lazy-loads and shows channels when expanding a dataset', async () => {
     const user = await renderCartTab();
     await user.click(screen.getByRole('button', { name: 'Dataset A' }));
 
     await waitFor(() => {
-      expect(getOmeZarrChannels).toHaveBeenCalledWith('https://data.example/a');
+      expect(getOmeZarrChannels).toHaveBeenCalledWith(
+        expect.stringContaining('/api/content/fsp1/a')
+      );
     });
     expect(await screen.findByText('DAPI')).toBeInTheDocument();
     expect(screen.getByText('GFP')).toBeInTheDocument();
   });
 
-  it('lazy-loads and shows the axis table when expanding a dataset with a Data Link', async () => {
+  it('lazy-loads and shows the axis table when expanding a dataset', async () => {
     getOmeZarrMetadata.mockResolvedValueOnce({
       shapes: [[3, 2048, 2048]],
       arr: { chunks: [1, 512, 512] },
@@ -172,7 +161,9 @@ describe('Layer Cart tab', () => {
     await user.click(screen.getByRole('button', { name: /Dataset A/ }));
 
     await waitFor(() => {
-      expect(getOmeZarrMetadata).toHaveBeenCalledWith('https://data.example/a');
+      expect(getOmeZarrMetadata).toHaveBeenCalledWith(
+        expect.stringContaining('/api/content/fsp1/a')
+      );
     });
     expect(await screen.findByText('Chunk Size')).toBeInTheDocument();
   });
@@ -193,14 +184,17 @@ describe('Layer Cart tab', () => {
     expect(screen.queryByText(/×/)).not.toBeInTheDocument();
   });
 
-  it('disables expansion and shows a hint for a dataset with no Data Link', async () => {
-    await renderCartTab();
+  it('expands a dataset that has no Data Link (metadata fetched via /api/content)', async () => {
+    const user = await renderCartTab();
     const expandButton = screen.getByRole('button', { name: 'Dataset B' });
-    expect(expandButton).toBeDisabled();
-    expect(
-      screen.getByText(/channels load after the view is created/i)
-    ).toBeInTheDocument();
-    expect(getOmeZarrChannels).not.toHaveBeenCalled();
+    expect(expandButton).not.toBeDisabled();
+    await user.click(expandButton);
+
+    await waitFor(() => {
+      expect(getOmeZarrChannels).toHaveBeenCalledWith(
+        expect.stringContaining('/api/content/fsp2/b')
+      );
+    });
   });
 
   it('toggling a channel checkbox adds a channel-specific CartItem', async () => {
diff --git a/frontend/src/components/ui/Views/CartDatasetRow.tsx b/frontend/src/components/ui/Views/CartDatasetRow.tsx
index 043007d3..7c3a79d4 100644
--- a/frontend/src/components/ui/Views/CartDatasetRow.tsx
+++ b/frontend/src/components/ui/Views/CartDatasetRow.tsx
@@ -11,6 +11,7 @@ import { useCartContext } from '@/contexts/CartContext';
 import { getOmeZarrChannels, getOmeZarrMetadata } from '@/omezarr-helper';
 import type { Metadata } from '@/omezarr-helper';
 import { makeBrowseLink } from '@/utils';
+import { getFileURL } from '@/utils/pathHandling';
 import type { CartItem } from '@/contexts/CartContext';
 
 interface CartDatasetRowProps {
@@ -18,20 +19,18 @@ interface CartDatasetRowProps {
   readonly path: string;
   readonly label: string;
   readonly items: CartItem[];
-  readonly dataLinkUrl: string | undefined;
 }
 
 // ponytail: two-level dataset->channel tree via MT Collapse (no generic
-// TreeView exists). Channel URL comes from an existing Data Link; if a
-// dataset has no link yet, expansion is disabled with a hint rather than
-// creating a link just to browse channels. Non-Zarr/N5 datasets simply fail
-// getOmeZarrChannels gracefully (toast) instead of a hard pre-check.
+// TreeView exists). Metadata/channels are fetched from the internal
+// /api/content URL (credentialed), so no Data Link is required to inspect
+// dimensions or pick channels. Non-Zarr/N5 datasets fail gracefully in
+// getOmeZarrChannels (toast) instead of a hard pre-check.
 export default function CartDatasetRow({
   fsp_name,
   path,
   label,
-  items,
-  dataLinkUrl
+  items
 }: CartDatasetRowProps) {
   const { addToCart, removeFromCart, removeManyFromCart } = useCartContext();
   const [isOpen, setIsOpen] = useState(false);
@@ -47,10 +46,14 @@ export default function CartDatasetRow({
   const handleToggleOpen = async () => {
     const nextOpen = !isOpen;
     setIsOpen(nextOpen);
-    if (nextOpen && channels === undefined && !loadingChannels && dataLinkUrl) {
+    if (!nextOpen) {
+      return;
+    }
+    const dataUrl = getFileURL(fsp_name, path);
+    if (channels === undefined && !loadingChannels) {
       setLoadingChannels(true);
       try {
-        setChannels(await getOmeZarrChannels(dataLinkUrl));
+        setChannels(await getOmeZarrChannels(dataUrl));
       } catch (error) {
         toast.error(
           error instanceof Error ? error.message : 'Failed to load channels'
@@ -60,10 +63,10 @@ export default function CartDatasetRow({
         setLoadingChannels(false);
       }
     }
-    if (nextOpen && metadata === null && !loadingMeta && dataLinkUrl) {
+    if (metadata === null && !loadingMeta) {
       setLoadingMeta(true);
       try {
-        setMetadata(await getOmeZarrMetadata(dataLinkUrl));
+        setMetadata(await getOmeZarrMetadata(dataUrl));
       } catch {
         // Metadata is a nice-to-have here; ignore fetch failures.
       } finally {
@@ -108,8 +111,7 @@ export default function CartDatasetRow({
     <div className="border-b border-surface py-2">
       <div className="flex items-center justify-between gap-2">
         <button
-          className="flex items-center gap-2 flex-1 min-w-0 text-left disabled:opacity-50 disabled:cursor-not-allowed"
-          disabled={!dataLinkUrl}
+          className="flex items-center gap-2 flex-1 min-w-0 text-left"
           onClick={() => void handleToggleOpen()}
           type="button"
         >
@@ -135,38 +137,32 @@ export default function CartDatasetRow({
         {path}
       </Link>
 
-      {dataLinkUrl ? (
-        <Collapse open={isOpen}>
-          <div className="pl-6 flex flex-col gap-2 pt-2">
-            {metadata ? <ZarrAxisTable metadata={metadata} /> : null}
-            <div className="flex flex-col gap-1">
-              <Typography className="text-foreground/70 text-xs font-semibold">
-                Optional: select channels to create per-channel layers
+      <Collapse open={isOpen}>
+        <div className="pl-6 flex flex-col gap-2 pt-2">
+          {metadata ? <ZarrAxisTable metadata={metadata} /> : null}
+          <div className="flex flex-col gap-1">
+            <Typography className="text-foreground/70 text-xs font-semibold">
+              Optional: select channels to create per-channel layers
+            </Typography>
+            {loadingChannels ? (
+              <Typography className="text-foreground/70 text-sm">
+                Loading channels...
               </Typography>
-              {loadingChannels ? (
-                <Typography className="text-foreground/70 text-sm">
-                  Loading channels...
-                </Typography>
-              ) : (
-                (channels ?? []).map((channel, index) => (
-                  <FgCheckbox
-                    checked={checkedChannels.has(channel)}
-                    key={channel}
-                    label={channel}
-                    onChange={e =>
-                      void handleToggleChannel(channel, index, e.target.checked)
-                    }
-                  />
-                ))
-              )}
-            </div>
+            ) : (
+              (channels ?? []).map((channel, index) => (
+                <FgCheckbox
+                  checked={checkedChannels.has(channel)}
+                  key={channel}
+                  label={channel}
+                  onChange={e =>
+                    void handleToggleChannel(channel, index, e.target.checked)
+                  }
+                />
+              ))
+            )}
           </div>
-        </Collapse>
-      ) : (
-        <Typography className="text-foreground/70 text-sm pl-6">
-          Channels load after the View is created.
-        </Typography>
-      )}
+        </div>
+      </Collapse>
     </div>
   );
 }
diff --git a/frontend/src/components/ui/Views/CartList.tsx b/frontend/src/components/ui/Views/CartList.tsx
index a0c99dc9..975258b7 100644
--- a/frontend/src/components/ui/Views/CartList.tsx
+++ b/frontend/src/components/ui/Views/CartList.tsx
@@ -7,7 +7,6 @@ import CartDatasetRow from '@/components/ui/Views/CartDatasetRow';
 import CreateViewButton from '@/components/ui/Views/CreateViewButton';
 import FgButton from '@/components/designSystem/atoms/FgButton';
 import { useCartContext } from '@/contexts/CartContext';
-import { useAllProxiedPathsQuery } from '@/queries/proxiedPathQueries';
 import { datasetKey } from '@/utils/pathHandling';
 import type { CartItem } from '@/contexts/CartContext';
 
@@ -46,17 +45,9 @@ function groupCartByDataset(cart: CartItem[]): CartGroup[] {
 
 export default function CartList() {
   const { cart, clearCart } = useCartContext();
-  const allProxiedPathsQuery = useAllProxiedPathsQuery();
   const navigate = useNavigate();
 
   const cartGroups = useMemo(() => groupCartByDataset(cart), [cart]);
-  const dataLinkUrlByDataset = useMemo(() => {
-    const map = new Map<string, string>();
-    for (const p of allProxiedPathsQuery.data ?? []) {
-      map.set(datasetKey(p.fsp_name, p.path), p.url);
-    }
-    return map;
-  }, [allProxiedPathsQuery.data]);
 
   const handleClearCart = async () => {
     try {
@@ -78,9 +69,6 @@ export default function CartList() {
     <div className="flex flex-col gap-3">
       {cartGroups.map(group => (
         <CartDatasetRow
-          dataLinkUrl={dataLinkUrlByDataset.get(
-            datasetKey(group.fsp_name, group.path)
-          )}
           fsp_name={group.fsp_name}
           items={group.items}
           key={datasetKey(group.fsp_name, group.path)}

From 08c81007f9df9bb6f5d7475125cbd9f3e1dde074 Mon Sep 17 00:00:00 2001
From: Allison Truhlar <truhlara@janelia.hhmi.org>
Date: Wed, 19 Aug 2026 10:27:27 -0400
Subject: [PATCH 02/16] feat(views): compact embedded viewer header into a
 single row

Drop the redundant h6 title (already shown in the breadcrumb) and move
the action buttons up to the breadcrumb row. Frees vertical space for
the Neuroglancer iframe.
---
 frontend/src/components/NeuroglancerView.tsx | 62 +++++++++-----------
 1 file changed, 27 insertions(+), 35 deletions(-)

diff --git a/frontend/src/components/NeuroglancerView.tsx b/frontend/src/components/NeuroglancerView.tsx
index fe6b9fda..6a0d3a09 100644
--- a/frontend/src/components/NeuroglancerView.tsx
+++ b/frontend/src/components/NeuroglancerView.tsx
@@ -82,8 +82,8 @@ export default function NeuroglancerView() {
       className="flex h-full w-full flex-col bg-background"
       ref={containerRef}
     >
-      <div className="flex shrink-0 flex-col gap-1 border-b border-surface px-4 py-2">
-        <div className="flex items-center gap-1 text-foreground/70">
+      <div className="flex shrink-0 items-center justify-between gap-4 border-b border-surface px-4 py-2">
+        <div className="flex min-w-0 items-center gap-1 text-foreground/70">
           <FgLink size="sm" to="/ngviews">
             NG Views
           </FgLink>
@@ -92,40 +92,32 @@ export default function NeuroglancerView() {
             {title}
           </Typography>
         </div>
-        <div className="flex items-center justify-between gap-4">
-          <Typography
-            className="truncate text-foreground font-semibold"
-            type="h6"
+        <div className="flex shrink-0 items-center gap-2">
+          <FgButton onClick={() => void handleCopy()} variant="ghost">
+            <FgIcon icon={HiOutlineDuplicate} size="sm" /> Copy link
+          </FgButton>
+          <FgButton
+            onClick={() =>
+              downloadTextFile(
+                JSON.stringify(ngState, null, 2),
+                `${title}.json`
+              )
+            }
+            variant="ghost"
           >
-            {title}
-          </Typography>
-          <div className="flex shrink-0 items-center gap-2">
-            <FgButton onClick={() => void handleCopy()} variant="ghost">
-              <FgIcon icon={HiOutlineDuplicate} size="sm" /> Copy link
-            </FgButton>
-            <FgButton
-              onClick={() =>
-                downloadTextFile(
-                  JSON.stringify(ngState, null, 2),
-                  `${title}.json`
-                )
-              }
-              variant="ghost"
-            >
-              <FgIcon icon={HiOutlineDownload} size="sm" /> Download JSON
-            </FgButton>
-            <FgButton
-              onClick={() =>
-                window.open(externalUrl, '_blank', 'noopener,noreferrer')
-              }
-              variant="ghost"
-            >
-              <FgIcon icon={HiOutlineExternalLink} size="sm" /> Open external
-            </FgButton>
-            <FgButton onClick={handleFullscreen} variant="ghost">
-              <FgIcon icon={HiOutlineArrowsExpand} size="sm" /> Fullscreen
-            </FgButton>
-          </div>
+            <FgIcon icon={HiOutlineDownload} size="sm" /> Download JSON
+          </FgButton>
+          <FgButton
+            onClick={() =>
+              window.open(externalUrl, '_blank', 'noopener,noreferrer')
+            }
+            variant="ghost"
+          >
+            <FgIcon icon={HiOutlineExternalLink} size="sm" /> Open external
+          </FgButton>
+          <FgButton onClick={handleFullscreen} variant="ghost">
+            <FgIcon icon={HiOutlineArrowsExpand} size="sm" /> Fullscreen
+          </FgButton>
         </div>
       </div>
       <iframe

From fae0108ca1852f50ffff39d584b06834c68c4fae Mon Sep 17 00:00:00 2001
From: Allison Truhlar <truhlara@janelia.hhmi.org>
Date: Wed, 19 Aug 2026 10:27:40 -0400
Subject: [PATCH 03/16] feat(views): NG Views table gets a resizable Sources
 column and horizontal scroll

- Fix the missing 6th grid track so the Actions cell stops wrapping to a
  second row on each entry.
- Add an optional gridColsStyle prop on TableCard (inline
  gridTemplateColumns, alt to the static gridColsClass), since Tailwind
  JIT can't emit arbitrary-width classes at runtime.
- The Sources column has its own drag handle at the column's right edge
  (thin line, primary color on hover/drag). Sources cell now shows each
  source path on a truncated line with a native tooltip on hover, so long
  paths stay clickable and inspectable without eating the whole row.
- Wrap the header + body in overflow-x-auto so widening Sources doesn't
  push the trailing columns off-screen unreachable.
- Explicit left-align across every cell (justify-start + text-left).
---
 .../componentTests/ngViewsColumns.test.tsx    |   8 +-
 frontend/src/components/NGViews.tsx           |  29 +++-
 .../src/components/ui/Table/TableCard.tsx     | 131 +++++++++++-------
 .../components/ui/Table/ngViewsColumns.tsx    | 102 +++++++++++---
 .../src/components/ui/widgets/Loaders.tsx     |   7 +-
 5 files changed, 201 insertions(+), 76 deletions(-)

diff --git a/frontend/src/__tests__/componentTests/ngViewsColumns.test.tsx b/frontend/src/__tests__/componentTests/ngViewsColumns.test.tsx
index c43c6834..08a4c0bf 100644
--- a/frontend/src/__tests__/componentTests/ngViewsColumns.test.tsx
+++ b/frontend/src/__tests__/componentTests/ngViewsColumns.test.tsx
@@ -66,7 +66,13 @@ function TableProbe({
 }) {
   // ponytail: TableProbe is already a component, so call the hook directly
   // rather than nesting renderHook inside a component under render().
-  const columns = useNGViewsColumns(onRename, onDelete, 'https://ng.example/');
+  const columns = useNGViewsColumns(
+    onRename,
+    onDelete,
+    'https://ng.example/',
+    320,
+    () => {}
+  );
   const table = useReactTable({
     data: [view],
     columns,
diff --git a/frontend/src/components/NGViews.tsx b/frontend/src/components/NGViews.tsx
index 76704dd7..80864ad8 100644
--- a/frontend/src/components/NGViews.tsx
+++ b/frontend/src/components/NGViews.tsx
@@ -1,4 +1,4 @@
-import { useState } from 'react';
+import { useCallback, useState } from 'react';
 import { Typography } from '@material-tailwind/react';
 import toast from 'react-hot-toast';
 
@@ -19,6 +19,18 @@ export default function NGViews() {
   const [renameItem, setRenameItem] = useState<View | undefined>(undefined);
   const [renameValue, setRenameValue] = useState('');
   const [deleteItem, setDeleteItem] = useState<View | undefined>(undefined);
+  // Sources column is user-resizable via a drag handle in its header. Width
+  // lives here (not in the column def) so a re-render on drag actually
+  // re-flows the CSS grid template.
+  const [sourcesColWidth, setSourcesColWidth] = useState(320);
+  const clampSourcesWidth = useCallback(
+    (w: number) => Math.max(120, Math.min(900, w)),
+    []
+  );
+  const handleSourcesResize = useCallback(
+    (next: number) => setSourcesColWidth(clampSourcesWidth(next)),
+    [clampSourcesWidth]
+  );
 
   const handleOpenRename = (item: View) => {
     setRenameItem(item);
@@ -55,7 +67,18 @@ export default function NGViews() {
     }
   };
 
-  const columns = useNGViewsColumns(handleOpenRename, setDeleteItem, baseUrl);
+  const columns = useNGViewsColumns(
+    handleOpenRename,
+    setDeleteItem,
+    baseUrl,
+    sourcesColWidth,
+    handleSourcesResize
+  );
+
+  // Fixed pixel tracks for every column except Sources (user-resizable).
+  // Fixed (not fr) so the row has a deterministic width — that's what lets
+  // the outer overflow-x-auto scroll when Sources grows past the viewport.
+  const gridColsStyle = `220px 80px ${sourcesColWidth}px 160px 180px 80px`;
 
   return (
     <>
@@ -72,7 +95,7 @@ export default function NGViews() {
           data={allViewsQuery.data || []}
           dataType="NG views"
           errorState={allViewsQuery.error}
-          gridColsClass="grid-cols-[2fr_0.6fr_1fr_1fr_0.6fr]"
+          gridColsStyle={gridColsStyle}
           loadingState={allViewsQuery.isPending}
         />
       </div>
diff --git a/frontend/src/components/ui/Table/TableCard.tsx b/frontend/src/components/ui/Table/TableCard.tsx
index efe2129b..1acf8f4b 100644
--- a/frontend/src/components/ui/Table/TableCard.tsx
+++ b/frontend/src/components/ui/Table/TableCard.tsx
@@ -84,7 +84,12 @@ type TableProps<TData> = {
   readonly data: TData[];
   readonly dataType: DataType;
   readonly errorState: Error | unknown;
-  readonly gridColsClass: string;
+  // Static Tailwind grid-cols-[...] class OR a dynamic gridTemplateColumns
+  // inline style value (used when a column is user-resizable, since Tailwind
+  // JIT can't emit arbitrary-width classes at runtime). Exactly one of the
+  // two should be set; if both are given, gridColsStyle wins.
+  readonly gridColsClass?: string;
+  readonly gridColsStyle?: string;
   readonly loadingState: boolean;
   readonly headerActions?: ReactNode;
   readonly initialPageSize?: number;
@@ -146,12 +151,12 @@ function HeaderIcons<TData, TValue>({
 }) {
   return (
     <div
-      className={`flex flex-col ${
+      className={`flex flex-col w-full h-full ${
         header.column.getCanSort() ? 'cursor-pointer' : ''
       }`}
       onClick={header.column.getToggleSortingHandler()}
     >
-      <div className="flex items-center gap-2 font-semibold select-none group/sort">
+      <div className="flex items-center gap-2 w-full h-full font-semibold select-none group/sort">
         {flexRender(header.column.columnDef.header, header.getContext())}
         <SortIcons header={header} />
       </div>
@@ -306,14 +311,17 @@ function TableHeader({
 
 function TableRow({
   gridColsClass,
+  gridColsStyle,
   children
 }: {
-  readonly gridColsClass: string;
+  readonly gridColsClass?: string;
+  readonly gridColsStyle?: string;
   readonly children: ReactNode;
 }) {
   return (
     <div
-      className={`grid ${gridColsClass} min-h-16 justify-items-start gap-4 px-4 border-b border-surface last:border-0`}
+      className={`grid ${gridColsClass ?? ''} min-h-16 justify-items-start gap-4 px-4 border-b border-surface last:border-0 ${gridColsStyle ? 'min-w-max' : ''}`}
+      style={gridColsStyle ? { gridTemplateColumns: gridColsStyle } : undefined}
     >
       {children}
     </div>
@@ -324,6 +332,7 @@ function Table<TData>({
   columns,
   data,
   gridColsClass,
+  gridColsStyle,
   loadingState,
   errorState,
   dataType,
@@ -429,59 +438,73 @@ function Table<TData>({
           setGlobalFilter={handleInputChange}
           table={table}
         />
-        <div
-          className={`shrink-0 grid ${gridColsClass} gap-4 px-4 py-2 bg-surface/30`}
-        >
-          {table
-            .getHeaderGroups()
-            .map(headerGroup =>
-              headerGroup.headers.map(header =>
-                header.isPlaceholder ? null : (
-                  <HeaderIcons header={header} key={header.id} />
+        <div className="overflow-x-auto">
+          <div
+            className={`shrink-0 grid ${gridColsClass ?? ''} gap-4 px-4 py-2 bg-surface/30 ${gridColsStyle ? 'min-w-max' : ''}`}
+            style={
+              gridColsStyle
+                ? { gridTemplateColumns: gridColsStyle }
+                : undefined
+            }
+          >
+            {table
+              .getHeaderGroups()
+              .map(headerGroup =>
+                headerGroup.headers.map(header =>
+                  header.isPlaceholder ? null : (
+                    <HeaderIcons header={header} key={header.id} />
+                  )
                 )
-              )
-            )}
-        </div>
-        {/* Body */}
-        {loadingState ? (
-          <TableRowSkeleton gridColsClass={gridColsClass} />
-        ) : data && data.length > 0 ? (
-          table.getRowModel().rows.length > 0 ? (
-            <div className="max-h-full" id="table-body">
-              {table.getRowModel().rows.map(row => (
-                <TableRow gridColsClass={gridColsClass} key={row.id}>
-                  {row.getVisibleCells().map(cell => (
-                    <Fragment key={cell.id}>
-                      {flexRender(
-                        cell.column.columnDef.cell,
-                        cell.getContext()
-                      )}
-                    </Fragment>
-                  ))}
-                </TableRow>
-              ))}
+              )}
+          </div>
+          {/* Body */}
+          {loadingState ? (
+            <TableRowSkeleton
+              gridColsClass={gridColsClass}
+              gridColsStyle={gridColsStyle}
+            />
+          ) : data && data.length > 0 ? (
+            table.getRowModel().rows.length > 0 ? (
+              <div className="max-h-full" id="table-body">
+                {table.getRowModel().rows.map(row => (
+                  <TableRow
+                    gridColsClass={gridColsClass}
+                    gridColsStyle={gridColsStyle}
+                    key={row.id}
+                  >
+                    {row.getVisibleCells().map(cell => (
+                      <Fragment key={cell.id}>
+                        {flexRender(
+                          cell.column.columnDef.cell,
+                          cell.getContext()
+                        )}
+                      </Fragment>
+                    ))}
+                  </TableRow>
+                ))}
+              </div>
+            ) : (
+              <div className="px-4 py-8 text-center text-foreground">
+                {dataType
+                  ? `No ${dataType} match your query`
+                  : 'No data matches your query'}
+              </div>
+            )
+          ) : errorState ? (
+            <div className="px-4 py-8 text-center text-error">
+              Error loading data:{' '}
+              {errorState instanceof Error
+                ? errorState.message
+                : String(errorState)}
             </div>
-          ) : (
+          ) : !data || data.length === 0 ? (
             <div className="px-4 py-8 text-center text-foreground">
               {dataType
-                ? `No ${dataType} match your query`
-                : 'No data matches your query'}
+                ? `You have not created any ${dataType} yet`
+                : 'No data available'}
             </div>
-          )
-        ) : errorState ? (
-          <div className="px-4 py-8 text-center text-error">
-            Error loading data:{' '}
-            {errorState instanceof Error
-              ? errorState.message
-              : String(errorState)}
-          </div>
-        ) : !data || data.length === 0 ? (
-          <div className="px-4 py-8 text-center text-foreground">
-            {dataType
-              ? `You have not created any ${dataType} yet`
-              : 'No data available'}
-          </div>
-        ) : null}
+          ) : null}
+        </div>
       </div>
       {showContextMenu ? (
         <ContextMenu
@@ -500,6 +523,7 @@ function TableCard<TData>({
   columns,
   data,
   gridColsClass,
+  gridColsStyle,
   loadingState,
   errorState,
   dataType,
@@ -514,6 +538,7 @@ function TableCard<TData>({
         dataType={dataType}
         errorState={errorState}
         gridColsClass={gridColsClass}
+        gridColsStyle={gridColsStyle}
         headerActions={headerActions}
         initialPageSize={initialPageSize}
         loadingState={loadingState}
diff --git a/frontend/src/components/ui/Table/ngViewsColumns.tsx b/frontend/src/components/ui/Table/ngViewsColumns.tsx
index b70a3cc1..d384f1cc 100644
--- a/frontend/src/components/ui/Table/ngViewsColumns.tsx
+++ b/frontend/src/components/ui/Table/ngViewsColumns.tsx
@@ -1,4 +1,5 @@
-import { useMemo } from 'react';
+import { useMemo, useRef, useState } from 'react';
+import type { MouseEvent } from 'react';
 import { Link, useNavigate } from 'react-router';
 import { Typography } from '@material-tailwind/react';
 import type { ColumnDef } from '@tanstack/react-table';
@@ -86,7 +87,7 @@ export function ActionsCell({
   ];
 
   return (
-    <div className="min-w-0 flex items-center">
+    <div className="min-w-0 flex items-center justify-start">
       <div onClick={e => e.stopPropagation()}>
         <CardActionsMenu<ViewRowActionProps>
           actionProps={{ item, baseUrl, onRename, onDelete }}
@@ -97,10 +98,62 @@ export function ActionsCell({
   );
 }
 
+// ponytail: drag handle for the Sources column. Local drag state lives in
+// refs (start-x, start-width) so re-renders during drag don't reset it;
+// pointer capture is via document mousemove/mouseup listeners bound at
+// mousedown, so releasing outside the header still ends the drag.
+function SourcesResizeHandle({
+  sourcesColWidth,
+  onResize
+}: {
+  readonly sourcesColWidth: number;
+  readonly onResize: (next: number) => void;
+}) {
+  const startX = useRef(0);
+  const startWidth = useRef(sourcesColWidth);
+  const [isDragging, setIsDragging] = useState(false);
+
+  const handleMouseDown = (e: MouseEvent<HTMLDivElement>) => {
+    // Header row toggles sort on click; keep the drag from also sorting.
+    e.preventDefault();
+    e.stopPropagation();
+    startX.current = e.clientX;
+    startWidth.current = sourcesColWidth;
+    setIsDragging(true);
+    const onMove = (ev: globalThis.MouseEvent) => {
+      onResize(startWidth.current + (ev.clientX - startX.current));
+    };
+    const onUp = () => {
+      document.removeEventListener('mousemove', onMove);
+      document.removeEventListener('mouseup', onUp);
+      document.body.style.removeProperty('cursor');
+      document.body.style.removeProperty('user-select');
+      setIsDragging(false);
+    };
+    document.addEventListener('mousemove', onMove);
+    document.addEventListener('mouseup', onUp);
+    document.body.style.cursor = 'col-resize';
+    document.body.style.userSelect = 'none';
+  };
+
+  return (
+    <div
+      aria-hidden="true"
+      className={`cursor-col-resize absolute z-10 -right-1 top-0 h-full w-3 bg-transparent group/resize ${isDragging ? 'is-dragging' : ''}`}
+      onClick={e => e.stopPropagation()}
+      onMouseDown={handleMouseDown}
+    >
+      <div className="absolute left-1/2 top-0 h-full w-[2px] -translate-x-1/2 bg-surface-foreground/50 group-hover/resize:bg-primary group-hover/resize:w-[3px] group-[.is-dragging]/resize:bg-primary group-[.is-dragging]/resize:w-[3px]" />
+    </div>
+  );
+}
+
 export function useNGViewsColumns(
   onRename: (item: View) => void,
   onDelete: (item: View) => void,
-  baseUrl: string
+  baseUrl: string,
+  sourcesColWidth: number,
+  onSourcesResize: (next: number) => void
 ): ColumnDef<View>[] {
   // Views listed here are the current user's own, so their backing Data Links
   // are in this (current-user-scoped) query. Layers whose Data Link is missing
@@ -123,9 +176,9 @@ export function useNGViewsColumns(
           const item = row.original;
           const label = item.name || item.short_key;
           return (
-            <div className="flex items-center truncate w-full h-full">
+            <div className="flex items-center justify-start truncate w-full h-full text-left">
               <FgTooltip label={label} triggerClasses={TRIGGER_CLASSES}>
-                <Typography className="text-foreground truncate select-all">
+                <Typography className="text-foreground truncate text-left select-all">
                   {label}
                 </Typography>
               </FgTooltip>
@@ -143,8 +196,8 @@ export function useNGViewsColumns(
         header: 'Layers',
         accessorFn: row => row.layers.length,
         cell: ({ getValue }) => (
-          <div className="flex items-center h-full">
-            <Typography className="text-foreground" variant="small">
+          <div className="flex items-center justify-start h-full text-left">
+            <Typography className="text-foreground text-left" variant="small">
               {getValue() as number}
             </Typography>
           </div>
@@ -153,7 +206,15 @@ export function useNGViewsColumns(
       },
       {
         id: 'sources',
-        header: 'Sources',
+        header: () => (
+          <div className="relative flex items-center w-full h-full text-left select-none">
+            <span>Sources</span>
+            <SourcesResizeHandle
+              onResize={onSourcesResize}
+              sourcesColWidth={sourcesColWidth}
+            />
+          </div>
+        ),
         cell: ({ row }) => {
           // De-dupe: per-channel layers of one dataset share a source path.
           const seen = new Set<string>();
@@ -174,20 +235,24 @@ export function useNGViewsColumns(
           }
           if (sources.length === 0) {
             return (
-              <div className="flex items-center h-full">
-                <Typography className="text-foreground/60" variant="small">
+              <div className="flex items-center justify-start h-full w-full text-left">
+                <Typography
+                  className="text-foreground/60 text-left"
+                  variant="small"
+                >
                   —
                 </Typography>
               </div>
             );
           }
           return (
-            <div className="flex flex-col justify-center gap-0.5 h-full min-w-0">
+            <div className="flex flex-col justify-center gap-0.5 h-full w-full min-w-0 text-left">
               {sources.map(src => (
                 <Link
-                  className="text-primary text-xs truncate hover:underline"
+                  className="block max-w-full truncate text-primary text-xs text-left hover:underline"
                   key={`${src.fsp_name}::${src.path}`}
                   onClick={e => e.stopPropagation()}
+                  title={src.path}
                   to={makeBrowseLink(src.fsp_name, src.path)}
                 >
                   {src.path}
@@ -202,8 +267,8 @@ export function useNGViewsColumns(
         accessorKey: 'sharing_mode',
         header: 'Sharing',
         cell: ({ row }) => (
-          <div className="flex items-center h-full">
-            <Typography className="text-foreground" variant="small">
+          <div className="flex items-center justify-start h-full text-left">
+            <Typography className="text-foreground text-left" variant="small">
               {SHARING_LABEL[row.original.sharing_mode]}
             </Typography>
           </div>
@@ -214,8 +279,11 @@ export function useNGViewsColumns(
         accessorKey: 'updated_at',
         header: 'Updated',
         cell: ({ cell }) => (
-          <div className="flex items-center h-full">
-            <Typography className="text-foreground truncate" variant="small">
+          <div className="flex items-center justify-start h-full text-left">
+            <Typography
+              className="text-foreground truncate text-left"
+              variant="small"
+            >
               {formatDateString(cell.getValue() as string)}
             </Typography>
           </div>
@@ -236,6 +304,6 @@ export function useNGViewsColumns(
         enableSorting: false
       }
     ],
-    [onRename, onDelete, baseUrl, pathById]
+    [onRename, onDelete, baseUrl, pathById, sourcesColWidth, onSourcesResize]
   );
 }
diff --git a/frontend/src/components/ui/widgets/Loaders.tsx b/frontend/src/components/ui/widgets/Loaders.tsx
index 93a77af8..036ac517 100644
--- a/frontend/src/components/ui/widgets/Loaders.tsx
+++ b/frontend/src/components/ui/widgets/Loaders.tsx
@@ -73,14 +73,17 @@ function SidebarItemSkeleton({
 
 function TableRowSkeleton({
   gridColsClass,
+  gridColsStyle,
   numberOfCols = 4
 }: {
-  readonly gridColsClass: string;
+  readonly gridColsClass?: string;
+  readonly gridColsStyle?: string;
   readonly numberOfCols?: number;
 }) {
   return (
     <div
-      className={`grid ${gridColsClass} justify-items-start gap-4 px-4 py-4 animate-pulse`}
+      className={`grid ${gridColsClass ?? ''} justify-items-start gap-4 px-4 py-4 animate-pulse`}
+      style={gridColsStyle ? { gridTemplateColumns: gridColsStyle } : undefined}
     >
       {Array.from({ length: numberOfCols }).map((_, index) => (
         <div className="w-full h-4 bg-surface rounded" key={index} />

From 56f8c90f6d4ec5c5d0c25b1268b66fbf77b904cb Mon Sep 17 00:00:00 2001
From: Allison Truhlar <truhlara@janelia.hhmi.org>
Date: Thu, 20 Aug 2026 16:29:12 -0400
Subject: [PATCH 04/16] fix(views): cart list scrolls internally instead of
 overflowing the sidebar

---
 .../src/components/ui/PropertiesDrawer/PropertiesDrawer.tsx     | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/frontend/src/components/ui/PropertiesDrawer/PropertiesDrawer.tsx b/frontend/src/components/ui/PropertiesDrawer/PropertiesDrawer.tsx
index b846c571..cefeabbd 100644
--- a/frontend/src/components/ui/PropertiesDrawer/PropertiesDrawer.tsx
+++ b/frontend/src/components/ui/PropertiesDrawer/PropertiesDrawer.tsx
@@ -169,7 +169,7 @@ export default function PropertiesDrawer({
   const tooltipTriggerClasses = 'max-w-[calc(100%-2rem)] truncate';
 
   return (
-    <div data-tour="properties-drawer">
+    <div className="h-full" data-tour="properties-drawer">
       <Card className="overflow-auto w-full h-full max-h-full p-3 rounded-none shadow-none flex flex-col border-0">
         <div className="flex items-center justify-between gap-4 mb-1 shrink-0">
           <div className="flex items-center gap-2 min-w-0">

From d2b1d3518d6eef4cabf54116e3eed84044a0ae74 Mon Sep 17 00:00:00 2001
From: Allison Truhlar <truhlara@janelia.hhmi.org>
Date: Thu, 20 Aug 2026 16:31:31 -0400
Subject: [PATCH 05/16] feat(views): add pure dimension-signature comparison
 for cart layers

---
 .../src/__tests__/dimensionSignature.test.ts  | 49 ++++++++++++++
 frontend/src/utils/dimensionSignature.ts      | 65 +++++++++++++++++++
 2 files changed, 114 insertions(+)
 create mode 100644 frontend/src/__tests__/dimensionSignature.test.ts
 create mode 100644 frontend/src/utils/dimensionSignature.ts

diff --git a/frontend/src/__tests__/dimensionSignature.test.ts b/frontend/src/__tests__/dimensionSignature.test.ts
new file mode 100644
index 00000000..4930e6b9
--- /dev/null
+++ b/frontend/src/__tests__/dimensionSignature.test.ts
@@ -0,0 +1,49 @@
+import { describe, expect, it } from 'vitest';
+import { signaturesMatch } from '@/utils/dimensionSignature';
+import type { DimensionSignature } from '@/utils/dimensionSignature';
+
+const sig = (
+  axes: [string, string][],
+  scales: number[]
+): DimensionSignature => ({
+  axes: axes.map(([name, unit]) => ({ name, unit })),
+  scales
+});
+
+describe('signaturesMatch', () => {
+  it('matches identical axes and scales', () => {
+    const a = sig([['x', 'micrometer'], ['y', 'micrometer']], [0.1, 0.1]);
+    const b = sig([['x', 'micrometer'], ['y', 'micrometer']], [0.1, 0.1]);
+    expect(signaturesMatch(a, b)).toBe(true);
+  });
+
+  it('mismatches when axis names/order differ', () => {
+    const a = sig([['x', 'um'], ['y', 'um'], ['z', 'um']], [1, 1, 1]);
+    const b = sig([['x', 'um'], ['y', 'um']], [1, 1]);
+    expect(signaturesMatch(a, b)).toBe(false);
+  });
+
+  it('mismatches when a unit differs', () => {
+    const a = sig([['x', 'micrometer']], [1]);
+    const b = sig([['x', 'nanometer']], [1]);
+    expect(signaturesMatch(a, b)).toBe(false);
+  });
+
+  it('mismatches when voxel scale differs beyond relative epsilon', () => {
+    const a = sig([['x', 'um']], [0.1]);
+    const b = sig([['x', 'um']], [0.2]);
+    expect(signaturesMatch(a, b)).toBe(false);
+  });
+
+  it('matches when scales differ within relative epsilon', () => {
+    const a = sig([['x', 'um']], [0.1]);
+    const b = sig([['x', 'um']], [0.10005]); // 0.05% off
+    expect(signaturesMatch(a, b)).toBe(true);
+  });
+
+  it('matches tiny nanometer-scale values that are effectively equal', () => {
+    const a = sig([['x', 'nm']], [4]);
+    const b = sig([['x', 'nm']], [4.001]);
+    expect(signaturesMatch(a, b)).toBe(true);
+  });
+});
diff --git a/frontend/src/utils/dimensionSignature.ts b/frontend/src/utils/dimensionSignature.ts
new file mode 100644
index 00000000..9b2aaa2f
--- /dev/null
+++ b/frontend/src/utils/dimensionSignature.ts
@@ -0,0 +1,65 @@
+import { getResolvedScales, translateUnitToNeuroglancer } from '@/omezarr-helper';
+
+import type { Metadata } from '@/omezarr-helper';
+
+export type DimensionSignature = {
+  axes: { name: string; unit: string }[];
+  scales: number[];
+};
+
+// ponytail: signature is axes (name+unit) + resolved voxel scales. That's the
+// "will these layers align in Neuroglancer" question; shape is deliberately
+// excluded per spec.
+export function getDimensionSignature(
+  metadata: Metadata
+): DimensionSignature | null {
+  const multiscale = metadata.multiscales?.[0];
+  if (!multiscale?.axes || multiscale.axes.length === 0) {
+    return null;
+  }
+  let scales: number[];
+  try {
+    scales = getResolvedScales(multiscale);
+  } catch {
+    return null;
+  }
+  return {
+    axes: multiscale.axes.map(axis => ({
+      name: axis.name.toLowerCase(),
+      unit: translateUnitToNeuroglancer(axis.unit as string) || ''
+    })),
+    scales
+  };
+}
+
+// Relative epsilon: voxel sizes span nm→µm, so absolute tolerance is wrong.
+// ponytail: 1e-3 relative; tighten if false matches appear.
+export function signaturesMatch(
+  a: DimensionSignature,
+  b: DimensionSignature,
+  epsilon = 1e-3
+): boolean {
+  if (a.axes.length !== b.axes.length) {
+    return false;
+  }
+  for (let i = 0; i < a.axes.length; i++) {
+    if (a.axes[i].name !== b.axes[i].name) {
+      return false;
+    }
+    if (a.axes[i].unit !== b.axes[i].unit) {
+      return false;
+    }
+  }
+  if (a.scales.length !== b.scales.length) {
+    return false;
+  }
+  for (let i = 0; i < a.scales.length; i++) {
+    const av = a.scales[i];
+    const bv = b.scales[i];
+    const denom = Math.max(Math.abs(av), Math.abs(bv), Number.MIN_VALUE);
+    if (Math.abs(av - bv) / denom > epsilon) {
+      return false;
+    }
+  }
+  return true;
+}

From 6da033ffb8ca0af7812f19e61492f4b925aac6f1 Mon Sep 17 00:00:00 2001
From: Allison Truhlar <truhlara@janelia.hhmi.org>
Date: Thu, 20 Aug 2026 16:37:19 -0400
Subject: [PATCH 06/16] feat(views): fetch and compare cart layer dimensions
 via useQueries

---
 frontend/src/hooks/useCartDimensionCheck.ts | 70 +++++++++++++++++++++
 1 file changed, 70 insertions(+)
 create mode 100644 frontend/src/hooks/useCartDimensionCheck.ts

diff --git a/frontend/src/hooks/useCartDimensionCheck.ts b/frontend/src/hooks/useCartDimensionCheck.ts
new file mode 100644
index 00000000..5fea8b3c
--- /dev/null
+++ b/frontend/src/hooks/useCartDimensionCheck.ts
@@ -0,0 +1,70 @@
+import { useMemo } from 'react';
+import { useQueries } from '@tanstack/react-query';
+import { getOmeZarrMetadata } from '@/omezarr-helper';
+import type { Metadata } from '@/omezarr-helper';
+import { datasetKey, getFileURL } from '@/utils/pathHandling';
+import {
+  getDimensionSignature,
+  signaturesMatch
+} from '@/utils/dimensionSignature';
+import type { CartItem } from '@/contexts/CartContext';
+
+export type CartDimensionCheck = {
+  mismatchedKeys: Set<string>;
+  hasMismatch: boolean;
+};
+
+// One entry per unique dataset, preserving first-added order (order[0] is the
+// reference dataset for the mismatch comparison).
+function uniqueDatasets(items: CartItem[]) {
+  const seen = new Set<string>();
+  const out: { key: string; fsp_name: string; path: string }[] = [];
+  for (const item of items) {
+    const key = datasetKey(item.fsp_name, item.path);
+    if (!seen.has(key)) {
+      seen.add(key);
+      out.push({ key, fsp_name: item.fsp_name, path: item.path });
+    }
+  }
+  return out;
+}
+
+export function useCartDimensionCheck(items: CartItem[]): CartDimensionCheck {
+  const datasets = useMemo(() => uniqueDatasets(items), [items]);
+
+  const results = useQueries({
+    queries: datasets.map(ds => ({
+      queryKey: ['zarr', 'dims', ds.fsp_name, ds.path],
+      queryFn: async (): Promise<Metadata> =>
+        getOmeZarrMetadata(getFileURL(ds.fsp_name, ds.path)),
+      staleTime: 5 * 60 * 1000,
+      retry: false
+    }))
+  });
+
+  // useQueries returns fresh array refs each render; key the memo on which
+  // datasets have resolved data so it recomputes as metadata lands.
+  const resolvedKey = results.map(r => (r.data ? 1 : 0)).join(',');
+
+  return useMemo(() => {
+    // Signature per dataset, or null when loading/errored/no-multiscale.
+    // Fail open: a null signature never produces a warning.
+    const signatures = datasets.map((_, i) => {
+      const data = results[i]?.data;
+      return data ? getDimensionSignature(data) : null;
+    });
+
+    const reference = signatures[0];
+    const mismatchedKeys = new Set<string>();
+    if (reference) {
+      for (let i = 1; i < datasets.length; i++) {
+        const sig = signatures[i];
+        if (sig && !signaturesMatch(reference, sig)) {
+          mismatchedKeys.add(datasets[i].key);
+        }
+      }
+    }
+    return { mismatchedKeys, hasMismatch: mismatchedKeys.size > 0 };
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [datasets, resolvedKey]);
+}

From 6f1cebe9d99e06222b53baf6f9f47c1ab32f5287 Mon Sep 17 00:00:00 2001
From: Allison Truhlar <truhlara@janelia.hhmi.org>
Date: Thu, 20 Aug 2026 16:41:33 -0400
Subject: [PATCH 07/16] feat(views): warn on cart rows whose dimensions differ
 from the first layer

---
 .../src/components/ui/Views/CartDatasetRow.tsx    | 15 ++++++++++++++-
 frontend/src/components/ui/Views/CartList.tsx     |  3 +++
 2 files changed, 17 insertions(+), 1 deletion(-)

diff --git a/frontend/src/components/ui/Views/CartDatasetRow.tsx b/frontend/src/components/ui/Views/CartDatasetRow.tsx
index 7c3a79d4..3177ea54 100644
--- a/frontend/src/components/ui/Views/CartDatasetRow.tsx
+++ b/frontend/src/components/ui/Views/CartDatasetRow.tsx
@@ -2,10 +2,12 @@ import { useState } from 'react';
 import { Link } from 'react-router';
 import { Collapse, IconButton, Typography } from '@material-tailwind/react';
 import { HiChevronRight, HiOutlineTrash } from 'react-icons/hi';
+import { HiExclamationTriangle } from 'react-icons/hi2';
 import toast from 'react-hot-toast';
 
 import FgIcon from '@/components/designSystem/atoms/FgIcon';
 import FgCheckbox from '@/components/designSystem/atoms/formElements/FgCheckbox';
+import FgTooltip from '@/components/ui/widgets/FgTooltip';
 import ZarrAxisTable from '@/components/ui/BrowsePage/ZarrAxisTable';
 import { useCartContext } from '@/contexts/CartContext';
 import { getOmeZarrChannels, getOmeZarrMetadata } from '@/omezarr-helper';
@@ -19,6 +21,7 @@ interface CartDatasetRowProps {
   readonly path: string;
   readonly label: string;
   readonly items: CartItem[];
+  readonly mismatch?: boolean;
 }
 
 // ponytail: two-level dataset->channel tree via MT Collapse (no generic
@@ -30,7 +33,8 @@ export default function CartDatasetRow({
   fsp_name,
   path,
   label,
-  items
+  items,
+  mismatch
 }: CartDatasetRowProps) {
   const { addToCart, removeFromCart, removeManyFromCart } = useCartContext();
   const [isOpen, setIsOpen] = useState(false);
@@ -121,6 +125,15 @@ export default function CartDatasetRow({
             size="sm"
           />
           <Typography className="text-foreground truncate">{label}</Typography>
+          {mismatch ? (
+            <FgTooltip label="Dimensions differ from the first layer in this view">
+              <FgIcon
+                className="text-warning shrink-0"
+                icon={HiExclamationTriangle}
+                size="sm"
+              />
+            </FgTooltip>
+          ) : null}
         </button>
         <IconButton
           aria-label="Remove dataset"
diff --git a/frontend/src/components/ui/Views/CartList.tsx b/frontend/src/components/ui/Views/CartList.tsx
index 975258b7..0c448579 100644
--- a/frontend/src/components/ui/Views/CartList.tsx
+++ b/frontend/src/components/ui/Views/CartList.tsx
@@ -7,6 +7,7 @@ import CartDatasetRow from '@/components/ui/Views/CartDatasetRow';
 import CreateViewButton from '@/components/ui/Views/CreateViewButton';
 import FgButton from '@/components/designSystem/atoms/FgButton';
 import { useCartContext } from '@/contexts/CartContext';
+import { useCartDimensionCheck } from '@/hooks/useCartDimensionCheck';
 import { datasetKey } from '@/utils/pathHandling';
 import type { CartItem } from '@/contexts/CartContext';
 
@@ -48,6 +49,7 @@ export default function CartList() {
   const navigate = useNavigate();
 
   const cartGroups = useMemo(() => groupCartByDataset(cart), [cart]);
+  const { mismatchedKeys } = useCartDimensionCheck(cart);
 
   const handleClearCart = async () => {
     try {
@@ -73,6 +75,7 @@ export default function CartList() {
           items={group.items}
           key={datasetKey(group.fsp_name, group.path)}
           label={group.label}
+          mismatch={mismatchedKeys.has(datasetKey(group.fsp_name, group.path))}
           path={group.path}
         />
       ))}

From adad154721c274d409b07ea006c4445c545dde64 Mon Sep 17 00:00:00 2001
From: Allison Truhlar <truhlara@janelia.hhmi.org>
Date: Thu, 20 Aug 2026 16:44:12 -0400
Subject: [PATCH 08/16] feat(views): gate Create View on acknowledging
 mismatched dimensions

---
 frontend/src/hooks/useCreateViewFlow.tsx | 23 ++++++++++++++++++++++-
 1 file changed, 22 insertions(+), 1 deletion(-)

diff --git a/frontend/src/hooks/useCreateViewFlow.tsx b/frontend/src/hooks/useCreateViewFlow.tsx
index 27ac1eba..1148ae12 100644
--- a/frontend/src/hooks/useCreateViewFlow.tsx
+++ b/frontend/src/hooks/useCreateViewFlow.tsx
@@ -5,10 +5,12 @@ import { useNavigate } from 'react-router';
 import type { ReactNode } from 'react';
 
 import { useCartCheckout } from '@/hooks/useCartCheckout';
+import { useCartDimensionCheck } from '@/hooks/useCartDimensionCheck';
 import { usePreferencesContext } from '@/contexts/PreferencesContext';
 import { useAllProxiedPathsQuery } from '@/queries/proxiedPathQueries';
 import { datasetKey } from '@/utils/pathHandling';
 import FgButton from '@/components/designSystem/atoms/FgButton';
+import FgCheckbox from '@/components/designSystem/atoms/formElements/FgCheckbox';
 import FgInput from '@/components/designSystem/atoms/formElements/FgInput';
 import FgSwitch from '@/components/designSystem/atoms/formElements/FgSwitch';
 import FgDialog from '@/components/ui/Dialogs/FgDialog';
@@ -34,8 +36,11 @@ export function useCreateViewFlow() {
 
   const [pending, setPending] = useState(false);
   const [name, setName] = useState('');
+  const [acknowledged, setAcknowledged] = useState(false);
   const [request, setRequest] = useState<PendingRequest | null>(null);
 
+  const { hasMismatch } = useCartDimensionCheck(request?.datasets ?? []);
+
   const runCheckout = async () => {
     if (!request) {
       return;
@@ -79,6 +84,7 @@ export function useCreateViewFlow() {
       areDataLinksAutomatic && dataLinkSubpathMode !== 'custom';
 
     setName(defaultName);
+    setAcknowledged(false);
     setRequest({
       datasets,
       onCreated,
@@ -126,9 +132,24 @@ export function useCreateViewFlow() {
           </>
         ) : null}
 
+        {hasMismatch ? (
+          <div className="flex flex-col gap-2">
+            <Typography className="text-warning font-semibold">
+              Some layers have dimensions that differ from the first layer.
+            </Typography>
+            <FgCheckbox
+              checked={acknowledged}
+              label="I understand I'm creating a view with mismatched dimensions."
+              onChange={e => setAcknowledged(e.target.checked)}
+            />
+          </div>
+        ) : null}
+
         <div className="flex gap-4">
           <FgButton
-            disabled={pending || name.trim() === ''}
+            disabled={
+              pending || name.trim() === '' || (hasMismatch && !acknowledged)
+            }
             loading={pending}
             loadingText="Creating..."
             onClick={() => void runCheckout()}

From 5a3e748fbd995609e3337bfe6e003ca159d81827 Mon Sep 17 00:00:00 2001
From: Allison Truhlar <truhlara@janelia.hhmi.org>
Date: Thu, 20 Aug 2026 16:46:11 -0400
Subject: [PATCH 09/16] feat(views): make the view name open the embedded
 viewer

---
 frontend/src/components/ui/Table/ngViewsColumns.tsx | 7 +++++--
 1 file changed, 5 insertions(+), 2 deletions(-)

diff --git a/frontend/src/components/ui/Table/ngViewsColumns.tsx b/frontend/src/components/ui/Table/ngViewsColumns.tsx
index d384f1cc..3e6b22d3 100644
--- a/frontend/src/components/ui/Table/ngViewsColumns.tsx
+++ b/frontend/src/components/ui/Table/ngViewsColumns.tsx
@@ -178,9 +178,12 @@ export function useNGViewsColumns(
           return (
             <div className="flex items-center justify-start truncate w-full h-full text-left">
               <FgTooltip label={label} triggerClasses={TRIGGER_CLASSES}>
-                <Typography className="text-foreground truncate text-left select-all">
+                <Link
+                  className="text-primary truncate text-left hover:underline"
+                  to={`/view/${item.read_key}`}
+                >
                   {label}
-                </Typography>
+                </Link>
               </FgTooltip>
             </div>
           );

From 836b88848336fe8b435215832af3f204fa7a031b Mon Sep 17 00:00:00 2001
From: Allison Truhlar <truhlara@janelia.hhmi.org>
Date: Thu, 20 Aug 2026 16:50:17 -0400
Subject: [PATCH 10/16] refactor(views): rename user-facing "NG
 View(s)"/"Neuroglancer View(s)" to "View(s)"

---
 frontend/src/__tests__/componentTests/NGViews.test.tsx      | 2 +-
 .../src/__tests__/componentTests/NeuroglancerView.test.tsx  | 4 ++--
 frontend/src/components/NGViews.tsx                         | 6 +++---
 frontend/src/components/NeuroglancerView.tsx                | 2 +-
 frontend/src/components/ui/Dialogs/DataLink.tsx             | 4 ++--
 frontend/src/components/ui/Navbar/Navbar.tsx                | 2 +-
 frontend/src/components/ui/Table/TableCard.tsx              | 2 +-
 7 files changed, 11 insertions(+), 11 deletions(-)

diff --git a/frontend/src/__tests__/componentTests/NGViews.test.tsx b/frontend/src/__tests__/componentTests/NGViews.test.tsx
index dfa2ccc0..8476504f 100644
--- a/frontend/src/__tests__/componentTests/NGViews.test.tsx
+++ b/frontend/src/__tests__/componentTests/NGViews.test.tsx
@@ -53,7 +53,7 @@ describe('NGViews page', () => {
         <NGViews />
       </MemoryRouter>
     );
-    expect(screen.getByText('Neuroglancer Views')).toBeInTheDocument();
+    expect(screen.getByText('Views')).toBeInTheDocument();
     expect(screen.getByText('Seeded View')).toBeInTheDocument();
   });
 });
diff --git a/frontend/src/__tests__/componentTests/NeuroglancerView.test.tsx b/frontend/src/__tests__/componentTests/NeuroglancerView.test.tsx
index ba9b154a..d980f328 100644
--- a/frontend/src/__tests__/componentTests/NeuroglancerView.test.tsx
+++ b/frontend/src/__tests__/componentTests/NeuroglancerView.test.tsx
@@ -77,14 +77,14 @@ describe('NeuroglancerView', () => {
     ).toBeInTheDocument();
   });
 
-  it('shows a breadcrumb linking back to the NG Views list', () => {
+  it('shows a breadcrumb linking back to the Views list', () => {
     useViewStateByReadKey.mockReturnValue({
       data: { title: 'My View', layers: [{ name: 'L0' }] },
       isPending: false,
       isError: false
     });
     render(<NeuroglancerView />);
-    const crumbLink = screen.getByRole('link', { name: /ng views/i });
+    const crumbLink = screen.getByRole('link', { name: /^views$/i });
     expect(crumbLink).toHaveAttribute('href', '/ngviews');
   });
 
diff --git a/frontend/src/components/NGViews.tsx b/frontend/src/components/NGViews.tsx
index 80864ad8..671a77ca 100644
--- a/frontend/src/components/NGViews.tsx
+++ b/frontend/src/components/NGViews.tsx
@@ -84,16 +84,16 @@ export default function NGViews() {
     <>
       <div className="w-full">
         <Typography className="mb-2 text-foreground font-bold" type="h5">
-          Neuroglancer Views
+          Views
         </Typography>
         <Typography className="mb-4 text-foreground">
-          Your saved Neuroglancer Views.
+          Your saved Views.
         </Typography>
 
         <TableCard
           columns={columns}
           data={allViewsQuery.data || []}
-          dataType="NG views"
+          dataType="views"
           errorState={allViewsQuery.error}
           gridColsStyle={gridColsStyle}
           loadingState={allViewsQuery.isPending}
diff --git a/frontend/src/components/NeuroglancerView.tsx b/frontend/src/components/NeuroglancerView.tsx
index 6a0d3a09..bece79a3 100644
--- a/frontend/src/components/NeuroglancerView.tsx
+++ b/frontend/src/components/NeuroglancerView.tsx
@@ -85,7 +85,7 @@ export default function NeuroglancerView() {
       <div className="flex shrink-0 items-center justify-between gap-4 border-b border-surface px-4 py-2">
         <div className="flex min-w-0 items-center gap-1 text-foreground/70">
           <FgLink size="sm" to="/ngviews">
-            NG Views
+            Views
           </FgLink>
           <Typography variant="small">/</Typography>
           <Typography className="truncate" variant="small">
diff --git a/frontend/src/components/ui/Dialogs/DataLink.tsx b/frontend/src/components/ui/Dialogs/DataLink.tsx
index 8a042b7c..57419786 100644
--- a/frontend/src/components/ui/Dialogs/DataLink.tsx
+++ b/frontend/src/components/ui/Dialogs/DataLink.tsx
@@ -366,8 +366,8 @@ export default function DataLinkDialog(props: DataLinkDialogProps) {
             {dependentViews && dependentViews.length > 0 ? (
               <div className="flex flex-col gap-2 bg-surface/30 p-2 rounded">
                 <Typography className="text-foreground font-semibold">
-                  These Neuroglancer Views you own use this data link and will
-                  be marked broken:
+                  These Views you own use this data link and will be marked
+                  broken:
                 </Typography>
                 <ul className="list-disc pl-5">
                   {dependentViews.map(v => (
diff --git a/frontend/src/components/ui/Navbar/Navbar.tsx b/frontend/src/components/ui/Navbar/Navbar.tsx
index d242e016..4a5e5b10 100644
--- a/frontend/src/components/ui/Navbar/Navbar.tsx
+++ b/frontend/src/components/ui/Navbar/Navbar.tsx
@@ -81,7 +81,7 @@ function NavList() {
     { icon: HiOutlineShare, title: 'Data Links', href: '/links' },
     {
       icon: HiOutlineEye,
-      title: 'NG Views',
+      title: 'Views',
       href: '/ngviews'
     },
     {
diff --git a/frontend/src/components/ui/Table/TableCard.tsx b/frontend/src/components/ui/Table/TableCard.tsx
index 1acf8f4b..719bed66 100644
--- a/frontend/src/components/ui/Table/TableCard.tsx
+++ b/frontend/src/components/ui/Table/TableCard.tsx
@@ -74,7 +74,7 @@ type DataType =
   | 'data links'
   | 'tasks'
   | 'NG links'
-  | 'NG views'
+  | 'views'
   | 'jobs'
   | 'apps'
   | 'shared apps';

From 6c7b0477dce083925f33e95e764ada5e8086b669 Mon Sep 17 00:00:00 2001
From: Allison Truhlar <truhlara@janelia.hhmi.org>
Date: Thu, 20 Aug 2026 16:54:47 -0400
Subject: [PATCH 11/16] test(views): mock useCartDimensionCheck in
 cart/create-view tests to restore QueryClient-free rendering

---
 frontend/src/__tests__/componentTests/CartList.test.tsx        | 3 +++
 frontend/src/__tests__/componentTests/CartTab.test.tsx         | 3 +++
 .../src/__tests__/componentTests/CreateViewButton.test.tsx     | 3 +++
 .../src/__tests__/componentTests/useCreateViewFlow.test.tsx    | 3 +++
 4 files changed, 12 insertions(+)

diff --git a/frontend/src/__tests__/componentTests/CartList.test.tsx b/frontend/src/__tests__/componentTests/CartList.test.tsx
index bd6512da..4f318d6a 100644
--- a/frontend/src/__tests__/componentTests/CartList.test.tsx
+++ b/frontend/src/__tests__/componentTests/CartList.test.tsx
@@ -46,6 +46,9 @@ vi.mock('@/components/ui/Views/CreateViewButton', () => ({
     </button>
   )
 }));
+vi.mock('@/hooks/useCartDimensionCheck', () => ({
+  useCartDimensionCheck: () => ({ mismatchedKeys: new Set(), hasMismatch: false })
+}));
 
 import CartList from '@/components/ui/Views/CartList';
 
diff --git a/frontend/src/__tests__/componentTests/CartTab.test.tsx b/frontend/src/__tests__/componentTests/CartTab.test.tsx
index 672c66b4..008630e8 100644
--- a/frontend/src/__tests__/componentTests/CartTab.test.tsx
+++ b/frontend/src/__tests__/componentTests/CartTab.test.tsx
@@ -98,6 +98,9 @@ vi.mock('@/components/ui/Views/CreateViewButton', () => ({
     <button type="button">{label ?? 'Create View'}</button>
   )
 }));
+vi.mock('@/hooks/useCartDimensionCheck', () => ({
+  useCartDimensionCheck: () => ({ mismatchedKeys: new Set(), hasMismatch: false })
+}));
 
 import CartList from '@/components/ui/Views/CartList';
 
diff --git a/frontend/src/__tests__/componentTests/CreateViewButton.test.tsx b/frontend/src/__tests__/componentTests/CreateViewButton.test.tsx
index 4818f8c1..b01291ce 100644
--- a/frontend/src/__tests__/componentTests/CreateViewButton.test.tsx
+++ b/frontend/src/__tests__/componentTests/CreateViewButton.test.tsx
@@ -22,6 +22,9 @@ vi.mock('react-router', () => ({ useNavigate: () => vi.fn() }));
 vi.mock('@/contexts/CartContext', () => ({
   useCartContext: () => ({ clearCart: vi.fn().mockResolvedValue(undefined) })
 }));
+vi.mock('@/hooks/useCartDimensionCheck', () => ({
+  useCartDimensionCheck: () => ({ mismatchedKeys: new Set(), hasMismatch: false })
+}));
 
 import CreateViewButton from '@/components/ui/Views/CreateViewButton';
 
diff --git a/frontend/src/__tests__/componentTests/useCreateViewFlow.test.tsx b/frontend/src/__tests__/componentTests/useCreateViewFlow.test.tsx
index 85cca967..b4d2796e 100644
--- a/frontend/src/__tests__/componentTests/useCreateViewFlow.test.tsx
+++ b/frontend/src/__tests__/componentTests/useCreateViewFlow.test.tsx
@@ -19,6 +19,9 @@ vi.mock('@/queries/proxiedPathQueries', () => ({
   useAllProxiedPathsQuery: () => ({ data: [] })
 }));
 vi.mock('react-router', () => ({ useNavigate: () => vi.fn() }));
+vi.mock('@/hooks/useCartDimensionCheck', () => ({
+  useCartDimensionCheck: () => ({ mismatchedKeys: new Set(), hasMismatch: false })
+}));
 
 import { useCreateViewFlow } from '@/hooks/useCreateViewFlow';
 

From c061dcf8809e2bbd9123f393200495f151396b5a Mon Sep 17 00:00:00 2001
From: Allison Truhlar <truhlara@janelia.hhmi.org>
Date: Thu, 20 Aug 2026 16:58:04 -0400
Subject: [PATCH 12/16] feat(views): add a Create view tile to the zarr
 metadata preview

---
 .../components/ui/BrowsePage/DataToolLinks.tsx | 18 +++++++++++++++++-
 .../components/ui/BrowsePage/ZarrPreview.tsx   | 16 ++++++++++++++++
 2 files changed, 33 insertions(+), 1 deletion(-)

diff --git a/frontend/src/components/ui/BrowsePage/DataToolLinks.tsx b/frontend/src/components/ui/BrowsePage/DataToolLinks.tsx
index 227afdd7..d33fd658 100644
--- a/frontend/src/components/ui/BrowsePage/DataToolLinks.tsx
+++ b/frontend/src/components/ui/BrowsePage/DataToolLinks.tsx
@@ -1,7 +1,7 @@
 import { Typography } from '@material-tailwind/react';
 import { Link } from 'react-router';
 import fallback_logo from '@/assets/fallback_logo.png';
-import { HiOutlineClipboardCopy } from 'react-icons/hi';
+import { HiOutlineClipboardCopy, HiOutlinePlusCircle } from 'react-icons/hi';
 import { HiOutlineEllipsisHorizontalCircle } from 'react-icons/hi2';
 
 import type { OpenWithToolUrls, PendingToolKey } from '@/hooks/useZarrMetadata';
@@ -64,6 +64,7 @@ export default function DataToolLinks({
   compact = false,
   dataLinkUrl,
   fspName,
+  onCreateView,
   onToolClick,
   path,
   showCopiedTooltip,
@@ -73,6 +74,7 @@ export default function DataToolLinks({
   readonly compact?: boolean;
   readonly dataLinkUrl?: string;
   readonly fspName?: string;
+  readonly onCreateView?: () => void;
   readonly onToolClick: (toolKey: PendingToolKey) => Promise<void>;
   readonly path?: string;
   readonly showCopiedTooltip: boolean;
@@ -130,6 +132,20 @@ export default function DataToolLinks({
           <span className={LABEL_CLASSES}>Copy</span>
         </div>
 
+        {onCreateView ? (
+          <div className="flex flex-col items-center w-16">
+            <FgTooltip
+              as="button"
+              label="Create a Neuroglancer view of this dataset"
+              onClick={() => onCreateView()}
+              triggerClasses={CIRCLE_CLASSES}
+            >
+              <FgIcon className="text-foreground" icon={HiOutlinePlusCircle} />
+            </FgTooltip>
+            <span className={LABEL_CLASSES}>Create view</span>
+          </div>
+        ) : null}
+
         {dataLinkUrl && fspName && path ? (
           <div className="flex flex-col items-center w-16">
             <DialogIconBtn
diff --git a/frontend/src/components/ui/BrowsePage/ZarrPreview.tsx b/frontend/src/components/ui/BrowsePage/ZarrPreview.tsx
index fac230b7..33721b5f 100644
--- a/frontend/src/components/ui/BrowsePage/ZarrPreview.tsx
+++ b/frontend/src/components/ui/BrowsePage/ZarrPreview.tsx
@@ -1,5 +1,6 @@
 import { useState } from 'react';
 import { Typography } from '@material-tailwind/react';
+import { useNavigate } from 'react-router';
 import type { UseQueryResult } from '@tanstack/react-query';
 
 import zarrLogo from '@/assets/zarr.jpg';
@@ -12,6 +13,7 @@ import type {
   PendingToolKey
 } from '@/hooks/useZarrMetadata';
 import useDataToolLinks from '@/hooks/useDataToolLinks';
+import { useCreateViewFlow } from '@/hooks/useCreateViewFlow';
 import { Metadata } from '@/omezarr-helper';
 
 type ZarrPreviewProps = {
@@ -53,6 +55,18 @@ export default function ZarrPreview({
     setPendingToolKey
   );
 
+  const navigate = useNavigate();
+  const { startCreateView, dialog } = useCreateViewFlow();
+
+  const datasetLabel = path.split('/').filter(Boolean).pop() || path;
+  const handleCreateView = () => {
+    startCreateView(
+      [{ fsp_name: fspName, path, label: datasetLabel }],
+      datasetLabel,
+      view => navigate(`/view/${view.read_key}`)
+    );
+  };
+
   return (
     <div className="min-w-full p-4 shadow-sm rounded-md bg-primary-light/30">
       <div className="flex gap-12 w-full h-fit">
@@ -99,6 +113,7 @@ export default function ZarrPreview({
               compact={mainPanelWidth <= 1000}
               dataLinkUrl={openWithToolUrls.copy || undefined}
               fspName={fspName}
+              onCreateView={handleCreateView}
               onToolClick={handleToolClick}
               path={path}
               showCopiedTooltip={showCopiedTooltip}
@@ -132,6 +147,7 @@ export default function ZarrPreview({
           </div>
         ) : null}
       </div>
+      {dialog}
     </div>
   );
 }

From 9da188ebda631d0a955e1afc648c8428a7cfa4d8 Mon Sep 17 00:00:00 2001
From: Allison Truhlar <truhlara@janelia.hhmi.org>
Date: Thu, 20 Aug 2026 17:08:16 -0400
Subject: [PATCH 13/16] fix(views): drop stray 'Neuroglancer view' tooltip
 copy; fail open on empty scales

---
 frontend/src/components/ui/BrowsePage/DataToolLinks.tsx | 2 +-
 frontend/src/utils/dimensionSignature.ts                | 8 +++++++-
 2 files changed, 8 insertions(+), 2 deletions(-)

diff --git a/frontend/src/components/ui/BrowsePage/DataToolLinks.tsx b/frontend/src/components/ui/BrowsePage/DataToolLinks.tsx
index d33fd658..350e4238 100644
--- a/frontend/src/components/ui/BrowsePage/DataToolLinks.tsx
+++ b/frontend/src/components/ui/BrowsePage/DataToolLinks.tsx
@@ -136,7 +136,7 @@ export default function DataToolLinks({
           <div className="flex flex-col items-center w-16">
             <FgTooltip
               as="button"
-              label="Create a Neuroglancer view of this dataset"
+              label="Create a view of this dataset"
               onClick={() => onCreateView()}
               triggerClasses={CIRCLE_CLASSES}
             >
diff --git a/frontend/src/utils/dimensionSignature.ts b/frontend/src/utils/dimensionSignature.ts
index 9b2aaa2f..af7a7a6f 100644
--- a/frontend/src/utils/dimensionSignature.ts
+++ b/frontend/src/utils/dimensionSignature.ts
@@ -1,4 +1,7 @@
-import { getResolvedScales, translateUnitToNeuroglancer } from '@/omezarr-helper';
+import {
+  getResolvedScales,
+  translateUnitToNeuroglancer
+} from '@/omezarr-helper';
 
 import type { Metadata } from '@/omezarr-helper';
 
@@ -23,6 +26,9 @@ export function getDimensionSignature(
   } catch {
     return null;
   }
+  if (scales.length === 0) {
+    return null;
+  }
   return {
     axes: multiscale.axes.map(axis => ({
       name: axis.name.toLowerCase(),

From 18f04cbf65c9aff427af8b911b2f85513c5cf347 Mon Sep 17 00:00:00 2001
From: Allison Truhlar <truhlara@janelia.hhmi.org>
Date: Fri, 21 Aug 2026 14:02:35 -0400
Subject: [PATCH 14/16] feat(views): show full source paths in the Views table

The Sources column showed each layer's path relative to its file share,
which is ambiguous across shares. Resolve the FileSharePath from the
layer's fsp_name and render the full path (share path plus subpath)
using the viewer's path-format preference, matching how the Data Links
and Jobs tables display paths. Fall back to the relative path when the
share can't be resolved, such as a local environment with no central
URL configured.
---
 .../__tests__/componentTests/NGViews.test.tsx |  6 +++
 .../componentTests/ngViewsColumns.test.tsx    | 27 +++++++++-
 .../components/ui/Table/ngViewsColumns.tsx    | 54 ++++++++++++++-----
 3 files changed, 72 insertions(+), 15 deletions(-)

diff --git a/frontend/src/__tests__/componentTests/NGViews.test.tsx b/frontend/src/__tests__/componentTests/NGViews.test.tsx
index 8476504f..8f17acdb 100644
--- a/frontend/src/__tests__/componentTests/NGViews.test.tsx
+++ b/frontend/src/__tests__/componentTests/NGViews.test.tsx
@@ -43,6 +43,12 @@ vi.mock('@/queries/proxiedPathQueries', () => ({
 vi.mock('@/components/ui/Views/CreateViewButton', () => ({
   default: () => <button type="button">Create View</button>
 }));
+vi.mock('@/contexts/PreferencesContext', () => ({
+  usePreferencesContext: () => ({ pathPreference: ['linux_path'] })
+}));
+vi.mock('@/contexts/ZonesAndFspMapContext', () => ({
+  useZoneAndFspMapContext: () => ({ zonesAndFspQuery: { data: {} } })
+}));
 
 import NGViews from '@/components/NGViews';
 
diff --git a/frontend/src/__tests__/componentTests/ngViewsColumns.test.tsx b/frontend/src/__tests__/componentTests/ngViewsColumns.test.tsx
index 08a4c0bf..2d59452c 100644
--- a/frontend/src/__tests__/componentTests/ngViewsColumns.test.tsx
+++ b/frontend/src/__tests__/componentTests/ngViewsColumns.test.tsx
@@ -29,6 +29,28 @@ vi.mock('@/queries/proxiedPathQueries', () => ({
     ]
   })
 }));
+vi.mock('@/contexts/PreferencesContext', () => ({
+  usePreferencesContext: () => ({ pathPreference: ['linux_path'] })
+}));
+vi.mock('@/contexts/ZonesAndFspMapContext', () => ({
+  useZoneAndFspMapContext: () => ({
+    zonesAndFspQuery: {
+      // key format is `fsp_<name>` (see makeMapKey)
+      data: {
+        fsp_nrs: {
+          zone: 'z',
+          name: 'nrs',
+          group: '',
+          storage: '',
+          mount_path: '/nrs',
+          linux_path: '/nrs',
+          mac_path: null,
+          windows_path: null
+        }
+      }
+    }
+  })
+}));
 
 const view: View = {
   short_key: 'k1',
@@ -116,10 +138,11 @@ describe('useNGViewsColumns', () => {
         <TableProbe onDelete={vi.fn()} onRename={vi.fn()} />
       </MemoryRouter>
     );
-    const link = screen.getByText('dudman/reg.zarr/g1_r0');
+    // Sources show the full path (file share path + subpath), not just the subpath.
+    const link = screen.getByText('/nrs/dudman/reg.zarr/g1_r0');
     expect(link).toBeInTheDocument();
     expect(link.closest('a')).toHaveAttribute('href');
-    expect(screen.getByText('dudman/reg.zarr/g1_r1')).toBeInTheDocument();
+    expect(screen.getByText('/nrs/dudman/reg.zarr/g1_r1')).toBeInTheDocument();
   });
 
   it('fires onRename and onDelete from the actions menu', async () => {
diff --git a/frontend/src/components/ui/Table/ngViewsColumns.tsx b/frontend/src/components/ui/Table/ngViewsColumns.tsx
index 3e6b22d3..e175e128 100644
--- a/frontend/src/components/ui/Table/ngViewsColumns.tsx
+++ b/frontend/src/components/ui/Table/ngViewsColumns.tsx
@@ -6,13 +6,22 @@ import type { ColumnDef } from '@tanstack/react-table';
 import toast from 'react-hot-toast';
 
 import type { View } from '@/queries/viewQueries';
-import { downloadTextFile, formatDateString, makeBrowseLink } from '@/utils';
+import {
+  downloadTextFile,
+  formatDateString,
+  getPreferredPathForDisplay,
+  makeBrowseLink,
+  makeMapKey
+} from '@/utils';
 import { constructNeuroglancerUrl } from '@/utils/neuroglancerUrl';
 import { copyToClipboard } from '@/utils/copyText';
 import { useAllProxiedPathsQuery } from '@/queries/proxiedPathQueries';
+import { usePreferencesContext } from '@/contexts/PreferencesContext';
+import { useZoneAndFspMapContext } from '@/contexts/ZonesAndFspMapContext';
 import FgTooltip from '../widgets/FgTooltip';
 import CardActionsMenu from '@/components/ui/Menus/CardActionsMenu';
 import type { MenuItem } from '@/components/ui/Menus/FgMenuItems';
+import type { FileSharePath } from '@/shared.types';
 
 const TRIGGER_CLASSES = 'h-min max-w-full';
 
@@ -159,6 +168,8 @@ export function useNGViewsColumns(
   // are in this (current-user-scoped) query. Layers whose Data Link is missing
   // or broken simply don't resolve to a browse link.
   const proxiedPathsQuery = useAllProxiedPathsQuery();
+  const { pathPreference } = usePreferencesContext();
+  const { zonesAndFspQuery } = useZoneAndFspMapContext();
   const pathById = useMemo(() => {
     const map = new Map<number, { fsp_name: string; path: string }>();
     for (const p of proxiedPathsQuery.data ?? []) {
@@ -250,17 +261,25 @@ export function useNGViewsColumns(
           }
           return (
             <div className="flex flex-col justify-center gap-0.5 h-full w-full min-w-0 text-left">
-              {sources.map(src => (
-                <Link
-                  className="block max-w-full truncate text-primary text-xs text-left hover:underline"
-                  key={`${src.fsp_name}::${src.path}`}
-                  onClick={e => e.stopPropagation()}
-                  title={src.path}
-                  to={makeBrowseLink(src.fsp_name, src.path)}
-                >
-                  {src.path}
-                </Link>
-              ))}
+              {sources.map(src => {
+                const fsp = zonesAndFspQuery.data?.[
+                  makeMapKey('fsp', src.fsp_name)
+                ] as FileSharePath | undefined;
+                const fullPath =
+                  getPreferredPathForDisplay(pathPreference, fsp, src.path) ||
+                  src.path;
+                return (
+                  <Link
+                    className="block max-w-full truncate text-primary text-xs text-left hover:underline"
+                    key={`${src.fsp_name}::${src.path}`}
+                    onClick={e => e.stopPropagation()}
+                    title={fullPath}
+                    to={makeBrowseLink(src.fsp_name, src.path)}
+                  >
+                    {fullPath}
+                  </Link>
+                );
+              })}
             </div>
           );
         },
@@ -307,6 +326,15 @@ export function useNGViewsColumns(
         enableSorting: false
       }
     ],
-    [onRename, onDelete, baseUrl, pathById, sourcesColWidth, onSourcesResize]
+    [
+      onRename,
+      onDelete,
+      baseUrl,
+      pathById,
+      sourcesColWidth,
+      onSourcesResize,
+      pathPreference,
+      zonesAndFspQuery.data
+    ]
   );
 }

From 3561d51ff56de792bfb6effa9efaa67edf47a8c6 Mon Sep 17 00:00:00 2001
From: Allison Truhlar <truhlara@janelia.hhmi.org>
Date: Fri, 21 Aug 2026 14:02:40 -0400
Subject: [PATCH 15/16] feat(views): explain the empty expansion for non-OME
 datasets in the cart

Expanding a plain (non-OME) Zarr array in the Layer Cart showed an empty
body: it has no multiscale axes to fill the dimension table and no
channels to select, so the row looked broken. Show "No OME-Zarr metadata
to display" when a dataset has neither axes nor channels. OME datasets
keep the axis table and channel checkboxes unchanged.
---
 .../__tests__/componentTests/CartTab.test.tsx | 18 ++++++-
 .../components/ui/Views/CartDatasetRow.tsx    | 54 +++++++++++--------
 2 files changed, 50 insertions(+), 22 deletions(-)

diff --git a/frontend/src/__tests__/componentTests/CartTab.test.tsx b/frontend/src/__tests__/componentTests/CartTab.test.tsx
index 008630e8..19185561 100644
--- a/frontend/src/__tests__/componentTests/CartTab.test.tsx
+++ b/frontend/src/__tests__/componentTests/CartTab.test.tsx
@@ -99,7 +99,10 @@ vi.mock('@/components/ui/Views/CreateViewButton', () => ({
   )
 }));
 vi.mock('@/hooks/useCartDimensionCheck', () => ({
-  useCartDimensionCheck: () => ({ mismatchedKeys: new Set(), hasMismatch: false })
+  useCartDimensionCheck: () => ({
+    mismatchedKeys: new Set(),
+    hasMismatch: false
+  })
 }));
 
 import CartList from '@/components/ui/Views/CartList';
@@ -187,6 +190,19 @@ describe('Layer Cart tab', () => {
     expect(screen.queryByText(/×/)).not.toBeInTheDocument();
   });
 
+  it('shows a "no OME-Zarr metadata" message for a plain (non-OME) array', async () => {
+    // Plain Zarr array: no channels and getOmeZarrMetadata throws (no
+    // multiscale group), so the expanded body has nothing to show.
+    getOmeZarrChannels.mockResolvedValueOnce([]);
+    getOmeZarrMetadata.mockRejectedValueOnce(new Error('not ome-zarr'));
+    const user = await renderCartTab();
+    await user.click(screen.getByRole('button', { name: 'Dataset B' }));
+
+    expect(
+      await screen.findByText('No OME-Zarr metadata to display.')
+    ).toBeInTheDocument();
+  });
+
   it('expands a dataset that has no Data Link (metadata fetched via /api/content)', async () => {
     const user = await renderCartTab();
     const expandButton = screen.getByRole('button', { name: 'Dataset B' });
diff --git a/frontend/src/components/ui/Views/CartDatasetRow.tsx b/frontend/src/components/ui/Views/CartDatasetRow.tsx
index 3177ea54..9acc4a29 100644
--- a/frontend/src/components/ui/Views/CartDatasetRow.tsx
+++ b/frontend/src/components/ui/Views/CartDatasetRow.tsx
@@ -111,6 +111,12 @@ export default function CartDatasetRow({
     }
   };
 
+  // A plain (non-OME) Zarr array has no multiscale axes and no channels, so its
+  // expanded body would otherwise be empty. Track whether there is anything to
+  // show so we can render an explicit "nothing here" message instead.
+  const hasOmeContent =
+    !!metadata?.multiscales?.[0]?.axes?.length || (channels?.length ?? 0) > 0;
+
   return (
     <div className="border-b border-surface py-2">
       <div className="flex items-center justify-between gap-2">
@@ -152,28 +158,34 @@ export default function CartDatasetRow({
 
       <Collapse open={isOpen}>
         <div className="pl-6 flex flex-col gap-2 pt-2">
-          {metadata ? <ZarrAxisTable metadata={metadata} /> : null}
-          <div className="flex flex-col gap-1">
-            <Typography className="text-foreground/70 text-xs font-semibold">
-              Optional: select channels to create per-channel layers
+          {loadingMeta || loadingChannels ? (
+            <Typography className="text-foreground/70 text-sm">
+              Loading...
+            </Typography>
+          ) : !hasOmeContent ? (
+            <Typography className="text-foreground/70 text-sm">
+              No OME-Zarr metadata to display.
             </Typography>
-            {loadingChannels ? (
-              <Typography className="text-foreground/70 text-sm">
-                Loading channels...
-              </Typography>
-            ) : (
-              (channels ?? []).map((channel, index) => (
-                <FgCheckbox
-                  checked={checkedChannels.has(channel)}
-                  key={channel}
-                  label={channel}
-                  onChange={e =>
-                    void handleToggleChannel(channel, index, e.target.checked)
-                  }
-                />
-              ))
-            )}
-          </div>
+          ) : (
+            <>
+              {metadata ? <ZarrAxisTable metadata={metadata} /> : null}
+              <div className="flex flex-col gap-1">
+                <Typography className="text-foreground/70 text-xs font-semibold">
+                  Optional: select channels to create per-channel layers
+                </Typography>
+                {(channels ?? []).map((channel, index) => (
+                  <FgCheckbox
+                    checked={checkedChannels.has(channel)}
+                    key={channel}
+                    label={channel}
+                    onChange={e =>
+                      void handleToggleChannel(channel, index, e.target.checked)
+                    }
+                  />
+                ))}
+              </div>
+            </>
+          )}
         </div>
       </Collapse>
     </div>

From 7aada80b8848b353eea544fc30019f301e03fcf5 Mon Sep 17 00:00:00 2001
From: Allison Truhlar <truhlara@janelia.hhmi.org>
Date: Fri, 21 Aug 2026 14:02:45 -0400
Subject: [PATCH 16/16] fix(views): fit the Views table columns without
 horizontal scroll

The default column tracks summed to 1040px, forcing a horizontal
scrollbar the first time the Views page loads. Narrow the Name and
Sources columns and tighten the Sharing, Updated, and Actions tracks so
the default layout fits. Name truncates with a tooltip, and Sources
stays resizable for long paths.
---
 frontend/src/components/NGViews.tsx | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/frontend/src/components/NGViews.tsx b/frontend/src/components/NGViews.tsx
index 671a77ca..66ee5b29 100644
--- a/frontend/src/components/NGViews.tsx
+++ b/frontend/src/components/NGViews.tsx
@@ -22,7 +22,7 @@ export default function NGViews() {
   // Sources column is user-resizable via a drag handle in its header. Width
   // lives here (not in the column def) so a re-render on drag actually
   // re-flows the CSS grid template.
-  const [sourcesColWidth, setSourcesColWidth] = useState(320);
+  const [sourcesColWidth, setSourcesColWidth] = useState(260);
   const clampSourcesWidth = useCallback(
     (w: number) => Math.max(120, Math.min(900, w)),
     []
@@ -78,7 +78,7 @@ export default function NGViews() {
   // Fixed pixel tracks for every column except Sources (user-resizable).
   // Fixed (not fr) so the row has a deterministic width — that's what lets
   // the outer overflow-x-auto scroll when Sources grows past the viewport.
-  const gridColsStyle = `220px 80px ${sourcesColWidth}px 160px 180px 80px`;
+  const gridColsStyle = `160px 80px ${sourcesColWidth}px 160px 160px 56px`;
 
   return (
     <>