A lot of improvements

frontend/src/components/grid-items.svelte

@@ -2,6 +2,7 @@
   import { contextMenu } from '../stores';
   import { createEventDispatcher } from 'svelte';
   import Icon from './icon.svelte';
+  import { resolveKeypath } from '../utils';
 
   export let items = [];
   export let columns = [];
@@ -30,7 +31,7 @@
     if (Array.isArray(obj)) {
       return obj;
     }
-    else if (typeof obj === 'object') {
+    else if ((typeof obj === 'object') && (obj !== null)) {
       return Object.entries(obj).map(([ k, item ]) => ({ ...item, [key]: k }));
     }
     else {
@@ -81,10 +82,10 @@
     if ((value === undefined) || (value === null)) {
       return '';
     }
-    if (new Date(value).toString() !== 'Invalid Date') {
-      return new Date(value);
-    }
-    if (typeof value === 'object') {
+    // if (new Date(value).toString() !== 'Invalid Date') {
+    //   return new Date(value);
+    // }
+    if ((typeof value === 'object') && (value !== null)) {
       return hideObjectIndicators ? '' : '{...}';
     }
     if (String(value).length <= 1000) {
@@ -115,7 +116,7 @@
     </td>
 
     {#each columns as column, columnIndex}
-      {@const value = item[column.key]}
+      {@const value = column.key?.includes('.') ? resolveKeypath(item, column.key) : item[column.key]}
       <td class:right={column.right} title={value}>
         <div class="value" style:margin-left="{level * 10}px">
           {formatValue(value)}

frontend/src/components/grid.svelte

@@ -9,6 +9,7 @@
   export let activePath = [];
   export let striped = true;
   export let hideObjectIndicators = false;
+  export let showHeaders = false;
 </script>
 
 <div class="grid">
@@ -24,6 +25,17 @@
   {/if}
 
   <table>
+    {#if showHeaders && columns.some(col => col.title)}
+      <thead>
+        <tr>
+          <th class="has-toggle"></th>
+          {#each columns as column}
+            <th scope="col">{column.title || ''}</th>
+          {/each}
+        </tr>
+      </thead>
+    {/if}
+
     <tbody>
       <GridItems
         {items}
@@ -60,4 +72,15 @@
     width: 100%;
     background-color: #fff;
   }
+
+  table thead {
+    border-bottom: 2px solid #ccc;
+  }
+  th {
+    font-weight: 600;
+    text-align: left;
+  }
+  th {
+    padding: 2px;
+  }
 </style>

frontend/src/components/icon.svelte

@@ -11,6 +11,12 @@
     <polyline points="9 18 15 12 9 6"></polyline>
   {:else if name === 'chev-d'}
     <polyline points="6 9 12 15 18 9"></polyline>
+  {:else if name === 'chev-u'}
+    <path d="m18 15-6-6-6 6"/>
+  {:else if name === 'chevs-l'}
+    <path d="m11 17-5-5 5-5M18 17l-5-5 5-5"/>
+  {:else if name === 'chevs-r'}
+    <path d="m13 17 5-5-5-5M6 17l5-5-5-5"/>
   {:else if name === 'db'}
     <ellipse cx="12" cy="5" rx="9" ry="3"></ellipse><path d="M21 12c0 1.66-4 3-9 3s-9-1.34-9-3"></path><path d="M3 5v14c0 1.66 4 3 9 3s9-1.34 9-3V5"></path>
   {:else if name === 'x'}
@@ -33,5 +39,7 @@
     <path d="M9 3H5a2 2 0 0 0-2 2v4m6-6h10a2 2 0 0 1 2 2v4M9 3v18m0 0h10a2 2 0 0 0 2-2V9M9 21H5a2 2 0 0 1-2-2V9m0 0h18"/>
   {:else if name === 'cog'}
     <circle cx="12" cy="12" r="3"/><path d="M19.4 15a1.65 1.65 0 0 0 .33 1.82l.06.06a2 2 0 0 1 0 2.83 2 2 0 0 1-2.83 0l-.06-.06a1.65 1.65 0 0 0-1.82-.33 1.65 1.65 0 0 0-1 1.51V21a2 2 0 0 1-2 2 2 2 0 0 1-2-2v-.09A1.65 1.65 0 0 0 9 19.4a1.65 1.65 0 0 0-1.82.33l-.06.06a2 2 0 0 1-2.83 0 2 2 0 0 1 0-2.83l.06-.06a1.65 1.65 0 0 0 .33-1.82 1.65 1.65 0 0 0-1.51-1H3a2 2 0 0 1-2-2 2 2 0 0 1 2-2h.09A1.65 1.65 0 0 0 4.6 9a1.65 1.65 0 0 0-.33-1.82l-.06-.06a2 2 0 0 1 0-2.83 2 2 0 0 1 2.83 0l.06.06a1.65 1.65 0 0 0 1.82.33H9a1.65 1.65 0 0 0 1-1.51V3a2 2 0 0 1 2-2 2 2 0 0 1 2 2v.09a1.65 1.65 0 0 0 1 1.51 1.65 1.65 0 0 0 1.82-.33l.06-.06a2 2 0 0 1 2.83 0 2 2 0 0 1 0 2.83l-.06.06a1.65 1.65 0 0 0-.33 1.82V9a1.65 1.65 0 0 0 1.51 1H21a2 2 0 0 1 2 2 2 2 0 0 1-2 2h-.09a1.65 1.65 0 0 0-1.51 1z"/>
+  {:else if name === 'zap'}
+    <path d="M13 2 3 14h9l-1 8 10-12h-9l1-8z"/>
   {/if}
 </svg>

frontend/src/components/objectgrid.svelte

@@ -42,10 +42,10 @@
       }
       return 'integer';
     }
-    else if (new Date(value).toString() !== 'Invalid Date') {
-      return 'date';
-    }
-    else if (typeof value === 'object') {
+    // else if (new Date(value).toString() !== 'Invalid Date') {
+    //   return 'date';
+    // }
+    else if ((typeof value === 'object') && (value !== null)) {
       const keys = Object.keys(value);
       return `object (${keys.length} item${keys.length === 1 ? '' : 's'})`;
     }

frontend/src/components/objectviewer.svelte

@@ -8,9 +8,19 @@
 
   let copySucceeded = false;
   let timeout;
+  let _data;
+
+  $: if (data) {
+    _data = JSON.parse(JSON.stringify(data));
+    for (const key of Object.keys(_data)) {
+      if (typeof _data[key] === 'undefined') {
+        delete _data[key];
+      }
+    }
+  }
 
   async function copy() {
-    await navigator.clipboard.writeText(JSON.stringify(data));
+    await navigator.clipboard.writeText(JSON.stringify(_data));
     copySucceeded = true;
     timeout = setTimeout(() => copySucceeded = false, 1500);
   }
@@ -19,7 +29,7 @@
 </script>
 
 {#if data}
-  <Modal bind:show={data} title="Object viewer" contentPadding={false}>
+  <Modal bind:show={data} title="Object viewer">
     <div class="objectviewer">
       <div class="buttons">
         <button class="btn" on:click={copy}>
@@ -27,7 +37,7 @@
         </button>
       </div>
       <div class="code">
-        <ObjectTree {data} />
+        <ObjectTree data={_data} />
       </div>
     </div>
   </Modal>
@@ -37,14 +47,10 @@
   .objectviewer {
     position: relative;
   }
-  .code {
-    padding: 1rem;
-  }
   .buttons {
     position: absolute;
     top: 0;
     right: 0;
-    margin: 1rem;
   }
   .buttons button {
     margin-left: 1rem;