feat(views): open datasets as Views from the Neuroglancer button

frontend/src/__tests__/componentTests/DataToolLinks.test.tsx

@@ -344,6 +344,34 @@ describe('DataToolLinks - Expected Behavior', () => {
       expect(onAddToCart).toHaveBeenCalled();
     });
 
+    it('routes the Neuroglancer button to onOpenNeuroglancer when given', async () => {
+      const onOpenNeuroglancer = vi.fn();
+      const onToolClick = vi.fn(async () => {});
+      render(
+        <ViewersProvider>
+          <DataToolLinks
+            onOpenNeuroglancer={onOpenNeuroglancer}
+            onToolClick={onToolClick}
+            showCopiedTooltip={false}
+            title="Test Tools"
+            urls={mockOpenWithToolUrls}
+          />
+        </ViewersProvider>,
+        { initialEntries: ['/browse/test_fsp/test_file'] }
+      );
+
+      const logo = await screen.findByAltText(
+        'View in Neuroglancer',
+        {},
+        { timeout: 3000 }
+      );
+      expect(screen.getByText('Neuroglancer View')).toBeInTheDocument();
+      logo.click();
+
+      await waitFor(() => expect(onOpenNeuroglancer).toHaveBeenCalled());
+      expect(onToolClick).not.toHaveBeenCalled();
+    });
+
     it('should call onToolClick when copy icon is clicked', async () => {
       const onToolClick = vi.fn(async () => {});
       renderDataToolLinks(undefined, onToolClick);

frontend/src/__tests__/componentTests/NeuroglancerView.test.tsx

@@ -36,7 +36,7 @@ const ngBase = vi.hoisted(() => ({
 }));
 vi.mock('@/hooks/useDefaultNeuroglancerBaseUrl', () => ({
   useInternalNeuroglancerBaseUrl: () => ngBase.current,
-  useDefaultNeuroglancerBaseUrl: () => 'https://ng-preferred.example/'
+  useViewsNeuroglancerBaseUrl: () => 'https://ng-preferred.example/'
 }));
 const navigate = vi.hoisted(() => vi.fn());
 vi.mock('react-router', () => ({

frontend/src/components/NeuroglancerView.tsx

@@ -16,8 +16,8 @@ import {
 import { useViewStateByReadKey } from '@/queries/viewQueries';
 import { useViewsContext } from '@/contexts/ViewsContext';
 import {
-  useDefaultNeuroglancerBaseUrl,
-  useInternalNeuroglancerBaseUrl
+  useInternalNeuroglancerBaseUrl,
+  useViewsNeuroglancerBaseUrl
 } from '@/hooks/useDefaultNeuroglancerBaseUrl';
 import { useCanEditView } from '@/hooks/useCanEditView';
 import { useNeuroglancerViewer } from '@/hooks/useNeuroglancerViewer';
@@ -96,8 +96,8 @@ export default function NeuroglancerView() {
   const { updateViewMutation } = useViewsContext();
   const { canEdit, view: ownedView } = useCanEditView(readKey);
   const baseUrl = useInternalNeuroglancerBaseUrl();
-  // The new tab isn't framed, so it can honor the Internal/External preference.
-  const preferredBaseUrl = useDefaultNeuroglancerBaseUrl();
+  // The new tab isn't framed, so it can honor the Views Internal/Public preference.
+  const preferredBaseUrl = useViewsNeuroglancerBaseUrl();
   const containerRef = useRef<HTMLDivElement>(null);
   const [iframe, setIframe] = useState<HTMLIFrameElement | null>(null);
   const bridge = useNeuroglancerViewer(iframe);

frontend/src/components/Preferences.tsx

@@ -36,7 +36,7 @@ export default function Preferences() {
 
           <div>
             <Typography className="font-semibold mb-4" type="lead">
-              Neuroglancer links
+              Neuroglancer
             </Typography>
             <div className="pl-4 max-w-md">
               <NeuroglancerOptions />

frontend/src/components/ui/BrowsePage/DataToolLinks.tsx

@@ -65,6 +65,7 @@ export default function DataToolLinks({
   dataLinkUrl,
   fspName,
   onAddToCart,
+  onOpenNeuroglancer,
   onToolClick,
   path,
   showCopiedTooltip,
@@ -75,6 +76,8 @@ export default function DataToolLinks({
   readonly dataLinkUrl?: string;
   readonly fspName?: string;
   readonly onAddToCart?: () => void;
+  // Replaces the Neuroglancer link (e.g. to create a View instead).
+  readonly onOpenNeuroglancer?: () => void;
   readonly onToolClick: (toolKey: PendingToolKey) => Promise<void>;
   readonly path?: string;
   readonly showCopiedTooltip: boolean;
@@ -103,15 +106,20 @@ export default function DataToolLinks({
             return null;
           }
 
+          const opensView = viewer.key === 'neuroglancer' && onOpenNeuroglancer;
           return (
             <ToolLink
               key={viewer.key}
-              label={viewer.displayName}
+              label={opensView ? 'Neuroglancer View' : viewer.displayName}
               logoAlt={viewer.label}
               logoSrc={viewer.logoPath}
-              onToolClick={onToolClick}
+              onToolClick={
+                opensView ? async () => onOpenNeuroglancer() : onToolClick
+              }
               toolKey={viewer.key as PendingToolKey}
-              tooltipLabel={viewer.label}
+              tooltipLabel={
+                opensView ? 'Create a View from this dataset' : viewer.label
+              }
               url={url}
             />
           );

frontend/src/components/ui/BrowsePage/ZarrPreview.tsx

@@ -1,7 +1,7 @@
 import { useState } from 'react';
 import { Typography } from '@material-tailwind/react';
 import toast from 'react-hot-toast';
-import { useOutletContext } from 'react-router';
+import { useNavigate, useOutletContext } from 'react-router';
 import type { UseQueryResult } from '@tanstack/react-query';
 
 import zarrLogo from '@/assets/zarr.jpg';
@@ -15,7 +15,9 @@ import type {
   PendingToolKey
 } from '@/hooks/useZarrMetadata';
 import useDataToolLinks from '@/hooks/useDataToolLinks';
+import { useCreateViewFlow } from '@/hooks/useCreateViewFlow';
 import { useCartContext } from '@/contexts/CartContext';
+import { usePreferencesContext } from '@/contexts/PreferencesContext';
 import { Metadata, getDatasetWarnings } from '@/omezarr-helper';
 import type { OutletContextType } from '@/layouts/BrowseLayout';
 
@@ -65,6 +67,9 @@ export default function ZarrPreview({
   );
 
   const { addToCart } = useCartContext();
+  const { neuroglancerButtonTarget } = usePreferencesContext();
+  const { startCreateView, dialog: createViewDialog } = useCreateViewFlow();
+  const navigate = useNavigate();
   // ponytail: optional — component tests render without a router outlet.
   const outlet = useOutletContext<OutletContextType | null | undefined>();
 
@@ -138,6 +143,16 @@ export default function ZarrPreview({
               dataLinkUrl={openWithToolUrls.copy || undefined}
               fspName={fspName}
               onAddToCart={() => void handleAddToCart()}
+              onOpenNeuroglancer={
+                neuroglancerButtonTarget === 'views'
+                  ? () =>
+                      startCreateView(
+                        [{ fsp_name: fspName, path, label: datasetLabel }],
+                        datasetLabel,
+                        view => navigate(`/view/${view.read_key}`)
+                      )
+                  : undefined
+              }
               onToolClick={handleToolClick}
               path={path}
               showCopiedTooltip={showCopiedTooltip}
@@ -157,6 +172,7 @@ export default function ZarrPreview({
               tools={true}
             />
           ) : null}
+          {createViewDialog}
         </div>
         {zarrMetadataQuery.data?.metadata &&
         'arr' in zarrMetadataQuery.data.metadata ? (