QS + REX colors + fixes mostly

Some corner cases fixed. SRS minor improvements

Author: lee-naish

src/algorithms/controllers/MSDRadixSort.js

@@ -37,7 +37,8 @@ const VIS_VARIABLE_STRINGS = {
   i_gt_n: 'i==n+1',
   j_eq_0: 'j==0',
   left: 'left',
-  right: 'right'
+  right: 'right',
+  right_eq_0: 'right==0'
 };
 
 const MSD_BOOKMARKS = {
@@ -172,6 +173,9 @@ export default {
         chunker.add(bookmark, refreshStack, args_array, depth)
       }
 
+      // we use a global flag in case we scan through the whole partition 
+      // and stop at the end without finding the mask bit we are looking
+      // for
       const refreshStack = (vis, cur_real_stack, cur_finished_stack_frames, cur_i, cur_j, prev_i, prev_j, left, right, cur_depth, checkingLeft, maxIndex, arr, mask) => {
         // If we fall off the start/end of the array we just use the
         // first/last element and give the actual value of j/i
@@ -194,21 +198,6 @@ export default {
         assert(vis.array);
         assert(cur_real_stack && cur_finished_stack_frames);
 
-        // conditions for i,j display moved elsewhere
-/*
-        if (!isPartitionExpanded()) {
-          // j should not show up in vis if partition is collapsed
-          cur_j = undefined;
-          cur_j_too_low = undefined;
-        }
-
-        if (!isPartitionExpanded() && !isRecursionExpanded()) {
-          // i should not show up in vis if partition + recursion is collapsed
-          cur_i = undefined;
-          cur_i_too_high = undefined;
-        }
-*/
-
         vis.array.setStackDepth(cur_real_stack.length);
         vis.array.setStack(
           deriveStack(cur_real_stack, cur_finished_stack_frames, cur_i, cur_j, cur_depth)
@@ -225,11 +214,7 @@ export default {
           unhighlight(vis, maxIndex)
           updateBinary(vis, 0)
 	}
-        if (cur_i == left && cur_j === right && prev_i === undefined) {
-          // init, before partition
-          highlight(vis, cur_i)
-          highlight(vis, cur_j)
-        } else if (cur_i !== undefined && tmp_j === undefined && prev_i !== undefined) {
+        if (cur_i !== undefined && tmp_j === undefined && prev_i !== undefined) {
           // just before first recursive call
           if (i <= right)
             vis.array.selectColor(prev_i, partRColor)
@@ -238,29 +223,38 @@ export default {
           for (let k = cur_i; k <= right; k++)
             vis.array.deselect(k);
         } else if (checkingLeft) {
-          if (prev_i !== undefined && prev_i !== cur_j)
-            for (let k = prev_i; k < cur_i && k <= right; k++)
+          // note i can fall off RHS of array...
+          if (prev_i !== undefined && prev_i !== cur_j) {
+            let real_i = cur_i;
+            if (cur_i === undefined)
+              real_i = right + 1;
+            for (let k = prev_i; k < real_i && k <= right; k++)
               vis.array.selectColor(k, partLColor)
-            if (cur_i <  cur_j)
-              highlight(vis, cur_i)
-            else if (cur_i <= right)
+            if (cur_i !== undefined && cur_i <= right && (arr[cur_i] >> mask & 1) === 1)
               vis.array.selectColor(cur_i, partRColor)
+          }
           if (arr && cur_i !== undefined)
             updateBinary(vis, arr[cur_i])
         } else {
+          // note j can fall off LHS of array...
           if (prev_j !== undefined && prev_j !== cur_i)
             for (let k = prev_j; k >= cur_j && k >= cur_i; k--)
               vis.array.selectColor(k, partRColor)
-          if (cur_j !== undefined && cur_j > cur_i) { // might have fallen off array
-            highlight(vis, cur_j);
+          if (prev_j !== undefined && cur_j !== undefined && cur_j > cur_i) {
+            vis.array.selectColor(cur_j, partLColor);
             // XXX probably best avoid updateBinary at swap
             updateBinary(vis, arr[cur_j])
           }
         }
-        if (left < A.length)
+        if (left < A.length) // shouldn't happen with initial mask choice
           assignVariable(vis, VIS_VARIABLE_STRINGS.left, left);
-        if (right >= 0)
+        if (right >= 0) {
           assignVariable(vis, VIS_VARIABLE_STRINGS.right, right);
+          assignVariable(vis, VIS_VARIABLE_STRINGS.right_eq_0, undefined);
+        } else {
+          assignVariable(vis, VIS_VARIABLE_STRINGS.right, undefined);
+          assignVariable(vis, VIS_VARIABLE_STRINGS.right_eq_0, 0);
+        }
         if (isPartitionExpanded() || isRecursionExpanded()) {
           assignVariable(vis, VIS_VARIABLE_STRINGS.i_left_index, cur_i);
           assignVariable(vis, VIS_VARIABLE_STRINGS.i_gt_n, cur_i_too_high);
@@ -384,19 +378,19 @@ arr],
 
         partitionChunkerWrapper(MSD_BOOKMARKS.set_i)
         // partitionChunkerWrapper(MSD_BOOKMARKS.set_j)
-        while (i <= j) {
+        while (i < j) {
           prev_i = i; // save prev value for unhighlighting
           prev_j = j;
           // Build the left group until it reaches the mask (find the big element)
           leftCheck = true
-          while (i <= right && ((arr[i] >> mask & 1)) === 0) {
+          while (i <= j && (arr[i] >> mask & 1) === 0) {
             // partitionChunkerWrapper(MSD_BOOKMARKS.partition_left)
             i++
           }
           partitionChunkerWrapper(MSD_BOOKMARKS.partition_left)
           // Build the right group until it fails the mask (find the small element)
           leftCheck = false
-          while (j >= left && ((arr[j] >> mask & 1)) === 1) {
+          while (j > i && (arr[j] >> mask & 1) === 1) {
             // partitionChunkerWrapper(MSD_BOOKMARKS.partition_right)
             j--
           }

src/algorithms/controllers/quickSort_shared.js

@@ -28,6 +28,14 @@ import {
   areExpanded,
 } from './collapseChunkPlugin';
 
+import {colors} from '../../components/DataStructures/colors';
+const partLColor = colors.peach;
+const partRColor = colors.sky;
+const pivotColor = colors.leaf;
+const sortedColor = colors.stone;
+const highlightColor = colors.apple; // was for i,j in partition,...
+
+
 export function isPartitionExpanded() {
   return areExpanded(['Partition']);
 }
@@ -85,6 +93,7 @@ const QS_BOOKMARKS = {
   MEDIAN3_set_pivot_to_value_at_array_indx_right_minus_1: 5, 
   SHARED_while_i_less_j: 6,
   SHARED_incri_i_until_array_index_i_greater_eq_pivot: 7,
+  SHARED_incri_j_until: 7, // shortened name
   SHARED_decri_j_until: 8, // shortened name
   SHARED_if_j_greater_i: 9,
   SHARED_swap_array_i_j_vals: 10,
@@ -354,12 +363,15 @@ export function run_QS(is_qs_median_of_3) {
           [a[n1], a[n2]] = [a[n2], a[n1]]
 
           chunker.add(bookmark,
-            (vis, _n1, _n2, cur_real_stack, cur_finished_stack_frames, cur_i, cur_j, cur_pivot_index, cur_depth) => {
+            (vis, _n1, _n2, cur_real_stack, cur_finished_stack_frames,
+cur_i, cur_j, cur_pivot_index, cur_depth, bm) => {
 
               vis.array.swapElements(_n1, _n2);
-              refresh_stack(vis, cur_real_stack, cur_finished_stack_frames, cur_i, cur_j, cur_pivot_index, cur_depth)
+              refresh_stack(vis, cur_real_stack, cur_finished_stack_frames, cur_i, cur_j, cur_pivot_index, cur_depth);
+              if (bm == QS_BOOKMARKS.SHARED_swap_pivot_into_position)
+                vis.array.selectColor(_n1, sortedColor);
             },
-            [n1, n2, real_stack, finished_stack_frames, i, j, pivot_index, depth],
+            [n1, n2, real_stack, finished_stack_frames, i, j, pivot_index, depth, bookmark],
           depth);
         }
 
@@ -387,15 +399,33 @@ export function run_QS(is_qs_median_of_3) {
 
           const mid = Math.floor((left + right) / 2);
 
+          // here we color the three potential pivot elements according
+          // to their final positions after swapping, so the colors
+          // stick to the elements and will be in the right order after
+          // swaps.  We duplicate the if-then-elses but just change
+          // vars, not array elements.
+          let finalleft = left;
+          let finalmid = mid;
+          let finalright = right;
+          if (a[finalleft] > a[finalmid]) {
+            [finalleft, finalmid] = [finalmid, finalleft];
+          }
+          if (a[finalmid] > a[finalright]) {
+            [finalmid, finalright] = [finalright, finalmid];
+            if (a[finalleft] > a[finalmid]) {
+              [finalmid, finalleft] = [finalleft, finalmid];
+            }
+          }
+
+
           // assigning the pivot as the midpoint calculated above
-          chunker_add_if(QS_BOOKMARKS.MEDIAN3_mid_to_middle_index, (vis, cur_mid, cur_left, cur_right) => {
-            highlight(vis, cur_mid, false);
-            // highlight seems to increment counter rather than set flag
-            if (cur_left !== cur_mid)
-              highlight(vis, cur_left, false);
-            highlight(vis, cur_right, false);
+          chunker_add_if(QS_BOOKMARKS.MEDIAN3_mid_to_middle_index, (vis, fin_mid, fin_left, fin_right) => {
+            vis.array.selectColor(fin_mid, pivotColor);
+            vis.array.selectColor(fin_left, partLColor);
+            vis.array.selectColor(fin_right, partRColor);
+            // XXX check/fix above for small partitions
           },
-          [mid, left, right]); 
+          [finalmid, finalleft, finalright]); 
 
           chunker_add_if(QS_BOOKMARKS.MEDIAN3_first_if_A_idx_left_greater_A_idx_right); 
           if (a[left] > a[mid]) {
@@ -421,11 +451,11 @@ export function run_QS(is_qs_median_of_3) {
           pivot_index = right-1;
           chunker_add_if(QS_BOOKMARKS.MEDIAN3_set_pivot_to_value_at_array_indx_right_minus_1, 
             (vis, cur_right, cur_left, cur_real_stack, cur_finished_stack_frames, cur_i, cur_j, cur_pivot_index, cur_depth) => {
-            unhighlight(vis, cur_right, false);
-            unhighlight(vis, cur_right -1, false);
+            // unhighlight(vis, cur_right, false);
+            // unhighlight(vis, cur_right -1, false);
             // unhighlight seems to decrement counter rather than unset flag
-            if (cur_left !== cur_right -1)
-              unhighlight(vis, cur_left, false);
+            // if (cur_left !== cur_right -1)
+              // unhighlight(vis, cur_left, false);
 
             refresh_stack(vis, cur_real_stack, cur_finished_stack_frames, cur_i, cur_j, cur_pivot_index, cur_depth) // refresh stack to show pivot_index
           },
@@ -439,6 +469,7 @@ export function run_QS(is_qs_median_of_3) {
             QS_BOOKMARKS.RIGHT_P_set_pivot_to_value_at_array_indx_right,
             (vis, cur_right, cur_left, cur_real_stack, cur_finished_stack_frames, cur_i, cur_j, cur_pivot_index, cur_depth) => {
             refresh_stack(vis, cur_real_stack, cur_finished_stack_frames, cur_i, cur_j, cur_pivot_index, cur_depth) // refresh stack to show pivot_index
+            vis.array.selectColor(cur_pivot_index, pivotColor);
          },
           [right, left, real_stack, finished_stack_frames, i, j, pivot_index, depth]);
             //refresh_stack);  
@@ -478,20 +509,37 @@ export function run_QS(is_qs_median_of_3) {
           do {
             i += 1;
 
+            let iColor;
+            if (a[i] < pivot_value())
+              iColor = partLColor;
+            else
+              iColor = partRColor;
             chunker_add_if(
-              QS_BOOKMARKS.SHARED_incri_i_until_array_index_i_greater_eq_pivot,
-              refresh_stack);
+              QS_BOOKMARKS.SHARED_incri_j_until,
+              (vis, cur_real_stack, cur_finished_stack_frames, cur_i, cur_j, cur_pivot_index, cur_depth) => {
+                  refresh_stack(vis, cur_real_stack, cur_finished_stack_frames, cur_i, cur_j, cur_pivot_index, cur_depth);
+                  vis.array.selectColor(cur_i, iColor);
+              });
 
           } while (a[i] < pivot_value());
 
           do {
             j -= 1;
 
+            let jColor;
+            if (i <= j && pivot_value() < a[j])
+              jColor = partRColor;
+            else
+              jColor = partLColor;
             chunker_add_if(
               QS_BOOKMARKS.SHARED_decri_j_until,
-              refresh_stack);
+              (vis, cur_real_stack, cur_finished_stack_frames, cur_i, cur_j, cur_pivot_index, cur_depth) => {
+                  refresh_stack(vis, cur_real_stack, cur_finished_stack_frames, cur_i, cur_j, cur_pivot_index, cur_depth);
+                  if (cur_j >= left) // XXX pass in left?
+                    vis.array.selectColor(cur_j, jColor);
+              });
 
-          } while (i <= j && pivot_value() < a[j]);
+          } while (i < j && pivot_value() < a[j]);
 
 
           chunker_add_if(QS_BOOKMARKS.SHARED_if_j_greater_i);
@@ -507,12 +555,14 @@ export function run_QS(is_qs_median_of_3) {
         swapAction(QS_BOOKMARKS.SHARED_swap_pivot_into_position, i,
           is_qs_median_of_3 ? right-1 : right
         );
-
+        // XXX best make pivot sorted above and delete next chunk?
+/*
         chunker_add_if(
           QS_BOOKMARKS.SHARED_swap_pivot_into_position,
           (vis, cur_real_stack, cur_finished_stack_frames, cur_i, cur_j, cur_pivot_index, cur_depth) => {
             vis.array.sorted(cur_pivot_index);
         });
+*/
 
         return [i, a]; // Return [pivot location, array partition_num_array]
       }
@@ -543,15 +593,19 @@ export function run_QS(is_qs_median_of_3) {
         // is a chunk at this recursion level as the first chunk in the
         // collapsed code for the recursive call
         // We no longer want to display 'pivot' or 'j' but want 'i'
+        // (we use pivot_index but keep pivot for deselect)
         let pivot_index = undefined;
         let j = undefined;
         let i = pivot;
         chunker.add(QS_BOOKMARKS.SHARED_pre_left,
-            (vis, cur_right, cur_left, cur_real_stack, cur_finished_stack_frames, cur_i, cur_j, cur_pivot_index, cur_depth) => {
+            (vis, cur_right, cur_left, cur_real_stack, cur_finished_stack_frames, cur_i, cur_j, cur_pivot_index, cur_depth, old_pivot) => {
             refresh_stack(vis, cur_real_stack,
 cur_finished_stack_frames, cur_i, cur_j, cur_pivot_index, cur_depth) // refresh shows i
+           for (let i = cur_left; i <= cur_right; i++)
+             if (i !== old_pivot)
+               vis.array.deselect(i);
          },
-          [right, left, real_stack, finished_stack_frames, i, j, pivot_index, depth], depth);
+          [right, left, real_stack, finished_stack_frames, i, j, pivot_index, depth, pivot], depth);
 
         QuickSort(a, left, pivot - 1, depth + 1);
 

src/algorithms/controllers/straightRadixSort.js

@@ -353,13 +353,14 @@ export default {
             [nodes, bits]
         );
 
+        let maxIndex = A.indexOf(savedMax);
         chunker.add(SRS_BOOKMARKS.max_number,
-            (vis, bits, max) => {
-                // XXX could highlight max in array also?
+            (vis, bits, max, maxI) => {
                 vis.mask.setMaxBits(bits);
                 updateBinary(vis, max);
+                vis.array.selectColor(maxI, highlightColor);
             },
-            [bits, savedMax]
+            [bits, savedMax, maxIndex]
         );
 
         for (let k = 0; k < bits / RADIX_BITS; k++) {

src/algorithms/pseudocode/MSDRadixSort.js

@@ -82,15 +82,17 @@ while i < j \\B 303
         if we use "break" or similar to exit from this loop.
 \\Expl}
 \\In{
-    Repeatedly increment i until i >= j or A[i] has 1 as the mask bit \\B 304
+    Increment i until the mask bit of A[i] = 1 or i >= j \\B 304
     \\Expl{ Scan right looking for a "large" element that is out of
         place (mask bit is one). Bitwise "and" between A[i] and mask can be used to
         extract the desired bit.
+        Note we do the tests before incrementing i.
     \\Expl}
-    Repeatedly decrement j until j <= i or A[j] has 0 as the mask bit \\B 305
+    Decrement j until the mask bit of A[j] = 0 or j <= i \\B 305
     \\Expl{ Scan left looking for a "small" element that is out of
         place (mask bit is zero). Bitwise "and" between A[i] and mask can be used to
         extract the desired bit.
+        Note we do the tests before decrementing j.
     \\Expl}
     if i < j \\B 309
     \\Expl{ If the indices cross, we exit the loop.

src/algorithms/pseudocode/quickSort.js

@@ -80,7 +80,7 @@ Set index i at left the of array segment and j at the right    \\Ref init_iAndj
 stopping at "small" elements (less than or equal to the pivot).
 \\Expl}
 while i < j \\B 6
-\\Expl{  When the indices cross, all the large elements at the left of
+\\Expl{  When the indices meet/cross, all the large elements at the left of
         the array segment have been swapped with small elements from the
         right of the array segment. The coding here can be simplified 
         if we use "break" or similar to exit from this loop.
@@ -91,12 +91,14 @@ while i < j \\B 6
             performance when there are many equal elements and because 
             the pivot is in A[right] this also acts as a sentinel, so 
             we don't increment beyond the right of the array segment.
+            Note we increment i before the tests.
     \\Expl}
-    Repeatedly decrement j until A[j] <= pivot or j < i \\B 8
+    Repeatedly decrement j until A[j] <= pivot or j <= i \\B 8
     \\Expl{  Stopping at elements equal to the pivot results in better
             performance when there are many equal elements. If the 
             indices cross we exit the outer loop; this also stops us 
             decrementing beyond the left of the array segment.
+            Note we decrement j before the tests.
     \\Expl}
     if j > i \\B 9
     \\Expl{  If the indices cross, we exit the loop.

src/components/DataStructures/Array/Array1DRenderer/Array1DRenderer.module.scss

@@ -185,9 +185,9 @@
 
             .stackSubElement {
                 transition-duration: 0.1s;
-                --j-section: rgb(58, 177, 167);
-                --i-section: rgb(28, 185, 41);
-                --p-section: rgb(176, 25, 187); // pink pivot
+                --j-section: var(--sky);
+                --p-section: var(--leaf);
+                --i-section: var(--peach);
             }
         }