Correct handle placement when there are inputs/outputs on different sides.

web/src/LynxKiteNode.svelte

@@ -34,8 +34,34 @@
   function asPx(n: number | undefined) {
     return n ? n + 'px' : undefined;
   }
-  $: inputs = Object.values(data.meta?.inputs || {});
-  $: outputs = Object.values(data.meta?.outputs || {});
+  function getHandles(inputs, outputs) {
+    const handles: {
+      position: 'top' | 'bottom' | 'left' | 'right',
+      name: string,
+      index: number,
+      offsetPercentage: number,
+      showLabel: boolean,
+    }[] = [];
+    for (const e of Object.values(inputs)) {
+      handles.push({ ...e, type: 'target' });
+    }
+    for (const e of Object.values(outputs)) {
+      handles.push({ ...e, type: 'source' });
+    }
+    const counts = { top: 0, bottom: 0, left: 0, right: 0 };
+    for (const e of handles) {
+      e.index = counts[e.position];
+      counts[e.position]++;
+    }
+    for (const e of handles) {
+      e.offsetPercentage = 100 * (e.index + 1) / (counts[e.position] + 1);
+      const simpleHorizontal = counts.top === 0 && counts.bottom === 0 && handles.length <= 2;
+      const simpleVertical = counts.left === 0 && counts.right === 0 && handles.length <= 2;
+      e.showLabel = !simpleHorizontal && !simpleVertical;
+    }
+    return handles;
+  }
+  $: handles = getHandles(data.meta?.inputs || {}, data.meta?.outputs || {});
   const handleOffsetDirection = { top: 'left', bottom: 'left', left: 'top', right: 'top' };
 </script>
 
@@ -53,18 +79,11 @@
       {/if}
       <slot />
     {/if}
-    {#each inputs as input, i}
-      <Handle
-        id={input.name} type="target" position={input.position}
-        style="{handleOffsetDirection[input.position]}: {100 * (i + 1) / (inputs.length + 1)}%">
-        {#if inputs.length>1}<span class="handle-name">{input.name.replace(/_/g, " ")}</span>{/if}
-      </Handle>
-    {/each}
-    {#each outputs as output, i}
+    {#each handles as handle}
       <Handle
-        id={output.name} type="source" position={output.position}
-        style="{handleOffsetDirection[output.position]}: {100 * (i + 1) / (outputs.length + 1)}%">
-        {#if outputs.length>1}<span class="handle-name">{output.name.replace(/_/g, " ")}</span>{/if}
+        id={handle.name} type={handle.type} position={handle.position}
+        style="{handleOffsetDirection[handle.position]}: {handle.offsetPercentage}%">
+        {#if handle.showLabel}<span class="handle-name">{handle.name.replace(/_/g, " ")}</span>{/if}
       </Handle>
     {/each}
   </div>

web/src/NodeParameter.svelte

@@ -13,6 +13,7 @@
     </button>
   {:else if meta?.type?.format === 'textarea'}
     <textarea class="form-control form-control-sm"
+    rows="6"
     value={value}
     on:change={(evt) => onChange(evt.currentTarget.value)}
     />

web/src/NodeWithTableView.svelte

@@ -11,7 +11,7 @@
 
 <LynxKiteNode {...$$props}>
   {#if data.display}
-    {#each Object.entries(data.display.dataframes) as [name, df]}
+    {#each Object.entries(data.display.dataframes || {}) as [name, df]}
       {#if !single}<div class="df-head" on:click={() => open[name] = !open[name]}>{name}</div>{/if}
       {#if single || open[name]}
         <Table columns={df.columns} data={df.data} />

web/src/Table.svelte

@@ -1,4 +1,4 @@
-<script>
+<script lang="ts">
   import {TabulatorFull as Tabulator} from 'tabulator-tables';
   import {onMount} from 'svelte';
 
@@ -14,7 +14,11 @@
     for (const row of data) {
       const obj = {};
       for (let i = 0; i < columns.length; i++) {
-        obj[columns[i]] = row[i];
+        let d = row[i];
+        if (typeof d !== 'string' && typeof d !== 'number') {
+          d = JSON.stringify(d);
+        }
+        obj[columns[i]] = d;
       }
       objs.push(obj);
     }