diff --git a/frontend/packages/data-portal/app/components/Deposition/MethodLinks/MethodLink.tsx b/frontend/packages/data-portal/app/components/Deposition/MethodLinks/MethodLink.tsx
new file mode 100644
index 000000000..ceaf12e2d
--- /dev/null
+++ 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 (
+
+
+ {icon}
+
+ {t(i18nLabel)}:
+
+
+
+
+ {title ?? url}
+
+
+ )
+}
diff --git a/frontend/packages/data-portal/app/components/Deposition/MethodLinks/MethodLinksMetadataTable.tsx b/frontend/packages/data-portal/app/components/Deposition/MethodLinks/MethodLinksMetadataTable.tsx
index c83d7dfa4..109015083 100644
--- a/frontend/packages/data-portal/app/components/Deposition/MethodLinks/MethodLinksMetadataTable.tsx
+++ b/frontend/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({
{links.map((link) => (
-
-
-
- {link.icon}
-
- {t(link.i18nLabel)}:
-
-
-
- {link.title ?? link.url}
-
-
+
))}
diff --git a/frontend/packages/data-portal/app/components/Deposition/MethodLinks/MethodLinksOverview.tsx b/frontend/packages/data-portal/app/components/Deposition/MethodLinks/MethodLinksOverview.tsx
index ed2a83618..befd69f79 100644
--- 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: (
-
-
- {link.icon}
-
- {t(link.i18nLabel)}:
-
-
-
- {link.title ?? link.url}
-
-
+
),
}))}
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
index 4765fec8c..72681c5b9 100644
--- 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
}
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
index 960e43797..b051c9d7d 100644
--- 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
index 6d23c9af5..b58f4bd98 100644
--- 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: () => (
+
+ Deposition Name
+
+ ),
+ },
+ {
+ 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: () => (
+
+ {METHOD_LINKS.map((link) => (
+ -
+
+
+ ))}
+
+ ),
+ },
+ ]
+ : []),
]}
/>
)