Skip to content

Commit 7489cc6

Browse files
allison-truhlarallison-truhlar
committed
fix: hide Fiji and VVDViewer tabs for Zarr v3 / OME-Zarr 0.5
1 parent c254a08 commit 7489cc6

1 file changed

Lines changed: 207 additions & 0 deletions

File tree

‎frontend/src/components/ui/Dialogs/dataLinkUsage/tabsContent/DataLinkTabs.tsx‎

Lines changed: 207 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,207 @@
1+
import { useState } from 'react';
2+
import { Tabs } from '@material-tailwind/react';
3+
4+
import FijiTab from '@/components/ui/Dialogs/dataLinkUsage/tabsContent/FijiTab';
5+
import JavaTab from '@/components/ui/Dialogs/dataLinkUsage/tabsContent/javaTab/JavaTab';
6+
import NapariTab from '@/components/ui/Dialogs/dataLinkUsage/tabsContent/NapariTab';
7+
import PythonTab from '@/components/ui/Dialogs/dataLinkUsage/tabsContent/PythonTab';
8+
import VvdViewerTab from '@/components/ui/Dialogs/dataLinkUsage/tabsContent/VvdViewerTab';
9+
10+
import type {
11+
DataLinkType,
12+
ZarrVersion
13+
} from '@/components/ui/Dialogs/dataLinkUsage/DataLinkUsageDialog';
14+
15+
function getTabsForDataType(
16+
dataType: DataLinkType,
17+
dataLinkUrl: string,
18+
tooltipTriggerClasses: string,
19+
zarrVersion?: ZarrVersion
20+
) {
21+
if (dataType === 'directory') {
22+
return [
23+
{
24+
id: 'java',
25+
label: 'Java',
26+
content: (
27+
<JavaTab
28+
dataLinkUrl={dataLinkUrl}
29+
dataType={dataType}
30+
tooltipTriggerClasses={tooltipTriggerClasses}
31+
zarrVersion={zarrVersion}
32+
/>
33+
)
34+
},
35+
{
36+
id: 'python',
37+
label: 'Python',
38+
content: (
39+
<PythonTab
40+
dataLinkUrl={dataLinkUrl}
41+
dataType={dataType}
42+
tooltipTriggerClasses={tooltipTriggerClasses}
43+
/>
44+
)
45+
}
46+
];
47+
}
48+
49+
if (dataType === 'ome-zarr') {
50+
return [
51+
...(zarrVersion !== 3
52+
? [{ id: 'fiji', label: 'Fiji', content: <FijiTab /> }]
53+
: []),
54+
{
55+
id: 'java',
56+
label: 'Java',
57+
content: (
58+
<JavaTab
59+
dataLinkUrl={dataLinkUrl}
60+
dataType={dataType}
61+
tooltipTriggerClasses={tooltipTriggerClasses}
62+
zarrVersion={zarrVersion}
63+
/>
64+
)
65+
},
66+
...(zarrVersion === 2
67+
? [
68+
{
69+
id: 'napari',
70+
label: 'Napari',
71+
content: (
72+
<NapariTab
73+
dataLinkUrl={dataLinkUrl}
74+
tooltipTriggerClasses={tooltipTriggerClasses}
75+
/>
76+
)
77+
}
78+
]
79+
: []),
80+
{
81+
id: 'python',
82+
label: 'Python',
83+
content: (
84+
<PythonTab
85+
dataLinkUrl={dataLinkUrl}
86+
dataType={dataType}
87+
tooltipTriggerClasses={tooltipTriggerClasses}
88+
zarrVersion={zarrVersion}
89+
/>
90+
)
91+
},
92+
...(zarrVersion !== 3
93+
? [{ id: 'vvdviewer', label: 'VVDViewer', content: <VvdViewerTab /> }]
94+
: [])
95+
];
96+
}
97+
98+
if (dataType === 'zarr') {
99+
return [
100+
...(zarrVersion !== 3
101+
? [{ id: 'fiji', label: 'Fiji', content: <FijiTab /> }]
102+
: []),
103+
{
104+
id: 'java',
105+
label: 'Java',
106+
content: (
107+
<JavaTab
108+
dataLinkUrl={dataLinkUrl}
109+
dataType={dataType}
110+
tooltipTriggerClasses={tooltipTriggerClasses}
111+
zarrVersion={zarrVersion}
112+
/>
113+
)
114+
},
115+
{
116+
id: 'python',
117+
label: 'Python',
118+
content: (
119+
<PythonTab
120+
dataLinkUrl={dataLinkUrl}
121+
dataType={dataType}
122+
tooltipTriggerClasses={tooltipTriggerClasses}
123+
/>
124+
)
125+
}
126+
];
127+
}
128+
129+
// dataType === 'n5'
130+
return [
131+
{ id: 'fiji', label: 'Fiji', content: <FijiTab /> },
132+
{
133+
id: 'java',
134+
label: 'Java',
135+
content: (
136+
<JavaTab
137+
dataLinkUrl={dataLinkUrl}
138+
dataType={dataType}
139+
tooltipTriggerClasses={tooltipTriggerClasses}
140+
zarrVersion={zarrVersion}
141+
/>
142+
)
143+
},
144+
{
145+
id: 'python',
146+
label: 'Python',
147+
content: (
148+
<PythonTab
149+
dataLinkUrl={dataLinkUrl}
150+
dataType={dataType}
151+
tooltipTriggerClasses={tooltipTriggerClasses}
152+
/>
153+
)
154+
}
155+
];
156+
}
157+
158+
export default function DataLinkTabs({
159+
dataLinkUrl,
160+
dataType,
161+
tooltipTriggerClasses,
162+
zarrVersion
163+
}: {
164+
readonly dataLinkUrl: string;
165+
readonly dataType: DataLinkType;
166+
readonly tooltipTriggerClasses: string;
167+
readonly zarrVersion?: ZarrVersion;
168+
}) {
169+
const tabs = getTabsForDataType(
170+
dataType,
171+
dataLinkUrl,
172+
tooltipTriggerClasses,
173+
zarrVersion
174+
);
175+
const [activeTab, setActiveTab] = useState<string>(tabs[0]?.id ?? '');
176+
177+
const TAB_TRIGGER_CLASSES = '!text-foreground h-full text-base';
178+
const PANEL_CLASSES =
179+
'flex flex-col gap-4 max-w-full h-[50vh] p-4 rounded-b-lg border border-t-0 border-surface dark:border-foreground/30 bg-surface-light dark:bg-surface overflow-y-auto overflow-x-hidden';
180+
181+
return (
182+
<Tabs
183+
className="flex flex-col flex-1 min-h-0 gap-0 max-h-[75vh] w-[95%] self-center"
184+
onValueChange={setActiveTab}
185+
value={activeTab}
186+
>
187+
<Tabs.List className="justify-start items-stretch shrink-0 min-w-fit w-full py-2 rounded-b-none bg-surface dark:bg-surface-light">
188+
{tabs.map(tab => (
189+
<Tabs.Trigger
190+
className={TAB_TRIGGER_CLASSES}
191+
key={tab.id}
192+
value={tab.id}
193+
>
194+
{tab.label}
195+
</Tabs.Trigger>
196+
))}
197+
<Tabs.TriggerIndicator className="h-full" />
198+
</Tabs.List>
199+
200+
{tabs.map(tab => (
201+
<Tabs.Panel className={PANEL_CLASSES} key={tab.id} value={tab.id}>
202+
{tab.content}
203+
</Tabs.Panel>
204+
))}
205+
</Tabs>
206+
);
207+
}

0 commit comments

Comments
 (0)