open json, array from cell links

packages/web/src/datagrid/DataGridCell.svelte

@@ -40,6 +40,8 @@
   import { arrayToHexString } from 'dbgate-tools';
   import { showModal } from '../modals/modalTools';
   import DictionaryLookupModal from '../modals/DictionaryLookupModal.svelte';
+  import { openJsonDocument } from '../tabs/JsonTab.svelte';
+import openNewTab from '../utility/openNewTab';
 
   export let rowIndex;
   export let col;
@@ -80,6 +82,8 @@
   }
 
   $: style = computeStyle(maxWidth, col);
+
+  $: isJson = _.isPlainObject(value) && !(value?.type == 'Buffer' && _.isArray(value.data)) && !value.$oid;
 </script>
 
 <td
@@ -148,6 +152,31 @@
     <ShowFormButton icon="icon dots-horizontal" on:click={onDictionaryLookup} />
   {/if}
 
+  {#if isJson}
+    <ShowFormButton icon="icon open-in-new" on:click={() => openJsonDocument(value)} />
+  {/if}
+
+  {#if _.isArray(value)}
+    <ShowFormButton
+      icon="icon open-in-new"
+      on:click={() =>
+        openNewTab(
+          {
+            title: 'Data #',
+            icon: 'img free-table',
+            tabComponent: 'FreeTableTab',
+            props: {},
+          },
+          {
+            editor: {
+              rows: value,
+              structure: { __isDynamicStructure: true, columns: [] },
+            },
+          }
+        )}
+    />
+  {/if}
+
   {#if isAutoFillMarker}
     <div class="autoFillMarker autofillHandleMarker" />
   {/if}

packages/web/src/icons/FontIcon.svelte

@@ -27,6 +27,7 @@
     'icon pin': 'mdi mdi-pin',
     'icon arrange': 'mdi mdi-arrange-send-to-back',
     'icon app': 'mdi mdi-layers-triple',
+    'icon open-in-new': 'mdi mdi-open-in-new',
 
     'icon columns': 'mdi mdi-view-column',
     'icon columns-outline': 'mdi mdi-view-column-outline',