CC-263 PoC for walkthrough through neuroglancer based on design

frontend/package.json

@@ -15,8 +15,8 @@
     "test": "pnpm -r test"
   },
   "devDependencies": {
-    "prettier": "^3.0.3",
-    "npm-run-all": "^4.1.5"
+    "npm-run-all": "^4.1.5",
+    "prettier": "^3.0.3"
   },
   "pnpm": {
     "overrides": {
@@ -34,5 +34,8 @@
   "resolutions": {
     "react": "18.2.0",
     "react-dom": "18.2.0"
+  },
+  "dependencies": {
+    "react-joyride": "^2.9.3"
   }
 }

frontend/packages/data-portal/app/components/Layout/constants.ts

@@ -62,13 +62,5 @@ export const REPORT_LINKS: NavLink[] = [
   },
 ]
 
-export const NEUROGLANCER_HELP_LINKS: NavLink[] = [
-  {
-    label: 'goToNeuroglancerDocumentation',
-    link: 'https://chanzuckerberg.github.io/cryoet-data-portal/stable/neuroglancer_quickstart.html#neuroglancer-quickstart',
-  },
-  {
-    label: 'neuroglancerWalkthrough',
-    link: '#',
-  },
-]
+export const NEUROGLANCER_DOC_LINK =
+  'https://chanzuckerberg.github.io/cryoet-data-portal/stable/neuroglancer_quickstart.html#neuroglancer-quickstart'

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

@@ -1,107 +1,122 @@
 import { Icon, Menu } from '@czi-sds/components'
-import { ReactNode, useRef, useState } from 'react'
+import {
+  ReactNode,
+  useRef,
+  useState,
+  useImperativeHandle,
+  forwardRef,
+} from 'react'
 
 import { cns } from 'app/utils/cns'
 
-export function MenuDropdown({
-  children,
-  className,
-  title,
-  variant = 'standard',
-  buttonElement,
-  paperClassName,
-}: {
-  children: ReactNode
-  variant?: 'standard' | 'outlined' | 'filled'
-  className?: string
-  title: ReactNode
-  buttonElement?: ReactNode
-  paperClassName?: string
-}) {
-  const [anchorEl, setAnchorEl] = useState<HTMLElement | null>(null)
-  const menuRef = useRef<HTMLDivElement>(null)
+export type MenuDropdownRef = {
+  closeMenu: () => void
+}
 
-  const variantStyles = {
-    standard: '!p-0',
-    outlined: 'border border-[#A2C9FF] px-3.5 py-1.5 rounded-full',
-    filled: 'bg-[#2573F4] px-3.5 py-1.5 rounded-full',
+export const MenuDropdown = forwardRef<
+  MenuDropdownRef,
+  {
+    children: ReactNode
+    variant?: 'standard' | 'outlined' | 'filled'
+    className?: string
+    title: ReactNode
+    buttonElement?: ReactNode
+    paperClassName?: string
   }
+>( 
+  (
+    { children, className, title, variant = 'standard', buttonElement, paperClassName},
+    ref,
+  ) => {
+    const [anchorEl, setAnchorEl] = useState<HTMLElement | null>(null)
+    const menuRef = useRef<HTMLDivElement>(null)
 
-  const iconStyles = {
-    standard: anchorEl
-      ? '!fill-sds-color-primitive-common-white'
-      : '!fill-sds-color-primitive-gray-400 group-hover:!fill-sds-color-primitive-common-white',
-    outlined: '!fill-[#A2C9FF]',
-    filled: '!fill-sds-color-primitive-common-white',
-  }
+    useImperativeHandle(ref, () => ({
+      closeMenu: () => setAnchorEl(null),
+    }))
 
-  const textStyles = {
-    standard: anchorEl
-      ? 'text-sds-color-primitive-common-white'
-      : 'text-sds-color-primitive-gray-400 group-hover:text-sds-color-primitive-common-white',
-    outlined: 'text-[#A2C9FF]',
-    filled: '!fill-sds-color-primitive-common-white',
-  }
+    const variantStyles = {
+      standard: '!p-0',
+      outlined: 'border border-[#A2C9FF] px-3.5 py-1.5 rounded-full',
+      filled: 'bg-[#2573F4] px-3.5 py-1.5 rounded-full',
+    }
 
-  return (
-    <div className={className}>
-      {title ? (
-        <button
-          className={cns(
-            'flex items-center gap-2 group',
-            variantStyles[variant],
-          )}
-          onClick={() => setAnchorEl(menuRef.current)}
-          type="button"
-        >
-          <span
-            ref={menuRef}
+    const iconStyles = {
+      standard: anchorEl
+        ? '!fill-sds-color-primitive-common-white'
+        : '!fill-sds-color-primitive-gray-400 group-hover:!fill-sds-color-primitive-common-white',
+      outlined: '!fill-[#A2C9FF]',
+      filled: '!fill-sds-color-primitive-common-white',
+    }
+
+    const textStyles = {
+      standard: anchorEl
+        ? 'text-sds-color-primitive-common-white'
+        : 'text-sds-color-primitive-gray-400 group-hover:text-sds-color-primitive-common-white',
+      outlined: 'text-[#A2C9FF]',
+      filled: '!fill-sds-color-primitive-common-white',
+    }
+
+    return (
+      <div className={className}>
+        {title ? (
+          <button
             className={cns(
-              'font-semibold',
-              textStyles[variant],
-              anchorEl
-                ? 'text-sds-color-primitive-common-white'
-                : 'text-sds-color-primitive-gray-400 group-hover:text-sds-color-primitive-common-white',
+              'flex items-center gap-2 group',
+              variantStyles[variant],
             )}
+            onClick={() => setAnchorEl(menuRef.current)}
+            type="button"
           >
-            {title}
-          </span>
+            <span
+              ref={menuRef}
+              className={cns(
+                'font-semibold',
+                textStyles[variant],
+                anchorEl
+                  ? 'text-sds-color-primitive-common-white'
+                  : 'text-sds-color-primitive-gray-400 group-hover:text-sds-color-primitive-common-white',
+              )}
+            >
+              {title}
+            </span>
 
-          <Icon
-            sdsIcon={anchorEl ? 'ChevronUp' : 'ChevronDown'}
-            sdsSize="xs"
-            sdsType="iconButton"
-            className={cns(
-              iconStyles[variant],
-              anchorEl
-                ? '!w-[10px] !h-[10px] !fill-sds-color-primitive-common-white'
-                : '!w-[10px] !h-[10px] !fill-sds-color-primitive-gray-400 group-hover:!fill-sds-color-primitive-common-white',
-            )}
-          />
-        </button>
-      ) : (
-        <button
-          onClick={() => setAnchorEl(menuRef.current)}
-          type="button"
-          className="text-[#999] hover:text-sds-color-primitive-common-white"
-        >
-          <span ref={menuRef}>{buttonElement}</span>
-        </button>
-      )}
+            <Icon
+              sdsIcon={anchorEl ? 'ChevronUp' : 'ChevronDown'}
+              sdsSize="xs"
+              sdsType="iconButton"
+              className={cns(
+                iconStyles[variant],
+                anchorEl
+                  ? '!w-[10px] !h-[10px] !fill-sds-color-primitive-common-white'
+                  : '!w-[10px] !h-[10px] !fill-sds-color-primitive-gray-400 group-hover:!fill-sds-color-primitive-common-white',
+              )}
+            />
+          </button>
+        ) : (
+          <button
+            onClick={() => setAnchorEl(menuRef.current)}
+            type="button"
+            className="text-[#999] hover:text-sds-color-primitive-common-white"
+          >
+            <span ref={menuRef}>{buttonElement}</span>
+          </button>
+        )}
 
-      <Menu
-        anchorEl={anchorEl}
-        open={!!anchorEl}
-        onClose={() => setAnchorEl(null)}
-        className="mt-2"
-        slotProps={{
-          paper: {
-            className: paperClassName,
-          },
-        }}
-      >
-        {children}
-      </Menu>
-    </div>
-  )
-}
+        <Menu
+          anchorEl={anchorEl}
+          open={!!anchorEl}
+          onClose={() => setAnchorEl(null)}
+          className="mt-2"
+          slotProps={{
+            paper: {
+              className: paperClassName,
+            },
+          }}
+        >
+          {children}
+        </Menu>
+      </div>
+    )
+  },
+)