From fff181f15b5e4a9338737e380a502e30dbc68cb8 Mon Sep 17 00:00:00 2001 From: David Sharp <34074888+davidsharp7@users.noreply.github.com> Date: Thu, 30 Nov 2023 10:55:09 +1300 Subject: [PATCH] Web/add dataset drawer (#2672) * add drawer to Dataset info on click Signed-off-by: sharpd * update drawer formatting/revert chips to row Signed-off-by: sharpd * fix logic errors in description Signed-off-by: sharpd * add icon fo visual drawer cue Signed-off-by: sharpd * update code based on feedback. Refer to theme values remove function. Signed-off-by: sharpd --------- Signed-off-by: sharpd Co-authored-by: sharpd Signed-off-by: yanlibert --- .../components/datasets/DatasetDetailPage.tsx | 2 +- web/src/components/datasets/DatasetInfo.tsx | 161 +++++++++++++----- 2 files changed, 122 insertions(+), 41 deletions(-) diff --git a/web/src/components/datasets/DatasetDetailPage.tsx b/web/src/components/datasets/DatasetDetailPage.tsx index 726afdd9d8..adf75bef73 100644 --- a/web/src/components/datasets/DatasetDetailPage.tsx +++ b/web/src/components/datasets/DatasetDetailPage.tsx @@ -136,7 +136,7 @@ const DatasetDetailPage: FunctionComponent = (props) => { label={tag} size='small' style={{ - display: 'inline', + display: 'row', marginRight: index < tags.length - 1 ? theme.spacing(1) : 0, }} /> diff --git a/web/src/components/datasets/DatasetInfo.tsx b/web/src/components/datasets/DatasetInfo.tsx index c84022cb03..164abd1481 100644 --- a/web/src/components/datasets/DatasetInfo.tsx +++ b/web/src/components/datasets/DatasetInfo.tsx @@ -2,8 +2,19 @@ // SPDX-License-Identifier: Apache-2.0 import * as Redux from 'redux' -import { Box, Table, TableBody, TableCell, TableHead, TableRow } from '@mui/material' -import { Chip } from '@mui/material' +import { + Accordion, + Box, + Card, + CardContent, + Divider, + Table, + TableBody, + TableCell, + TableHead, + TableRow, +} from '@mui/material' +import { Chip, Drawer } from '@mui/material' import { Field, Run, Tag } from '../../types/api' import { IState } from '../../store/reducers' import { connect, useSelector } from 'react-redux' @@ -11,12 +22,16 @@ import { createTheme } from '@mui/material/styles' import { fetchJobFacets, fetchTags, resetFacets } from '../../store/actionCreators' import { stopWatchDuration } from '../../helpers/time' import { useTheme } from '@emotion/react' +import AccordionDetails from '@mui/material/AccordionDetails' +import AccordionSummary from '@mui/material/AccordionSummary' +import ExpandMoreIcon from '@mui/icons-material/ExpandMore' import MQTooltip from '../core/tooltip/MQTooltip' import MqCode from '../core/code/MqCode' import MqEmpty from '../core/empty/MqEmpty' import MqJsonView from '../core/json-view/MqJsonView' import MqText from '../core/text/MqText' -import React, { FunctionComponent, useEffect } from 'react' +import React, { FunctionComponent, useEffect, useState } from 'react' +import ReadMoreIcon from '@mui/icons-material/ReadMore' import RunStatus from '../jobs/RunStatus' export interface DispatchProps { @@ -56,8 +71,9 @@ const formatColumnTags = (tags: string[], tag_desc: Tag[]) => { label={tag} size='small' style={{ - display: 'inline', + display: 'row', marginRight: index < tags.length - 1 ? theme.spacing(1) : 0, + marginTop: 3, }} /> @@ -71,6 +87,10 @@ const DatasetInfo: FunctionComponent = (props) => { const { datasetFields, facets, run, jobFacets, fetchJobFacets, resetFacets } = props const i18next = require('i18next') + const [open, setOpen] = useState(false) + const [selectedKey, setSelectedKey] = useState(undefined) + const theme = createTheme(useTheme()) + useEffect(() => { run && fetchJobFacets(run.id) run && fetchTags() @@ -85,6 +105,14 @@ const DatasetInfo: FunctionComponent = (props) => { ) const tagData = useSelector((state: IState) => state.tags.tags) + const handleOpen = (key: string) => { + setOpen(true) + setSelectedKey(key) + } + + const selectedField = datasetFields.find((field) => field.name === selectedKey) + const selectedFieldTags = selectedField?.tags || [] + const selectedFieldDesc = selectedField?.description || 'No Description' return ( @@ -95,44 +123,97 @@ const DatasetInfo: FunctionComponent = (props) => { /> )} {datasetFields.length > 0 && ( - - - - - - {i18next.t('dataset_info_columns.name')} - - - - - {i18next.t('dataset_info_columns.type')} - - - - - {i18next.t('dataset_info_columns.description')} + <> +
+ + + + + {i18next.t('dataset_info_columns.name')} + + + + + {i18next.t('dataset_info_columns.type')} + + + + + {i18next.t('dataset_info_columns.description')} + + + + + + + {datasetFields.map((field) => { + return ( + + {field.name} + {field.type} + {field.description || 'no description'} + + handleOpen(field.name)} + sx={{ align: 'Right' }} + > + + + ) + })} + +
+ setOpen(false)} + sx={{ zIndex: theme.zIndex.drawer + 1 }} + PaperProps={{ + sx: { + width: 400, + backgroundColor: theme.palette.background.paper, + border: `2px dashed ${theme.palette.secondary.main}`, + p: 1, + }, + }} + > + + + + {selectedKey} - - - - {i18next.t('dataset_info_columns.tags')} + + + + + + {selectedFieldDesc} + + + + } + sx={{ + backgroundColor: theme.palette.background.paper, + }} + > + + Tags - - - - - {datasetFields.map((field) => { - return ( - - {field.name} - {field.type} - {field.description || 'no description'} - {formatColumnTags(field.tags, tagData)} - - ) - })} - - + + + {selectedFieldTags.length > 0 + ? formatColumnTags(selectedFieldTags, tagData) + : 'No Tags'} + + + + )} {facets && (