#115 formats and call selections

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

@@ -1,9 +1,24 @@
 <template>
-  <div>
+  <div class="value-viewer">
+    <div class="value-viewer-toolbar">
+      <button
+        v-for="format in formats"
+        :key="format.value"
+        type="button"
+        :aria-selected="currentFormat === format.value"
+        @click="currentFormat = format.value"
+      >
+        {{ format.text }}
+      </button>
+    </div>
     <codemirror
-        :value="cellValue"
+        v-if="currentFormat === 'json'"
+        :value="formattedJson"
         :options="cmOptions"
       />
+      <div v-else class="text-value">
+        {{ cellValue }}
+      </div>
   </div>
 </template>
 
@@ -26,6 +41,11 @@ export default {
   },
   data () {
     return {
+      formats: [
+        { text: 'JSON', value: 'json' },
+        { text: 'TEXT', value: 'text' }
+      ],
+      currentFormat: 'text',
       cmOptions: {
         tabSize: 4,
         mode: { name: 'javascript', json: true },
@@ -35,14 +55,65 @@ export default {
         foldGutter: true,
         gutters: ['CodeMirror-linenumbers', 'CodeMirror-foldgutter'],
         readOnly: true
+      },
+      formattedJson: ''
+    }
+  },
+  watch: {
+    currentFormat () {
+      this.formattedJson = ''
+      if (this.currentFormat === 'json') {
+        this.formatJson(this.cellValue)
+      }
+    },
+    cellValue () {
+      if (this.currentFormat === 'json') {
+        this.formatJson(this.cellValue)
       }
     }
   },
   methods: {
-
+    formatJson (jsonStr) {
+      try {
+        this.formattedJson = JSON.stringify(
+          JSON.parse(jsonStr), null, 4
+        )
+      } catch {
+        this.formattedJson = ''
+      }
+    }
   }
 }
 </script>
 
 <style scoped>
+.value-viewer {
+  background-color: var(--color-white);
+}
+.value-viewer-toolbar {
+  display: flex;
+  justify-content: end;
+}
+.text-value {
+  padding: 2px 8px;
+  color: var(--color-text-base);
+}
+
+.value-viewer-toolbar button {
+  font-size: 10px;
+  height: 20px;
+  padding: 0 8px;
+  border: none;
+  background: transparent;
+  color: var(--color-text-base);
+  border-radius: var(--border-radius-small);
+}
+
+.value-viewer-toolbar button:hover {
+  background-color: var(--color-bg-light);
+}
+
+.value-viewer-toolbar button[aria-selected="true"] {
+  color: var(--color-accent);
+}
 </style>

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

@@ -12,7 +12,9 @@
       </template>
       <div :id="'run-result-result-set-'+tab.id" class="result-set-container"/>
       <template #right-pane v-if="viewValuePanelVisible">
-        <div><value-viewer :cellValue="testCell"/></div>
+        <div class="value-viewer-container">
+          <value-viewer v-show="selectedCell" :cellValue="selectedCellValue"/>
+        </div>
       </template>
     </component>
 
@@ -81,6 +83,7 @@
               :time="time"
               :pageSize="pageSize"
               class="straight"
+              @updateSelectedCell="onUpdateSelectedCell"
             />
           </div>
     </teleport>
@@ -121,11 +124,8 @@ export default {
       preparingCopy: false,
       dataToCopy: null,
       viewValuePanelVisible: false,
-      testCell: JSON.stringify(
-        JSON.parse('{"x": 1, "y": 2, "vector": [1,2,3]}'),
-        null,
-        4
-      )
+      selectedCell: null,
+      selectedCellValue: ''
     }
   },
   components: {
@@ -227,6 +227,11 @@ export default {
 
     toggleViewValuePanel () {
       this.viewValuePanelVisible = !this.viewValuePanelVisible
+    },
+
+    onUpdateSelectedCell (e) {
+      this.selectedCell = e
+      this.selectedCellValue = this.selectedCell?.innerText
     }
   }
 }
@@ -251,6 +256,11 @@ export default {
   width: 100%;
   box-sizing: border-box;
 }
+.value-viewer-container {
+  height: 100%;
+  width: 100%;
+  background-color: var(--color-white);
+}
 
 .table-preview {
   position: absolute;