Skip to content

Commit 5a1ecd1

Browse files
codemonkey800czi-github-helper[bot]
codemonkey800
and
czi-github-helper[bot]
authored
feat: method summary (#1816)
* i18n * add defaultValue option to useQueryParam * method summary container + tabs * annotation table * tomograms table * acquisition table + adjust table widths * experimental conditions table * fix typos * chore: Updated [rdev] values.yaml image tags to sha-cba9365 * descriptive query param * chore: Updated [rdev] values.yaml image tags to sha-4c4295a --------- Co-authored-by: czi-github-helper[bot] <+czi-github-helper[bot]@users.noreply.github.com>
1 parent 3a8d4ce commit 5a1ecd1

20 files changed

+778
-95
lines changed

‎.infra/rdev/values.yaml‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,7 @@ stack:
22
services:
33
frontend:
44
image:
5-
tag: sha-220418c
5+
tag: sha-4c4295a
66
replicaCount: 1
77
env:
88
- name: API_URL_V2

‎frontend/packages/data-portal/app/components/Deposition/DepositionOverview.tsx‎

Lines changed: 11 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -8,11 +8,13 @@ import { Tags } from 'app/constants/tags'
88
import { useDepositionById } from 'app/hooks/useDepositionById'
99
import { useI18n } from 'app/hooks/useI18n'
1010
import { cnsNoMerge } from 'app/utils/cns'
11+
import { useFeatureFlag } from 'app/utils/featureFlags'
1112

1213
import { MethodLinksOverview } from './MethodLinks'
14+
import { MethodSummary } from './MethodSummary'
1315

1416
// use clsx here instead of cns since it erroneously merges text-light-sds-color-primitive-gray-500 and text-sds-caps-xxxs-600-wide
15-
const sectionHeaderStyles = cnsNoMerge(
17+
const SECTION_HEADER_STYLES = cnsNoMerge(
1618
'font-semibold uppercase',
1719
'text-light-sds-color-primitive-gray-900 ',
1820
'text-sds-caps-xxxs-600-wide leading-sds-caps-xxxs tracking-sds-caps-xxxs-600-wide',
@@ -24,6 +26,8 @@ export function DepositionOverview() {
2426

2527
const { t } = useI18n()
2628

29+
const isExpandDepositions = useFeatureFlag('expandDepositions')
30+
2731
return (
2832
<div className="flex flex-col gap-sds-xl">
2933
<div>
@@ -51,7 +55,7 @@ export function DepositionOverview() {
5155
<div
5256
className={cnsNoMerge(
5357
'flex flex-row gap-sds-xxs',
54-
sectionHeaderStyles,
58+
SECTION_HEADER_STYLES,
5559
)}
5660
>
5761
<h3>{t('authors')}</h3>
@@ -65,7 +69,7 @@ export function DepositionOverview() {
6569
</div>
6670
<div className="flex flex-row gap-sds-xxl">
6771
<div className="flex-1 max-w-[260px]">
68-
<h3 className={sectionHeaderStyles}>{t('depositionData')}</h3>
72+
<h3 className={SECTION_HEADER_STYLES}>{t('depositionData')}</h3>
6973
<p className="flex flex-row gap-sds-xs">
7074
<span className="font-semibold text-light-sds-color-primitive-gray-900 ">
7175
{t('annotations')}:
@@ -80,7 +84,7 @@ export function DepositionOverview() {
8084
</div>
8185

8286
<div className="flex-1 max-w-[260px]">
83-
<h3 className={sectionHeaderStyles}>{t('publications')}</h3>
87+
<h3 className={SECTION_HEADER_STYLES}>{t('publications')}</h3>
8488
<DatabaseList
8589
entries={deposition.depositionPublications
8690
?.split(',')
@@ -93,7 +97,7 @@ export function DepositionOverview() {
9397
</div>
9498

9599
<div className="flex-1 max-w-[260px]">
96-
<h3 className={sectionHeaderStyles}>{t('relatedDatabases')}</h3>
100+
<h3 className={SECTION_HEADER_STYLES}>{t('relatedDatabases')}</h3>
97101
<DatabaseList
98102
entries={deposition.relatedDatabaseEntries
99103
?.split(',')
@@ -102,7 +106,8 @@ export function DepositionOverview() {
102106
/>
103107
</div>
104108
</div>
105-
<MethodLinksOverview />
109+
110+
{isExpandDepositions ? <MethodSummary /> : <MethodLinksOverview />}
106111
</div>
107112
)
108113
}

‎frontend/packages/data-portal/app/components/Deposition/MethodLinks/MethodLinkList.tsx‎

Lines changed: 32 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,32 @@
1+
import { CollapsibleList } from 'app/components/CollapsibleList'
2+
import { AnnotationMethodMetadata } from 'app/hooks/useDepositionById'
3+
4+
import { generateMethodLinkProps } from './common'
5+
import { MethodLink } from './MethodLink'
6+
7+
export function MethodLinkList({
8+
annotationMethod,
9+
methodLinks,
10+
}: {
11+
annotationMethod: string
12+
methodLinks: AnnotationMethodMetadata['methodLinks']
13+
}) {
14+
return (
15+
<CollapsibleList
16+
entries={generateMethodLinkProps(methodLinks).map((methodLinkProps) => ({
17+
key: `${annotationMethod}_${methodLinkProps.title}_${methodLinkProps.url}`,
18+
entry: (
19+
<MethodLink
20+
{...methodLinkProps}
21+
className="text-sds-body-xxs-400-wide leading-sds-body-xxs"
22+
linkProps={{
23+
className: 'text-light-sds-color-primitive-gray-600',
24+
variant: 'dashed-underlined',
25+
}}
26+
/>
27+
),
28+
}))}
29+
collapseAfter={1}
30+
/>
31+
)
32+
}

‎frontend/packages/data-portal/app/components/Deposition/MethodLinks/MethodLinksOverview.tsx‎

Lines changed: 12 additions & 54 deletions
Original file line numberDiff line numberDiff line change
@@ -1,19 +1,9 @@
1-
import { Icon } from '@czi-sds/components'
2-
3-
import { Annotation_Method_Type_Enum } from 'app/__generated_v2__/graphql'
4-
import { CollapsibleList } from 'app/components/CollapsibleList'
5-
import { I18n } from 'app/components/I18n'
61
import { PageHeaderSubtitle } from 'app/components/PageHeaderSubtitle'
7-
import { Tooltip } from 'app/components/Tooltip'
8-
import {
9-
getMethodTypeLabelI18nKey,
10-
getMethodTypeTooltipI18nKey,
11-
} from 'app/constants/methodTypes'
122
import { useDepositionById } from 'app/hooks/useDepositionById'
133
import { useI18n } from 'app/hooks/useI18n'
144

15-
import { generateMethodLinkProps } from './common'
16-
import { MethodLink } from './MethodLink'
5+
import { MethodLinkList } from './MethodLinkList'
6+
import { MethodTypeLabel } from './MethodTypeLabel'
177

188
export function MethodLinksOverview() {
199
const { t } = useI18n()
@@ -36,51 +26,19 @@ export function MethodLinksOverview() {
3626
<h3 className="text-sds-caps-xxxs-600-wide leading-sds-caps-xxxs font-semibold uppercase">
3727
{t('methodType')}
3828
</h3>
39-
<div className="flex flex-row gap-sds-xxs text-sds-body-xxs-400-wide leading-sds-body-xxs col-start-1">
40-
{t(
41-
getMethodTypeLabelI18nKey(
42-
methodType ?? Annotation_Method_Type_Enum.Automated,
43-
),
44-
)}
45-
<Tooltip
46-
// FIXME: make arrow centred on icon
47-
placement="top"
48-
tooltip={
49-
<I18n
50-
i18nKey={getMethodTypeTooltipI18nKey(
51-
methodType ?? Annotation_Method_Type_Enum.Automated,
52-
)}
53-
/>
54-
}
55-
>
56-
<Icon
57-
sdsIcon="InfoCircle"
58-
sdsSize="xs"
59-
className="!text-light-sds-color-primitive-gray-500"
60-
/>
61-
</Tooltip>
62-
</div>
29+
30+
<MethodTypeLabel
31+
className="col-start-1"
32+
methodType={methodType}
33+
/>
34+
6335
<h3 className="text-sds-caps-xxxs-600-wide leading-sds-caps-xxxs font-semibold uppercase col-start-2 row-start-1">
6436
{t('methodLinks')}
6537
</h3>
66-
<CollapsibleList
67-
entries={generateMethodLinkProps(methodLinks).map(
68-
(methodLinkProps) => ({
69-
key: `${annotationMethod}_${methodLinkProps.title}_${methodLinkProps.url}`,
70-
entry: (
71-
<MethodLink
72-
{...methodLinkProps}
73-
className="text-sds-body-xxs-400-wide leading-sds-body-xxs"
74-
linkProps={{
75-
className:
76-
'text-light-sds-color-primitive-gray-600',
77-
variant: 'dashed-underlined',
78-
}}
79-
/>
80-
),
81-
}),
82-
)}
83-
collapseAfter={1}
38+
39+
<MethodLinkList
40+
annotationMethod={annotationMethod}
41+
methodLinks={methodLinks}
8442
/>
8543
</div>
8644
{i < annotationMethods.length - 1 && separator}

‎frontend/packages/data-portal/app/components/Deposition/MethodLinks/MethodTypeLabel.tsx‎

Lines changed: 54 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,54 @@
1+
import { Icon } from '@czi-sds/components'
2+
3+
import { Annotation_Method_Type_Enum } from 'app/__generated_v2__/graphql'
4+
import { I18n } from 'app/components/I18n'
5+
import { Tooltip } from 'app/components/Tooltip'
6+
import {
7+
getMethodTypeLabelI18nKey,
8+
getMethodTypeTooltipI18nKey,
9+
} from 'app/constants/methodTypes'
10+
import { useI18n } from 'app/hooks/useI18n'
11+
import { cns } from 'app/utils/cns'
12+
13+
export function MethodTypeLabel({
14+
className,
15+
methodType,
16+
}: {
17+
className?: string
18+
methodType?: Annotation_Method_Type_Enum
19+
}) {
20+
const { t } = useI18n()
21+
22+
return (
23+
<div
24+
className={cns(
25+
'flex flex-row gap-sds-xxs',
26+
'text-sds-body-xxs-400-wide leading-sds-body-xxs',
27+
className,
28+
)}
29+
>
30+
{t(
31+
getMethodTypeLabelI18nKey(
32+
methodType ?? Annotation_Method_Type_Enum.Automated,
33+
),
34+
)}
35+
36+
<Tooltip
37+
placement="top"
38+
tooltip={
39+
<I18n
40+
i18nKey={getMethodTypeTooltipI18nKey(
41+
methodType ?? Annotation_Method_Type_Enum.Automated,
42+
)}
43+
/>
44+
}
45+
>
46+
<Icon
47+
sdsIcon="InfoCircle"
48+
sdsSize="xs"
49+
className="!text-light-sds-color-primitive-gray-500"
50+
/>
51+
</Tooltip>
52+
</div>
53+
)
54+
}

‎frontend/packages/data-portal/app/components/Deposition/MethodSummary/MethodSummary.tsx‎

Lines changed: 43 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,43 @@
1+
import { useI18n } from 'app/hooks/useI18n'
2+
import { cns } from 'app/utils/cns'
3+
4+
import { MethodSummaryAcquisitionTable } from './MethodSummaryAcquisitionTable'
5+
import { MethodSummaryAnnotationTable } from './MethodSummaryAnnotationTable'
6+
import { MethodSummaryExperimentalConditionsTable } from './MethodSummaryExperimentalConditionsTable'
7+
import { MethodSummaryTabs } from './MethodSummaryTabs'
8+
import { MethodSummaryTomogramsTable } from './MethodSummaryTomogramsTable'
9+
import { MethodSummaryTab } from './types'
10+
import { useMethodSummaryTab } from './useMethodSummaryTab'
11+
12+
export function MethodSummary() {
13+
const { t } = useI18n()
14+
const [tab] = useMethodSummaryTab()
15+
16+
return (
17+
<div className="p-4 bg-light-sds-color-primitive-gray-75">
18+
<div className="flex items-center gap-sds-xl mb-4">
19+
<h2
20+
className={cns(
21+
'font-semibold leading-sds-header-l',
22+
'text-sds-header-l-600-wide tracking-sds-header-l-600-wide',
23+
)}
24+
>
25+
{t('methodsSummary')}
26+
</h2>
27+
28+
<MethodSummaryTabs />
29+
</div>
30+
31+
{tab === MethodSummaryTab.Annotations && <MethodSummaryAnnotationTable />}
32+
{tab === MethodSummaryTab.Tomograms && <MethodSummaryTomogramsTable />}
33+
34+
{tab === MethodSummaryTab.Acquisition && (
35+
<MethodSummaryAcquisitionTable />
36+
)}
37+
38+
{tab === MethodSummaryTab.ExperimentalConditions && (
39+
<MethodSummaryExperimentalConditionsTable />
40+
)}
41+
</div>
42+
)
43+
}

0 commit comments

Comments
 (0)