feat: data link code snippets dialog

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

@@ -1,155 +1,185 @@
-import { Button, ButtonGroup, Typography } from '@material-tailwind/react';
+import { Typography } from '@material-tailwind/react';
 import { Link } from 'react-router';
+import { HiOutlineClipboardCopy } from 'react-icons/hi';
+import { HiOutlineEllipsisHorizontalCircle } from 'react-icons/hi2';
 
 import neuroglancer_logo from '@/assets/neuroglancer.png';
 import validator_logo from '@/assets/ome-ngff-validator.png';
 import volE_logo from '@/assets/aics_website-3d-cell-viewer.png';
 import avivator_logo from '@/assets/vizarr_logo.png';
-import copy_logo from '@/assets/copy-link-64.png';
 import type { OpenWithToolUrls, PendingToolKey } from '@/hooks/useZarrMetadata';
 import FgTooltip from '@/components/ui/widgets/FgTooltip';
+import DialogIconBtn from '@/components/ui/buttons/DialogIconBtn';
+import DataLinkUsageDialog from '@/components/ui/Dialogs/DataLinkUsageDialog';
+import type { DataLinkType } from '@/components/ui/Dialogs/DataLinkUsageDialog';
+
+const CIRCLE_CLASSES =
+  'rounded-full bg-surface-light dark:bg-surface-light hover:bg-surface dark:hover:bg-surface w-12 h-12 flex items-center justify-center cursor-pointer transform active:scale-90 transition-all duration-75';
+
+const LABEL_CLASSES = 'text-xs text-center text-foreground mt-1';
 
 export default function DataToolLinks({
+  compact = false,
+  dataLinkUrl,
+  dataType,
   onToolClick,
   showCopiedTooltip,
   title,
   urls
 }: {
+  readonly compact?: boolean;
+  readonly dataLinkUrl?: string;
+  readonly dataType?: DataLinkType;
   readonly onToolClick: (toolKey: PendingToolKey) => Promise<void>;
   readonly showCopiedTooltip: boolean;
   readonly title: string;
   readonly urls: OpenWithToolUrls | null;
 }) {
-  const tooltipTriggerClasses =
-    'rounded-sm m-0 p-0 transform active:scale-90 transition-transform duration-75';
-
   if (!urls) {
     return null;
   }
 
   return (
     <div className="my-1" data-tour="data-tool-links">
-      <Typography className="font-semibold text-sm text-surface-foreground">
+      <Typography className="font-semibold text-sm text-surface-foreground mb-1">
         {title}
       </Typography>
-      <ButtonGroup className="relative">
+      <div
+        className={`flex flex-wrap gap-2 items-start ${compact ? 'max-w-[13.5rem]' : ''}`}
+      >
         {urls.neuroglancer !== null ? (
-          <FgTooltip
-            as={Button}
-            label="View in Neuroglancer"
-            triggerClasses={tooltipTriggerClasses}
-            variant="ghost"
-          >
-            <Link
-              onClick={async e => {
-                e.preventDefault();
-                await onToolClick('neuroglancer');
-              }}
-              rel="noopener noreferrer"
-              target="_blank"
-              to={urls.neuroglancer}
+          <div className="flex flex-col items-center w-16">
+            <FgTooltip
+              label="View in Neuroglancer"
+              triggerClasses={CIRCLE_CLASSES}
             >
-              <img
-                alt="Neuroglancer logo"
-                className="max-h-8 max-w-8 m-1 rounded-sm"
-                src={neuroglancer_logo}
-              />
-            </Link>
-          </FgTooltip>
+              <Link
+                onClick={async e => {
+                  e.preventDefault();
+                  await onToolClick('neuroglancer');
+                }}
+                rel="noopener noreferrer"
+                target="_blank"
+                to={urls.neuroglancer}
+              >
+                <img
+                  alt="Neuroglancer logo"
+                  className="max-h-7 max-w-7 rounded-sm"
+                  src={neuroglancer_logo}
+                />
+              </Link>
+            </FgTooltip>
+            <span className={LABEL_CLASSES}>Neuroglancer</span>
+          </div>
         ) : null}
 
         {urls.vole !== null ? (
-          <FgTooltip
-            as={Button}
-            label="View in Vol-E"
-            triggerClasses={tooltipTriggerClasses}
-            variant="ghost"
-          >
-            <Link
-              onClick={async e => {
-                e.preventDefault();
-                await onToolClick('vole');
-              }}
-              rel="noopener noreferrer"
-              target="_blank"
-              to={urls.vole}
-            >
-              <img
-                alt="Vol-E logo"
-                className="max-h-8 max-w-8 m-1 rounded-sm"
-                src={volE_logo}
-              />
-            </Link>
-          </FgTooltip>
+          <div className="flex flex-col items-center w-16">
+            <FgTooltip label="View in Vol-E" triggerClasses={CIRCLE_CLASSES}>
+              <Link
+                onClick={async e => {
+                  e.preventDefault();
+                  await onToolClick('vole');
+                }}
+                rel="noopener noreferrer"
+                target="_blank"
+                to={urls.vole}
+              >
+                <img
+                  alt="Vol-E logo"
+                  className="max-h-7 max-w-7 rounded-sm"
+                  src={volE_logo}
+                />
+              </Link>
+            </FgTooltip>
+            <span className={LABEL_CLASSES}>Vol-E</span>
+          </div>
         ) : null}
 
         {urls.avivator !== null ? (
-          <FgTooltip
-            as={Button}
-            label="View in Avivator"
-            triggerClasses={tooltipTriggerClasses}
-            variant="ghost"
-          >
-            <Link
-              onClick={async e => {
-                e.preventDefault();
-                await onToolClick('avivator');
-              }}
-              rel="noopener noreferrer"
-              target="_blank"
-              to={urls.avivator}
-            >
-              <img
-                alt="Avivator logo"
-                className="max-h-8 max-w-8 m-1 rounded-sm"
-                src={avivator_logo}
-              />
-            </Link>
-          </FgTooltip>
+          <div className="flex flex-col items-center w-16">
+            <FgTooltip label="View in Avivator" triggerClasses={CIRCLE_CLASSES}>
+              <Link
+                onClick={async e => {
+                  e.preventDefault();
+                  await onToolClick('avivator');
+                }}
+                rel="noopener noreferrer"
+                target="_blank"
+                to={urls.avivator}
+              >
+                <img
+                  alt="Avivator logo"
+                  className="max-h-7 max-w-7 rounded-sm"
+                  src={avivator_logo}
+                />
+              </Link>
+            </FgTooltip>
+            <span className={LABEL_CLASSES}>Avivator</span>
+          </div>
         ) : null}
 
         {urls.validator !== null ? (
+          <div className="flex flex-col items-center w-16">
+            <FgTooltip
+              label="View in OME-Zarr Validator"
+              triggerClasses={CIRCLE_CLASSES}
+            >
+              <Link
+                onClick={async e => {
+                  e.preventDefault();
+                  await onToolClick('validator');
+                }}
+                rel="noopener noreferrer"
+                target="_blank"
+                to={urls.validator}
+              >
+                <img
+                  alt="OME-Zarr Validator logo"
+                  className="max-h-7 max-w-7 rounded-sm"
+                  src={validator_logo}
+                />
+              </Link>
+            </FgTooltip>
+            <span className={LABEL_CLASSES}>Validator</span>
+          </div>
+        ) : null}
+
+        <div className="flex flex-col items-center w-16">
           <FgTooltip
-            as={Button}
-            label="View in OME-Zarr Validator"
-            triggerClasses={tooltipTriggerClasses}
-            variant="ghost"
+            as="button"
+            label={showCopiedTooltip ? 'Copied!' : 'Copy data URL'}
+            onClick={async () => {
+              await onToolClick('copy');
+            }}
+            openCondition={showCopiedTooltip ? true : undefined}
+            triggerClasses={CIRCLE_CLASSES}
           >
-            <Link
-              onClick={async e => {
-                e.preventDefault();
-                await onToolClick('validator');
-              }}
-              rel="noopener noreferrer"
-              target="_blank"
-              to={urls.validator}
-            >
-              <img
-                alt="OME-Zarr Validator logo"
-                className="max-h-8 max-w-8 m-1 rounded-sm"
-                src={validator_logo}
-              />
-            </Link>
+            <HiOutlineClipboardCopy className="icon-default text-foreground" />
           </FgTooltip>
-        ) : null}
+          <span className={LABEL_CLASSES}>Copy</span>
+        </div>
 
-        <FgTooltip
-          as={Button}
-          label={showCopiedTooltip ? 'Copied!' : 'Copy data URL'}
-          onClick={async () => {
-            await onToolClick('copy');
-          }}
-          openCondition={showCopiedTooltip ? true : undefined}
-          triggerClasses={tooltipTriggerClasses}
-          variant="ghost"
-        >
-          <img
-            alt="Copy URL icon"
-            className="max-h-8 max-w-8 m-1 rounded-sm"
-            src={copy_logo}
-          />
-        </FgTooltip>
-      </ButtonGroup>
+        {dataLinkUrl && dataType ? (
+          <div className="flex flex-col items-center w-16">
+            <DialogIconBtn
+              icon={HiOutlineEllipsisHorizontalCircle}
+              label="More ways to open"
+              triggerClasses={CIRCLE_CLASSES}
+            >
+              {closeDialog => (
+                <DataLinkUsageDialog
+                  dataLinkUrl={dataLinkUrl}
+                  dataType={dataType}
+                  onClose={closeDialog}
+                  open={true}
+                />
+              )}
+            </DialogIconBtn>
+            <span className={LABEL_CLASSES}>More...</span>
+          </div>
+        ) : null}
+      </div>
     </div>
   );
 }

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

@@ -1,4 +1,4 @@
-import { useEffect, useState } from 'react';
+import { useState } from 'react';
 import { Switch, Typography } from '@material-tailwind/react';
 import { Prism as SyntaxHighlighter } from 'react-syntax-highlighter';
 import {
@@ -13,6 +13,7 @@ import {
   useFileContentQuery,
   useFileMetadataQuery
 } from '@/queries/fileContentQueries';
+import useDarkMode from '@/hooks/useDarkMode';
 
 type FileViewerProps = {
   readonly file: FileOrFolder;
@@ -79,8 +80,7 @@ const getLanguageFromExtension = (filename: string): string => {
 
 export default function FileViewer({ file }: FileViewerProps) {
   const { fspName } = useFileBrowserContext();
-
-  const [isDarkMode, setIsDarkMode] = useState<boolean>(false);
+  const isDarkMode = useDarkMode();
   const [formatJson, setFormatJson] = useState<boolean>(true);
 
   // First, fetch metadata to check if file is binary
@@ -97,22 +97,6 @@ export default function FileViewer({ file }: FileViewerProps) {
   const language = getLanguageFromExtension(file.name);
   const isJsonFile = language === 'json';
 
-  // Detect dark mode from document
-  useEffect(() => {
-    const checkDarkMode = () => {
-      setIsDarkMode(document.documentElement.classList.contains('dark'));
-    };
-
-    checkDarkMode();
-    const observer = new MutationObserver(checkDarkMode);
-    observer.observe(document.documentElement, {
-      attributes: true,
-      attributeFilter: ['class']
-    });
-
-    return () => observer.disconnect();
-  }, []);
-
   const renderViewer = () => {
     if (metadataQuery.isLoading) {
       return (
@@ -184,7 +168,10 @@ export default function FileViewer({ file }: FileViewerProps) {
         codeTagProps={mergedCodeTagProps}
         customStyle={{
           margin: 0,
-          padding: '1rem',
+          paddingTop: '1em',
+          paddingRight: '1em',
+          paddingBottom: '0',
+          paddingLeft: '1em',
           fontSize: '14px',
           lineHeight: '1.5',
           overflow: 'visible',

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

@@ -55,6 +55,9 @@ export default function N5Preview({
 
           {openWithToolUrls ? (
             <DataToolLinks
+              compact={mainPanelWidth <= 1000}
+              dataLinkUrl={openWithToolUrls.copy || undefined}
+              dataType="n5"
               onToolClick={handleToolClick}
               showCopiedTooltip={showCopiedTooltip}
               title="Open with:"