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({ 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: () => ( + + ), + }, + ] + : []), ]} /> )