Changes some sizes in GraphRenderer/GraphTracer

Author: lee-naish

src/components/DataStructures/Graph/GraphRenderer/GraphRenderer.module.scss

@@ -131,7 +131,12 @@
   .edge {
     .line {
       stroke: var(--graph-edge-line-stroke);
-      stroke-width: 2.5;
+      // For various trees we don't care much about edges so having them
+      // thin is fine but for some graph algorithms in particular we
+      // want to highlight edges and change their color to we want
+      // reasonable thick edges; this is a compromise (maybe we could
+      // add an interface to adjust it for different algorithms XXX)
+      stroke-width: 7; // width of edges in graphs
       fill: none;
 
       &.directed {
@@ -143,6 +148,9 @@
       fill: var(--graph-edge-line-weight-fill);
       alignment-baseline: baseline;
       text-anchor: middle;
+      // font size for labels in nodes - should be linked to node radius
+      // XXX but currently isn't.  Another difficulty was node sizes
+      // were adjusted depending on coordinate list - now deleted.
       // font-size: 15px;
       font-size: 35px;
     }

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

@@ -125,14 +125,14 @@ class GraphRenderer extends Renderer {
   }
 
   /**
-   * Add scales to the axis
+   * Add scale tick marks to the axis
    */
   computeScales(
     min,
     max,
     center,
     stepSize = 30,
-    stepHeight = 5,
+    stepHeight = 15, // size of scale mark tick on axes
     increment = 1
   ) {
     const scales = [];
@@ -273,14 +273,14 @@ class GraphRenderer extends Renderer {
     const axisArrowX = this.computeArrows(
       'x',
       { x: axisEndPoint, y: axisCenter.y },
-      8,
-      8
+      18,
+      18
     ); // list containing fragments to form arrow on x
     const axisArrowY = this.computeArrows(
       'y',
       { x: axisCenter.x, y: axisEndPoint },
-      8,
-      8
+      18,
+      18
     ); // list containing fragments to form arrow on y
 
     const labelPadding = 20;
@@ -383,7 +383,7 @@ class GraphRenderer extends Renderer {
                 />
                 <text
                   x={scale.x1}
-                  y={originCoords.y + 20}
+                  y={originCoords.y + 30}
                   textAnchor="middle"
                   className={styles.axisLabel}
                 >
@@ -403,7 +403,7 @@ class GraphRenderer extends Renderer {
                   className={styles.axis}
                 />
                 <text
-                  x={originCoords.x - 15}
+                  x={originCoords.x - 25}
                   y={scale.y1 + 6}
                   textAnchor="middle"
                   className={styles.axisLabel}

src/components/DataStructures/Graph/GraphTracer.js

@@ -93,11 +93,14 @@ class GraphTracer extends Tracer {
       if(maxCoord < (i + 1) * 10)
       {
         const radiusIncrease = (i - 1) * 6
-        this.dimensions.nodeRadius = this.dimensions.defaultNodeRadius + radiusIncrease;
+        // XXX makes graph nodes rather fat compared with tree nodes
+        // with default values so I've deleted it for now
+        // this.dimensions.nodeRadius = this.dimensions.defaultNodeRadius + radiusIncrease;
         return;
       }
     }
 
+    // XXX
     // SHOULD ALSO SET LABEL SIZE OF NODE HERE !!!
     // ALTERNATIVELY LABEL SIZE SHOULD BE CALCULATED ELSEWHERE DEPENDANT ON NODE RADIUS!!! 
   }