Warshalls for Euclidean graphs (random needs work)

Author: lee-naish

src/algorithms/controllers/transitiveClosure.js

@@ -19,7 +19,8 @@ export default {
   initVisualisers() {
     return {
       graph: {
-        instance: new GraphTracer('key', null, 'Transitive Closure'),
+        // instance: new GraphTracer('key', null, 'Transitive Closure'),
+        instance: new GraphTracer('key', null, 'Graph view'),
         order: 0
       },
       // create a separate component for displaying the matrix as a 2D array
@@ -42,22 +43,25 @@ export default {
     return out;
   },
 
-  run(chunker, { matrix, size }) {
+  run(chunker, { edgeValueMatrix, coordsMatrix, startNode, endNodes, moveNode}) {
     // eslint-disable-next-line no-unused-expressions
+    const matrix = edgeValueMatrix;
+    const size = matrix.length;
     const numOfNodes = size;
     const nodes = new Array(numOfNodes);
     let prevI = 0;
     let prevJ = 0;
     let prevK = 0;
-    chunker.add(1, (g) => {
+    chunker.add(1, (g, edgeArray, coordsArray) => {
       // show kth tag when step back
       setKthVisible(true);
       g.array.set([...matrix], 'tc');
-      g.graph.set([...matrix], Array.from({ length: matrix.length }, (v, k) => (k + 1)));
-      g.graph.layoutCircle();
+      g.graph.set(edgeArray, Array.from({ length: matrix.length }, (v, k) => (k + 1)),coordsArray);
+      // g.graph.layoutCircle();
       // initialise the matrix in the 'Matrix' component
       g.graph.setIstc();
-    }, [this.graph], [this.array]);
+      g.graph.moveNodeFn(moveNode);
+    }, [[...edgeValueMatrix], [...coordsMatrix]]);
 
     for (let i = 0; i < numOfNodes; i++) {
       nodes[i] = this.copyArr([...matrix]);

src/algorithms/parameters/TCParam.js

@@ -1,27 +1,55 @@
 /* eslint-disable no-unused-vars */
 import React, { useState } from 'react';
-import MatrixParam from './helpers/MatrixParam';
+// import MatrixParam from './helpers/MatrixParam';
+import EuclideanMatrixParams from './helpers/EuclideanMatrixParams';
 import '../../styles/Param.scss';
 
-const DEFAULT_SIZE = 4;
+const DEFAULT_SIZE = 4; // gets overwritten by GRAPH_EGS[0] now
+const DEFAULT_START = null; // disable
+const DEFAULT_END = null; // disable
+const DEFAULT_HEUR = null; // disable
+const DEFAULT_WEIGHT = 2; // weights "as input"
 const TRANSITIVE_CLOSURE = 'Transitive Closure';
 const TRANSITIVE_CLOSURE_EXAMPLE = 'Please follow the example provided: 0,1';
+const GRAPH_EGS = [ // XXX think up better examples?
+        { name: 'Graph 1',
+          size: 4,
+          coords: '10-13,20-13,20-3,10-3',
+          edges: '1-1,2-2,3-3,4-4,1-2,2-3,3-4'
+        },
+        { name: 'Graph 2',
+          size: 4,
+          coords: '10-13,20-13,20-3,10-3',
+          edges: '1-1,2-2,3-3,4-4,1-3,2-1,3-2,4-3'
+        },
+        { name: 'Graph 3',
+          size: 5,
+          coords: '6-9,15-16,20-10,17-2,8-2',
+          edges: '1-2,2-1,2-3,3-4,4-5,5-3'
+        }];
 
 function TransitiveClosureParam() {
   const [message, setMessage] = useState(null);
 
   return (
     <>
       {/* Matrix input */}
-      <MatrixParam
+      <EuclideanMatrixParams
         name="transitiveClosure"
         mode="tc"
         defaultSize={DEFAULT_SIZE}
-        min={0}
-        max={1}
+        defaultStart={DEFAULT_START}
+        defaultEnd={DEFAULT_END}
+        defaultWeight = {DEFAULT_WEIGHT}
+        defaultHeur = {DEFAULT_HEUR}
+        min={1}
+        max={49}
+        graphEgs={GRAPH_EGS}
         ALGORITHM_NAME={TRANSITIVE_CLOSURE}
         EXAMPLE={TRANSITIVE_CLOSURE_EXAMPLE}
         setMessage={setMessage}
+        symmetric={false}
+        unweighted
       />
 
       {/* render success/error message */}

src/algorithms/parameters/helpers/EuclideanMatrixParams.js

@@ -184,6 +184,9 @@ function EuclideanMatrixParams({
   defaultSize,
   defaultStart,
   defaultEnd,
+  // XXX should have defaultWeight = 0 (=Euclidean) defined in the
+  // graph traversal parameters; included explicitly in Warshall's
+  defaultWeight = 0, // in case defaultWeight not defined
   defaultHeur,
   graphEgs,
   min,
@@ -220,7 +223,7 @@ function EuclideanMatrixParams({
   const W_MANHATTAN = 1;
   const W_INPUT = 2; // as defined by input
   const weightCalcName = ['Euclidean', 'Manhattan', 'As input'];
-  const [weightCalc, setCalcMethod] = useState(W_EUCLIDEAN);
+  const [weightCalc, setCalcMethod] = useState(defaultWeight);
 
   // Button toggles Euclidean/Manhattan for heuristic
   const HEURCALCMAX = 2; // number of heuristic calculation options
@@ -730,6 +733,20 @@ function EuclideanMatrixParams({
             +
           </button>
         </div>);
+
+  let startButton = '';
+  if (defaultStart !== null)
+    startButton =
+        (<div className="sLineButtonContainer">
+          <button className="startBtn" onClick={() => updateStartNode(startNode - 1)}>
+            −
+          </button>
+          <span className='size'>Start: {startNode}</span>
+          <button className="sizeBtn" onClick={() => updateStartNode(startNode + 1)}>
+            +
+          </button>
+          
+        </div>);
 
   let weightButton = '';
   if (!unweighted)
@@ -764,16 +781,7 @@ function EuclideanMatrixParams({
         </div>
         {weightButton}
         {heurButton}
-        <div className="sLineButtonContainer">
-          <button className="startBtn" onClick={() => updateStartNode(startNode - 1)}>
-            −
-          </button>
-          <span className='size'>Start: {startNode}</span>
-          <button className="sizeBtn" onClick={() => updateStartNode(startNode + 1)}>
-            +
-          </button>
-          
-        </div>
+        {startButton}
         {endButton}
   </div>
   {endNodeDiv}

src/components/DataStructures/Graph/GraphRenderer/index.js

@@ -55,6 +55,12 @@ class GraphRenderer extends Renderer {
   constructor(props) {
     super(props);
 
+    // XXX shouldn't rely on this.props.title
+    // XXX This plus the code for axes and graph layout (eg layoutCircle()
+    // and code where X-Y coordinates are explicitly given by the user) is
+    // linked. Some magic numbers were added to shift things around and make
+    // things look ok.  It should be rethought or at least the numbers for
+    // this.centerX and this.centerY should be put in one place.
     if (this.props.title === 'Graph view') {
       // Center to new axis origin
       // this.centerX = 180;
@@ -83,17 +89,7 @@ class GraphRenderer extends Renderer {
   handleMouseMove(e) {
     // XXX would be nice to avoid selecting text with reverse video
     // as we move the mouse around!
-    // XXX really shouldn't depend on this.props.title - moving away
-    // from this but still have a hack for Warshalls
-    if (this.selectedNode && this.props.title === 'Transitive Closure') {
-      // XXX Old stuff so Warshall's remains as it was
-      // Allow mouse movement
-      const { x, y } = this.computeCoords(e);
-      const node = this.props.data.findNode(this.selectedNode.id);
-      node.x = x;
-      node.y = y;
-      this.refresh();
-    } else if (this.selectedNode && this.props.data.moveNode) {
+    if (this.selectedNode && this.props.data.moveNode) {
       // Allow mouse to move nodes (for Euclidean graphs) if
       // this.props.data.moveNode function is defined
       const { x, y } = this.computeCoords(e);

src/components/DataStructures/Graph/GraphTracer.js

@@ -115,6 +115,7 @@ class GraphTracer extends Tracer {
     this.scaledCoords = coordinates;
     this.setNodeRadius(coordinates);
 
+    console.log(['coordinates', coordinates]);
     // Set layout to null if nodes are to be displayed by coordinates.
     if(coordinates.length > 0)
     {
@@ -404,8 +405,10 @@ class GraphTracer extends Tracer {
     const unitAngle = (2 * Math.PI) / this.nodes.length;
     let angle = -Math.PI / 2;
     for (const node of this.nodes) {
-      const x = (Math.cos(angle) * rect.width) / 2;
-      const y = (Math.sin(angle) * rect.height) / 2;
+      // XXX see comment about magic numbers in constructor() in
+      // Graph/GraphRenderer/index.js
+      const x = 650 - 200 + (Math.cos(angle) * rect.width) / 2;
+      const y = -200 - 70 + (Math.sin(angle) * rect.height) / 2;
       node.x = x;
       node.y = y;
       angle += unitAngle;