fix: Too much recursion error + make sure mongo request goes through.

Too much recursion error: Use a simpler table
Make sure mongo request goes through:
- Do it before the computation +
- + put the computation inside a timeout.

lib/comparisonView.js

@@ -8,7 +8,7 @@ import { DrawGraph, removeOldSvg } from './labeledgraph';
 import { SubmitSliderButton } from "./slider";
 import { DisplayElement } from './displayElement'
 import { DisplayAsMarkdown } from './displayAsMarkdown'
-import { CreateTableWithDistances } from './findPaths'
+import { CreateTable } from './findPaths'
 import { TextAreaForJson } from "./textAreaForJson"
 import { pushToMongo } from "./pushToMongo.js"
 import { maxMergeSortSteps, expectedNumMergeSortSteps } from "./utils.js"
@@ -183,24 +183,21 @@ export default function ComparisonView({ listOfElementsForView }) {
       console.log(posList)
       console.log("result@nextStepSimple")
       console.log(result)
-      alert("Comparisons completed. Background work might take a while.")
-      setIsListOrdered(true)
-      setOrderedList(result)
 
-      return true
+      return [true, result]
     } else {
-      return false
+      return [false, result]
     }
   }
 
-  let nextStepSlider = ({ posList, binaryComparisons, sliderValue, Reasoning, element1, element2 }) => {
+  let nextStepSlider = async ({ posList, binaryComparisons, sliderValue, Reasoning, element1, element2 }) => {
     if (sliderValue < 1 && sliderValue > 0) {
       sliderValue = 1 / sliderValue;
       [element1, element2] = [element2, element1]
     }
     console.log(`posList@nextStepSlider:`)
     console.log(posList)
-    let successStatus = nextStepSimple(posList, binaryComparisons, element1, element2)
+    let [successStatus, result] = nextStepSimple(posList, binaryComparisons, element1, element2)
 
     let newQuantitativeComparison = [element1, element2, sliderValue, reasoning]
     let newQuantitativeComparisons = [...quantitativeComparisons, newQuantitativeComparison]
@@ -211,8 +208,14 @@ export default function ComparisonView({ listOfElementsForView }) {
     increaseNumSteps(numSteps + 1)
     if (successStatus) {
       let jsObject = nicelyFormatLinks(quantitativeComparisons, listOfElements)
-      pushToMongo(jsObject)
+      await pushToMongo(jsObject)
       console.log(jsObject)
+      alert("Comparisons completed. Background work might take a while, or straight-out fail")
+      setTimeout(() => {
+        // Make sure to do this after the 
+        setIsListOrdered(true)
+        setOrderedList(result)
+      }, 5000);
     }
   }
 
@@ -324,13 +327,13 @@ export default function ComparisonView({ listOfElementsForView }) {
           links={buildLinks(quantitativeComparisons)}>
         </DrawGraph>
         <div className={`inline items-center text-center mt-10 ${isListOrdered ? "" : "hidden"}`}>
-          <CreateTableWithDistances
+          <CreateTable
             isListOrdered={isListOrdered}
             orderedList={orderedList}
             listOfElements={listOfElements}
             links={buildLinks(quantitativeComparisons)}
           >
-          </CreateTableWithDistances>
+          </CreateTable>
         </div>
         <div className="w-2/12 flex justify-center mt-10">
           <button

lib/findPaths.js

@@ -8,6 +8,8 @@ let avg = arr => arr.reduce((a,b) => (a+b)) / arr.length
 /* Main function */
 
 function findPathsInner({sourceElementId, targetElementId, pathSoFar, links, nodes, maxLengthOfPath}){
+    // THis has a tendency to produce too much recursion errors
+    // could be refactored
     let paths = []
 
     if(maxLengthOfPath > 0){
@@ -39,7 +41,13 @@ function findPaths({sourceElementId, targetElementId, links, nodes}){
     let positionTargetElement = nodes.map((element, i) => (element.id)).indexOf(targetElementId)
     let maxLengthOfPath = Math.abs(positionSourceElement - positionTargetElement)
     
-    return findPathsInner({sourceElementId, targetElementId, pathSoFar: [], links, nodes, maxLengthOfPath})
+    let paths = []
+    try{
+        paths = findPathsInner({sourceElementId, targetElementId, pathSoFar: [], links, nodes, maxLengthOfPath})
+    }catch(error){
+        console.log("Error: probably too much recursion.")
+    }
+    return paths
 }
 
 function findDistance({sourceElementId, targetElementId, nodes, links}){
@@ -96,7 +104,11 @@ function abridgeArrayAndDisplay(array){
     return result
 }
 
-export function CreateTableWithDistances({isListOrdered, orderedList, listOfElements, links}){
+function CreateTableWithDistances({isListOrdered, orderedList, listOfElements, links}){
+    // Not used anywhere because it's too resource intensive
+    // The culprit is findPathsInner, a recursive function which
+    // has a tendency to produce "Maximum call stack size exceeded"
+    // or "too much recursion" errors
     if(!isListOrdered || orderedList.length < listOfElements.length){ 
         return (<div>{""}</div>)
     } else {
@@ -120,7 +132,7 @@ export function CreateTableWithDistances({isListOrdered, orderedList, listOfElem
                     </tr>
                     </thead>
                     <tbody>
-                    {rows.map(row => <tr key={row.id}>
+                    {rows.filter(row => row.distances.length > 0).map(row => <tr key={row.id}>
                             <td className="" >{row.id}</td> 
                             <td>&nbsp;&nbsp;&nbsp;</td>
                             <td className="">{row.name}</td>
@@ -130,6 +142,10 @@ export function CreateTableWithDistances({isListOrdered, orderedList, listOfElem
                             <td className="">{formatLargeOrSmall(avg(row.distances))}</td>
                     </tr>
                     )}
+                    <tr className={rows[0].distances.length > 0 ? "hidden": ""}>
+                        "Maximum compute exceeded, rely on the graph instead"
+                    </tr>
+                    {}
                     </tbody>
                 </table>
             </div>
@@ -138,6 +154,44 @@ export function CreateTableWithDistances({isListOrdered, orderedList, listOfElem
     
 }
 
+
+function CreateTableWithoutDistances({isListOrdered, orderedList, listOfElements, links}){
+    if(!isListOrdered || orderedList.length < listOfElements.length){ 
+        return (<div>{""}</div>)
+    } else {
+        let nodes = orderedList.map(i => listOfElements[i])
+        let rows = nodes.map((element, i) => ({id: numToAlphabeticalString(element.id), name: element.name}))
+        console.log("rows@CreateTableWithoutDistances")
+        console.log(rows)
+        return(
+            <div>
+                <table className="">
+                    <thead >
+                    <tr >
+                        <th >Id</th>
+                        <th>&nbsp;&nbsp;&nbsp;</th>
+                        <th >Element</th>
+                        <th> &nbsp;&nbsp;&nbsp;</th>
+                    </tr>
+                    </thead>
+                    <tbody>
+                    {rows.map(row => <tr key={row.id}>
+                            <td className="" >{row.id}</td> 
+                            <td>&nbsp;&nbsp;&nbsp;</td>
+                            <td className="">{row.name}</td>
+                    </tr>
+                    )}
+                    {}
+                    </tbody>
+                </table>
+            </div>
+        )
+    }
+    
+}
+
+export const CreateTable = CreateTableWithoutDistances;
+
 /* Testing */
 //import fs from 'fs';
 //import path from 'path';