feat: info panel deposition metadata (#1092)

#918 Implements deposition metadata frontend in the info panel. This only implements the frontend, so it will need to be integrated with the backend as part of #920 ## Demos <img width="497" alt="image" src="https://github.com/user-attachments/assets/89ca0bfe-f354-472c-a644-b25aea4b4fe1"> <img width="476" alt="image" src="https://github.com/user-attachments/assets/ff64d737-4b0b-41ac-89b3-0b1d5d87ee3e">
chanzuckerberg · Sep 3, 2024 · 01a8b67 · 01a8b67
1 parent 54b4fe5
commit 01a8b67
Show file tree

Hide file tree

Showing 6 changed files with 146 additions and 36 deletions.
diff --git a/frontend/packages/data-portal/app/components/Deposition/MethodLinks/MethodLink.tsx b/frontend/packages/data-portal/app/components/Deposition/MethodLinks/MethodLink.tsx
@@ -0,0 +1,31 @@
+import { Link } from 'app/components/Link'
+import { useI18n } from 'app/hooks/useI18n'
+import { cns } from 'app/utils/cns'
+
+import { MethodLinkProps } from './common'
+
+export function MethodLink({
+  icon,
+  i18nLabel,
+  url,
+  title,
+  className,
+  linkProps,
+}: MethodLinkProps) {
+  const { t } = useI18n()
+
+  return (
+    <span className={cns('flex flex-row', className)}>
+      <span className="text-sds-gray-black items-center flex flex-row">
+        {icon}
+        <span className="font-semibold ml-sds-xxs mr-sds-xs">
+          {t(i18nLabel)}:
+        </span>
+      </span>
+
+      <Link to={url} {...linkProps}>
+        {title ?? url}
+      </Link>
+    </span>
+  )
+}
diff --git a/...d/packages/data-portal/app/components/Deposition/MethodLinks/MethodLinksMetadataTable.tsx b/...d/packages/data-portal/app/components/Deposition/MethodLinks/MethodLinksMetadataTable.tsx
@@ -1,13 +1,13 @@
 import { useMemo } from 'react'
 
 import { Accordion } from 'app/components/Accordion'
-import { Link } from 'app/components/Link'
 import { MetadataTable } from 'app/components/Table'
 import { methodLabels, MethodType } from 'app/constants/methodTypes'
 import { useI18n } from 'app/hooks/useI18n'
 import { getTableData } from 'app/utils/table'
 
 import { generateMethodLinks, MethodLinkVariantProps } from './common'
+import { MethodLink } from './MethodLink'
 
 const COLUMN_WIDTH = 170
 
@@ -40,20 +40,13 @@ function MethodLinkList({
     <ul>
       {links.map((link) => (
         <li key={`${link.url}_${link.i18nLabel}_${link.title}`}>
-          <span className="text-sds-body-s leading-sds-body-s flex flex-row whitespace-nowrap overflow-hidden text-ellipsis">
-            <span className="text-sds-gray-black items-center flex flex-row">
-              {link.icon}
-              <span className="font-semibold ml-sds-xxs mr-sds-xs">
-                {t(link.i18nLabel)}:
-              </span>
-            </span>
-            <Link
-              to={link.url}
-              className="text-sds-info-400 overflow-hidden text-ellipsis"
-            >
-              {link.title ?? link.url}
-            </Link>
-          </span>
+          <MethodLink
+            {...link}
+            className="text-sds-body-s leading-sds-body-s whitespace-nowrap overflow-hidden text-ellipsis"
+            linkProps={{
+              className: 'text-sds-info-400 overflow-hidden text-ellipsis',
+            }}
+          />
         </li>
       ))}
     </ul>

diff --git a/frontend/packages/data-portal/app/components/Deposition/MethodLinks/MethodLinksOverview.tsx b/frontend/packages/data-portal/app/components/Deposition/MethodLinks/MethodLinksOverview.tsx
@@ -2,7 +2,6 @@ import { Icon } from '@czi-sds/components'
 
 import { CollapsibleList } from 'app/components/CollapsibleList'
 import { I18n } from 'app/components/I18n'
-import { Link } from 'app/components/Link'
 import { PageHeaderSubtitle } from 'app/components/PageHeaderSubtitle'
 import { Tooltip } from 'app/components/Tooltip'
 import {
@@ -14,16 +13,17 @@ import { useI18n } from 'app/hooks/useI18n'
 
 import {
   generateMethodLinks,
-  MethodLink,
+  MethodLinkProps,
   MethodLinkVariantProps,
 } from './common'
+import { MethodLink } from './MethodLink'
 
 function MethodTypeSection({
   methodType,
   links,
 }: {
   methodType: MethodType
-  links?: MethodLink[]
+  links?: MethodLinkProps[]
 }) {
   const { t } = useI18n()
 
@@ -54,21 +54,14 @@ function MethodTypeSection({
         entries={links?.map((link) => ({
           key: `${link.url}_${link.i18nLabel}_${link.title}`,
           entry: (
-            <span className="text-sds-body-xxs leading-sds-body-xxs flex flex-row">
-              <span className="text-sds-gray-black items-center flex flex-row">
-                {link.icon}
-                <span className="font-semibold ml-sds-xxs mr-sds-xs">
-                  {t(link.i18nLabel)}:
-                </span>
-              </span>
-              <Link
-                to={link.url}
-                variant="dashed-underlined"
-                className="text-sds-gray-600"
-              >
-                {link.title ?? link.url}
-              </Link>
-            </span>
+            <MethodLink
+              {...link}
+              className="text-sds-body-xxs leading-sds-body-xxs"
+              linkProps={{
+                className: 'text-sds-gray-600',
+                variant: 'dashed-underlined',
+              }}
+            />
           ),
         }))}
         collapseAfter={1}

diff --git a/frontend/packages/data-portal/app/components/Deposition/MethodLinks/common.tsx b/frontend/packages/data-portal/app/components/Deposition/MethodLinks/common.tsx
@@ -2,13 +2,16 @@ import { Icon } from '@czi-sds/components'
 import { ReactNode } from 'react'
 
 import { SourceCodeIcon, WeightsIcon } from 'app/components/icons'
+import { VariantLinkProps } from 'app/components/Link'
 import { I18nKeys } from 'app/types/i18n'
 
-export interface MethodLink {
+export interface MethodLinkProps {
   i18nLabel: I18nKeys
   url: string
   icon: ReactNode
   title?: string
+  className?: string
+  linkProps?: Partial<VariantLinkProps>
 }
 
 export const iconMap = {
@@ -62,7 +65,7 @@ function methodLinkFromVariant({
   variant,
   url,
   title,
-}: MethodLinkVariantProps): MethodLink {
+}: MethodLinkVariantProps): MethodLinkProps {
   return {
     i18nLabel: variant,
     url,
@@ -73,7 +76,7 @@ function methodLinkFromVariant({
 
 export function generateMethodLinks(
   links: MethodLinkVariantProps[],
-): MethodLink[] {
+): MethodLinkProps[] {
   return links
     .toSorted(
       (a, b) =>

diff --git a/frontend/packages/data-portal/app/components/Deposition/MethodLinks/index.ts b/frontend/packages/data-portal/app/components/Deposition/MethodLinks/index.ts
@@ -1,2 +1,3 @@
+export * from './MethodLink'
 export * from './MethodLinksMetadataTable'
 export * from './MethodLinksOverview'
diff --git a/frontend/packages/data-portal/app/components/Run/AnnotationOveriewTable.tsx b/frontend/packages/data-portal/app/components/Run/AnnotationOveriewTable.tsx
@@ -3,10 +3,54 @@ import { AuthorLegend } from 'app/components/AuthorLegend'
 import { AuthorList } from 'app/components/AuthorList'
 import { useI18n } from 'app/hooks/useI18n'
 import { useAnnotation } from 'app/state/annotation'
+import { useFeatureFlag } from 'app/utils/featureFlags'
+
+import { MethodLink } from '../Deposition/MethodLinks'
+import {
+  generateMethodLinks,
+  MethodLinkVariantProps,
+} from '../Deposition/MethodLinks/common'
+import { Link } from '../Link'
+
+const METHOD_LINK_VARIANTS: MethodLinkVariantProps[] = [
+  {
+    variant: 'sourceCode',
+    url: 'https://www.example.com',
+    title: "My model's source code",
+  },
+  {
+    variant: 'sourceCode',
+    url: 'https://www.example.com',
+    title: 'Lorem-Ipsum3-D source code',
+  },
+  {
+    variant: 'modelWeights',
+    url: 'https://www.example.com',
+    title: 'Model Weights',
+  },
+  {
+    variant: 'website',
+    url: 'https://www.example.com',
+    title: 'Optional Custom Link Name',
+  },
+  {
+    variant: 'documentation',
+    url: 'https://www.example.com',
+    title: 'Optional Custom Link Name',
+  },
+  {
+    variant: 'other',
+    url: 'https://www.example.com',
+    title: 'Optional Custom Link Name',
+  },
+]
+
+const METHOD_LINKS = generateMethodLinks(METHOD_LINK_VARIANTS)
 
 export function AnnotationOverviewTable() {
   const { activeAnnotation: annotation } = useAnnotation()
   const { t } = useI18n()
+  const isDepositionsEnabled = useFeatureFlag('depositions')
 
   if (!annotation) {
     return null
@@ -37,6 +81,25 @@ export function AnnotationOverviewTable() {
           label: t('publication'),
           values: [annotation.annotation_publication ?? '--'],
         },
+
+        ...(isDepositionsEnabled
+          ? [
+              {
+                label: t('depositionName'),
+                values: ['Deposition Name'],
+                renderValue: () => (
+                  <Link className="text-sds-primary-400" to="/deposition/123">
+                    Deposition Name
+                  </Link>
+                ),
+              },
+              {
+                label: t('depositionId'),
+                values: ['CZCDP-12345'],
+              },
+            ]
+          : []),
+
         {
           label: t('depositionDate'),
           values: [annotation.deposition_date],
@@ -61,6 +124,32 @@ export function AnnotationOverviewTable() {
           label: t('annotationSoftware'),
           values: [annotation.annotation_software ?? '--'],
         },
+
+        ...(isDepositionsEnabled
+          ? [
+              {
+                label: t('methodLinks'),
+                // No value required for this field, render only links component
+                values: [''],
+                renderValue: () => (
+                  <ul>
+                    {METHOD_LINKS.map((link) => (
+                      <li key={`${link.url}_${link.i18nLabel}_${link.title}`}>
+                        <MethodLink
+                          {...link}
+                          className="text-sds-header-s leading-sds-header-s whitespace-nowrap overflow-hidden text-ellipsis"
+                          linkProps={{
+                            className:
+                              'text-sds-info-400 overflow-hidden text-ellipsis',
+                          }}
+                        />
+                      </li>
+                    ))}
+                  </ul>
+                ),
+              },
+            ]
+          : []),
       ]}
     />
   )