Lineage UI: Add a graph depth config option (MarquezProject#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>
Signed-off-by: Xavier-Cliquennois <Xavier-Cliquennois@users.noreply.github.com>

Author: jlukenoff

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

@@ -40,7 +40,8 @@ const BottomBar: React.FC<BottomBarProps> = ({ bottomBarHeight, selectedNodeData
       right: 0,
       width: `calc(100% - ${DRAWER_WIDTH}px)`,
       bottom: 0,
-      position: 'fixed'
+      position: 'fixed',
+      zIndex: theme.zIndex.appBar + 1
     }}>
       <DragBar />
       <Box sx={{

web/src/components/lineage/Lineage.tsx

@@ -15,10 +15,16 @@ import { LineageGraph } from '../../types/api'
 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 { useParams } from 'react-router-dom'
+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'
@@ -33,6 +39,7 @@ const DOUBLE_CLICK_MAGNIFICATION = 1.1
 interface StateProps {
   lineage: LineageGraph
   selectedNode: string
+  depth: number
 }
 
 interface LineageState {
@@ -85,7 +92,6 @@ export function buildGraphAll(g: graphlib.Graph<MqNode>, graph: LineageNode[], c
   callBack(g)
 }
 
-
 export function getSelectedPaths(g: graphlib.Graph<MqNode>, selectedNode: string) {
   const paths = [] as Array<[string, string]>
 
@@ -165,7 +171,8 @@ const Lineage: React.FC<LineageProps> = (props: LineageProps) => {
         props.fetchLineage(
           nodeType.toUpperCase() as JobOrDataset,
           namespace,
-          nodeName
+          nodeName,
+          props.depth
         )
       }
       mounted.current = true
@@ -188,7 +195,8 @@ const Lineage: React.FC<LineageProps> = (props: LineageProps) => {
         props.fetchLineage(
           nodeType?.toUpperCase() as JobOrDataset,
           namespace || '',
-          nodeName || ''
+          nodeName || '',
+          props.depth
         )
         getEdges()
       }
@@ -228,6 +236,7 @@ const Lineage: React.FC<LineageProps> = (props: LineageProps) => {
             </MqEmpty>
           </Box>
         )}
+        <DepthConfig depth={props.depth} />
         {state?.graph && (
           <ParentSize>
             {parent => (
@@ -306,15 +315,17 @@ const Lineage: React.FC<LineageProps> = (props: LineageProps) => {
 
 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

@@ -216,12 +216,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
   }
 })
 
@@ -234,6 +240,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

@@ -68,7 +68,13 @@ export function* fetchLineage() {
   while (true) {
     try {
       const { payload } = yield take(FETCH_LINEAGE)
-      const result: LineageGraph = yield call(getLineage, payload.nodeType, payload.namespace, payload.name)
+      const result: LineageGraph = 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'))