move to Astro

FAIRiCUBE · Nov 22, 2024 · b5d273c · b5d273c
1 parent cc89055
commit b5d273c
Show file tree

Hide file tree

Showing 46 changed files with 1,033 additions and 45 deletions.
diff --git a/.github/workflows/npm_run_build → .github/workflows/npm_run_build.yml b/.github/workflows/npm_run_build → .github/workflows/npm_run_build.yml
diff --git a/astro.config.mjs b/astro.config.mjs
@@ -0,0 +1,10 @@
+import { defineConfig } from 'astro/config'
+import solid from '@astrojs/solid-js';
+
+export default defineConfig({
+    site: "https://vis.fairicube.eu",
+    integrations: [solid()],
+    output: "static",
+    publicDir: "static",
+    outDir: "public",
+})
diff --git a/index.html b/index.html
@@ -4,10 +4,11 @@
     <meta charset="UTF-8" />
     <link rel="icon" type="image/svg+xml" href="/vite.svg" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <title>Vite + Solid + TS</title>
+    <link rel="stylesheet" href="src/style.css">
+    <title>FAIRiCUBE Visualization Service</title>
   </head>
   <body>
     <div id="root"></div>
-    <script type="module" src="/src/index.tsx"></script>
+    <script type="module" src="src/main.ts"></script>
   </body>
 </html>
diff --git a/package.json b/package.json
@@ -4,11 +4,15 @@
   "version": "0.0.0",
   "type": "module",
   "scripts": {
-    "dev": "vite",
-    "build": "tsc -b && vite build",
-    "preview": "vite preview"
+    "dev": "astro dev",
+    "start": "astro dev",
+    "build": "astro build",
+    "preview": "astro preview"
   },
   "dependencies": {
+    "@astrojs/check": "^0.9.4",
+    "@astrojs/solid-js": "^4.4.4",
+    "astro": "^4.16.14",
     "d3": "^7.9.0",
     "geotiff": "^2.1.3",
     "ol": "^10.2.1",

diff --git a/src/App.css → src-bad/App.css b/src/App.css → src-bad/App.css
diff --git a/src/App.tsx → src-bad/App.tsx b/src/App.tsx → src-bad/App.tsx
diff --git a/src/components/App.module.css → src-bad/components/App.module.css b/src/components/App.module.css → src-bad/components/App.module.css
diff --git a/src/components/ChoosePalette.jsx → src-bad/components/ChoosePalette.jsx b/src/components/ChoosePalette.jsx → src-bad/components/ChoosePalette.jsx
diff --git a/src/components/ChooseRasterLayer.jsx → src-bad/components/ChooseRasterLayer.jsx b/src/components/ChooseRasterLayer.jsx → src-bad/components/ChooseRasterLayer.jsx
diff --git a/src/components/ChooseVectorLayer.jsx → src-bad/components/ChooseVectorLayer.jsx b/src/components/ChooseVectorLayer.jsx → src-bad/components/ChooseVectorLayer.jsx
diff --git a/src/components/Colorbar.jsx → src-bad/components/Colorbar.jsx b/src/components/Colorbar.jsx → src-bad/components/Colorbar.jsx
diff --git a/src/components/Colorbar.module.css → src-bad/components/Colorbar.module.css b/src/components/Colorbar.module.css → src-bad/components/Colorbar.module.css
diff --git a/src/components/LogoNILU.astro → src-bad/components/LogoNILU.astro b/src/components/LogoNILU.astro → src-bad/components/LogoNILU.astro
@@ -19,4 +19,4 @@
 </style>
 
 <!-- NILU.svg in the lower left corner -->
-  <object id="nilulogo" data="../images/NILU_Logo_Seagreen_RGB_small.svg" type="image/svg+xml"></object>
+  <object id="nilulogo" data="/NILU_Logo_Seagreen_RGB_small.svg" type="image/svg+xml"></object>
diff --git a/src/components/LogoProject.astro → src-bad/components/LogoProject.astro b/src/components/LogoProject.astro → src-bad/components/LogoProject.astro
@@ -11,7 +11,7 @@
     z-index: 1000;
     width: 100px;
     height: 100px;
-    background-image: url('../images/fairicube_logo_400x297.jpg');
+    background-image: url('/fairicube_logo_400x297.jpg');
     background-size: contain;
     background-repeat: no-repeat;
     background-position: center;

diff --git a/src/components/Map.js → src-bad/components/Map.js b/src/components/Map.js → src-bad/components/Map.js
diff --git a/src-bad/components/STACTreeView.jsx b/src-bad/components/STACTreeView.jsx
@@ -0,0 +1,49 @@
+import { createResource, createSignal } from "solid-js";
+import { getAllSTACItems } from "../scripts/getAllItems";
+import { showWholeCollection } from "./utils/ShowWholeCollection";
+
+export default function STACTreeView(props) {
+
+
+    //const [STACCatalogs, setSTACCatalogs] = createSignal();
+    const [dummySignal, setDummySignal] = createSignal();
+
+    const [STACCatalogs] = createResource(dummySignal, getAllSTACItems);
+
+
+    setDummySignal(true);
+
+    return <For each={STACCatalogs()} fallback={<div>Loading...</div>}>
+
+        {(collection, collectionIdx) => {
+            return <ViewCollection collection={collection} />
+        }}
+    </For>
+}
+
+function ViewCollection({collection}) {
+
+
+    return <div>{collection.title}:
+
+    <button onClick={() => showWholeCollection(collection.links.filter(link => link.rel == "self")[0].href)}>Show whole collection</button>
+
+    <ul>
+        <For each={collection.items}>
+            {(item, itemIdx) => {
+                return <li>{item.id}<br/>
+                <For each={Object.entries(item.assets)}>
+                    {(entry) => {
+                        const [key, val] = entry;
+                        // If val.rolesdoes not contain "data", skip
+                        if (!val.roles.includes("data")) return <>🔗</>
+                        return <div>🔎 {val?.description  ?? val.id ?? key}:  {val.href}</div>
+                    }}
+                </For>
+
+                </li>
+            }}
+        </For>
+    </ul>
+    </div>
+}
diff --git a/src-bad/components/utils/ShowWholeCollection.js b/src-bad/components/utils/ShowWholeCollection.js
@@ -0,0 +1,48 @@
+import Map from 'ol/Map.js';
+import OSM from 'ol/source/OSM.js';
+import STAC from '../../ol/layer/STAC';
+import TileLayer from 'ol/layer/WebGLTile.js';
+import View from 'ol/View.js';
+import proj4 from 'proj4';
+import {getStacObjectsForEvent} from '../../ol/util.js';
+import {register} from 'ol/proj/proj4.js';
+
+register(proj4); // required to support source reprojection
+
+export function showWholeCollection(collectionUrl){
+
+    const layer = new STAC({
+        url: collectionUrl,
+        displayPreview: true,
+        collectionStyle: {
+            color: 'red',
+        },
+        assets: ['data'],
+
+    });
+
+    const background = new TileLayer({source: new OSM()});
+
+    const map = new Map({
+    target: 'map-container',
+    layers: [background, layer],
+    view: new View({
+        center: [0, 0],
+        zoom: 0,
+    }),
+    });
+    map.on('singleclick', async (event) => {
+        const objects = await getStacObjectsForEvent(event);
+        if (objects.length > 0) {
+            objects.forEach((obj) => console.log(obj));
+        }
+    });
+
+    layer.on('sourceready', () => {
+        const view = map.getView();
+        view.fit(layer.getExtent());
+    });
+
+    return false;
+
+}
diff --git a/src/components/utils/createBasemapLayer.js → ...ad/components/utils/createBasemapLayer.js b/src/components/utils/createBasemapLayer.js → ...ad/components/utils/createBasemapLayer.js
diff --git a/src/components/utils/createVectorLayer.js → ...bad/components/utils/createVectorLayer.js b/src/components/utils/createVectorLayer.js → ...bad/components/utils/createVectorLayer.js
diff --git a/src-bad/components/utils/getGeotiffMinmaxFromAuxXML.js b/src-bad/components/utils/getGeotiffMinmaxFromAuxXML.js
@@ -0,0 +1,17 @@
+async function getGeotiffMinmaxFromAuxXML(geotiffSourceURL){
+    try {
+
+    const auxurl = geotiffSourceURL.replace('.tif','.tif.aux.xml');
+    const aux = await fetch(auxurl);
+    const auxxml = await aux.text();
+    const auxdoc = new DOMParser().parseFromString(auxxml, 'text/xml');
+    const min = auxdoc.querySelector('[key="STATISTICS_MINIMUM"]').textContent;
+    const max = auxdoc.querySelector('[key="STATISTICS_MAXIMUM"]').textContent;
+    return [parseFloat(min), parseFloat(max)];
+    } catch {
+        return null;
+    }
+}
+
+export default getGeotiffMinmaxFromAuxXML;
+
diff --git a/src/components/utils/vectorFeatureStyle.js → ...ad/components/utils/vectorFeatureStyle.js b/src/components/utils/vectorFeatureStyle.js → ...ad/components/utils/vectorFeatureStyle.js
diff --git a/src/components/utils/zoomToFitData.js → src-bad/components/utils/zoomToFitData.js b/src/components/utils/zoomToFitData.js → src-bad/components/utils/zoomToFitData.js
diff --git a/src-bad/env.d.ts b/src-bad/env.d.ts
@@ -0,0 +1 @@
+/// <reference path="../.astro/types.d.ts" />
diff --git a/src/index.css → src-bad/index.css b/src/index.css → src-bad/index.css
diff --git a/src/components/App.jsx → src-bad/main.ts b/src/components/App.jsx → src-bad/main.ts
@@ -1,10 +1,10 @@
 
 import styles from "./App.module.css";
 import { createSignal } from "solid-js";
-import Colorbar from "./Colorbar.jsx";
-import ChoosePalette from "./ChoosePalette.jsx";
-import ChooseVectorLayer from "./ChooseVectorLayer.jsx";
-import ChooseRasterLayer from "./ChooseRasterLayer.jsx";
+import Colorbar from "./components/Colorbar.jsx";
+import ChoosePalette from "./components/ChoosePalette.jsx";
+import ChooseVectorLayer from "./components/ChooseVectorLayer.jsx";
+import ChooseRasterLayer from "./components/ChooseRasterLayer.jsx";
 import proj4 from 'proj4';
 import {register} from 'ol/proj/proj4';
 

diff --git a/src/scripts/getAllItems.ts → src-bad/scripts/getAllItems.ts b/src/scripts/getAllItems.ts → src-bad/scripts/getAllItems.ts
diff --git a/src-bad/scripts/palette.js b/src-bad/scripts/palette.js
@@ -0,0 +1,74 @@
+// import d3 scalechromatic
+import * as d3 from 'd3';
+/*
+import { palette } from '../components/App.js';
+
+
+export function getInterpolateBand1AsColor() {
+
+    const pal = palette();
+
+
+    if (pal.toLowerCase()=='rgb')return { color: ['array', ['band', 1], ['band', 2], ['band', 3], 1] };
+
+    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};
+
+}
+
+
+// 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
+function interpolation_to_colorbar(interp){
+  const colorbar = document.getElementById('colorbar');
+  colorbar.innerHTML = '';
+  for (let i = 0; i < interp.length; i+=2){
+      let div = document.createElement('div');
+      div.innerHTML = interp[i]; // Value
+      colorbar.appendChild(div);
+  }
+  const maxValue = interp[interp.length-2];
+  let gradient = '';
+  for (let i = 0; i < interp.length; i+=2){
+      const value = interp[i];
+      const percent = (value/maxValue)*100;
+      let clr = interp[i+1];
+      // If the color is an array, convert it to a string
+      if (Array.isArray(clr)) clr = `rgba(${clr.join(',')})`;
+      gradient += clr + ' ' + percent + '%, ';
+  }
+  gradient = gradient.slice(0, -2);
+  colorbar.style.background = 'linear-gradient(to right, ' + gradient + ')';
+
+}
+
+*/
diff --git a/src/vite-env.d.ts → src-bad/vite-env.d.ts b/src/vite-env.d.ts → src-bad/vite-env.d.ts
diff --git a/src/components/ChoosePalette.astro b/src/components/ChoosePalette.astro
@@ -0,0 +1,65 @@
+
+<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>
+  </div>
+</div>
+
+
+
+<script>
+
+
+// Change the palette
+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'));
+});
+
+
+
+// Listen for the "newsource" event. If localStorage.url ends with .tiff, then make the True Color option visible.
+document.addEventListener('newsource', () => {
+  const url = localStorage.getItem('url');
+  const isTiff = url && url.endsWith('.tif');
+  const rgbLabel = document.querySelector('label[value="RGB"]') as HTMLLabelElement;
+  if (rgbLabel) rgbLabel.style.display = isTiff ? 'initial' : 'none';
+});
+
+</script>
+
+<style>
+.choosepalette {
+    display: flex;
+    width: 100%;
+    position: absolute;
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    align-items: flex-end;
+
+    div {
+        display: flex;
+        flex-direction: column;
+        align-items: start;
+        align-content: start;
+        justify-items: start;
+        justify-content: start;
+        gap: 1rem;
+        label {
+          cursor: pointer;
+          font-family: 'Inter', sans-serif;
+        }
+    }
+
+    top:0;
+    height: 100vh;
+    right: 1rem;
+    gap: 1rem;
+}
+</style>
diff --git a/src/components/Colorbar.astro b/src/components/Colorbar.astro
@@ -0,0 +1,53 @@
+<div id="colorbar"></div>
+
+<script>
+
+// Listen for the changes to palette or source
+document.addEventListener('newpalette', updateColorbar);
+document.addEventListener('newsource', updateColorbar);
+
+
+function updateColorbar() {
+  console.log('newpalette - updating colorbar');
+
+  const el = document.getElementById('colorbar');
+  if (!el) return;
+
+  const palette = localStorage.getItem('palette');
+
+  el.style.display = (palette=='rgb') ? 'none' : 'block';
+
+}
+
+
+
+
+
+</script>
+<style>
+
+#colorbar {
+  position: absolute;
+  bottom: 50px;
+  right: 50px;
+  width: 200px;
+  height: 5px;
+  background: none;
+  border-radius: 5px;
+  background-color: none;
+  backdrop-filter: blur(5px);
+  padding: 10px;
+  font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
+  color: darkslategray;
+  background-color: var(--nilu-dark-gray);
+  font-size: 0.8em;
+  border-radius: 5px;
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  div {
+    mix-blend-mode: plus-lighter;
+    color: white;
+  }
+}
+</style>