Colors for arrays improved + other bits

Author: lee-naish

src/algorithms/controllers/AStar.js

@@ -132,6 +132,7 @@ export default {
         vis.graph.weighted(true);
         vis.graph.moveNodeFn(moveNode);
         vis.graph.set(edgeArray, Array.from({ length: numVertices }, (v, k) => (k + 1)),coordsArray);
+        vis.graph.setSize(0.7); // more room for arrays
       },
       [E, coords]
     );
@@ -155,18 +156,12 @@ export default {
       finalCosts.push(dashStr);
     }
 
-    // XXX would be nice to make the size of the table a bit smaller by
-    // default, and a bit higher up. How to do it is a mystery to me.
-    // vis.array.getRendererClass().zoom can be set but does nothing
-    // but in src/components/DataStructures/Array/Array2DRenderer/index.js
-    // you can change scale(${this.zoom}) to scale(0.8), for example,
-    // but then you can't change the zoom (seems like this.zoom may be
-    // null/undefined by default)
+    // XXX fitting arrays is a bit of a squeeze
     chunker.add(
       5,
       (vis, v) => {
         vis.array.set(v, algNameStr);
-        vis.array.setZoom(0.8);
+        vis.array.setZoom(0.95);
       },
       [[nodes, heuristics, minCosts, parents, finalCosts], 0]
     );

src/algorithms/controllers/dijkstra.js

@@ -117,6 +117,7 @@ export default {
         vis.graph.weighted(true);
         vis.graph.moveNodeFn(moveNode);
         vis.graph.set(edgeArray, Array.from({ length: numVertices }, (v, k) => (k + 1)),coordsArray);
+        vis.graph.setSize(0.8); // more room for arrays
       },
       [E, coords]
     );

src/algorithms/controllers/graphSearchColours.js

@@ -1,3 +1,5 @@
+import {colors as globalColors} from '../../components/DataStructures/colors';
+
 // Colors for array (..._A), graph nodes (..._N), graph edges (..._E)
 // for graph search/traversal algorithms (+ Prim's eventually)
 //
@@ -9,16 +11,20 @@
 // XXX not sure how this interacts with color perception options -
 // doesn't seem to work like this - should figure out how it's done if
 // it's still supported
+// Moving towars something less crazy.  Arrays now accept integers (and
+// strings) plus we import some global color names; not consistent for graphs
+// yet.
 export const colors = {
-    FRONTIER_A: '0',  // Blue
+    // FRONTIER_A: '0',  // Blue
+    FRONTIER_A: globalColors.sky,
     FRONTIER_N: 4,  // Blue
     FRONTIER_E: 4,  // Blue
-    N_M_E: 2, // edge between n and m
-    FINALISED_A: '1', // Green
+    N_M_E: 3, // edge between n and m
+    FINALISED_A: globalColors.leaf,
     FINALISED_N: 1, // Green
     FINALISED_E: 1,
-    PQ_MIN_A: '1', // XXX poor color but setting colors is a mystery
+    PQ_MIN_A: globalColors.peach,
     // if we find a path to end node:
-    SUCCESS_A: '1', // Green
+    SUCCESS_A: globalColors.leaf,
     SUCCESS_E: 3,
   }

src/algorithms/controllers/heapSort.js

@@ -16,11 +16,15 @@
 // 
 // One thing that could make the code here more readable is to use
 // meaningful strings for bookmarks rather than numbers.
+// The way colors are done could also be improved - currently moving to
+// a less insane scheme so there is some consistency between colors for
+// array elements and tree/graph nodes.
 
 /* eslint-disable no-multi-spaces,indent,prefer-destructuring,brace-style */
 import GraphTracer from '../../components/DataStructures/Graph/GraphTracer';
 import ArrayTracer from '../../components/DataStructures/Array/Array1DTracer';
 import {areExpanded} from './collapseChunkPlugin';
+import {colors} from '../../components/DataStructures/colors';
 
 // k displayed only if first BuildHeap is expanded
 // Note: This is only needed in the last chunk of BuildHeap. The code
@@ -83,21 +87,21 @@ export default {
     const highlight = (vis, index, primaryColor = true) => {
       if (primaryColor) {
         vis.heap.visit(index + 1);
-        vis.array.select(index);
+        vis.array.selectColor(index, colors.apple);
       } else {
         vis.heap.select(index + 1);
-        vis.array.patch(index);
+        vis.array.selectColor(index, colors.sky);
+        // vis.array.patch(index);
       }
     };
 
     const unhighlight = (vis, index, primaryColor = true) => {
       if (primaryColor) {
         vis.heap.leave(index + 1);
-        vis.array.deselect(index);
       } else {
         vis.heap.deselect(index + 1);
-        vis.array.depatch(index);
       }
+     vis.array.deselect(index);
     };
 
     const swapAction = (b, n1, n2) => {

src/algorithms/controllers/msort_arr_bup.js

@@ -3,6 +3,7 @@
 
 import { msort_arr_bup } from '../explanations';
 import ArrayTracer from '../../components/DataStructures/Array/Array1DTracer';
+import {colors} from '../../components/DataStructures/colors';
 
 
 import {
@@ -23,11 +24,11 @@ import {
 
 const run = run_msort();
 
-const apColor = "green";   // replace with red
-const runAColor = "red";   // replace with orange
-const runBColor = "green"; // replace with blue
-const runCColor = "red";  // replace all instances of runCColor with runBColor
-const sortColor = "green";
+const apColor = colors.apple;
+const runAColor = colors.peach;
+const runBColor = colors.sky;
+const runCColor = colors.sky;  // replace all instances of runCColor with runBColor
+const sortColor = colors.leaf;
 
 
 export default {
@@ -174,6 +175,7 @@ export function run_msort() {
           if (isMergeExpanded()) {
             assignVarToA(vis, 'left', undefined, size); // ap1 replaces left
             assignVarToA(vis, 'ap1', c_ap1, size);
+            highlight(vis, c_ap1, apColor);
             assignVarToA(vis, 'mid', c_mid, size);
             assignVarToA(vis, 'right', c_right, size);
           }
@@ -187,6 +189,7 @@ export function run_msort() {
         chunker.add('ap2', (vis, c_ap2) => {
           if (isMergeExpanded()) {
             assignVarToA(vis, 'ap2', c_ap2, size);
+            highlight(vis, c_ap2, apColor);
           }
         }, [ap2]);
         chunker.add('max2', (vis, c_max2, c) => {
@@ -204,16 +207,15 @@ export function run_msort() {
         // while (ap1 <= max1 && ap2 <= max2)
         /* eslint-disable no-constant-condition */
         while (true) {
-          if (!(ap1 <= max1 && ap2 <= max2)) break;
-
           chunker.add('MergeWhile', (vis, c_ap1, c_max1, c_ap2, c_max2) => {
             highlightAPointers(vis, c_ap1, c_max1, c_ap2, c_max2, apColor);
           }, [ap1, max1, ap2, max2]);
+          if (!(ap1 <= max1 && ap2 <= max2)) break;
 
+          chunker.add('findSmaller', () => {
+            // no animation 
+          }, []);
           if (A[ap1] < A[ap2]) {
-            chunker.add('findSmaller', () => {
-              // no animation 
-            }, []);
             B[bp] = A[ap1];
             A[ap1] = undefined;
             chunker.add('copyap1', (vis, a, b, c_ap1, c_max1, c_ap2, c_max2, c_bp, c_left, c_right, c_mid, c_rlength) => {
@@ -238,9 +240,9 @@ export function run_msort() {
           }
 
           else {
-            chunker.add('findSmallerB', () => {
+            // chunker.add('findSmallerB', () => {
               // no animation
-            }, []);
+            // }, []);
             B[bp] = A[ap2];
             A[ap2] = undefined;
             chunker.add('copyap2', (vis, a, b, c_ap1, c_ap2, c_bp, c_max1, c_max2, c_left, c_right, c_mid, c_rlength) => {

src/algorithms/controllers/msort_arr_nat.js

@@ -3,6 +3,7 @@
 
 import { msort_arr_nat } from '../explanations';
 import ArrayTracer from '../../components/DataStructures/Array/Array1DTracer';
+import {colors} from '../../components/DataStructures/colors';
 
 import {
   isMergeCopyExpanded,
@@ -20,11 +21,11 @@ import {
 
 const run = run_msort();
 
-const apColor = "green";   // replace with red
-const runAColor = "red";   // replace with orange
-const runBColor = "green"; // replace with blue
-const runCColor = "red"; // replace all instances with runBColor
-const sortColor = "green";
+const apColor = colors.apple;
+const runAColor = colors.peach;
+const runBColor = colors.sky;
+const runCColor = colors.sky;  // replace all instances of runCColor with runBColor
+const sortColor = colors.leaf;
 
 export default {
   explanation: msort_arr_nat,
@@ -218,6 +219,7 @@ export function run_msort() {
             if (isMergeExpanded()) {
               assignVarToA(vis, 'left', undefined, size); // ap1 replaces left
               assignVarToA(vis, 'ap1', c_ap1, size);
+              highlight(vis, c_ap1, apColor);
             }
           }, [ap1]);
           chunker.add('max1', (vis, c_max1) => {
@@ -229,6 +231,7 @@ export function run_msort() {
           chunker.add('ap2', (vis, c_ap2) => {
             if (isMergeExpanded()) {
               assignVarToA(vis, 'ap2', c_ap2, size);
+              highlight(vis, c_ap2, apColor);
             }
           }, [ap2]);
           chunker.add('max2', (vis, c_max2) => {
@@ -247,16 +250,15 @@ export function run_msort() {
           // compare ap1 with ap2
           /* eslint-disable no-constant-condition */
           while (true) {
-            if (!(ap1 <= max1 && ap2 <= max2)) break;
-
             chunker.add('MergeWhile', (vis, c_ap1, c_max1, c_ap2, c_max2) => {
               highlightAPointers(vis, c_ap1, c_max1, c_ap2, c_max2, apColor);
             }, [ap1, max1, ap2, max2]);
+            if (!(ap1 <= max1 && ap2 <= max2)) break;
 
+            chunker.add('findSmaller', () => {
+              // no animation 
+            }, []);
             if (A[ap1] < A[ap2]) {
-              chunker.add('findSmaller', () => {
-                // no animation 
-              }, []);
               B[bp] = A[ap1];
               A[ap1] = undefined;
               chunker.add('copyap1', (vis, a, b, c_ap1, c_max1, c_ap2, c_max2, c_bp, c_left, c_right, c_mid, c_rcount) => {
@@ -283,9 +285,9 @@ export function run_msort() {
             }
 
             else {
-              chunker.add('findSmallerB', () => {
+              // chunker.add('findSmallerB', () => {
                 //no animation
-              }, []);
+              // }, []);
               B[bp] = A[ap2];
               A[ap2] = undefined;
               chunker.add('copyap2', (vis, a, b, c_ap1, c_ap2, c_bp, c_max1, c_max2, c_left, c_right, c_mid, c_rcount) => {