Data browser: keep data row selection across refresh

data-viewer/app/viewer/app.js

@@ -15,7 +15,8 @@ const viewer = new Vue ({
         entities: [],
         columns: [],
         data: [],
-        rowDetails: undefined,
+        rowDetails: {},
+        rowKey: storageGet('rowKey')
     },
 
     watch: {
@@ -55,17 +56,37 @@ const viewer = new Vue ({
             if (viewer.dataSource === 'db')  url += `&dataSource=db`
             const {data} = await GET(url)
             viewer.data = data.value.map(d => d.record.map(r => r.data))
-            viewer.rowDetails = undefined
+            const row = viewer.data.find(data => viewer._makeRowKey(data) === viewer.rowKey)
+            if (row)  viewer._setRowDetails(row)
+            else viewer.rowDetails = {}
         },
 
         inspectRow (eve) {
             viewer.rowDetails = {}
             const selectedRow = eve.currentTarget.rowIndex-1
-            viewer.data[selectedRow].forEach((line, colIndex) => {
+            viewer.rowKey = viewer._makeRowKey(viewer.data[selectedRow])
+            storageSet('rowKey', viewer.rowKey)
+            viewer._setRowDetails(viewer.data[selectedRow])
+        },
+
+        _setRowDetails(row) {
+            viewer.rowDetails = {}
+            row.forEach((line, colIndex) => {
                 viewer.rowDetails[viewer.columns[colIndex].name] = line
             })
         },
 
+        _makeRowKey(row) {
+            // to identify a row, build a key string out of all key columns' values
+            return row
+                .filter((_, colIndex) => viewer.columns[colIndex] && viewer.columns[colIndex].isKey)
+                .reduce(((prev, next) => prev += next), '')
+        },
+
+        isActiveRow(row) {
+            return viewer._makeRowKey(row) === viewer.rowKey
+        }
+
     }
 })
 

data-viewer/app/viewer/index.html

@@ -8,7 +8,7 @@
     <script src="https://cdn.jsdelivr.net/npm/vue"></script>
     <style>
         .hovering tr:hover td { background: #ebeefc; cursor: pointer; }
-        .highlight { background: #ebeefc; }
+        .highlight { background: #ebeefc !important; }
         .rating-stars { color:teal }
         .succeeded { color:teal }
         .failed { color:red }
@@ -41,7 +41,7 @@
                 <thead>
                     <th>Entity Name</th>
                 </thead>
-                <tr v-for="e in entities" v-bind:id="e.name" v-on:click="inspectEntity" :class="{'highlight': (entity && e.name === entity.name)}">
+                <tr v-for="e in entities" :key="e.name" @click="inspectEntity" :class="{'highlight': (entity && e.name === entity.name)}">
                     <td>{{ e.name }}</td>
                 </tr>
             </table>
@@ -57,10 +57,10 @@
             <div v-if="entity">
                 <table id='data' class="hovering striped-table condensed">
                     <thead>
-                        <th v-for="col in columns" v-bind:title="col.type" :class="[col.isKey ? 'key' : 'not-key']">{{ col.name }} </th>
+                        <th v-for="col in columns" :title="col.type" :class="[col.isKey ? 'key' : 'not-key']">{{ col.name }} </th>
                     </thead>
-                    <tr v-for="(row, index) in data" v-on:click="inspectRow">
+                    <tr v-for="row in data" @click="inspectRow" :class="{'highlight': isActiveRow(row)}">
-                        <td v-for="d in row" v-bind:title="d">{{ d }}</td>
+                        <td v-for="d in row" :title="d">{{ d }}</td>
                     </tr>
                 </table>
             </div>