Skip to content

Commit

Permalink
Web/add dataset drawer (MarquezProject#2672)
Browse files Browse the repository at this point in the history 
* add drawer to Dataset info on click

Signed-off-by: sharpd <number6labs@gmail.com>

* update drawer formatting/revert chips to row

Signed-off-by: sharpd <number6labs@gmail.com>

* fix logic errors in description

Signed-off-by: sharpd <number6labs@gmail.com>

* add icon fo visual drawer cue

Signed-off-by: sharpd <number6labs@gmail.com>

* update code based on feedback. Refer to theme values remove function.

Signed-off-by: sharpd <number6labs@gmail.com>

---------

Signed-off-by: sharpd <number6labs@gmail.com>
Co-authored-by: sharpd <number6labs@gmail.com>
Signed-off-by: yanlibert <yannick.libert@gmail.com>
  • Loading branch information
@davidsharp7 @yanlibert
2 people authored and yanlibert committed Dec 7, 2023
1 parent c0a7cf3 commit fff181f
Show file tree
Hide file tree
Showing 2 changed files with 122 additions and 41 deletions.
2 changes: 1 addition & 1 deletion web/src/components/datasets/DatasetDetailPage.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -136,7 +136,7 @@ const DatasetDetailPage: FunctionComponent<IProps> = (props) => {
label={tag}
size='small'
style={{
display: 'inline',
display: 'row',
marginRight: index < tags.length - 1 ? theme.spacing(1) : 0,
}}
/>
Expand Down
161 changes: 121 additions & 40 deletions web/src/components/datasets/DatasetInfo.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,21 +2,36 @@
// 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'
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 {
Expand Down Expand Up @@ -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,
}}
/>
</MQTooltip>
Expand All @@ -71,6 +87,10 @@ const DatasetInfo: FunctionComponent<DatasetInfoProps> = (props) => {
const { datasetFields, facets, run, jobFacets, fetchJobFacets, resetFacets } = props
const i18next = require('i18next')

const [open, setOpen] = useState(false)
const [selectedKey, setSelectedKey] = useState<string | undefined>(undefined)
const theme = createTheme(useTheme())

useEffect(() => {
run && fetchJobFacets(run.id)
run && fetchTags()
Expand All @@ -85,6 +105,14 @@ const DatasetInfo: FunctionComponent<DatasetInfoProps> = (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 (
<Box>
Expand All @@ -95,44 +123,97 @@ const DatasetInfo: FunctionComponent<DatasetInfoProps> = (props) => {
/>
)}
{datasetFields.length > 0 && (
<Table size='small'>
<TableHead>
<TableRow>
<TableCell align='left'>
<MqText subheading inline>
{i18next.t('dataset_info_columns.name')}
</MqText>
</TableCell>
<TableCell align='left'>
<MqText subheading inline>
{i18next.t('dataset_info_columns.type')}
</MqText>
</TableCell>
<TableCell align='left'>
<MqText subheading inline>
{i18next.t('dataset_info_columns.description')}
<>
<Table size='small'>
<TableHead>
<TableRow>
<TableCell align='left'>
<MqText subheading inline>
{i18next.t('dataset_info_columns.name')}
</MqText>
</TableCell>
<TableCell align='left'>
<MqText subheading inline>
{i18next.t('dataset_info_columns.type')}
</MqText>
</TableCell>
<TableCell align='left'>
<MqText subheading inline>
{i18next.t('dataset_info_columns.description')}
</MqText>
</TableCell>
<TableCell align='left'></TableCell>
</TableRow>
</TableHead>
<TableBody>
{datasetFields.map((field) => {
return (
<TableRow key={field.name}>
<TableCell align='left'>{field.name}</TableCell>
<TableCell align='left'>{field.type}</TableCell>
<TableCell align='left'>{field.description || 'no description'}</TableCell>
<TableCell>
<ReadMoreIcon
onClick={() => handleOpen(field.name)}
sx={{ align: 'Right' }}
></ReadMoreIcon>
</TableCell>
</TableRow>
)
})}
</TableBody>
</Table>
<Drawer
elevation={0}
anchor='right'
open={open}
onClose={() => 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,
},
}}
>
<Card>
<CardContent sx={{ backgroundColor: theme.palette.background.paper }}>
<MqText heading bottomMargin>
{selectedKey}
</MqText>
</TableCell>
<TableCell align='left'>
<MqText subheading inline>
{i18next.t('dataset_info_columns.tags')}
</CardContent>
</Card>
<Divider />
<Card>
<CardContent sx={{ backgroundColor: theme.palette.background.paper }}>
<MqText bottomMargin>{selectedFieldDesc}</MqText>
</CardContent>
</Card>
<Accordion elevation={0}>
<AccordionSummary
expandIcon={<ExpandMoreIcon />}
sx={{
backgroundColor: theme.palette.background.paper,
}}
>
<MqText bold bottomMargin>
Tags
</MqText>
</TableCell>
</TableRow>
</TableHead>
<TableBody>
{datasetFields.map((field) => {
return (
<TableRow key={field.name}>
<TableCell align='left'>{field.name}</TableCell>
<TableCell align='left'>{field.type}</TableCell>
<TableCell align='left'>{field.description || 'no description'}</TableCell>
<TableCell align='left'>{formatColumnTags(field.tags, tagData)}</TableCell>
</TableRow>
)
})}
</TableBody>
</Table>
</AccordionSummary>
<AccordionDetails
sx={{
backgroundColor: theme.palette.background.paper,
}}
>
{selectedFieldTags.length > 0
? formatColumnTags(selectedFieldTags, tagData)
: 'No Tags'}
</AccordionDetails>
</Accordion>
</Drawer>
</>
)}
{facets && (
<Box mt={2}>
Expand Down

0 comments on commit fff181f

Please sign in to comment.