@geode/opengeodeweb-front 10.2.1 → 10.3.0

package/.github/workflows/manual_release.yml

@@ -0,0 +1,11 @@
+name: Manual release
+
+on:
+  workflow_dispatch:
+
+jobs:
+  release:
+    uses: Geode-solutions/actions/.github/workflows/trigger-release.yml@master
+    with:
+      branch: next
+    secrets: inherit

package/app/components/Step.vue

@@ -56,7 +56,7 @@
         color="transparent"
         class="d-flex flex-column justify-center ps-2"
       >
-        <v-text
+        <p
           tag="h3"
           class="text-subtitle-1 font-weight-bold mb-0 transition-swing"
           :class="
@@ -66,7 +66,7 @@
           "
         >
           {{ steps[step_index].step_title }}
-        </v-text>
+        </p>
 
         <v-sheet
           v-if="sortedChips.length && current_step_index >= step_index"

package/app/components/Viewer/EdgedCurve/SpecificEdgesOptions.vue

@@ -18,48 +18,88 @@
 
   const visibility = computed({
     get: () => dataStyleStore.meshEdgesVisibility(id.value),
-    set: (newValue) => {
-      dataStyleStore.setMeshEdgesVisibility(id.value, newValue)
+    set: async (newValue) => {
+      await dataStyleStore.setMeshEdgesVisibility(id.value, newValue)
       hybridViewerStore.remoteRender()
     },
   })
   const size = computed({
     get: () => dataStyleStore.meshEdgesWidth(id.value),
-    set: (newValue) => {
-      dataStyleStore.setMeshEdgesWidth(id.value, newValue)
+    set: async (newValue) => {
+      await dataStyleStore.setMeshEdgesWidth(id.value, newValue)
       hybridViewerStore.remoteRender()
     },
   })
   const coloring_style_key = computed({
     get: () => dataStyleStore.meshEdgesActiveColoring(id.value),
-    set: (newValue) => {
-      dataStyleStore.setMeshEdgesActiveColoring(id.value, newValue)
+    set: async (newValue) => {
+      await dataStyleStore.setMeshEdgesActiveColoring(id.value, newValue)
       hybridViewerStore.remoteRender()
     },
   })
   const color = computed({
     get: () => dataStyleStore.meshEdgesColor(id.value),
-    set: (newValue) => {
-      dataStyleStore.setMeshEdgesColor(id.value, newValue)
+    set: async (newValue) => {
+      await dataStyleStore.setMeshEdgesColor(id.value, newValue)
       hybridViewerStore.remoteRender()
     },
   })
-  const vertex_attribute = computed({
-    get: () => dataStyleStore.meshEdgesVertexAttribute(id.value),
-    set: (newValue) => {
-      dataStyleStore.setMeshEdgesVertexAttribute(id.value, newValue)
+  const vertex_attribute_name = computed({
+    get: () => dataStyleStore.meshEdgesVertexAttributeName(id.value),
+    set: async (newValue) => {
+      await dataStyleStore.setMeshEdgesVertexAttributeName(id.value, newValue)
+      await dataStyleStore.updateMeshEdgesVertexAttribute(id.value)
       hybridViewerStore.remoteRender()
     },
   })
-  const edge_attribute = computed({
-    get: () => dataStyleStore.meshEdgesEdgeAttribute(id.value),
-    set: (newValue) => {
-      dataStyleStore.setMeshEdgesEdgeAttribute(id.value, newValue)
+  const vertex_attribute_range = computed({
+    get: () => dataStyleStore.meshEdgesVertexAttributeRange(id.value),
+    set: async (newValue) => {
+      await dataStyleStore.setMeshEdgesVertexAttributeRange(
+        id.value,
+        newValue[0],
+        newValue[1],
+      )
+      await dataStyleStore.updateMeshEdgesVertexAttribute(id.value)
+      hybridViewerStore.remoteRender()
+    },
+  })
+  const vertex_attribute_color_map = computed({
+    get: () => dataStyleStore.meshEdgesVertexAttributeColorMap(id.value),
+    set: async (newValue) => {
+      await dataStyleStore.setMeshEdgesVertexAttributeColorMap(
+        id.value,
+        newValue,
+      )
+      hybridViewerStore.remoteRender()
+    },
+  })
+  const edge_attribute_name = computed({
+    get: () => dataStyleStore.meshEdgesEdgeAttributeName(id.value),
+    set: async (newValue) => {
+      await dataStyleStore.setMeshEdgesEdgeAttributeName(id.value, newValue)
+      hybridViewerStore.remoteRender()
+    },
+  })
+  const edge_attribute_range = computed({
+    get: () => dataStyleStore.meshEdgesEdgeAttributeRange(id.value),
+    set: async (newValue) => {
+      await dataStyleStore.setMeshEdgesEdgeAttributeRange(
+        id.value,
+        newValue[0],
+        newValue[1],
+      )
+      hybridViewerStore.remoteRender()
+    },
+  })
+  const edge_attribute_color_map = computed({
+    get: () => dataStyleStore.meshEdgesEdgeAttributeColorMap(id.value),
+    set: async (newValue) => {
+      await dataStyleStore.setMeshEdgesEdgeAttributeColorMap(id.value, newValue)
       hybridViewerStore.remoteRender()
     },
   })
 </script>
-
 <template>
   <ViewerContextMenuItem
     :itemProps="props.itemProps"
@@ -92,8 +132,12 @@
               :id="id"
               v-model:coloring_style_key="coloring_style_key"
               v-model:color="color"
-              v-model:vertex_attribute="vertex_attribute"
-              v-model:edge_attribute="edge_attribute"
+              v-model:vertex_attribute_name="vertex_attribute_name"
+              v-model:vertex_attribute_range="vertex_attribute_range"
+              v-model:vertex_attribute_color_map="vertex_attribute_color_map"
+              v-model:edge_attribute_name="edge_attribute_name"
+              v-model:edge_attribute_range="edge_attribute_range"
+              v-model:edge_attribute_color_map="edge_attribute_color_map"
             />
           </v-col>
         </v-row>

package/app/components/Viewer/Generic/Mesh/CellsOptions.vue

@@ -19,43 +19,86 @@
 
   const visibility = computed({
     get: () => dataStyleStore.meshCellsVisibility(id.value),
-    set: (newValue) => {
-      dataStyleStore.setMeshCellsVisibility(id.value, newValue)
+    set: async (newValue) => {
+      await dataStyleStore.setMeshCellsVisibility(id.value, newValue)
       hybridViewerStore.remoteRender()
     },
   })
   const coloring_style_key = computed({
     get: () => dataStyleStore.meshCellsActiveColoring(id.value),
-    set: (newValue) => {
-      dataStyleStore.setMeshCellsActiveColoring(id.value, newValue)
+    set: async (newValue) => {
+      await dataStyleStore.setMeshCellsActiveColoring(id.value, newValue)
       hybridViewerStore.remoteRender()
     },
   })
   const color = computed({
     get: () => dataStyleStore.meshCellsColor(id.value),
-    set: (newValue) => {
-      dataStyleStore.setMeshCellsColor(id.value, newValue)
+    set: async (newValue) => {
+      await dataStyleStore.setMeshCellsColor(id.value, newValue)
       hybridViewerStore.remoteRender()
     },
   })
   const textures = computed({
     get: () => dataStyleStore.meshCellsTextures(id.value),
-    set: (newValue) => {
-      dataStyleStore.setMeshCellsTextures(id.value, newValue)
+    set: async (newValue) => {
+      await dataStyleStore.setMeshCellsTextures(id.value, newValue)
       hybridViewerStore.remoteRender()
     },
   })
-  const vertex_attribute = computed({
-    get: () => dataStyleStore.meshCellsVertexAttribute(id.value),
-    set: (newValue) => {
-      dataStyleStore.setMeshCellsVertexAttribute(id.value, newValue)
+  const vertex_attribute_name = computed({
+    get: () => dataStyleStore.meshCellsVertexAttributeName(id.value),
+    set: async (newValue) => {
+      await dataStyleStore.setMeshCellsVertexAttributeName(id.value, newValue)
+      await dataStyleStore.updateMeshCellsVertexAttribute(id.value)
       hybridViewerStore.remoteRender()
     },
   })
-  const cell_attribute = computed({
-    get: () => dataStyleStore.meshCellsCellAttribute(id.value),
-    set: (newValue) => {
-      dataStyleStore.setMeshCellsCellAttribute(id.value, newValue)
+  const vertex_attribute_range = computed({
+    get: () => dataStyleStore.meshCellsVertexAttributeRange(id.value),
+    set: async (newValue) => {
+      await dataStyleStore.setMeshCellsVertexAttributeRange(
+        id.value,
+        newValue[0],
+        newValue[1],
+      )
+      await dataStyleStore.updateMeshCellsVertexAttribute(id.value)
+      hybridViewerStore.remoteRender()
+    },
+  })
+  const vertex_attribute_color_map = computed({
+    get: () => dataStyleStore.meshCellsVertexAttributeColorMap(id.value),
+    set: async (newValue) => {
+      await dataStyleStore.setMeshCellsVertexAttributeColorMap(
+        id.value,
+        newValue,
+      )
+      hybridViewerStore.remoteRender()
+    },
+  })
+  const cell_attribute_name = computed({
+    get: () => dataStyleStore.meshCellsCellAttributeName(id.value),
+    set: async (newValue) => {
+      await dataStyleStore.setMeshCellsCellAttributeName(id.value, newValue)
+      await dataStyleStore.updateMeshCellsCellAttribute(id.value)
+      hybridViewerStore.remoteRender()
+    },
+  })
+  const cell_attribute_range = computed({
+    get: () => dataStyleStore.meshCellsCellAttributeRange(id.value),
+    set: async (newValue) => {
+      await dataStyleStore.setMeshCellsCellAttributeRange(
+        id.value,
+        newValue[0],
+        newValue[1],
+      )
+      await dataStyleStore.updateMeshCellsCellAttribute(id.value)
+      hybridViewerStore.remoteRender()
+    },
+  })
+  const cell_attribute_color_map = computed({
+    get: () => dataStyleStore.meshCellsCellAttributeColorMap(id.value),
+    set: async (newValue) => {
+      await dataStyleStore.setMeshCellsCellAttributeColorMap(id.value, newValue)
       hybridViewerStore.remoteRender()
     },
   })
@@ -75,8 +118,12 @@
           v-model:coloring_style_key="coloring_style_key"
           v-model:color="color"
           v-model:textures="textures"
-          v-model:vertex_attribute="vertex_attribute"
-          v-model:cell_attribute="cell_attribute"
+          v-model:vertex_attribute_name="vertex_attribute_name"
+          v-model:vertex_attribute_range="vertex_attribute_range"
+          v-model:vertex_attribute_color_map="vertex_attribute_color_map"
+          v-model:cell_attribute_name="cell_attribute_name"
+          v-model:cell_attribute_range="cell_attribute_range"
+          v-model:cell_attribute_color_map="cell_attribute_color_map"
         />
       </template>
     </template>

package/app/components/Viewer/Generic/Mesh/EdgesOptions.vue

@@ -18,36 +18,29 @@
 
   const visibility = computed({
     get: () => dataStyleStore.meshEdgesVisibility(id.value),
-    set: (newValue) => {
-      dataStyleStore.setMeshEdgesVisibility(id.value, newValue)
+    set: async (newValue) => {
+      await dataStyleStore.setMeshEdgesVisibility(id.value, newValue)
       hybridViewerStore.remoteRender()
     },
   })
   const size = computed({
     get: () => dataStyleStore.meshEdgesWidth(id.value),
-    set: (newValue) => {
-      dataStyleStore.setMeshEdgesWidth(id.value, newValue)
+    set: async (newValue) => {
+      await dataStyleStore.setMeshEdgesWidth(id.value, newValue)
       hybridViewerStore.remoteRender()
     },
   })
   const coloring_style_key = computed({
     get: () => dataStyleStore.meshEdgesActiveColoring(id.value),
-    set: (newValue) => {
-      dataStyleStore.setMeshEdgesActiveColoring(id.value, newValue)
+    set: async (newValue) => {
+      await dataStyleStore.setMeshEdgesActiveColoring(id.value, newValue)
       hybridViewerStore.remoteRender()
     },
   })
   const color = computed({
     get: () => dataStyleStore.meshEdgesColor(id.value),
-    set: (newValue) => {
-      dataStyleStore.setMeshEdgesColor(id.value, newValue)
-      hybridViewerStore.remoteRender()
-    },
-  })
-  const vertex_attribute = computed({
-    get: () => dataStyleStore.meshEdgesVertexAttribute(id.value),
-    set: (newValue) => {
-      dataStyleStore.setMeshEdgesVertexAttribute(id.value, newValue)
+    set: async (newValue) => {
+      await dataStyleStore.setMeshEdgesColor(id.value, newValue)
       hybridViewerStore.remoteRender()
     },
   })

package/app/components/Viewer/Generic/Mesh/PointsOptions.vue

@@ -18,29 +18,29 @@
 
   const visibility = computed({
     get: () => dataStyleStore.meshPointsVisibility(id.value),
-    set: (newValue) => {
-      dataStyleStore.setMeshPointsVisibility(id.value, newValue)
+    set: async (newValue) => {
+      await dataStyleStore.setMeshPointsVisibility(id.value, newValue)
       hybridViewerStore.remoteRender()
     },
   })
   const size = computed({
     get: () => dataStyleStore.meshPointsSize(id.value),
-    set: (newValue) => {
-      dataStyleStore.setMeshPointsSize(id.value, newValue)
+    set: async (newValue) => {
+      await dataStyleStore.setMeshPointsSize(id.value, newValue)
       hybridViewerStore.remoteRender()
     },
   })
   const coloring_style_key = computed({
     get: () => dataStyleStore.meshPointsActiveColoring(id.value),
-    set: (newValue) => {
-      dataStyleStore.setMeshPointsActiveColoring(id.value, newValue)
+    set: async (newValue) => {
+      await dataStyleStore.setMeshPointsActiveColoring(id.value, newValue)
       hybridViewerStore.remoteRender()
     },
   })
   const color = computed({
     get: () => dataStyleStore.meshPointsColor(id.value),
-    set: (newValue) => {
-      dataStyleStore.setMeshPointsColor(id.value, newValue)
+    set: async (newValue) => {
+      await dataStyleStore.setMeshPointsColor(id.value, newValue)
       hybridViewerStore.remoteRender()
     },
   })
@@ -78,7 +78,6 @@
               :id="id"
               v-model:coloring_style_key="coloring_style_key"
               v-model:color="color"
-              v-model:vertex_attribute="vertex_attribute"
             />
           </v-col>
         </v-row>

package/app/components/Viewer/Generic/Mesh/PolygonsOptions.vue

@@ -20,29 +20,29 @@
 
   const visibility = computed({
     get: () => dataStyleStore.meshPolygonsVisibility(id.value),
-    set: (newValue) => {
-      dataStyleStore.setMeshPolygonsVisibility(id.value, newValue)
+    set: async (newValue) => {
+      await dataStyleStore.setMeshPolygonsVisibility(id.value, newValue)
       hybridViewerStore.remoteRender()
     },
   })
   const coloring_style_key = computed({
     get: () => dataStyleStore.meshPolygonsActiveColoring(id.value),
-    set: (newValue) => {
-      dataStyleStore.setMeshPolygonsActiveColoring(id.value, newValue)
+    set: async (newValue) => {
+      await dataStyleStore.setMeshPolygonsActiveColoring(id.value, newValue)
       hybridViewerStore.remoteRender()
     },
   })
   const color = computed({
     get: () => dataStyleStore.meshPolygonsColor(id.value),
-    set: (newValue) => {
-      dataStyleStore.setMeshPolygonsColor(id.value, newValue)
+    set: async (newValue) => {
+      await dataStyleStore.setMeshPolygonsColor(id.value, newValue)
       hybridViewerStore.remoteRender()
     },
   })
   const textures = computed({
     get: () => dataStyleStore.meshPolygonsTextures(id.value),
-    set: (newValue) => {
-      dataStyleStore.setMeshPolygonsTextures(id.value, newValue)
+    set: async (newValue) => {
+      await dataStyleStore.setMeshPolygonsTextures(id.value, newValue)
       hybridViewerStore.remoteRender()
     },
   })

package/app/components/Viewer/Generic/Mesh/PolyhedraOptions.vue

@@ -19,22 +19,22 @@
 
   const visibility = computed({
     get: () => dataStyleStore.meshPolyhedraVisibility(id.value),
-    set: (newValue) => {
-      dataStyleStore.setMeshPolyhedraVisibility(id.value, newValue)
+    set: async (newValue) => {
+      await dataStyleStore.setMeshPolyhedraVisibility(id.value, newValue)
       hybridViewerStore.remoteRender()
     },
   })
   const coloring_style_key = computed({
     get: () => dataStyleStore.meshPolyhedraActiveColoring(id.value),
-    set: (newValue) => {
-      dataStyleStore.setMeshPolyhedraActiveColoring(id.value, newValue)
+    set: async (newValue) => {
+      await dataStyleStore.setMeshPolyhedraActiveColoring(id.value, newValue)
       hybridViewerStore.remoteRender()
     },
   })
   const color = computed({
     get: () => dataStyleStore.meshPolyhedraColor(id.value),
-    set: (newValue) => {
-      dataStyleStore.setMeshPolyhedraColor(id.value, newValue)
+    set: async (newValue) => {
+      await dataStyleStore.setMeshPolyhedraColor(id.value, newValue)
       hybridViewerStore.remoteRender()
     },
   })

package/app/components/Viewer/Generic/Model/EdgesOptions.vue

@@ -17,8 +17,8 @@
 
   const visibility = computed({
     get: () => dataStyleStore.modelEdgesVisibility(id.value),
-    set: (newValue) => {
-      dataStyleStore.setModelEdgesVisibility(id.value, newValue)
+    set: async (newValue) => {
+      await dataStyleStore.setModelEdgesVisibility(id.value, newValue)
       hybridViewerStore.remoteRender()
     },
   })

package/app/components/Viewer/Generic/Model/PointsOptions.vue

@@ -17,15 +17,15 @@
 
   const visibility = computed({
     get: () => dataStyleStore.modelPointsVisibility(id.value),
-    set: (newValue) => {
-      dataStyleStore.setModelPointsVisibility(id.value, newValue)
+    set: async (newValue) => {
+      await dataStyleStore.setModelPointsVisibility(id.value, newValue)
       hybridViewerStore.remoteRender()
     },
   })
   const size = computed({
     get: () => dataStyleStore.modelPointsSize(id.value),
-    set: (newValue) => {
-      dataStyleStore.setModelPointsSize(id.value, newValue)
+    set: async (newValue) => {
+      await dataStyleStore.setModelPointsSize(id.value, newValue)
       hybridViewerStore.remoteRender()
     },
   })

package/app/components/Viewer/Options/AttributeColorBar.vue

@@ -0,0 +1,58 @@
+<script setup>
+  import ColorMapPicker from "./ColorMapPicker.vue"
+
+  const emit = defineEmits(["reset"])
+
+  const minimum = defineModel("minimum", { type: Number })
+  const maximum = defineModel("maximum", { type: Number })
+  const colorMap = defineModel("colorMap", { type: String })
+
+  function reset() {
+    emit("reset")
+  }
+</script>
+
+<template>
+  <div class="attribute-colorbar mt-3">
+    <ColorMapPicker v-model="colorMap" :min="minimum" :max="maximum" />
+    <v-row dense align="center" class="mt-2">
+      <v-col cols="5">
+        <v-text-field
+          :model-value="minimum"
+          @update:model-value="(value) => (minimum = Number(value))"
+          label="Min"
+          type="number"
+          density="compact"
+          hide-details
+          variant="outlined"
+        />
+      </v-col>
+      <v-col cols="2" class="d-flex justify-center">
+        <v-btn
+          icon="mdi-arrow-left-right"
+          size="x-small"
+          variant="text"
+          @click="reset"
+          v-tooltip="'Reset range'"
+        />
+      </v-col>
+      <v-col cols="5">
+        <v-text-field
+          :model-value="maximum"
+          @update:model-value="(value) => (maximum = Number(value))"
+          label="Max"
+          type="number"
+          density="compact"
+          hide-details
+          variant="outlined"
+        />
+      </v-col>
+    </v-row>
+  </div>
+</template>
+
+<style scoped>
+  .attribute-colorbar {
+    width: 100%;
+  }
+</style>

package/app/components/Viewer/Options/CellAttributeSelector.vue

@@ -1,26 +1,36 @@
 <script setup>
   import back_schemas from "@geode/opengeodeweb-back/opengeodeweb_back_schemas.json"
   import { useGeodeStore } from "@ogw_front/stores/geode"
+  import ViewerOptionsAttributeColorBar from "@ogw_front/components/Viewer/Options/AttributeColorBar"
+
+  const geodeStore = useGeodeStore()
+
+  const cell_attribute_name = defineModel("cell_attribute_name", {
+    type: String,
+  })
+  const cell_attribute_range = defineModel("cell_attribute_range", {
+    type: Array,
+  })
+  const cell_attribute_color_map = defineModel("cell_attribute_color_map", {
+    type: String,
+  })
+  const cell_attributes = ref([])
 
   const props = defineProps({
     id: { type: String, required: true },
   })
 
-  const model = defineModel()
-  const cell_attribute_name = ref("")
-  const cell_attribute_names = ref([])
-  const cell_attribute = reactive({ name: cell_attribute_name.value })
-  const geodeStore = useGeodeStore()
-
-  onMounted(() => {
-    if (model.value != null) {
-      cell_attribute_name.value = model.value.name
-    }
+  const rangeMin = computed({
+    get: () => cell_attribute_range.value[0],
+    set: (val) => {
+      cell_attribute_range.value = [val, cell_attribute_range.value[1]]
+    },
   })
-
-  watch(cell_attribute_name, (value) => {
-    cell_attribute.name = value
-    model.value = cell_attribute
+  const rangeMax = computed({
+    get: () => cell_attribute_range.value[1],
+    set: (val) => {
+      cell_attribute_range.value = [cell_attribute_range.value[0], val]
+    },
   })
 
   onMounted(() => {
@@ -30,23 +40,45 @@
   function getCellAttributes() {
     geodeStore.request(
       back_schemas.opengeodeweb_back.cell_attribute_names,
-      {
-        id: props.id,
-      },
+      { id: props.id },
       {
         response_function: (response) => {
-          cell_attribute_names.value = response.cell_attribute_names
+          cell_attributes.value = response.attributes
         },
       },
     )
   }
+
+  const currentAttribute = computed(() => {
+    return cell_attributes.value.find(
+      (attr) => attr.attribute_name === cell_attribute_name.value,
+    )
+  })
+
+  function resetRange() {
+    if (currentAttribute.value) {
+      cell_attribute_range.value = [
+        currentAttribute.value.min_value,
+        currentAttribute.value.max_value,
+      ]
+    }
+  }
 </script>
 
 <template>
   <v-select
     v-model="cell_attribute_name"
-    :items="cell_attribute_names"
+    :items="cell_attributes.map((attribute) => attribute.attribute_name)"
+    item-title="attribute_name"
+    item-value="attribute_name"
     label="Select an attribute"
     density="compact"
   />
+  <ViewerOptionsAttributeColorBar
+    v-if="cell_attribute_name"
+    v-model:minimum="rangeMin"
+    v-model:maximum="rangeMax"
+    v-model:colorMap="cell_attribute_color_map"
+    @reset="resetRange"
+  />
 </template>