From d2150e47ac5a735c240619a2d1c3f4dccc64b1e3 Mon Sep 17 00:00:00 2001
From: Robert <robertbroersma@gmail.com>
Date: Thu, 23 Nov 2023 12:47:37 +0100
Subject: [PATCH] App in stable state

---
 App/prettier.config.cjs                       |   7 ++
 .../eapa-mapbox/eapa-mapbox-time-2010.json    |  73 ++++++++++++
 app/pages/index.vue                           | 112 +++++++++---------
 app/server/routes/stac/[...].ts               |   4 +-
 4 files changed, 140 insertions(+), 56 deletions(-)
 create mode 100644 App/prettier.config.cjs
 create mode 100644 STAC/data/current/sub_threat/eapa-mapbox/eapa-mapbox-time-2010.json

diff --git a/App/prettier.config.cjs b/App/prettier.config.cjs
new file mode 100644
index 000000000..57ac96050
--- /dev/null
+++ b/App/prettier.config.cjs
@@ -0,0 +1,7 @@
+module.exports = {
+  semi: false,
+  singleQuote: true,
+  arrowParens: 'always',
+  trailingComma: 'all',
+  tabWidth: 2,
+}
diff --git a/STAC/data/current/sub_threat/eapa-mapbox/eapa-mapbox-time-2010.json b/STAC/data/current/sub_threat/eapa-mapbox/eapa-mapbox-time-2010.json
new file mode 100644
index 000000000..54a5d144a
--- /dev/null
+++ b/STAC/data/current/sub_threat/eapa-mapbox/eapa-mapbox-time-2010.json
@@ -0,0 +1,73 @@
+{
+  "type": "Feature",
+  "stac_version": "1.0.0",
+  "id": "eapa-mapbox-time-2010",
+  "properties": {
+    "deltares:item_key": "time-2010",
+    "deltares:paint": {
+      "fill-color": [
+        "interpolate",
+        ["linear"],
+        ["get", "time-2010"],
+        0,
+        "rgba(59, 217, 90, 0.3)",
+        277.5,
+        "rgba(245, 188, 66, 0.3)",
+        555,
+        "rgba(217, 59, 59, 0.3)"
+      ]
+    },
+    "deltares:type": "fill",
+    "deltares:stations": "locationId",
+    "deltares:onclick": {},
+    "time": 2010,
+    "datetime": "2023-11-07T13:34:44.212216Z"
+  },
+  "geometry": {
+    "type": "Polygon",
+    "coordinates": [
+      [
+        [-180.0, -90.0],
+        [180.0, -90.0],
+        [180.0, 90.0],
+        [-180.0, 90.0],
+        [-180.0, -90.0]
+      ]
+    ]
+  },
+  "links": [
+    {
+      "rel": "collection",
+      "href": "../collection.json",
+      "type": "application/json",
+      "title": "Land Subsidence Threat"
+    },
+    {
+      "rel": "root",
+      "href": "../../catalog.json",
+      "type": "application/json",
+      "title": "GlobalCoastalAtlas STAC Catalog"
+    },
+    {
+      "rel": "parent",
+      "href": "../collection.json",
+      "type": "application/json",
+      "title": "Land Subsidence Threat"
+    }
+  ],
+  "assets": {
+    "mapbox": {
+      "href": "mapbox://global-data-viewer.Global_TLS_eapa",
+      "title": "Point locations",
+      "description": "Mapbox url",
+      "type": "vector",
+      "source": "Global_TLS_eapa",
+      "roles": ["mapbox"]
+    }
+  },
+  "bbox": [-180, -90, 180, 90],
+  "stac_extensions": [
+    "https://raw.githubusercontent.com/openearth/coclicodata/main/json-schema/schema.json"
+  ],
+  "collection": "sub_threat"
+}
diff --git a/app/pages/index.vue b/app/pages/index.vue
index 947978aea..d26aedcff 100644
--- a/app/pages/index.vue
+++ b/app/pages/index.vue
@@ -1,47 +1,53 @@
 <script setup lang="ts">
-import { MapboxMap, MapboxLayer } from "@studiometa/vue-mapbox-gl";
-import "mapbox-gl/dist/mapbox-gl.css";
+import { MapboxMap, MapboxLayer } from '@studiometa/vue-mapbox-gl'
+import 'mapbox-gl/dist/mapbox-gl.css'
+
+import itemShape from '../../STAC/data/current/sub_threat/epsi-mapbox/epsi-mapbox-time-2010.json'
+import catalogShape from '../../STAC/data/current/catalog.json'
+import collectionShape from '../../STAC/data/current/sub_threat/collection.json'
+
+type ItemType = typeof itemShape
+type CatalogType = typeof catalogShape
+type CollectionType = typeof collectionShape
 
 let {
   public: { mapboxToken, stacRoot },
-} = useRuntimeConfig();
+} = useRuntimeConfig()
 
-let catalogPath = `${stacRoot}/catalog.json`;
+let catalogPath = `${stacRoot}/catalog.json`
 
-let { data: catalogJson } = await useFetch(catalogPath);
+let { data: catalogJson } = await useFetch<CatalogType>(catalogPath)
 
-let catalog = catalogJson.value;
+let catalog = catalogJson.value
 
-let childrenLinks = catalog.links.filter((link) => link.rel === "child");
+let childrenLinks = catalog?.links.filter(link => link.rel === 'child') ?? []
 
 let collections = (
   await Promise.all(
-    childrenLinks.map(async (childLink) => {
-      let { data } = await useFetch(`${stacRoot}/${childLink.href}`);
-      return data.value;
-    })
+    childrenLinks.map(async childLink => {
+      let { data } = await useFetch<CollectionType>(
+        `${stacRoot}/${childLink.href}`,
+      )
+      return data.value
+    }),
   )
-).filter((collection) => collection.links.some((link) => link.rel === "item"));
+).filter(collection => collection?.links.some(link => link.rel === 'item'))
 
-let activeCollectionId = ref(collections[0].id);
+let activeCollectionId = ref(collections[0]?.id)
 
 let activeCollection = computed(() => {
   return collections.find(
-    (collection) => collection.id === activeCollectionId.value
-  );
-});
+    collection => collection?.id === activeCollectionId.value,
+  )
+})
 
 let summaries = computed(() => {
-  let newSummaries = {
-    ...(activeCollection.value.summaries ??
-      activeCollection.value["cube:dimensions"] ??
-      {}),
-  };
-  delete newSummaries.lat;
-  delete newSummaries.lon;
-
-  return newSummaries;
-});
+  return Object.entries(
+    activeCollection.value?.['cube:variables'] || {},
+  ).filter(([key, value]) => {
+    return value.type !== 'data'
+  })
+})
 
 // let { data: activeCollection } = await useFetch(currentCollectionPath);
 
@@ -52,9 +58,9 @@ let variables = ref(
     return {
       ...acc,
       [key]: values[0],
-    };
-  }, {} as Record<string, string>)
-);
+    }
+  }, {} as Record<string, string>),
+)
 
 watchEffect(
   () => {
@@ -63,42 +69,42 @@ watchEffect(
         return {
           ...acc,
           [key]: values[0],
-        };
+        }
       },
-      {} as Record<string, string>
-    );
+      {} as Record<string, string>,
+    )
   },
-  { flush: "pre" }
-);
+  { flush: 'pre' },
+)
 
 let activeItemUrl = computed(() => {
-  if (!activeCollection.value) return;
+  if (!activeCollection.value) return
   let foundLink =
     activeCollection.value.links
-      .filter((l) => l.rel === "item")
-      .find((link) => {
+      .filter(l => l.rel === 'item')
+      .find(link => {
         return Object.entries(variables.value).every(
-          ([key, value]) => link.properties?.[key] === value
-        );
-      }) ?? activeCollection.value.links.filter((l) => l.rel === "item")[0];
+          ([key, value]) => link.properties?.[key] === value,
+        )
+      }) ?? activeCollection.value.links.filter(l => l.rel === 'item')[0]
 
-  return foundLink?.href;
-});
+  return foundLink?.href
+})
 
 let { data } = await useAsyncData(
   () =>
     $fetch(`${stacRoot}/${activeCollectionId.value}/${activeItemUrl.value}`),
-  { watch: [activeItemUrl] }
-);
+  { watch: [activeItemUrl] },
+)
 
 let geojson = computed(() => {
   // let item = JSON.parse(data.value);
-  let item = data.value;
+  let item = data.value
 
-  if (!item?.assets) return {};
+  if (!item?.assets) return {}
 
-  let { mapbox } = item.assets;
-  let { properties } = item;
+  let { mapbox } = item.assets
+  let { properties } = item
 
   // if (visual) {
   //   return {
@@ -114,15 +120,15 @@ let geojson = computed(() => {
 
   return {
     id: item.id,
-    type: properties["deltares:type"],
+    type: properties['deltares:type'],
     source: {
       type: mapbox.type,
       url: mapbox.href,
     },
-    "source-layer": mapbox.source,
-    paint: properties["deltares:paint"],
-  };
-});
+    'source-layer': mapbox.source,
+    paint: properties['deltares:paint'],
+  }
+})
 </script>
 
 <template>
diff --git a/app/server/routes/stac/[...].ts b/app/server/routes/stac/[...].ts
index c9716f74c..6fd653155 100644
--- a/app/server/routes/stac/[...].ts
+++ b/app/server/routes/stac/[...].ts
@@ -5,9 +5,7 @@ export default defineEventHandler(async (event) => {
 
   if (!path) throw new Error("No path provided");
 
-  let json = await fs.readFile(
-    `${process.cwd()}/../stac_folder/current/${path}`
-  );
+  let json = await fs.readFile(`${process.cwd()}/../STAC/data/current/${path}`);
 
   return json;
 });