From 466ec77a759717419ba43a94d0bd6db224ee0e35 Mon Sep 17 00:00:00 2001
From: Alan Greene <github.com@alangreene.net>
Date: Thu, 9 Mar 2023 23:20:51 +0000
Subject: [PATCH] Graph cleanup

Fix display of edges and markers for the legacy graph component so
we can more easily compare functionality and layout with the new version.

Remove lint overrides by using the available ids for the `key` prop.
---
 package.json                                 |  2 +-
 packages/graph/src/components/Graph.js       | 12 ++++++------
 packages/graph/src/components/Graph.scss     |  2 +-
 packages/graph/src/components/Graph/Graph.js | 13 ++++++-------
 4 files changed, 14 insertions(+), 15 deletions(-)

diff --git a/package.json b/package.json
index cf4eeb3e2..0b7d26462 100644
--- a/package.json
+++ b/package.json
@@ -12,7 +12,7 @@
     "i18n:import": "node scripts/i18n/importFromProperties.js",
     "lint": "eslint --ignore-path .gitignore .",
     "lint:fix": "npm run lint -- --fix",
-    "start": "webpack-dev-server --hot --config webpack.dev.js",
+    "start": "webpack serve --hot --config webpack.dev.js",
     "storybook": "storybook dev -p 5000",
     "storybook:build": "storybook build",
     "storybook:deploy": "npx -p @storybook/storybook-deployer storybook-to-ghpages -e storybook-static",
diff --git a/packages/graph/src/components/Graph.js b/packages/graph/src/components/Graph.js
index 39eb79a73..028a0d751 100644
--- a/packages/graph/src/components/Graph.js
+++ b/packages/graph/src/components/Graph.js
@@ -88,14 +88,14 @@ export default class Graph extends Component {
           <defs>
             <marker
               id="edge-arrow"
-              markerUnits="strokeWidth"
-              markerWidth="10"
-              markerHeight="14"
+              markerUnits="userSpaceOnUse"
+              markerWidth="7.5"
+              markerHeight="8"
               orient="auto"
-              refY="50"
-              refX="86"
+              refY="4"
+              refX="7"
             >
-              <path d="M 0 0 L100 50 L 0 100" />
+              <path d="M0 0v8l7-4z" />
             </marker>
           </defs>
         )}
diff --git a/packages/graph/src/components/Graph.scss b/packages/graph/src/components/Graph.scss
index bceadd601..98e03d228 100644
--- a/packages/graph/src/components/Graph.scss
+++ b/packages/graph/src/components/Graph.scss
@@ -17,7 +17,7 @@ limitations under the License.
     stroke: $ui-04;
   }
 
-  .vx-network-links path {
+  .visx-network-link path {
     stroke: $ui-04;
     marker-end: url(#edge-arrow);
   }
diff --git a/packages/graph/src/components/Graph/Graph.js b/packages/graph/src/components/Graph/Graph.js
index 23ecb4455..91d07f2ad 100644
--- a/packages/graph/src/components/Graph/Graph.js
+++ b/packages/graph/src/components/Graph/Graph.js
@@ -21,18 +21,17 @@ import Edge from '../Edge';
 import Node from '../Node/';
 
 function buildEdges({ direction, edges }) {
-  return edges.map((edge, i) => {
-    // eslint-disable-next-line react/no-array-index-key
-    return <Edge direction={direction} key={`edge_${i}`} edge={edge} />;
-  });
+  return edges.map(edge => (
+    <Edge direction={direction} key={edge.id} edge={edge} />
+  ));
 }
 
 function buildNodes(nodes) {
-  return nodes.map((node, i) => {
+  return nodes.map(node => {
     return (
       <Node
         id={node.id}
-        key={`node_${i}`} // eslint-disable-line react/no-array-index-key
+        key={node.id}
         x={node.x}
         y={node.y}
         height={node.height}
@@ -59,7 +58,7 @@ export default function Graph({
       'elk.edgeRouting': 'ORTHOGONAL',
       'elk.layered.mergeEdges': true, // avoid multiple input / output ports per node
       // TODO: test
-      // 'elk.layered.nodePlacement.bk.fixedAlignment': 'BALANCED',
+      // 'elk.layered.nodePlacement.bk.fixedAlignment': 'BALANCED', // LEFTDOWN
       // 'elk.layered.nodePlacement.strategy': 'BRANDES_KOEPF',
       // 'elk.layered.nodePlacement.strategy': 'NETWORK_SIMPLEX',
       // 'crossingMinimization.semiInteractive': true,