From 31ece0ae97a02ffa30fbc298e8e9c808086ee104 Mon Sep 17 00:00:00 2001
From: luisrodriguezgalvez
 <77997772+luisrodriguezgalvez@users.noreply.github.com>
Date: Wed, 29 Apr 2026 18:58:41 +0200
Subject: [PATCH 1/6] various streamline user step navigation

clickable layers only clickable within their own step,  unable to confirm without region selection, landscape architecture selection without confirmation, only calculate uom if landscape architecture is selected
---
 src/components/LayerList.vue   |  9 +++++++--
 src/components/NumberInput.vue | 21 +++++++++++++++++++--
 src/components/SubMenu.vue     |  3 ++-
 src/config/workflow.json       | 15 ++++++++++-----
 src/stores/map.js              | 22 ++++++++++++++++------
 5 files changed, 54 insertions(+), 16 deletions(-)

diff --git a/src/components/LayerList.vue b/src/components/LayerList.vue
index f3ffee0..1a91964 100644
--- a/src/components/LayerList.vue
+++ b/src/components/LayerList.vue
@@ -32,7 +32,7 @@
 </template>
 
 <script setup>
-  import { computed, onMounted, watch } from 'vue'
+  import { computed, inject, onMounted, onUnmounted, watch } from 'vue'
   import { useAppStore } from '@/stores/app'
   import { useMapStore } from '@/stores/map'
   import ActiveFeatureProperties from '@/components/ActiveFeatureProperties.vue'
@@ -44,6 +44,7 @@
 
   const appStore = useAppStore()
   const mapStore = useMapStore()
+  const stepId = inject('stepId', null)
 
   const filteredLayers = computed(() => {
     if (!props.conditionSource) {
@@ -68,10 +69,14 @@
 
   onMounted(() => {
     mapStore.initializeLayerVisibility(props.layers)
-    mapStore.initializeLayerClickable(props.layers)
+    mapStore.registerStepClickability(stepId, props.layers)
     syncVisibilityToFilter()
   })
 
+  onUnmounted(() => {
+    mapStore.unregisterStepClickability(stepId)
+  })
+
   watch(filteredLayers, syncVisibilityToFilter)
 </script>
 
diff --git a/src/components/NumberInput.vue b/src/components/NumberInput.vue
index 2ac5a6d..d93c450 100644
--- a/src/components/NumberInput.vue
+++ b/src/components/NumberInput.vue
@@ -21,7 +21,7 @@
         variant="tonal"
         color="primary"
         size="small"
-        :disabled="value == null || value < min || value > max"
+        :disabled="isCalcDisabled"
         :title="calcButtonTitle"
         @click="onCalcClick"
       />
@@ -47,6 +47,8 @@
     defaultValue: { type: Number, default: 0 },
     defaultValueSource: { type: String, default: null },
     showCalcButton: { type: Boolean, default: false },
+    requiresCalcCondition: { type: Boolean, default: false },
+    calcConditionSource: { type: String, default: null },
     calcButtonTitle: { type: String, default: 'Calculate' },
   })
 
@@ -63,6 +65,21 @@
 
   const value = ref(resolvedDefault.value)
 
+  const calcConditionMet = computed(() => {
+    if (!props.requiresCalcCondition) return true
+    if (!props.calcConditionSource) return false
+    const resolved = resolveInputValue(props.calcConditionSource, {
+      payload: { value: value.value },
+      stores: { app: appStore, map: mapStore },
+    })
+    return resolved !== undefined && resolved !== null && resolved !== ''
+  })
+
+  const isCalcDisabled = computed(() => {
+    const invalidValue = value.value == null || value.value < props.min || value.value > props.max
+    return invalidValue || !calcConditionMet.value
+  })
+
   watch(resolvedDefault, (newVal) => {
     if (newVal != null) {
       value.value = newVal
@@ -76,7 +93,7 @@
   }, { immediate: true })
 
   function onCalcClick () {
-    if (props.showCalcButton && value.value != null && value.value >= props.min && value.value <= props.max) {
+    if (props.showCalcButton && !isCalcDisabled.value) {
       emit('run-process', { value: value.value })
     }
   }
diff --git a/src/components/SubMenu.vue b/src/components/SubMenu.vue
index 344ec56..6163f37 100644
--- a/src/components/SubMenu.vue
+++ b/src/components/SubMenu.vue
@@ -57,7 +57,7 @@
 </template>
 
 <script setup>
-  import { computed, shallowRef, watch } from 'vue'
+  import { computed, provide, shallowRef, watch } from 'vue'
   import { useAppStore } from '@/stores/app'
   import { useMapStore } from '@/stores/map'
   import { executeProcessConfig } from '@/lib/ogc-process/execute-config'
@@ -77,6 +77,7 @@
   const mapStore = useMapStore()
   const loadedComponents = shallowRef([])
   const stepReadyPayload = shallowRef(null)
+  provide('stepId', props.menuId)
 
   const modules = import.meta.glob('@/components/*.vue')
 
diff --git a/src/config/workflow.json b/src/config/workflow.json
index d0f5f27..c5cd12b 100644
--- a/src/config/workflow.json
+++ b/src/config/workflow.json
@@ -46,9 +46,13 @@
       "id": "regionSelection",
       "title": "Region Selection",
       "drawerTitle": "Select a base map",
+      "requiredSteps": [
+        "userCaseSelection"
+      ],
       "icon": "mdi-map-marker-radius",
       "explanation": "Select a region on the map by clicking it, then confirm to continue.",
-      "requiresConfirmation": false,
+      "requiresConfirmation": true,
+      "confirmationSource": "mapClick",
       "components": [
         {
           "component": "LayerList",
@@ -132,7 +136,6 @@
           "componentProps": {
             "label": "Landscape archetype",
             "selectionKey": "uomArchetype",
-            "confirmSelection": true,
             "options": [
               {
                 "id": "coastal",
@@ -159,6 +162,8 @@
             "step": 100000,
             "defaultValue": 1000,
             "defaultValueSource": "store:map.suggestedUom",
+            "requiresCalcCondition": true,
+            "calcConditionSource": "store:app.selections.uomArchetype",
             "showCalcButton": true
           }
         }
@@ -189,9 +194,9 @@
             "source": "store:app.selections.kcsSelection"
           },
           {
-            "id": "sessionid",
+            "id": "session_id",
             "type": "LiteralData",
-            "source": "store:app.wpsResults.initialSetup.sessionid"
+            "source": "store:app.wpsResults.initialSetup.session_id"
           },
           {
             "id": "hazard",
@@ -263,7 +268,7 @@
               {
                 "id": "vulnerable_population_hospitals",
                 "name": "Vulnerable population (Hospitals)",
-                "condition": "salinization"
+                "condition": "heat"
               }
             ]
           }
diff --git a/src/stores/map.js b/src/stores/map.js
index b3241bd..13609ba 100644
--- a/src/stores/map.js
+++ b/src/stores/map.js
@@ -2,6 +2,7 @@ import { defineStore } from 'pinia'
 import area from '@turf/area'
 import layersConfig from '@/config/base-layers-config.json'
 import buildMapboxLayer from '@/lib/build-mapbox-layer'
+import { useAppStore } from '@/stores/app'
 
 function normalizeLayerUrlForBrowser (rawUrl) {
   if (!rawUrl || typeof rawUrl !== 'string') {
@@ -32,7 +33,7 @@ export const useMapStore = defineStore('map', {
     staticLayerIds: layersConfig.map(cfg => cfg.id),
     mapboxLayers: [],
     layerVisibility: {},
-    layerClickable: {},
+    layerClickableByStep: {},
     activeRegion: null,
     activeRegionId: null,
   }),
@@ -55,7 +56,10 @@ export const useMapStore = defineStore('map', {
     },
     
     isLayerClickable: (state) => (layerId) => {
-      return state.layerClickable[layerId] ?? false
+      const appStore = useAppStore()
+      const activeStepId = appStore.activeMenu
+      if (!activeStepId) return false
+      return state.layerClickableByStep[activeStepId]?.[layerId] ?? false
     },
     
     visibleLayersWithConfig: (state) => {
@@ -151,12 +155,18 @@ export const useMapStore = defineStore('map', {
       }
     },
     
-    initializeLayerClickable (layers) {
+    registerStepClickability (stepId, layers) {
+      if (!stepId || !Array.isArray(layers)) return
+      const clickability = {}
       for (const layer of layers) {
-        if (this.layerClickable[layer.id] === undefined) {
-          this.layerClickable[layer.id] = layer.clickable ?? false
-        }
+        clickability[layer.id] = layer.clickable ?? false
       }
+      this.layerClickableByStep[stepId] = clickability
+    },
+
+    unregisterStepClickability (stepId) {
+      if (!stepId) return
+      delete this.layerClickableByStep[stepId]
     },
     
     setLayerVisibility (layerId, isVisible) {

From 3bc6e39185be4b51f8af7c313b62874c0dc8cc84 Mon Sep 17 00:00:00 2001
From: luisrodriguezgalvez
 <77997772+luisrodriguezgalvez@users.noreply.github.com>
Date: Thu, 30 Apr 2026 12:56:57 +0200
Subject: [PATCH 2/6] workflow reset button

controlled via workflow.json, and if true, it appears after the first step is completed. Triggers the "initialSetup"
---
 src/components/NavigationDrawer.vue | 102 ++++++++++++++++++++++++----
 src/config/workflow.json            |   1 +
 src/stores/app.js                   |   7 ++
 src/stores/map.js                   |  12 +++-
 4 files changed, 106 insertions(+), 16 deletions(-)

diff --git a/src/components/NavigationDrawer.vue b/src/components/NavigationDrawer.vue
index b27c9aa..8ab563f 100644
--- a/src/components/NavigationDrawer.vue
+++ b/src/components/NavigationDrawer.vue
@@ -3,21 +3,43 @@
     class="custom-navigation-drawer"
     width="200"
   >
-    <v-list-item class="d-flex justify-center align-center pa-5">
-      <v-img
-        :src="config.logo"
-        alt="DesirMED Logo"
-        width="80px"
-      />
-    </v-list-item>
-    <v-list-item
-      v-for="step in config.steps"
-      :key="step.id"
-      :title="step.title"
-      :disabled="!store.isStepAvailable(step)"
-      :class="{ 'step-locked': !store.isStepAvailable(step) }"
-      @click="handleStepClick(step)"
-    />
+    <div class="drawer-content">
+      <div>
+        <v-list-item class="d-flex justify-center align-center pa-5">
+          <v-img
+            :src="config.logo"
+            alt="DesirMED Logo"
+            width="80px"
+          />
+        </v-list-item>
+        <v-list-item
+          v-for="step in config.steps"
+          :key="step.id"
+          :title="step.title"
+          :disabled="!store.isStepAvailable(step)"
+          :class="{ 'step-locked': !store.isStepAvailable(step) }"
+          @click="handleStepClick(step)"
+        />
+      </div>
+
+      <div
+        v-if="showRestart"
+        class="restart-wrapper"
+      >
+        <v-btn
+          color="primary"
+          variant="tonal"
+          block
+          size="small"
+          prepend-icon="mdi-restart"
+          :loading="isRestarting"
+          :disabled="isRestarting"
+          @click="onRestart"
+        >
+          Restart
+        </v-btn>
+      </div>
+    </div>
   </v-navigation-drawer>
 
   <sub-menu
@@ -35,16 +57,55 @@
 </template>
 
 <script setup>
+  import { computed, ref } from 'vue'
   import { useAppStore } from '@/stores/app'
+  import { useMapStore } from '@/stores/map'
   import SubMenu from '@/components/SubMenu.vue'
   import config from '@/config/workflow.json'
+  import { executeProcessConfig } from '@/lib/ogc-process/execute-config'
 
   const store = useAppStore()
+  const mapStore = useMapStore()
+  const isRestarting = ref(false)
+
+  const firstStep = computed(() => config.steps?.[0] ?? null)
+  const restartEnabled = computed(() => config.initialSetup?.restartButton === true)
+  const showRestart = computed(() => {
+    if (!restartEnabled.value) return false
+    if (!firstStep.value) return false
+    return store.isStepCompleted(firstStep.value.id)
+  })
 
   function handleStepClick (step) {
     if (!store.isStepAvailable(step)) return
     store.toggleMenu(step.id)
   }
+
+  async function onRestart () {
+    if (isRestarting.value) return
+    isRestarting.value = true
+    try {
+      store.resetWorkflowState()
+      mapStore.resetWorkflowState()
+
+      const process = config.initialSetup?.process
+      if (process?.trigger === 'onStart') {
+        await executeProcessConfig(process, {
+          payload: {},
+          appStore: store,
+          mapStore,
+        })
+      }
+
+      if (firstStep.value) {
+        store.toggleMenu(firstStep.value.id)
+      }
+    } catch (error) {
+      console.error('Restart failed:', error)
+    } finally {
+      isRestarting.value = false
+    }
+  }
 </script>
 
 <style scoped>
@@ -55,6 +116,17 @@
   border-radius: 28px;
 }
 
+.drawer-content {
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+  justify-content: space-between;
+}
+
+.restart-wrapper {
+  padding: 10px 12px 14px;
+}
+
 .step-locked {
   opacity: 0.4;
   cursor: not-allowed;
diff --git a/src/config/workflow.json b/src/config/workflow.json
index c5cd12b..7ed0fbb 100644
--- a/src/config/workflow.json
+++ b/src/config/workflow.json
@@ -1,6 +1,7 @@
 {
   "logo": "/desirmed_logo.png",
   "initialSetup": {
+    "restartButton": true,
     "process": {
       "identifier": "lare-start",
       "trigger": "onStart",
diff --git a/src/stores/app.js b/src/stores/app.js
index ae48a5a..acd5256 100644
--- a/src/stores/app.js
+++ b/src/stores/app.js
@@ -51,6 +51,13 @@ export const useAppStore = defineStore('app', {
       }
     },
 
+    resetWorkflowState () {
+      this.activeMenu = null
+      this.completedSteps = []
+      this.processResults = {}
+      this.selections = {}
+    },
+
     resetStepsFrom (stepId) {
       const steps = config.steps
       const index = steps.findIndex(s => s.id === stepId)
diff --git a/src/stores/map.js b/src/stores/map.js
index 13609ba..0b66d93 100644
--- a/src/stores/map.js
+++ b/src/stores/map.js
@@ -235,7 +235,10 @@ export const useMapStore = defineStore('map', {
 
       // Remove all non-static layers from the map and visibility state
       this.mapboxLayers = this.mapboxLayers.filter(layer => {
-        const isStatic = staticIds.has(layer.id)
+        const baseId = layer.id.endsWith('_raster')
+          ? layer.id.replace('_raster', '')
+          : layer.id
+        const isStatic = staticIds.has(baseId)
         if (!isStatic) {
           delete this.layerVisibility[layer.id]
         }
@@ -245,5 +248,12 @@ export const useMapStore = defineStore('map', {
       // Strip any dynamic layer configs so legends update accordingly
       this.layersConfig = this.layersConfig.filter(cfg => staticIds.has(cfg.id))
     },
+
+    resetWorkflowState () {
+      this.clearDynamicLayers()
+      this.layerVisibility = {}
+      this.layerClickableByStep = {}
+      this.clearActiveRegion()
+    },
   },
 })

From b55536f18ba1492aaad5e54a733fa84af55cc855 Mon Sep 17 00:00:00 2001
From: luisrodriguezgalvez
 <77997772+luisrodriguezgalvez@users.noreply.github.com>
Date: Thu, 30 Apr 2026 13:04:56 +0200
Subject: [PATCH 3/6] disable step on advancing to next step

configurable in worflow.json, via "disabledOnContinue"
---
 src/components/NavigationDrawer.vue | 15 ++++++++++++---
 src/config/workflow.json            |  4 ++++
 2 files changed, 16 insertions(+), 3 deletions(-)

diff --git a/src/components/NavigationDrawer.vue b/src/components/NavigationDrawer.vue
index 8ab563f..0b4ef27 100644
--- a/src/components/NavigationDrawer.vue
+++ b/src/components/NavigationDrawer.vue
@@ -16,8 +16,8 @@
           v-for="step in config.steps"
           :key="step.id"
           :title="step.title"
-          :disabled="!store.isStepAvailable(step)"
-          :class="{ 'step-locked': !store.isStepAvailable(step) }"
+          :disabled="isStepDisabled(step)"
+          :class="{ 'step-locked': isStepDisabled(step) }"
           @click="handleStepClick(step)"
         />
       </div>
@@ -77,10 +77,19 @@
   })
 
   function handleStepClick (step) {
-    if (!store.isStepAvailable(step)) return
+    if (isStepDisabled(step)) return
     store.toggleMenu(step.id)
   }
 
+  function isStepDisabled (step) {
+    if (!store.isStepAvailable(step)) return true
+    const disableAfterContinue =
+      step.disabledOnContinue === true &&
+      store.isStepCompleted(step.id) &&
+      store.activeMenu !== step.id
+    return disableAfterContinue
+  }
+
   async function onRestart () {
     if (isRestarting.value) return
     isRestarting.value = true
diff --git a/src/config/workflow.json b/src/config/workflow.json
index 7ed0fbb..cdade56 100644
--- a/src/config/workflow.json
+++ b/src/config/workflow.json
@@ -14,6 +14,7 @@
       "id": "userCaseSelection",
       "title": "Use Case",
       "drawerTitle": "Select your use case",
+      "disabledOnContinue": true,
       "explanation": "Choose the use case that matches your analysis, then confirm to continue.",
       "requiresConfirmation": true,
       "confirmationSource": "component",
@@ -47,6 +48,7 @@
       "id": "regionSelection",
       "title": "Region Selection",
       "drawerTitle": "Select a base map",
+      "disabledOnContinue": true,
       "requiredSteps": [
         "userCaseSelection"
       ],
@@ -92,6 +94,7 @@
       "title": "Calculate UOM",
       "icon": "mdi-city-variant-outline",
       "drawerTitle": "Calculate UOM",
+      "disabledOnContinue": true,
       "requiredSteps": [
         "regionSelection"
       ],
@@ -174,6 +177,7 @@
       "id": "kcsSelection",
       "title": "KCS & Hazards",
       "drawerTitle": "Select KCS and hazard",
+      "disabledOnContinue": true,
       "requiredSteps": [
         "uom"
       ],

From 97bfef01b50a61d8bcca4702178ae66d30072db3 Mon Sep 17 00:00:00 2001
From: luisrodriguezgalvez
 <77997772+luisrodriguezgalvez@users.noreply.github.com>
Date: Thu, 30 Apr 2026 18:42:11 +0200
Subject: [PATCH 4/6] added highlight component

---
 components.d.ts                            |   1 +
 src/components/ActiveFeatureProperties.vue |  79 ++++++++-------
 src/components/FlashHighlight.vue          | 106 +++++++++++++++++++++
 src/components/LayerList.vue               |   1 +
 src/components/NavigationDrawer.vue        |   3 +
 src/components/NumberInput.vue             |  34 +++++--
 src/components/SelectionList.vue           |  50 +++++++---
 src/components/SubMenu.vue                 |  71 ++++++++++----
 src/config/workflow.json                   |  14 +++
 9 files changed, 287 insertions(+), 72 deletions(-)
 create mode 100644 src/components/FlashHighlight.vue

diff --git a/components.d.ts b/components.d.ts
index e313e78..9d30387 100644
--- a/components.d.ts
+++ b/components.d.ts
@@ -13,6 +13,7 @@ declare module 'vue' {
   export interface GlobalComponents {
     ActiveFeatureProperties: typeof import('./src/components/ActiveFeatureProperties.vue')['default']
     AreaMenu: typeof import('./src/components/AreaMenu.vue')['default']
+    FlashHighlight: typeof import('./src/components/FlashHighlight.vue')['default']
     LayerLegend: typeof import('./src/components/LayerLegend.vue')['default']
     LayerList: typeof import('./src/components/LayerList.vue')['default']
     MapComponent: typeof import('./src/components/MapComponent.vue')['default']
diff --git a/src/components/ActiveFeatureProperties.vue b/src/components/ActiveFeatureProperties.vue
index 8f2f48f..6b39054 100644
--- a/src/components/ActiveFeatureProperties.vue
+++ b/src/components/ActiveFeatureProperties.vue
@@ -1,48 +1,55 @@
 <template>
-  <v-card
-    variant="flat"
-    rounded="xl"
-    class="bg-grey-lighten-3 px-3 py-0 mx-3"
+  <flash-highlight
+    :enabled="isReadyForFeatureSelection"
+    :flash-when-enabled="flashWhenEnabled"
   >
-    <v-card-title v-if="hasActiveFeature" class="d-flex justify-space-between align-center card-title-compact">
-      <span>{{ cardTitle }}</span>
-      <v-btn
-        v-if="hasActiveFeature"
-        variant="outlined"
-        rounded="xl"
-        size="small"
-        class="bg-grey-lighten-2 clear-btn"
-        @click="clear"
-      >
-        Clear
-      </v-btn>
-    </v-card-title>
-    <v-card-text class="pa-0">
-      <div v-if="!hasActiveFeature" class="empty-state text-grey font-italic">
-        Click on a feature on the map
-      </div>
-      <v-list v-else density="compact">
-        <v-list-item
-          v-for="(value, label) in propertyDisplay"
-          :key="label"
-          class="item-compact"
+    <v-card
+      variant="flat"
+      rounded="xl"
+      class="bg-grey-lighten-3 px-3 py-0 mx-3 my-1"
+    >
+      <v-card-title v-if="hasActiveFeature" class="d-flex justify-space-between align-center card-title-compact">
+        <span>{{ cardTitle }}</span>
+        <v-btn
+          v-if="hasActiveFeature"
+          variant="outlined"
+          rounded="xl"
+          size="small"
+          class="bg-grey-lighten-2 clear-btn"
+          @click="clear"
         >
-          <v-list-item-title class="item-title-compact">
-            <b>{{ label }}</b>: {{ value }}
-          </v-list-item-title>
-        </v-list-item>
-      </v-list>
-    </v-card-text>
-  </v-card>
+          Clear
+        </v-btn>
+      </v-card-title>
+      <v-card-text class="pa-0">
+        <div v-if="!hasActiveFeature" class="empty-state text-grey font-italic">
+          Click on a feature on the map
+        </div>
+        <v-list v-else density="compact">
+          <v-list-item
+            v-for="(value, label) in propertyDisplay"
+            :key="label"
+            class="item-compact"
+          >
+            <v-list-item-title class="item-title-compact">
+              <b>{{ label }}</b>: {{ value }}
+            </v-list-item-title>
+          </v-list-item>
+        </v-list>
+      </v-card-text>
+    </v-card>
+  </flash-highlight>
 </template>
 
 <script setup>
   import { computed } from 'vue'
   import { useMapStore } from '@/stores/map'
+  import FlashHighlight from '@/components/FlashHighlight.vue'
 
   const props = defineProps({
     layerId: { type: String, required: true },
     propertiesBoxType: { type: String, required: true },
+    flashWhenEnabled: { type: Boolean, default: false },
   })
 
   const mapStore = useMapStore()
@@ -75,6 +82,12 @@
     return mapStore.activeRegion?.layerId === props.layerId
   })
 
+  const isReadyForFeatureSelection = computed(() => {
+    const isVisible = mapStore.layerVisibility[props.layerId] === true
+    const isClickable = mapStore.isLayerClickable(props.layerId)
+    return isVisible && isClickable && !hasActiveFeature.value
+  })
+
   const propertyDisplay = computed(() => {
     if (!hasActiveFeature.value) {
       return {}
diff --git a/src/components/FlashHighlight.vue b/src/components/FlashHighlight.vue
new file mode 100644
index 0000000..4a0722c
--- /dev/null
+++ b/src/components/FlashHighlight.vue
@@ -0,0 +1,106 @@
+<template>
+  <div
+    class="flash-highlight"
+    :class="{ 'flash-highlight--active': isFlashing }"
+    :style="{ '--flash-count': String(flashCountValue) }"
+    @animationend="onAnimationEnd"
+  >
+    <slot />
+  </div>
+</template>
+
+<script setup>
+  import { computed, nextTick, onBeforeUnmount, ref, watch } from 'vue'
+
+  const props = defineProps({
+    enabled: { type: Boolean, default: false },
+    flashWhenEnabled: { type: Boolean, default: false },
+    flashCount: { type: Number, default: 2 },
+  })
+
+  const isFlashing = ref(false)
+  const safeFlashCount = computed(() => Math.max(1, Number(props.flashCount) || 2))
+  let loopTimer = null
+
+  function triggerFlash () {
+    isFlashing.value = false
+    nextTick(() => {
+      isFlashing.value = true
+    })
+  }
+
+  function stopLoop () {
+    if (loopTimer != null) {
+      clearInterval(loopTimer)
+      loopTimer = null
+    }
+    isFlashing.value = false
+  }
+
+  function startLoop () {
+    stopLoop()
+    triggerFlash()
+    loopTimer = setInterval(() => {
+      triggerFlash()
+    }, 5000)
+  }
+
+  watch(
+    () => props.enabled,
+    (enabled) => {
+      if (!props.flashWhenEnabled) return
+      if (enabled) {
+        startLoop()
+      } else {
+        stopLoop()
+      }
+    },
+    { immediate: true },
+  )
+
+  const flashCountValue = computed(() => safeFlashCount.value)
+
+  function onAnimationEnd () {
+    isFlashing.value = false
+  }
+
+  onBeforeUnmount(() => {
+    stopLoop()
+  })
+</script>
+
+<style scoped>
+.flash-highlight {
+  border-radius: 8px;
+}
+
+.flash-highlight--active {
+  animation-name: flash-highlight-pulse;
+  animation-duration: 700ms;
+  animation-iteration-count: var(--flash-count, 2);
+  animation-timing-function: ease-in-out;
+}
+
+@keyframes flash-highlight-pulse {
+  0% {
+    background-color: rgba(255, 221, 87, 0);
+    box-shadow: 0 0 0 0 rgba(255, 221, 87, 0);
+  }
+  50% {
+    background-color: rgba(255, 221, 87, 0.32);
+    box-shadow: 0 0 0 2px rgba(255, 221, 87, 0.55);
+  }
+  100% {
+    background-color: rgba(255, 221, 87, 0);
+    box-shadow: 0 0 0 0 rgba(255, 221, 87, 0);
+  }
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .flash-highlight--active {
+    animation: none;
+    box-shadow: 0 0 0 2px rgba(255, 221, 87, 0.55);
+    background-color: rgba(255, 221, 87, 0.2);
+  }
+}
+</style>
diff --git a/src/components/LayerList.vue b/src/components/LayerList.vue
index 1a91964..3c25030 100644
--- a/src/components/LayerList.vue
+++ b/src/components/LayerList.vue
@@ -25,6 +25,7 @@
         v-if="layer.propertiesBox"
         :layer-id="layer.id"
         :properties-box-type="layer.propertiesBox"
+        :flash-when-enabled="layer.flashWhenEnabled ?? false"
         class="mt-0"
       />
     </template>
diff --git a/src/components/NavigationDrawer.vue b/src/components/NavigationDrawer.vue
index 0b4ef27..cc428ee 100644
--- a/src/components/NavigationDrawer.vue
+++ b/src/components/NavigationDrawer.vue
@@ -52,6 +52,9 @@
     :requires-confirmation="step.requiresConfirmation || false"
     :confirmation-source="step.confirmationSource || 'component'"
     :explanation="step.explanation || ''"
+    :explanation-flash-when-available="step.explanationFlashWhenAvailable || false"
+    :confirm-flash-when-enabled="step.confirmFlashWhenEnabled || false"
+    :required-selections="step.requiredSelections || []"
     :process="step.process || null"
   />
 </template>
diff --git a/src/components/NumberInput.vue b/src/components/NumberInput.vue
index d93c450..bb3433d 100644
--- a/src/components/NumberInput.vue
+++ b/src/components/NumberInput.vue
@@ -14,17 +14,22 @@
         hide-details
         class="number-input__field"
       />
-      <v-btn
+      <flash-highlight
         v-if="showCalcButton"
-        class="number-input__calc-btn"
-        icon="mdi-calculator"
-        variant="tonal"
-        color="primary"
-        size="small"
-        :disabled="isCalcDisabled"
-        :title="calcButtonTitle"
-        @click="onCalcClick"
-      />
+        :enabled="needsCalcInteraction"
+        :flash-when-enabled="flashWhenEnabled"
+      >
+        <v-btn
+          class="number-input__calc-btn"
+          icon="mdi-calculator"
+          variant="tonal"
+          color="primary"
+          size="small"
+          :disabled="isCalcDisabled"
+          :title="calcButtonTitle"
+          @click="onCalcClick"
+        />
+      </flash-highlight>
     </div>
   </div>
 </template>
@@ -34,6 +39,7 @@
   import { useAppStore } from '@/stores/app'
   import { useMapStore } from '@/stores/map'
   import { resolveInputValue } from '@/lib/ogc-process/resolve-input'
+  import FlashHighlight from '@/components/FlashHighlight.vue'
 
   const appStore = useAppStore()
   const mapStore = useMapStore()
@@ -50,6 +56,7 @@
     requiresCalcCondition: { type: Boolean, default: false },
     calcConditionSource: { type: String, default: null },
     calcButtonTitle: { type: String, default: 'Calculate' },
+    flashWhenEnabled: { type: Boolean, default: false },
   })
 
   const emit = defineEmits(['step-ready', 'run-process'])
@@ -64,6 +71,7 @@
   })
 
   const value = ref(resolvedDefault.value)
+  const lastRunValue = ref(null)
 
   const calcConditionMet = computed(() => {
     if (!props.requiresCalcCondition) return true
@@ -80,6 +88,11 @@
     return invalidValue || !calcConditionMet.value
   })
 
+  const needsCalcInteraction = computed(() => {
+    if (!props.showCalcButton || isCalcDisabled.value) return false
+    return lastRunValue.value !== value.value
+  })
+
   watch(resolvedDefault, (newVal) => {
     if (newVal != null) {
       value.value = newVal
@@ -94,6 +107,7 @@
 
   function onCalcClick () {
     if (props.showCalcButton && !isCalcDisabled.value) {
+      lastRunValue.value = value.value
       emit('run-process', { value: value.value })
     }
   }
diff --git a/src/components/SelectionList.vue b/src/components/SelectionList.vue
index 7339be2..bdd04ad 100644
--- a/src/components/SelectionList.vue
+++ b/src/components/SelectionList.vue
@@ -1,16 +1,22 @@
 <template>
   <div class="selection-list pa-4">
-    <v-select
-      v-model="model"
-      :items="filteredOptions"
-      :label="label"
-      item-title="name"
-      item-value="id"
-      variant="outlined"
-      density="compact"
-      clearable
-      hide-details
-    />
+    <flash-highlight
+      :enabled="needsSelectionInteraction"
+      :flash-when-enabled="flashWhenEnabled"
+    >
+      <v-select
+        v-model="model"
+        :items="filteredOptions"
+        :label="label"
+        item-title="name"
+        item-value="id"
+        variant="outlined"
+        density="compact"
+        clearable
+        hide-details
+        :disabled="isDisabledByCondition"
+      />
+    </flash-highlight>
     <v-btn
       v-if="confirmSelection"
       class="mt-3"
@@ -18,7 +24,7 @@
       variant="tonal"
       block
       size="small"
-      :disabled="pending == null"
+      :disabled="isDisabledByCondition || pending == null"
       @click="confirm"
     >
       {{ confirmLabel }}
@@ -29,15 +35,18 @@
 <script setup>
   import { ref, watch, onMounted, computed } from 'vue'
   import { useAppStore } from '@/stores/app'
+  import FlashHighlight from '@/components/FlashHighlight.vue'
 
   const props = defineProps({
     label: { type: String, required: true },
     options: { type: Array, required: true },
     selectionKey: { type: String, default: null },
     conditionSource: { type: String, default: null },
+    disabledUntilCondition: { type: Boolean, default: false },
     /** When true, store + step-complete only after the confirm button (dropdown is pending until then). */
     confirmSelection: { type: Boolean, default: false },
     confirmLabel: { type: String, default: 'Confirm' },
+    flashWhenEnabled: { type: Boolean, default: false },
   })
 
   const emit = defineEmits(['step-complete'])
@@ -65,6 +74,23 @@
     return props.options.filter(option => !option.condition || option.condition === selectedId)
   })
 
+  const conditionSourceSelected = computed(() => {
+    if (!props.conditionSource) return true
+    const raw = appStore.selections[props.conditionSource]
+    const selectedId = raw != null && typeof raw === 'object' && 'id' in raw ? raw.id : raw
+    return selectedId != null
+  })
+
+  const isDisabledByCondition = computed(() => {
+    return props.disabledUntilCondition && !conditionSourceSelected.value
+  })
+
+  const isSelectable = computed(() => filteredOptions.value.length > 0)
+  const needsSelectionInteraction = computed(() => {
+    if (!isSelectable.value || isDisabledByCondition.value) return false
+    return props.confirmSelection ? pending.value == null : committed.value == null
+  })
+
   function selectionToStore (value) {
     if (!props.selectionKey || value == null) return
     const option = props.options.find(o => o.id === value)
diff --git a/src/components/SubMenu.vue b/src/components/SubMenu.vue
index 6163f37..4cb6a3f 100644
--- a/src/components/SubMenu.vue
+++ b/src/components/SubMenu.vue
@@ -34,23 +34,31 @@
       </div>
 
       <div class="sub-menu-drawer__footer">
-        <p
+        <flash-highlight
           v-if="props.explanation"
-          class="sub-menu-drawer__explanation text-body-2 text-medium-emphasis"
+          :enabled="isOpen && shouldPromptExplanation"
+          :flash-when-enabled="props.explanationFlashWhenAvailable"
         >
-          {{ props.explanation }}
-        </p>
-        <v-btn
-          class="sub-menu-drawer__confirm"
-          color="primary"
-          variant="tonal"
-          block
-          size="small"
-          :disabled="confirmButtonDisabled"
-          @click="onConfirmClick"
+          <p class="sub-menu-drawer__explanation text-body-2 text-medium-emphasis">
+            {{ props.explanation }}
+          </p>
+        </flash-highlight>
+        <flash-highlight
+          :enabled="isOpen && !confirmButtonDisabled"
+          :flash-when-enabled="props.confirmFlashWhenEnabled"
         >
-          Confirm
-        </v-btn>
+          <v-btn
+            class="sub-menu-drawer__confirm"
+            color="primary"
+            variant="tonal"
+            block
+            size="small"
+            :disabled="confirmButtonDisabled"
+            @click="onConfirmClick"
+          >
+            Confirm
+          </v-btn>
+        </flash-highlight>
       </div>
     </div>
   </v-navigation-drawer>
@@ -61,6 +69,7 @@
   import { useAppStore } from '@/stores/app'
   import { useMapStore } from '@/stores/map'
   import { executeProcessConfig } from '@/lib/ogc-process/execute-config'
+  import FlashHighlight from '@/components/FlashHighlight.vue'
 
   const props = defineProps({
     menuId: { type: String, required: true },
@@ -70,6 +79,10 @@
     requiresConfirmation: { type: Boolean, default: false },
     confirmationSource: { type: String, default: 'component' },
     explanation: { type: String, default: '' },
+    explanationFlashWhenAvailable: { type: Boolean, default: false },
+    confirmFlashWhenEnabled: { type: Boolean, default: false },
+    /** When set, footer Confirm stays disabled until each key has a value in appStore.selections. */
+    requiredSelections: { type: Array, default: () => [] },
     process: { type: Object, default: null },
   })
 
@@ -106,9 +119,25 @@
     return loadedComponents.value.filter(comp => comp.component)
   })
 
+  function isSelectionMissing (value) {
+    if (value == null) return true
+    if (typeof value === 'string') return value === ''
+    if (typeof value === 'object' && value !== null && 'id' in value) {
+      return value.id == null || value.id === ''
+    }
+    return false
+  }
+
+  const requiredSelectionsSatisfied = computed(() => {
+    const keys = props.requiredSelections
+    if (!Array.isArray(keys) || keys.length === 0) return true
+    return keys.every(key => !isSelectionMissing(store.selections[key]))
+  })
+
   /** For process-driven steps, footer Confirm must wait for a successful run (payload includes `result`). */
   const confirmButtonDisabled = computed(() => {
     if (!props.requiresConfirmation) return false
+    if (!requiredSelectionsSatisfied.value) return true
     const p = stepReadyPayload.value
     if (!p) return true
     if (props.confirmationSource === 'process' && props.process?.trigger === 'component') {
@@ -117,6 +146,14 @@
     return false
   })
 
+  const shouldPromptExplanation = computed(() => {
+    if (!props.explanation) return false
+    if (props.confirmationSource === 'mapClick') {
+      return stepReadyPayload.value == null
+    }
+    return true
+  })
+
   const isOpen = computed({
     get: () => store.activeMenu === props.menuId,
     set: (value) => {
@@ -148,9 +185,8 @@
 
   if (props.confirmationSource === 'mapClick') {
     watch([isOpen, () => mapStore.activeRegion], ([open, region]) => {
-      if (open && region) {
-        stepReadyPayload.value = { region }
-      }
+      if (!open) return
+      stepReadyPayload.value = region ? { region } : null
     })
   }
 
@@ -223,6 +259,7 @@
   }
 
   async function onConfirmClick () {
+    if (props.requiresConfirmation && !requiredSelectionsSatisfied.value) return
     if (props.requiresConfirmation && !stepReadyPayload.value) return
     const payload = stepReadyPayload.value || {}
     stepReadyPayload.value = null
diff --git a/src/config/workflow.json b/src/config/workflow.json
index cdade56..cc37b31 100644
--- a/src/config/workflow.json
+++ b/src/config/workflow.json
@@ -15,6 +15,7 @@
       "title": "Use Case",
       "drawerTitle": "Select your use case",
       "disabledOnContinue": true,
+      "confirmFlashWhenEnabled": true,
       "explanation": "Choose the use case that matches your analysis, then confirm to continue.",
       "requiresConfirmation": true,
       "confirmationSource": "component",
@@ -24,6 +25,7 @@
           "componentProps": {
             "label": "Use cases",
             "selectionKey": "userCaseSelection",
+            "flashWhenEnabled": true,
             "options": [
               {
                 "id": "administration",
@@ -49,6 +51,7 @@
       "title": "Region Selection",
       "drawerTitle": "Select a base map",
       "disabledOnContinue": true,
+      "confirmFlashWhenEnabled": true,
       "requiredSteps": [
         "userCaseSelection"
       ],
@@ -74,6 +77,7 @@
                 "active": true,
                 "clickable": true,
                 "propertiesBox": "region",
+                "flashWhenEnabled": true,
                 "condition": "administration"
               },
               {
@@ -95,6 +99,7 @@
       "icon": "mdi-city-variant-outline",
       "drawerTitle": "Calculate UOM",
       "disabledOnContinue": true,
+      "confirmFlashWhenEnabled": true,
       "requiredSteps": [
         "regionSelection"
       ],
@@ -140,6 +145,7 @@
           "componentProps": {
             "label": "Landscape archetype",
             "selectionKey": "uomArchetype",
+            "flashWhenEnabled": true,
             "options": [
               {
                 "id": "coastal",
@@ -168,6 +174,7 @@
             "defaultValueSource": "store:map.suggestedUom",
             "requiresCalcCondition": true,
             "calcConditionSource": "store:app.selections.uomArchetype",
+            "flashWhenEnabled": true,
             "showCalcButton": true
           }
         }
@@ -184,6 +191,10 @@
       "explanation": "Select KCS and hazard type, then confirm to run the UOM KCS calculation.",
       "requiresConfirmation": true,
       "confirmationSource": "component",
+      "requiredSelections": [
+        "hazardSelection",
+        "kcsSelection"
+      ],
       "wps": {
         "identifier": "lare_kcs",
         "trigger": "stepComplete",
@@ -223,6 +234,7 @@
           "componentProps": {
             "label": "Hazards",
             "selectionKey": "hazardSelection",
+            "flashWhenEnabled": true,
             "conditionSource": "uomArchetype",
             "options": [
               {
@@ -253,7 +265,9 @@
           "componentProps": {
             "label": "KCS",
             "selectionKey": "kcsSelection",
+            "flashWhenEnabled": true,
             "conditionSource": "hazardSelection",
+            "disabledUntilCondition": true,
             "options": [
               {
                 "id": "agriculture",

From bc21030257bb5c872fe45d16d1f87c46d9f6631a Mon Sep 17 00:00:00 2001
From: luisrodriguezgalvez
 <77997772+luisrodriguezgalvez@users.noreply.github.com>
Date: Fri, 1 May 2026 16:51:40 +0200
Subject: [PATCH 5/6] Update README.md

---
 README.md | 586 ++++++++++++++++++------------------------------------
 1 file changed, 189 insertions(+), 397 deletions(-)

diff --git a/README.md b/README.md
index fc3af4b..871cb17 100644
--- a/README.md
+++ b/README.md
@@ -1,507 +1,299 @@
 # LARE Viewer
 
-Landscape Archetype Classification and the Landscape Resilience Explorer (**LARE**) and is inteded to be an operational framework for spatial risk analysis and Nature-based Solutions planning.
-It is a modern web-based map viewer application built with Vue 3, Vuetify, and Mapbox GL. This application provides an interactive mapping interface for viewing and interacting with geographic data and map services. 
-The Viewer is seperated from the backend that provides interaction with spatial data served as OGC data service. The interaction is setup with PyWPS processes. For more information on backend, please check https://github.com/openearth/lare. 
+A **Vue 3** web application for **Landscape Archetype Regionalization (LARE)** workflows. It combines an **interactive Mapbox GL map** with a **step-by-step sidebar** so users can pick a use case, select a region, run analyses, and explore GeoServer layers.
 
+The app is **driven by configuration**: most behaviour (steps, layers, which process runs when) lives in JSON files rather than hard-coded UI logic. That makes it easier to adapt the same codebase to new workflows or regions.
 
-## Features
+---
 
-- 🗺️ **Interactive Map Viewing**: Powered by Mapbox GL for smooth, interactive map experiences
-- 🌐 **OGC Services Support**: Full support for OGC (Open Geospatial Consortium) services - layers on the map and background processes are all OGC services
-- 🎨 **Modern UI**: Built with Vuetify 3 for a beautiful, responsive user interface
-- ⚡ **Fast Development**: Leverages Vite for instant hot module replacement and fast builds
-- 🗃️ **State Management**: Uses Pinia for efficient state management
-- 🚦 **Routing**: Vue Router for seamless navigation
+## What you get (at a glance)
+
+| Piece | Role |
+|--------|------|
+| **`workflow.json`** | Defines menu steps, components per step, confirmations, and OGC API Process calls |
+| **`base-layers-config.json`** | Default map layers, legends, and styling |
+| **Pinia stores** (`app`, `map`) | UI state, selections, process results, dynamic WMS layers |
+| **`ogc-process`** | Builds JSON execute requests to your OGC API Processes server (e.g. pygeoapi) |
+| **Vue components** | `SubMenu`, `SelectionList`, `LayerList`, `NumberInput`, map, etc. |
+
+---
 
 ## Prerequisites
 
-Before you begin, ensure you have the following installed:
+- **Node.js** 18+ (20+ recommended) and **npm**
+- A **Mapbox access token** ([Mapbox account](https://account.mapbox.com/))
+- A running **OGC API Processes** backend that exposes the processes your `workflow.json` references (for example [LARE](https://github.com/DesirMED/LARE) with pygeoapi)
+- **GeoServer** (or compatible WMS) if you use the default layer URLs
 
-- **Node.js** (v18 or higher recommended)
-- **npm** package manager
-- **Mapbox Access Token** - Get one for free at [mapbox.com](https://account.mapbox.com/)
+---
 
-## Setup
+## Quick start
 
-### 1. Clone the repository
+### 1. Clone and install
 
 ```bash
-git clone <repository-url>
+git clone https://github.com/DesirMED/lare-viewer.git
 cd lare-viewer
+npm install
 ```
 
-### 2. Install dependencies
+### 2. Environment variables
 
-```bash
-npm install
-```
+Create a `.env` file in the project root (same folder as `package.json`). Vite only exposes variables that start with `VITE_`.
 
-### 3. Configure environment variables
+| Variable | Required | Description |
+|----------|----------|-------------|
+| `VITE_MAPBOX_TOKEN` | **Yes** | Mapbox public access token |
+| `VITE_OGC_API_URL` | Recommended | Base URL of the OGC API (no trailing slash), e.g. `http://localhost:5000` |
+| `VITE_WPS_BASE_URL` | Fallback | Used only if `VITE_OGC_API_URL` is not set; same semantics as the OGC API base URL |
+| `VITE_GEOSERVER_PUBLIC_BASE_URL` | Optional | **Browser-reachable** GeoServer base URL. Use this when the app runs in the browser but GeoServer is only reachable via a different host than in `base-layers-config.json` (e.g. Docker: config may use `http://geoserver:8080/geoserver`, while the browser needs `http://localhost:8080/geoserver`) |
 
-Create a `.env` file in the root directory and add your Mapbox access token:
+Example `.env`:
 
 ```env
-VITE_MAPBOX_TOKEN=your_mapbox_access_token_here
+VITE_MAPBOX_TOKEN=pk.ey...
+VITE_OGC_API_URL=http://localhost:5000
+# If GeoServer in JSON is internal-only, point the browser here:
+# VITE_GEOSERVER_PUBLIC_BASE_URL=http://localhost:8080/geoserver
 ```
 
-Replace `your_mapbox_access_token_here` with your actual Mapbox access token.
-
-> **Note**: If you don't have a `.env` file, create one. The application requires this environment variable to display maps.
-
-### 4. Verify installation
-
-After installation, your environment should be ready for development.
-
-## Running the Application
+### 3. Run the dev server
 
-### Development Mode
-
-Start the development server 
 ```bash
 npm run dev
 ```
 
-The development server will start and be accessible at [http://localhost:3000](http://localhost:3000) 
+Open the URL shown in the terminal (usually `http://localhost:5173`).
 
-The application will automatically reload when you make changes to the source files.
+### 4. Production build
 
-### Preview Production Build
+```bash
+npm run build
+```
 
-To preview the production build locally:
+Output is in `dist/`. Preview locally:
 
 ```bash
 npm run preview
 ```
 
-### Linting
-
-To lint and automatically fix code issues:
+### 5. Lint
 
 ```bash
 npm run lint
 ```
 
-## OGC Services Architecture
-
-The application is built with OGC (Open Geospatial Consortium) services as its foundation. The architecture follows OGC standards:
-
-- **Map Layers**: All layers displayed on the map are OGC services (WMS, WMTS, WFS, etc.)
-- **Background Processes**: All background processing operations utilize OGC Web Processing Service (WPS) standards
+---
 
-This architecture ensures interoperability with standard geospatial services and enables seamless integration with various OGC-compliant data sources and processing services.
+## How the app is structured
 
-## Deployment
+High-level flow:
 
-The application is served on Netlify. You can find everything on the [live site]().
+1. **`App.vue`** loads `workflow.json`. If `initialSetup.process` has `trigger: "onStart"`, it runs that process once (e.g. `lare-start`) and stores the result under `storeResultAs`.
+2. **`NavigationDrawer.vue`** renders one **`SubMenu`** per step from `workflow.json`.
+3. **`SubMenu.vue`** shows the step title, optional explanation, dynamic components (`SelectionList`, `LayerList`, `NumberInput`, …), and a **Continue** / **Confirm** flow depending on `requiresConfirmation` and `confirmationSource`.
+4. **`MapView.vue`** hosts the Mapbox map; the **map store** adds WMS raster/vector layers and tracks the clicked region for map-based steps.
+5. When a **`process`** block runs, **`executeProcessConfig`** (`src/lib/ogc-process/execute-config.js`) resolves inputs, POSTs to `/processes/{identifier}/execution?f=json`, then optionally saves results and applies **`outputActions`** (e.g. add a WMS layer).
 
-## Project Structure
+### Important directories
 
 ```
-lare-viewer/
-├── src/
-│   ├── components/     # Vue components
-│   ├── lib/           # Utility libraries and helpers
-│   ├── plugins/       # Vue plugins configuration
-│   ├── router/        # Vue Router configuration
-│   ├── stores/        # Pinia stores
-│   ├── styles/        # Global styles
-│   └── views/         # Page views
-├── public/            # Static assets
-└── package.json       # Project dependencies and scripts
+src/
+├── config/
+│   ├── workflow.json          # Steps, components, processes (main product config)
+│   └── base-layers-config.json
+├── components/                 # UI: drawer, submenus, lists, map, legend…
+├── stores/
+│   ├── app.js                 # Steps, selections, process results, menu state
+│   └── map.js                 # Map instance, layers, region selection, per-step click rules
+├── lib/
+│   └── ogc-process/           # Execute OGC API Processes from workflow config
+├── views/
+│   └── MapView.vue
+└── App.vue
 ```
 
-## Configuring `workflow.json`
+---
 
-The workflow and process requests are configurable from the JSON file at `src/config/workflow.json`.
+## Configuring a workflow (`workflow.json`)
 
-### Overall structure
+Think of **`workflow.json` as the product definition**: you can add steps, change labels, wire new processes, and toggle map layers without rewriting the shell of the app.
 
-```json
-{
-  "logo": "/desirmed_logo.png",
-  "steps": [
-    {
-      "id": "regionSelection",
-      "title": "Region Selection",
-      "drawerTitle": "Select a base map",
-      "icon": "mdi-map-marker-radius",
-      "requiredSteps": [],
-      "completionEvent": null,
-      "components": [ /* UI configuration */ ],
-      "process": { /* optional process configuration */ }
-    }
-  ]
-}
-```
+### Top level
 
-- **`logo`**: Path (relative to `public/`) to the logo shown at the top of the main navigation drawer.
-- **`steps`**: Ordered list of workflow steps. Each step:
-  - **`id`**: Unique identifier used internally (e.g. for dependencies and process results).
-  - **`title`**: Label shown in the main navigation drawer.
-  - **`drawerTitle`**: Title shown at the top of the step drawer.
-  - **`icon`**: Vuetify Material Design Icon name (e.g. `mdi-map-marker-radius`).
-  - **`requiredSteps`** (optional): Array of step `id`s that must be completed before this step is enabled.
-  - **`completionEvent`** (optional): How the step is marked complete. `null` (default) means completion is driven by child components; `"auto"` means the step completes as soon as its drawer opens.
-  - **`components`**: List of UI components rendered inside the step drawer.
-  - **`process`** (optional): Configuration for an OGC API process execution associated with this step (see below).
+| Field | Purpose |
+|--------|---------|
+| `logo` | Path under `public/` for the header logo |
+| `initialSetup` | Optional; often used to run a bootstrap process on load |
+| `steps` | Ordered list of wizard steps shown in the navigation drawer |
 
-### Components inside a step
+### Minimal skeleton (empty steps)
 
-Each entry in `components` has the shape:
+Use this as a **starting file** when you are wiring a new deployment from scratch. It is valid JSON and loads in the app; you then add entries under `steps` (and optional `initialSetup.process`) as needed.
 
 ```json
 {
-  "component": "LayerList",
-  "componentProps": {
-    "layers": [
-      {
-        "id": "layer-id",
-        "name": "Human readable name",
-        "active": true,
-        "clickable": true,
-        "propertiesBox": "region"
-      }
-    ]
-  }
+  "logo": "/desirmed_logo.png",
+  "initialSetup": {},
+  "steps": []
 }
 ```
 
-- **`component`**: Name of a Vue component in `src/components` (without `.vue`), e.g. `LayerList`, `SelectionList`, `NumberInput`.
-- **`componentProps`**: Arbitrary props passed straight through to the component.
-
-Different components expect different props:
+- **`steps: []`** — The side drawer shows no wizard items, and **`App.vue` does not auto-open a submenu** (there is no first step). That is fine for smoke-testing the shell; for a real workflow, add at least one step object.
+- **`initialSetup: {}`** — Optional. Omit it entirely if you prefer, or replace it with `restartButton` / `process` when you are ready (see the next section).
 
-- **`LayerList`**:
-  - **`layers`**: Array of layer configs with:
-    - `id`: Map layer identifier.
-    - `name`: Display name in the UI.
-    - `active`: Whether the layer is initially visible.
-    - `clickable`: Whether clicking the map interacts with this layer.
-    - `propertiesBox` (optional): Name of a properties box configuration (used for showing feature attributes).
-  - **`conditionSource`** (optional): Name of a selection key to use when conditionally enabling layers (see “Use case selection and `selectionKey`” below).
-- **`SelectionList`**:
-  - **`label`**: Label shown above the list.
-  - **`options`**: Array of `{ "id": "value", "name": "Label" }` entries.
-  - **`selectionKey`** (optional): Name under which the selected value is stored in the app store (`app.selections[selectionKey]`). If omitted, the value is only passed via the `step-complete` payload.
-- **`NumberInput`**:
-  - Typical props include `label`, `suffix`, `min`, `max`, `step`, `defaultValue`, and `defaultValueSource` (see below under process input sources).
+### `initialSetup`
 
-### Use case selection and `selectionKey`
-
-In more advanced workflows, you can introduce an explicit “use case” selection step and use its stored value to drive which layers are shown later.
+Used in **`App.vue`** when `initialSetup.process.trigger` is `"onStart"`. Typical pattern: call **`lare-start`** (or your equivalent), store the JSON response (e.g. session id) for later process inputs.
 
 Example:
 
 ```json
-{
-  "id": "userCaseSelection",
-  "title": "Use Case",
-  "drawerTitle": "Select your use case",
-  "components": [
-    {
-      "component": "SelectionList",
-      "componentProps": {
-        "label": "Use cases",
-        "selectionKey": "userCaseSelection",
-        "options": [
-          { "id": "administration", "name": "Administration" },
-          { "id": "hydrobasin", "name": "Hydro basin" }
-        ]
-      }
-    }
-  ]
-}
-```
-
-With this configuration:
-
-- **`SelectionList`**:
-  - Stores the chosen option under `app.selections.userCaseSelection` using `selectionKey`.
-  - Emits `step-complete` with a payload `{ "value": "<selected id>" }`, which can be used by process inputs via `source: "payload:value"`.
-
-You can then make a later step conditionally show layers depending on this value by combining `conditionSource` and per-layer `condition` values:
-
-```json
-{
-  "id": "regionSelection",
-  "title": "Region Selection",
-  "requiredSteps": ["userCaseSelection"],
-  "components": [
-    {
-      "component": "LayerList",
-      "componentProps": {
-        "conditionSource": "userCaseSelection",
-        "layers": [
-          {
-            "id": "region:nuts_2021_level_3",
-            "name": "NUTS 3 Regions",
-            "active": true,
-            "clickable": true,
-            "propertiesBox": "region",
-            "condition": "administration"
-          },
-          {
-            "id": "topography:hybas_eu_lev12_v1c",
-            "name": "Hydro Basins",
-            "active": true,
-            "clickable": true,
-            "condition": "hydrobasin"
-          }
-        ]
-      }
-    }
-  ]
+"initialSetup": {
+  "restartButton": true,
+  "process": {
+    "identifier": "lare-start",
+    "trigger": "onStart",
+    "inputs": [],
+    "storeResultAs": "initialSetup"
+  }
 }
 ```
 
-- **`conditionSource`** tells `LayerList` to read from `app.selections.userCaseSelection`.
-- Each layer’s **`condition`** is compared to that value. Only layers matching the current selection are considered active/visible in the workflow.
+- **`restartButton`**: when `true`, the drawer can show a control to reset workflow/map state and return to the first step (see `NavigationDrawer.vue`).
 
-This pattern lets you implement a “step 0” use case selection (e.g. NUTS vs Hydrobasins) entirely through configuration, without changing application code.
+### Each step
 
-### Wiring steps together with `requiredSteps`
+Common fields:
 
-Steps can depend on the completion of earlier steps. For example:
+| Field | Meaning |
+|--------|---------|
+| `id` | Stable id (used for routing, store keys, `requiredSteps`) |
+| `title` | Short label in the drawer |
+| `drawerTitle` | Longer heading inside the open submenu |
+| `icon` | Optional Vuetify MDI icon name |
+| `explanation` | Help text above the controls |
+| `requiredSteps` | Step ids that must be completed before this step is available |
+| `disabledOnContinue` | If true, user must use **Confirm** (not only **Continue**) to advance when confirmation is required |
+| `confirmFlashWhenEnabled` | Subtle highlight on the confirm area when the step is ready to confirm |
+| `explanationFlashWhenAvailable` | When true, the explanation text can pulse to draw attention while it is relevant |
+| `requiresConfirmation` | If true, advancing waits for explicit confirmation |
+| `confirmationSource` | How readiness is determined: see below |
+| `requiredSelections` | For `component` confirmation: **all** listed selection keys must have a value before confirm is enabled |
+| `completionEvent` | If `"auto"`, the step marks itself complete when its submenu opens (see `SubMenu.vue`) |
+| `components` | List of `{ "component": "...", "componentProps": { ... } }` |
+| `process` | Optional OGC process; **when** it runs is controlled by `process.trigger` |
 
-```json
-{
-  "id": "hazard",
-  "title": "Hazard mitigation selection",
-  "requiredSteps": ["regionSelection"],
-  "components": [ /* ... */ ]
-}
-```
+### `confirmationSource`
 
-The `hazard` step becomes clickable only after the `regionSelection` step has been completed.
+| Value | Behaviour |
+|--------|-----------|
+| `"component"` | Child components emit completion; **`requiredSelections`** can require multiple dropdowns (e.g. archetype + numeric input) before confirm |
+| `"mapClick"` | User must click a feature on the map; region info is stored and confirm enables when the click target is valid |
+| `"process"` | A process runs (e.g. calculator); confirm may depend on process success |
 
-### Process configuration per step
+### OGC process block (`process`)
 
-Each step can optionally define a `process` object describing an OGC API process execution to run when the step is completed or when the user interacts with the map.
-
-Example from `workflow.json`:
+Runs against **`VITE_OGC_API_URL`** (or **`VITE_WPS_BASE_URL`**). Example aligned with the default UOM step:
 
 ```json
-{
-  "id": "regionSelection",
-  "title": "Region Selection",
-  "drawerTitle": "Select a base map",
-  "icon": "mdi-map-marker-radius",
-  "components": [
-    {
-      "component": "LayerList",
-      "componentProps": {
-        "layers": [
-          {
-            "id": "landuse:U2018_CLC2018_V2020_20u1_cog",
-            "name": "European Land Use Cover",
-            "active": true,
-            "clickable": false
-          },
-          {
-            "id": "region:nuts_2021_level_3",
-            "name": "NUTS 3 Regions",
-            "active": true,
-            "clickable": true,
-            "propertiesBox": "region"
-          }
-        ]
-      }
-    }
+"process": {
+  "identifier": "lare-uom",
+  "trigger": "component",
+  "inputs": [
+    { "id": "session_id", "source": "store:app.processResults.initialSetup.session_id" },
+    { "id": "uom_size", "source": "payload:value" },
+    { "id": "layer_name", "source": "store:app.selections.userCaseSelection.layerNameForProcess" },
+    { "id": "id", "source": "store:map.activeRegionId" },
+    { "id": "archetype", "source": "store:app.selections.uomArchetype" }
   ],
-  "process": {
-    "identifier": "lare-hazard",
-    "trigger": "mapClick",
-    "inputs": [
-      {
-        "id": "name",
-        "type": "LiteralData",
-        "source": "store:map.activeRegion.properties.nuts_name"
-      }
-    ],
-    "storeResultAs": "regionSelection"
-  }
-}
-```
-
-The process configuration supports the following fields:
-
-- **`identifier`**: The pygeoapi process identifier as exposed by the backend (e.g. `"lare-start"`, `"lare-hazard"`, `"lare-uom"`). This value is used to call `/processes/{identifier}/execution?f=json`.
-- **`trigger`**: When to execute the process call for this step:
-  - `"onStart"`: Execute during app startup (used by `initialSetup.process`).
-  - `"stepOpen"`: Execute when the step drawer is opened.
-  - `"component"`: Execute when a child component emits `run-process` (e.g. calculator button in `NumberInput`).
-  - `"mapClick"`: Execute whenever the user selects a region on the map (using `mapStore.activeRegion`) while this step is open.
-  - `"stepComplete"`: Execute when the step signals completion (for example when the user picks an option or enters a number and the component emits a `step-complete` event).
-- **`inputs`**: Array of process input definitions:
-  - `id`: Input identifier expected by the backend process.
-  - `source`: Where the value comes from, using the pattern `<sourceType>:<path>`.
-- **`storeResultAs`** (optional): Key under which the full process response is stored in the app store (`app.processResults[storeResultAs]`).
-- **`outputActions`** (optional): Array of post-processing instructions for the response (see below).
-
-### Template for a new process step
-
-Use this as a copy/paste starting point when adding a new step that calls an OGC API process:
-
-```json
-{
-  "id": "myStep",
-  "title": "My Step",
-  "drawerTitle": "Run process",
-  "requiredSteps": ["regionSelection"],
-  "requiresConfirmation": true,
-  "confirmationSource": "process",
-  "process": {
-    "identifier": "lare-my-process",
-    "trigger": "component",
-    "inputs": [
-      { "id": "sessionid", "source": "store:app.processResults.initialSetup.sessionid" },
-      { "id": "regionId", "source": "store:map.activeRegionId" },
-      { "id": "valueFromUi", "source": "payload:value" },
-      { "id": "constant", "source": "static:my-value" }
-    ],
-    "storeResultAs": "myStepResult",
-    "outputActions": [
-      { "action": "addLayer", "path": "response" }
-    ]
-  },
-  "components": [
+  "storeResultAs": "uom",
+  "outputActions": [
     {
-      "component": "NumberInput",
-      "componentProps": {
-        "label": "Input value",
-        "showCalcButton": true
-      }
+      "action": "addLayer",
+      "path": "response"
     }
   ]
 }
 ```
 
-The process execution requests are sent to the API root URL configured via the environment variable:
+- **`identifier`**: process id on the server (pygeoapi `/processes/{id}`).
+- **`trigger`** — where execution is hooked (see `SubMenu.vue` and `App.vue`):
 
-```env
-VITE_OGC_API_URL=http://localhost:5000
-```
+  | Trigger | When it runs |
+  |--------|----------------|
+  | `onStart` | Once when the app mounts (`App.vue`), and again after **Restart** if configured |
+  | `component` | When a child fires `run-process` (e.g. **Calculate** on `NumberInput`). For `confirmationSource: "process"`, **Confirm** stays disabled until this run succeeds and returns a `result`. |
+  | `stepOpen` | When the step’s submenu opens |
+  | `mapClick` | When `mapStore.activeRegion` is set while the step is open |
+  | `stepComplete` | When the step completes without a process/map/process confirm path (payload from children) |
 
-### Process input `source` syntax
+- **`inputs`**: each `source` is resolved by `resolve-input.js`:
+  - `store:app...` / `store:map...` — Pinia store paths
+  - `payload:...` — payload from the child `step-complete` / calculator (e.g. `value`, `archetype`)
+  - `processResult:...` — nested under `appStore.processResults`
+  - `static:value` — literal string after the first `:`
+- **`storeResultAs`**: saves the parsed execute response on the app store for later steps.
+- **`outputActions`**: handled in `handle-output.js`. Supported `action` values include **`storeValue`**, **`addLayer`** (reads layer entries from the response; expects objects with `layer` and `url`), and **`removeLayer`**.
 
-The `source` field describes where to read the value for a given process input. Supported forms:
+Process IDs and input names must match your **backend** (see [LARE](https://github.com/DesirMED/LARE)).
 
-- **`store:<storeName>.<path>`**:
-  - Reads from a Pinia store by name, e.g. `"store:map.activeRegion.properties.nuts_name"`.
-  - `storeName` is the key used in the process context (`app` or `map`).
-- **`payload:<path>`**:
-  - Reads from the payload passed by the component that completes the step.
-  - Example: in the `hazard` step:
-    ```json
-    { "id": "hazard", "source": "payload:value" }
-    ```
-- **`processResult:<path>`**:
-  - Reads from previously stored process results (`app.processResults`), allowing chaining between steps.
-  - Example: in the `uom` step:
-    ```json
-    "defaultValueSource": "processResult:regionSelection.suggested_uom"
-    ```
-- **`static:<value>`**:
-  - Use a literal constant value.
+### Components you can reference in `workflow.json`
 
-### Storing and reusing process results
+| Component name | Typical use |
+|----------------|-------------|
+| `SelectionList` | Dropdown(s) with optional map layers per option; supports `condition`, `flashWhenEnabled`, `disabledUntilCondition` |
+| `LayerList` | Toggle WMS layers; `conditionSource` can show different layers per use case; `flashWhenEnabled` on a layer ties into feature properties hint |
+| `NumberInput` | Numeric field; can gate confirm until valid |
+| `ActiveFeatureProperties` | Usually embedded via `LayerList` / map context to show clicked feature attributes |
 
-When `storeResultAs` is set, the full parsed process response is stored under:
+Behaviour is implemented in the matching `.vue` files under `src/components/`. Steps reference components by **file name without `.vue`**; `SubMenu` loads them with `import.meta.glob('@/components/*.vue')`, so new wizard blocks are usually **new JSON + optional new component**, not router changes.
 
-- `app.processResults[storeResultAs]`
+---
 
-You can then reference this data in later steps via `source: "processResult:..."` or via component props like `defaultValueSource` (for `NumberInput`).
+## Map and GeoServer layers (`base-layers-config.json`)
 
-Example:
+Defines **default layers** (URLs, types, opacity, legends). Workflow `LayerList` entries reference **layer ids** that should exist in this config (or match how your store builds layer names).
 
-```json
-{
-  "id": "uom",
-  "title": "Calculate UOM",
-  "requiredSteps": ["hazard"],
-  "process": {
-    "identifier": "lare-uom",
-    "trigger": "stepComplete",
-    "inputs": [
-      { "id": "sessionid", "source": "store:app.processResults.initialSetup.sessionid" },
-      { "id": "uomsize", "source": "payload:value" },
-      { "id": "layername", "source": "store:app.selections.userCaseSelection.layerNameForProcess" },
-      { "id": "id", "source": "store:map.activeRegionId" }
-    ],
-    "storeResultAs": "uom"
-  },
-  "components": [
-    {
-      "component": "NumberInput",
-      "componentProps": {
-        "label": "Hexagon size (in m²)",
-        "suffix": "m²",
-        "min": 100,
-        "max": 50000000,
-        "step": 100000,
-        "defaultValue": 1000,
-        "defaultValueSource": "processResult:regionSelection.suggested_uom"
-      }
-    }
-  ]
-}
-```
+If the browser cannot reach the same hostnames as the backend, set **`VITE_GEOSERVER_PUBLIC_BASE_URL`** so WMS requests use a public base URL while keeping internal URLs in JSON for server-side tools.
 
-### Post-processing with `outputActions`
+---
 
-For more advanced cases, you can define `outputActions` inside the `process` block to automatically store parts of the response or to add dynamic layers to the map.
+## Backend integration (OGC API Processes)
 
-Supported actions:
+The client sends **JSON** execute requests (not XML WPS). Ensure your server exposes processes compatible with the **`identifier`** and **`inputs`** in `workflow.json`.
 
-- **`storeValue`**: Store a (sub-)value into `app.processResults` under a nested key.
-- **`addLayer`**: Add one or more dynamic layers to the map (via `mapStore.addDynamicLayer`).
+- Default request path pattern: `{baseUrl}/processes/{identifier}/execution?f=json`
+- Implementation: `src/lib/ogc-process/index.js` and `execute-config.js`
 
-Example:
+---
 
-```json
-{
-  "process": {
-    "identifier": "lare_example",
-    "trigger": "stepComplete",
-    "inputs": [ /* ... */ ],
-    "outputActions": [
-      {
-        "action": "storeValue",
-        "path": "response.statistics",
-        "storeAs": "example.statistics"
-      },
-      {
-        "action": "addLayer",
-        "path": "response"
-      }
-    ]
-  }
-}
-```
+## Deployment notes
+
+- Set **`VITE_*`** variables in your hosting environment at **build time** (they are baked into the Vite bundle).
+- Use **`VITE_GEOSERVER_PUBLIC_BASE_URL`** (or HTTPS GeoServer URLs in config) so end users’ browsers can load WMS tiles.
+- Serve the SPA with fallback to `index.html` for client-side routes (`/map`, etc.).
+
+---
 
-- **`path`**:
-  - Dot-notated path into the process response object.
-  - If omitted or set to `"response"`, the entire response is used.
-  - If it starts with `"response."`, that prefix is ignored (so `"response.layers"` and `"layers"` are equivalent).
-- **`storeAs`** (for `storeValue`):
-  - Dot-notated path where the value will be stored under `app.processResults`, e.g. `"example.statistics"`.
-- **`layerConfig`** (optional, for `addLayer`):
-  - Extra fields merged into each dynamic layer configuration (e.g. default opacity, visibility flags).
+## Troubleshooting
 
-The structure expected by `addLayer` is:
+| Issue | Things to check |
+|--------|------------------|
+| Map is blank | `VITE_MAPBOX_TOKEN`; browser console for Mapbox errors |
+| Processes fail immediately | `VITE_OGC_API_URL` / server reachable from **your machine**; process id spelling; CORS on the API |
+| Layers do not load | GeoServer URL reachable from the **browser**; `VITE_GEOSERVER_PUBLIC_BASE_URL`; layer workspace/name matches GeoServer |
+| Confirm stays disabled | `requiredSelections`, `confirmationSource`, and whether a prior step stored `processResult` / map region as expected |
 
-- Either an array under the given `path`, or an object with a `contents` array.
-- Each entry in `contents` (or the array itself) should contain:
-  - `layer`: Layer identifier.
-  - `url`: WMS/WFS/WMS-T endpoint for the layer.
-  - `name` (optional): Human-readable name.
+---
 
-This matches the output format produced by the backend processes and is what the viewer uses to add layers dynamically.
+## Contributing
 
+Issues and pull requests are welcome. Run **`npm run lint`** before submitting changes.
 
-## License
+---
 
-MIT
+## Acknowledgments
 
-Copyright (c) 2025
+- [Vue.js](https://vuejs.org/), [Vite](https://vitejs.dev/), [Vuetify](https://vuetifyjs.com/), [Mapbox GL JS](https://docs.mapbox.com/mapbox-gl-js/)
+- [LARE](https://github.com/DesirMED/LARE) — backend / pygeoapi processes

From c0e0701ee98ed97984805760cfe06034e4b9f8bc Mon Sep 17 00:00:00 2001
From: luisrodriguezgalvez
 <77997772+luisrodriguezgalvez@users.noreply.github.com>
Date: Wed, 6 May 2026 12:57:39 +0200
Subject: [PATCH 6/6] Update README.md

---
 README.md | 16 ++++++++++++++--
 1 file changed, 14 insertions(+), 2 deletions(-)

diff --git a/README.md b/README.md
index 871cb17..f64bd23 100644
--- a/README.md
+++ b/README.md
@@ -6,6 +6,17 @@ The app is **driven by configuration**: most behaviour (steps, layers, which pro
 
 ---
 
+## Features
+
+- 🗺️ **Interactive Map Viewing**: Powered by Mapbox GL for smooth, interactive map experiences
+- 🌐 **OGC Services Support**: Full support for OGC (Open Geospatial Consortium) services - layers on the map and background processes are all OGC services
+- 🎨 **Modern UI**: Built with Vuetify 3 for a beautiful, responsive user interface
+- ⚡ **Fast Development**: Leverages Vite for instant hot module replacement and fast builds
+- 🗃️ **State Management**: Uses Pinia for efficient state management
+- 🚦 **Routing**: Vue Router for seamless navigation
+
+---
+
 ## What you get (at a glance)
 
 | Piece | Role |
@@ -23,7 +34,7 @@ The app is **driven by configuration**: most behaviour (steps, layers, which pro
 - **Node.js** 18+ (20+ recommended) and **npm**
 - A **Mapbox access token** ([Mapbox account](https://account.mapbox.com/))
 - A running **OGC API Processes** backend that exposes the processes your `workflow.json` references (for example [LARE](https://github.com/DesirMED/LARE) with pygeoapi)
-- **GeoServer** (or compatible WMS) if you use the default layer URLs
+- **GeoServer** (or compatible OGC Services) if you use the default layer URLs
 
 ---
 
@@ -63,7 +74,7 @@ VITE_OGC_API_URL=http://localhost:5000
 npm run dev
 ```
 
-Open the URL shown in the terminal (usually `http://localhost:5173`).
+Open the URL shown in the terminal (usually `http://localhost:3000`).
 
 ### 4. Production build
 
@@ -296,4 +307,5 @@ Issues and pull requests are welcome. Run **`npm run lint`** before submitting c
 ## Acknowledgments
 
 - [Vue.js](https://vuejs.org/), [Vite](https://vitejs.dev/), [Vuetify](https://vuetifyjs.com/), [Mapbox GL JS](https://docs.mapbox.com/mapbox-gl-js/)
+- [Studio Meta](https://github.com/studiometa) for [`@studiometa/vue-mapbox-gl`](https://github.com/studiometa/vue-mapbox-gl), used for Vue 3 + Mapbox GL integration
 - [LARE](https://github.com/DesirMED/LARE) — backend / pygeoapi processes