#115 formats and call selections

src/assets/styles/tables.css

@@ -77,10 +77,6 @@ table.sqliteviz-table {
   border-bottom: 1px solid var(--color-border-light);
   border-right: 1px solid var(--color-border-light);
 }
-.sqliteviz-table tbody td:focus {
-  outline: none;
-  box-shadow:inset 0 0 0 1px var(--color-accent);
-}
 .sqliteviz-table td,
 .sqliteviz-table th,
 .fixed-header {

src/components/SqlTable/index.vue

@@ -21,6 +21,7 @@
       <table
         ref="table"
         class="sqliteviz-table"
+        tabindex="0"
         @keydown="onTableKeydown"
       >
         <thead>
@@ -37,7 +38,8 @@
               :data-col="colIndex"
               :data-row="rowIndex - 1"
               :key="colIndex"
-              tabindex="0"
+              :aria-selected="false"
+              @click="selectCell($event.target)"
             >
               <div class="cell-data" :style="cellStyle">
                 {{ dataSet.values[col][rowIndex - 1 + currentPageData.start] }}
@@ -79,7 +81,8 @@ export default {
       header: null,
       tableWidth: null,
       currentPage: 1,
-      resizeObserver: null
+      resizeObserver: null,
+      selectedCellElement: null
     }
   },
   computed: {
@@ -133,7 +136,15 @@ export default {
         return
       }
 
-      this.moveFocusInTable(e.target, keyCodeMap[e.keyCode])
+      this.moveFocusInTable(this.selectedCellElement, keyCodeMap[e.keyCode])
+    },
+    selectCell (cell) {
+      if (this.selectedCellElement) {
+        this.selectedCellElement.ariaSelected = false
+      }
+      cell.ariaSelected = true
+      this.selectedCellElement = cell
+      this.$emit('updateSelectedCell', cell)
     },
     moveFocusInTable (initialCell, direction) {
       const currentRowIndex = +initialCell.dataset.row
@@ -167,7 +178,7 @@ export default {
       const newCell = this.$refs.table
         .querySelector(`td[data-col="${newColIndex}"][data-row="${newRowIndex}"]`)
       if (newCell) {
-        newCell.focus()
+        this.selectCell(newCell)
       }
     }
   },
@@ -189,4 +200,13 @@ export default {
 </script>
 
 <style scoped>
+table.sqliteviz-table:focus {
+  outline: none;
+}
+.sqliteviz-table tbody td:hover {
+  background-color: var(--color-bg-light-3);
+}
+.sqliteviz-table tbody td[aria-selected="true"] {
+  box-shadow:inset 0 0 0 1px var(--color-accent);
+}
 </style>

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;