From f5474ff79198a2f5a145d0a9df1bb651ea677ec5 Mon Sep 17 00:00:00 2001
From: Ricardo Espinoza <ricardo@n8n.io>
Date: Thu, 19 Sep 2024 08:43:09 -0400
Subject: [PATCH] perf(editor): Use virtual scrolling in `RunDataJson.vue`
 (#10838)

---
 .../editor-ui/src/components/RunDataJson.vue  |   15 +-
 .../components/__tests__/RunDataJson.test.ts  |   28 +-
 .../__snapshots__/RunDataJson.test.ts.snap    | 1575 +++++++++--------
 3 files changed, 823 insertions(+), 795 deletions(-)

diff --git a/packages/editor-ui/src/components/RunDataJson.vue b/packages/editor-ui/src/components/RunDataJson.vue
index ae8945cdd0..ab7c2a2706 100644
--- a/packages/editor-ui/src/components/RunDataJson.vue
+++ b/packages/editor-ui/src/components/RunDataJson.vue
@@ -14,6 +14,7 @@ import { nonExistingJsonPath } from '@/constants';
 import { useExternalHooks } from '@/composables/useExternalHooks';
 import TextWithHighlights from './TextWithHighlights.vue';
 import { useTelemetry } from '@/composables/useTelemetry';
+import { useElementSize } from '@vueuse/core';
 
 const LazyRunDataJsonActions = defineAsyncComponent(
 	async () => await import('@/components/RunDataJsonActions.vue'),
@@ -45,6 +46,9 @@ const telemetry = useTelemetry();
 const selectedJsonPath = ref(nonExistingJsonPath);
 const draggingPath = ref<null | string>(null);
 const displayMode = ref('json');
+const jsonDataContainer = ref(null);
+
+const { height } = useElementSize(jsonDataContainer);
 
 const jsonData = computed(() => executionDataToJson(props.inputData));
 
@@ -110,7 +114,7 @@ const getListItemName = (path: string) => {
 </script>
 
 <template>
-	<div :class="[$style.jsonDisplay, { [$style.highlight]: highlight }]">
+	<div ref="jsonDataContainer" :class="[$style.jsonDisplay, { [$style.highlight]: highlight }]">
 		<Suspense>
 			<LazyRunDataJsonActions
 				v-if="!editMode.enabled"
@@ -141,6 +145,8 @@ const getListItemName = (path: string) => {
 				root-path=""
 				selectable-type="single"
 				class="json-data"
+				:virtual="true"
+				:height="height"
 				@update:selected-value="selectedJsonPath = $event"
 			>
 				<template #renderNodeKey="{ node }">
@@ -192,11 +198,10 @@ const getListItemName = (path: string) => {
 	left: 0;
 	padding-left: var(--spacing-s);
 	right: 0;
-	overflow-y: auto;
+	overflow-y: hidden;
 	line-height: 1.5;
 	word-break: normal;
 	height: 100%;
-	padding-bottom: var(--spacing-3xl);
 
 	&:hover {
 		/* Shows .actionsGroup element from <run-data-json-actions /> child component */
@@ -299,4 +304,8 @@ const getListItemName = (path: string) => {
 .vjs-tree .vjs-tree__content.has-line {
 	border-left: 1px dotted var(--color-json-line);
 }
+
+.vjs-tree .vjs-tree-list-holder-inner {
+	padding-bottom: var(--spacing-3xl);
+}
 </style>
diff --git a/packages/editor-ui/src/components/__tests__/RunDataJson.test.ts b/packages/editor-ui/src/components/__tests__/RunDataJson.test.ts
index 0016b54a2d..83a863e0fb 100644
--- a/packages/editor-ui/src/components/__tests__/RunDataJson.test.ts
+++ b/packages/editor-ui/src/components/__tests__/RunDataJson.test.ts
@@ -2,6 +2,22 @@ import { createTestingPinia } from '@pinia/testing';
 import { screen, cleanup } from '@testing-library/vue';
 import RunDataJson from '@/components/RunDataJson.vue';
 import { createComponentRenderer } from '@/__tests__/render';
+import { useElementSize } from '@vueuse/core'; // Import the composable to mock
+
+vi.mock('@vueuse/core', async () => {
+	// eslint-disable-next-line @typescript-eslint/consistent-type-imports
+	const originalModule = await vi.importActual<typeof import('@vueuse/core')>('@vueuse/core');
+
+	return {
+		...originalModule, // Keep all original exports
+		useElementSize: vi.fn(), // Mock useElementSize
+	};
+});
+
+(useElementSize as jest.Mock).mockReturnValue({
+	height: 500, // Mocked height value
+	width: 300, // Mocked width value
+});
 
 const renderComponent = createComponentRenderer(RunDataJson, {
 	props: {
@@ -34,18 +50,6 @@ const renderComponent = createComponentRenderer(RunDataJson, {
 			disabled: false,
 		},
 	},
-	global: {
-		mocks: {
-			$locale: {
-				baseText() {
-					return '';
-				},
-			},
-			$store: {
-				getters: {},
-			},
-		},
-	},
 });
 
 describe('RunDataJson.vue', () => {
diff --git a/packages/editor-ui/src/components/__tests__/__snapshots__/RunDataJson.test.ts.snap b/packages/editor-ui/src/components/__tests__/__snapshots__/RunDataJson.test.ts.snap
index 7c4494b119..66582e94a9 100644
--- a/packages/editor-ui/src/components/__tests__/__snapshots__/RunDataJson.test.ts.snap
+++ b/packages/editor-ui/src/components/__tests__/__snapshots__/RunDataJson.test.ts.snap
@@ -11,822 +11,837 @@ exports[`RunDataJson.vue > renders json values properly 1`] = `
     >
       
       <div
-        class="vjs-tree json-data"
+        class="vjs-tree is-virtual json-data"
       >
-        
         <div
-          class="vjs-tree-node"
+          class="vjs-tree-list"
+          style="height: 500px;"
         >
-          <!---->
-          <!---->
           <div
-            class="vjs-indent"
+            class="vjs-tree-list-holder"
+            style="height: 340px;"
           >
-            
-            
-            <!---->
-          </div>
-          <!---->
-          <span>
-            <span
-              class="vjs-tree-brackets"
-            >
-              [
-            </span>
-            <!---->
-            <!---->
-          </span>
-        </div>
-        <div
-          class="vjs-tree-node"
-        >
-          <!---->
-          <!---->
-          <div
-            class="vjs-indent"
-          >
-            
             <div
-              class="vjs-indent-unit has-line"
-            />
-            
-            <!---->
-          </div>
-          <!---->
-          <span>
-            <span
-              class="vjs-tree-brackets"
-            >
-              {
-            </span>
-            <!---->
-            <!---->
-          </span>
-        </div>
-        <div
-          class="vjs-tree-node"
-        >
-          <!---->
-          <!---->
-          <div
-            class="vjs-indent"
-          >
-            
-            <div
-              class="vjs-indent-unit has-line"
-            />
-            <div
-              class="vjs-indent-unit has-line"
-            />
-            
-            <!---->
-          </div>
-          <span
-            class="vjs-key"
-          >
-            
-            <span
-              class="content mappable"
-              data-depth="2"
-              data-name="list"
-              data-path="[0].list"
-              data-target="mappable"
-              data-value="{{ $('Set').item.json.list }}"
+              class="vjs-tree-list-holder-inner"
+              style="transform: translateY(0px);"
             >
               
-              <span>
-                <!--v-if-->
-                "list"
-              </span>
-              
-            </span>
-            
-            <span
-              class="vjs-colon"
-            >
-              : 
-            </span>
-          </span>
-          <span>
-            <span
-              class="vjs-tree-brackets"
-            >
-              [
-            </span>
-            <!---->
-            <!---->
-          </span>
-        </div>
-        <div
-          class="vjs-tree-node"
-        >
-          <!---->
-          <!---->
-          <div
-            class="vjs-indent"
-          >
-            
-            <div
-              class="vjs-indent-unit has-line"
-            />
-            <div
-              class="vjs-indent-unit has-line"
-            />
-            <div
-              class="vjs-indent-unit has-line"
-            />
-            
-            <!---->
-          </div>
-          <!---->
-          <span>
-            <span
-              class="vjs-value vjs-value-number"
-            >
-              
-              <span
-                class="content mappable ph-no-capture"
-                data-depth="3"
-                data-name="list[0]"
-                data-path="[0].list[0]"
-                data-target="mappable"
-                data-value="{{ $('Set').item.json.list[0] }}"
+              <div
+                class="vjs-tree-node"
               >
-                
+                <!---->
+                <!---->
+                <div
+                  class="vjs-indent"
+                >
+                  
+                  
+                  <!---->
+                </div>
+                <!---->
                 <span>
-                  <!--v-if-->
-                  1
+                  <span
+                    class="vjs-tree-brackets"
+                  >
+                    [
+                  </span>
+                  <!---->
+                  <!---->
                 </span>
-                
-              </span>
-              
-            </span>
-            <span>
-              ,
-            </span>
-            <!---->
-          </span>
-        </div>
-        <div
-          class="vjs-tree-node"
-        >
-          <!---->
-          <!---->
-          <div
-            class="vjs-indent"
-          >
-            
-            <div
-              class="vjs-indent-unit has-line"
-            />
-            <div
-              class="vjs-indent-unit has-line"
-            />
-            <div
-              class="vjs-indent-unit has-line"
-            />
-            
-            <!---->
-          </div>
-          <!---->
-          <span>
-            <span
-              class="vjs-value vjs-value-number"
-            >
-              
-              <span
-                class="content mappable ph-no-capture"
-                data-depth="3"
-                data-name="list[1]"
-                data-path="[0].list[1]"
-                data-target="mappable"
-                data-value="{{ $('Set').item.json.list[1] }}"
+              </div>
+              <div
+                class="vjs-tree-node"
               >
-                
+                <!---->
+                <!---->
+                <div
+                  class="vjs-indent"
+                >
+                  
+                  <div
+                    class="vjs-indent-unit has-line"
+                  />
+                  
+                  <!---->
+                </div>
+                <!---->
                 <span>
-                  <!--v-if-->
-                  2
+                  <span
+                    class="vjs-tree-brackets"
+                  >
+                    {
+                  </span>
+                  <!---->
+                  <!---->
                 </span>
-                
-              </span>
-              
-            </span>
-            <span>
-              ,
-            </span>
-            <!---->
-          </span>
-        </div>
-        <div
-          class="vjs-tree-node"
-        >
-          <!---->
-          <!---->
-          <div
-            class="vjs-indent"
-          >
-            
-            <div
-              class="vjs-indent-unit has-line"
-            />
-            <div
-              class="vjs-indent-unit has-line"
-            />
-            <div
-              class="vjs-indent-unit has-line"
-            />
-            
-            <!---->
-          </div>
-          <!---->
-          <span>
-            <span
-              class="vjs-value vjs-value-number"
-            >
-              
-              <span
-                class="content mappable ph-no-capture"
-                data-depth="3"
-                data-name="list[2]"
-                data-path="[0].list[2]"
-                data-target="mappable"
-                data-value="{{ $('Set').item.json.list[2] }}"
+              </div>
+              <div
+                class="vjs-tree-node"
               >
-                
+                <!---->
+                <!---->
+                <div
+                  class="vjs-indent"
+                >
+                  
+                  <div
+                    class="vjs-indent-unit has-line"
+                  />
+                  <div
+                    class="vjs-indent-unit has-line"
+                  />
+                  
+                  <!---->
+                </div>
+                <span
+                  class="vjs-key"
+                >
+                  
+                  <span
+                    class="content mappable"
+                    data-depth="2"
+                    data-name="list"
+                    data-path="[0].list"
+                    data-target="mappable"
+                    data-value="{{ $('Set').item.json.list }}"
+                  >
+                    
+                    <span>
+                      <!--v-if-->
+                      "list"
+                    </span>
+                    
+                  </span>
+                  
+                  <span
+                    class="vjs-colon"
+                  >
+                    : 
+                  </span>
+                </span>
                 <span>
-                  <!--v-if-->
-                  3
+                  <span
+                    class="vjs-tree-brackets"
+                  >
+                    [
+                  </span>
+                  <!---->
+                  <!---->
                 </span>
-                
-              </span>
-              
-            </span>
-            <!---->
-            <!---->
-          </span>
-        </div>
-        <div
-          class="vjs-tree-node"
-        >
-          <!---->
-          <!---->
-          <div
-            class="vjs-indent"
-          >
-            
-            <div
-              class="vjs-indent-unit has-line"
-            />
-            <div
-              class="vjs-indent-unit has-line"
-            />
-            
-            <!---->
-          </div>
-          <!---->
-          <span>
-            <span
-              class="vjs-tree-brackets"
-            >
-              ]
-            </span>
-            <span>
-              ,
-            </span>
-            <!---->
-          </span>
-        </div>
-        <div
-          class="vjs-tree-node"
-        >
-          <!---->
-          <!---->
-          <div
-            class="vjs-indent"
-          >
-            
-            <div
-              class="vjs-indent-unit has-line"
-            />
-            <div
-              class="vjs-indent-unit has-line"
-            />
-            
-            <!---->
-          </div>
-          <span
-            class="vjs-key"
-          >
-            
-            <span
-              class="content mappable"
-              data-depth="2"
-              data-name="record"
-              data-path="[0].record"
-              data-target="mappable"
-              data-value="{{ $('Set').item.json.record }}"
-            >
-              
-              <span>
-                <!--v-if-->
-                "record"
-              </span>
-              
-            </span>
-            
-            <span
-              class="vjs-colon"
-            >
-              : 
-            </span>
-          </span>
-          <span>
-            <span
-              class="vjs-tree-brackets"
-            >
-              {
-            </span>
-            <!---->
-            <!---->
-          </span>
-        </div>
-        <div
-          class="vjs-tree-node"
-        >
-          <!---->
-          <!---->
-          <div
-            class="vjs-indent"
-          >
-            
-            <div
-              class="vjs-indent-unit has-line"
-            />
-            <div
-              class="vjs-indent-unit has-line"
-            />
-            <div
-              class="vjs-indent-unit has-line"
-            />
-            
-            <!---->
-          </div>
-          <span
-            class="vjs-key"
-          >
-            
-            <span
-              class="content mappable"
-              data-depth="3"
-              data-name="name"
-              data-path="[0].record.name"
-              data-target="mappable"
-              data-value="{{ $('Set').item.json.record.name }}"
-            >
-              
-              <span>
-                <!--v-if-->
-                "name"
-              </span>
-              
-            </span>
-            
-            <span
-              class="vjs-colon"
-            >
-              : 
-            </span>
-          </span>
-          <span>
-            <span
-              class="vjs-value vjs-value-string"
-            >
-              
-              <span
-                class="content"
+              </div>
+              <div
+                class="vjs-tree-node"
               >
-                
+                <!---->
+                <!---->
+                <div
+                  class="vjs-indent"
+                >
+                  
+                  <div
+                    class="vjs-indent-unit has-line"
+                  />
+                  <div
+                    class="vjs-indent-unit has-line"
+                  />
+                  <div
+                    class="vjs-indent-unit has-line"
+                  />
+                  
+                  <!---->
+                </div>
+                <!---->
                 <span>
-                  <!--v-if-->
-                  "Joe"
+                  <span
+                    class="vjs-value vjs-value-number"
+                  >
+                    
+                    <span
+                      class="content mappable ph-no-capture"
+                      data-depth="3"
+                      data-name="list[0]"
+                      data-path="[0].list[0]"
+                      data-target="mappable"
+                      data-value="{{ $('Set').item.json.list[0] }}"
+                    >
+                      
+                      <span>
+                        <!--v-if-->
+                        1
+                      </span>
+                      
+                    </span>
+                    
+                  </span>
+                  <span>
+                    ,
+                  </span>
+                  <!---->
                 </span>
-                
-              </span>
-              
-            </span>
-            <!---->
-            <!---->
-          </span>
-        </div>
-        <div
-          class="vjs-tree-node"
-        >
-          <!---->
-          <!---->
-          <div
-            class="vjs-indent"
-          >
-            
-            <div
-              class="vjs-indent-unit has-line"
-            />
-            <div
-              class="vjs-indent-unit has-line"
-            />
-            
-            <!---->
-          </div>
-          <!---->
-          <span>
-            <span
-              class="vjs-tree-brackets"
-            >
-              }
-            </span>
-            <span>
-              ,
-            </span>
-            <!---->
-          </span>
-        </div>
-        <div
-          class="vjs-tree-node"
-        >
-          <!---->
-          <!---->
-          <div
-            class="vjs-indent"
-          >
-            
-            <div
-              class="vjs-indent-unit has-line"
-            />
-            <div
-              class="vjs-indent-unit has-line"
-            />
-            
-            <!---->
-          </div>
-          <span
-            class="vjs-key"
-          >
-            
-            <span
-              class="content mappable"
-              data-depth="2"
-              data-name="myNumber"
-              data-path="[0].myNumber"
-              data-target="mappable"
-              data-value="{{ $('Set').item.json.myNumber }}"
-            >
-              
-              <span>
-                <!--v-if-->
-                "myNumber"
-              </span>
-              
-            </span>
-            
-            <span
-              class="vjs-colon"
-            >
-              : 
-            </span>
-          </span>
-          <span>
-            <span
-              class="vjs-value vjs-value-number"
-            >
-              
-              <span
-                class="content"
+              </div>
+              <div
+                class="vjs-tree-node"
               >
-                
+                <!---->
+                <!---->
+                <div
+                  class="vjs-indent"
+                >
+                  
+                  <div
+                    class="vjs-indent-unit has-line"
+                  />
+                  <div
+                    class="vjs-indent-unit has-line"
+                  />
+                  <div
+                    class="vjs-indent-unit has-line"
+                  />
+                  
+                  <!---->
+                </div>
+                <!---->
                 <span>
-                  <!--v-if-->
-                  123
+                  <span
+                    class="vjs-value vjs-value-number"
+                  >
+                    
+                    <span
+                      class="content mappable ph-no-capture"
+                      data-depth="3"
+                      data-name="list[1]"
+                      data-path="[0].list[1]"
+                      data-target="mappable"
+                      data-value="{{ $('Set').item.json.list[1] }}"
+                    >
+                      
+                      <span>
+                        <!--v-if-->
+                        2
+                      </span>
+                      
+                    </span>
+                    
+                  </span>
+                  <span>
+                    ,
+                  </span>
+                  <!---->
                 </span>
-                
-              </span>
-              
-            </span>
-            <span>
-              ,
-            </span>
-            <!---->
-          </span>
-        </div>
-        <div
-          class="vjs-tree-node"
-        >
-          <!---->
-          <!---->
-          <div
-            class="vjs-indent"
-          >
-            
-            <div
-              class="vjs-indent-unit has-line"
-            />
-            <div
-              class="vjs-indent-unit has-line"
-            />
-            
-            <!---->
-          </div>
-          <span
-            class="vjs-key"
-          >
-            
-            <span
-              class="content mappable"
-              data-depth="2"
-              data-name="myStringNumber"
-              data-path="[0].myStringNumber"
-              data-target="mappable"
-              data-value="{{ $('Set').item.json.myStringNumber }}"
-            >
-              
-              <span>
-                <!--v-if-->
-                "myStringNumber"
-              </span>
-              
-            </span>
-            
-            <span
-              class="vjs-colon"
-            >
-              : 
-            </span>
-          </span>
-          <span>
-            <span
-              class="vjs-value vjs-value-string"
-            >
-              
-              <span
-                class="content"
+              </div>
+              <div
+                class="vjs-tree-node"
               >
-                
+                <!---->
+                <!---->
+                <div
+                  class="vjs-indent"
+                >
+                  
+                  <div
+                    class="vjs-indent-unit has-line"
+                  />
+                  <div
+                    class="vjs-indent-unit has-line"
+                  />
+                  <div
+                    class="vjs-indent-unit has-line"
+                  />
+                  
+                  <!---->
+                </div>
+                <!---->
                 <span>
-                  <!--v-if-->
-                  "456"
+                  <span
+                    class="vjs-value vjs-value-number"
+                  >
+                    
+                    <span
+                      class="content mappable ph-no-capture"
+                      data-depth="3"
+                      data-name="list[2]"
+                      data-path="[0].list[2]"
+                      data-target="mappable"
+                      data-value="{{ $('Set').item.json.list[2] }}"
+                    >
+                      
+                      <span>
+                        <!--v-if-->
+                        3
+                      </span>
+                      
+                    </span>
+                    
+                  </span>
+                  <!---->
+                  <!---->
                 </span>
-                
-              </span>
-              
-            </span>
-            <span>
-              ,
-            </span>
-            <!---->
-          </span>
-        </div>
-        <div
-          class="vjs-tree-node"
-        >
-          <!---->
-          <!---->
-          <div
-            class="vjs-indent"
-          >
-            
-            <div
-              class="vjs-indent-unit has-line"
-            />
-            <div
-              class="vjs-indent-unit has-line"
-            />
-            
-            <!---->
-          </div>
-          <span
-            class="vjs-key"
-          >
-            
-            <span
-              class="content mappable"
-              data-depth="2"
-              data-name="myStringText"
-              data-path="[0].myStringText"
-              data-target="mappable"
-              data-value="{{ $('Set').item.json.myStringText }}"
-            >
-              
-              <span>
-                <!--v-if-->
-                "myStringText"
-              </span>
-              
-            </span>
-            
-            <span
-              class="vjs-colon"
-            >
-              : 
-            </span>
-          </span>
-          <span>
-            <span
-              class="vjs-value vjs-value-string"
-            >
-              
-              <span
-                class="content"
+              </div>
+              <div
+                class="vjs-tree-node"
               >
-                
+                <!---->
+                <!---->
+                <div
+                  class="vjs-indent"
+                >
+                  
+                  <div
+                    class="vjs-indent-unit has-line"
+                  />
+                  <div
+                    class="vjs-indent-unit has-line"
+                  />
+                  
+                  <!---->
+                </div>
+                <!---->
                 <span>
-                  <!--v-if-->
-                  "abc"
+                  <span
+                    class="vjs-tree-brackets"
+                  >
+                    ]
+                  </span>
+                  <span>
+                    ,
+                  </span>
+                  <!---->
                 </span>
-                
-              </span>
-              
-            </span>
-            <span>
-              ,
-            </span>
-            <!---->
-          </span>
-        </div>
-        <div
-          class="vjs-tree-node"
-        >
-          <!---->
-          <!---->
-          <div
-            class="vjs-indent"
-          >
-            
-            <div
-              class="vjs-indent-unit has-line"
-            />
-            <div
-              class="vjs-indent-unit has-line"
-            />
-            
-            <!---->
-          </div>
-          <span
-            class="vjs-key"
-          >
-            
-            <span
-              class="content mappable"
-              data-depth="2"
-              data-name="nil"
-              data-path="[0].nil"
-              data-target="mappable"
-              data-value="{{ $('Set').item.json.nil }}"
-            >
-              
-              <span>
-                <!--v-if-->
-                "nil"
-              </span>
-              
-            </span>
-            
-            <span
-              class="vjs-colon"
-            >
-              : 
-            </span>
-          </span>
-          <span>
-            <span
-              class="vjs-value vjs-value-null"
-            >
-              
-              <span
-                class="content"
+              </div>
+              <div
+                class="vjs-tree-node"
               >
-                
+                <!---->
+                <!---->
+                <div
+                  class="vjs-indent"
+                >
+                  
+                  <div
+                    class="vjs-indent-unit has-line"
+                  />
+                  <div
+                    class="vjs-indent-unit has-line"
+                  />
+                  
+                  <!---->
+                </div>
+                <span
+                  class="vjs-key"
+                >
+                  
+                  <span
+                    class="content mappable"
+                    data-depth="2"
+                    data-name="record"
+                    data-path="[0].record"
+                    data-target="mappable"
+                    data-value="{{ $('Set').item.json.record }}"
+                  >
+                    
+                    <span>
+                      <!--v-if-->
+                      "record"
+                    </span>
+                    
+                  </span>
+                  
+                  <span
+                    class="vjs-colon"
+                  >
+                    : 
+                  </span>
+                </span>
                 <span>
-                  <!--v-if-->
-                  null
+                  <span
+                    class="vjs-tree-brackets"
+                  >
+                    {
+                  </span>
+                  <!---->
+                  <!---->
                 </span>
-                
-              </span>
-              
-            </span>
-            <span>
-              ,
-            </span>
-            <!---->
-          </span>
-        </div>
-        <div
-          class="vjs-tree-node"
-        >
-          <!---->
-          <!---->
-          <div
-            class="vjs-indent"
-          >
-            
-            <div
-              class="vjs-indent-unit has-line"
-            />
-            <div
-              class="vjs-indent-unit has-line"
-            />
-            
-            <!---->
-          </div>
-          <span
-            class="vjs-key"
-          >
-            
-            <span
-              class="content mappable"
-              data-depth="2"
-              data-name="d"
-              data-path="[0].d"
-              data-target="mappable"
-              data-value="{{ $('Set').item.json.d }}"
-            >
-              
-              <span>
-                <!--v-if-->
-                "d"
-              </span>
-              
-            </span>
-            
-            <span
-              class="vjs-colon"
-            >
-              : 
-            </span>
-          </span>
-          <span>
-            <span
-              class="vjs-value vjs-value-undefined"
-            >
-              
-              <span
-                class="content"
+              </div>
+              <div
+                class="vjs-tree-node"
               >
-                <span />
-              </span>
+                <!---->
+                <!---->
+                <div
+                  class="vjs-indent"
+                >
+                  
+                  <div
+                    class="vjs-indent-unit has-line"
+                  />
+                  <div
+                    class="vjs-indent-unit has-line"
+                  />
+                  <div
+                    class="vjs-indent-unit has-line"
+                  />
+                  
+                  <!---->
+                </div>
+                <span
+                  class="vjs-key"
+                >
+                  
+                  <span
+                    class="content mappable"
+                    data-depth="3"
+                    data-name="name"
+                    data-path="[0].record.name"
+                    data-target="mappable"
+                    data-value="{{ $('Set').item.json.record.name }}"
+                  >
+                    
+                    <span>
+                      <!--v-if-->
+                      "name"
+                    </span>
+                    
+                  </span>
+                  
+                  <span
+                    class="vjs-colon"
+                  >
+                    : 
+                  </span>
+                </span>
+                <span>
+                  <span
+                    class="vjs-value vjs-value-string"
+                  >
+                    
+                    <span
+                      class="content"
+                    >
+                      
+                      <span>
+                        <!--v-if-->
+                        "Joe"
+                      </span>
+                      
+                    </span>
+                    
+                  </span>
+                  <!---->
+                  <!---->
+                </span>
+              </div>
+              <div
+                class="vjs-tree-node"
+              >
+                <!---->
+                <!---->
+                <div
+                  class="vjs-indent"
+                >
+                  
+                  <div
+                    class="vjs-indent-unit has-line"
+                  />
+                  <div
+                    class="vjs-indent-unit has-line"
+                  />
+                  
+                  <!---->
+                </div>
+                <!---->
+                <span>
+                  <span
+                    class="vjs-tree-brackets"
+                  >
+                    }
+                  </span>
+                  <span>
+                    ,
+                  </span>
+                  <!---->
+                </span>
+              </div>
+              <div
+                class="vjs-tree-node"
+              >
+                <!---->
+                <!---->
+                <div
+                  class="vjs-indent"
+                >
+                  
+                  <div
+                    class="vjs-indent-unit has-line"
+                  />
+                  <div
+                    class="vjs-indent-unit has-line"
+                  />
+                  
+                  <!---->
+                </div>
+                <span
+                  class="vjs-key"
+                >
+                  
+                  <span
+                    class="content mappable"
+                    data-depth="2"
+                    data-name="myNumber"
+                    data-path="[0].myNumber"
+                    data-target="mappable"
+                    data-value="{{ $('Set').item.json.myNumber }}"
+                  >
+                    
+                    <span>
+                      <!--v-if-->
+                      "myNumber"
+                    </span>
+                    
+                  </span>
+                  
+                  <span
+                    class="vjs-colon"
+                  >
+                    : 
+                  </span>
+                </span>
+                <span>
+                  <span
+                    class="vjs-value vjs-value-number"
+                  >
+                    
+                    <span
+                      class="content"
+                    >
+                      
+                      <span>
+                        <!--v-if-->
+                        123
+                      </span>
+                      
+                    </span>
+                    
+                  </span>
+                  <span>
+                    ,
+                  </span>
+                  <!---->
+                </span>
+              </div>
+              <div
+                class="vjs-tree-node"
+              >
+                <!---->
+                <!---->
+                <div
+                  class="vjs-indent"
+                >
+                  
+                  <div
+                    class="vjs-indent-unit has-line"
+                  />
+                  <div
+                    class="vjs-indent-unit has-line"
+                  />
+                  
+                  <!---->
+                </div>
+                <span
+                  class="vjs-key"
+                >
+                  
+                  <span
+                    class="content mappable"
+                    data-depth="2"
+                    data-name="myStringNumber"
+                    data-path="[0].myStringNumber"
+                    data-target="mappable"
+                    data-value="{{ $('Set').item.json.myStringNumber }}"
+                  >
+                    
+                    <span>
+                      <!--v-if-->
+                      "myStringNumber"
+                    </span>
+                    
+                  </span>
+                  
+                  <span
+                    class="vjs-colon"
+                  >
+                    : 
+                  </span>
+                </span>
+                <span>
+                  <span
+                    class="vjs-value vjs-value-string"
+                  >
+                    
+                    <span
+                      class="content"
+                    >
+                      
+                      <span>
+                        <!--v-if-->
+                        "456"
+                      </span>
+                      
+                    </span>
+                    
+                  </span>
+                  <span>
+                    ,
+                  </span>
+                  <!---->
+                </span>
+              </div>
+              <div
+                class="vjs-tree-node"
+              >
+                <!---->
+                <!---->
+                <div
+                  class="vjs-indent"
+                >
+                  
+                  <div
+                    class="vjs-indent-unit has-line"
+                  />
+                  <div
+                    class="vjs-indent-unit has-line"
+                  />
+                  
+                  <!---->
+                </div>
+                <span
+                  class="vjs-key"
+                >
+                  
+                  <span
+                    class="content mappable"
+                    data-depth="2"
+                    data-name="myStringText"
+                    data-path="[0].myStringText"
+                    data-target="mappable"
+                    data-value="{{ $('Set').item.json.myStringText }}"
+                  >
+                    
+                    <span>
+                      <!--v-if-->
+                      "myStringText"
+                    </span>
+                    
+                  </span>
+                  
+                  <span
+                    class="vjs-colon"
+                  >
+                    : 
+                  </span>
+                </span>
+                <span>
+                  <span
+                    class="vjs-value vjs-value-string"
+                  >
+                    
+                    <span
+                      class="content"
+                    >
+                      
+                      <span>
+                        <!--v-if-->
+                        "abc"
+                      </span>
+                      
+                    </span>
+                    
+                  </span>
+                  <span>
+                    ,
+                  </span>
+                  <!---->
+                </span>
+              </div>
+              <div
+                class="vjs-tree-node"
+              >
+                <!---->
+                <!---->
+                <div
+                  class="vjs-indent"
+                >
+                  
+                  <div
+                    class="vjs-indent-unit has-line"
+                  />
+                  <div
+                    class="vjs-indent-unit has-line"
+                  />
+                  
+                  <!---->
+                </div>
+                <span
+                  class="vjs-key"
+                >
+                  
+                  <span
+                    class="content mappable"
+                    data-depth="2"
+                    data-name="nil"
+                    data-path="[0].nil"
+                    data-target="mappable"
+                    data-value="{{ $('Set').item.json.nil }}"
+                  >
+                    
+                    <span>
+                      <!--v-if-->
+                      "nil"
+                    </span>
+                    
+                  </span>
+                  
+                  <span
+                    class="vjs-colon"
+                  >
+                    : 
+                  </span>
+                </span>
+                <span>
+                  <span
+                    class="vjs-value vjs-value-null"
+                  >
+                    
+                    <span
+                      class="content"
+                    >
+                      
+                      <span>
+                        <!--v-if-->
+                        null
+                      </span>
+                      
+                    </span>
+                    
+                  </span>
+                  <span>
+                    ,
+                  </span>
+                  <!---->
+                </span>
+              </div>
+              <div
+                class="vjs-tree-node"
+              >
+                <!---->
+                <!---->
+                <div
+                  class="vjs-indent"
+                >
+                  
+                  <div
+                    class="vjs-indent-unit has-line"
+                  />
+                  <div
+                    class="vjs-indent-unit has-line"
+                  />
+                  
+                  <!---->
+                </div>
+                <span
+                  class="vjs-key"
+                >
+                  
+                  <span
+                    class="content mappable"
+                    data-depth="2"
+                    data-name="d"
+                    data-path="[0].d"
+                    data-target="mappable"
+                    data-value="{{ $('Set').item.json.d }}"
+                  >
+                    
+                    <span>
+                      <!--v-if-->
+                      "d"
+                    </span>
+                    
+                  </span>
+                  
+                  <span
+                    class="vjs-colon"
+                  >
+                    : 
+                  </span>
+                </span>
+                <span>
+                  <span
+                    class="vjs-value vjs-value-undefined"
+                  >
+                    
+                    <span
+                      class="content"
+                    >
+                      <span />
+                    </span>
+                    
+                  </span>
+                  <!---->
+                  <!---->
+                </span>
+              </div>
+              <div
+                class="vjs-tree-node"
+              >
+                <!---->
+                <!---->
+                <div
+                  class="vjs-indent"
+                >
+                  
+                  <div
+                    class="vjs-indent-unit has-line"
+                  />
+                  
+                  <!---->
+                </div>
+                <!---->
+                <span>
+                  <span
+                    class="vjs-tree-brackets"
+                  >
+                    }
+                  </span>
+                  <!---->
+                  <!---->
+                </span>
+              </div>
+              <div
+                class="vjs-tree-node"
+              >
+                <!---->
+                <!---->
+                <div
+                  class="vjs-indent"
+                >
+                  
+                  
+                  <!---->
+                </div>
+                <!---->
+                <span>
+                  <span
+                    class="vjs-tree-brackets"
+                  >
+                    ]
+                  </span>
+                  <!---->
+                  <!---->
+                </span>
+              </div>
               
-            </span>
-            <!---->
-            <!---->
-          </span>
-        </div>
-        <div
-          class="vjs-tree-node"
-        >
-          <!---->
-          <!---->
-          <div
-            class="vjs-indent"
-          >
-            
-            <div
-              class="vjs-indent-unit has-line"
-            />
-            
-            <!---->
+            </div>
           </div>
-          <!---->
-          <span>
-            <span
-              class="vjs-tree-brackets"
-            >
-              }
-            </span>
-            <!---->
-            <!---->
-          </span>
         </div>
-        <div
-          class="vjs-tree-node"
-        >
-          <!---->
-          <!---->
-          <div
-            class="vjs-indent"
-          >
-            
-            
-            <!---->
-          </div>
-          <!---->
-          <span>
-            <span
-              class="vjs-tree-brackets"
-            >
-              ]
-            </span>
-            <!---->
-            <!---->
-          </span>
-        </div>
-        
       </div>
       
       <!--teleport start-->