Mergesort with simple stack

Author: lee-naish

src/algorithms/controllers/msort_arr_td.js

@@ -65,8 +65,8 @@ export function isRecursionExpanded() {
 
   // eslint-disable-next-line
   const { bookmark, pseudocode, collapse } = algorithm;
-  return collapse.msort_arr_td.sort.QuicksortFirst ||
-              collapse.msort_arr_td.sort.QuicksortSecond;
+  return collapse.msort_arr_td.sort.MergesortL ||
+              collapse.msort_arr_td.sort.MergesortR;
 }
 
 // Trigger refresh of display when code is expanded/collapsed.

src/algorithms/controllers/msort_arr_tdCollapseChunkPlugin.js

@@ -3,6 +3,26 @@
 .array_1d {
     flex-shrink: 0;
 
+  .bottom_caption {
+    // added for msort_arr_td
+    caption-side: bottom;
+    text-align: center;
+    margin-top: 15px;
+    font-size: 13px;
+    color: var(--array-2d-row-col-value-color);
+    font-family: Menlo, "Liberation Mono", Courier, monospace;
+  }
+
+.captionmsort_arr_td {
+  caption-side: bottom;
+  // caption-side: top;
+  text-align: right;
+  margin-top: 70px;
+  // margin-top: 0px;
+} 
+
+
+
     .row {
         margin-bottom: m#{i}n(8px, 1vh);
         position: relative;
@@ -168,4 +188,4 @@
             font-size: 0.8em;
         }
     }
-}
+}

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

@@ -54,8 +54,9 @@ class Array1DRenderer extends Array2DRenderer {
 
   renderData() {
 
+    // listOfNumbers used for stack caption in msort_arr_td
     // eslint-disable-next-line
-    const { data, algo, stack, stackDepth } = this.props.data;
+    const { data, algo, stack, stackDepth, listOfNumbers } = this.props.data;
 
     const arrayMagnitudeScaleValue = 20; // value to scale an array e.g. so that the maximum item is 150px tall
 
@@ -83,7 +84,17 @@ class Array1DRenderer extends Array2DRenderer {
     if (!this.props.data.arrayItemMagnitudes) {
       scaleY = () => 0;
     }
+    // wrap output in table like 2D array so we can have a caption (for
+    // msort_arr_td) XXX fix indentation
     return (
+      <table
+        className={switchmode(mode())}
+        style={{
+          marginLeft: -this.centerX * 2,
+          marginTop: -this.centerY * 2,
+          transform: `scale(${this.zoom})`,
+        }}
+      >
       <motion.div animate={{ scale: this.zoom }} className={switchmode(mode())}>
         {/* Values */}
         {data.map((row, i) => (
@@ -201,14 +212,24 @@ class Array1DRenderer extends Array2DRenderer {
           )}
         </div>
         <div>
-          {stack && stack.length > 0 ? (
+          {// Quicksort stuff
+          stack && stack.length > 0 ? (
             this.maxStackDepth = Math.max(this.maxStackDepth, stackDepth),
             stackRenderer(stack, data[0].length, stackDepth, this.maxStackDepth)
           ) : (
             <div />
           )}
         </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>
     );
   }
 }

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

@@ -179,6 +179,14 @@
   caption-side: bottom;
 }  
 
+.captionmsort_arr_td {
+  caption-side: bottom;
+}  
+
+.captionmsort_arr_td {
+  color: var(--array-2d-row-col-value-color); 
+}
+
 .captionBFS {
   caption-side: bottom;
 } 

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

@@ -51,7 +51,7 @@ class Array2DRenderer extends Renderer {
   }
 
   renderData() {
-    // For DFSrec listOfNumbers is actually a list of pairs of numbers,
+    // For DFSrec+msort_arr_td listOfNumbers is actually a list of pairs of numbers,
     // or strings such as '(2,5)'
     const { data, algo, kth, listOfNumbers, motionOn, hideArrayAtIdx } =
       this.props.data;
@@ -150,7 +150,7 @@ class Array2DRenderer extends Renderer {
               }
             }
             // XXX should use style sheets for formatting stack for DFS
-            // and DFSrec
+            // and DFSrec etc
             // - currently messing about attempting to make it look
             // better and more stack-like using float (deprecated)
             return (
@@ -301,6 +301,14 @@ class Array2DRenderer extends Renderer {
              <div style={{float:"right"}}>Call stack (n,p):&emsp; {listOfNumbers}&emsp;&emsp; </div>
           </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>
+          </caption>
+        )}
         {algo === 'BFS' && (
           <caption
             className={algo === 'BFS' ? styles.captionBFS : ''}

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

@@ -226,8 +226,13 @@ class Array2DTracer extends Tracer {
     this.kth = k;
   }
 
+  // caption for arrays (undefined means no caption, [] may result in a blank
+  // caption, depending on the algorithm - there may be extra text)
   setList(array) {
-    this.listOfNumbers = array.join(', ');
+    if (array)
+      this.listOfNumbers = array.join(', ');
+    else
+      this.listOfNumbers = undefined;
   }
 
   getKth() {