From 862b693c0ac090dbabbec7625472d17517485d97 Mon Sep 17 00:00:00 2001
From: Jan Oberhauser <jan.oberhauser@gmail.com>
Date: Sat, 23 Nov 2019 10:23:26 +0100
Subject: [PATCH] :zap: Fix issue that items got displayed twice in JSON-View

---
 packages/editor-ui/package.json               |  2 +-
 packages/editor-ui/src/components/RunData.vue | 23 +++++++++++--------
 2 files changed, 15 insertions(+), 10 deletions(-)

diff --git a/packages/editor-ui/package.json b/packages/editor-ui/package.json
index 64361c489..9cf00ed1a 100644
--- a/packages/editor-ui/package.json
+++ b/packages/editor-ui/package.json
@@ -71,7 +71,7 @@
     "typescript": "~3.5.2",
     "vue": "^2.6.9",
     "vue-cli-plugin-webpack-bundle-analyzer": "^1.3.0",
-    "vue-json-viewer": "^2.2.8",
+    "vue-json-tree": "^0.4.1",
     "vue-prism-editor": "^0.3.0",
     "vue-router": "^3.0.6",
     "vue-template-compiler": "^2.5.17",
diff --git a/packages/editor-ui/src/components/RunData.vue b/packages/editor-ui/src/components/RunData.vue
index 0a2142eb6..54252b6fb 100644
--- a/packages/editor-ui/src/components/RunData.vue
+++ b/packages/editor-ui/src/components/RunData.vue
@@ -95,12 +95,12 @@
 								</tr>
 							</table>
 						</div>
-						<json-viewer
+						<json-tree
 							v-else-if="displayMode === 'JSON'"
+							:data="jsonData"
+							:level="10"
 							class="json-data"
-							:value="jsonData"
-							:expand-depth=10
-						></json-viewer>
+						/>
 					</div>
 					<div v-else-if="displayMode === 'Binary'">
 						<div v-if="binaryData.length === 0" class="no-data">
@@ -163,7 +163,7 @@
 <script lang="ts">
 import Vue from 'vue';
 // @ts-ignore
-import JsonViewer from 'vue-json-viewer';
+import JsonTree from 'vue-json-tree';
 import {
 	GenericValue,
 	IBinaryData,
@@ -201,7 +201,7 @@ export default mixins(
 		name: 'RunData',
 		components: {
 			BinaryDataDisplay,
-			JsonViewer,
+			JsonTree,
 		},
 		data () {
 			return {
@@ -573,10 +573,15 @@ export default mixins(
 		}
 
 		.json-data {
-			background: none;
+			.json-tree {
+				color: $--custom-input-font;
 
-			.jv-code {
-				padding: 0;
+				.json-tree-value-number {
+					color: #b03030;
+				}
+				.json-tree-value-string {
+					color: #8aab1a;
+				}
 			}
 		}