perspective inline json view

packages/datalib/src/PerspectiveConfig.ts

@@ -61,6 +61,7 @@ export interface PerspectiveNodeConfig {
 
   expandedColumns: string[];
   checkedColumns: string[];
+  columnDisplays: {};
   // uncheckedColumns: string[];
 
   sort: {
@@ -107,6 +108,7 @@ export function createPerspectiveNodeConfig(name: { schemaName?: string; pureNam
 
     expandedColumns: [],
     checkedColumns: [],
+    columnDisplays: {},
 
     sort: [],
     filters: {},

packages/datalib/src/PerspectiveDisplay.ts

@@ -16,6 +16,7 @@ function getJoinId(): number {
 export class PerspectiveDisplayColumn {
   title: string;
   dataField: string;
+  displayType: string;
   parentNodes: PerspectiveTreeNode[] = [];
   colSpanAtLevel = {};
   columnIndex = 0;
@@ -140,6 +141,7 @@ export class PerspectiveDisplay {
       column.display = this;
       column.columnIndex = this.columns.length;
       column.dataNode = node;
+      column.displayType = node.parentNodeConfig?.columnDisplays?.[node.columnName];
       this.columns.push(column);
     }
 

packages/web/src/jsontree/JSONTree.svelte

@@ -15,9 +15,9 @@
   export let expanded = expandAll;
   export let labelOverride = null;
 
-  export let isDeleted;
-  export let isInserted;
-  export let isModified;
+  export let isDeleted = false;
+  export let isInserted = false;
+  export let isModified = false;
 
   setContext('json-tree-default-expanded', expandAll);
 

packages/web/src/perspectives/PerspectiveCell.svelte

@@ -1,15 +1,23 @@
 <script lang="ts">
+  import { safeJsonParse } from 'dbgate-tools';
+
   import CellValue from '../datagrid/CellValue.svelte';
+  import JSONTree from '../jsontree/JSONTree.svelte';
 
   export let value;
   export let rowSpan;
   export let rowData;
   export let columnIndex;
+  export let displayType;
 </script>
 
 <td rowspan={rowSpan} data-column={columnIndex}>
   {#if value !== undefined}
-    <CellValue {rowData} {value} />
+    {#if displayType == 'json'}
+      <JSONTree value={safeJsonParse(value)} />
+    {:else}
+      <CellValue {rowData} {value} />
+    {/if}
   {/if}
 </td>
 

packages/web/src/perspectives/PerspectiveTable.svelte

@@ -166,6 +166,7 @@
   function buildMenu({ targetElement, registerCloseHandler }) {
     const res = [];
     const td = targetElement.closest('td') || targetElement.closest('th');
+    const isHeader = !!targetElement.closest('th');
 
     if (td) {
       const tr = td.closest('tr');
@@ -213,6 +214,40 @@
         });
       }
 
+      const setColumnDisplay = type => {
+        setConfig(cfg => ({
+          ...cfg,
+          nodes: cfg.nodes.map(n =>
+            n.designerId == column?.dataNode?.parentNode?.designerId
+              ? {
+                  ...n,
+                  columnDisplays: { ...n.columnDisplays, [column.dataNode.columnName]: type },
+                }
+              : n
+          ),
+        }));
+      };
+
+      if (isHeader && !tableNode?.headerTableAttributes) {
+        res.push({
+          text: `Change display (${
+            config.nodes.find(x => x.designerId == column?.dataNode?.parentNode?.designerId)?.columnDisplays?.[
+              column.dataNode.columnName
+            ] || 'default'
+          })`,
+          submenu: [
+            {
+              text: 'JSON',
+              onClick: () => setColumnDisplay('json'),
+            },
+            {
+              text: 'Default',
+              onClick: () => setColumnDisplay('default'),
+            },
+          ],
+        });
+      }
+
       if (tableNode?.supportsParentFilter) {
         const isParentFilter = tableNode?.isParentFilter;
         res.push({
@@ -458,6 +493,7 @@
                   value={row.rowData[column.columnIndex]}
                   rowSpan={row.rowSpans[column.columnIndex]}
                   rowData={row.rowData}
+                  displayType={column.displayType}
                 />
               {/if}
             {/each}