From 7b25a59722d04248e1d26b886b774bc322f65528 Mon Sep 17 00:00:00 2001
From: Dan Moran MBA15 <dmoran@alumni.whitman.edu>
Date: Sat, 23 Nov 2024 17:44:13 +0100
Subject: [PATCH] lots

---
 src/components/COGURL.astro        |  36 +++++++++
 src/components/ChoosePalette.astro |  64 +++++++++++++---
 src/components/Colorbar.astro      |  27 +++++--
 src/components/Map.astro           |  85 ++++++++++++---------
 src/components/Toaster.astro       |   3 +-
 src/pages/index.astro              |   4 +-
 src/scripts/palette.js             | 114 +++++++++++++++++------------
 7 files changed, 237 insertions(+), 96 deletions(-)
 create mode 100644 src/components/COGURL.astro

diff --git a/src/components/COGURL.astro b/src/components/COGURL.astro
new file mode 100644
index 0000000..4c94da4
--- /dev/null
+++ b/src/components/COGURL.astro
@@ -0,0 +1,36 @@
+
+<div class="cogurl">
+  <input type="text" placeholder="URL to any GeoTIFF"
+  data-badvalue="https://data.sustainability.nilu.no/fairicube/ua2018_mosaic_raster_10m_cog_2_3_B1.tif"
+  value="https://data.sustainability.nilu.no/fairicube/r05_treecover2018_100m_b1_COG.tif"
+  />
+  <button>View</button>
+</div>
+
+<script>
+document.querySelector('.cogurl button')?.addEventListener('click', viewCOG);
+function viewCOG() {
+  //@ts-ignore
+  const cogurl = document.querySelector('.cogurl input')?.value;
+  if (!cogurl) return;
+  localStorage.setItem('url', cogurl);
+  document.dispatchEvent(new Event('newsource'));
+
+}
+</script>
+
+<style>
+.cogurl {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  position: absolute;
+  width: 100vw;
+  bottom: 10px;
+  right: 0px;
+  margin:0;
+  border-radius: 10px;
+  padding: 5px;
+  gap: 10px;
+}
+</style>
diff --git a/src/components/ChoosePalette.astro b/src/components/ChoosePalette.astro
index 59d5bb1..758c409 100644
--- a/src/components/ChoosePalette.astro
+++ b/src/components/ChoosePalette.astro
@@ -1,12 +1,12 @@
 
 <div class="choosepalette">
   <div>
-    <label><input type="radio" name="palette" value="A" checked />Palette A</label>
-    <label><input type="radio" name="palette" value="B" />Palette B</label>
-    <label><input type="radio" name="palette" value="C" />Palette C</label>
-    <label><input type="radio" name="palette" value="D" />Palette D</label>
-    <label><input type="radio" name="palette" value="RGB" 
-    />True Color</label>
+    <label><input type="radio" name="palette" value="d3.interpolateViridis" checked />Viridis</label>
+    <label><input type="radio" name="palette" value="d3.interpolateTurbo" />Turbo</label>
+    <label><input type="radio" name="palette" value="d3.interpolateBlues" />Blues</label>
+    <label><input type="radio" name="palette" value="d3.interpolateGnBu" />GnBu</label>
+    <label><input type="radio" name="palette" value="rgb"/>True Color</label>
+    <label class="invertpalette"><input type="checkbox" name="invertpalette"/>Invert</label>
   </div>
 </div>
 
@@ -14,11 +14,26 @@
 
 <script>
 
+// Add click handlers for the invert checkbox. Set the invert flag in localStorage.
+document.querySelector('input[name="invertpalette"]')?.addEventListener('change', (e) => {
+  localStorage.setItem('invertpalette', (e.target as HTMLInputElement).checked.toString());
+  document.dispatchEvent(new Event('newpalette'));
+});
+
+// Add an event listener for the "newpalette" event. If localStorage.palette=rgb hide the Invert checkbox
+document.addEventListener('newpalette', () => {
+  const palette = localStorage.getItem('palette');
+  const invertCheckbox = document.querySelector('label.invertpalette') as HTMLLabelElement;
+  invertCheckbox.style.opacity = palette==='rgb' ? '0' : '1';
+});
 
-// Change the palette
+// Add click handlers for the palette radio buttons
 document.querySelectorAll('input[name="palette"]').forEach( (radio : Element) => {
     // Trigger a "palette" event when the palette is changed
-    if (radio) (radio as HTMLInputElement).onchange = () => document.dispatchEvent(new Event('newpalette'));
+    (radio as HTMLInputElement).onchange = (e) => {
+      localStorage.setItem('palette', (e.target as HTMLInputElement).value);
+      document.dispatchEvent(new Event('newpalette'));
+    };
 });
 
 
@@ -42,11 +57,20 @@ document.addEventListener('newsource', () => {
     flex-direction: column;
     justify-content: center;
     align-items: flex-end;
+    pointer-events: none;
 
     div {
+        pointer-events: auto;
+        padding: 1rem;
+        opacity: 0.5;
+        transition: all 0.1s;
+        &:hover {
+          background-color: rgba(255, 255, 255, 0.6);
+          opacity: 1;
+        }
         display: flex;
         flex-direction: column;
-        align-items: start;
+        align-items: flex-end;
         align-content: start;
         justify-items: start;
         justify-content: start;
@@ -56,6 +80,28 @@ document.addEventListener('newsource', () => {
           font-family: 'Inter', sans-serif;
         }
     }
+    input{
+      display: none;
+    }
+    input[name="invertpalette"] {
+      display: initial;
+      margin-right: 0.5rem;
+    }
+    label {
+      margin-bottom: 0;
+      transition: all 0.1s ease-in-out;
+    }
+    label:has(input:disabled) {
+      opacity: 0.25;
+      pointer-events: none;
+    }
+    label:has(input[name="palette"]:checked){
+      color: var(--color-primary);
+      font-weight: 600;
+      font-size: 1.2rem;
+      margin-top: 0.2rem;
+      margin-bottom: 0.2rem;
+    }
 
     top:0;
     height: 100vh;
diff --git a/src/components/Colorbar.astro b/src/components/Colorbar.astro
index 4b33478..090834e 100644
--- a/src/components/Colorbar.astro
+++ b/src/components/Colorbar.astro
@@ -1,21 +1,36 @@
 <div id="colorbar"></div>
 
 <script>
-
+import { getPaletteAsGradient } from '../scripts/palette';
+import * as d3 from 'd3';
 // Listen for the changes to palette or source
 document.addEventListener('newpalette', updateColorbar);
 document.addEventListener('newsource', updateColorbar);
 
 
 function updateColorbar() {
-  console.log('newpalette - updating colorbar');
+  console.log('updateColorbar');
+
+  const colorbar = document.getElementById('colorbar');
+  if (!colorbar) return;
 
-  const el = document.getElementById('colorbar');
-  if (!el) return;
+  const palette = localStorage.getItem('palette') || 'd3.interpolateBlues';
+  colorbar.style.display = (palette=='rgb') ? 'none' : 'flex';
 
-  const palette = localStorage.getItem('palette');
+  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(0)), max.toFixed(0)];
+  colorbar.innerHTML = '';
+  for (let i = 0; i < labels.length; i++){
+      let div = document.createElement('div');
+      div.innerHTML = labels[i]; // Value
+      colorbar.appendChild(div);
+  }
 
-  el.style.display = (palette=='rgb') ? 'none' : 'block';
+  colorbar.style.background = getPaletteAsGradient();
 
 }
 
diff --git a/src/components/Map.astro b/src/components/Map.astro
index 3bf5658..c879923 100644
--- a/src/components/Map.astro
+++ b/src/components/Map.astro
@@ -36,15 +36,15 @@ const googleview = new ol.View({
   //center: [10,55.2],zoom:6 // Copenhagen
   //center:[-77.1778,26.4858], zoom: 8 // Virgin Gorda
 });
-/*googleview.setCenter( fromLonLat([-77.1778,26.4858], googleview.getProjection())); googleview.setZoom(8);  // Virgin Gorda
+googleview.setCenter( fromLonLat([-77.1778,26.4858], googleview.getProjection())); googleview.setZoom(8);  // Virgin Gorda
 googleview.setCenter( fromLonLat([-10,55.2], googleview.getProjection())); googleview.setZoom(6);  // Copenhagen
 googleview.setCenter( fromLonLat([16.2,48.2], googleview.getProjection())); googleview.setZoom(10);  // Vienna
-*/
+
 
 const map = new ol.Map({
       target: 'map',
-      layers: [baselayer]//,
-      //view: googleview //source.getView()
+      layers: [baselayer],
+      view: googleview //source.getView()
     });
 
 
@@ -69,7 +69,7 @@ async function buildMapForGeotiff() {
   window.newToast(`Loading ${url}`);
 
   //If url does not start with "http"then add the curent location base url (server url)
-  if (!url.startsWith("http")) url = window.location.origin + url;
+  if (!url.startsWith("http")) url = window.location.origin + (url.startsWith('/') ? '' : '/') + url;
 
   // If URL does not end with .tif, then return
   if (!url.endsWith('.tif')) {
@@ -83,13 +83,20 @@ async function buildMapForGeotiff() {
 
   const geotiffSource : any = {url};
 
+  localStorage.setItem('min', '0');
+  localStorage.setItem('max', '1');
+
   // Try to fetch and parse an {url}.aux.xml file. The file is an XML file with metadata about the GeoTIFF
-  const minmax = await getGeotiffMinmaxFromAuxXML(url);
-  if (minmax) {
-    geotiffSource.min = minmax[0];
-    geotiffSource.max = minmax[1];
-    console.log(`Used .tif.aux.xml to find min=${geotiffSource.min}, max=${geotiffSource.max}`);
-  }
+  getGeotiffMinmaxFromAuxXML(url).then(minmax => {
+    if (minmax) {
+      geotiffSource.min = minmax[0];
+      geotiffSource.max = minmax[1];
+      localStorage.setItem('min', geotiffSource.min.toString());
+      localStorage.setItem('max', geotiffSource.max.toString());
+      document.dispatchEvent(new Event('newpalette'));
+      window.newToast(`.tif.aux.xml says min=${geotiffSource.min}, max=${geotiffSource.max}`);
+    }
+  });
 
 
   // Create the source and layer
@@ -107,11 +114,11 @@ async function buildMapForGeotiff() {
   source.on('tileloadend', (event) => {
 
     if (flag_styleIsSet) return; // If the style has already been set, do nothing
+    flag_styleIsSet = true; // Set the flag
 
-    window.newToast({title: 'Info', message: `Got image with ${event.target.bandCount} bands`});
+    window.newToast(`Got image with ${event.target.bandCount} bands`);
     if (layer) (layer as TileLayer).setStyle(getInterpolateBand1AsColor()); // Set the style
 
-    flag_styleIsSet = true; // Set the flag
   });
 
 
@@ -119,31 +126,43 @@ async function buildMapForGeotiff() {
   map.setLayers([baselayer,layer]);
   map.render();
 
-/*
-  const vo = await source.getView();
-  if (!vo.projection) {
-    console.log(`File  ${url} contains insufficient metadata about its projection`);
-    //return;
-  }
 
-  const proj = getProjection(vo.projection?.getCode());
-  if (!proj) {
-    // Look up at epsg.io
-    vo.projection= await fromEPSGCode(vo.projection?.getCode());
-    console.log(`Downloading projection ${vo.projection.getCode()} used by ${url}`);
-    //return;
-  }
+  source.getView().then(async (vo) => {
+    if (!vo.projection) {
+      window.newToast(`File  ${url} contains insufficient metadata about its projection`);
+        console.log(`File  ${url} contains insufficient metadata about its projection`);
+      //return;
+    }
+
+    const proj = getProjection(vo.projection?.getCode());
+    if (!proj) {
+      // Look up at epsg.io
+      vo.projection= await fromEPSGCode(vo.projection?.getCode());
+      console.log(`Downloading projection ${vo.projection.getCode()} used by ${url}`);
+      //return;
+    }
+
+    // Reproject the extent to the map's projection
+      const extent = transformExtent(vo.extent, vo.projection, googleview.getProjection());
+      map.getView().fit(extent);
+  }); // end of source.getView().then
+
 
-  // Reproject the extent to the map's projection
-  const extent = transformExtent(vo.extent, vo.projection, googleview.getProjection());
-  map.getView().fit(extent);
-*/
 
 }; // function buildMapforGeotiff
 
 
 
 
+// Add a listener for the "newpalette" event
+document.addEventListener('newpalette', updateGeotiffColors);
+function updateGeotiffColors(){
+  if (!layer) {
+    console.error('No layer to update colors for');
+    return;
+  }
+  (layer as TileLayer).setStyle(getInterpolateBand1AsColor()); // Set the style
+}
 
 
 
@@ -154,10 +173,8 @@ async function buildMapForSTACItem() {
 let stac_json = localStorage.getItem('stac');
 
 
-if (!stac_json) {
-  console.error(`No STAC JSON in localStorage`);
-  return;
-}
+if (!stac_json) return buildMapForGeotiff();
+
 
 const layer = new STAC({url: stac_json});
 
diff --git a/src/components/Toaster.astro b/src/components/Toaster.astro
index 37f394d..4ff9ced 100644
--- a/src/components/Toaster.astro
+++ b/src/components/Toaster.astro
@@ -39,10 +39,11 @@ window.newToast = ( message) => {
     gap: 0.5rem;
     z-index: 1000;
     .toast {
+        box-shadow: 5px 5px 10px 0 rgba(0, 0, 0, 0.1);
         background-color: rgba(255,255,255,0.8);
         font-family: 'Inter', sans-serif;
         color: #000;
-        border-radius: 0.5rem;
+        border-radius: 1rem;
         display: block;
         padding: 1rem;
         opacity: 0;
diff --git a/src/pages/index.astro b/src/pages/index.astro
index 4444b33..a59313c 100644
--- a/src/pages/index.astro
+++ b/src/pages/index.astro
@@ -6,7 +6,7 @@ import Dataviewer from "../components/Dataviewer.astro";
 import STACTreeView from "../components/STACTreeView.jsx";
 import Toaster from "../components/Toaster.astro";
 import ChoosePalette from "../components/ChoosePalette.astro";
-
+import COGURL from "../components/COGURL.astro";
 export const prerender = true;
 ---
 
@@ -33,6 +33,8 @@ export const prerender = true;
     <Colorbar />
 
     <ChoosePalette />
+
+    <COGURL />
     
     <Toaster />
 
diff --git a/src/scripts/palette.js b/src/scripts/palette.js
index 2217d8a..dc31294 100644
--- a/src/scripts/palette.js
+++ b/src/scripts/palette.js
@@ -3,56 +3,59 @@ import * as d3 from 'd3';
 
 
 
-export function getInterpolateBand1AsColor(pal) {
-
-    // If pal is not specified, use 'rgb' if palette-rgb is checked, otherwise use 'A'
-    if (!pal) {
-        if (document.getElementById('palette-rgb').checked) pal='rgb';
-        else pal = document.querySelector('input[name="palette"]:checked').value;
-    }
-
-    // Hide #colorbar element
-    document.getElementById('colorbar').style.display = 'none';
-
-    if (pal.toLowerCase()=='rgb')return { color: ['array', ['band', 1], ['band', 2], ['band', 3], 1] };
-
-    document.getElementById('colorbar').style.display = 'block';
-
-    let color = null;
-    if (pal=='A') color = d3.scaleSequential(d3.interpolateRainbow);
-    if (pal=='B') color = d3.scaleSequential(d3.interpolateViridis);
-    if (pal=='C') color = d3.scaleSequential(d3.interpolateWarm);
-    if (pal=='D') color = d3.scaleSequential(d3.interpolateGnBu);
-
-
-      const clr_arr = [
-        'interpolate',
-        ['linear'],
-        ['band', 1],
-        0,
-        [255,0,0,0],
-        0.001,
-        color(0.001),
-        0.1,
-        color(0.1),
-        0.1,
-        color(0.1),
-        0.2,
-        color(0.2),
-        0.4,
-        color(0.4),
-        0.6,
-        color(0.6),
-        1,
-        color(1)
-      ];
-      interpolation_to_colorbar(clr_arr.slice(3));
-      return {color: clr_arr};
+export function getInterpolateBand1AsColor() {
 
+  const pal = localStorage.getItem('palette') || 'd3.interpolateBlues';
+
+  if (pal.toLowerCase()=='rgb')
+    return { color: ['array', ['band', 1], ['band', 2], ['band', 3], 1] };
+
+
+  let color = getPaletteAsFunction();
+  // If inverted, change the color function domain to 1,0
+  if (localStorage.getItem('invertpalette')==='true') color.domain([1,0]);
+
+
+  const clr_arr = [
+    'interpolate',
+    ['linear'],
+    ['band', 1],
+    0,
+    [255,0,0,0],
+    0.001,
+    color(0.001),
+    0.1,
+    color(0.1),
+    0.1,
+    color(0.1),
+    0.2,
+    color(0.2),
+    0.4,
+    color(0.4),
+    0.6,
+    color(0.6),
+    1,
+    color(1)
+  ];
+  return {color: clr_arr};
     
 }
 
 
+export function getPaletteAsGradient() {
+
+  const color = getPaletteAsFunction();
+  if (!color) return 'red';
+  const gradient = [];
+  for(let i=0; i<1; i+=0.1) {
+    const c = color(i);
+    gradient.push(c);
+  }
+  const invert = localStorage.getItem('invertpalette')==='true';
+  if (invert) gradient.reverse();
+  return `linear-gradient(to right, ${gradient.join(',')})`;
+}
+
 // Given a MapLibre color interpolation array like [value, color, value, color, ...], create a
 // colorbar elelement with a CSS background gradient 
 // that matches the color ramp
@@ -79,3 +82,24 @@ function interpolation_to_colorbar(interp){
 
 }
 
+
+
+
+
+
+export function getPaletteAsFunction() {
+
+  const palette = localStorage.getItem('palette') || 'd3.interpolateBlues';
+  if (palette=='rgb') return null;
+  const paletteFunction = eval(palette);
+
+  const invert = localStorage.getItem('invertpalette');
+
+  /*let min = localStorage.getItem('min') ?? 0;
+  let max = localStorage.getItem('max') ?? 1;
+  if (invert==='true') {
+    [min, max] = [max, min];
+  }
+*/
+  return d3.scaleSequential(paletteFunction);//.domain([min, max]);
+}
\ No newline at end of file