From fe61e5e631ce2736d5eea0acaca1cd713182f34f Mon Sep 17 00:00:00 2001
From: Jan Prochazka <jan.prochazka@gmail.com>
Date: Thu, 15 Sep 2022 16:04:44 +0200
Subject: [PATCH] json view in perspective improvement

---
 packages/web/src/jsontree/JSONNested.svelte         |  3 ++-
 packages/web/src/jsontree/JSONTree.svelte           | 13 +++++++++++--
 .../web/src/perspectives/PerspectiveCell.svelte     |  2 +-
 3 files changed, 14 insertions(+), 4 deletions(-)

diff --git a/packages/web/src/jsontree/JSONNested.svelte b/packages/web/src/jsontree/JSONNested.svelte
index fca896309..dcf8f5421 100644
--- a/packages/web/src/jsontree/JSONNested.svelte
+++ b/packages/web/src/jsontree/JSONNested.svelte
@@ -15,8 +15,9 @@
   const context = getContext('json-tree-context-key');
   setContext('json-tree-context-key', { ...context, colon })
   const elementData=getContext('json-tree-element-data');
+  const slicedKeyCount = getContext('json-tree-sliced-key-count');
 
-  $: slicedKeys = expanded ? keys: previewKeys.slice(0, 5);
+  $: slicedKeys = expanded ? keys: previewKeys.slice(0, slicedKeyCount || 5);
 
   $: if (!isParentExpanded) {
     expanded = false;
diff --git a/packages/web/src/jsontree/JSONTree.svelte b/packages/web/src/jsontree/JSONTree.svelte
index ef8071050..1ffe37588 100644
--- a/packages/web/src/jsontree/JSONTree.svelte
+++ b/packages/web/src/jsontree/JSONTree.svelte
@@ -14,12 +14,15 @@
   export let expandAll = false;
   export let expanded = expandAll;
   export let labelOverride = null;
+  export let slicedKeyCount = null;
+  export let disableContextMenu = null;
 
   export let isDeleted = false;
   export let isInserted = false;
   export let isModified = false;
 
   setContext('json-tree-default-expanded', expandAll);
+  if (slicedKeyCount) setContext('json-tree-sliced-key-count', slicedKeyCount);
 
   const elementData = new WeakMap();
 
@@ -69,7 +72,12 @@
   }
 </script>
 
-<ul use:contextMenu={[parentMenu, menu, getElementMenu]} class:isDeleted class:isInserted class:isModified>
+<ul
+  use:contextMenu={disableContextMenu ? '__no_menu' : [parentMenu, menu, getElementMenu]}
+  class:isDeleted
+  class:isInserted
+  class:isModified
+>
   <JSONNode {key} {value} isParentExpanded={true} isParentArray={false} {expanded} {labelOverride} />
 </ul>
 
@@ -101,7 +109,8 @@
     --li-line-height: var(--json-tree-li-line-height, 1.3);
     --li-colon-space: 0.3em;
     font-size: var(--json-tree-font-size, 12px);
-    font-family: var(--json-tree-font-family, 'Courier New', Courier, monospace);
+    /* font-family: var(--json-tree-font-family, 'Courier New', Courier, monospace); */
+    font-family: var(--json-tree-font-family, monospace);
   }
   ul :global(li) {
     line-height: var(--li-line-height);
diff --git a/packages/web/src/perspectives/PerspectiveCell.svelte b/packages/web/src/perspectives/PerspectiveCell.svelte
index 2cf0ab987..c3793a4be 100644
--- a/packages/web/src/perspectives/PerspectiveCell.svelte
+++ b/packages/web/src/perspectives/PerspectiveCell.svelte
@@ -14,7 +14,7 @@
 <td rowspan={rowSpan} data-column={columnIndex}>
   {#if value !== undefined}
     {#if displayType == 'json'}
-      <JSONTree value={safeJsonParse(value)} />
+      <JSONTree value={safeJsonParse(value)} slicedKeyCount={1} disableContextMenu />
     {:else}
       <CellValue {rowData} {value} />
     {/if}