#115 json view

src/views/Main/Workspace/Tabs/Tab/RunResult/ValueViewer.vue

@@ -0,0 +1,48 @@
+<template>
+  <div>
+    <codemirror
+        :value="cellValue"
+        :options="cmOptions"
+      />
+  </div>
+</template>
+
+<script>
+import { codemirror } from 'vue-codemirror'
+import 'codemirror/lib/codemirror.css'
+import 'codemirror/mode/javascript/javascript.js'
+import 'codemirror/addon/fold/foldcode.js'
+import 'codemirror/addon/fold/foldgutter.js'
+import 'codemirror/addon/fold/foldgutter.css'
+import 'codemirror/addon/fold/brace-fold.js'
+import 'codemirror/theme/neo.css'
+
+export default {
+  components: {
+    codemirror
+  },
+  props: {
+    cellValue: [String, Number]
+  },
+  data () {
+    return {
+      cmOptions: {
+        tabSize: 4,
+        mode: { name: 'javascript', json: true },
+        theme: 'neo',
+        lineNumbers: true,
+        line: true,
+        foldGutter: true,
+        gutters: ['CodeMirror-linenumbers', 'CodeMirror-foldgutter'],
+        readOnly: true
+      }
+    }
+  },
+  methods: {
+
+  }
+}
+</script>
+
+<style scoped>
+</style>

src/views/Main/Workspace/Tabs/Tab/RunResult/index.vue

@@ -12,7 +12,7 @@
       </template>
       <div :id="'run-result-result-set-'+tab.id" class="result-set-container"/>
       <template #right-pane v-if="viewValuePanelVisible">
-        <div>hello</div>
+        <div><value-viewer :cellValue="testCell"/></div>
       </template>
     </component>
 
@@ -103,6 +103,7 @@ import time from '@/lib/utils/time'
 import loadingDialog from '@/components/LoadingDialog'
 import events from '@/lib/utils/events'
 import Teleport from 'vue2-teleport'
+import ValueViewer from './ValueViewer'
 
 export default {
   name: 'RunResult',
@@ -119,7 +120,12 @@ export default {
       pageSize: 20,
       preparingCopy: false,
       dataToCopy: null,
-      viewValuePanelVisible: false
+      viewValuePanelVisible: false,
+      testCell: JSON.stringify(
+        JSON.parse('{"x": 1, "y": 2, "vector": [1,2,3]}'),
+        null,
+        4
+      )
     }
   },
   components: {
@@ -131,6 +137,7 @@ export default {
     IconButton,
     ClipboardIcon,
     loadingDialog,
+    ValueViewer,
     Splitpanes,
     Teleport
   },