only show bar when a cell is selected

Author: jeromedockes

src/skrubview/_data/templates/skrubview.js

@@ -136,6 +136,8 @@ function displayValue(event) {
 
     const topBarId = table.dataset.topBarId;
     const bar = document.getElementById(topBarId);
+    document.querySelector(".skrubview-top-bar").removeAttribute("data-hidden");
+    document.querySelector(".skrubview-top-bar-placeholder").setAttribute("data-hidden", "");
     bar.setAttribute("data-content-table-cell-value", elem.dataset.valueStr);
     bar.setAttribute("data-content-table-cell-repr", elem.dataset.valueRepr);
     bar.setAttribute("data-content-table-column-name", elem.dataset.colNameStr);
@@ -161,6 +163,8 @@ function clearTableCellSelection(tableElem){
     tableElem.removeAttribute("data-selected-cell");
     const topBarId = tableElem.dataset.topBarId;
     const bar = document.getElementById(topBarId);
+    document.querySelector(".skrubview-top-bar").setAttribute("data-hidden", "");
+    document.querySelector(".skrubview-top-bar-placeholder").removeAttribute("data-hidden");
     bar.removeAttribute("data-content-table-cell-value");
     bar.removeAttribute("data-content-table-cell-repr");
     bar.removeAttribute("data-content-table-column-name");

src/skrubview/_data/templates/top-bar.css

@@ -2,3 +2,17 @@
     flex-grow: 1;
     max-width: 70rem;
 }
+
+{{ report_id_selector }}.skrubview-report .skrubview-top-bar[data-hidden]  {
+    display: none;
+}
+
+{{ report_id_selector }}.skrubview-report .skrubview-top-bar-placeholder  {
+    font-size: var(--skrubview-large);
+    padding-block-start: var(--skrubview-huge);
+    padding-block-end: var(--skrubview-huge);
+}
+
+{{ report_id_selector }}.skrubview-report .skrubview-top-bar-placeholder[data-hidden]  {
+    display: none;
+}

src/skrubview/_data/templates/top-bar.html

@@ -1,4 +1,7 @@
-<div id="{{ top_bar_id }}" class="skrubview-flex skrubview-flex-wrap skrubview-wrapper skrubview-top-bar">
+<div class="skrubview-top-bar-placeholder skrubview-text">
+    Click on a table cell below to display more information.
+</div>
+<div id="{{ top_bar_id }}" class="skrubview-flex skrubview-flex-wrap skrubview-wrapper skrubview-top-bar" data-hidden="">
     <select id="{{ top_bar_select_id }}" onchange="updateBarContent('{{ top_bar_display_id }}')" data-bar-id="{{ top_bar_display_id }}" autocomplete="off">
 
         <option value="table-column-name"