From e6baa95f745123e801de25d312fb305a781fc13f Mon Sep 17 00:00:00 2001
From: Christian Georgi <christian.georgi@sap.com>
Date: Mon, 31 Jan 2022 19:03:06 +0100
Subject: [PATCH 1/3] Data browser: keep data row selection across refresh

---
 data-viewer/app/viewer/app.js     | 27 ++++++++++++++++++++++++---
 data-viewer/app/viewer/index.html | 10 +++++-----
 2 files changed, 29 insertions(+), 8 deletions(-)

diff --git a/data-viewer/app/viewer/app.js b/data-viewer/app/viewer/app.js
index e326ece6..be6970bf 100644
--- a/data-viewer/app/viewer/app.js
+++ b/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
+        }
+
     }
 })
 
diff --git a/data-viewer/app/viewer/index.html b/data-viewer/app/viewer/index.html
index 121c4d4d..b5a80635 100644
--- a/data-viewer/app/viewer/index.html
+++ b/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">
-                        <td v-for="d in row" v-bind:title="d">{{ d }}</td>
+                    <tr v-for="row in data" @click="inspectRow" :class="{'highlight': isActiveRow(row)}">
+                        <td v-for="d in row" :title="d">{{ d }}</td>
                     </tr>
                 </table>
             </div>

From ae6be30aa022d32efc167373e3cae6b2a93f12fe Mon Sep 17 00:00:00 2001
From: Christian Georgi <christian.georgi@sap.com>
Date: Mon, 31 Jan 2022 19:07:00 +0100
Subject: [PATCH 2/3] Data browser: cosmetics, reformat

---
 data-viewer/app/viewer/app.js     | 150 +++++++++++++++---------------
 data-viewer/app/viewer/index.html | 132 +++++++++++++-------------
 2 files changed, 141 insertions(+), 141 deletions(-)

diff --git a/data-viewer/app/viewer/app.js b/data-viewer/app/viewer/app.js
index be6970bf..e09e5a2d 100644
--- a/data-viewer/app/viewer/app.js
+++ b/data-viewer/app/viewer/app.js
@@ -3,91 +3,91 @@ const GET = (url) => axios.get('/-data'+url)
 const storageGet = (key, def) => localStorage.getItem('data-viewer:'+key) || def
 const storageSet = (key, val) => localStorage.setItem('data-viewer:'+key, val)
 
-const viewer = new Vue ({
+const vue = new Vue ({
 
-    el:'#app',
+  el:'#app',
 
-    data: {
-        dataSource: storageGet('data-source', 'db'),
-        skip: storageGet('skip', 0),
-        top: storageGet('top', 20),
-        entity: storageGet('entity') ? JSON.parse(storageGet('entity')) : undefined,
-        entities: [],
-        columns: [],
-        data: [],
-        rowDetails: {},
-        rowKey: storageGet('rowKey')
+  data: {
+    dataSource: storageGet('data-source', 'db'),
+    skip: storageGet('skip', 0),
+    top: storageGet('top', 20),
+    entity: storageGet('entity') ? JSON.parse(storageGet('entity')) : undefined,
+    entities: [],
+    columns: [],
+    data: [],
+    rowDetails: {},
+    rowKey: storageGet('rowKey')
+  },
+
+  watch: {
+    dataSource: (v) => { storageSet('data-source', v);  vue.fetchEntities() },
+    skip: (v) => { storageSet('skip', v); if (vue.entity)  vue.fetchData() },
+    top:  (v) => { storageSet('top',  v); if (vue.entity)  vue.fetchData() },
+  },
+
+  methods: {
+
+    async fetchEntities () {
+      let url = `/Entities`
+      if (vue.dataSource === 'db')  url += `?dataSource=db`
+      const {data} = await GET(url)
+      vue.entities = data.value
+      const entity = vue.entity && vue.entities.find(e => e.name === vue.entity.name)
+      if (entity) { // restore selection from previous fetch
+        vue.columns = entity.columns
+        await vue.fetchData(entity)
+      } else {
+        vue.entity = undefined
+        vue.columns = []
+        vue.data = []
+        vue.rowDetails = {}
+      }
     },
 
-    watch: {
-        dataSource: (v) => { storageSet('data-source', v);    viewer.fetchEntities() },
-        skip: (v) => { storageSet('skip', v); if (viewer.entity)  viewer.fetchData() },
-        top:  (v) => { storageSet('top',  v); if (viewer.entity)  viewer.fetchData() },
+    async inspectEntity (eve) {
+      const entity = vue.entity = vue.entities [eve.currentTarget.rowIndex-1]
+      storageSet('entity', JSON.stringify(entity))
+      vue.columns = vue.entities.find(e => e.name === entity.name).columns
+      return await this.fetchData()
     },
 
-    methods: {
+    async fetchData () {
+      let url = `/Data?entity=${vue.entity.name}&$skip=${vue.skip}&$top=${vue.top}`
+      if (vue.dataSource === 'db')  url += `&dataSource=db`
+      const {data} = await GET(url)
+      vue.data = data.value.map(d => d.record.map(r => r.data))
+      const row = vue.data.find(data => vue._makeRowKey(data) === vue.rowKey)
+      if (row)  vue._setRowDetails(row)
+      else vue.rowDetails = {}
+    },
 
-        async fetchEntities () {
-            let url = `/Entities`
-            if (viewer.dataSource === 'db')  url += `?dataSource=db`
-            const {data} = await GET(url)
-            viewer.entities = data.value
-            const entity = viewer.entity && viewer.entities.find(e => e.name === viewer.entity.name)
-            if (entity) { // restore selection from previous fetch
-                viewer.columns = entity.columns
-                await viewer.fetchData(entity)
-            } else {
-                viewer.entity = undefined
-                viewer.columns = []
-                viewer.data = []
-                viewer.rowDetails = {}
-            }
-        },
+    inspectRow (eve) {
+      vue.rowDetails = {}
+      const selectedRow = eve.currentTarget.rowIndex-1
+      vue.rowKey = vue._makeRowKey(vue.data[selectedRow])
+      storageSet('rowKey', vue.rowKey)
+      vue._setRowDetails(vue.data[selectedRow])
+    },
 
-        async inspectEntity (eve) {
-            const entity = viewer.entity = viewer.entities [eve.currentTarget.rowIndex-1]
-            storageSet('entity', JSON.stringify(entity))
-            viewer.columns = viewer.entities.find(e => e.name === entity.name).columns
-            return await this.fetchData()
-        },
+    _setRowDetails(row) {
+      vue.rowDetails = {}
+      row.forEach((line, colIndex) => {
+        vue.rowDetails[vue.columns[colIndex].name] = line
+      })
+    },
 
-        async fetchData () {
-            let url = `/Data?entity=${viewer.entity.name}&$skip=${viewer.skip}&$top=${viewer.top}`
-            if (viewer.dataSource === 'db')  url += `&dataSource=db`
-            const {data} = await GET(url)
-            viewer.data = data.value.map(d => d.record.map(r => r.data))
-            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.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
-        }
+    _makeRowKey(row) {
+      // to identify a row, build a key string out of all key columns' values
+      return row
+        .filter((_, colIndex) => vue.columns[colIndex] && vue.columns[colIndex].isKey)
+        .reduce(((prev, next) => prev += next), '')
+    },
 
+    isActiveRow(row) {
+      return vue._makeRowKey(row) === vue.rowKey
     }
+
+  }
 })
 
-viewer.fetchEntities()
+vue.fetchEntities()
diff --git a/data-viewer/app/viewer/index.html b/data-viewer/app/viewer/index.html
index b5a80635..de4940b5 100644
--- a/data-viewer/app/viewer/index.html
+++ b/data-viewer/app/viewer/index.html
@@ -2,80 +2,80 @@
 <html>
 
 <head>
-    <title>Data Browser</title>
-    <link rel="stylesheet" href="https://unpkg.com/primitive-ui/dist/css/main.css">
-    <script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>
-    <script src="https://cdn.jsdelivr.net/npm/vue"></script>
-    <style>
-        .hovering tr:hover td { background: #ebeefc; cursor: pointer; }
-        .highlight { background: #ebeefc !important; }
-        .rating-stars { color:teal }
-        .succeeded { color:teal }
-        .failed { color:red }
-        .condensed { max-width: 100px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
-        .key { font-weight: bold }
-        .not-key { font-weight: lighter;}
-        .with-sidebar { display: flex; flex-wrap: wrap; gap: 1rem; }
-        .sidebar      { flex-basis: 20rem; flex-grow: 1; }
-        .not-sidebar  { flex-basis: 0; flex-grow: 999; min-inline-size: 50%;}
-        .horizontal label { display: inline; }
-        .horizontal input { width: initial; display: inline; }
-    </style>
+  <title>Data Browser</title>
+  <link rel="stylesheet" href="https://unpkg.com/primitive-ui/dist/css/main.css">
+  <script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>
+  <script src="https://cdn.jsdelivr.net/npm/vue"></script>
+  <style>
+    .hovering tr:hover td { background: #ebeefc; cursor: pointer; }
+    .highlight { background: #ebeefc !important; }
+    .rating-stars { color:teal }
+    .succeeded { color:teal }
+    .failed { color:red }
+    .condensed { max-width: 100px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
+    .key { font-weight: bold }
+    .not-key { font-weight: lighter;}
+    .with-sidebar { display: flex; flex-wrap: wrap; gap: 1rem; }
+    .sidebar    { flex-basis: 20rem; flex-grow: 1; }
+    .not-sidebar  { flex-basis: 0; flex-grow: 999; min-inline-size: 50%;}
+    .horizontal label { display: inline; }
+    .horizontal input { width: initial; display: inline; }
+  </style>
 </head>
 
 <body>
 <div id='app' class="container">
 
-    <h1> {{ document.title }}{{ entity ? ' &ndash; ' + entity.name : '' }}</h1>
+  <h1> {{ document.title }}{{ entity ? ' &ndash; ' + entity.name : '' }}</h1>
 
-    <div class="with-sidebar">
-        <div class="sidebar">
-            <div class="horizontal" style="padding: 0.75rem 0;">
-                <label>Datasource:</label>
-                <input type="radio" id="dataSource-db" value="db" v-model="dataSource">
-                <label for="dataSource-db">Database</label>
-                <input type="radio" id="dataSource-srv" value="service" v-model="dataSource">
-                <label for="dataSource-srv">Service</label>
-            </div>
-            <table id='entities' class="hovering">
-                <thead>
-                    <th>Entity Name</th>
-                </thead>
-                <tr v-for="e in entities" :key="e.name" @click="inspectEntity" :class="{'highlight': (entity && e.name === entity.name)}">
-                    <td>{{ e.name }}</td>
-                </tr>
-            </table>
-        </div>
-
-        <div class="not-sidebar">
-            <div class="horizontal">
-                <label for="skip">Skip:</label>
-                <input id="skip" v-model.lazy="skip" title="No. of entries to skip" type="number" min="0">
-                <label for="top">Top:</label>
-                <input id="top" v-model.lazy="top" title="No. of entries to read" type="number" min="0">
-            </div>
-            <div v-if="entity">
-                <table id='data' class="hovering striped-table condensed">
-                    <thead>
-                        <th v-for="col in columns" :title="col.type" :class="[col.isKey ? 'key' : 'not-key']">{{ col.name }} </th>
-                    </thead>
-                    <tr v-for="row in data" @click="inspectRow" :class="{'highlight': isActiveRow(row)}">
-                        <td v-for="d in row" :title="d">{{ d }}</td>
-                    </tr>
-                </table>
-            </div>
-
-            <div v-if="rowDetails">
-                <table id='rowDetails'>
-                    <tr v-for="(key, value) in rowDetails" >
-                        <td class="key">{{ value }}</td>
-                        <td>{{ key }}</td>
-                    </tr>
-                </table>
-            </div>
-        </div>
+  <div class="with-sidebar">
+    <div class="sidebar">
+      <div class="horizontal" style="padding: 0.75rem 0;">
+        <label>Datasource:</label>
+        <input type="radio" id="dataSource-db" value="db" v-model="dataSource">
+        <label for="dataSource-db">Database</label>
+        <input type="radio" id="dataSource-srv" value="service" v-model="dataSource">
+        <label for="dataSource-srv">Service</label>
+      </div>
+      <table id='entities' class="hovering">
+        <thead>
+          <th>Entity Name</th>
+        </thead>
+        <tr v-for="e in entities" :key="e.name" @click="inspectEntity" :class="{'highlight': (entity && e.name === entity.name)}">
+          <td>{{ e.name }}</td>
+        </tr>
+      </table>
     </div>
 
+    <div class="not-sidebar">
+      <div class="horizontal">
+        <label for="skip">Skip:</label>
+        <input id="skip" v-model.lazy="skip" title="No. of entries to skip" type="number" min="0">
+        <label for="top">Top:</label>
+        <input id="top" v-model.lazy="top" title="No. of entries to read" type="number" min="0">
+      </div>
+      <div v-if="entity">
+        <table id='data' class="hovering striped-table condensed">
+          <thead>
+            <th v-for="col in columns" :title="col.type" :class="[col.isKey ? 'key' : 'not-key']">{{ col.name }} </th>
+          </thead>
+          <tr v-for="row in data" @click="inspectRow" :class="{'highlight': isActiveRow(row)}">
+            <td v-for="d in row" :title="d">{{ d }}</td>
+          </tr>
+        </table>
+      </div>
+
+      <div v-if="rowDetails">
+        <table id='rowDetails'>
+          <tr v-for="(key, value) in rowDetails" >
+            <td class="key">{{ value }}</td>
+            <td>{{ key }}</td>
+          </tr>
+        </table>
+      </div>
+    </div>
+  </div>
+
 </div>
 </body>
 

From f8c23f4c54b0b266a837046732c9bf3d6d753032 Mon Sep 17 00:00:00 2001
From: Christian Georgi <christian.georgi@sap.com>
Date: Mon, 31 Jan 2022 19:53:35 +0100
Subject: [PATCH 3/3] Better layout;

---
 data-viewer/app/viewer/index.html | 34 ++++++++++++++++++-------------
 1 file changed, 20 insertions(+), 14 deletions(-)

diff --git a/data-viewer/app/viewer/index.html b/data-viewer/app/viewer/index.html
index de4940b5..3e91bb4a 100644
--- a/data-viewer/app/viewer/index.html
+++ b/data-viewer/app/viewer/index.html
@@ -7,6 +7,7 @@
   <script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>
   <script src="https://cdn.jsdelivr.net/npm/vue"></script>
   <style>
+    .noscroll { overflow: hidden; }
     .hovering tr:hover td { background: #ebeefc; cursor: pointer; }
     .highlight { background: #ebeefc !important; }
     .rating-stars { color:teal }
@@ -17,14 +18,17 @@
     .not-key { font-weight: lighter;}
     .with-sidebar { display: flex; flex-wrap: wrap; gap: 1rem; }
     .sidebar    { flex-basis: 20rem; flex-grow: 1; }
-    .not-sidebar  { flex-basis: 0; flex-grow: 999; min-inline-size: 50%;}
+    .sidebar-main { height: 100vh; overflow-y: scroll; }
+    .not-sidebar  { flex-basis: 0; flex-grow: 999; min-inline-size: 50%; align-items: stretch;}
+    .not-sidebar-main { max-height: 40vh; overflow-y: scroll; }
+    .not-sidebar-sub {  max-height: 40vh; overflow-y: scroll; }
     .horizontal label { display: inline; }
     .horizontal input { width: initial; display: inline; }
   </style>
 </head>
 
-<body>
-<div id='app' class="container">
+<body class="noscroll">
+<div id='app' class="full-container">
 
   <h1> {{ document.title }}{{ entity ? ' &ndash; ' + entity.name : '' }}</h1>
 
@@ -37,14 +41,16 @@
         <input type="radio" id="dataSource-srv" value="service" v-model="dataSource">
         <label for="dataSource-srv">Service</label>
       </div>
-      <table id='entities' class="hovering">
-        <thead>
-          <th>Entity Name</th>
-        </thead>
-        <tr v-for="e in entities" :key="e.name" @click="inspectEntity" :class="{'highlight': (entity && e.name === entity.name)}">
-          <td>{{ e.name }}</td>
-        </tr>
-      </table>
+      <div class="sidebar-main">
+        <table id='entities' class="hovering">
+          <thead>
+            <th>Entity Name</th>
+          </thead>
+          <tr v-for="e in entities" :key="e.name" @click="inspectEntity" :class="{'highlight': (entity && e.name === entity.name)}">
+            <td>{{ e.name }}</td>
+          </tr>
+        </table>
+      </div>
     </div>
 
     <div class="not-sidebar">
@@ -54,7 +60,7 @@
         <label for="top">Top:</label>
         <input id="top" v-model.lazy="top" title="No. of entries to read" type="number" min="0">
       </div>
-      <div v-if="entity">
+      <div v-if="entity" class="not-sidebar-main">
         <table id='data' class="hovering striped-table condensed">
           <thead>
             <th v-for="col in columns" :title="col.type" :class="[col.isKey ? 'key' : 'not-key']">{{ col.name }} </th>
@@ -64,8 +70,8 @@
           </tr>
         </table>
       </div>
-
-      <div v-if="rowDetails">
+      <p></p>
+      <div v-if="rowDetails"  class="not-sidebar-sub">
         <table id='rowDetails'>
           <tr v-for="(key, value) in rowDetails" >
             <td class="key">{{ value }}</td>