From dc1c5fce8af732c438d2f1698ee08f18d2358a6c Mon Sep 17 00:00:00 2001
From: Elias Meire <elias@meire.dev>
Date: Mon, 1 Jul 2024 11:03:04 +0200
Subject: [PATCH] fix(editor): Improve text wrapping in schema view (#9888)

---
 cypress/e2e/5-ndv.cy.ts                       |    3 +-
 .../src/components/RunDataSchema.vue          |    1 +
 .../src/components/RunDataSchemaItem.vue      |   77 +-
 .../__snapshots__/RunDataSchema.test.ts.snap  | 2230 +++++++++--------
 4 files changed, 1215 insertions(+), 1096 deletions(-)

diff --git a/cypress/e2e/5-ndv.cy.ts b/cypress/e2e/5-ndv.cy.ts
index 671b8287b3..287cbd94f5 100644
--- a/cypress/e2e/5-ndv.cy.ts
+++ b/cypress/e2e/5-ndv.cy.ts
@@ -631,8 +631,7 @@ describe('NDV', () => {
 		ndv.getters.outputDisplayMode().find('label').eq(2).click({ force: true });
 		ndv.getters
 			.outputDataContainer()
-			.findChildByTestId('run-data-schema-item')
-			.find('> span')
+			.findChildByTestId('run-data-schema-item-value')
 			.should('include.text', '<?xml version="1.0" encoding="UTF-8"?>');
 	});
 
diff --git a/packages/editor-ui/src/components/RunDataSchema.vue b/packages/editor-ui/src/components/RunDataSchema.vue
index 8f703c1fb2..679559b363 100644
--- a/packages/editor-ui/src/components/RunDataSchema.vue
+++ b/packages/editor-ui/src/components/RunDataSchema.vue
@@ -418,6 +418,7 @@ watch(
 
 .schema {
 	display: grid;
+	padding-right: var(--spacing-s);
 	grid-template-rows: 1fr;
 
 	&.animated {
diff --git a/packages/editor-ui/src/components/RunDataSchemaItem.vue b/packages/editor-ui/src/components/RunDataSchemaItem.vue
index a63a7bd9f2..34979053f7 100644
--- a/packages/editor-ui/src/components/RunDataSchemaItem.vue
+++ b/packages/editor-ui/src/components/RunDataSchemaItem.vue
@@ -77,44 +77,47 @@ const getIconBySchemaType = (type: Schema['type']): string => {
 
 <template>
 	<div :class="$style.item" data-test-id="run-data-schema-item">
-		<div
-			v-if="level > 0 || (level === 0 && !isSchemaValueArray)"
-			:title="schema.type"
-			:class="{
-				[$style.pill]: true,
-				[$style.mappable]: mappingEnabled,
-				[$style.highlight]: dragged,
-			}"
-		>
-			<span
-				:class="$style.label"
-				:data-value="getJsonParameterPath(schema.path)"
-				:data-name="schemaName"
-				:data-path="schema.path"
-				:data-depth="level"
-				data-target="mappable"
+		<div :class="$style.itemContent">
+			<div
+				v-if="level > 0 || (level === 0 && !isSchemaValueArray)"
+				:title="schema.type"
+				:class="{
+					[$style.pill]: true,
+					[$style.mappable]: mappingEnabled,
+					[$style.highlight]: dragged,
+				}"
 			>
-				<font-awesome-icon :icon="getIconBySchemaType(schema.type)" size="sm" />
-				<TextWithHighlights
-					v-if="isSchemaParentTypeArray"
-					:content="props.parent?.key"
-					:search="props.search"
-				/>
-				<TextWithHighlights
-					v-if="key"
-					:class="{ [$style.arrayIndex]: isSchemaParentTypeArray }"
-					:content="key"
-					:search="props.search"
-				/>
+				<span
+					:class="$style.label"
+					:data-value="getJsonParameterPath(schema.path)"
+					:data-name="schemaName"
+					:data-path="schema.path"
+					:data-depth="level"
+					data-target="mappable"
+				>
+					<font-awesome-icon :icon="getIconBySchemaType(schema.type)" size="sm" />
+					<TextWithHighlights
+						v-if="isSchemaParentTypeArray"
+						:content="props.parent?.key"
+						:search="props.search"
+					/>
+					<TextWithHighlights
+						v-if="key"
+						:class="{ [$style.arrayIndex]: isSchemaParentTypeArray }"
+						:content="key"
+						:search="props.search"
+					/>
+				</span>
+			</div>
+
+			<span v-if="text" :class="$style.text" data-test-id="run-data-schema-item-value">
+				<template v-for="(line, index) in text.split('\n')" :key="`line-${index}`">
+					<span v-if="index > 0" :class="$style.newLine">\n</span>
+					<TextWithHighlights :content="line" :search="props.search" />
+				</template>
 			</span>
 		</div>
 
-		<span v-if="text" :class="$style.text">
-			<template v-for="(line, index) in text.split('\n')" :key="`line-${index}`">
-				<span v-if="index > 0" :class="$style.newLine">\n</span>
-				<TextWithHighlights :content="line" :search="props.search" />
-			</template>
-		</span>
 		<input v-if="level > 0 && isSchemaValueArray" :id="subKey" type="checkbox" inert checked />
 		<label v-if="level > 0 && isSchemaValueArray" :class="$style.toggle" :for="subKey">
 			<font-awesome-icon icon="angle-right" />
@@ -191,6 +194,12 @@ const getIconBySchemaType = (type: Schema['type']): string => {
 	}
 }
 
+.itemContent {
+	display: flex;
+	gap: var(--spacing-2xs);
+	align-items: baseline;
+}
+
 .sub {
 	display: grid;
 	grid-template-rows: 0fr;
diff --git a/packages/editor-ui/src/components/__tests__/__snapshots__/RunDataSchema.test.ts.snap b/packages/editor-ui/src/components/__tests__/__snapshots__/RunDataSchema.test.ts.snap
index 602a90466c..fa16085fd1 100644
--- a/packages/editor-ui/src/components/__tests__/__snapshots__/RunDataSchema.test.ts.snap
+++ b/packages/editor-ui/src/components/__tests__/__snapshots__/RunDataSchema.test.ts.snap
@@ -15,8 +15,12 @@ exports[`RunDataSchema.vue > renders schema for data 1`] = `
       data-test-id="run-data-schema-item"
       data-v-46dade00=""
     >
-      <!--v-if-->
-      <!--v-if-->
+      <div
+        class="itemContent"
+      >
+        <!--v-if-->
+        <!--v-if-->
+      </div>
       <!--v-if-->
       <!--v-if-->
       <div
@@ -31,819 +35,7 @@ exports[`RunDataSchema.vue > renders schema for data 1`] = `
             data-test-id="run-data-schema-item"
           >
             <div
-              class="pill mappable"
-              title="string"
-            >
-              <span
-                class="label"
-                data-depth="1"
-                data-name="name"
-                data-path=".name"
-                data-target="mappable"
-                data-value="{{ $json.name }}"
-              >
-                <svg
-                  aria-hidden="true"
-                  class="svg-inline--fa fa-font fa-w-14 fa-sm"
-                  data-icon="font"
-                  data-prefix="fas"
-                  focusable="false"
-                  role="img"
-                  viewBox="0 0 448 512"
-                  xmlns="http://www.w3.org/2000/svg"
-                >
-                  <path
-                    class=""
-                    d="M432 416h-23.41L277.88 53.69A32 32 0 0 0 247.58 32h-47.16a32 32 0 0 0-30.3 21.69L39.41 416H16a16 16 0 0 0-16 16v32a16 16 0 0 0 16 16h128a16 16 0 0 0 16-16v-32a16 16 0 0 0-16-16h-19.58l23.3-64h152.56l23.3 64H304a16 16 0 0 0-16 16v32a16 16 0 0 0 16 16h128a16 16 0 0 0 16-16v-32a16 16 0 0 0-16-16zM176.85 272L224 142.51 271.15 272z"
-                    fill="currentColor"
-                  />
-                </svg>
-                <!--v-if-->
-                <span
-                  class="content"
-                >
-                  
-                  <span>
-                    <!--v-if-->
-                    name
-                  </span>
-                  
-                </span>
-              </span>
-            </div>
-            <span
-              class="text"
-            >
-              
-              
-              <!--v-if-->
-              <span
-                class="content"
-              >
-                
-                <span>
-                  <!--v-if-->
-                  John
-                </span>
-                
-              </span>
-              
-              
-            </span>
-            <!--v-if-->
-            <!--v-if-->
-            <!--v-if-->
-          </div>
-          <div
-            class="item"
-            data-test-id="run-data-schema-item"
-          >
-            <div
-              class="pill mappable"
-              title="number"
-            >
-              <span
-                class="label"
-                data-depth="1"
-                data-name="age"
-                data-path=".age"
-                data-target="mappable"
-                data-value="{{ $json.age }}"
-              >
-                <svg
-                  aria-hidden="true"
-                  class="svg-inline--fa fa-hashtag fa-w-14 fa-sm"
-                  data-icon="hashtag"
-                  data-prefix="fas"
-                  focusable="false"
-                  role="img"
-                  viewBox="0 0 448 512"
-                  xmlns="http://www.w3.org/2000/svg"
-                >
-                  <path
-                    class=""
-                    d="M440.667 182.109l7.143-40c1.313-7.355-4.342-14.109-11.813-14.109h-74.81l14.623-81.891C377.123 38.754 371.468 32 363.997 32h-40.632a12 12 0 0 0-11.813 9.891L296.175 128H197.54l14.623-81.891C213.477 38.754 207.822 32 200.35 32h-40.632a12 12 0 0 0-11.813 9.891L132.528 128H53.432a12 12 0 0 0-11.813 9.891l-7.143 40C33.163 185.246 38.818 192 46.289 192h74.81L98.242 320H19.146a12 12 0 0 0-11.813 9.891l-7.143 40C-1.123 377.246 4.532 384 12.003 384h74.81L72.19 465.891C70.877 473.246 76.532 480 84.003 480h40.632a12 12 0 0 0 11.813-9.891L151.826 384h98.634l-14.623 81.891C234.523 473.246 240.178 480 247.65 480h40.632a12 12 0 0 0 11.813-9.891L315.472 384h79.096a12 12 0 0 0 11.813-9.891l7.143-40c1.313-7.355-4.342-14.109-11.813-14.109h-74.81l22.857-128h79.096a12 12 0 0 0 11.813-9.891zM261.889 320h-98.634l22.857-128h98.634l-22.857 128z"
-                    fill="currentColor"
-                  />
-                </svg>
-                <!--v-if-->
-                <span
-                  class="content"
-                >
-                  
-                  <span>
-                    <!--v-if-->
-                    age
-                  </span>
-                  
-                </span>
-              </span>
-            </div>
-            <span
-              class="text"
-            >
-              
-              
-              <!--v-if-->
-              <span
-                class="content"
-              >
-                
-                <span>
-                  <!--v-if-->
-                  22
-                </span>
-                
-              </span>
-              
-              
-            </span>
-            <!--v-if-->
-            <!--v-if-->
-            <!--v-if-->
-          </div>
-          <div
-            class="item"
-            data-test-id="run-data-schema-item"
-          >
-            <div
-              class="pill mappable"
-              title="array"
-            >
-              <span
-                class="label"
-                data-depth="1"
-                data-name="hobbies"
-                data-path=".hobbies"
-                data-target="mappable"
-                data-value="{{ $json.hobbies }}"
-              >
-                <svg
-                  aria-hidden="true"
-                  class="svg-inline--fa fa-list fa-w-16 fa-sm"
-                  data-icon="list"
-                  data-prefix="fas"
-                  focusable="false"
-                  role="img"
-                  viewBox="0 0 512 512"
-                  xmlns="http://www.w3.org/2000/svg"
-                >
-                  <path
-                    class=""
-                    d="M80 368H16a16 16 0 0 0-16 16v64a16 16 0 0 0 16 16h64a16 16 0 0 0 16-16v-64a16 16 0 0 0-16-16zm0-320H16A16 16 0 0 0 0 64v64a16 16 0 0 0 16 16h64a16 16 0 0 0 16-16V64a16 16 0 0 0-16-16zm0 160H16a16 16 0 0 0-16 16v64a16 16 0 0 0 16 16h64a16 16 0 0 0 16-16v-64a16 16 0 0 0-16-16zm416 176H176a16 16 0 0 0-16 16v32a16 16 0 0 0 16 16h320a16 16 0 0 0 16-16v-32a16 16 0 0 0-16-16zm0-320H176a16 16 0 0 0-16 16v32a16 16 0 0 0 16 16h320a16 16 0 0 0 16-16V80a16 16 0 0 0-16-16zm0 160H176a16 16 0 0 0-16 16v32a16 16 0 0 0 16 16h320a16 16 0 0 0 16-16v-32a16 16 0 0 0-16-16z"
-                    fill="currentColor"
-                  />
-                </svg>
-                <!--v-if-->
-                <span
-                  class="content"
-                >
-                  
-                  <span>
-                    <!--v-if-->
-                    hobbies
-                  </span>
-                  
-                </span>
-              </span>
-            </div>
-            <!--v-if-->
-            <input
-              id="set_1-hobbies"
-              inert=""
-              type="checkbox"
-            />
-            <label
-              class="toggle"
-              for="set_1-hobbies"
-            >
-              <svg
-                aria-hidden="true"
-                class="svg-inline--fa fa-angle-right fa-w-8"
-                data-icon="angle-right"
-                data-prefix="fas"
-                focusable="false"
-                role="img"
-                viewBox="0 0 256 512"
-                xmlns="http://www.w3.org/2000/svg"
-              >
-                <path
-                  class=""
-                  d="M224.3 273l-136 136c-9.4 9.4-24.6 9.4-33.9 0l-22.6-22.6c-9.4-9.4-9.4-24.6 0-33.9l96.4-96.4-96.4-96.4c-9.4-9.4-9.4-24.6 0-33.9L54.3 103c9.4-9.4 24.6-9.4 33.9 0l136 136c9.5 9.4 9.5 24.6.1 34z"
-                  fill="currentColor"
-                />
-              </svg>
-            </label>
-            <div
-              class="sub"
-            >
-              <div
-                class="innerSub"
-              >
-                
-                <div
-                  class="item"
-                  data-test-id="run-data-schema-item"
-                >
-                  <div
-                    class="pill mappable"
-                    title="string"
-                  >
-                    <span
-                      class="label"
-                      data-depth="2"
-                      data-name="string[0]"
-                      data-path=".hobbies[0]"
-                      data-target="mappable"
-                      data-value="{{ $json.hobbies[0] }}"
-                    >
-                      <svg
-                        aria-hidden="true"
-                        class="svg-inline--fa fa-font fa-w-14 fa-sm"
-                        data-icon="font"
-                        data-prefix="fas"
-                        focusable="false"
-                        role="img"
-                        viewBox="0 0 448 512"
-                        xmlns="http://www.w3.org/2000/svg"
-                      >
-                        <path
-                          class=""
-                          d="M432 416h-23.41L277.88 53.69A32 32 0 0 0 247.58 32h-47.16a32 32 0 0 0-30.3 21.69L39.41 416H16a16 16 0 0 0-16 16v32a16 16 0 0 0 16 16h128a16 16 0 0 0 16-16v-32a16 16 0 0 0-16-16h-19.58l23.3-64h152.56l23.3 64H304a16 16 0 0 0-16 16v32a16 16 0 0 0 16 16h128a16 16 0 0 0 16-16v-32a16 16 0 0 0-16-16zM176.85 272L224 142.51 271.15 272z"
-                          fill="currentColor"
-                        />
-                      </svg>
-                      <span
-                        class="content"
-                      >
-                        
-                        <span>
-                          <!--v-if-->
-                          hobbies
-                        </span>
-                        
-                      </span>
-                      <span
-                        class="content arrayIndex"
-                      >
-                        
-                        <span>
-                          <!--v-if-->
-                          [0]
-                        </span>
-                        
-                      </span>
-                    </span>
-                  </div>
-                  <span
-                    class="text"
-                  >
-                    
-                    
-                    <!--v-if-->
-                    <span
-                      class="content"
-                    >
-                      
-                      <span>
-                        <!--v-if-->
-                        surfing
-                      </span>
-                      
-                    </span>
-                    
-                    
-                  </span>
-                  <!--v-if-->
-                  <!--v-if-->
-                  <!--v-if-->
-                </div>
-                <div
-                  class="item"
-                  data-test-id="run-data-schema-item"
-                >
-                  <div
-                    class="pill mappable"
-                    title="string"
-                  >
-                    <span
-                      class="label"
-                      data-depth="2"
-                      data-name="string[1]"
-                      data-path=".hobbies[1]"
-                      data-target="mappable"
-                      data-value="{{ $json.hobbies[1] }}"
-                    >
-                      <svg
-                        aria-hidden="true"
-                        class="svg-inline--fa fa-font fa-w-14 fa-sm"
-                        data-icon="font"
-                        data-prefix="fas"
-                        focusable="false"
-                        role="img"
-                        viewBox="0 0 448 512"
-                        xmlns="http://www.w3.org/2000/svg"
-                      >
-                        <path
-                          class=""
-                          d="M432 416h-23.41L277.88 53.69A32 32 0 0 0 247.58 32h-47.16a32 32 0 0 0-30.3 21.69L39.41 416H16a16 16 0 0 0-16 16v32a16 16 0 0 0 16 16h128a16 16 0 0 0 16-16v-32a16 16 0 0 0-16-16h-19.58l23.3-64h152.56l23.3 64H304a16 16 0 0 0-16 16v32a16 16 0 0 0 16 16h128a16 16 0 0 0 16-16v-32a16 16 0 0 0-16-16zM176.85 272L224 142.51 271.15 272z"
-                          fill="currentColor"
-                        />
-                      </svg>
-                      <span
-                        class="content"
-                      >
-                        
-                        <span>
-                          <!--v-if-->
-                          hobbies
-                        </span>
-                        
-                      </span>
-                      <span
-                        class="content arrayIndex"
-                      >
-                        
-                        <span>
-                          <!--v-if-->
-                          [1]
-                        </span>
-                        
-                      </span>
-                    </span>
-                  </div>
-                  <span
-                    class="text"
-                  >
-                    
-                    
-                    <!--v-if-->
-                    <span
-                      class="content"
-                    >
-                      
-                      <span>
-                        <!--v-if-->
-                        traveling
-                      </span>
-                      
-                    </span>
-                    
-                    
-                  </span>
-                  <!--v-if-->
-                  <!--v-if-->
-                  <!--v-if-->
-                </div>
-                
-              </div>
-            </div>
-          </div>
-          
-        </div>
-      </div>
-    </div>
-  </div>
-</div>
-`;
-
-exports[`RunDataSchema.vue > renders schema for data 2`] = `
-<div
-  class="schema animated"
-  data-test-id="run-data-schema-node-schema"
-  data-v-46dade00=""
->
-  <div
-    class="innerSchema"
-    data-v-46dade00=""
-  >
-    <div
-      class="item"
-      data-test-id="run-data-schema-item"
-      data-v-46dade00=""
-    >
-      <!--v-if-->
-      <!--v-if-->
-      <!--v-if-->
-      <!--v-if-->
-      <div
-        class="sub"
-      >
-        <div
-          class="innerSub"
-        >
-          
-          <div
-            class="item"
-            data-test-id="run-data-schema-item"
-          >
-            <div
-              class="pill mappable"
-              title="string"
-            >
-              <span
-                class="label"
-                data-depth="1"
-                data-name="name"
-                data-path=".name"
-                data-target="mappable"
-                data-value="{{ $('Set2').item.json.name }}"
-              >
-                <svg
-                  aria-hidden="true"
-                  class="svg-inline--fa fa-font fa-w-14 fa-sm"
-                  data-icon="font"
-                  data-prefix="fas"
-                  focusable="false"
-                  role="img"
-                  viewBox="0 0 448 512"
-                  xmlns="http://www.w3.org/2000/svg"
-                >
-                  <path
-                    class=""
-                    d="M432 416h-23.41L277.88 53.69A32 32 0 0 0 247.58 32h-47.16a32 32 0 0 0-30.3 21.69L39.41 416H16a16 16 0 0 0-16 16v32a16 16 0 0 0 16 16h128a16 16 0 0 0 16-16v-32a16 16 0 0 0-16-16h-19.58l23.3-64h152.56l23.3 64H304a16 16 0 0 0-16 16v32a16 16 0 0 0 16 16h128a16 16 0 0 0 16-16v-32a16 16 0 0 0-16-16zM176.85 272L224 142.51 271.15 272z"
-                    fill="currentColor"
-                  />
-                </svg>
-                <!--v-if-->
-                <span
-                  class="content"
-                >
-                  
-                  <span>
-                    <!--v-if-->
-                    name
-                  </span>
-                  
-                </span>
-              </span>
-            </div>
-            <span
-              class="text"
-            >
-              
-              
-              <!--v-if-->
-              <span
-                class="content"
-              >
-                
-                <span>
-                  <!--v-if-->
-                  John
-                </span>
-                
-              </span>
-              
-              
-            </span>
-            <!--v-if-->
-            <!--v-if-->
-            <!--v-if-->
-          </div>
-          <div
-            class="item"
-            data-test-id="run-data-schema-item"
-          >
-            <div
-              class="pill mappable"
-              title="number"
-            >
-              <span
-                class="label"
-                data-depth="1"
-                data-name="age"
-                data-path=".age"
-                data-target="mappable"
-                data-value="{{ $('Set2').item.json.age }}"
-              >
-                <svg
-                  aria-hidden="true"
-                  class="svg-inline--fa fa-hashtag fa-w-14 fa-sm"
-                  data-icon="hashtag"
-                  data-prefix="fas"
-                  focusable="false"
-                  role="img"
-                  viewBox="0 0 448 512"
-                  xmlns="http://www.w3.org/2000/svg"
-                >
-                  <path
-                    class=""
-                    d="M440.667 182.109l7.143-40c1.313-7.355-4.342-14.109-11.813-14.109h-74.81l14.623-81.891C377.123 38.754 371.468 32 363.997 32h-40.632a12 12 0 0 0-11.813 9.891L296.175 128H197.54l14.623-81.891C213.477 38.754 207.822 32 200.35 32h-40.632a12 12 0 0 0-11.813 9.891L132.528 128H53.432a12 12 0 0 0-11.813 9.891l-7.143 40C33.163 185.246 38.818 192 46.289 192h74.81L98.242 320H19.146a12 12 0 0 0-11.813 9.891l-7.143 40C-1.123 377.246 4.532 384 12.003 384h74.81L72.19 465.891C70.877 473.246 76.532 480 84.003 480h40.632a12 12 0 0 0 11.813-9.891L151.826 384h98.634l-14.623 81.891C234.523 473.246 240.178 480 247.65 480h40.632a12 12 0 0 0 11.813-9.891L315.472 384h79.096a12 12 0 0 0 11.813-9.891l7.143-40c1.313-7.355-4.342-14.109-11.813-14.109h-74.81l22.857-128h79.096a12 12 0 0 0 11.813-9.891zM261.889 320h-98.634l22.857-128h98.634l-22.857 128z"
-                    fill="currentColor"
-                  />
-                </svg>
-                <!--v-if-->
-                <span
-                  class="content"
-                >
-                  
-                  <span>
-                    <!--v-if-->
-                    age
-                  </span>
-                  
-                </span>
-              </span>
-            </div>
-            <span
-              class="text"
-            >
-              
-              
-              <!--v-if-->
-              <span
-                class="content"
-              >
-                
-                <span>
-                  <!--v-if-->
-                  22
-                </span>
-                
-              </span>
-              
-              
-            </span>
-            <!--v-if-->
-            <!--v-if-->
-            <!--v-if-->
-          </div>
-          <div
-            class="item"
-            data-test-id="run-data-schema-item"
-          >
-            <div
-              class="pill mappable"
-              title="array"
-            >
-              <span
-                class="label"
-                data-depth="1"
-                data-name="hobbies"
-                data-path=".hobbies"
-                data-target="mappable"
-                data-value="{{ $('Set2').item.json.hobbies }}"
-              >
-                <svg
-                  aria-hidden="true"
-                  class="svg-inline--fa fa-list fa-w-16 fa-sm"
-                  data-icon="list"
-                  data-prefix="fas"
-                  focusable="false"
-                  role="img"
-                  viewBox="0 0 512 512"
-                  xmlns="http://www.w3.org/2000/svg"
-                >
-                  <path
-                    class=""
-                    d="M80 368H16a16 16 0 0 0-16 16v64a16 16 0 0 0 16 16h64a16 16 0 0 0 16-16v-64a16 16 0 0 0-16-16zm0-320H16A16 16 0 0 0 0 64v64a16 16 0 0 0 16 16h64a16 16 0 0 0 16-16V64a16 16 0 0 0-16-16zm0 160H16a16 16 0 0 0-16 16v64a16 16 0 0 0 16 16h64a16 16 0 0 0 16-16v-64a16 16 0 0 0-16-16zm416 176H176a16 16 0 0 0-16 16v32a16 16 0 0 0 16 16h320a16 16 0 0 0 16-16v-32a16 16 0 0 0-16-16zm0-320H176a16 16 0 0 0-16 16v32a16 16 0 0 0 16 16h320a16 16 0 0 0 16-16V80a16 16 0 0 0-16-16zm0 160H176a16 16 0 0 0-16 16v32a16 16 0 0 0 16 16h320a16 16 0 0 0 16-16v-32a16 16 0 0 0-16-16z"
-                    fill="currentColor"
-                  />
-                </svg>
-                <!--v-if-->
-                <span
-                  class="content"
-                >
-                  
-                  <span>
-                    <!--v-if-->
-                    hobbies
-                  </span>
-                  
-                </span>
-              </span>
-            </div>
-            <!--v-if-->
-            <input
-              id="set_2-hobbies"
-              inert=""
-              type="checkbox"
-            />
-            <label
-              class="toggle"
-              for="set_2-hobbies"
-            >
-              <svg
-                aria-hidden="true"
-                class="svg-inline--fa fa-angle-right fa-w-8"
-                data-icon="angle-right"
-                data-prefix="fas"
-                focusable="false"
-                role="img"
-                viewBox="0 0 256 512"
-                xmlns="http://www.w3.org/2000/svg"
-              >
-                <path
-                  class=""
-                  d="M224.3 273l-136 136c-9.4 9.4-24.6 9.4-33.9 0l-22.6-22.6c-9.4-9.4-9.4-24.6 0-33.9l96.4-96.4-96.4-96.4c-9.4-9.4-9.4-24.6 0-33.9L54.3 103c9.4-9.4 24.6-9.4 33.9 0l136 136c9.5 9.4 9.5 24.6.1 34z"
-                  fill="currentColor"
-                />
-              </svg>
-            </label>
-            <div
-              class="sub"
-            >
-              <div
-                class="innerSub"
-              >
-                
-                <div
-                  class="item"
-                  data-test-id="run-data-schema-item"
-                >
-                  <div
-                    class="pill mappable"
-                    title="string"
-                  >
-                    <span
-                      class="label"
-                      data-depth="2"
-                      data-name="string[0]"
-                      data-path=".hobbies[0]"
-                      data-target="mappable"
-                      data-value="{{ $('Set2').item.json.hobbies[0] }}"
-                    >
-                      <svg
-                        aria-hidden="true"
-                        class="svg-inline--fa fa-font fa-w-14 fa-sm"
-                        data-icon="font"
-                        data-prefix="fas"
-                        focusable="false"
-                        role="img"
-                        viewBox="0 0 448 512"
-                        xmlns="http://www.w3.org/2000/svg"
-                      >
-                        <path
-                          class=""
-                          d="M432 416h-23.41L277.88 53.69A32 32 0 0 0 247.58 32h-47.16a32 32 0 0 0-30.3 21.69L39.41 416H16a16 16 0 0 0-16 16v32a16 16 0 0 0 16 16h128a16 16 0 0 0 16-16v-32a16 16 0 0 0-16-16h-19.58l23.3-64h152.56l23.3 64H304a16 16 0 0 0-16 16v32a16 16 0 0 0 16 16h128a16 16 0 0 0 16-16v-32a16 16 0 0 0-16-16zM176.85 272L224 142.51 271.15 272z"
-                          fill="currentColor"
-                        />
-                      </svg>
-                      <span
-                        class="content"
-                      >
-                        
-                        <span>
-                          <!--v-if-->
-                          hobbies
-                        </span>
-                        
-                      </span>
-                      <span
-                        class="content arrayIndex"
-                      >
-                        
-                        <span>
-                          <!--v-if-->
-                          [0]
-                        </span>
-                        
-                      </span>
-                    </span>
-                  </div>
-                  <span
-                    class="text"
-                  >
-                    
-                    
-                    <!--v-if-->
-                    <span
-                      class="content"
-                    >
-                      
-                      <span>
-                        <!--v-if-->
-                        surfing
-                      </span>
-                      
-                    </span>
-                    
-                    
-                  </span>
-                  <!--v-if-->
-                  <!--v-if-->
-                  <!--v-if-->
-                </div>
-                <div
-                  class="item"
-                  data-test-id="run-data-schema-item"
-                >
-                  <div
-                    class="pill mappable"
-                    title="string"
-                  >
-                    <span
-                      class="label"
-                      data-depth="2"
-                      data-name="string[1]"
-                      data-path=".hobbies[1]"
-                      data-target="mappable"
-                      data-value="{{ $('Set2').item.json.hobbies[1] }}"
-                    >
-                      <svg
-                        aria-hidden="true"
-                        class="svg-inline--fa fa-font fa-w-14 fa-sm"
-                        data-icon="font"
-                        data-prefix="fas"
-                        focusable="false"
-                        role="img"
-                        viewBox="0 0 448 512"
-                        xmlns="http://www.w3.org/2000/svg"
-                      >
-                        <path
-                          class=""
-                          d="M432 416h-23.41L277.88 53.69A32 32 0 0 0 247.58 32h-47.16a32 32 0 0 0-30.3 21.69L39.41 416H16a16 16 0 0 0-16 16v32a16 16 0 0 0 16 16h128a16 16 0 0 0 16-16v-32a16 16 0 0 0-16-16h-19.58l23.3-64h152.56l23.3 64H304a16 16 0 0 0-16 16v32a16 16 0 0 0 16 16h128a16 16 0 0 0 16-16v-32a16 16 0 0 0-16-16zM176.85 272L224 142.51 271.15 272z"
-                          fill="currentColor"
-                        />
-                      </svg>
-                      <span
-                        class="content"
-                      >
-                        
-                        <span>
-                          <!--v-if-->
-                          hobbies
-                        </span>
-                        
-                      </span>
-                      <span
-                        class="content arrayIndex"
-                      >
-                        
-                        <span>
-                          <!--v-if-->
-                          [1]
-                        </span>
-                        
-                      </span>
-                    </span>
-                  </div>
-                  <span
-                    class="text"
-                  >
-                    
-                    
-                    <!--v-if-->
-                    <span
-                      class="content"
-                    >
-                      
-                      <span>
-                        <!--v-if-->
-                        traveling
-                      </span>
-                      
-                    </span>
-                    
-                    
-                  </span>
-                  <!--v-if-->
-                  <!--v-if-->
-                  <!--v-if-->
-                </div>
-                
-              </div>
-            </div>
-          </div>
-          
-        </div>
-      </div>
-    </div>
-  </div>
-</div>
-`;
-
-exports[`RunDataSchema.vue > renders schema for in output pane 1`] = `
-<div>
-  <div
-    class="schemaWrapper"
-    data-v-46dade00=""
-  >
-    <div
-      class="schema"
-      data-test-id="run-data-schema-node-schema"
-      data-v-46dade00=""
-    >
-      <div
-        class="item"
-        data-test-id="run-data-schema-item"
-        data-v-46dade00=""
-      >
-        <!--v-if-->
-        <!--v-if-->
-        <!--v-if-->
-        <!--v-if-->
-        <div
-          class="sub"
-        >
-          <div
-            class="innerSub"
-          >
-            
-            <div
-              class="item"
-              data-test-id="run-data-schema-item"
+              class="itemContent"
             >
               <div
                 class="pill mappable"
@@ -888,6 +80,7 @@ exports[`RunDataSchema.vue > renders schema for in output pane 1`] = `
               </div>
               <span
                 class="text"
+                data-test-id="run-data-schema-item-value"
               >
                 
                 
@@ -905,13 +98,17 @@ exports[`RunDataSchema.vue > renders schema for in output pane 1`] = `
                 
                 
               </span>
-              <!--v-if-->
-              <!--v-if-->
-              <!--v-if-->
             </div>
+            <!--v-if-->
+            <!--v-if-->
+            <!--v-if-->
+          </div>
+          <div
+            class="item"
+            data-test-id="run-data-schema-item"
+          >
             <div
-              class="item"
-              data-test-id="run-data-schema-item"
+              class="itemContent"
             >
               <div
                 class="pill mappable"
@@ -956,6 +153,7 @@ exports[`RunDataSchema.vue > renders schema for in output pane 1`] = `
               </div>
               <span
                 class="text"
+                data-test-id="run-data-schema-item-value"
               >
                 
                 
@@ -973,13 +171,17 @@ exports[`RunDataSchema.vue > renders schema for in output pane 1`] = `
                 
                 
               </span>
-              <!--v-if-->
-              <!--v-if-->
-              <!--v-if-->
             </div>
+            <!--v-if-->
+            <!--v-if-->
+            <!--v-if-->
+          </div>
+          <div
+            class="item"
+            data-test-id="run-data-schema-item"
+          >
             <div
-              class="item"
-              data-test-id="run-data-schema-item"
+              class="itemContent"
             >
               <div
                 class="pill mappable"
@@ -1023,42 +225,46 @@ exports[`RunDataSchema.vue > renders schema for in output pane 1`] = `
                 </span>
               </div>
               <!--v-if-->
-              <input
-                id="output_object-0-0-hobbies"
-                inert=""
-                type="checkbox"
-              />
-              <label
-                class="toggle"
-                for="output_object-0-0-hobbies"
+            </div>
+            <input
+              id="set_1-hobbies"
+              inert=""
+              type="checkbox"
+            />
+            <label
+              class="toggle"
+              for="set_1-hobbies"
+            >
+              <svg
+                aria-hidden="true"
+                class="svg-inline--fa fa-angle-right fa-w-8"
+                data-icon="angle-right"
+                data-prefix="fas"
+                focusable="false"
+                role="img"
+                viewBox="0 0 256 512"
+                xmlns="http://www.w3.org/2000/svg"
               >
-                <svg
-                  aria-hidden="true"
-                  class="svg-inline--fa fa-angle-right fa-w-8"
-                  data-icon="angle-right"
-                  data-prefix="fas"
-                  focusable="false"
-                  role="img"
-                  viewBox="0 0 256 512"
-                  xmlns="http://www.w3.org/2000/svg"
-                >
-                  <path
-                    class=""
-                    d="M224.3 273l-136 136c-9.4 9.4-24.6 9.4-33.9 0l-22.6-22.6c-9.4-9.4-9.4-24.6 0-33.9l96.4-96.4-96.4-96.4c-9.4-9.4-9.4-24.6 0-33.9L54.3 103c9.4-9.4 24.6-9.4 33.9 0l136 136c9.5 9.4 9.5 24.6.1 34z"
-                    fill="currentColor"
-                  />
-                </svg>
-              </label>
+                <path
+                  class=""
+                  d="M224.3 273l-136 136c-9.4 9.4-24.6 9.4-33.9 0l-22.6-22.6c-9.4-9.4-9.4-24.6 0-33.9l96.4-96.4-96.4-96.4c-9.4-9.4-9.4-24.6 0-33.9L54.3 103c9.4-9.4 24.6-9.4 33.9 0l136 136c9.5 9.4 9.5 24.6.1 34z"
+                  fill="currentColor"
+                />
+              </svg>
+            </label>
+            <div
+              class="sub"
+            >
               <div
-                class="sub"
+                class="innerSub"
               >
+                
                 <div
-                  class="innerSub"
+                  class="item"
+                  data-test-id="run-data-schema-item"
                 >
-                  
                   <div
-                    class="item"
-                    data-test-id="run-data-schema-item"
+                    class="itemContent"
                   >
                     <div
                       class="pill mappable"
@@ -1112,6 +318,7 @@ exports[`RunDataSchema.vue > renders schema for in output pane 1`] = `
                     </div>
                     <span
                       class="text"
+                      data-test-id="run-data-schema-item-value"
                     >
                       
                       
@@ -1129,13 +336,17 @@ exports[`RunDataSchema.vue > renders schema for in output pane 1`] = `
                       
                       
                     </span>
-                    <!--v-if-->
-                    <!--v-if-->
-                    <!--v-if-->
                   </div>
+                  <!--v-if-->
+                  <!--v-if-->
+                  <!--v-if-->
+                </div>
+                <div
+                  class="item"
+                  data-test-id="run-data-schema-item"
+                >
                   <div
-                    class="item"
-                    data-test-id="run-data-schema-item"
+                    class="itemContent"
                   >
                     <div
                       class="pill mappable"
@@ -1189,6 +400,7 @@ exports[`RunDataSchema.vue > renders schema for in output pane 1`] = `
                     </div>
                     <span
                       class="text"
+                      data-test-id="run-data-schema-item-value"
                     >
                       
                       
@@ -1206,6 +418,878 @@ exports[`RunDataSchema.vue > renders schema for in output pane 1`] = `
                       
                       
                     </span>
+                  </div>
+                  <!--v-if-->
+                  <!--v-if-->
+                  <!--v-if-->
+                </div>
+                
+              </div>
+            </div>
+          </div>
+          
+        </div>
+      </div>
+    </div>
+  </div>
+</div>
+`;
+
+exports[`RunDataSchema.vue > renders schema for data 2`] = `
+<div
+  class="schema animated"
+  data-test-id="run-data-schema-node-schema"
+  data-v-46dade00=""
+>
+  <div
+    class="innerSchema"
+    data-v-46dade00=""
+  >
+    <div
+      class="item"
+      data-test-id="run-data-schema-item"
+      data-v-46dade00=""
+    >
+      <div
+        class="itemContent"
+      >
+        <!--v-if-->
+        <!--v-if-->
+      </div>
+      <!--v-if-->
+      <!--v-if-->
+      <div
+        class="sub"
+      >
+        <div
+          class="innerSub"
+        >
+          
+          <div
+            class="item"
+            data-test-id="run-data-schema-item"
+          >
+            <div
+              class="itemContent"
+            >
+              <div
+                class="pill mappable"
+                title="string"
+              >
+                <span
+                  class="label"
+                  data-depth="1"
+                  data-name="name"
+                  data-path=".name"
+                  data-target="mappable"
+                  data-value="{{ $('Set2').item.json.name }}"
+                >
+                  <svg
+                    aria-hidden="true"
+                    class="svg-inline--fa fa-font fa-w-14 fa-sm"
+                    data-icon="font"
+                    data-prefix="fas"
+                    focusable="false"
+                    role="img"
+                    viewBox="0 0 448 512"
+                    xmlns="http://www.w3.org/2000/svg"
+                  >
+                    <path
+                      class=""
+                      d="M432 416h-23.41L277.88 53.69A32 32 0 0 0 247.58 32h-47.16a32 32 0 0 0-30.3 21.69L39.41 416H16a16 16 0 0 0-16 16v32a16 16 0 0 0 16 16h128a16 16 0 0 0 16-16v-32a16 16 0 0 0-16-16h-19.58l23.3-64h152.56l23.3 64H304a16 16 0 0 0-16 16v32a16 16 0 0 0 16 16h128a16 16 0 0 0 16-16v-32a16 16 0 0 0-16-16zM176.85 272L224 142.51 271.15 272z"
+                      fill="currentColor"
+                    />
+                  </svg>
+                  <!--v-if-->
+                  <span
+                    class="content"
+                  >
+                    
+                    <span>
+                      <!--v-if-->
+                      name
+                    </span>
+                    
+                  </span>
+                </span>
+              </div>
+              <span
+                class="text"
+                data-test-id="run-data-schema-item-value"
+              >
+                
+                
+                <!--v-if-->
+                <span
+                  class="content"
+                >
+                  
+                  <span>
+                    <!--v-if-->
+                    John
+                  </span>
+                  
+                </span>
+                
+                
+              </span>
+            </div>
+            <!--v-if-->
+            <!--v-if-->
+            <!--v-if-->
+          </div>
+          <div
+            class="item"
+            data-test-id="run-data-schema-item"
+          >
+            <div
+              class="itemContent"
+            >
+              <div
+                class="pill mappable"
+                title="number"
+              >
+                <span
+                  class="label"
+                  data-depth="1"
+                  data-name="age"
+                  data-path=".age"
+                  data-target="mappable"
+                  data-value="{{ $('Set2').item.json.age }}"
+                >
+                  <svg
+                    aria-hidden="true"
+                    class="svg-inline--fa fa-hashtag fa-w-14 fa-sm"
+                    data-icon="hashtag"
+                    data-prefix="fas"
+                    focusable="false"
+                    role="img"
+                    viewBox="0 0 448 512"
+                    xmlns="http://www.w3.org/2000/svg"
+                  >
+                    <path
+                      class=""
+                      d="M440.667 182.109l7.143-40c1.313-7.355-4.342-14.109-11.813-14.109h-74.81l14.623-81.891C377.123 38.754 371.468 32 363.997 32h-40.632a12 12 0 0 0-11.813 9.891L296.175 128H197.54l14.623-81.891C213.477 38.754 207.822 32 200.35 32h-40.632a12 12 0 0 0-11.813 9.891L132.528 128H53.432a12 12 0 0 0-11.813 9.891l-7.143 40C33.163 185.246 38.818 192 46.289 192h74.81L98.242 320H19.146a12 12 0 0 0-11.813 9.891l-7.143 40C-1.123 377.246 4.532 384 12.003 384h74.81L72.19 465.891C70.877 473.246 76.532 480 84.003 480h40.632a12 12 0 0 0 11.813-9.891L151.826 384h98.634l-14.623 81.891C234.523 473.246 240.178 480 247.65 480h40.632a12 12 0 0 0 11.813-9.891L315.472 384h79.096a12 12 0 0 0 11.813-9.891l7.143-40c1.313-7.355-4.342-14.109-11.813-14.109h-74.81l22.857-128h79.096a12 12 0 0 0 11.813-9.891zM261.889 320h-98.634l22.857-128h98.634l-22.857 128z"
+                      fill="currentColor"
+                    />
+                  </svg>
+                  <!--v-if-->
+                  <span
+                    class="content"
+                  >
+                    
+                    <span>
+                      <!--v-if-->
+                      age
+                    </span>
+                    
+                  </span>
+                </span>
+              </div>
+              <span
+                class="text"
+                data-test-id="run-data-schema-item-value"
+              >
+                
+                
+                <!--v-if-->
+                <span
+                  class="content"
+                >
+                  
+                  <span>
+                    <!--v-if-->
+                    22
+                  </span>
+                  
+                </span>
+                
+                
+              </span>
+            </div>
+            <!--v-if-->
+            <!--v-if-->
+            <!--v-if-->
+          </div>
+          <div
+            class="item"
+            data-test-id="run-data-schema-item"
+          >
+            <div
+              class="itemContent"
+            >
+              <div
+                class="pill mappable"
+                title="array"
+              >
+                <span
+                  class="label"
+                  data-depth="1"
+                  data-name="hobbies"
+                  data-path=".hobbies"
+                  data-target="mappable"
+                  data-value="{{ $('Set2').item.json.hobbies }}"
+                >
+                  <svg
+                    aria-hidden="true"
+                    class="svg-inline--fa fa-list fa-w-16 fa-sm"
+                    data-icon="list"
+                    data-prefix="fas"
+                    focusable="false"
+                    role="img"
+                    viewBox="0 0 512 512"
+                    xmlns="http://www.w3.org/2000/svg"
+                  >
+                    <path
+                      class=""
+                      d="M80 368H16a16 16 0 0 0-16 16v64a16 16 0 0 0 16 16h64a16 16 0 0 0 16-16v-64a16 16 0 0 0-16-16zm0-320H16A16 16 0 0 0 0 64v64a16 16 0 0 0 16 16h64a16 16 0 0 0 16-16V64a16 16 0 0 0-16-16zm0 160H16a16 16 0 0 0-16 16v64a16 16 0 0 0 16 16h64a16 16 0 0 0 16-16v-64a16 16 0 0 0-16-16zm416 176H176a16 16 0 0 0-16 16v32a16 16 0 0 0 16 16h320a16 16 0 0 0 16-16v-32a16 16 0 0 0-16-16zm0-320H176a16 16 0 0 0-16 16v32a16 16 0 0 0 16 16h320a16 16 0 0 0 16-16V80a16 16 0 0 0-16-16zm0 160H176a16 16 0 0 0-16 16v32a16 16 0 0 0 16 16h320a16 16 0 0 0 16-16v-32a16 16 0 0 0-16-16z"
+                      fill="currentColor"
+                    />
+                  </svg>
+                  <!--v-if-->
+                  <span
+                    class="content"
+                  >
+                    
+                    <span>
+                      <!--v-if-->
+                      hobbies
+                    </span>
+                    
+                  </span>
+                </span>
+              </div>
+              <!--v-if-->
+            </div>
+            <input
+              id="set_2-hobbies"
+              inert=""
+              type="checkbox"
+            />
+            <label
+              class="toggle"
+              for="set_2-hobbies"
+            >
+              <svg
+                aria-hidden="true"
+                class="svg-inline--fa fa-angle-right fa-w-8"
+                data-icon="angle-right"
+                data-prefix="fas"
+                focusable="false"
+                role="img"
+                viewBox="0 0 256 512"
+                xmlns="http://www.w3.org/2000/svg"
+              >
+                <path
+                  class=""
+                  d="M224.3 273l-136 136c-9.4 9.4-24.6 9.4-33.9 0l-22.6-22.6c-9.4-9.4-9.4-24.6 0-33.9l96.4-96.4-96.4-96.4c-9.4-9.4-9.4-24.6 0-33.9L54.3 103c9.4-9.4 24.6-9.4 33.9 0l136 136c9.5 9.4 9.5 24.6.1 34z"
+                  fill="currentColor"
+                />
+              </svg>
+            </label>
+            <div
+              class="sub"
+            >
+              <div
+                class="innerSub"
+              >
+                
+                <div
+                  class="item"
+                  data-test-id="run-data-schema-item"
+                >
+                  <div
+                    class="itemContent"
+                  >
+                    <div
+                      class="pill mappable"
+                      title="string"
+                    >
+                      <span
+                        class="label"
+                        data-depth="2"
+                        data-name="string[0]"
+                        data-path=".hobbies[0]"
+                        data-target="mappable"
+                        data-value="{{ $('Set2').item.json.hobbies[0] }}"
+                      >
+                        <svg
+                          aria-hidden="true"
+                          class="svg-inline--fa fa-font fa-w-14 fa-sm"
+                          data-icon="font"
+                          data-prefix="fas"
+                          focusable="false"
+                          role="img"
+                          viewBox="0 0 448 512"
+                          xmlns="http://www.w3.org/2000/svg"
+                        >
+                          <path
+                            class=""
+                            d="M432 416h-23.41L277.88 53.69A32 32 0 0 0 247.58 32h-47.16a32 32 0 0 0-30.3 21.69L39.41 416H16a16 16 0 0 0-16 16v32a16 16 0 0 0 16 16h128a16 16 0 0 0 16-16v-32a16 16 0 0 0-16-16h-19.58l23.3-64h152.56l23.3 64H304a16 16 0 0 0-16 16v32a16 16 0 0 0 16 16h128a16 16 0 0 0 16-16v-32a16 16 0 0 0-16-16zM176.85 272L224 142.51 271.15 272z"
+                            fill="currentColor"
+                          />
+                        </svg>
+                        <span
+                          class="content"
+                        >
+                          
+                          <span>
+                            <!--v-if-->
+                            hobbies
+                          </span>
+                          
+                        </span>
+                        <span
+                          class="content arrayIndex"
+                        >
+                          
+                          <span>
+                            <!--v-if-->
+                            [0]
+                          </span>
+                          
+                        </span>
+                      </span>
+                    </div>
+                    <span
+                      class="text"
+                      data-test-id="run-data-schema-item-value"
+                    >
+                      
+                      
+                      <!--v-if-->
+                      <span
+                        class="content"
+                      >
+                        
+                        <span>
+                          <!--v-if-->
+                          surfing
+                        </span>
+                        
+                      </span>
+                      
+                      
+                    </span>
+                  </div>
+                  <!--v-if-->
+                  <!--v-if-->
+                  <!--v-if-->
+                </div>
+                <div
+                  class="item"
+                  data-test-id="run-data-schema-item"
+                >
+                  <div
+                    class="itemContent"
+                  >
+                    <div
+                      class="pill mappable"
+                      title="string"
+                    >
+                      <span
+                        class="label"
+                        data-depth="2"
+                        data-name="string[1]"
+                        data-path=".hobbies[1]"
+                        data-target="mappable"
+                        data-value="{{ $('Set2').item.json.hobbies[1] }}"
+                      >
+                        <svg
+                          aria-hidden="true"
+                          class="svg-inline--fa fa-font fa-w-14 fa-sm"
+                          data-icon="font"
+                          data-prefix="fas"
+                          focusable="false"
+                          role="img"
+                          viewBox="0 0 448 512"
+                          xmlns="http://www.w3.org/2000/svg"
+                        >
+                          <path
+                            class=""
+                            d="M432 416h-23.41L277.88 53.69A32 32 0 0 0 247.58 32h-47.16a32 32 0 0 0-30.3 21.69L39.41 416H16a16 16 0 0 0-16 16v32a16 16 0 0 0 16 16h128a16 16 0 0 0 16-16v-32a16 16 0 0 0-16-16h-19.58l23.3-64h152.56l23.3 64H304a16 16 0 0 0-16 16v32a16 16 0 0 0 16 16h128a16 16 0 0 0 16-16v-32a16 16 0 0 0-16-16zM176.85 272L224 142.51 271.15 272z"
+                            fill="currentColor"
+                          />
+                        </svg>
+                        <span
+                          class="content"
+                        >
+                          
+                          <span>
+                            <!--v-if-->
+                            hobbies
+                          </span>
+                          
+                        </span>
+                        <span
+                          class="content arrayIndex"
+                        >
+                          
+                          <span>
+                            <!--v-if-->
+                            [1]
+                          </span>
+                          
+                        </span>
+                      </span>
+                    </div>
+                    <span
+                      class="text"
+                      data-test-id="run-data-schema-item-value"
+                    >
+                      
+                      
+                      <!--v-if-->
+                      <span
+                        class="content"
+                      >
+                        
+                        <span>
+                          <!--v-if-->
+                          traveling
+                        </span>
+                        
+                      </span>
+                      
+                      
+                    </span>
+                  </div>
+                  <!--v-if-->
+                  <!--v-if-->
+                  <!--v-if-->
+                </div>
+                
+              </div>
+            </div>
+          </div>
+          
+        </div>
+      </div>
+    </div>
+  </div>
+</div>
+`;
+
+exports[`RunDataSchema.vue > renders schema for in output pane 1`] = `
+<div>
+  <div
+    class="schemaWrapper"
+    data-v-46dade00=""
+  >
+    <div
+      class="schema"
+      data-test-id="run-data-schema-node-schema"
+      data-v-46dade00=""
+    >
+      <div
+        class="item"
+        data-test-id="run-data-schema-item"
+        data-v-46dade00=""
+      >
+        <div
+          class="itemContent"
+        >
+          <!--v-if-->
+          <!--v-if-->
+        </div>
+        <!--v-if-->
+        <!--v-if-->
+        <div
+          class="sub"
+        >
+          <div
+            class="innerSub"
+          >
+            
+            <div
+              class="item"
+              data-test-id="run-data-schema-item"
+            >
+              <div
+                class="itemContent"
+              >
+                <div
+                  class="pill mappable"
+                  title="string"
+                >
+                  <span
+                    class="label"
+                    data-depth="1"
+                    data-name="name"
+                    data-path=".name"
+                    data-target="mappable"
+                    data-value="{{ $json.name }}"
+                  >
+                    <svg
+                      aria-hidden="true"
+                      class="svg-inline--fa fa-font fa-w-14 fa-sm"
+                      data-icon="font"
+                      data-prefix="fas"
+                      focusable="false"
+                      role="img"
+                      viewBox="0 0 448 512"
+                      xmlns="http://www.w3.org/2000/svg"
+                    >
+                      <path
+                        class=""
+                        d="M432 416h-23.41L277.88 53.69A32 32 0 0 0 247.58 32h-47.16a32 32 0 0 0-30.3 21.69L39.41 416H16a16 16 0 0 0-16 16v32a16 16 0 0 0 16 16h128a16 16 0 0 0 16-16v-32a16 16 0 0 0-16-16h-19.58l23.3-64h152.56l23.3 64H304a16 16 0 0 0-16 16v32a16 16 0 0 0 16 16h128a16 16 0 0 0 16-16v-32a16 16 0 0 0-16-16zM176.85 272L224 142.51 271.15 272z"
+                        fill="currentColor"
+                      />
+                    </svg>
+                    <!--v-if-->
+                    <span
+                      class="content"
+                    >
+                      
+                      <span>
+                        <!--v-if-->
+                        name
+                      </span>
+                      
+                    </span>
+                  </span>
+                </div>
+                <span
+                  class="text"
+                  data-test-id="run-data-schema-item-value"
+                >
+                  
+                  
+                  <!--v-if-->
+                  <span
+                    class="content"
+                  >
+                    
+                    <span>
+                      <!--v-if-->
+                      John
+                    </span>
+                    
+                  </span>
+                  
+                  
+                </span>
+              </div>
+              <!--v-if-->
+              <!--v-if-->
+              <!--v-if-->
+            </div>
+            <div
+              class="item"
+              data-test-id="run-data-schema-item"
+            >
+              <div
+                class="itemContent"
+              >
+                <div
+                  class="pill mappable"
+                  title="number"
+                >
+                  <span
+                    class="label"
+                    data-depth="1"
+                    data-name="age"
+                    data-path=".age"
+                    data-target="mappable"
+                    data-value="{{ $json.age }}"
+                  >
+                    <svg
+                      aria-hidden="true"
+                      class="svg-inline--fa fa-hashtag fa-w-14 fa-sm"
+                      data-icon="hashtag"
+                      data-prefix="fas"
+                      focusable="false"
+                      role="img"
+                      viewBox="0 0 448 512"
+                      xmlns="http://www.w3.org/2000/svg"
+                    >
+                      <path
+                        class=""
+                        d="M440.667 182.109l7.143-40c1.313-7.355-4.342-14.109-11.813-14.109h-74.81l14.623-81.891C377.123 38.754 371.468 32 363.997 32h-40.632a12 12 0 0 0-11.813 9.891L296.175 128H197.54l14.623-81.891C213.477 38.754 207.822 32 200.35 32h-40.632a12 12 0 0 0-11.813 9.891L132.528 128H53.432a12 12 0 0 0-11.813 9.891l-7.143 40C33.163 185.246 38.818 192 46.289 192h74.81L98.242 320H19.146a12 12 0 0 0-11.813 9.891l-7.143 40C-1.123 377.246 4.532 384 12.003 384h74.81L72.19 465.891C70.877 473.246 76.532 480 84.003 480h40.632a12 12 0 0 0 11.813-9.891L151.826 384h98.634l-14.623 81.891C234.523 473.246 240.178 480 247.65 480h40.632a12 12 0 0 0 11.813-9.891L315.472 384h79.096a12 12 0 0 0 11.813-9.891l7.143-40c1.313-7.355-4.342-14.109-11.813-14.109h-74.81l22.857-128h79.096a12 12 0 0 0 11.813-9.891zM261.889 320h-98.634l22.857-128h98.634l-22.857 128z"
+                        fill="currentColor"
+                      />
+                    </svg>
+                    <!--v-if-->
+                    <span
+                      class="content"
+                    >
+                      
+                      <span>
+                        <!--v-if-->
+                        age
+                      </span>
+                      
+                    </span>
+                  </span>
+                </div>
+                <span
+                  class="text"
+                  data-test-id="run-data-schema-item-value"
+                >
+                  
+                  
+                  <!--v-if-->
+                  <span
+                    class="content"
+                  >
+                    
+                    <span>
+                      <!--v-if-->
+                      22
+                    </span>
+                    
+                  </span>
+                  
+                  
+                </span>
+              </div>
+              <!--v-if-->
+              <!--v-if-->
+              <!--v-if-->
+            </div>
+            <div
+              class="item"
+              data-test-id="run-data-schema-item"
+            >
+              <div
+                class="itemContent"
+              >
+                <div
+                  class="pill mappable"
+                  title="array"
+                >
+                  <span
+                    class="label"
+                    data-depth="1"
+                    data-name="hobbies"
+                    data-path=".hobbies"
+                    data-target="mappable"
+                    data-value="{{ $json.hobbies }}"
+                  >
+                    <svg
+                      aria-hidden="true"
+                      class="svg-inline--fa fa-list fa-w-16 fa-sm"
+                      data-icon="list"
+                      data-prefix="fas"
+                      focusable="false"
+                      role="img"
+                      viewBox="0 0 512 512"
+                      xmlns="http://www.w3.org/2000/svg"
+                    >
+                      <path
+                        class=""
+                        d="M80 368H16a16 16 0 0 0-16 16v64a16 16 0 0 0 16 16h64a16 16 0 0 0 16-16v-64a16 16 0 0 0-16-16zm0-320H16A16 16 0 0 0 0 64v64a16 16 0 0 0 16 16h64a16 16 0 0 0 16-16V64a16 16 0 0 0-16-16zm0 160H16a16 16 0 0 0-16 16v64a16 16 0 0 0 16 16h64a16 16 0 0 0 16-16v-64a16 16 0 0 0-16-16zm416 176H176a16 16 0 0 0-16 16v32a16 16 0 0 0 16 16h320a16 16 0 0 0 16-16v-32a16 16 0 0 0-16-16zm0-320H176a16 16 0 0 0-16 16v32a16 16 0 0 0 16 16h320a16 16 0 0 0 16-16V80a16 16 0 0 0-16-16zm0 160H176a16 16 0 0 0-16 16v32a16 16 0 0 0 16 16h320a16 16 0 0 0 16-16v-32a16 16 0 0 0-16-16z"
+                        fill="currentColor"
+                      />
+                    </svg>
+                    <!--v-if-->
+                    <span
+                      class="content"
+                    >
+                      
+                      <span>
+                        <!--v-if-->
+                        hobbies
+                      </span>
+                      
+                    </span>
+                  </span>
+                </div>
+                <!--v-if-->
+              </div>
+              <input
+                id="output_object-0-0-hobbies"
+                inert=""
+                type="checkbox"
+              />
+              <label
+                class="toggle"
+                for="output_object-0-0-hobbies"
+              >
+                <svg
+                  aria-hidden="true"
+                  class="svg-inline--fa fa-angle-right fa-w-8"
+                  data-icon="angle-right"
+                  data-prefix="fas"
+                  focusable="false"
+                  role="img"
+                  viewBox="0 0 256 512"
+                  xmlns="http://www.w3.org/2000/svg"
+                >
+                  <path
+                    class=""
+                    d="M224.3 273l-136 136c-9.4 9.4-24.6 9.4-33.9 0l-22.6-22.6c-9.4-9.4-9.4-24.6 0-33.9l96.4-96.4-96.4-96.4c-9.4-9.4-9.4-24.6 0-33.9L54.3 103c9.4-9.4 24.6-9.4 33.9 0l136 136c9.5 9.4 9.5 24.6.1 34z"
+                    fill="currentColor"
+                  />
+                </svg>
+              </label>
+              <div
+                class="sub"
+              >
+                <div
+                  class="innerSub"
+                >
+                  
+                  <div
+                    class="item"
+                    data-test-id="run-data-schema-item"
+                  >
+                    <div
+                      class="itemContent"
+                    >
+                      <div
+                        class="pill mappable"
+                        title="string"
+                      >
+                        <span
+                          class="label"
+                          data-depth="2"
+                          data-name="string[0]"
+                          data-path=".hobbies[0]"
+                          data-target="mappable"
+                          data-value="{{ $json.hobbies[0] }}"
+                        >
+                          <svg
+                            aria-hidden="true"
+                            class="svg-inline--fa fa-font fa-w-14 fa-sm"
+                            data-icon="font"
+                            data-prefix="fas"
+                            focusable="false"
+                            role="img"
+                            viewBox="0 0 448 512"
+                            xmlns="http://www.w3.org/2000/svg"
+                          >
+                            <path
+                              class=""
+                              d="M432 416h-23.41L277.88 53.69A32 32 0 0 0 247.58 32h-47.16a32 32 0 0 0-30.3 21.69L39.41 416H16a16 16 0 0 0-16 16v32a16 16 0 0 0 16 16h128a16 16 0 0 0 16-16v-32a16 16 0 0 0-16-16h-19.58l23.3-64h152.56l23.3 64H304a16 16 0 0 0-16 16v32a16 16 0 0 0 16 16h128a16 16 0 0 0 16-16v-32a16 16 0 0 0-16-16zM176.85 272L224 142.51 271.15 272z"
+                              fill="currentColor"
+                            />
+                          </svg>
+                          <span
+                            class="content"
+                          >
+                            
+                            <span>
+                              <!--v-if-->
+                              hobbies
+                            </span>
+                            
+                          </span>
+                          <span
+                            class="content arrayIndex"
+                          >
+                            
+                            <span>
+                              <!--v-if-->
+                              [0]
+                            </span>
+                            
+                          </span>
+                        </span>
+                      </div>
+                      <span
+                        class="text"
+                        data-test-id="run-data-schema-item-value"
+                      >
+                        
+                        
+                        <!--v-if-->
+                        <span
+                          class="content"
+                        >
+                          
+                          <span>
+                            <!--v-if-->
+                            surfing
+                          </span>
+                          
+                        </span>
+                        
+                        
+                      </span>
+                    </div>
+                    <!--v-if-->
+                    <!--v-if-->
+                    <!--v-if-->
+                  </div>
+                  <div
+                    class="item"
+                    data-test-id="run-data-schema-item"
+                  >
+                    <div
+                      class="itemContent"
+                    >
+                      <div
+                        class="pill mappable"
+                        title="string"
+                      >
+                        <span
+                          class="label"
+                          data-depth="2"
+                          data-name="string[1]"
+                          data-path=".hobbies[1]"
+                          data-target="mappable"
+                          data-value="{{ $json.hobbies[1] }}"
+                        >
+                          <svg
+                            aria-hidden="true"
+                            class="svg-inline--fa fa-font fa-w-14 fa-sm"
+                            data-icon="font"
+                            data-prefix="fas"
+                            focusable="false"
+                            role="img"
+                            viewBox="0 0 448 512"
+                            xmlns="http://www.w3.org/2000/svg"
+                          >
+                            <path
+                              class=""
+                              d="M432 416h-23.41L277.88 53.69A32 32 0 0 0 247.58 32h-47.16a32 32 0 0 0-30.3 21.69L39.41 416H16a16 16 0 0 0-16 16v32a16 16 0 0 0 16 16h128a16 16 0 0 0 16-16v-32a16 16 0 0 0-16-16h-19.58l23.3-64h152.56l23.3 64H304a16 16 0 0 0-16 16v32a16 16 0 0 0 16 16h128a16 16 0 0 0 16-16v-32a16 16 0 0 0-16-16zM176.85 272L224 142.51 271.15 272z"
+                              fill="currentColor"
+                            />
+                          </svg>
+                          <span
+                            class="content"
+                          >
+                            
+                            <span>
+                              <!--v-if-->
+                              hobbies
+                            </span>
+                            
+                          </span>
+                          <span
+                            class="content arrayIndex"
+                          >
+                            
+                            <span>
+                              <!--v-if-->
+                              [1]
+                            </span>
+                            
+                          </span>
+                        </span>
+                      </div>
+                      <span
+                        class="text"
+                        data-test-id="run-data-schema-item-value"
+                      >
+                        
+                        
+                        <!--v-if-->
+                        <span
+                          class="content"
+                        >
+                          
+                          <span>
+                            <!--v-if-->
+                            traveling
+                          </span>
+                          
+                        </span>
+                        
+                        
+                      </span>
+                    </div>
                     <!--v-if-->
                     <!--v-if-->
                     <!--v-if-->
@@ -1338,8 +1422,12 @@ exports[`RunDataSchema.vue > renders schema with spaces and dots 1`] = `
                 data-test-id="run-data-schema-item"
                 data-v-46dade00=""
               >
-                <!--v-if-->
-                <!--v-if-->
+                <div
+                  class="itemContent"
+                >
+                  <!--v-if-->
+                  <!--v-if-->
+                </div>
                 <!--v-if-->
                 <!--v-if-->
                 <div
@@ -1354,47 +1442,51 @@ exports[`RunDataSchema.vue > renders schema with spaces and dots 1`] = `
                       data-test-id="run-data-schema-item"
                     >
                       <div
-                        class="pill mappable"
-                        title="array"
+                        class="itemContent"
                       >
-                        <span
-                          class="label"
-                          data-depth="1"
-                          data-name="hello world"
-                          data-path="['hello world']"
-                          data-target="mappable"
-                          data-value="{{ $json['hello world'] }}"
+                        <div
+                          class="pill mappable"
+                          title="array"
                         >
-                          <svg
-                            aria-hidden="true"
-                            class="svg-inline--fa fa-list fa-w-16 fa-sm"
-                            data-icon="list"
-                            data-prefix="fas"
-                            focusable="false"
-                            role="img"
-                            viewBox="0 0 512 512"
-                            xmlns="http://www.w3.org/2000/svg"
-                          >
-                            <path
-                              class=""
-                              d="M80 368H16a16 16 0 0 0-16 16v64a16 16 0 0 0 16 16h64a16 16 0 0 0 16-16v-64a16 16 0 0 0-16-16zm0-320H16A16 16 0 0 0 0 64v64a16 16 0 0 0 16 16h64a16 16 0 0 0 16-16V64a16 16 0 0 0-16-16zm0 160H16a16 16 0 0 0-16 16v64a16 16 0 0 0 16 16h64a16 16 0 0 0 16-16v-64a16 16 0 0 0-16-16zm416 176H176a16 16 0 0 0-16 16v32a16 16 0 0 0 16 16h320a16 16 0 0 0 16-16v-32a16 16 0 0 0-16-16zm0-320H176a16 16 0 0 0-16 16v32a16 16 0 0 0 16 16h320a16 16 0 0 0 16-16V80a16 16 0 0 0-16-16zm0 160H176a16 16 0 0 0-16 16v32a16 16 0 0 0 16 16h320a16 16 0 0 0 16-16v-32a16 16 0 0 0-16-16z"
-                              fill="currentColor"
-                            />
-                          </svg>
-                          <!--v-if-->
                           <span
-                            class="content"
+                            class="label"
+                            data-depth="1"
+                            data-name="hello world"
+                            data-path="['hello world']"
+                            data-target="mappable"
+                            data-value="{{ $json['hello world'] }}"
                           >
-                            
-                            <span>
-                              <!--v-if-->
-                              hello world
+                            <svg
+                              aria-hidden="true"
+                              class="svg-inline--fa fa-list fa-w-16 fa-sm"
+                              data-icon="list"
+                              data-prefix="fas"
+                              focusable="false"
+                              role="img"
+                              viewBox="0 0 512 512"
+                              xmlns="http://www.w3.org/2000/svg"
+                            >
+                              <path
+                                class=""
+                                d="M80 368H16a16 16 0 0 0-16 16v64a16 16 0 0 0 16 16h64a16 16 0 0 0 16-16v-64a16 16 0 0 0-16-16zm0-320H16A16 16 0 0 0 0 64v64a16 16 0 0 0 16 16h64a16 16 0 0 0 16-16V64a16 16 0 0 0-16-16zm0 160H16a16 16 0 0 0-16 16v64a16 16 0 0 0 16 16h64a16 16 0 0 0 16-16v-64a16 16 0 0 0-16-16zm416 176H176a16 16 0 0 0-16 16v32a16 16 0 0 0 16 16h320a16 16 0 0 0 16-16v-32a16 16 0 0 0-16-16zm0-320H176a16 16 0 0 0-16 16v32a16 16 0 0 0 16 16h320a16 16 0 0 0 16-16V80a16 16 0 0 0-16-16zm0 160H176a16 16 0 0 0-16 16v32a16 16 0 0 0 16 16h320a16 16 0 0 0 16-16v-32a16 16 0 0 0-16-16z"
+                                fill="currentColor"
+                              />
+                            </svg>
+                            <!--v-if-->
+                            <span
+                              class="content"
+                            >
+                              
+                              <span>
+                                <!--v-if-->
+                                hello world
+                              </span>
+                              
                             </span>
-                            
                           </span>
-                        </span>
+                        </div>
+                        <!--v-if-->
                       </div>
-                      <!--v-if-->
                       <input
                         id="set_1-hello world"
                         inert=""
@@ -1433,56 +1525,60 @@ exports[`RunDataSchema.vue > renders schema with spaces and dots 1`] = `
                             data-test-id="run-data-schema-item"
                           >
                             <div
-                              class="pill mappable"
-                              title="object"
+                              class="itemContent"
                             >
-                              <span
-                                class="label"
-                                data-depth="2"
-                                data-name="object[0]"
-                                data-path="['hello world'][0]"
-                                data-target="mappable"
-                                data-value="{{ $json['hello world'][0] }}"
+                              <div
+                                class="pill mappable"
+                                title="object"
                               >
-                                <svg
-                                  aria-hidden="true"
-                                  class="svg-inline--fa fa-cube fa-w-16 fa-sm"
-                                  data-icon="cube"
-                                  data-prefix="fas"
-                                  focusable="false"
-                                  role="img"
-                                  viewBox="0 0 512 512"
-                                  xmlns="http://www.w3.org/2000/svg"
-                                >
-                                  <path
-                                    class=""
-                                    d="M239.1 6.3l-208 78c-18.7 7-31.1 25-31.1 45v225.1c0 18.2 10.3 34.8 26.5 42.9l208 104c13.5 6.8 29.4 6.8 42.9 0l208-104c16.3-8.1 26.5-24.8 26.5-42.9V129.3c0-20-12.4-37.9-31.1-44.9l-208-78C262 2.2 250 2.2 239.1 6.3zM256 68.4l192 72v1.1l-192 78-192-78v-1.1l192-72zm32 356V275.5l160-65v133.9l-160 80z"
-                                    fill="currentColor"
-                                  />
-                                </svg>
                                 <span
-                                  class="content"
+                                  class="label"
+                                  data-depth="2"
+                                  data-name="object[0]"
+                                  data-path="['hello world'][0]"
+                                  data-target="mappable"
+                                  data-value="{{ $json['hello world'][0] }}"
                                 >
-                                  
-                                  <span>
-                                    <!--v-if-->
-                                    hello world
+                                  <svg
+                                    aria-hidden="true"
+                                    class="svg-inline--fa fa-cube fa-w-16 fa-sm"
+                                    data-icon="cube"
+                                    data-prefix="fas"
+                                    focusable="false"
+                                    role="img"
+                                    viewBox="0 0 512 512"
+                                    xmlns="http://www.w3.org/2000/svg"
+                                  >
+                                    <path
+                                      class=""
+                                      d="M239.1 6.3l-208 78c-18.7 7-31.1 25-31.1 45v225.1c0 18.2 10.3 34.8 26.5 42.9l208 104c13.5 6.8 29.4 6.8 42.9 0l208-104c16.3-8.1 26.5-24.8 26.5-42.9V129.3c0-20-12.4-37.9-31.1-44.9l-208-78C262 2.2 250 2.2 239.1 6.3zM256 68.4l192 72v1.1l-192 78-192-78v-1.1l192-72zm32 356V275.5l160-65v133.9l-160 80z"
+                                      fill="currentColor"
+                                    />
+                                  </svg>
+                                  <span
+                                    class="content"
+                                  >
+                                    
+                                    <span>
+                                      <!--v-if-->
+                                      hello world
+                                    </span>
+                                    
                                   </span>
-                                  
-                                </span>
-                                <span
-                                  class="content arrayIndex"
-                                >
-                                  
-                                  <span>
-                                    <!--v-if-->
-                                    [0]
+                                  <span
+                                    class="content arrayIndex"
+                                  >
+                                    
+                                    <span>
+                                      <!--v-if-->
+                                      [0]
+                                    </span>
+                                    
                                   </span>
-                                  
                                 </span>
-                              </span>
+                              </div>
+                              <!--v-if-->
                             </div>
-                            <!--v-if-->
                             <input
                               id="set_1-hello world-0"
                               inert=""
@@ -1521,47 +1617,51 @@ exports[`RunDataSchema.vue > renders schema with spaces and dots 1`] = `
                                   data-test-id="run-data-schema-item"
                                 >
                                   <div
-                                    class="pill mappable"
-                                    title="object"
+                                    class="itemContent"
                                   >
-                                    <span
-                                      class="label"
-                                      data-depth="3"
-                                      data-name="test"
-                                      data-path="['hello world'][0].test"
-                                      data-target="mappable"
-                                      data-value="{{ $json['hello world'][0].test }}"
+                                    <div
+                                      class="pill mappable"
+                                      title="object"
                                     >
-                                      <svg
-                                        aria-hidden="true"
-                                        class="svg-inline--fa fa-cube fa-w-16 fa-sm"
-                                        data-icon="cube"
-                                        data-prefix="fas"
-                                        focusable="false"
-                                        role="img"
-                                        viewBox="0 0 512 512"
-                                        xmlns="http://www.w3.org/2000/svg"
-                                      >
-                                        <path
-                                          class=""
-                                          d="M239.1 6.3l-208 78c-18.7 7-31.1 25-31.1 45v225.1c0 18.2 10.3 34.8 26.5 42.9l208 104c13.5 6.8 29.4 6.8 42.9 0l208-104c16.3-8.1 26.5-24.8 26.5-42.9V129.3c0-20-12.4-37.9-31.1-44.9l-208-78C262 2.2 250 2.2 239.1 6.3zM256 68.4l192 72v1.1l-192 78-192-78v-1.1l192-72zm32 356V275.5l160-65v133.9l-160 80z"
-                                          fill="currentColor"
-                                        />
-                                      </svg>
-                                      <!--v-if-->
                                       <span
-                                        class="content"
+                                        class="label"
+                                        data-depth="3"
+                                        data-name="test"
+                                        data-path="['hello world'][0].test"
+                                        data-target="mappable"
+                                        data-value="{{ $json['hello world'][0].test }}"
                                       >
-                                        
-                                        <span>
-                                          <!--v-if-->
-                                          test
+                                        <svg
+                                          aria-hidden="true"
+                                          class="svg-inline--fa fa-cube fa-w-16 fa-sm"
+                                          data-icon="cube"
+                                          data-prefix="fas"
+                                          focusable="false"
+                                          role="img"
+                                          viewBox="0 0 512 512"
+                                          xmlns="http://www.w3.org/2000/svg"
+                                        >
+                                          <path
+                                            class=""
+                                            d="M239.1 6.3l-208 78c-18.7 7-31.1 25-31.1 45v225.1c0 18.2 10.3 34.8 26.5 42.9l208 104c13.5 6.8 29.4 6.8 42.9 0l208-104c16.3-8.1 26.5-24.8 26.5-42.9V129.3c0-20-12.4-37.9-31.1-44.9l-208-78C262 2.2 250 2.2 239.1 6.3zM256 68.4l192 72v1.1l-192 78-192-78v-1.1l192-72zm32 356V275.5l160-65v133.9l-160 80z"
+                                            fill="currentColor"
+                                          />
+                                        </svg>
+                                        <!--v-if-->
+                                        <span
+                                          class="content"
+                                        >
+                                          
+                                          <span>
+                                            <!--v-if-->
+                                            test
+                                          </span>
+                                          
                                         </span>
-                                        
                                       </span>
-                                    </span>
+                                    </div>
+                                    <!--v-if-->
                                   </div>
-                                  <!--v-if-->
                                   <input
                                     id="set_1-hello world-0-test"
                                     inert=""
@@ -1600,33 +1700,55 @@ exports[`RunDataSchema.vue > renders schema with spaces and dots 1`] = `
                                         data-test-id="run-data-schema-item"
                                       >
                                         <div
-                                          class="pill mappable"
-                                          title="number"
+                                          class="itemContent"
                                         >
-                                          <span
-                                            class="label"
-                                            data-depth="4"
-                                            data-name="more to think about"
-                                            data-path="['hello world'][0].test['more to think about']"
-                                            data-target="mappable"
-                                            data-value="{{ $json['hello world'][0].test['more to think about'] }}"
+                                          <div
+                                            class="pill mappable"
+                                            title="number"
                                           >
-                                            <svg
-                                              aria-hidden="true"
-                                              class="svg-inline--fa fa-hashtag fa-w-14 fa-sm"
-                                              data-icon="hashtag"
-                                              data-prefix="fas"
-                                              focusable="false"
-                                              role="img"
-                                              viewBox="0 0 448 512"
-                                              xmlns="http://www.w3.org/2000/svg"
+                                            <span
+                                              class="label"
+                                              data-depth="4"
+                                              data-name="more to think about"
+                                              data-path="['hello world'][0].test['more to think about']"
+                                              data-target="mappable"
+                                              data-value="{{ $json['hello world'][0].test['more to think about'] }}"
                                             >
-                                              <path
-                                                class=""
-                                                d="M440.667 182.109l7.143-40c1.313-7.355-4.342-14.109-11.813-14.109h-74.81l14.623-81.891C377.123 38.754 371.468 32 363.997 32h-40.632a12 12 0 0 0-11.813 9.891L296.175 128H197.54l14.623-81.891C213.477 38.754 207.822 32 200.35 32h-40.632a12 12 0 0 0-11.813 9.891L132.528 128H53.432a12 12 0 0 0-11.813 9.891l-7.143 40C33.163 185.246 38.818 192 46.289 192h74.81L98.242 320H19.146a12 12 0 0 0-11.813 9.891l-7.143 40C-1.123 377.246 4.532 384 12.003 384h74.81L72.19 465.891C70.877 473.246 76.532 480 84.003 480h40.632a12 12 0 0 0 11.813-9.891L151.826 384h98.634l-14.623 81.891C234.523 473.246 240.178 480 247.65 480h40.632a12 12 0 0 0 11.813-9.891L315.472 384h79.096a12 12 0 0 0 11.813-9.891l7.143-40c1.313-7.355-4.342-14.109-11.813-14.109h-74.81l22.857-128h79.096a12 12 0 0 0 11.813-9.891zM261.889 320h-98.634l22.857-128h98.634l-22.857 128z"
-                                                fill="currentColor"
-                                              />
-                                            </svg>
+                                              <svg
+                                                aria-hidden="true"
+                                                class="svg-inline--fa fa-hashtag fa-w-14 fa-sm"
+                                                data-icon="hashtag"
+                                                data-prefix="fas"
+                                                focusable="false"
+                                                role="img"
+                                                viewBox="0 0 448 512"
+                                                xmlns="http://www.w3.org/2000/svg"
+                                              >
+                                                <path
+                                                  class=""
+                                                  d="M440.667 182.109l7.143-40c1.313-7.355-4.342-14.109-11.813-14.109h-74.81l14.623-81.891C377.123 38.754 371.468 32 363.997 32h-40.632a12 12 0 0 0-11.813 9.891L296.175 128H197.54l14.623-81.891C213.477 38.754 207.822 32 200.35 32h-40.632a12 12 0 0 0-11.813 9.891L132.528 128H53.432a12 12 0 0 0-11.813 9.891l-7.143 40C33.163 185.246 38.818 192 46.289 192h74.81L98.242 320H19.146a12 12 0 0 0-11.813 9.891l-7.143 40C-1.123 377.246 4.532 384 12.003 384h74.81L72.19 465.891C70.877 473.246 76.532 480 84.003 480h40.632a12 12 0 0 0 11.813-9.891L151.826 384h98.634l-14.623 81.891C234.523 473.246 240.178 480 247.65 480h40.632a12 12 0 0 0 11.813-9.891L315.472 384h79.096a12 12 0 0 0 11.813-9.891l7.143-40c1.313-7.355-4.342-14.109-11.813-14.109h-74.81l22.857-128h79.096a12 12 0 0 0 11.813-9.891zM261.889 320h-98.634l22.857-128h98.634l-22.857 128z"
+                                                  fill="currentColor"
+                                                />
+                                              </svg>
+                                              <!--v-if-->
+                                              <span
+                                                class="content"
+                                              >
+                                                
+                                                <span>
+                                                  <!--v-if-->
+                                                  more to think about
+                                                </span>
+                                                
+                                              </span>
+                                            </span>
+                                          </div>
+                                          <span
+                                            class="text"
+                                            data-test-id="run-data-schema-item-value"
+                                          >
+                                            
+                                            
                                             <!--v-if-->
                                             <span
                                               class="content"
@@ -1634,31 +1756,14 @@ exports[`RunDataSchema.vue > renders schema with spaces and dots 1`] = `
                                               
                                               <span>
                                                 <!--v-if-->
-                                                more to think about
+                                                1
                                               </span>
                                               
                                             </span>
+                                            
+                                            
                                           </span>
                                         </div>
-                                        <span
-                                          class="text"
-                                        >
-                                          
-                                          
-                                          <!--v-if-->
-                                          <span
-                                            class="content"
-                                          >
-                                            
-                                            <span>
-                                              <!--v-if-->
-                                              1
-                                            </span>
-                                            
-                                          </span>
-                                          
-                                          
-                                        </span>
                                         <!--v-if-->
                                         <!--v-if-->
                                         <!--v-if-->
@@ -1672,33 +1777,55 @@ exports[`RunDataSchema.vue > renders schema with spaces and dots 1`] = `
                                   data-test-id="run-data-schema-item"
                                 >
                                   <div
-                                    class="pill mappable"
-                                    title="string"
+                                    class="itemContent"
                                   >
-                                    <span
-                                      class="label"
-                                      data-depth="3"
-                                      data-name="test.how"
-                                      data-path="['hello world'][0]['test.how']"
-                                      data-target="mappable"
-                                      data-value="{{ $json['hello world'][0]['test.how'] }}"
+                                    <div
+                                      class="pill mappable"
+                                      title="string"
                                     >
-                                      <svg
-                                        aria-hidden="true"
-                                        class="svg-inline--fa fa-font fa-w-14 fa-sm"
-                                        data-icon="font"
-                                        data-prefix="fas"
-                                        focusable="false"
-                                        role="img"
-                                        viewBox="0 0 448 512"
-                                        xmlns="http://www.w3.org/2000/svg"
+                                      <span
+                                        class="label"
+                                        data-depth="3"
+                                        data-name="test.how"
+                                        data-path="['hello world'][0]['test.how']"
+                                        data-target="mappable"
+                                        data-value="{{ $json['hello world'][0]['test.how'] }}"
                                       >
-                                        <path
-                                          class=""
-                                          d="M432 416h-23.41L277.88 53.69A32 32 0 0 0 247.58 32h-47.16a32 32 0 0 0-30.3 21.69L39.41 416H16a16 16 0 0 0-16 16v32a16 16 0 0 0 16 16h128a16 16 0 0 0 16-16v-32a16 16 0 0 0-16-16h-19.58l23.3-64h152.56l23.3 64H304a16 16 0 0 0-16 16v32a16 16 0 0 0 16 16h128a16 16 0 0 0 16-16v-32a16 16 0 0 0-16-16zM176.85 272L224 142.51 271.15 272z"
-                                          fill="currentColor"
-                                        />
-                                      </svg>
+                                        <svg
+                                          aria-hidden="true"
+                                          class="svg-inline--fa fa-font fa-w-14 fa-sm"
+                                          data-icon="font"
+                                          data-prefix="fas"
+                                          focusable="false"
+                                          role="img"
+                                          viewBox="0 0 448 512"
+                                          xmlns="http://www.w3.org/2000/svg"
+                                        >
+                                          <path
+                                            class=""
+                                            d="M432 416h-23.41L277.88 53.69A32 32 0 0 0 247.58 32h-47.16a32 32 0 0 0-30.3 21.69L39.41 416H16a16 16 0 0 0-16 16v32a16 16 0 0 0 16 16h128a16 16 0 0 0 16-16v-32a16 16 0 0 0-16-16h-19.58l23.3-64h152.56l23.3 64H304a16 16 0 0 0-16 16v32a16 16 0 0 0 16 16h128a16 16 0 0 0 16-16v-32a16 16 0 0 0-16-16zM176.85 272L224 142.51 271.15 272z"
+                                            fill="currentColor"
+                                          />
+                                        </svg>
+                                        <!--v-if-->
+                                        <span
+                                          class="content"
+                                        >
+                                          
+                                          <span>
+                                            <!--v-if-->
+                                            test.how
+                                          </span>
+                                          
+                                        </span>
+                                      </span>
+                                    </div>
+                                    <span
+                                      class="text"
+                                      data-test-id="run-data-schema-item-value"
+                                    >
+                                      
+                                      
                                       <!--v-if-->
                                       <span
                                         class="content"
@@ -1706,31 +1833,14 @@ exports[`RunDataSchema.vue > renders schema with spaces and dots 1`] = `
                                         
                                         <span>
                                           <!--v-if-->
-                                          test.how
+                                          ignore
                                         </span>
                                         
                                       </span>
+                                      
+                                      
                                     </span>
                                   </div>
-                                  <span
-                                    class="text"
-                                  >
-                                    
-                                    
-                                    <!--v-if-->
-                                    <span
-                                      class="content"
-                                    >
-                                      
-                                      <span>
-                                        <!--v-if-->
-                                        ignore
-                                      </span>
-                                      
-                                    </span>
-                                    
-                                    
-                                  </span>
                                   <!--v-if-->
                                   <!--v-if-->
                                   <!--v-if-->