Merge branch 'warshalls' into 2024_sem2

Warshall's with newer graph interface, better circular random graphs,
get still move nodes

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,56 @@
 /* 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}
+        circular={true}
+        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,
@@ -195,7 +198,8 @@ function EuclideanMatrixParams({
   ALGORITHM_NAME,
   EXAMPLE,
   EXAMPLE2,
-  unweighted
+  unweighted,
+  circular
 }) {
 
   // XXX these get re-evaluated when anything much changes - could
@@ -220,7 +224,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
@@ -318,8 +322,8 @@ function EuclideanMatrixParams({
       setEndNodes(newEndNodes);
     }
     if (graphChoice === GRAPHCHOICERAND) {
-      const edges = makeWeights(newSize, 1, 10, symmetric, unweighted);
-      const coords = makeXYCoords(newSize, min, max);
+      const edges = makeWeights(newSize, 1, 10, symmetric, unweighted, circular);
+      const coords = makeXYCoords(newSize, min, max, circular);
       setData1(coords);
       setCoordsTxt(getCoordinateList(coords));
       setData2(edges);
@@ -346,7 +350,7 @@ function EuclideanMatrixParams({
   // to generate new random graphs of any size (thats still a bit
   // cumbersome with the current setup)
   // XXX maybe we should have a text box for the size instead of + and -
-  const updateTableSize = (newSize) => {
+  const updateTableSize = (newSize, circular=false) => {
     if (newSize < 1) return;
     if (newSize < startNode)
         setStartNode(newSize);
@@ -422,7 +426,6 @@ function EuclideanMatrixParams({
   // components/DataStructures/Graph/GraphRenderer/index.js) so
   // coordinates here can be updated
   const moveNode = (nodeID, x, y) => {
-    console.log(['moveNode', nodeID, x, y]);
     const newData1 = data1.map((row, index) => {
       if (index === nodeID) {
         return {
@@ -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/algorithms/parameters/helpers/ParamHelper.js

@@ -245,12 +245,18 @@ export const makeWeightsOld = (len, min, max, symmetric, unweighted) => {
 // for a large number - could make some adjustments.  Could be nice for
 // this to have the X-Y coordinates passed in; currently they are done
 // independently, which limits things somewhat.
-export const makeWeights = (len, min, max, symmetric, unweighted) => {
+export const makeWeights = (len, min, max, symmetric, unweighted, circular=false) => {
   const rows = [];
 
   // get pseudo-random len*len edge matrix
   // Try to get average degree around 3, edges being more likely between
-  // nodes with similar numbers
+  // nodes with similar numbers; lower degree for circular graphs
+  let diffMult = 4; // magic number for random edge generation
+  let sub = 6; // magic number for random edge generation
+  if (circular) {
+    diffMult = 3 ; // larger means fewer edges between close nodes
+    sub = 0; // smaller means fewer edges in total
+  }
   for (let i = 0; i < len; i += 1) {
     let row = [];
     let edgeCount = 0;
@@ -269,20 +275,19 @@ export const makeWeights = (len, min, max, symmetric, unweighted) => {
           // code did...
           val = (symmetric? 0 : 1);
           // always have an edge between i and i+1 to make sure graph is
-          // connected (may not always want this but you can edit graphs
-          // if desired)
-        } else if (j == i+1) {
+          // connected, unless its circular
+        } else if (j == i+1 && !circular) {
           val = (unweighted? 1: getRandomInt(min, max));
           // else determine if we want an edge between i and j
           // - if i&j differ more we reduce likelihood
-        } else if (Math.random() < 0.75**(Math.abs(i-j)*3 - 6)) {
+        } else if (Math.random() < 0.75**(Math.abs(i-j)*diffMult - sub)) {
           val = (unweighted? 1: getRandomInt(min, max));
         }
         if (val > 0) edgeCount++;
         row.push(val);
       }
       // console.log('try ' + tries + 'edgeCount = ' + edgeCount);
-    } while (tries < 40 && (edgeCount === 0 || edgeCount > 4) && len > 1)
+    } while (tries < 40 && (edgeCount === 0 && !circular || edgeCount > 4) && len > 1)
     // console.log('row' + i + ': ' + row);
     rows.push(row);
   }
@@ -300,7 +305,10 @@ export const makeWeights = (len, min, max, symmetric, unweighted) => {
 
 // Create len random-ish XY coordinates in range min to max for
 // Euclidean graphs
-export const makeXYCoords = (len, min, max) => {
+export const makeXYCoords = (len, min, max, circular=false) => {
+  // added circular layout for Warshall's
+  if (circular)
+    return makeXYCoordsCircular(len, min, max);
   const rows = [];
   let arr = [];
   let prevX = 0;  // keep track of previous 2 X,Y values to reduce close nodes
@@ -348,6 +356,25 @@ export const makeXYCoords = (len, min, max) => {
   return arr;
 }
 
+// Create len circular-ish XY coordinates for graph in range min to max for
+// Warshall's
+export const makeXYCoordsCircular = (len, min, max) => {
+  const unitAngle = (2 * Math.PI) / len;
+  const radius = (max-min)/6; // height on screen is limited
+  const midX = (max-min)/2;
+  const midY = 1 + (max-min)/6; // avoid X axis
+  let arr = [];
+  for (let i = 0; i < len; i += 1) {
+    let data = {};
+    let x = Math.round(midX + (Math.cos(Math.PI+unitAngle*i) * radius));
+    let y = Math.round(midY + (Math.sin(Math.PI+unitAngle*i) * radius));
+    data[`col0`] = `${x}`;
+    data[`col1`] = `${y}`;
+    arr.push(data);
+  }
+  return arr;
+}
+
 // Euclidean distance between two points (rounded up)
 // We round up so we can have the choice of admissible and inadmissible
 // heuristics in A* more easily (and avoid floating point)

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

@@ -404,8 +404,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;