Skip to content

Commit 4fdb2bf

Browse files
tcnicholtcnichol
authored
779 dataset and file tabs cleanup (#850)
* changing file tabs * reorder tabs for dataset * scrolling for now * scroll tabs * merge and move version tab
1 parent 706e6ea commit 4fdb2bf

File tree

2 files changed

+53
-49
lines changed

2 files changed

+53
-49
lines changed

‎frontend/src/components/datasets/Dataset.tsx‎

Lines changed: 21 additions & 19 deletions
Original file line numberDiff line numberDiff line change
@@ -276,6 +276,8 @@ export const Dataset = (): JSX.Element => {
276276
value={selectedTabIndex}
277277
onChange={handleTabChange}
278278
aria-label="dataset tabs"
279+
variant="scrollable"
280+
scrollButtons="auto"
279281
>
280282
<Tab
281283
icon={<InsertDriveFile />}
@@ -284,37 +286,29 @@ export const Dataset = (): JSX.Element => {
284286
label="Files"
285287
{...a11yProps(0)}
286288
/>
287-
<Tab
288-
icon={<VisibilityIcon />}
289-
iconPosition="start"
290-
sx={TabStyle}
291-
label="Visualizations"
292-
{...a11yProps(1)}
293-
disabled={false}
294-
/>
295289
<Tab
296290
icon={<FormatListBulleted />}
297291
iconPosition="start"
298292
sx={TabStyle}
299293
label="User Metadata"
300-
{...a11yProps(2)}
294+
{...a11yProps(1)}
301295
disabled={false}
302296
/>
303297
<Tab
304298
icon={<AssessmentIcon />}
305299
iconPosition="start"
306300
sx={TabStyle}
307-
label="Extracted Metadata"
308-
{...a11yProps(3)}
301+
label="Machine Metadata"
302+
{...a11yProps(2)}
309303
disabled={false}
310304
/>
311305
{datasetRole.role !== undefined && datasetRole.role !== "viewer" ?
312306
<Tab
313307
icon={<BuildIcon />}
314308
iconPosition="start"
315309
sx={TabStyle}
316-
label="Extract"
317-
{...a11yProps(4)}
310+
label="Analysis"
311+
{...a11yProps(3)}
318312
disabled={false}
319313
/> :
320314
<></>
@@ -324,6 +318,14 @@ export const Dataset = (): JSX.Element => {
324318
iconPosition="start"
325319
sx={TabStyle}
326320
label="Extraction History"
321+
{...a11yProps(4)}
322+
disabled={false}
323+
/>
324+
<Tab
325+
icon={<VisibilityIcon />}
326+
iconPosition="start"
327+
sx={TabStyle}
328+
label="Visualizations"
327329
{...a11yProps(5)}
328330
disabled={false}
329331
/>
@@ -371,9 +373,6 @@ export const Dataset = (): JSX.Element => {
371373
</Box>
372374
</TabPanel>
373375
<TabPanel value={selectedTabIndex} index={1}>
374-
<Visualization datasetId={datasetId} />
375-
</TabPanel>
376-
<TabPanel value={selectedTabIndex} index={2}>
377376
{enableAddMetadata && datasetRole.role !== undefined && datasetRole.role !== "viewer" ? (
378377
<>
379378
<EditMetadata
@@ -422,7 +421,7 @@ export const Dataset = (): JSX.Element => {
422421
</>
423422
)}
424423
</TabPanel>
425-
<TabPanel value={selectedTabIndex} index={3}>
424+
<TabPanel value={selectedTabIndex} index={2}>
426425
<DisplayListenerMetadata
427426
updateMetadata={updateDatasetMetadata}
428427
deleteMetadata={deleteDatasetMetadata}
@@ -431,14 +430,17 @@ export const Dataset = (): JSX.Element => {
431430
/>
432431
</TabPanel>
433432
{datasetRole.role !== undefined && datasetRole.role !== "viewer" ?
434-
<TabPanel value={selectedTabIndex} index={4}>
433+
<TabPanel value={selectedTabIndex} index={3}>
435434
<Listeners datasetId={datasetId} />
436435
</TabPanel> :
437436
<></>
438437
}
439-
<TabPanel value={selectedTabIndex} index={5}>
438+
<TabPanel value={selectedTabIndex} index={4}>
440439
<ExtractionHistoryTab datasetId={datasetId} />
441440
</TabPanel>
441+
<TabPanel value={selectedTabIndex} index={5}>
442+
<Visualization datasetId={datasetId} />
443+
</TabPanel>
442444
{datasetRole.role !== undefined && datasetRole.role !== "viewer" ?
443445
<TabPanel value={selectedTabIndex} index={6}>
444446
<SharingTab datasetId={datasetId} />

‎frontend/src/components/files/File.tsx‎

Lines changed: 32 additions & 30 deletions
Original file line numberDiff line numberDiff line change
@@ -60,11 +60,11 @@ export const File = (): JSX.Element => {
6060
const folderId = searchParams.get("folder");
6161
const datasetId = searchParams.get("dataset");
6262

63-
const dispatch = useDispatch();
64-
6563
const listDatasetAbout = (datasetId: string | undefined) =>
6664
dispatch(fetchDatasetAbout(datasetId));
6765
const about = useSelector((state: RootState) => state.dataset.about);
66+
67+
const dispatch = useDispatch();
6868
const listFileSummary = (fileId: string | undefined) =>
6969
dispatch(fetchFileSummary(fileId));
7070
const listFileVersions = (fileId: string | undefined) =>
@@ -316,6 +316,8 @@ export const File = (): JSX.Element => {
316316
value={selectedTabIndex}
317317
onChange={handleTabChange}
318318
aria-label="file tabs"
319+
variant="scrollable"
320+
scrollButtons="auto"
319321
>
320322
<Tab
321323
icon={<VisibilityIcon />}
@@ -325,62 +327,55 @@ export const File = (): JSX.Element => {
325327
{...a11yProps(0)}
326328
disabled={false}
327329
/>
328-
{versionEnabled ? (
329-
<Tab
330-
icon={<InsertDriveFile />}
331-
iconPosition="start"
332-
sx={TabStyle}
333-
label="Version History"
334-
{...a11yProps(1)}
335-
/>
336-
) : (
337-
<></>
338-
)}
339330
<Tab
340331
icon={<FormatListBulleted />}
341332
iconPosition="start"
342333
sx={TabStyle}
343334
label="User Metadata"
344-
{...a11yProps(2)}
335+
{...a11yProps(1)}
345336
disabled={false}
346337
/>
347338
<Tab
348339
icon={<AssessmentIcon />}
349340
iconPosition="start"
350341
sx={TabStyle}
351-
label="Extracted Metadata"
352-
{...a11yProps(3)}
342+
label="Machine Metadata"
343+
{...a11yProps(2)}
353344
disabled={false}
354345
/>
355346
<Tab
356347
icon={<BuildIcon />}
357348
iconPosition="start"
358349
sx={TabStyle}
359-
label="Extract"
360-
{...a11yProps(4)}
350+
label="Analysis"
351+
{...a11yProps(3)}
361352
disabled={false}
362353
/>
363354
<Tab
364355
icon={<HistoryIcon />}
365356
iconPosition="start"
366357
sx={TabStyle}
367-
label="Extraction History"
368-
{...a11yProps(5)}
358+
label="Analysis History"
359+
{...a11yProps(4)}
369360
disabled={false}
370361
/>
362+
{versionEnabled ? (
363+
<Tab
364+
icon={<InsertDriveFile />}
365+
iconPosition="start"
366+
sx={TabStyle}
367+
label="Version History"
368+
{...a11yProps(5)}
369+
/>
370+
) : (
371+
<></>
372+
)}
371373
</Tabs>
372374
<TabPanel value={selectedTabIndex} index={0}>
373375
<Visualization fileId={fileId} />
374376
</TabPanel>
375377
{/*Version History*/}
376378
<TabPanel value={selectedTabIndex} index={1}>
377-
{fileVersions !== undefined ? (
378-
<FileVersionHistory fileVersions={fileVersions} />
379-
) : (
380-
<></>
381-
)}
382-
</TabPanel>
383-
<TabPanel value={selectedTabIndex} index={2}>
384379
{enableAddMetadata ? (
385380
<>
386381
<EditMetadata
@@ -426,7 +421,7 @@ export const File = (): JSX.Element => {
426421
</>
427422
)}
428423
</TabPanel>
429-
<TabPanel value={selectedTabIndex} index={3}>
424+
<TabPanel value={selectedTabIndex} index={2}>
430425
<DisplayListenerMetadata
431426
updateMetadata={updateFileMetadata}
432427
deleteMetadata={deleteFileMetadata}
@@ -435,12 +430,19 @@ export const File = (): JSX.Element => {
435430
version={fileSummary.version_num}
436431
/>
437432
</TabPanel>
438-
<TabPanel value={selectedTabIndex} index={4}>
433+
<TabPanel value={selectedTabIndex} index={3}>
439434
<Listeners fileId={fileId} datasetId={datasetId} />
440435
</TabPanel>
441-
<TabPanel value={selectedTabIndex} index={5}>
436+
<TabPanel value={selectedTabIndex} index={4}>
442437
<ExtractionHistoryTab fileId={fileId} />
443438
</TabPanel>
439+
<TabPanel value={selectedTabIndex} index={5}>
440+
{fileVersions !== undefined ? (
441+
<FileVersionHistory fileVersions={fileVersions} />
442+
) : (
443+
<></>
444+
)}
445+
</TabPanel>
444446
</Grid>
445447
<Grid item xs={2}>
446448
{latestVersionNum == selectedVersionNum ? (

0 commit comments

Comments
 (0)