refactor: port DataTableCell and DataTableInput to runes mode

mgreminger · Dec 24, 2024 · ef2df3d · ef2df3d
1 parent aaa2537
commit ef2df3d
Show file tree

Hide file tree

Showing 8 changed files with 94 additions and 78 deletions.
diff --git a/src/App.svelte b/src/App.svelte
@@ -4,7 +4,7 @@
   import { BaseCell } from "./cells/BaseCell";
   import MathCell from "./cells/MathCell.svelte";
   import TableCell from "./cells/TableCell.svelte";
-  import DataTableCell, { type InterpolationFunction } from "./cells/DataTableCell";
+  import DataTableCell, { type InterpolationFunction } from "./cells/DataTableCell.svelte";
   import PlotCell from "./cells/PlotCell";
   import PiecewiseCell from "./cells/PiecewiseCell.svelte";
   import SystemCell from "./cells/SystemCell.svelte";

diff --git a/src/Cell.svelte b/src/Cell.svelte
@@ -18,7 +18,7 @@
   import MathCell from "./cells/MathCell.svelte";
   import PlotCell from "./cells/PlotCell";
   import TableCell from "./cells/TableCell.svelte";
-  import DataTableCell from "./cells/DataTableCell";
+  import DataTableCell from "./cells/DataTableCell.svelte";
   import DocumentationCell from "./cells/DocumentationCell.svelte";
   import PiecewiseCell from "./cells/PiecewiseCell.svelte";
   import SystemCell from "./cells/SystemCell.svelte";
@@ -289,9 +289,9 @@
       />
     {:else if cell instanceof DataTableCell}
       <DataTableCellElement
-        on:insertMathCellAfter={insertMathCellAfter}
-        on:insertInsertCellAfter={insertInsertCellAfter}
-        on:modal={modal}
+        {insertMathCellAfter}
+        {insertInsertCellAfter}
+        {modal}
         bind:this={cellElement}
         index={index}
         dataTableCell={cell}

diff --git a/src/DataTableCell.svelte b/src/DataTableCell.svelte
@@ -9,18 +9,16 @@
     title
   } from "./stores";
 
-  import { isFiniteImagResult, type Result, type FiniteImagResult,
-           type PlotResult, type MatrixResult, 
-           type DataTableResult, 
-           isDataTableResult} from "./resultTypes";
+  import { isFiniteImagResult, type Result,
+           type MatrixResult, isDataTableResult} from "./resultTypes";
 
   import type { QueryStatement } from "./parser/types";
 
-  import { onMount, tick, createEventDispatcher } from "svelte";
+  import { onMount, tick } from "svelte";
 
   import { convertArrayUnits, unitsEquivalent, unitsValid } from "./utility.js";
 
-  import type DataTableCell from "./cells/DataTableCell";
+  import type DataTableCell from "./cells/DataTableCell.svelte";
   import type { MathField as MathFieldClass } from "./cells/MathField.svelte";
 
   import MathField from "./MathField.svelte";
@@ -38,12 +36,30 @@
   import Copy from "carbon-icons-svelte/lib/Copy.svelte";
   import type { ModalInfo } from "./types";
 
-  export let index: number;
-  export let dataTableCell: DataTableCell;
+  interface Props {
+    index: number;
+    dataTableCell: DataTableCell;
+    insertMathCellAfter: (arg: {detail: {index: number}}) => void;
+    insertInsertCellAfter: (arg: {detail: {index: number}}) => void;
+    modal: (arg: {detail: {modalInfo: ModalInfo}}) => void;
+  }
+
+  let {
+    index,
+    dataTableCell,
+    insertMathCellAfter,
+    insertInsertCellAfter,
+    modal
+  }: Props = $props();
+
+  let numColumns = $derived(dataTableCell.columnData.length);
+  let numRows = $derived(dataTableCell.columnData[0].length);
+  let numInterpolationDefs = $derived(dataTableCell.interpolationDefinitions.length);
+  let numInputs = $derived(dataTableCell.columnIsOutput.filter(value => !value).length);
+  let result = $derived($results[index]);
 
-  let result: (Result | FiniteImagResult | MatrixResult | DataTableResult | PlotResult[] | null) = null;
   let containerDiv: HTMLDivElement;
-  let copyButtonText = "Copy Data";
+  let copyButtonText = $state("Copy Data");
 
   export function getMarkdown() {
     const rows = dataTableCell
@@ -57,12 +73,6 @@
     return table.map(row => '|' + row.join('|') + '|').join('\n') + '\n\n';
   }
 
-  const dispatch = createEventDispatcher<{
-    insertMathCellAfter: {index: number};
-    insertInsertCellAfter: {index: number};
-    modal: {modalInfo: ModalInfo};
-  }>();
-
   onMount(() => {
     if ($activeCell === index) {
       focus();
@@ -360,14 +370,14 @@
 
   async function handleLoadSpreadsheet() {
     try {
-      dispatch("modal", {modalInfo: {state: "importingSpreadsheet", modalOpen: true, heading: 'Importing Spreadsheet'}});
+      modal({detail: {modalInfo: {state: "importingSpreadsheet", modalOpen: true, heading: 'Importing Spreadsheet'}}});
       await dataTableCell.selectAndLoadSpreadsheetFile();
-      dispatch("modal", {modalInfo: {state: "importingSpreadsheet", modalOpen: false, heading: 'Importing Spreadsheet'}});
+      modal({detail: {modalInfo: {state: "importingSpreadsheet", modalOpen: false, heading: 'Importing Spreadsheet'}}});
 
       $mathCellChanged = true;
       $cells[index] = $cells[index]; 
     } catch (e) {
-      dispatch("modal", {modalInfo: {state: "error", modalOpen: true, error: e, heading: 'Importing Spreadsheet'}});
+      modal({detail: {modalInfo: {state: "error", modalOpen: true, error: e, heading: 'Importing Spreadsheet'}}});
     }
   }
 
@@ -392,24 +402,21 @@
     setTimeout(() => copyButtonText="Copy Data", 2000);
   }
 
-  $: if ($activeCell === index) {
-      focus();
+  $effect( () => {
+    if ($activeCell === index) {
+        focus();
     }
+  });
 
-  $: numColumns = dataTableCell.columnData.length;
-  $: numRows = dataTableCell.columnData[0].length;
-  $: numInterpolationDefs = dataTableCell.interpolationDefinitions.length;
-  $: numInputs = dataTableCell.columnIsOutput.filter(value => !value).length;
-
-  $: result = $results[index];
-
-  $: if (result && isDataTableResult(result) && !$resultsInvalid) {
-    for (const [col, colResult] of Object.entries(result.colData)) {
-      setColumnResult(Number(col), colResult);
+  $effect( () => {
+    if (result && isDataTableResult(result) && !$resultsInvalid) {
+      for (const [col, colResult] of Object.entries(result.colData)) {
+        setColumnResult(Number(col), colResult);
+      }
+    } else {
+      clearOutputColumns();
     }
-  } else {
-    clearOutputColumns();
-  }
+  });
 
 </script>
 
@@ -557,8 +564,8 @@
         <MathField
           editable={true}
           update={(e) => parseParameterField(e.latex, j, mathField)}
-          shiftEnter={() => dispatch("insertMathCellAfter", {index: index})}
-          modifierEnter={() => dispatch("insertInsertCellAfter", {index: index})}
+          shiftEnter={() => insertMathCellAfter({detail: {index: index}})}
+          modifierEnter={() => insertInsertCellAfter({detail: {index: index}})}
           mathField={mathField}
           parsingError={mathField.parsingError}
           bind:this={mathField.element}
@@ -604,8 +611,8 @@
           <MathField
             editable={true}
             update={(e) => parseUnitField(e.latex, j, mathField)}
-            shiftEnter={() => dispatch("insertMathCellAfter", {index: index})}
-            modifierEnter={() => dispatch("insertInsertCellAfter", {index: index})}
+            shiftEnter={() => insertMathCellAfter({detail: {index: index}})}
+            modifierEnter={() => insertInsertCellAfter({detail: {index: index}})}
             mathField={mathField}
             parsingError={mathField.parsingError}
             bind:this={mathField.element}
@@ -654,8 +661,8 @@
                 <MathField
                   editable={true}
                   update={(e) => parseInterpolationDefNameField(e.latex, i, def.nameField)}
-                  shiftEnter={() => dispatch("insertMathCellAfter", {index: index})}
-                  modifierEnter={() => dispatch("insertInsertCellAfter", {index: index})}
+                  shiftEnter={() => insertMathCellAfter({detail: {index: index}})}
+                  modifierEnter={() => insertInsertCellAfter({detail: {index: index}})}
                   mathField={def.nameField}
                   parsingError={def.nameField.parsingError}
                   bind:this={def.nameField.element}
@@ -683,7 +690,7 @@
                       bind:value={def.order}
                       min="0"
                       max="100"
-                      on:change={() => handlePolyOrderChange(i)}
+                      onchange={() => handlePolyOrderChange(i)}
                     >
                   </label>
                 {/if}
@@ -702,7 +709,7 @@
                   name={`input_radio_${index}_${i}`}
                   bind:group={def.input}
                   value={j}
-                  on:change={() => handleInputOutputChange(i)}
+                  onchange={() => handleInputOutputChange(i)}
                 >
               </div>
               <div class="horizontal">
@@ -715,7 +722,7 @@
                   name={`output_radio_${index}_${i}`}
                   bind:group={def.output}
                   value={j}
-                  on:change={() => handleInputOutputChange(i)}
+                  onchange={() => handleInputOutputChange(i)}
                 >   
               </div>
             </div>
@@ -754,12 +761,12 @@
             {/if}
           {:else}
             <DataTableInput
-              on:enter={() => handleEnter(i)}
-              on:shiftEnter={() => dispatch("insertMathCellAfter", {index: index})}
-              on:modifierEnter={() => dispatch("insertInsertCellAfter", {index: index})}
+              enter={() => handleEnter(i)}
+              shiftEnter={() => insertMathCellAfter({detail: {index: index}})}
+              modifierEnter={() => insertInsertCellAfter({detail: {index: index}})}
               id={`data-table-input-${index}-${i}-${j}`}
               bind:textContent={dataTableCell.columnData[j][i]} 
-              on:input={() => parseDataField(j)}
+              input={() => parseDataField(j)}
               error={nonNumeric}
             >
             </DataTableInput>

diff --git a/src/DataTableInput.svelte b/src/DataTableInput.svelte
@@ -1,26 +1,36 @@
 <script lang="ts">
-  import { createEventDispatcher } from "svelte";
+  import type { FormEventHandler } from "svelte/elements";
   import { modifierKey} from "./stores";
 
-  export let id: string;
-  export let textContent: string;
-  export let error = false;
+  interface Props {
+    id: string;
+    textContent: string;
+    error: boolean;
+    enter: () => void;
+    shiftEnter: () => void;
+    modifierEnter: () => void;
+    input: FormEventHandler<HTMLDivElement>;
+  }
 
-  const dispatch = createEventDispatcher<{
-    enter: null;
-    shiftEnter: null;
-    modifierEnter: null;
-  }>();
+  let {
+    id,
+    textContent = $bindable(),
+    error = false,
+    enter,
+    shiftEnter,
+    modifierEnter,
+    input
+  }: Props = $props();
 
   function handleKeyDown(e: KeyboardEvent) {
     if (e.key == 'Enter') {
       e.preventDefault();
       if(e.shiftKey) {
-        dispatch('shiftEnter');
+        shiftEnter();
       } else if(e[$modifierKey]) {
-        dispatch('modifierEnter');
+        modifierEnter();
       } else {
-        dispatch('enter');
+        enter();
       }
     }
   }
@@ -58,9 +68,9 @@
   class="editable"
   class:error
   contenteditable="true"
-  on:keydown={handleKeyDown}
+  onkeydown={handleKeyDown}
   id={id}
   bind:textContent
-  on:input
+  oninput={input}
 >
 </div>
diff --git a/src/cells/Cells.ts b/src/cells/Cells.ts
@@ -3,7 +3,7 @@ import type { Config } from "../sheet/Sheet";
 import MathCell from "./MathCell.svelte";
 import PlotCell from "./PlotCell";
 import TableCell from "./TableCell.svelte";
-import DataTableCell from "./DataTableCell";
+import DataTableCell from "./DataTableCell.svelte";
 import DocumentationCell from "./DocumentationCell.svelte";
 import PiecewiseCell from "./PiecewiseCell.svelte";
 import SystemCell from "./SystemCell.svelte";

diff --git a/src/cells/DataTableCell.ts → src/cells/DataTableCell.svelte.ts b/src/cells/DataTableCell.ts → src/cells/DataTableCell.svelte.ts
@@ -34,24 +34,24 @@ export default class DataTableCell extends BaseCell {
 
   static spreadsheetExtensions = ".csv,.xlsx,.ods,.xls";
 
-  parameterFields: MathField[];
+  parameterFields: MathField[] = $state();
   combinedFields: MathField[];
-  parameterUnitFields: MathField[];
-  columnData: string[][];
+  parameterUnitFields: MathField[] = $state();
+  columnData: string[][] = $state();
   columnStatements: (Statement | null)[];
   columnIds: (string | null)[];
-  columnErrors: string[];
-  columnIsOutput: boolean[];
-  columnOutputUnits: string[];
+  columnErrors: string[] = $state();
+  columnIsOutput: boolean[] = $state();
+  columnOutputUnits: string[] = $state();
 
-  interpolationDefinitions: InterpolationDefinition[];
+  interpolationDefinitions: InterpolationDefinition[] = $state();
   interpolationFunctions: InterpolationFunction[];
 
   cache: QuickLRU<string, {statement: Statement, parsingError: boolean}>;
 
   constructor (arg?: DatabaseDataTableCell) {
+    super("dataTable", arg?.id);
     if (arg === undefined) {
-      super("dataTable");
       this.parameterFields = [new MathField(DataTableCell.getNextColName(), 'data_table_expression'), 
                               new MathField(DataTableCell.getNextColName(), 'data_table_expression')];
       this.combinedFields = [new MathField('', 'data_table_assign'), new MathField('', 'data_table_assign')];
@@ -66,7 +66,6 @@ export default class DataTableCell extends BaseCell {
       this.interpolationFunctions = [];
       this.cache = new QuickLRU<string, {statement: Statement, parsingError: boolean}>({maxSize: 100});
     } else {
-      super("dataTable", arg.id);
       this.parameterFields = arg.parameterLatexs.map((latex) => new MathField(latex, 'data_table_expression'));
       if (arg.nextParameterId > DataTableCell.nextParameterId) {
         DataTableCell.nextParameterId = arg.nextParameterId;

diff --git a/src/stores.ts b/src/stores.ts
@@ -6,7 +6,7 @@ import { BaseCell, type CellTypes } from './cells/BaseCell';
 import MathCell from './cells/MathCell.svelte';
 import DocumentationCell from './cells/DocumentationCell.svelte';
 import TableCell from './cells/TableCell.svelte';
-import DataTableCell from './cells/DataTableCell';
+import DataTableCell from './cells/DataTableCell.svelte';
 import type {MathField} from './cells/MathField.svelte';
 import PiecewiseCell from './cells/PiecewiseCell.svelte';
 import SystemCell from './cells/SystemCell.svelte';

diff --git a/src/types.ts b/src/types.ts
@@ -4,7 +4,7 @@ import type { FluidFunction } from "./cells/FluidCell";
 import type { Statement, SubQueryStatement } from "./parser/types";
 import type { MathField } from "./cells/MathField.svelte";
 import type { CustomBaseUnits, MathCellConfig } from "./sheet/Sheet";
-import type { InterpolationFunction } from "./cells/DataTableCell";
+import type { InterpolationFunction } from "./cells/DataTableCell.svelte";
 
 export type ModalInfo = {
   state: "uploadSheet" | "uploadPending" | "success" | "error" | "requestPersistentStorage" |