msort polishing, style sheets used more

Author: lee-naish

src/algorithms/controllers/msort_arr_td.js

@@ -1,7 +1,11 @@
 // Merge sort for arrays, top down
-// XXX Migrating code from Quicksort...
-// Lots of crud, including abandonned attempt at QS-style stack display 
-// Other stack display missing som refresh XXXXXXX
+// Adapted code from Quicksort...
+// XXX Could do with a good clean up!
+// Lots of crud, including abandonned attempt at QS-style stack display.
+// Uses simple stack display like DFSrec; stack vanishes inside
+// merge+copy because screen real-estate is limited and details of merge
+// are independent of stack details anyway (may cause some surprise
+// though)
 
 import { msort_arr_td } from '../explanations';
 
@@ -703,6 +707,9 @@ cur_right, c_stk) => {
         // chunk after recursive call, as above, after adjusting
         // stack frames/depth etc
       }
+        // XXX should we delete 'else' and always go to the 'Done' line
+        // even for non-trivial array segments? (might need to
+        // generalise (un)highlight code below
         else
       {
         chunker.add('Done', (vis, a, cur_left, cur_right) => {

src/algorithms/parameters/msort_arr_td.js

@@ -1,3 +1,5 @@
+// Adapted from Quicksort - could rename a few things
+
 /* eslint-disable no-unused-vars */
 import React, { useState, useEffect } from 'react';
 import FormControlLabel from '@mui/material/FormControlLabel';
@@ -41,9 +43,8 @@ function MergesortParam() {
 
 
 
-// XXX best case definitely not needed; best skip choice of cases
-// - not sure quite how currently
-  // function for choosing the type of pivot (median of three)
+// XXX best case definitely not needed; could skip choice of cases
+  // function for choosing the type of input
   const handleChange = (e) => {
     switch (e.target.name) {
       case 'sortedAsc':
@@ -148,18 +149,6 @@ function MergesortParam() {
         label="Sorted (descending)"
         className="checkbox"
       />
-      {/* create a checkbox for Median of Three */}
-      <FormControlLabel
-        control={
-          <BlueRadio
-            checked={QSCase.bestCase}
-            onChange={handleChange}
-            name="bestCase"
-          />
-        }
-        label="Ideal"
-        className="checkbox"
-      />
       {/* render success/error message */}
       {message}
     </>

src/algorithms/pseudocode/msort_arr_td.js

@@ -15,12 +15,12 @@ Mergesort(A, left, right) \\B Main
     \\In{
         mid <- (left + right)/2 \\B mid
         sort first half, A[left]..A[mid]    \\Ref MergesortL
-        \\Expl{ Sort elements in the first half of the array segment
+        \\Expl{ Sort elements in the first half of the array segment.
         \\Expl}
         \\Note{ This should be animated in one step if not expanded
         \\Note}
         sort second half, A[mid+1]..A[right]    \\Ref MergesortR
-        \\Expl{ Sort elements in the second half of the array segment
+        \\Expl{ Sort elements in the second half of the array segment.
         \\Expl}
         \\Note{ This should be animated in one step if not expanded
         \\Note}
@@ -58,13 +58,17 @@ MergeCopy
     Merge(A, left, mid, right, B) \\Ref Merge
     \\Expl{ Takes two sorted array segments, A[left..mid] and A[mid+1..right],
         and merges them together to form a single sorted array segment
-        in temporary array B[left..right]
+        in temporary array B[left..right].
+        The animation shows values being deleted from A since they
+        are no longer needed (they are actually still there).
     \\Expl}
     Copy merged elements back to A \\B copyBA
     \\Expl{ Copy elements from B[left..right] back to A[left..right].
         Copying can be reduced by merging
         from A to B and from B to A in alternate levels of recursion -
         a slightly more tricky coding.
+        The animation shows values being deleted from B since they
+        are no longer needed (they are actually still there).
     \\Expl}
     \\Note{ Might be better to move above to overview.
     \\Note}
@@ -75,37 +79,39 @@ Merge
     ap1 <- left \\B ap1
     max1 <- mid \\B max1
     \\Expl{ ap1 scans through the segment A[left..mid], "pointing at" or
-        indexing elements of this array segment we copy from
+        indexing elements of this array segment we copy from.
     \\Expl}
     ap2 <- max1+1 \\B ap2
     max2 <- right \\B max2
     \\Expl{ ap2 scans through the segment A[mid+1..right], "pointing at" or
-        indexing elements of this array segment we copy from
+        indexing elements of this array segment we copy from.
     \\Expl}
     bp <- ap1 \\B bp
     \\Expl{ bp scans through the segment B[left..right], "pointing at" or
-        indexing elements of this array segment we copy to
+        indexing elements of this array segment we copy to.
     \\Expl}
     while both A segments still have elements to copy \\Ref MergeWhile
     \\Expl{ we scan through both A segments from left to right by 
-        incrementing ap1 and ap2, copying to B as we go
+        incrementing ap1 and ap2, copying to B as we go.
+        The animation shows values being deleted from A since they
+        are no longer needed (they are actually still there).
     \\Expl}
     \\In{
         copy the smaller A element, increment its pointer and bp \\Ref CopySmaller
-        \\Expl{ The smaller of A[ap1] and A[ap2] is copied to B[bp]
+        \\Expl{ The smaller of A[ap1] and A[ap2] is copied to B[bp].
         \\Expl}
     \\In}
     copy any remaining elements from A to B \\Ref CopyRest
     \\Expl{ One of the A segments will have been completely copied;
-        the other has uncopied elements
+        the other has uncopied elements.
     \\Expl}
 \\Code}
 
 \\Code{
 MergeWhile
     while ap1 <= max1 and ap2 <= max2 \\B MergeWhile
     \\Expl{ Elements up to max1/max2 must be copied; those before
-        ap1/ap2 have been copied already
+        ap1/ap2 have been copied already.
     \\Expl}
 \\Code}
 
@@ -114,6 +120,9 @@ CopySmaller
     if A[ap1] < A[ap2] \\B findSmaller
     \\In{
         B[bp] <- A[ap1] \\B copyap1
+        \\Expl{ The animation shows the value being deleted from A[ap1] since it
+            is no longer needed (it is actually still there).
+        \\Expl}
         ap1 <- ap1+1    \\B ap1++
         bp <- bp+1      \\B bp++
         \\Note{ Clearer to duplicate this in then and else branches(?)
@@ -122,6 +131,9 @@ CopySmaller
     else
     \\In{
         B[bp] <- A[ap2] \\B copyap2
+        \\Expl{ The animation shows the value being deleted from A[ap2] since it
+            is no longer needed (it is actually still there).
+        \\Expl}
         ap2 <- ap2+1    \\B ap2++
         bp <- bp+1      \\B bp++_2
     \\In}
@@ -134,7 +146,10 @@ CopyRest
     \\Note}
     copy A[ap2..max2] to B[bp..] \\B CopyRest2
     \\Expl{ One of these copy steps will do nothing because one of the
-        A segments will be empty
+        A segments will be empty. If ap2 is not shown in the animation
+        it is max2+1, off the end of the array.
+        The animation shows values being deleted from A since they
+        are no longer needed (they are actually still there).
     \\Expl}
 \\Code}
 

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

@@ -95,6 +95,7 @@ class Array1DRenderer extends Array2DRenderer {
           transform: `scale(${this.zoom})`,
         }}
       >
+      <tbody>
       <motion.div animate={{ scale: this.zoom }} className={switchmode(mode())}>
         {/* Values */}
         {data.map((row, i) => (
@@ -107,18 +108,6 @@ class Array1DRenderer extends Array2DRenderer {
               justifyContent: 'center',
             }}
           >
-            {/* 
-                Pivot Line Rendering:
-                - This JSX code renders the visual line over the pivot element in 1D arrays, e.g., QuickSort.
-                - The feature is currently disabled. To re-enable:
-                  1. Uncomment the following JSX.
-                  2. Uncomment the `.pivotLine` style in Array1DRenderer.module.scss.
-                */}
-
-            {/* 
-                {row.filter((col) => col.variables.includes('pivot')).map((col)=><div className={styles.pivotLine} style={{
-                  bottom: `max(var(--array-1d-minimum-height), ${this.toString(scaleY(col.value))}vh)`}}/>)}
-                */}
             {row.map((col) => (
               <motion.div
                 layout
@@ -153,7 +142,7 @@ class Array1DRenderer extends Array2DRenderer {
         ))}
 
         <div>
-          {/* Indexes */}
+          {/* Indexes  XXX maybe avoid for arrayB in Merge sort? */}
           <div
             className={styles.row}
             style={{ display: 'flex', justifyContent: 'space-between' }}
@@ -221,15 +210,16 @@ class Array1DRenderer extends Array2DRenderer {
           )}
         </div>
       </motion.div>
-          {algo === 'msort_arr_td' && listOfNumbers && (
-            <caption
-              className={algo === 'msort_arr_td' ? styles.captionmsort_arr_td : ''}
-              kth-tag="msort_arr_td_caption"
-            >
-               <div style={{float:"right"}}>Call stack (left,right):&emsp; {listOfNumbers}&emsp;&emsp; </div>
-            </caption>
-          )}
-</table>
+      </tbody>
+      {algo === 'msort_arr_td' && listOfNumbers && (
+        <caption
+          className={algo === 'msort_arr_td' ? styles.captionmsort_arr_td : ''}
+          kth-tag="msort_arr_td_caption"
+        >
+           <div style={{float:"right"}}>Call stack (left,right):&emsp; {listOfNumbers}&emsp;&emsp; </div>
+        </caption>
+      )}
+      </table>
     );
   }
 }

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

@@ -171,34 +171,31 @@
     }
   }
 }
-.captionDFS {
-  caption-side: bottom;
-}  
 
-.captionDFSrec {
-  caption-side: bottom;
-}  
-
-.captionmsort_arr_td {
+.captionDFS {
   caption-side: bottom;
-}  
-
-.captionmsort_arr_td {
+  text-align: right;
+  margin-top: -12px; // need to squeeze a bit
   color: var(--array-2d-row-col-value-color); 
-}
+}  
 
 .captionBFS {
   caption-side: bottom;
-} 
-
-.captionDFS {
+  text-align: center;
+  margin-top: -12px; // need to squeeze a bit
   color: var(--array-2d-row-col-value-color); 
 }
 
 .captionDFSrec {
+  caption-side: bottom;
+  margin-top: -12px; // doesn't hurt to squeeze a bit like above
+  text-align: right;
   color: var(--array-2d-row-col-value-color); 
 }
 
-.captionBFS {
+// redefined in 1D array
+.captionmsort_arr_td {
+  caption-side: bottom;
+  text-align: right;
   color: var(--array-2d-row-col-value-color); 
-}
+}  

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

@@ -290,23 +290,23 @@ class Array2DRenderer extends Renderer {
             className={algo === 'DFS' ? styles.captionDFS : ''}
             kth-tag="dfs_caption"
           >
-             <div style={{float:"right"}}>Nodes (stack):&emsp; {listOfNumbers}&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp; </div>
+             Nodes (stack):&emsp; {listOfNumbers}&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;
           </caption>
         )}
         {algo === 'DFSrec' && (
           <caption
             className={algo === 'DFSrec' ? styles.captionDFSrec : ''}
             kth-tag="dfsrec_caption"
           >
-             <div style={{float:"right"}}>Call stack (n,p):&emsp; {listOfNumbers}&emsp;&emsp; </div>
+             Call stack (n,p):&emsp; {listOfNumbers}&emsp;&emsp;
           </caption>
         )}
         {algo === 'msort_arr_td' && (
           <caption
             className={algo === 'msort_arr_td' ? styles.captionmsort_arr_td : ''}
             kth-tag="msort_arr_td_caption"
           >
-             <div style={{float:"right"}}>Call stack (n,p):&emsp; {listOfNumbers}&emsp;&emsp; </div>
+             Call stack (n,p):&emsp; {listOfNumbers}&emsp;&emsp;
           </caption>
         )}
         {algo === 'BFS' && (