polishing UI

src/components/ChoosePalette.astro

@@ -88,6 +88,10 @@ document.addEventListener('DOMContentLoaded', () => {
     align-items: center;
     gap: 1rem;
     margin: 0 auto;
+    /* Nah, looks bad. Neat effect but lots of pixelation and loss of antialiasing:
+    color: white;
+    mix-blend-mode: difference;
+    */
 
 
     input{

src/components/Colorbar.astro

@@ -1,7 +1,7 @@
 <div id="colorbar"></div>
 
 <script>
-import { getPaletteAsGradient } from '../scripts/palette';
+import { getPaletteAsGradient, getColorStopsShort } from '../scripts/palette';
 import * as d3 from 'd3';
 // Listen for the changes to palette or source
 document.addEventListener('newpalette', updateColorbar);
@@ -17,31 +17,18 @@ function updateColorbar() {
 
   const palette = localStorage.getItem('palette');
   colorbar.style.display = (palette=='rgb') ? 'none' : 'flex';
-
-  if (palette=='qgis') {
-    const values = JSON.parse(localStorage.getItem('QGISColorfileValues') || '[]');
-    for (const value of values){
-      const div = document.createElement('div');
-      div.innerHTML = value.toFixed(2);
-      colorbar.appendChild(div);
-    }
-    colorbar.style.background = getPaletteAsGradient();
-    return;
-  }
-
-  const min : number = parseFloat(localStorage.getItem('min') ?? '0');
-  const max : number = parseFloat(localStorage.getItem('max') ?? '1');
-  const nmiddletics = (min==0 && max==1) ? 0 : 3;
-  // Get Ntics evenly spaced between min and max
-  const middltics = d3.range(min, max, (max-min)/(nmiddletics-1));
-  const labels = [...middltics.map(t => t.toFixed(3)), max.toFixed(3)];
-  for (let i = 0; i < labels.length; i++){
-      let div = document.createElement('div');
-      div.innerHTML = labels[i]; // Value
-      colorbar.appendChild(div);
+  if (palette=='rgb') return;
+  const {stops} = getColorStopsShort();
+
+  for (const value of stops){
+    const div = document.createElement('div');
+    // Creat a label that shows three significant digits
+    const label = value.toPrecision(3);
+    div.innerHTML = label;
+    colorbar.appendChild(div);
   }
-
   colorbar.style.background = getPaletteAsGradient();
+  return;
 
 }
 
@@ -58,9 +45,9 @@ function updateColorbar() {
   height: 5px;
   background: red;
   border-radius: 5px;
-  border: 1px solid #ccc;
   background-color: red;
   backdrop-filter: blur(5px);
+  box-shadow: 2px 2px 7px gray;
   padding: 10px;
   font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
   color: darkslategray;

src/components/Map.astro

@@ -131,7 +131,7 @@ async function buildMapForGeotiff() {
   setTimeout(() => {
 
     if (!flag_styleIsSet) {
-      window.newToast({ok:false, message: `Could nor load dataset.`});
+      window.newToast({ok:false, message: `Could not load dataset.`});
     }
   }, 5000);
 

src/scripts/palette.js

@@ -17,7 +17,7 @@ export function getInterpolateBand1AsColor() {
   console.assert(color, 'color is null');
 
 
-  const {stops, stopsPct} = getColorStops();
+  const {stops} = getColorStops();
 
   const clr_arr = [
     'interpolate',
@@ -61,7 +61,7 @@ export function getPaletteAsGradient() {
  * and their percentage values.
  * If the palette is QGIS, the stops are taken from the QGISColorfileValues
  */
-function getColorStops(){
+export function getColorStops(){
 
   const pal = localStorage.getItem('palette') || 'd3.interpolateBlues';
 
@@ -92,6 +92,39 @@ function getColorStops(){
 
 
 
+/**
+ * Returns 4 regularly-spaced values in the domain of the data values
+ * and their percentage values.
+ * This is suitable for showing on a colorbar UI element.
+ * If the palette is QGIS, the stops are taken from the QGISColorfileValues
+ */
+export function getColorStopsShort(){
+
+  const pal = localStorage.getItem('palette') || 'd3.interpolateBlues';
+
+  // Stops are 4 regularly-spaced values in the domain of the data values
+  const min = parseFloat(localStorage.getItem('min')||'0');
+  const max = parseFloat(localStorage.getItem('max')||'1');
+
+  let stops = [];
+  for (let i=0; i<=3; i++) stops.push(min + i*(max-min)/3);
+
+
+  // The QGIS Color file may define color stops at irregular intervals
+  // So we must override the regular stops.
+  // Here we read these QGIS stop values and normalize them to percentage
+  if (pal=='qgis') {
+    stops = JSON.parse(localStorage.getItem('QGISColorfileValues'));
+    const nstops = stops.length;
+    // Normalize stops to percentage
+    stops = [stops[0], stops[Math.floor(nstops*.3)], stops[Math.ceil(nstops*.6)], stops[nstops-1]];
+  }
+
+  return {stops};
+} // getColorStopsShort
+
+
+
 
 
 

src/style.css

@@ -19,15 +19,33 @@ html {
   100% { transform: translateX(0); }
 }
 
-.stactreeview {
+details.stactreeview {
     /*background-color: color-mix(in srgb, var(--nilu-light-blue), 30% transparent);*/
     background-color: transparent;
     transition: background-color 0.1s;
-    summary {
+    max-height: 80dvh;
+    width: max(20vw, 14rem);
+    overflow: auto;
+    position: absolute;
+    top: 0;
+    left: 0;
+
+    padding: 0 1rem;
 
+    summary {
+      list-style: none;
+      padding: 0;
+      &::marker {
+        display: none;
+      }
+      &::-webkit-details-marker {
+        display: none;
+      }
       .staclogo {
-          width: 50px;
-          height: 50px;
+          width: 9rem;
+          height: 6rem;
+          margin-top: 1rem;
+          margin-bottom: 1rem;
           cursor: pointer;
           display: inline-block;
           background-image: url('/fairicube_logo_400x297.jpg');
@@ -50,13 +68,7 @@ html {
       max-height: 100dvh;
       height:100dvh;
     }
-    max-height: 80dvh;
-    width: max(20vw, 14rem);
-    padding: 1rem;
-    overflow: auto;
-    position: absolute;
-    top: 0;
-    left: 0;
+
 
     ul {
       list-style-type: none;