Skip to content

Commit 4e9c729

Browse files
jlukenoffjlukenoff
authored
Lineage UI: Add a graph depth config option (#2525)
* stuff Signed-off-by: John Lukenoff <johnlukenoff@asana.com> * Add headers Signed-off-by: John Lukenoff <johnlukenoff@asana.com> * Fix zindex Signed-off-by: John Lukenoff <johnlukenoff@asana.com> * Add minimum Signed-off-by: John Lukenoff <johnlukenoff@asana.com> * hmm Signed-off-by: John Lukenoff <johnlukenoff@asana.com> * retry Signed-off-by: John Lukenoff <johnlukenoff@asana.com> * Update default depth Signed-off-by: John Lukenoff <johnlukenoff@asana.com> * Add an entry to the Changlog Signed-off-by: John Lukenoff <johnlukenoff@asana.com> * Dont reformat everything Signed-off-by: John Lukenoff <johnlukenoff@asana.com> --------- Signed-off-by: John Lukenoff <johnlukenoff@asana.com>
1 parent 59631cc commit 4e9c729

10 files changed

Lines changed: 145 additions & 17 deletions

File tree

‎CHANGELOG.md‎

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,9 @@
11
# Changelog
22

33
## [Unreleased](https://github.com/MarquezProject/marquez/compare/0.35.0...HEAD)
4+
### Added
5+
* UI: add an option for configuring the depth of the lineage graph [`#2525`](https://github.com/MarquezProject/marquez/pull/2525) [@jlukenoff](https://github.com/jlukenoff)
6+
*Makes the lineage UI a bit easier to navigate especially for larger lineage graphs*
47

58
## [0.35.0](https://github.com/MarquezProject/marquez/compare/0.34.0...0.35.0) - 2023-06-13
69
### Added

‎web/src/components/bottom-bar/BottomBar.tsx‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -26,7 +26,8 @@ const styles = (theme: Theme) => {
2626
right: 0,
2727
width: `calc(100% - ${DRAWER_WIDTH}px)`,
2828
bottom: 0,
29-
position: 'fixed'
29+
position: 'fixed',
30+
zIndex: theme.zIndex.appBar + 1
3031
}
3132
})
3233
}

‎web/src/components/lineage/Lineage.tsx‎

Lines changed: 23 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -17,9 +17,15 @@ import { WithStyles, createStyles, withStyles } from '@material-ui/core/styles'
1717
import { Zoom } from '@visx/zoom'
1818
import { bindActionCreators } from 'redux'
1919
import { connect } from 'react-redux'
20-
import { fetchLineage, resetLineage, setSelectedNode } from '../../store/actionCreators'
20+
import {
21+
fetchLineage,
22+
resetLineage,
23+
setLineageGraphDepth,
24+
setSelectedNode
25+
} from '../../store/actionCreators'
2126
import { generateNodeId } from '../../helpers/nodes'
2227
import { localPoint } from '@visx/event'
28+
import DepthConfig from './components/depth-config/DepthConfig'
2329
import Edge from './components/edge/Edge'
2430
import MqEmpty from '../core/empty/MqEmpty'
2531
import MqText from '../core/text/MqText'
@@ -44,6 +50,7 @@ const DOUBLE_CLICK_MAGNIFICATION = 1.1
4450
interface StateProps {
4551
lineage: LineageGraph
4652
selectedNode: string
53+
depth: number
4754
}
4855

4956
interface LineageState {
@@ -96,24 +103,30 @@ export class Lineage extends React.Component<LineageProps, LineageState> {
96103
this.props.fetchLineage(
97104
this.props.match.params.nodeType.toUpperCase() as JobOrDataset,
98105
this.props.match.params.namespace,
99-
this.props.match.params.nodeName
106+
this.props.match.params.nodeName,
107+
this.props.depth
100108
)
101109
}
102110
}
103111

104112
componentDidUpdate(prevProps: Readonly<LineageProps>) {
105113
if (
106-
JSON.stringify(this.props.lineage) !== JSON.stringify(prevProps.lineage) &&
114+
(JSON.stringify(this.props.lineage) !== JSON.stringify(prevProps.lineage) ||
115+
this.props.depth !== prevProps.depth) &&
107116
this.props.selectedNode
108117
) {
109118
this.initGraph()
110119
this.buildGraphAll(this.props.lineage.graph)
111120
}
112-
if (this.props.selectedNode !== prevProps.selectedNode) {
121+
if (
122+
this.props.selectedNode !== prevProps.selectedNode ||
123+
this.props.depth !== prevProps.depth
124+
) {
113125
this.props.fetchLineage(
114126
this.props.match.params.nodeType.toUpperCase() as JobOrDataset,
115127
this.props.match.params.namespace,
116-
this.props.match.params.nodeName
128+
this.props.match.params.nodeName,
129+
this.props.depth
117130
)
118131
this.getEdges()
119132
}
@@ -224,6 +237,7 @@ export class Lineage extends React.Component<LineageProps, LineageState> {
224237
</MqEmpty>
225238
</Box>
226239
)}
240+
<DepthConfig depth={this.props.depth} />
227241
{this.state.graph && (
228242
<ParentSize>
229243
{parent => (
@@ -303,15 +317,17 @@ export class Lineage extends React.Component<LineageProps, LineageState> {
303317

304318
const mapStateToProps = (state: IState) => ({
305319
lineage: state.lineage.lineage,
306-
selectedNode: state.lineage.selectedNode
320+
selectedNode: state.lineage.selectedNode,
321+
depth: state.lineage.depth
307322
})
308323

309324
const mapDispatchToProps = (dispatch: Redux.Dispatch) =>
310325
bindActionCreators(
311326
{
312327
setSelectedNode: setSelectedNode,
313328
fetchLineage: fetchLineage,
314-
resetLineage: resetLineage
329+
resetLineage: resetLineage,
330+
setDepth: setLineageGraphDepth
315331
},
316332
dispatch
317333
)

‎web/src/components/lineage/components/depth-config/DepthConfig.tsx‎

Lines changed: 70 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,70 @@
1+
// Copyright 2018-2023 contributors to the Marquez project
2+
// SPDX-License-Identifier: Apache-2.0
3+
4+
import * as Redux from 'redux'
5+
import { Box, Typography } from '@material-ui/core'
6+
import { Theme, WithStyles, createStyles, withStyles } from '@material-ui/core/styles'
7+
import { bindActionCreators } from 'redux'
8+
import { connect } from 'react-redux'
9+
import { setLineageGraphDepth } from '../../../../store/actionCreators'
10+
import React from 'react'
11+
import TextField from '@material-ui/core/TextField'
12+
13+
const styles = (theme: Theme) =>
14+
createStyles({
15+
root: {
16+
position: 'absolute',
17+
display: 'flex',
18+
justifyContent: 'space-evenly',
19+
alignItems: 'center',
20+
right: 0,
21+
marginRight: '3rem',
22+
padding: '1rem',
23+
zIndex: theme.zIndex.appBar
24+
},
25+
title: {
26+
textAlign: 'center'
27+
},
28+
textField: {
29+
width: '4rem',
30+
marginLeft: '0.5rem'
31+
}
32+
})
33+
34+
interface DepthConfigProps extends WithStyles<typeof styles> {
35+
depth: number
36+
setDepth: (depth: number) => void
37+
}
38+
39+
const DepthConfig: React.FC<DepthConfigProps> = ({ classes, setDepth, depth }) => {
40+
const i18next = require('i18next')
41+
const GRAPH_TITLE = i18next.t('lineage.graph_depth_title')
42+
return (
43+
<Box className={classes.root}>
44+
<Typography>{GRAPH_TITLE}</Typography>
45+
<TextField
46+
type='number'
47+
value={depth}
48+
onChange={e => setDepth(isNaN(parseInt(e.target.value)) ? 0 : parseInt(e.target.value))}
49+
variant='outlined'
50+
size='small'
51+
aria-label={GRAPH_TITLE}
52+
className={classes.textField}
53+
inputProps={{
54+
min: 0,
55+
max: 100
56+
}}
57+
/>
58+
</Box>
59+
)
60+
}
61+
62+
const mapDispatchToProps = (dispatch: Redux.Dispatch) =>
63+
bindActionCreators(
64+
{
65+
setDepth: setLineageGraphDepth
66+
},
67+
dispatch
68+
)
69+
70+
export default connect(null, mapDispatchToProps)(withStyles(styles)(DepthConfig))

‎web/src/i18n/config.ts‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -44,7 +44,8 @@ i18next
4444
},
4545
lineage: {
4646
empty_title: 'No node selected',
47-
empty_body: 'Try selecting a node through search or the jobs or datasets page.'
47+
empty_body: 'Try selecting a node through search or the jobs or datasets page.',
48+
graph_depth_title: 'Graph Depth'
4849
},
4950
sidenav: {
5051
jobs: 'JOBS',

‎web/src/store/actionCreators/actionTypes.ts‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -45,6 +45,7 @@ export const RESET_EVENTS = 'RESET_EVENTS'
4545
export const FETCH_LINEAGE = 'FETCH_LINEAGE'
4646
export const FETCH_LINEAGE_SUCCESS = 'FETCH_LINEAGE_SUCCESS'
4747
export const RESET_LINEAGE = 'RESET_LINEAGE'
48+
export const SET_LINEAGE_GRAPH_DEPTH = 'SET_LINEAGE_GRAPH_DEPTH'
4849

4950
// search
5051
export const FETCH_SEARCH = 'FETCH_SEARCH'

‎web/src/store/actionCreators/index.ts‎

Lines changed: 13 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -217,12 +217,18 @@ export const setBottomBarHeight = (height: number) => ({
217217
payload: height
218218
})
219219

220-
export const fetchLineage = (nodeType: JobOrDataset, namespace: string, name: string) => ({
220+
export const fetchLineage = (
221+
nodeType: JobOrDataset,
222+
namespace: string,
223+
name: string,
224+
depth: number
225+
) => ({
221226
type: actionTypes.FETCH_LINEAGE,
222227
payload: {
223228
nodeType,
224229
namespace,
225-
name
230+
name,
231+
depth
226232
}
227233
})
228234

@@ -235,6 +241,11 @@ export const resetLineage = () => ({
235241
type: actionTypes.RESET_LINEAGE
236242
})
237243

244+
export const setLineageGraphDepth = (depth: number) => ({
245+
type: actionTypes.SET_LINEAGE_GRAPH_DEPTH,
246+
payload: depth
247+
})
248+
238249
export const selectNamespace = (namespace: string) => ({
239250
type: actionTypes.SELECT_NAMESPACE,
240251
payload: namespace

‎web/src/store/reducers/lineage.ts‎

Lines changed: 13 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -5,26 +5,31 @@ import {
55
FETCH_LINEAGE_SUCCESS,
66
RESET_LINEAGE,
77
SET_BOTTOM_BAR_HEIGHT,
8+
SET_LINEAGE_GRAPH_DEPTH,
89
SET_SELECTED_NODE
910
} from '../actionCreators/actionTypes'
1011
import { HEADER_HEIGHT } from '../../helpers/theme'
1112
import { LineageGraph } from '../../types/api'
1213
import { Nullable } from '../../types/util/Nullable'
13-
import { setBottomBarHeight, setSelectedNode } from '../actionCreators'
14+
import { setBottomBarHeight, setLineageGraphDepth, setSelectedNode } from '../actionCreators'
1415

1516
export interface ILineageState {
1617
lineage: LineageGraph
1718
selectedNode: Nullable<string>
1819
bottomBarHeight: number
20+
depth: number
1921
}
2022

2123
const initialState: ILineageState = {
2224
lineage: { graph: [] },
2325
selectedNode: null,
24-
bottomBarHeight: (window.innerHeight - HEADER_HEIGHT) / 3
26+
bottomBarHeight: (window.innerHeight - HEADER_HEIGHT) / 3,
27+
depth: 5
2528
}
2629

27-
type ILineageActions = ReturnType<typeof setSelectedNode> & ReturnType<typeof setBottomBarHeight>
30+
type ILineageActions = ReturnType<typeof setSelectedNode> &
31+
ReturnType<typeof setBottomBarHeight> &
32+
ReturnType<typeof setLineageGraphDepth>
2833

2934
const DRAG_BAR_HEIGHT = 8
3035

@@ -42,6 +47,11 @@ export default (state = initialState, action: ILineageActions) => {
4247
Math.max(2, action.payload)
4348
)
4449
}
50+
case SET_LINEAGE_GRAPH_DEPTH:
51+
return {
52+
...state,
53+
depth: action.payload
54+
}
4555
case RESET_LINEAGE: {
4656
return { ...state, lineage: { graph: [] } }
4757
}

‎web/src/store/requests/lineage.ts‎

Lines changed: 11 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -6,7 +6,16 @@ import { JobOrDataset } from '../../components/lineage/types'
66
import { generateNodeId } from '../../helpers/nodes'
77
import { genericFetchWrapper } from './index'
88

9-
export const getLineage = async (nodeType: JobOrDataset, namespace: string, name: string) => {
10-
const url = `${API_URL}/lineage/?nodeId=${generateNodeId(nodeType, namespace, name)}`
9+
export const getLineage = async (
10+
nodeType: JobOrDataset,
11+
namespace: string,
12+
name: string,
13+
depth: number
14+
) => {
15+
const params = new URLSearchParams({
16+
nodeId: generateNodeId(nodeType, namespace, name),
17+
depth: depth.toString()
18+
})
19+
const url = `${API_URL}/lineage/?${params.toString()}`
1120
return genericFetchWrapper(url, { method: 'GET' }, 'fetchLineage')
1221
}

‎web/src/store/sagas/index.ts‎

Lines changed: 7 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -66,7 +66,13 @@ export function* fetchLineage() {
6666
while (true) {
6767
try {
6868
const { payload } = yield take(FETCH_LINEAGE)
69-
const result = yield call(getLineage, payload.nodeType, payload.namespace, payload.name)
69+
const result = yield call(
70+
getLineage,
71+
payload.nodeType,
72+
payload.namespace,
73+
payload.name,
74+
payload.depth
75+
)
7076
yield put(fetchLineageSuccess(result))
7177
} catch (e) {
7278
yield put(applicationError('Something went wrong while fetching lineage'))

0 commit comments

Comments
 (0)
⚡