Change task list rendering library (#54)

.changeset/angry-bobcats-share.md

@@ -0,0 +1,8 @@
+---
+'@smartcontractkit/operator-ui': patch
+---
+
+- Replaced rendering library to fix a bug that crashed the UI when task list contained two nodes in a loop
+- Change Pending, Success and Error svg borders
+- Task list tooltips are not positioned so that they don't go off-screen
+- Added zoom and pan functionality to Task List

package.json

@@ -29,12 +29,14 @@
     "@iarna/toml": "3.0.0",
     "@material-ui/core": "^3.9.2",
     "@material-ui/icons": "^4.5.1",
+    "@types/react-d3-graph": "^2.6.4",
     "@types/react-syntax-highlighter": "^13.5.2",
     "bignumber.js": "^9.0.1",
     "classnames": "^2.2.6",
     "cookie": "^0.4.1",
-    "d3": "^6.2.0",
-    "d3-dag": "^0.4.7",
+    "d3": "~5.16.0",
+    "elk": "^1.0.0",
+    "elkjs": "^0.8.2",
     "formik": "^2.2.6",
     "formik-material-ui": "^3.0.1",
     "graphlib-dot": "^0.6.4",
@@ -49,6 +51,7 @@
     "prop-types": "^15.6.2",
     "react": "^16.13.1",
     "react-copy-to-clipboard": "^5.0.3",
+    "react-d3-graph": "^2.6.0",
     "react-dom": "^16.12.0",
     "react-redux": "^7.2.1",
     "react-resize-detector": "^4.2.1",
@@ -77,7 +80,7 @@
     "@testing-library/user-event": "^13.5.0",
     "@types/classnames": "^2.3.1",
     "@types/cookie": "^0.4.1",
-    "@types/d3": "^6.2.0",
+    "@types/d3": "~5.16.0",
     "@types/fetch-mock": "^7.3.3",
     "@types/jest": "^29.0.0",
     "@types/jsdom": "^20.0.0",
@@ -119,6 +122,7 @@
     "terser-webpack-plugin": "^5.3.6",
     "tsconfig-paths-webpack-plugin": "^3.5.1",
     "typescript": "^4.8.3",
+    "web-worker": "^1.2.0",
     "webpack": "^5.74.0",
     "webpack-cli": "^4.10.0",
     "webpack-dev-server": "^4.11.0"

src/components/Cards/TaskListCard.test.tsx

@@ -5,28 +5,40 @@ import { render, screen } from '@testing-library/react'
 import { TaskListCard } from './TaskListCard'
 import { TaskRunStatus } from 'src/utils/taskRunStatus'
 
-const { queryByTestId, queryByText } = screen
+const { queryByText } = screen
 
 describe('TaskListCard', () => {
-  it('renders the task graph', () => {
-    render(
+  it('renders the task graph', async () => {
+    const { container } = render(
       <TaskListCard observationSource="ds1 [type=bridge name=voter_turnout];" />,
     )
 
-    expect(queryByTestId('default-run-icon')).toBeInTheDocument()
-    expect(queryByText('ds1')).toBeInTheDocument()
+    //Wait for render
+    await new Promise((r) => setTimeout(r, 500))
+
+    const ds1 = container
+      .getElementsByClassName('task-run-icon-pending')
+      .item(0)
+
+    expect(ds1).toHaveAttribute('id', 'pending-run-icon-ds1')
   })
 
-  it('renders the task graph with a completed status', () => {
-    render(
+  it('renders the task graph with a completed status', async () => {
+    const { container } = render(
       <TaskListCard
         observationSource="ds1 [type=bridge name=voter_turnout];"
         attributes={{ ds1: { status: TaskRunStatus.COMPLETE } }}
       />,
     )
 
-    expect(queryByTestId('complete-run-icon')).toBeInTheDocument()
-    expect(queryByText('ds1')).toBeInTheDocument()
+    //Wait for render
+    await new Promise((r) => setTimeout(r, 500))
+
+    const ds1 = container
+      .getElementsByClassName('task-run-icon-success')
+      .item(0)
+
+    expect(ds1).toHaveAttribute('id', 'success-run-icon-ds1')
   })
 
   it('renders a not found message', () => {

src/components/Cards/TaskListCard.tsx

@@ -6,7 +6,7 @@ import CardHeader from '@material-ui/core/CardHeader'
 import Typography from '@material-ui/core/Typography'
 
 import { parseDot, Stratify } from 'utils/parseDot'
-import { TaskListDAG } from './TaskListDAG'
+import { D3Graph } from 'components/D3Chart/D3Graph'
 
 interface Props {
   observationSource?: string
@@ -54,16 +54,15 @@ export const TaskListCard: React.FC<Props> = ({
   }, [attributes, observationSource, setState])
 
   return (
-    <Card style={{ overflow: 'visible' }}>
-      <CardHeader title="Task List" />
+    <Card>
+      <CardHeader title="Task List" id="graph-max-width" />
       <CardContent>
         {state && state.errorMsg && (
           <Typography align="center" variant="subtitle1">
             {state.errorMsg}
           </Typography>
         )}
-
-        {state && state.graph && <TaskListDAG stratify={state.graph} />}
+        {state && state.graph && <D3Graph nodesData={state.graph} />}
       </CardContent>
     </Card>
   )