Update JS dependencies.

web/package.json

@@ -10,28 +10,27 @@
     "check": "svelte-check --tsconfig ./tsconfig.json"
   },
   "devDependencies": {
-    "@sveltejs/vite-plugin-svelte": "^3.0.2",
-    "@syncedstore/core": "^0.6.0",
-    "@syncedstore/svelte": "^0.6.0",
-    "@tsconfig/svelte": "^5.0.4",
-    "sass": "^1.77.2",
-    "svelte": "^4.2.12",
-    "svelte-check": "^3.6.9",
-    "tslib": "^2.6.2",
-    "typescript": "^5.4.4",
-    "unplugin-icons": "^0.18.5",
-    "vite": "^5.2.8",
-    "y-websocket": "^2.0.4"
+    "@sveltejs/vite-plugin-svelte": "3.1.2",
+    "@syncedstore/core": "0.6.0",
+    "@syncedstore/svelte": "0.6.0",
+    "@tsconfig/svelte": "5.0.4",
+    "sass": "1.79.5",
+    "svelte": "4.2.19",
+    "svelte-check": "4.0.5",
+    "tslib": "2.7.0",
+    "typescript": "5.6.3",
+    "unplugin-icons": "0.19.3",
+    "vite": "5.4.9",
+    "y-websocket": "2.0.4"
   },
   "dependencies": {
-    "@iconify-json/tabler": "^1.1.110",
-    "@popperjs/core": "^2.11.8",
-    "@sveltestack/svelte-query": "^1.6.0",
-    "@xyflow/svelte": "^0.1.3",
-    "bootstrap": "^5.3.3",
-    "echarts": "^5.5.0",
-    "fuse.js": "^7.0.0",
-    "svelte-echarts": "^1.0.0-rc1",
-    "tabulator-tables": "^6.2.1"
+    "@iconify-json/tabler": "1.2.5",
+    "@popperjs/core": "2.11.8",
+    "@sveltestack/svelte-query": "1.6.0",
+    "@xyflow/svelte": "0.1.21",
+    "bootstrap": "5.3.3",
+    "echarts": "5.5.1",
+    "fuse.js": "7.0.0",
+    "svelte-echarts": "^1.0.0-rc3"
   }
 }

web/src/LynxKiteNode.svelte

@@ -11,6 +11,10 @@
   export let containerStyle = '';
   export let id: $$Props['id']; id;
   export let data: $$Props['data'];
+  export let deletable: $$Props['deletable'] = undefined; deletable;
+  export let draggable: $$Props['draggable'] = undefined; draggable;
+  export let parentId: $$Props['parentId'] = undefined; parentId;
+  export let selectable: $$Props['selectable'] = undefined; selectable;
   export let dragHandle: $$Props['dragHandle'] = undefined; dragHandle;
   export let type: $$Props['type']  = undefined; type;
   export let selected: $$Props['selected'] = undefined; selected;

web/src/NodeWithVisualization.svelte

@@ -5,7 +5,7 @@
   import { init } from 'echarts';
   type $$Props = NodeProps;
   export let data: $$Props['data'];
-  $: display = JSON.parse(JSON.stringify(data?.display?.value));
+  $: display = data?.display?.value ? JSON.parse(JSON.stringify(data.display.value)) : {};
 </script>
 
 <NodeWithParams {...$$props}>

web/src/Table.svelte

@@ -1,38 +1,22 @@
 <script lang="ts">
-  import {TabulatorFull as Tabulator} from 'tabulator-tables';
-  import {onMount} from 'svelte';
-
   export let data, columns;
-
-  let tableComponent;
-  let tab;
-
-  // The rows in the data are arrays, but Tabulator expects objects.
-  const objs = [];
-  $: {
-    objs.splice();
-    for (const row of data) {
-      const obj = {};
-      for (let i = 0; i < columns.length; i++) {
-        let d = row[i];
-        if (typeof d !== 'string' && typeof d !== 'number') {
-          d = JSON.stringify(d);
-        }
-        obj[columns[i]] = d;
-      }
-      objs.push(obj);
-    }
-  }
-
-  onMount(() => {
-    tab = new Tabulator(tableComponent, {
-      data: objs,
-      columns: columns.map(c => ({title: c, field: c, widthGrow: 1})),
-      height: '311px',
-      reactiveData: true,
-      layout: "fitColumns",
-    });
-  });
 </script>
 
-<div bind:this={tableComponent}></div>
+<table>
+  <thead>
+    <tr>
+      {#each columns as column}
+        <th>{column}</th>
+      {/each}
+    </tr>
+  </thead>
+  <tbody>
+    {#each data as row}
+      <tr>
+        {#each columns as column}
+          <td>{row[column]}</td>
+        {/each}
+      </tr>
+    {/each}
+  </tbody>
+</table>

web/src/app.scss

@@ -1,7 +1,6 @@
 // Import all of Bootstrap's CSS
 $form-select-indicator-color: oklch(90% 0.01 55);
 @import "bootstrap/scss/bootstrap";
-@import "tabulator-tables";
 :root {
   --bs-border-color: oklch(90% 0.01 55);
 }