Lineage UI: Add a graph depth config option

CHANGELOG.md

@@ -1,6 +1,9 @@
 # Changelog
 
 ## [Unreleased](https://github.com/MarquezProject/marquez/compare/0.35.0...HEAD)
+### Added
+* 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)  
+    *Makes the lineage UI a bit easier to navigate especially for larger lineage graphs*
 
 ## [0.35.0](https://github.com/MarquezProject/marquez/compare/0.34.0...0.35.0) - 2023-06-13
 ### Added

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

@@ -26,7 +26,8 @@ const styles = (theme: Theme) => {
       right: 0,
       width: `calc(100% - ${DRAWER_WIDTH}px)`,
       bottom: 0,
-      position: 'fixed'
+      position: 'fixed',
+      zIndex: theme.zIndex.appBar + 1
     }
   })
 }

web/src/components/lineage/Lineage.tsx

@@ -17,9 +17,15 @@ import { WithStyles, createStyles, withStyles } from '@material-ui/core/styles'
 import { Zoom } from '@visx/zoom'
 import { bindActionCreators } from 'redux'
 import { connect } from 'react-redux'
-import { fetchLineage, resetLineage, setSelectedNode } from '../../store/actionCreators'
+import {
+  fetchLineage,
+  resetLineage,
+  setLineageGraphDepth,
+  setSelectedNode
+} from '../../store/actionCreators'
 import { generateNodeId } from '../../helpers/nodes'
 import { localPoint } from '@visx/event'
+import DepthConfig from './components/depth-config/DepthConfig'
 import Edge from './components/edge/Edge'
 import MqEmpty from '../core/empty/MqEmpty'
 import MqText from '../core/text/MqText'
@@ -44,6 +50,7 @@ const DOUBLE_CLICK_MAGNIFICATION = 1.1
 interface StateProps {
   lineage: LineageGraph
   selectedNode: string
+  depth: number
 }
 
 interface LineageState {
@@ -96,24 +103,30 @@ export class Lineage extends React.Component<LineageProps, LineageState> {
       this.props.fetchLineage(
         this.props.match.params.nodeType.toUpperCase() as JobOrDataset,
         this.props.match.params.namespace,
-        this.props.match.params.nodeName
+        this.props.match.params.nodeName,
+        this.props.depth
       )
     }
   }
 
   componentDidUpdate(prevProps: Readonly<LineageProps>) {
     if (
-      JSON.stringify(this.props.lineage) !== JSON.stringify(prevProps.lineage) &&
+      (JSON.stringify(this.props.lineage) !== JSON.stringify(prevProps.lineage) ||
+        this.props.depth !== prevProps.depth) &&
       this.props.selectedNode
     ) {
       this.initGraph()
       this.buildGraphAll(this.props.lineage.graph)
     }
-    if (this.props.selectedNode !== prevProps.selectedNode) {
+    if (
+      this.props.selectedNode !== prevProps.selectedNode ||
+      this.props.depth !== prevProps.depth
+    ) {
       this.props.fetchLineage(
         this.props.match.params.nodeType.toUpperCase() as JobOrDataset,
         this.props.match.params.namespace,
-        this.props.match.params.nodeName
+        this.props.match.params.nodeName,
+        this.props.depth
       )
       this.getEdges()
     }
@@ -224,6 +237,7 @@ export class Lineage extends React.Component<LineageProps, LineageState> {
             </MqEmpty>
           </Box>
         )}
+        <DepthConfig depth={this.props.depth} />
         {this.state.graph && (
           <ParentSize>
             {parent => (
@@ -303,15 +317,17 @@ export class Lineage extends React.Component<LineageProps, LineageState> {
 
 const mapStateToProps = (state: IState) => ({
   lineage: state.lineage.lineage,
-  selectedNode: state.lineage.selectedNode
+  selectedNode: state.lineage.selectedNode,
+  depth: state.lineage.depth
 })
 
 const mapDispatchToProps = (dispatch: Redux.Dispatch) =>
   bindActionCreators(
     {
       setSelectedNode: setSelectedNode,
       fetchLineage: fetchLineage,
-      resetLineage: resetLineage
+      resetLineage: resetLineage,
+      setDepth: setLineageGraphDepth
     },
     dispatch
   )

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

@@ -0,0 +1,70 @@
+// Copyright 2018-2023 contributors to the Marquez project
+// SPDX-License-Identifier: Apache-2.0
+
+import * as Redux from 'redux'
+import { Box, Typography } from '@material-ui/core'
+import { Theme, WithStyles, createStyles, withStyles } from '@material-ui/core/styles'
+import { bindActionCreators } from 'redux'
+import { connect } from 'react-redux'
+import { setLineageGraphDepth } from '../../../../store/actionCreators'
+import React from 'react'
+import TextField from '@material-ui/core/TextField'
+
+const styles = (theme: Theme) =>
+  createStyles({
+    root: {
+      position: 'absolute',
+      display: 'flex',
+      justifyContent: 'space-evenly',
+      alignItems: 'center',
+      right: 0,
+      marginRight: '3rem',
+      padding: '1rem',
+      zIndex: theme.zIndex.appBar
+    },
+    title: {
+      textAlign: 'center'
+    },
+    textField: {
+      width: '4rem',
+      marginLeft: '0.5rem'
+    }
+  })
+
+interface DepthConfigProps extends WithStyles<typeof styles> {
+  depth: number
+  setDepth: (depth: number) => void
+}
+
+const DepthConfig: React.FC<DepthConfigProps> = ({ classes, setDepth, depth }) => {
+  const i18next = require('i18next')
+  const GRAPH_TITLE = i18next.t('lineage.graph_depth_title')
+  return (
+    <Box className={classes.root}>
+      <Typography>{GRAPH_TITLE}</Typography>
+      <TextField
+        type='number'
+        value={depth}
+        onChange={e => setDepth(isNaN(parseInt(e.target.value)) ? 0 : parseInt(e.target.value))}
+        variant='outlined'
+        size='small'
+        aria-label={GRAPH_TITLE}
+        className={classes.textField}
+        inputProps={{
+          min: 0,
+          max: 100
+        }}
+      />
+    </Box>
+  )
+}
+
+const mapDispatchToProps = (dispatch: Redux.Dispatch) =>
+  bindActionCreators(
+    {
+      setDepth: setLineageGraphDepth
+    },
+    dispatch
+  )
+
+export default connect(null, mapDispatchToProps)(withStyles(styles)(DepthConfig))

web/src/i18n/config.ts

@@ -44,7 +44,8 @@ i18next
           },
           lineage: {
             empty_title: 'No node selected',
-            empty_body: 'Try selecting a node through search or the jobs or datasets page.'
+            empty_body: 'Try selecting a node through search or the jobs or datasets page.',
+            graph_depth_title: 'Graph Depth'
           },
           sidenav: {
             jobs: 'JOBS',

web/src/store/actionCreators/actionTypes.ts

@@ -45,6 +45,7 @@ export const RESET_EVENTS = 'RESET_EVENTS'
 export const FETCH_LINEAGE = 'FETCH_LINEAGE'
 export const FETCH_LINEAGE_SUCCESS = 'FETCH_LINEAGE_SUCCESS'
 export const RESET_LINEAGE = 'RESET_LINEAGE'
+export const SET_LINEAGE_GRAPH_DEPTH = 'SET_LINEAGE_GRAPH_DEPTH'
 
 // search
 export const FETCH_SEARCH = 'FETCH_SEARCH'

web/src/store/actionCreators/index.ts

@@ -217,12 +217,18 @@ export const setBottomBarHeight = (height: number) => ({
   payload: height
 })
 
-export const fetchLineage = (nodeType: JobOrDataset, namespace: string, name: string) => ({
+export const fetchLineage = (
+  nodeType: JobOrDataset,
+  namespace: string,
+  name: string,
+  depth: number
+) => ({
   type: actionTypes.FETCH_LINEAGE,
   payload: {
     nodeType,
     namespace,
-    name
+    name,
+    depth
   }
 })
 
@@ -235,6 +241,11 @@ export const resetLineage = () => ({
   type: actionTypes.RESET_LINEAGE
 })
 
+export const setLineageGraphDepth = (depth: number) => ({
+  type: actionTypes.SET_LINEAGE_GRAPH_DEPTH,
+  payload: depth
+})
+
 export const selectNamespace = (namespace: string) => ({
   type: actionTypes.SELECT_NAMESPACE,
   payload: namespace

web/src/store/reducers/lineage.ts

@@ -5,26 +5,31 @@ import {
   FETCH_LINEAGE_SUCCESS,
   RESET_LINEAGE,
   SET_BOTTOM_BAR_HEIGHT,
+  SET_LINEAGE_GRAPH_DEPTH,
   SET_SELECTED_NODE
 } from '../actionCreators/actionTypes'
 import { HEADER_HEIGHT } from '../../helpers/theme'
 import { LineageGraph } from '../../types/api'
 import { Nullable } from '../../types/util/Nullable'
-import { setBottomBarHeight, setSelectedNode } from '../actionCreators'
+import { setBottomBarHeight, setLineageGraphDepth, setSelectedNode } from '../actionCreators'
 
 export interface ILineageState {
   lineage: LineageGraph
   selectedNode: Nullable<string>
   bottomBarHeight: number
+  depth: number
 }
 
 const initialState: ILineageState = {
   lineage: { graph: [] },
   selectedNode: null,
-  bottomBarHeight: (window.innerHeight - HEADER_HEIGHT) / 3
+  bottomBarHeight: (window.innerHeight - HEADER_HEIGHT) / 3,
+  depth: 5
 }
 
-type ILineageActions = ReturnType<typeof setSelectedNode> & ReturnType<typeof setBottomBarHeight>
+type ILineageActions = ReturnType<typeof setSelectedNode> &
+  ReturnType<typeof setBottomBarHeight> &
+  ReturnType<typeof setLineageGraphDepth>
 
 const DRAG_BAR_HEIGHT = 8
 
@@ -42,6 +47,11 @@ export default (state = initialState, action: ILineageActions) => {
           Math.max(2, action.payload)
         )
       }
+    case SET_LINEAGE_GRAPH_DEPTH:
+      return {
+        ...state,
+        depth: action.payload
+      }
     case RESET_LINEAGE: {
       return { ...state, lineage: { graph: [] } }
     }

web/src/store/requests/lineage.ts

@@ -6,7 +6,16 @@ import { JobOrDataset } from '../../components/lineage/types'
 import { generateNodeId } from '../../helpers/nodes'
 import { genericFetchWrapper } from './index'
 
-export const getLineage = async (nodeType: JobOrDataset, namespace: string, name: string) => {
-  const url = `${API_URL}/lineage/?nodeId=${generateNodeId(nodeType, namespace, name)}`
+export const getLineage = async (
+  nodeType: JobOrDataset,
+  namespace: string,
+  name: string,
+  depth: number
+) => {
+  const params = new URLSearchParams({
+    nodeId: generateNodeId(nodeType, namespace, name),
+    depth: depth.toString()
+  })
+  const url = `${API_URL}/lineage/?${params.toString()}`
   return genericFetchWrapper(url, { method: 'GET' }, 'fetchLineage')
 }

web/src/store/sagas/index.ts

@@ -66,7 +66,13 @@ export function* fetchLineage() {
   while (true) {
     try {
       const { payload } = yield take(FETCH_LINEAGE)
-      const result = yield call(getLineage, payload.nodeType, payload.namespace, payload.name)
+      const result = yield call(
+        getLineage,
+        payload.nodeType,
+        payload.namespace,
+        payload.name,
+        payload.depth
+      )
       yield put(fetchLineageSuccess(result))
     } catch (e) {
       yield put(applicationError('Something went wrong while fetching lineage'))