Cumulus 3184 : Dependency d3-dag code integration to d3 graph

.nvmrc

@@ -1 +1 @@
-16.19.0
+16.19.0

CHANGELOG.md

@@ -16,6 +16,10 @@ and this project adheres to [Semantic Versioning](http://semver.org/spec/v2.0.0.
  - Updated the dashboard to use alpha version `@cumulus/[email protected]` and
  `@cumulus/[email protected]` to work with localstack v3.0.0
 
+- **CUMULUS-3184**
+ - Replaced dagre-d3 with dagre-d3-es to address the d3-color vulnerability
+ - Upgraded d3 to v7.2.0 to be compatible with dagre-d3-es v7.0.10
+
 ## [v12.1.0] - 2023-10-27
 
 ### Breaking Changes

app/src/js/components/Executions/execution-graph-utils.js

@@ -1,4 +1,4 @@
-import dagre from 'dagre-d3';
+import * as dagreD3 from 'dagre-d3-es';
 
 export const select = (arr, predOrProp) => {
  let predicate = predOrProp;
@@ -28,7 +28,7 @@ export const setParent = (g, child, parent) => {
 };
 
 export const draw = (graph) => {
- const g = new dagre.graphlib.Graph({ compound: true })
+ const g = new dagreD3.graphlib.Graph({ compound: true })
  .setGraph({})
  .setDefaultEdgeLabel(() => ({}));
 

app/src/js/components/Executions/execution-status-graph.js

@@ -1,7 +1,7 @@
 import React, { useState, useEffect, useRef } from 'react';
 import PropTypes from 'prop-types';
-import dagre from 'dagre-d3';
 import * as d3 from 'd3';
+import * as dagreD3 from 'dagre-d3-es';
 import Modal from 'react-bootstrap/Modal';
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
 import { faExpand, faCompress } from '@fortawesome/free-solid-svg-icons';
@@ -25,13 +25,14 @@ const ExecutionStatusGraph = ({ executionStatus }) => {
  const workflow = JSON.parse(stateMachine.definition);
  const events = getExecutionEvents(executionHistory);
  const graph = workflowToGraph(workflow);
+ console.log('graph', graph);
  addEventsToGraph(events, graph);
  g.current = draw(graph);
  renderGraph('.visual', g);
  }, [executionHistory, stateMachine.definition]);
 
- function renderGraph (svgSelector) {
- const render = new dagre.render();
+ function renderGraph(svgSelector) {
+ const render = new dagreD3.render();
  const svg = d3.select(svgSelector);
  render(svg, g.current);
  const { height } = d3.select(`${svgSelector} g`).node().getBBox();