json view

packages/web/src/celldata/JsonCellView.svelte

@@ -1,4 +1,5 @@
 <script lang="ts">
+  import _ from 'lodash';
   import JSONTree from 'svelte-json-tree';
   import ErrorInfo from '../elements/ErrorInfo.svelte';
 
@@ -8,7 +9,8 @@
   let error = null;
 
   $: try {
-    json = JSON.parse(selection[0].value);
+    const value = selection[0].value;
+    json = _.isPlainObject(value) || _.isArray(value) ? value : JSON.parse(value);
     error = null;
   } catch (err) {
     error = err.message;
@@ -16,7 +18,7 @@
 </script>
 
 {#if error}
-  <ErrorInfo message="Error parsing JSON" />
+  <ErrorInfo message="Error parsing JSON" alignTop />
 {:else}
   <div class="outer">
     <div class="inner">

packages/web/src/datagrid/DataGridCell.svelte

@@ -59,8 +59,10 @@
   {#if hideContent}
     <slot />
   {:else}
-    {#if value == null}
+    {#if value === null}
       <span class="null">(NULL)</span>
+    {:else if value === undefined}
+      <span class="null">(No field)</span>
     {:else if _.isDate(value)}
       {moment(value).format('YYYY-MM-DD HH:mm:ss')}
     {:else if value === true}
@@ -79,16 +81,12 @@
       {:else}
         {highlightSpecialCharacters(value)}
       {/if}
+    {:else if value.type == 'Buffer' && _.isArray(value.data)}
+      <span class="null">({value.data.length} bytes)</span>
     {:else if _.isPlainObject(value)}
-      {#if _.isArray(value.data)}
+      <span class="null">(JSON)</span>
-        {#if value.data.length == 1 && isTypeLogical(col.dataType)}
+    {:else if _.isArray(value)}
-          {value.data[0]}
+      <span class="null">[{value.length} items]</span>
-        {:else}
-          <span class="null">({value.data.length} bytes)</span>
-        {/if}
-      {:else}
-        <span class="null">(RAW)</span>
-      {/if}
     {:else}
       {value.toString()}
     {/if}
@@ -103,6 +101,15 @@
   {/if}
 </td>
 
+<!-- {#if _.isArray(value.data)}
+{#if value.data.length == 1 && isTypeLogical(col.dataType)}
+  {value.data[0]}
+{:else}
+  <span class="null">({value.data.length} bytes)</span>
+{/if}
+{:else}
+<span class="null">(RAW)</span>
+{/if} -->
 <style>
   td {
     font-weight: normal;

packages/web/src/elements/ErrorInfo.svelte

@@ -4,6 +4,7 @@
   export let message;
   export let icon = 'img error';
   export let isSmall = false;
+  export let alignTop = false;
 </script>
 
 {#if isSmall}
@@ -11,6 +12,15 @@
     <FontIcon {icon} />
     {message || 'Unknown error'}
   </div>
+{:else if alignTop}
+  <div>
+    <div class="container">
+      <div class="icon">
+        <FontIcon {icon} />
+      </div>
+      {message || 'Unknown error'}
+    </div>
+  </div>
 {:else}
   <div class="container">
     <div class="icon">
@@ -23,8 +33,8 @@
 <style>
   .container {
     display: flex;
-    align-items: center;
     margin-right: 10px;
+    align-items: center;
   }
   .icon {
     font-size: 20pt;

packages/web/src/widgets/CellDataWidget.svelte

@@ -25,6 +25,9 @@
     if (_.isString(value)) {
       if (value.startsWith('[') || value.startsWith('{')) return 'json';
     }
+    if (_.isPlainObject(value) || _.isArray(value)) {
+      return 'json';
+    }
     return 'textWrap';
   }
 
@@ -75,11 +78,11 @@
     </div>
     <div class="data">
       {#if usedFormat.single && selection?.length != 1}
-        <ErrorInfo message="Must be selected one cell" />
+        <ErrorInfo message="Must be selected one cell" alignTop />
       {:else if usedFormat == null}
-        <ErrorInfo message="Format not selected" />
+        <ErrorInfo message="Format not selected" alignTop />
       {:else if !selection || selection.length == 0}
-        <ErrorInfo message="No data selected" />
+        <ErrorInfo message="No data selected" alignTop />
       {:else}
         <svelte:component this={usedFormat?.component} {selection} />
       {/if}