Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Web/add dataset drawer #2672

Merged
merged 10 commits into from
Nov 29, 2023
Merged

Web/add dataset drawer #2672

Show file tree
Hide file tree
Changes from 7 commits
Commits
Show all changes
10 commits
Select commit Hold shift + click to select a range
01f225c
add drawer to Dataset info on click
Oct 28, 2023
15de5d7
update drawer formatting/revert chips to row
Oct 30, 2023
90d11b2
fix logic errors in description
Oct 30, 2023
a3c3a42
add icon fo visual drawer cue
Nov 10, 2023
af2359c
Merge branch 'MarquezProject:main' into web/add_dataset_drawer
davidsharp7 Nov 16, 2023
d426a16
Merge branch 'MarquezProject:main' into web/add_dataset_drawer
davidsharp7 Nov 18, 2023
047f287
Merge branch 'MarquezProject:main' into web/add_dataset_drawer
davidsharp7 Nov 23, 2023
a34870f
update code based on feedback. Refer to theme values remove function.
Nov 28, 2023
7790bc1
Merge branch 'MarquezProject:main' into web/add_dataset_drawer
davidsharp7 Nov 29, 2023
45120ec
Merge branch 'MarquezProject:main' into web/add_dataset_drawer
davidsharp7 Nov 29, 2023
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 1 addition & 1 deletion web/src/components/datasets/DatasetDetailPage.tsx
View file
Open in desktop
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
165 changes: 125 additions & 40 deletions web/src/components/datasets/DatasetInfo.tsx
View file
Open in desktop
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,18 @@ const DatasetInfo: FunctionComponent<DatasetInfoProps> = (props) => {
)

const tagData = useSelector((state: IState) => state.tags.tags)
const handleOpen = (key: string) => {
setOpen(true)
setSelectedKey(key)
}

const handleClose = () => {
setOpen(false)
}

const selectedField = datasetFields.find((field) => field.name === selectedKey)
const selectedFieldTags = selectedField?.tags || []
const selectedFieldDesc = selectedField?.description || 'No Description'

return (
<Box>
Expand All @@ -95,44 +127,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={handleClose}
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This is only used in one place, so you shouldn't need a wrapper function.

sx={{ zIndex: 1300 }}
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Can you reference a variable for this in the theme?

Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

yeah cool will move this out.

Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Cool will fix this up.

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
Loading