feat: preserve result height when results are invalidated on edit

This is done instead of deleting the results to reduce vertical jumping on updates.

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,
@@ -875,9 +875,9 @@
     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 = [];
+      // inalidated 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;
@@ -887,12 +887,13 @@
       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()) {
@@ -1088,6 +1089,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;
 
@@ -1112,10 +1114,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 = [];
       }
 
@@ -1477,6 +1481,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);

src/Cell.svelte

@@ -1,6 +1,6 @@
 <script lang="ts">
   import { createEventDispatcher } from "svelte";
-  import { cells, results, activeCell, mathCellChanged, handleClickInCell, deleteCell } from "./stores";
+  import { cells, results, resultsInvalid, activeCell, mathCellChanged, handleClickInCell, deleteCell } from "./stores";
   import type { Cell } from './cells/Cells';
   import MathCellElement from "./MathCell.svelte";
   import DocumentationCellElement from "./DocumentationCell.svelte";
@@ -55,6 +55,7 @@
       $cells = newCells;
 
       $results = [];
+      $resultsInvalid = true;
 
       if (index === $activeCell) {
         $activeCell--;
@@ -73,6 +74,7 @@
       $cells = newCells;
 
       $results = [];
+      $resultsInvalid = true;
 
       if (index === $activeCell) {
         $activeCell++;

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, resultsInvalid, activeCell, prefersReducedMotion, mathCellChanged } from "./stores";
   import Cell from "./Cell.svelte";
   import ButtonBar from "./ButtonBar.svelte";
 
@@ -134,6 +134,7 @@
         draggingSourceIndex = targetIndex;
 
         $results = [];
+        $resultsInvalid = true;
         $mathCellChanged = true;
       }
 

src/DeletedCell.svelte

@@ -1,7 +1,7 @@
 <script lang="ts">
   import { onMount, onDestroy } from 'svelte';
   import type DeletedCell from "./cells/DeletedCell";
-  import { cells, activeCell, results, mathCellChanged } from "./stores";
+  import { cells, activeCell, results, resultsInvalid, mathCellChanged } from "./stores";
 
   export let index: number;
   export let deletedCell: DeletedCell;
@@ -46,6 +46,7 @@
         $activeCell = $cells.length-1;
       }
       $results = [];
+      $resultsInvalid = true;
       $mathCellChanged = true;
     }
   }
@@ -55,6 +56,7 @@
     $cells = [...$cells.slice(0,index), deletedCell.deletedCell, ...$cells.slice(index+1)];
     $activeCell = index;
     $results = [];
+    $resultsInvalid = true;
     $mathCellChanged = true;
   }
 

src/InsertCell.svelte

@@ -1,7 +1,7 @@
 <script lang="ts">
   import { onMount, onDestroy, createEventDispatcher } from 'svelte';
   import type InsertCell from "./cells/InsertCell";
-  import { cells, activeCell, results, mathCellChanged, inCellInsertMode, addCell, onMobile } from "./stores";
+  import { cells, activeCell, results, resultsInvalid, mathCellChanged, inCellInsertMode, addCell, onMobile } from "./stores";
   import type { CellTypes } from "./cells/BaseCell";
 
   import AddAlt from "carbon-icons-svelte/lib/AddAlt.svelte";
@@ -65,6 +65,7 @@
         $activeCell = $cells.length-1;
       }
       $results = [];
+      $resultsInvalid = true;
       $mathCellChanged = true;
     }
   }

src/MathCell.svelte

@@ -2,7 +2,7 @@
   import { onMount, createEventDispatcher, SvelteComponent } from "svelte";
   import { get_current_component } from "svelte/internal";
   import { bignumber, format, unaryMinus, type BigNumber, type FormatOptions } from "mathjs";
-  import { cells, results, activeCell, mathCellChanged, config } from "./stores";
+  import { cells, results, resultsInvalid, activeCell, mathCellChanged, config } from "./stores";
   import { isFiniteImagResult, type Result, type FiniteImagResult,
            type PlotResult, type MatrixResult, isMatrixResult } from "./resultTypes";
            import type { CodeFunctionQueryStatement, QueryStatement } from "./parser/types";
@@ -337,6 +337,7 @@
         <span class="hidden" id="{`result-value-${index}`}">{resultLatex}</span>
         <span class="hidden" id="{`result-units-${index}`}">{resultUnits}</span>
         <MathField
+          hidden={$resultsInvalid}
           latex={`${resultLatex}${resultUnitsLatex}`}
         />
       {:else}

src/MathField.svelte

@@ -1,6 +1,6 @@
 <script lang="ts">
   import { onMount, onDestroy, createEventDispatcher } from "svelte";
-  import { modifierKey, activeMathField, results } from "./stores";
+  import { modifierKey, activeMathField, results, resultsInvalid } from "./stores";
   import type { MathField } from "./cells/MathField";
 
   import type { MathfieldElement } from "mathlive";
@@ -10,6 +10,7 @@
   export let mathField: MathField | null = null;
   export let parsingError = false;
   export let editable = false;
+  export let hidden = false;
 
   export function getMathField() {
     return mathLiveField;
@@ -146,8 +147,8 @@
         mathField.setPendingLatex();
 
         if (mathField.parsingError) {
-          // there is a parsing error, clear any existing results after leaving cell
-          $results = [];
+          // there is a parsing error, invalidate existing results after leaving cell
+          $resultsInvalid = true;
         }
       }
     }
@@ -250,6 +251,10 @@
     padding-bottom: 1px;
   }
 
+  math-field.hidden {
+    visibility: hidden;
+  }
+
   math-field.parsing-error:not(:focus) {
     background-color: #f0b9b9;
   }
@@ -295,6 +300,7 @@
   bind:this={mathLiveField}
   class:editable
   class:parsing-error={parsingError}
+  class:hidden
 >
 </math-field>
 

src/stores.ts

@@ -27,6 +27,7 @@ export const cells: Writable<Cell[]> = writable([]);
 export const title = writable(defaultTitle);
 export const results: Writable<(Result | FiniteImagResult | MatrixResult | PlotResult[])[]> = writable([]);
 export const system_results: Writable<SystemResult[]> = writable([]);
+export const resultsInvalid = writable(false);
 export const sheetId = writable('');
 export const insertedSheets: Writable<InsertedSheet[]> = writable([]);
 
@@ -85,6 +86,7 @@ export function addCell(type: CellTypes, index?: number) {
   cells.set(currentCells);
 
   results.set([]);
+  resultsInvalid.set(true);
 
   // Adding a cell cannot impact existing system cell results so adjust system_results array accordingly
   current_system_results.splice(index, 0, null);
@@ -111,7 +113,7 @@ export function getSheetObject(includeResults=true): Sheet {
     config: get(config),
     cells: get(cells).map(x => x.serialize()).filter(item => item !== null),
     title: get(title),
-    results: includeResults ? get(results) : [],
+    results: includeResults ? (get(resultsInvalid) ? [] : get(results)) : [],
     system_results: includeResults ? get(system_results) : [],
     nextId: BaseCell.nextId,
     sheetId: get(sheetId),
@@ -130,6 +132,7 @@ export function resetSheet() {
   cells.set([]);
   title.set(defaultTitle);
   results.set([]);
+  resultsInvalid.set(true);
   system_results.set([]);
   BaseCell.nextId = 0;
   history.set([]);
@@ -187,5 +190,7 @@ export function deleteCell(index: number, forceDelete=false) {
 
   cells.set(newCells);
   results.set([]);
+  resultsInvalid.set(true);
+
   mathCellChanged.set(true);
 }