fix: Surface neuroglancer in View Tomogram tooltip

frontend/packages/data-portal/app/components/Dataset/RunsTable.tsx

@@ -219,11 +219,13 @@ export function RunsTable() {
               <ViewTomogramButton
                 tomogramId={tomogram?.id.toString()}
                 buttonProps={{
-                  sdsType: 'secondary',
-                  sdsStyle: 'square',
+                  sdsType: 'primary',
+                  sdsStyle: 'minimal',
                   startIcon: (
                     <Icon sdsIcon="Cube" sdsType="button" sdsSize="s" />
                   ),
+                  className:
+                    '!min-w-[141px] min-h-[32px] hover:!bg-sds-color-primitive-gray-200 rounded-md',
                 }}
                 event={{
                   datasetId: dataset.id,

frontend/packages/data-portal/app/components/ViewTomogramButton.tsx

@@ -1,5 +1,6 @@
 import { Button, ButtonProps, TooltipProps } from '@czi-sds/components'
 
+import { I18n } from 'app/components/I18n'
 import { IdPrefix } from 'app/constants/idPrefixes'
 import { useI18n } from 'app/hooks/useI18n'
 import { EventPayloads, Events, usePlausible } from 'app/hooks/usePlausible'
@@ -38,16 +39,31 @@ export function ViewTomogramButton({
   return (
     <Tooltip
       tooltip={
-        enabled
-          ? t('viewTomogramInNeuroglancer', {
-              id: `${IdPrefix.Tomogram}-${tomogramId}`,
-            })
-          : t('noTomogramsAvailable')
+        enabled ? (
+          <>
+            <h4 className="font-semibold">
+              {t('viewTomogramInNeuroglancer', {
+                id: `${IdPrefix.Tomogram}-${tomogramId}`,
+              })}
+            </h4>
+            <Link
+              to={t('neuroglancerTutorialLink')}
+              variant="dashed-underlined"
+              className="!text-sds-color-primitive-gray-300 text-sds-body-xxs !border-sds-color-primitive-gray-800"
+            >
+              <p>
+                <I18n i18nKey="viewNeuroglancerTutorial" />
+              </p>
+            </Link>
+          </>
+        ) : (
+          t('noTomogramsAvailable')
+        )
       }
       sdsStyle="dark"
       center
       placement={tooltipPlacement}
-      size="s"
+      size="m"
     >
       {/* We need to disable this rule because we need the div to capture bubbled click events from
        the link button below. This is because Plausible automatically adds event listeners to every
@@ -61,7 +77,7 @@ export function ViewTomogramButton({
             trackViewTomogram()
           }
         }}
-        onMouseEnter={() => setIsHoveringOver?.(true)}
+        onMouseEnter={() => setIsHoveringOver?.(false)} // could be changed back to true if we needed this fine-grained control
         onMouseLeave={() => setIsHoveringOver?.(false)}
         className="min-w-[152px]"
       >

frontend/packages/data-portal/public/locales/en/translation.json

@@ -269,6 +269,7 @@
   "nameOrId": "Name/ID",
   "napariPlugin": "napari Plugin",
   "ndJsonLink": "https://zarr.readthedocs.io/en/stable/",
+  "neuroglancerTutorialLink": "https://chanzuckerberg.github.io/cryoet-data-portal/stable/neuroglancer_quickstart.html",
   "next": "Next",
   "no": "No",
   "noAnnotationsAvailable": "No Annotations Available",
@@ -470,10 +471,11 @@
   "viewDocs": "View Docs",
   "viewDeposition": "View Deposition",
   "viewModel": "View Model",
+  "viewNeuroglancerTutorial": "View Neuroglancer Tutorial",
   "viewOnKaggle": "View on Kaggle",
   "viewOutcome": "View Outcome Paper",
   "viewTomogram": "View Tomogram",
-  "viewTomogramInNeuroglancer": "View Tomogram {{id}} in Neuroglancer",
+  "viewTomogramInNeuroglancer": "Open {{id}} in Neuroglancer",
   "viewWinners": "View Winning Depositions",
   "voxelSpacing": "Voxel Spacing",
   "voxelSpacingId": "Voxel Spacing ID",