⚡ Fix issue that items got displayed twice in JSON-View

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",

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;
+				}
 			}
 		}