Merge pull request #254 from mgreminger/preserve-result-height

feat: preserve result height when results are invalidated on edit
mgreminger · May 13, 2024 · 92b5865 · 92b5865
2 parents 3ff58c2 + e766b4a
commit 92b5865
Show file tree

Hide file tree

Showing 26 changed files with 388 additions and 153 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -46,7 +46,7 @@
     "idb-keyval": "^6.2.0",
     "mathjax": "^3.2.2",
     "mathjs": "^11.8.2",
-    "mathlive": "github:mgreminger/mathlive#29b14918088a7f0ad9f8204f982447a7dbc6c8df",
+    "mathlive": "github:mgreminger/mathlive#bbe2b44a1f84f4107784a2f92beda30bc62411f1",
     "plotly.js-basic-dist": "github:mgreminger/plotly.js#dist-basic-for-ep",
     "quick-lru": "^6.1.1",
     "quill": "^1.3.7",

diff --git a/src/App.svelte b/src/App.svelte
@@ -7,7 +7,7 @@
   import PlotCell from "./cells/PlotCell";
   import PiecewiseCell from "./cells/PiecewiseCell";
   import SystemCell from "./cells/SystemCell";
-  import { cells, title, results, system_results, history, insertedSheets, activeCell, 
+  import { cells, title, results, resultsInvalid, system_results, history, insertedSheets, activeCell, 
            getSheetJson, getSheetObject, resetSheet, sheetId, mathCellChanged, nonMathCellChanged,
            addCell, prefersReducedMotion, modifierKey, inCellInsertMode, config, unsavedChange,
            incrementActiveCell, decrementActiveCell, deleteCell, activeMathField,
@@ -90,7 +90,7 @@
 
   const apiUrl = window.location.origin;
 
-  const currentVersion = 20240418;
+  const currentVersion = 20240513;
   const tutorialHash = "fFjTsnFoSQMLwcvteVoNtL";
 
   const termsVersion = 20240110;
@@ -762,7 +762,7 @@
     refreshSheet(); // pushState does not trigger onpopstate event
   }
 
-  function getResults(statementsAndSystems: string, myRefreshCount: bigint) {
+  function getResults(statementsAndSystems: string, myRefreshCount: BigInt) {
     return new Promise<Results>((resolve, reject) => {
       function handleWorkerMessage(e) {
         forcePyodidePromiseRejection = null;
@@ -819,13 +819,14 @@
           statements.push(mathField.statement);
         }
       } else if (cell instanceof TableCell) {
-        const newStatements = cell.parseTableStatements();
+        const newStatements = cell.tableStatements;
         for (const statement of newStatements) {
           endStatements.push(statement);
         }
       } else if (cell instanceof PiecewiseCell) {
-        const statement = cell.parsePiecewiseStatement(cellNum);
-        endStatements.push(statement);
+        if (cell.piecewiseStatement) {
+          endStatements.push(cell.piecewiseStatement);
+        }
       } else if (cell instanceof SystemCell) {
         const systemDefinition = cell.getSystemDefinition();
         if (systemDefinition) {
@@ -870,15 +871,18 @@
     }
   }
 
-  async function handleCellUpdate() {
-    const myRefreshCount = ++refreshCounter;
+  async function handleCellUpdate(localRefreshCounter: BigInt) {
+    if (localRefreshCounter !== refreshCounter) {
+      return;
+    }
+    const myRefreshCount = localRefreshCounter;
     const firstRunAfterSheetLoad = initialSheetLoad;
     initialSheetLoad = false;
     inDebounce = false;
     if(noParsingErrors && !firstRunAfterSheetLoad) {
-      // remove existing results if all math fields are valid (while editing current cell)
-      // also, don't clear results if sheet was just loaded without modification (initialSheetLoad === true)
-      $results = [];
+      // invalidate results if all math fields are valid (while editing current cell)
+      // also, don't invalidate results if sheet was just loaded without modification (initialSheetLoad === true)
+      $resultsInvalid = true;
       error = "";
     }
     await pyodidePromise;
@@ -888,17 +892,20 @@
       clearTimeout(pyodideTimeoutRef);
       pyodideTimeoutRef = window.setTimeout(() => pyodideTimeout=true, pyodideTimeoutLength);
       if (!firstRunAfterSheetLoad) {
-        $results = [];
+        $resultsInvalid = true;
         error = "";
       }
       pyodidePromise = getResults(statementsAndSystems, myRefreshCount)
       .then((data: Results) => {
         $results = [];
+        $resultsInvalid = false;
         if (!data.error && data.results.length > 0) {
           let counter = 0;
           for (const [i, cell] of $cells.entries()) {
             if ((cell.type === "math" || cell.type === "plot") ) {
               $results[i] = data.results[counter++]; 
+            } else {
+              $results[i] = null;
             }
           }
         }
@@ -908,6 +915,8 @@
         for (const [i, cell] of $cells.entries()) {
           if (cell.type === "system") {
             $system_results[i] = data.systemResults[counter++]
+          } else {
+            $system_results[i] = null;
           }
         }
         if (!firstRunAfterSheetLoad) {
@@ -1089,6 +1098,7 @@ Please include a link to this sheet in the email to assist in debugging the prob
 
       $cells = [];
       $results = [];
+      $resultsInvalid = true;
       $system_results = [];
       $activeCell = -1;
 
@@ -1114,10 +1124,12 @@ Please include a link to this sheet in the email to assist in debugging the prob
 
       if (noParsingErrors) {
         $results = sheet.results;
+        $resultsInvalid = false;
         // old documents in the database won't have the system_results property
         $system_results = sheet.system_results ? sheet.system_results : [];
       } else {
         $results = [];
+        $resultsInvalid = true;
         $system_results = [];
       }
 
@@ -1479,6 +1491,7 @@ Please include a link to this sheet in the email to assist in debugging the prob
 
     try{
       $results = [];
+      $resultsInvalid = true;
       $system_results = [];
 
       const newCells = sheet.cells.map(cellFactory);
@@ -1912,29 +1925,21 @@ Please include a link to this sheet in the email to assist in debugging the prob
     };
   }
 
-  $:{
-    if (document.hasFocus() && showKeyboard !== Boolean($activeMathField)) {
+  $:if (document.hasFocus() && showKeyboard !== Boolean($activeMathField)) {
       showKeyboard = Boolean($activeMathField);
     }
-  }
 
-  $: {
-    document.title = `EngineeringPaper.xyz: ${$title}`;
-  }
+  $: document.title = `EngineeringPaper.xyz: ${$title}`;
 
-  $: if($cells) {
+  $: if($mathCellChanged) {
+    refreshCounter++;
+    $mathCellChanged = false;
     noParsingErrors = !checkParsingErrors();
-  }
-
-  $: if ($cells || $mathCellChanged) {
-    if($mathCellChanged) {
-      if (initialSheetLoad) {
-        handleCellUpdate();
-      } else {
-        inDebounce = true;
-        debounceHandleCellUpdate();
-      }
-      $mathCellChanged = false;
+    if (initialSheetLoad) {
+      handleCellUpdate(refreshCounter);
+    } else {
+      inDebounce = true;
+      debounceHandleCellUpdate(refreshCounter);
     }
     $unsavedChange = true;
     $autosaveNeeded = true;
@@ -2194,6 +2199,12 @@ Please include a link to this sheet in the email to assist in debugging the prob
     }
   }
 
+  @media (max-width: 450px) {
+    :global(.hide-when-kinda-narrow) {
+      display: none;
+    }
+  }
+
   @media (max-width: 400px) {
     :global(.hide-when-narrow) {
       display: none;

diff --git a/src/Cell.svelte b/src/Cell.svelte
@@ -1,6 +1,7 @@
 <script lang="ts">
-  import { createEventDispatcher } from "svelte";
-  import { cells, results, activeCell, mathCellChanged, handleClickInCell, deleteCell } from "./stores";
+  import { createEventDispatcher, onMount } from "svelte";
+  import { cells, results, system_results, activeCell, 
+           mathCellChanged, handleClickInCell, deleteCell } from "./stores";
   import type { Cell } from './cells/Cells';
   import MathCellElement from "./MathCell.svelte";
   import DocumentationCellElement from "./DocumentationCell.svelte";
@@ -46,15 +47,17 @@
     }
   }
 
+  onMount(() => {
+    if(cell instanceof DeletedCell && cell.height > 0) {
+      contentDiv.setAttribute("style", `height: ${cell.height}px;`);
+    } 
+  });
+
   function moveUp(index) {
     if (index > 0) {
-      let newCells = $cells.slice(0,index-1);
-      newCells.push($cells[index]);
-      newCells.push($cells[index-1]);
-      newCells = newCells.concat($cells.slice(index+1, $cells.length+1));
-      $cells = newCells;
-
-      $results = [];
+      $cells = [...$cells.slice(0,index-1), $cells[index], $cells[index-1], ...$cells.slice(index+1, $cells.length+1)];
+      $results = [...$results.slice(0,index-1), $results[index], $results[index-1], ...$results.slice(index+1, $cells.length+1)];
+      $system_results = [...$system_results.slice(0,index-1), $system_results[index], $system_results[index-1], ...$system_results.slice(index+1, $cells.length+1)];
 
       if (index === $activeCell) {
         $activeCell--;
@@ -66,13 +69,9 @@
 
   function moveDown(index) {
     if (index < $cells.length-1) {
-      let newCells = $cells.slice(0, index);
-      newCells.push($cells[index+1]);
-      newCells.push($cells[index]);
-      newCells = newCells.concat($cells.slice(index+2, $cells.length+1));
-      $cells = newCells;
-
-      $results = [];
+      $cells = [...$cells.slice(0, index), $cells[index+1], $cells[index], ...$cells.slice(index+2, $cells.length+1)];
+      $results = [...$results.slice(0, index), $results[index+1], $results[index], ...$results.slice(index+2, $cells.length+1)];
+      $system_results = [...$system_results.slice(0, index), $system_results[index+1], $system_results[index], ...$system_results.slice(index+2, $cells.length+1)];
 
       if (index === $activeCell) {
         $activeCell++;

diff --git a/src/CellList.svelte b/src/CellList.svelte
@@ -2,7 +2,7 @@
   import { tick } from "svelte";
   import { flip } from "svelte/animate";
 
-  import { cells, results, activeCell, prefersReducedMotion, mathCellChanged } from "./stores";
+  import { cells, results, system_results, activeCell, mathCellChanged } from "./stores";
   import Cell from "./Cell.svelte";
   import ButtonBar from "./ButtonBar.svelte";
 
@@ -124,16 +124,33 @@
           $cells = [...$cells.slice(0,targetIndex), $cells[draggingSourceIndex], 
                     ...$cells.slice(targetIndex, draggingSourceIndex),
                     ...$cells.slice(draggingSourceIndex+1)];
+
+          $results = [...$results.slice(0,targetIndex), $results[draggingSourceIndex], 
+                      ...$results.slice(targetIndex, draggingSourceIndex),
+                      ...$results.slice(draggingSourceIndex+1)];
+
+          $system_results = [...$system_results.slice(0,targetIndex), $system_results[draggingSourceIndex], 
+                             ...$system_results.slice(targetIndex, draggingSourceIndex),
+                             ...$system_results.slice(draggingSourceIndex+1)];
         } else {
           $cells = [...$cells.slice(0,draggingSourceIndex), 
                     ...$cells.slice(draggingSourceIndex+1, targetIndex+1),          
                     $cells[draggingSourceIndex], 
                     ...$cells.slice(targetIndex+1)];
+
+          $results = [...$results.slice(0,draggingSourceIndex), 
+                      ...$results.slice(draggingSourceIndex+1, targetIndex+1),          
+                      $results[draggingSourceIndex], 
+                      ...$results.slice(targetIndex+1)];
+
+          $system_results = [...$system_results.slice(0,draggingSourceIndex), 
+                             ...$system_results.slice(draggingSourceIndex+1, targetIndex+1),          
+                             $system_results[draggingSourceIndex], 
+                             ...$system_results.slice(targetIndex+1)];
         }
 
         draggingSourceIndex = targetIndex;
 
-        $results = [];
         $mathCellChanged = true;
       }