#115 add styles for blob and null

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

@@ -23,12 +23,14 @@
             <td
               :data-col="1"
               :data-row="index"
+              :data-isNull="isNull(getCellValue(col))"
+              :data-isBlob="isBlob(getCellValue(col))"
               :key="index"
               :aria-selected="false"
               @click="onCellClick"
             >
               <div class="cell-data">
-                {{ dataSet.values[col][currentRowIndex] }}
+                {{ getCellText(col) }}
               </div>
             </td>
           </tr>
@@ -89,6 +91,25 @@ export default {
     }
   },
   methods: {
+    isBlob (value) {
+      return value && ArrayBuffer.isView(value)
+    },
+    isNull (value) {
+      return value === null
+    },
+    getCellValue (col) {
+      return this.dataSet.values[col][this.currentRowIndex]
+    },
+    getCellText (col) {
+      const value = this.getCellValue(col)
+      if (this.isNull(value)) {
+        return 'NULL'
+      }
+      if (this.isBlob(value)) {
+        return 'BLOB'
+      }
+      return value
+    },
     onTableKeydown (e) {
       const keyCodeMap = {
         38: 'up',

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

@@ -26,7 +26,10 @@
         :value="formattedJson"
         :options="cmOptions"
       />
-      <div v-if="currentFormat === 'text'" class="text-value">
+      <div
+        v-if="currentFormat === 'text'"
+        :class="['text-value', { 'meta-value': isNull || isBlob }]"
+      >
         {{ cellValue }}
       </div>
       <logs
@@ -56,7 +59,9 @@ export default {
     Logs
   },
   props: {
-    cellValue: [String, Number]
+    cellValue: [String, Number],
+    isNull: Boolean,
+    isBlob: Boolean
   },
   data () {
     return {
@@ -84,12 +89,12 @@ export default {
       this.messages = []
       this.formattedJson = ''
       if (this.currentFormat === 'json') {
-        this.formatJson(this.cellValue)
+        this.formatJson(this.isNull ? null : this.cellValue)
       }
     },
     cellValue () {
       if (this.currentFormat === 'json') {
-        this.formatJson(this.cellValue)
+        this.formatJson(this.isNull ? null : this.cellValue)
       }
     }
   },
@@ -139,6 +144,11 @@ export default {
   color: var(--color-text-base);
 }
 
+.text-value.meta-value {
+  font-style: italic;
+  color: var(--color-text-light-2);
+}
+
 .messages {
   margin: 8px;
 }

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

@@ -16,6 +16,8 @@
           <value-viewer
             v-show="selectedCell"
             :cellValue="selectedCell ? selectedCell.innerText : ''"
+            :is-null="selectedCell && selectedCell.dataset.isnull === 'true'"
+            :is-blob="selectedCell && selectedCell.dataset.isblob === 'true'"
           />
           <div v-show="!selectedCell" class="table-preview">
             No cell selected to view