From e4a62de11f75eebda5fc87d24ab28bd328328ba6 Mon Sep 17 00:00:00 2001
From: mgreminger <michael.greminger@gmail.com>
Date: Mon, 22 Apr 2024 21:03:44 -0500
Subject: [PATCH] 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         | 15 ++++++++++-----
 src/Cell.svelte        |  4 +++-
 src/CellList.svelte    |  3 ++-
 src/DeletedCell.svelte |  4 +++-
 src/InsertCell.svelte  |  3 ++-
 src/MathCell.svelte    |  3 ++-
 src/MathField.svelte   | 12 +++++++++---
 src/stores.ts          |  7 ++++++-
 8 files changed, 37 insertions(+), 14 deletions(-)

diff --git a/src/App.svelte b/src/App.svelte
index 7a3baac1..dd142d99 100644
--- 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,
@@ -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);
diff --git a/src/Cell.svelte b/src/Cell.svelte
index 84b47b19..c534527b 100644
--- a/src/Cell.svelte
+++ b/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++;
diff --git a/src/CellList.svelte b/src/CellList.svelte
index e433ef5a..3610dd3d 100644
--- 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, 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;
       }
 
diff --git a/src/DeletedCell.svelte b/src/DeletedCell.svelte
index ec941a6d..7c198701 100644
--- a/src/DeletedCell.svelte
+++ b/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;
   }
 
diff --git a/src/InsertCell.svelte b/src/InsertCell.svelte
index 02cb09a6..f4855b68 100644
--- a/src/InsertCell.svelte
+++ b/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;
     }
   }
diff --git a/src/MathCell.svelte b/src/MathCell.svelte
index 5bee9b2f..3c28d896 100644
--- a/src/MathCell.svelte
+++ b/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}
diff --git a/src/MathField.svelte b/src/MathField.svelte
index 42281f62..5f096406 100644
--- a/src/MathField.svelte
+++ b/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>
 
diff --git a/src/stores.ts b/src/stores.ts
index ce44dc7c..3485a5c5 100644
--- a/src/stores.ts
+++ b/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);
 }