fix breadcrumbs not rendering

Author: lsomm

dataBrowser/dataBrowser.css

@@ -153,19 +153,41 @@ grid-template-rows: repeat(4, 1fr);
     background: rgba(255, 255, 255, 0.35);
 }
 
-/* Breadcrumb link: take remaining space and truncate instead of overflowing */
-.panel-controls > a {
+/* Breadcrumb: take the remaining space in the controls bar, single line, centered */
+.panel-controls .breadcrumb {
     flex: 1 1 auto;
     min-width: 0;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    gap: 4px;
     overflow: hidden;
-    text-overflow: ellipsis;
     white-space: nowrap;
-    text-align: center;
 }
 
-.panel-controls a {
+/* Individual crumb: subtle pill, truncates if the id is long, underlines on hover */
+.panel-controls .crumb {
     color: #ffffff;
     font-size: 0.8rem;
+    text-decoration: none;
+    padding: 2px 8px;
+    border-radius: 10px;
+    background: rgba(255, 255, 255, 0.18);
+    overflow: hidden;
+    text-overflow: ellipsis;
+    max-width: 14ch;
+    transition: background 0.15s ease;
+}
+
+.panel-controls .crumb:hover {
+    background: rgba(255, 255, 255, 0.35);
+    text-decoration: underline;
+}
+
+.panel-controls .crumb-sep {
+    flex: 0 0 auto;
+    color: rgba(255, 255, 255, 0.7);
+    font-size: 0.85rem;
 }
 
 .date-controls {

dataBrowser/dataBrowser.js.temp

@@ -328,12 +328,16 @@ async function populateTile(plotId, panel, changeUrlParams=true){
             window.history.pushState({}, '', newUrl);
         }
         const header = document.getElementById(`header${parseInt(panel[1])}`);
-        header.innerHTML = openPlots[parseInt(panel[1]) -1].map((item, i) => {
-            if (i<=1) {
-            const url = 'https://browser.herz-campaigns.de/?ms=' + openPlots[parseInt(panel[1]) -1].slice(0, i + 1).join('%2C');
-            return `<a href="${url}">${item}</a>`;
-            }
-        }).join('\t');
+        const tree = openPlots[parseInt(panel[1]) -1];
+        header.innerHTML = tree
+            .slice(0, 2) // site + instrument levels
+            .map((item, i) => {
+                if (!item) return ''; // skip empty levels (e.g. search-opened plots)
+                const url = 'https://browser.herz-campaigns.de/?ms=' + tree.slice(0, i + 1).join('%2C');
+                return `<a class="crumb" href="${url}" title="${item}">${item}</a>`;
+            })
+            .filter(Boolean)
+            .join('<span class="crumb-sep">›</span>');
         // console.log('$APIURL/instruments/'+openPlots[parseInt(panel[1]) -1][1]);
         // const response = await fetch('$APIURL/instruments/'+openPlots[parseInt(panel[1]) -1][1]);
         // const data = await response.json();

dataBrowser/index.html

@@ -32,7 +32,7 @@
 			<div class="panel" id="p1">
 				<div class="panel-controls">
 					<button type="button" class="changeButton" id="select1" onclick="changePlot('p1')">Change Plot</button>
-					<a id="header1"></a>
+					<div id="header1" class="breadcrumb"></div>
 					<button type="button" id="b1" onclick="closePanel('b1')">X</button>
 
 				</div>
@@ -41,23 +41,23 @@
 			<div class="panel" id="p2">
 				<div class="panel-controls">
 					<button type="button" class="changeButton" id="select2" onclick="changePlot('p2')">Change Plot</button>
-					<a id="header2"></a>
+					<div id="header2" class="breadcrumb"></div>
 					<button type="button" id="b2" onclick="closePanel('b2')">X</button>
 				</div>
 				<img src="./img/placeholder.svg">
 			</div>
 			<div class="panel" id="p3">
 				<div class="panel-controls">
 					<button type="button" class="changeButton" id="select3" onclick="changePlot('p3')">Change Plot</button>
-					<a id="header3"></a>
+					<div id="header3" class="breadcrumb"></div>
 					<button type="button" id="b3" onclick="closePanel('b3')">X</button>
 				</div>
 				<img src="./img/placeholder.svg">
 			</div>
 			<div class="panel" id="p4">
 				<div class="panel-controls">
 					<button type="button" class="changeButton" id="select4" onclick="changePlot('p4')">Change Plot</button>
-					<a id="header4"></a>
+					<div id="header4" class="breadcrumb"></div>
 					<button type="button" id="b4" onclick="closePanel('b4')">X</button>
 				</div>
 				<img src="./img/placeholder.svg">