straight radix sort poppers done

Some instructions fixed/improved

Author: lee-naish

src/algorithms/controllers/straightRadixSort.js

@@ -2,8 +2,13 @@
 import ArrayTracer from '../../components/DataStructures/Array/Array1DTracer';
 import MaskTracer from '../../components/DataStructures/Mask/MaskTracer';
 import { areExpanded } from './collapseChunkPlugin';
+import { createPopper } from '@popperjs/core';
 
-const BITS = 2;
+// radix must be a power of two; we use radix 4 here but code should work
+// with another radix except vis.mask.setAddBase4() would need to be
+// generalised and that call deleted if radix = 2
+const RADIX_BITS = 2;
+const RADIX = 1 << RADIX_BITS;
 
 const SRS_BOOKMARKS = {
     radix_sort: 1,
@@ -84,9 +89,31 @@ export default {
     run(chunker, { nodes }) {
         let A = [...nodes];
         const n = A.length;
+        // Stuff for poppers, copied from MSDRadixSort.js - search for
+        // POPPERS: in that code for more details, though it's done
+        // slightly differently here:
+        // The first time the first chunk is called, poppers are created
+        // (after a delay - see MSDRadixSort.js).  Subsequent times the
+        // first chunk is called we reset the innerHTML so the contents
+        // is correct (it may have changed during execution).
+        // Similarly, when the temp array is copied back to A we update
+        // the innerHTML.
+        let floatingBoxes = new Array(n); // XXX popper instances (rename)
+        let DELAY_POPPER_CREATE = 700;
+        let DELAY_POPPER_RESET = 800;
+        let DELAY_POPPER_UPDATE = 800;
+
+        let bits; // number of bits used (depends on max data value)
+
+        // poppers show binary plus whatever radix we use
+        // XXX if radix === 2, best avoid duplication
+        const popperContent = (n) => {
+            return n.toString(2).padStart(bits, "0") + "<br>"
+                + n.toString(RADIX).padStart(bits/RADIX_BITS, "0");
+        }
 
-        const countingSort = (A, k, n, bits) => {
-            const count = Array.apply(null, Array(1 << bits)).map(() => 0);
+        const countingSort = (A, k, n, radixBits) => {
+            const count = Array.apply(null, Array(1 << radixBits)).map(() => 0);
             let lastBit = -1;
 
             chunker.add(SRS_BOOKMARKS.zero_counts,
@@ -118,7 +145,7 @@ export default {
                     [i, lastBit, count]
                 );
 
-                const bit = bitsAtIndex(A[i], k, bits);
+                const bit = bitsAtIndex(A[i], k, radixBits);
                 count[bit]++;
 
                 chunker.add(SRS_BOOKMARKS.add_to_count,
@@ -216,7 +243,7 @@ export default {
                     },
                     [num, i, bit, count, sortedA]
                 );
-                bit = bitsAtIndex(num, k, bits);
+                bit = bitsAtIndex(num, k, radixBits);
                 count[bit]--;
                 chunker.add(SRS_BOOKMARKS.dec_count,
                     (vis, num, i, bit, count, sortedA) => {
@@ -242,62 +269,101 @@ export default {
             }
 
             chunker.add(SRS_BOOKMARKS.copy,
-                (vis, array, n, countLength) => {
+                (vis, array, n, countLength, bits) => {
                     setArray(vis.array, array);
 
                     if (isCountExpanded()) {
                         setArray(vis.tempArray, Array.apply(null, Array(n)).map(() => undefined));
                         setArray(vis.countArray, Array.apply(null, Array(countLength)).map(() => undefined));
                     }
+                    // update contents of all poppers
+                    setTimeout( () => {
+                      for (let idx = 0; idx < array.length; idx++) {
+                        const popper = document.getElementById('float_box_' + idx);
+                        popper.innerHTML = popperContent(array[idx]);
+                      }
+                    }, DELAY_POPPER_UPDATE);
                 },
-                [sortedA, n, count.length]
+                [sortedA, n, count.length, bits]
             );
 
             return sortedA;
         };
 
         let maxNumber = Math.max(...A);
-        let maxBit = -1;
+        let savedMax = maxNumber;
+        let maxBit = 0;
 
         while (maxNumber > 0) {
             maxNumber = Math.floor(maxNumber / 2);
             maxBit++;
         }
 
-        let bits = 1;
-
-        while (bits < maxBit) {
-            bits *= 2;
-        }
+        bits = maxBit + maxBit % RADIX_BITS; // bits is multiple of radix
+        floatingBoxes.fill(null); // poppers: see MSDRadixSort.js
 
         chunker.add(SRS_BOOKMARKS.radix_sort,
-            (vis, array) => {
+            (vis, array, bits) => {
+                // XXX assumes radix 4
                 vis.mask.setAddBase4(true); // add Base 4 display
                 setArray(vis.array, array);
 
                 if (isCountExpanded()) {
-                    setArray(vis.countArray, Array.apply(null, Array(1 << BITS)).map(() => undefined));
+                    setArray(vis.countArray, Array.apply(null, Array(1 << RADIX_BITS)).map(() => undefined));
                     setArray(vis.tempArray, Array.apply(null, Array(n)).map(() => undefined));
                 }
+                // create poppers or reset poppers if they already exist
+                for (let idx = 0; idx < array.length; idx++) {
+                  if (floatingBoxes[idx] === null) {
+                    setTimeout( () => {
+                      const popper = document.getElementById('float_box_' + idx);
+                      const slot = document.getElementById('chain_' + idx);
+                      floatingBoxes[idx] =  createPopper(slot, popper, {
+                          placement: "right-start",
+                          strategy: "fixed",
+                          modifiers: [
+                              {
+                                  removeOnDestroy: true, // doesn't work well?
+                                  name: 'preventOverflow',
+                                  options: {
+                                    // XXX popper_boundary not defined for 1D
+                                    // array - maybe it should be??
+                                    boundary: document.getElementById('popper_boundary'),
+                                  },
+                              },
+                          ]
+                      });
+                      popper.innerHTML = popperContent(array[idx]);
+                    }, DELAY_POPPER_CREATE);
+                  } else {
+                    setTimeout( () => {
+                      const popper = document.getElementById('float_box_' + idx);
+                      popper.innerHTML = popperContent(array[idx]);
+                      floatingBoxes[idx].forceUpdate();
+                    }, DELAY_POPPER_RESET)
+                  }
+                }
             },
-            [nodes]
+            [nodes, bits]
         );
 
         chunker.add(SRS_BOOKMARKS.max_number,
-            (vis, bits) => {
+            (vis, bits, max) => {
+                // XXX could highlight max in array also?
                 vis.mask.setMaxBits(bits);
+                updateBinary(vis, max);
             },
-            [bits]
+            [bits, savedMax]
         );
 
-        for (let k = 0; k < bits / BITS; k++) {
+        for (let k = 0; k < bits / RADIX_BITS; k++) {
             chunker.add(SRS_BOOKMARKS.counting_sort_for_loop,
                 vis => {
-                    updateMask(vis, k, BITS);
+                    updateMask(vis, k, RADIX_BITS);
                 }
             );
 
-            A = countingSort(A, k, n, BITS);
+            A = countingSort(A, k, n, RADIX_BITS);
 
             // chunker.add(SRS_BOOKMARKS.counting_sort);
         }

src/algorithms/instructions/index.js

@@ -6,7 +6,7 @@ const KEY_BACK = 'BACK';
 const KEY_FORWARD = 'FORWARD';
 const KEY_SEARCH = 'SEARCH';
 const KEY_PROGRESS = 'PROGRESS';
-const KEY_SORT = 'SORT';
+const KEY_SORT = 'RESET/SORT'; // XXX change more algs to RESET
 const KEY_LOAD = 'START';
 const KEY_FIND = 'FIND STRING';
 const KEY_UF_UNION = 'UNION';
@@ -98,10 +98,19 @@ allows you to pre-fill some of the table quickly.`,
 const sortInstructions = [{
   title: 'Sorting Numbers',
   content: [
-    `Click on ${KEY_CODE} on the right panel`,
-    'Enter a list of numbers in the sort parameter.',
-    `Click on ${KEY_SORT} or hit return to load the data.`,
-      PLAY_INSTRUCTIONS,
+    `Click on ${KEY_CODE} on the right panel to show the code.`,
+    PLAY_INSTRUCTIONS,
+    `The list of numbers to be sorted can be edited; click on ${KEY_SORT} or hit return to load the new data.`,
+  ],
+}];
+
+const radixSortInstructions = [{
+  title: 'Sorting Numbers',
+  content: [
+    `Click on ${KEY_CODE} on the right panel to show the code.`,
+    PLAY_INSTRUCTIONS,
+    `The list of numbers to be sorted can be edited; click on ${KEY_SORT} or hit return to load the new data.`,
+     'Hover the mouse over an element of array A to display the value in binary (and base 4 for straight radix sort).',
   ],
 }];
 
@@ -161,7 +170,7 @@ export const QSInstruction = sortInstructions;
 export const msort_arr_td = sortInstructions;
 export const msort_arr_bup = sortInstructions;
 export const msort_arr_nat = sortInstructions;
-export const RadixSortInstruction = sortInstructions;
+export const RadixSortInstruction = radixSortInstructions;
 export const msort_lista_td = sortInstructions;
 export const TCInstruction = graphInstructionsTC;
 export const Prims_oldInstruction = graphInstructions;

src/algorithms/parameters/MSDRadixSortParam.js

@@ -8,7 +8,7 @@ import PropTypes from 'prop-types';
 import { withAlgorithmParams } from './helpers/urlHelpers';
 import '../../styles/Param.scss';
 
-const DEFAULT_NODES = genRandNumList(10, 1, 100);
+const DEFAULT_NODES = genRandNumList(10, 1, 63); // limit bits by default
 const DEFAULT_MODE = 'sort';
 const MSD_RADIX_SORT = 'MSD Radix Sort';
 const MSDRS_SORT_EXAMPLE = 'Please follow the example provided: 0,1,2,3,4';

src/algorithms/parameters/StraightRadixSortParam.js

@@ -8,7 +8,7 @@ import PropTypes from 'prop-types';
 import { withAlgorithmParams } from './helpers/urlHelpers';
 import '../../styles/Param.scss';
 
-const DEFAULT_NODES = genRandNumList(10, 1, 100);
+const DEFAULT_NODES = genRandNumList(10, 1, 63); // limit bits by default
 const DEFAULT_MODE = 'sort';
 const Straight_RADIX_SORT = 'Straight Radix Sort';
 const MSDRS_SORT_EXAMPLE = 'Please follow the example provided: 0,1,2,3,4';

src/components/DataStructures/Array/Array1DRenderer/index.js

@@ -27,8 +27,7 @@ import styles from './Array1DRenderer.module.scss';
 import { classes } from '../../common/util';
 import { mode } from '../../../top/Settings';
 // Add your algo to this if you want to use the float box/popper
-// XXX add straight radix sort some time?
-const ALGOS_USING_FLOAT_BOX = ["MSDRadixSort"];
+const ALGOS_USING_FLOAT_BOX = ["MSDRadixSort", "straightRadixSort"];
 
 let modename;
 function switchmode(modetype = mode()) {