Skip to content

Commit a1c4f05

Browse files
phixMephix
phixMe
and
phix
authored
Minor UI enhancements (#2727)
* Initial commit with new rendering engine. * Adding prototype for column lineage view. * Updates for zoom controls. * Removing extra imports. * Extra meta information. * Adjusting application styles. * Improving code quality, splitting components. * Moving code around. * Saving partial progress. * Some progress on lineage view. * Checkpoint for tooltips. * Adding in side navigation. * Fixing links. * Fixing up lineage state. * Fixing column lineage. * Fixing up the back button. * Fixing tests. * Filtering out the non-null assertions. * More test fixes. * Fixing json viewer issues. * Cleaning up the tag ui. * Refactored edge mapping in layout.ts and removed unused function. Fixed edge to non-existent node issue. . * Update UI for dataset tags. --------- Co-authored-by: phix <[email protected]>
1 parent b27cb30 commit a1c4f05

File tree

9 files changed

+63
-176
lines changed

9 files changed

+63
-176
lines changed

‎web/package-lock.json‎

Lines changed: 14 additions & 88 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎web/package.json‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -30,6 +30,7 @@
3030
"@types/jest": "^29.5.2",
3131
"@types/react-router-dom": "^5.3.3",
3232
"@types/react-syntax-highlighter": "^15.5.6",
33+
"@uiw/react-json-view": "^2.0.0-alpha.11",
3334
"@visx/clip-path": "3.0.0",
3435
"@visx/gradient": "3.0.0",
3536
"@visx/grid": "3.0.1",
@@ -63,7 +64,6 @@
6364
"react-helmet-async": "^1.3.0",
6465
"react-i18next": "^12.3.1",
6566
"react-inlinesvg": "^3.0.2",
66-
"react-json-tree": "^0.18.0",
6767
"react-redux": "^8.0.5",
6868
"react-router-dom": "^6.11.2",
6969
"react-scripts": "5.0.1",

‎web/src/components/core/code/MqCode.tsx‎

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,7 @@
11
// Copyright 2018-2023 contributors to the Marquez project
22
// SPDX-License-Identifier: Apache-2.0
33

4-
import { THEME_EXTRA, theme } from '../../../helpers/theme'
5-
import { alpha } from '@mui/material/styles'
4+
import { THEME_EXTRA } from '../../../helpers/theme'
65
import { ocean } from 'react-syntax-highlighter/dist/cjs/styles/hljs'
76
import Box from '@mui/material/Box'
87
import MqText from '../text/MqText'
@@ -29,9 +28,10 @@ const MqCode: React.FC<OwnProps> = ({ code, description, language }) => {
2928
language={language}
3029
style={ocean}
3130
customStyle={{
32-
backgroundColor: alpha(theme.palette.common.white, 0.1),
31+
backgroundColor: '#191f26',
3332
borderLeft: `2px dashed ${THEME_EXTRA.typography.subdued}`,
34-
padding: theme.spacing(2),
33+
fontSize: '13px',
34+
padding: '0 4px',
3535
}}
3636
>
3737
{code ? code : 'No code available'}

‎web/src/components/core/json-view/MqJsonView.tsx‎

Lines changed: 13 additions & 57 deletions
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,8 @@
11
// SPDX-License-Identifier: Apache-2.0
2-
3-
import { JSONTree } from 'react-json-tree'
4-
import { MqInputBase, MqInputBaseProps } from '../input-base/MqInputBase'
5-
import { createTheme } from '@mui/material'
6-
import { useTheme } from '@emotion/react'
2+
import { Box } from '@mui/system'
3+
import { darkTheme } from '@uiw/react-json-view/dark'
4+
import { theme } from '../../../helpers/theme'
5+
import JsonView from '@uiw/react-json-view'
76
import React from 'react'
87

98
interface OwnProps {
@@ -12,62 +11,19 @@ interface OwnProps {
1211
placeholder?: string
1312
}
1413

15-
interface StateProps {
16-
search: string
17-
}
18-
1914
type JsonViewProps = OwnProps
2015

21-
const InputSearchJsonView: React.FC<MqInputBaseProps> = (props) => {
22-
const theme = createTheme(useTheme())
23-
24-
return (
25-
<MqInputBase
26-
{...props}
27-
sx={{
28-
...props.sx,
29-
padding: `${theme.spacing(1)} ${theme.spacing(2)}`,
30-
}}
31-
/>
32-
)
33-
}
34-
35-
const MqJsonView: React.FC<JsonViewProps> = ({
36-
data,
37-
searchable = false,
38-
placeholder = 'Search',
39-
}) => {
40-
const [state, setState] = React.useState<StateProps>({
41-
search: '',
42-
})
43-
44-
const onSearch = (event: React.ChangeEvent<HTMLInputElement | HTMLTextAreaElement>) => {
45-
setState({ search: event.target.value })
46-
}
47-
48-
const theme = createTheme(useTheme())
16+
darkTheme.background = theme.palette.background.default
17+
darkTheme.backgroundColor = theme.palette.background.default
18+
darkTheme.borderLeftWidth = 2
19+
darkTheme.borderLeftColor = theme.palette.grey[500]
20+
darkTheme.borderLeftStyle = 'dashed'
4921

22+
const MqJsonView: React.FC<JsonViewProps> = ({ data }) => {
5023
return (
51-
<>
52-
{searchable && (
53-
<InputSearchJsonView
54-
sx={{
55-
marginBottom: theme.spacing(2),
56-
}}
57-
onChange={(event) => onSearch(event)}
58-
value={state.search}
59-
autoComplete={'off'}
60-
id={'json-view'}
61-
placeholder={placeholder}
62-
/>
63-
)}
64-
<JSONTree
65-
data={data}
66-
theme={'rjv_white'}
67-
collectionLimit={2}
68-
// highlightSearch={search} // TODO find a solution to do this
69-
/>
70-
</>
24+
<Box my={2}>
25+
<JsonView style={darkTheme} value={data} />
26+
</Box>
7127
)
7228
}
7329

‎web/src/components/datasets/DatasetInfo.tsx‎

Lines changed: 2 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -13,6 +13,7 @@ import {
1313
} from '@mui/material'
1414
import { Field, Run } from '../../types/api'
1515
import { IState } from '../../store/reducers'
16+
1617
import { connect, useSelector } from 'react-redux'
1718
import { fetchJobFacets, resetFacets } from '../../store/actionCreators'
1819
import { stopWatchDuration } from '../../helpers/time'
@@ -166,13 +167,7 @@ const DatasetInfo: FunctionComponent<DatasetInfoProps> = (props) => {
166167
<Box mb={1}>
167168
<MqText subheading>{i18next.t('dataset_info.facets_subhead')}</MqText>
168169
</Box>
169-
<MqJsonView
170-
data={facets}
171-
searchable={true}
172-
aria-label={i18next.t('dataset_info.facets_subhead_aria')}
173-
aria-required='True'
174-
placeholder='Search'
175-
/>
170+
<MqJsonView data={facets} aria-label={i18next.t('dataset_info.facets_subhead_aria')} />
176171
</Box>
177172
)}
178173
{run && (

‎web/src/components/datasets/DatasetTags.tsx‎

Lines changed: 15 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,7 @@
11
// Copyright 2018-2024 contributors to the Marquez project
22
// SPDX-License-Identifier: Apache-2.0
33
import * as Redux from 'redux'
4+
import { Box, createTheme } from '@mui/material'
45
import { IState } from '../../store/reducers'
56
import { Tag } from '../../types/api'
67
import {
@@ -12,7 +13,6 @@ import {
1213
} from '../../store/actionCreators'
1314
import { bindActionCreators } from 'redux'
1415
import { connect, useSelector } from 'react-redux'
15-
import { createTheme } from '@mui/material'
1616
import { useTheme } from '@emotion/react'
1717
import AddIcon from '@mui/icons-material/Add'
1818
import Button from '@mui/material/Button'
@@ -96,6 +96,7 @@ const DatasetTags: React.FC<IProps> = (props) => {
9696
return (
9797
<MQTooltip title={tooltipTitle} key={tag}>
9898
<Chip
99+
color={'primary'}
99100
label={tag}
100101
size='small'
101102
onDelete={() => handleDelete(tag)}
@@ -111,15 +112,22 @@ const DatasetTags: React.FC<IProps> = (props) => {
111112

112113
return (
113114
<>
114-
<MQTooltip placement='left' title={i18next.t('dataset_tags.tooltip')} key='tag-tooltip'>
115-
<Button onClick={openDialog} size='small' variant='outlined' color='primary' sx={{ m: 1 }}>
116-
<IconButton aria-label='add' size='small'>
115+
<Box display={'flex'} alignItems={'center'}>
116+
<MQText subheading>{i18next.t('dataset_tags.tags')}</MQText>
117+
<MQTooltip placement='left' title={i18next.t('dataset_tags.tooltip')} key='tag-tooltip'>
118+
<IconButton
119+
onClick={openDialog}
120+
size='small'
121+
color='primary'
122+
sx={{ m: 1 }}
123+
aria-label='add'
124+
>
117125
<AddIcon fontSize='small' color='primary' />
118126
</IconButton>
119-
</Button>
120-
</MQTooltip>
127+
</MQTooltip>
128+
</Box>
121129
{formatTags(datasetTags, tagData)}
122-
<Dialog open={isDialogOpen} onClose={closeDialog} maxWidth='md'>
130+
<Dialog open={isDialogOpen} onClose={closeDialog} fullWidth maxWidth='sm'>
123131
<DialogTitle>{i18next.t('dataset_tags.dialogtitle')}</DialogTitle>
124132
<DialogContent>
125133
<FormControl variant='outlined' size='small' fullWidth>

‎web/src/components/jobs/RunInfo.tsx‎

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -65,7 +65,6 @@ const RunInfo: FunctionComponent<RunInfoProps> = (props) => {
6565
</Box>
6666
<MqJsonView
6767
data={run.facets}
68-
searchable={true}
6968
aria-label={i18next.t('jobs.facets_subhead_aria')}
7069
aria-required='true'
7170
placeholder={i18next.t('jobs.search')}

‎web/src/i18n/config.ts‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -72,6 +72,7 @@ i18next
7272
prompt: 'ns',
7373
},
7474
dataset_tags: {
75+
tags: 'TAGS',
7576
tooltip: 'Add a Tag',
7677
dialogtitle: 'Add Tags',
7778
selecttagtoadd: 'Select Tag to add...',

0 commit comments

Comments
 (0)