Refactor STAC data structure and enhance frontend functionality

- Updated STAC JSON files for ESL and sediment classification datasets, simplifying properties and enhancing geometry definitions.
- Integrated Tailwind CSS into the Nuxt.js configuration for improved styling.
- Updated package dependencies, including the addition of @nuxtjs/tailwindcss and lucide-vue-next.
- Refactored index.vue to streamline data fetching and improve user interface for dataset selection, including polygon drawing functionality.
- Enhanced user experience with clearer dataset availability indicators and improved download options for reports and notebooks.

Author: RobertBroersma

App/components/CollectionSelector.vue

@@ -0,0 +1,171 @@
+<script lang="ts" setup>
+import { Eye, EyeOff } from 'lucide-vue-next'
+import { CollectionType, LayerLink } from '../types'
+import type { Ref } from 'vue'
+
+let { collection, onChangeActive, activeValue } = defineProps<{
+  collection: CollectionType & { href: string }
+  activeValue?: LayerLink
+  onChangeActive(link?: LayerLink): void
+}>()
+
+let baseURL = collection.href.replace('/collection.json', '')
+
+let summaries = computed(() => {
+  return collection?.summaries
+})
+
+let propertyOrder = computed(() => Object.keys(summaries.value))
+
+let variables: Ref<Record<string, string | undefined>> = ref({})
+
+function resetVariables() {
+  variables.value = Object.keys(summaries.value ?? {}).reduce((acc, key) => {
+    return {
+      ...acc,
+      [key]: undefined,
+    }
+  }, {} as Record<string, string | undefined>)
+}
+
+resetVariables()
+
+function getValidOptionsForProperty(property: string) {
+  if (!variables.value) return []
+
+  let currentIndex = propertyOrder.value.indexOf(property)
+  let relevantProperties = propertyOrder.value.slice(0, currentIndex)
+
+  let validItems = collection.links
+    .filter((link) => link.rel === 'item')
+    .filter((link) => {
+      if (!variables.value) return false
+      return Object.entries(variables.value)
+        .filter(([key]) => relevantProperties.includes(key))
+        .every(
+          ([key, option]) =>
+            !option ||
+            link.properties?.[key as keyof typeof link.properties] === option,
+        )
+    })
+
+  return [
+    ...new Set(
+      validItems.map(
+        (item) => item?.properties?.[property as keyof typeof item.properties],
+      ),
+    ),
+  ]
+}
+
+function selectOption(property: string, option: string) {
+  if (!variables.value) return
+
+  if (variables.value[property] === option) {
+    variables.value[property] = undefined
+  } else {
+    variables.value[property] = option
+  }
+
+  let currentIndex = propertyOrder.value.indexOf(property)
+  for (let i = currentIndex + 1; i < propertyOrder.value.length; i++) {
+    let nextProperty = propertyOrder.value[i]
+    if (!variables.value) break
+
+    variables.value[nextProperty] = undefined
+
+    let validOptions = getValidOptionsForProperty(nextProperty)
+    if (validOptions.length === 1) {
+      variables.value[nextProperty] = validOptions[0]
+    }
+  }
+}
+
+watchEffect(() => {
+  if (!summaries.value || !variables.value) return
+
+  let foundLink = collection.links
+    .filter((l) => l.rel === 'item')
+    .find((link) => {
+      return Object.entries(variables.value ?? {}).every(
+        ([key, option]) =>
+          link.properties?.[key as keyof typeof link.properties] === option,
+      )
+    })
+
+  if (foundLink) {
+    onChangeActive({
+      type: 'item',
+      href: baseURL + '/' + foundLink.href,
+    })
+  } else {
+    onChangeActive(undefined)
+  }
+})
+
+function toggleActive(value: boolean) {
+  if (!value) {
+    onChangeActive(undefined)
+    resetVariables()
+  } else {
+    if (summaries.value) {
+      // do nothing
+    } else {
+      const geoserverLink = collection.assets?.['geoserver_link'] as
+        | { href: string }
+        | undefined
+      if (geoserverLink) {
+        onChangeActive({
+          type: 'raster',
+          href: geoserverLink.href,
+        })
+      }
+    }
+  }
+}
+</script>
+
+<template>
+  <div v-if="!summaries">
+    <div class="flex items-center gap-3 bg-white p-3 shadow">
+      <button
+        @click="toggleActive(!activeValue)"
+        class="size-8 flex items-center justify-center shrink-0 rounded-md hover:bg-gray-100"
+      >
+        <Eye class="size-4" v-if="!!activeValue" />
+        <EyeOff class="size-4" v-if="!activeValue" />
+      </button>
+      <div class="text-sm font-medium">{{ collection.title }}</div>
+    </div>
+  </div>
+  <v-expansion-panel v-if="summaries">
+    <v-expansion-panel-title>
+      <div class="flex items-center gap-3">
+        <button
+          @click.stop="!!activeValue && toggleActive(false)"
+          class="z-10 size-8 flex items-center justify-center shrink-0 rounded-md hover:bg-gray-100"
+        >
+          <Eye class="size-4" v-if="!!activeValue" />
+          <EyeOff class="size-4" v-if="!activeValue" />
+        </button>
+        <div>{{ collection.title }}</div>
+      </div>
+    </v-expansion-panel-title>
+    <v-expansion-panel-text>
+      <div class="grid grid-flow-row gap-1.5 py-3">
+        <div
+          v-for="(options, key) in summaries"
+          :key="key"
+          class="empty:hidden"
+        >
+          <v-select
+            :label="key"
+            :items="getValidOptionsForProperty(key)"
+            :model-value="variables?.[key]"
+            @update:model-value="selectOption(key, $event)"
+          />
+        </div>
+      </div>
+    </v-expansion-panel-text>
+  </v-expansion-panel>
+</template>

App/components/ItemLayer.vue

@@ -0,0 +1,15 @@
+<script setup lang="ts">
+import { ItemType } from '~/types'
+
+let { href } = defineProps<{
+  href: string
+}>()
+
+let { data: jsonString } = await useFetch<ItemType>(href)
+
+let item = computed(() => JSON.parse(jsonString.value))
+</script>
+
+<template>
+  <RasterLayer :id="item.id" :href="item.assets.visual.href" />
+</template>

App/components/Layer.vue

@@ -0,0 +1,16 @@
+<script setup lang="ts">
+import { LayerLink } from '~/types'
+
+let { link } = defineProps<{
+  link: LayerLink
+}>()
+</script>
+
+<template>
+  <ItemLayer v-if="link.type === 'item'" :href="link.href" />
+  <RasterLayer
+    v-if="link.type === 'raster'"
+    :href="link.href"
+    :id="link.href"
+  />
+</template>

App/components/RasterLayer.vue

@@ -0,0 +1,24 @@
+<script setup lang="ts">
+import { MapboxLayer } from '@studiometa/vue-mapbox-gl'
+
+let { id, href } = defineProps<{
+  id: string
+  href: string
+}>()
+
+let layer = computed(() => {
+  return {
+    id,
+    type: 'raster',
+    source: {
+      type: 'raster',
+      tiles: [href],
+      tileSize: 256,
+    },
+  }
+})
+</script>
+
+<template>
+  <MapboxLayer v-if="layer" :key="layer.id" :id="layer.id" :options="layer" />
+</template>

App/types.d.ts

@@ -0,0 +1,17 @@
+import collectionShape from '../STAC/data/current/sub_threat/collection.json'
+import itemShape from '../../STAC/data/current/sub_threat/eapa-mapbox/eapa-mapbox-time-2010.json'
+
+export type CollectionType = typeof collectionShape
+export type ItemType = typeof itemShape
+
+export interface ItemLink {
+  type: 'item'
+  href: string
+}
+
+export interface RasterLink {
+  type: 'raster'
+  href: string
+}
+
+export type LayerLink = ItemLink | RasterLink

App/types/studiometa__vue-mapbox-gl.d.ts

@@ -0,0 +1,4 @@
+declare module '@studiometa/vue-mapbox-gl' {
+  import { DefineComponent } from 'vue'
+  export const MapboxMap: DefineComponent<any, any, any>
+}