Add menu for running secondary workflows

package.json

@@ -22,6 +22,9 @@
     "@deltares/fews-ssd-webcomponent": "^1.0.1",
     "@deltares/fews-web-oc-charts": "^3.0.2",
     "@deltares/fews-wms-requests": "^1.0.0",
+    "@jsonforms/core": "^3.1.0",
+    "@jsonforms/vue": "^3.1.0",
+    "@jsonforms/vue-vuetify": "^3.1.0-preview.0",
     "@turf/bbox": "^7.0.0-alpha.114",
     "@turf/boolean-intersects": "^7.0.0-alpha.114",
     "@turf/circle": "^7.0.0-alpha.114",
@@ -38,6 +41,7 @@
     "oidc-client-ts": "^2.4.0",
     "pinia": "^2.1.7",
     "pinia-plugin-persistedstate": "^3.2.1",
+    "terra-draw": "^0.0.1-alpha.58",
     "typescript-json-serializer": "^6.0.1",
     "vue": "^3.4.21",
     "vue-maplibre-gl": "^3.1.3",

src/assets/JsonFormsConfig.json

@@ -0,0 +1,11 @@
+{
+  "vuetify": {
+    "v-text-field": {
+      "density": "compact",
+      "variant": "outlined"
+    },
+    "v-container": {
+      "class": "pa-0"
+    }
+  }
+}

src/components/map/DrawPolygonControl.vue

@@ -0,0 +1,85 @@
+<template></template>
+
+<script setup lang="ts">
+import { onBeforeUnmount, watch, onBeforeMount } from 'vue'
+import {
+  GeoJSONStoreFeatures,
+  TerraDraw,
+  TerraDrawMapLibreGLAdapter,
+  TerraDrawRectangleMode,
+} from 'terra-draw'
+import { useMap } from 'vue-maplibre-gl'
+import type { FeatureId } from 'node_modules/terra-draw/dist/store/store'
+
+interface Props {
+  modelValue?: GeoJSONStoreFeatures[]
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  modelValue: () => [],
+})
+
+const emit = defineEmits(['update:modelValue'])
+const { map } = useMap()
+if (!map) throw new Error('Map is not available to draw polygon')
+
+const mapLibreAdapter = new TerraDrawMapLibreGLAdapter({ map })
+const rectangleMode = new TerraDrawRectangleMode({
+  styles: {
+    fillColor: '#c2bebe',
+    outlineColor: '#626262',
+    outlineWidth: 2,
+    fillOpacity: 0.4,
+  },
+})
+
+const draw = new TerraDraw({
+  adapter: mapLibreAdapter,
+  modes: [rectangleMode],
+})
+
+draw.on('finish', (featureId) => {
+  const features = draw.getSnapshot()
+  const newFeature = features.find((feature) => feature.id === featureId)
+  emit('update:modelValue', [newFeature])
+})
+
+draw.on('change', (featureIds, type) => {
+  if (type == 'create') {
+    if (!featureIds.length) return
+    const newFeature = featureIds[0]
+
+    removeAllFeaturesExcept(newFeature)
+  }
+})
+
+function removeAllFeaturesExcept(featureId: FeatureId) {
+  const features = draw.getSnapshot()
+  const toRemove = features
+    .filter((feature) => feature.id !== featureId)
+    .map((feature) => feature.id)
+
+  draw.removeFeatures(toRemove as FeatureId[])
+}
+
+onBeforeMount(() => {
+  draw.start()
+  draw.setMode('rectangle')
+})
+
+onBeforeUnmount(() => {
+  draw.setMode('static')
+  draw.stop()
+})
+
+watch(
+  () => props.modelValue,
+  () => {
+    if (props.modelValue.length > 0) {
+      draw.clear()
+      draw.addFeatures(props.modelValue)
+    }
+  },
+  { deep: true },
+)
+</script>

src/components/spatialdisplay/SpatialDisplay.vue

@@ -13,6 +13,7 @@
         v-model:elevation="elevation"
         v-model:current-time="currentTime"
         @coordinate-click="onCoordinateClick"
+        :secondaryWorkflows="secondaryWorkflows"
       ></SpatialDisplayComponent>
     </div>
     <div v-if="filter" class="child-container">
@@ -37,6 +38,7 @@ import { findParentRoute } from '@/router'
 import { onMounted } from 'vue'
 import { useWmsLayerCapabilities } from '@/services/useWms'
 import {
+  SecondaryWorkflowGroupItem,
   filterActionsFilter,
   timeSeriesGridActionsFilter,
 } from '@deltares/fews-pi-requests'
@@ -52,6 +54,7 @@ interface Props {
   filterIds?: string[]
   latitude?: string
   longitude?: string
+  secondaryWorkflows?: SecondaryWorkflowGroupItem[]
 }
 
 const props = withDefaults(defineProps<Props>(), {