From 46aa0ff981450015aab11d6032bf0f7af25ebd76 Mon Sep 17 00:00:00 2001
From: Raymond Yee <raymond.yee@gmail.com>
Date: Fri, 8 May 2026 15:39:14 -0700
Subject: [PATCH] explorer: native Cesium toolbar + prominent share button +
 a11y halos
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Three visible-polish items from Hana's mockup (Figma 213:394, deferred from
#178):

- Re-enable baseLayerPicker (was off) and reposition the Cesium toolbar to
  the top-left of the globe as a vertical strip. Dropdown opens to the right
  to clear the side panel.
- Restyle #shareBtn: full-width, larger padding, 14px font, label updated to
  "Copy Link to Current View" per mockup. Toast moves below the button.
- Add a 1.5px white outline to all PointPrimitives (cluster + sample views)
  so dots stay legible against both bright land and dark ocean — universal
  accessibility benefit, no toggle needed for v1.

Verified locally at http://localhost:5880/explorer.html (Quarto render +
Playwright eyeball): toolbar shows 6 widgets stacked left, share button
spans the panel at 316px, halos visible on orange/blue clusters.

Out of scope (deferred from #178 pending Hana's revision): Quick Stats
restructure, permanent bottom table, tree-select vocab UI, educational
tooltips, sample-type icons.

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
---
 explorer.qmd | 36 ++++++++++++++++++++++++++++++------
 1 file changed, 30 insertions(+), 6 deletions(-)

diff --git a/explorer.qmd b/explorer.qmd
index c73d1de..8571bf6 100644
--- a/explorer.qmd
+++ b/explorer.qmd
@@ -88,11 +88,29 @@ format:
     .detail-link { color: #1565c0; text-decoration: none; font-size: 12px; }
     .detail-link:hover { text-decoration: underline; }
     .share-btn {
-        background: #1565c0; color: white; border: none; padding: 4px 12px;
-        border-radius: 4px; font-size: 12px; cursor: pointer;
+        background: #1565c0; color: white; border: none;
+        padding: 10px 16px; border-radius: 6px;
+        font-size: 14px; font-weight: 500; cursor: pointer;
+        width: 100%;
     }
     .share-btn:hover { background: #0d47a1; }
-    .share-toast { font-size: 12px; color: #2e7d32; opacity: 0; transition: opacity 0.3s; }
+    .share-toast { display: block; font-size: 12px; color: #2e7d32; opacity: 0; transition: opacity 0.3s; margin-top: 4px; text-align: center; }
+    /* Cesium toolbar — relocate to top-left of globe (Hana mockup, #178) */
+    .cesium-viewer-toolbar {
+        top: 5px;
+        left: 5px;
+        right: auto !important;
+        display: flex;
+        flex-direction: column;
+        gap: 4px;
+        align-items: flex-start;
+    }
+    .cesium-viewer-toolbar > * { margin-left: 0 !important; }
+    /* Open baseLayerPicker dropdown to the right since we're left-anchored */
+    .cesium-baseLayerPicker-dropDown {
+        left: 36px;
+        right: auto;
+    }
     .search-bar { display: flex; gap: 6px; margin-bottom: 6px; }
     .search-bar input {
         flex: 1; padding: 8px 12px; border: 1px solid #ccc; border-radius: 4px;
@@ -314,8 +332,8 @@ Specimen Type <span>▾</span>
 <div id="facetNote" style="display: none; font-size: 11px; color: #888; margin-top: 4px; font-style: italic;">
 Material / feature / specimen filters apply at sample zoom level — zoom in or click a cluster.
 </div>
-<div style="margin-top: 8px; display: flex; gap: 8px; align-items: center;">
-<button id="shareBtn" class="share-btn" title="Copy link to current view">Share View</button>
+<div style="margin-top: 12px;">
+<button id="shareBtn" class="share-btn" title="Copy link to current view">Copy Link to Current View</button>
 <span id="shareToast" class="share-toast">Link copied!</span>
 </div>
 <div id="phaseMsg" class="phase-msg" style="margin-top: 8px; background: #e3f2fd; color: #1565c0;">
@@ -794,7 +812,7 @@ viewer = {
     const v = new Cesium.Viewer("cesiumContainer", {
         timeline: false,
         animation: false,
-        baseLayerPicker: false,
+        baseLayerPicker: true,
         fullscreenElement: "cesiumContainer",
         terrain: Cesium.Terrain.fromWorldTerrain()
     });
@@ -970,6 +988,8 @@ phase1 = {
             position: Cesium.Cartesian3.fromDegrees(row.center_lng, row.center_lat, 0),
             pixelSize: size,
             color: Cesium.Color.fromCssColorString(SOURCE_COLORS[row.dominant_source] || '#666').withAlpha(0.8),
+            outlineColor: Cesium.Color.WHITE,
+            outlineWidth: 1.5,
             scaleByDistance: scalar,
         });
     }
@@ -1311,6 +1331,8 @@ zoomWatcher = {
                     position: Cesium.Cartesian3.fromDegrees(row.center_lng, row.center_lat, 0),
                     pixelSize: size,
                     color: Cesium.Color.fromCssColorString(SOURCE_COLORS[row.dominant_source] || '#666').withAlpha(0.85),
+                    outlineColor: Cesium.Color.WHITE,
+                    outlineWidth: 1.5,
                     scaleByDistance: scalar,
                 });
             }
@@ -1463,6 +1485,8 @@ zoomWatcher = {
                 position: Cesium.Cartesian3.fromDegrees(row.longitude, row.latitude, 0),
                 pixelSize: 6,
                 color: Cesium.Color.fromCssColorString(color).withAlpha(0.9),
+                outlineColor: Cesium.Color.WHITE,
+                outlineWidth: 1.5,
                 scaleByDistance: scalar,
             });
         }