Vindigo cumulus 3184

.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';
@@ -30,8 +30,8 @@ const ExecutionStatusGraph = ({ executionStatus }) => {
     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();