@geode/opengeodeweb-front 10.2.1 → 10.3.0

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

@@ -1,26 +1,37 @@
 <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 polygon_attribute_name = defineModel("polygon_attribute_name", {
+    type: String,
+  })
+  const polygon_attribute_range = defineModel("polygon_attribute_range", {
+    type: Array,
+  })
+  const polygon_attribute_color_map = defineModel(
+    "polygon_attribute_color_map",
+    { type: String },
+  )
+  const polygon_attributes = ref([])
 
   const props = defineProps({
     id: { type: String, required: true },
   })
 
-  const model = defineModel()
-  const polygon_attribute_name = ref("")
-  const polygon_attribute_names = ref([])
-  const polygon_attribute = reactive({ name: polygon_attribute_name.value })
-  const geodeStore = useGeodeStore()
-
-  onMounted(() => {
-    if (model.value != null) {
-      polygon_attribute_name.value = model.value.name
-    }
+  const rangeMin = computed({
+    get: () => polygon_attribute_range.value[0],
+    set: (val) => {
+      polygon_attribute_range.value = [val, polygon_attribute_range.value[1]]
+    },
   })
-
-  watch(polygon_attribute_name, (value) => {
-    polygon_attribute.name = value
-    model.value = polygon_attribute
+  const rangeMax = computed({
+    get: () => polygon_attribute_range.value[1],
+    set: (val) => {
+      polygon_attribute_range.value = [polygon_attribute_range.value[0], val]
+    },
   })
 
   onMounted(() => {
@@ -30,23 +41,45 @@
   function getPolygonAttributes() {
     geodeStore.request(
       back_schemas.opengeodeweb_back.polygon_attribute_names,
-      {
-        id: props.id,
-      },
+      { id: props.id },
       {
         response_function: (response) => {
-          polygon_attribute_names.value = response.polygon_attribute_names
+          polygon_attributes.value = response.attributes
         },
       },
     )
   }
+
+  const currentAttribute = computed(() => {
+    return polygon_attributes.value.find(
+      (attr) => attr.attribute_name === polygon_attribute_name.value,
+    )
+  })
+
+  function resetRange() {
+    if (currentAttribute.value) {
+      polygon_attribute_range.value = [
+        currentAttribute.value.min_value,
+        currentAttribute.value.max_value,
+      ]
+    }
+  }
 </script>
 
 <template>
   <v-select
     v-model="polygon_attribute_name"
-    :items="polygon_attribute_names"
+    :items="polygon_attributes.map((attribute) => attribute.attribute_name)"
+    item-title="attribute_name"
+    item-value="attribute_name"
     label="Select an attribute"
     density="compact"
   />
+  <ViewerOptionsAttributeColorBar
+    v-if="polygon_attribute_name"
+    v-model:minimum="rangeMin"
+    v-model:maximum="rangeMax"
+    v-model:colorMap="polygon_attribute_color_map"
+    @reset="resetRange"
+  />
 </template>

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

@@ -1,54 +1,91 @@
 <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 model = defineModel()
-
-  const polyhedron_attribute_name = ref("")
+  const geodeStore = useGeodeStore()
 
-  onMounted(() => {
-    if (model.value != null) {
-      polyhedron_attribute_name.value = model.value.name
-    }
+  const polyhedron_attribute_name = defineModel("polyhedron_attribute_name", {
+    type: String,
   })
-  const polyhedron_attribute = reactive({
-    name: polyhedron_attribute_name.value,
-  })
-
-  watch(polyhedron_attribute_name, (value) => {
-    polyhedron_attribute.name = value
-    model.value = polyhedron_attribute
+  const polyhedron_attribute_range = defineModel("polyhedron_attribute_range", {
+    type: Array,
   })
+  const polyhedron_attribute_color_map = defineModel(
+    "polyhedron_attribute_color_map",
+    { type: String },
+  )
+  const polyhedron_attributes = ref([])
 
   const props = defineProps({
     id: { type: String, required: true },
   })
 
-  const polyhedron_attribute_names = ref([])
-  const geodeStore = useGeodeStore()
+  const rangeMin = computed({
+    get: () => polyhedron_attribute_range.value[0],
+    set: (val) => {
+      polyhedron_attribute_range.value = [
+        val,
+        polyhedron_attribute_range.value[1],
+      ]
+    },
+  })
+  const rangeMax = computed({
+    get: () => polyhedron_attribute_range.value[1],
+    set: (val) => {
+      polyhedron_attribute_range.value = [
+        polyhedron_attribute_range.value[0],
+        val,
+      ]
+    },
+  })
 
   onMounted(() => {
-    getVertexAttributes()
+    getPolyhedronAttributes()
   })
 
-  function getVertexAttributes() {
+  function getPolyhedronAttributes() {
     geodeStore.request(
       back_schemas.opengeodeweb_back.polyhedron_attribute_names,
       { id: props.id },
       {
         response_function: (response) => {
-          polyhedron_attribute_names.value = response.polyhedron_attribute_names
+          polyhedron_attributes.value = response.attributes
         },
       },
     )
   }
+
+  const currentAttribute = computed(() => {
+    return polyhedron_attributes.value.find(
+      (attr) => attr.attribute_name === polyhedron_attribute_name.value,
+    )
+  })
+
+  function resetRange() {
+    if (currentAttribute.value) {
+      polyhedron_attribute_range.value = [
+        currentAttribute.value.min_value,
+        currentAttribute.value.max_value,
+      ]
+    }
+  }
 </script>
 
 <template>
   <v-select
     v-model="polyhedron_attribute_name"
-    :items="polyhedron_attribute_names"
+    :items="polyhedron_attributes.map((attribute) => attribute.attribute_name)"
+    item-title="attribute_name"
+    item-value="attribute_name"
     label="Select an attribute"
     density="compact"
   />
+  <ViewerOptionsAttributeColorBar
+    v-if="polyhedron_attribute_name"
+    v-model:minimum="rangeMin"
+    v-model:maximum="rangeMax"
+    v-model:colorMap="polyhedron_attribute_color_map"
+    @reset="resetRange"
+  />
 </template>

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

@@ -1,28 +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 model = defineModel()
+  const vertex_attribute_name = defineModel("vertex_attribute_name", {
+    type: String,
+  })
+  const vertex_attribute_range = defineModel("vertex_attribute_range", {
+    type: Array,
+  })
+  const vertex_attribute_color_map = defineModel("vertex_attribute_color_map", {
+    type: String,
+  })
+  const vertex_attributes = ref([])
 
   const props = defineProps({
     id: { type: String, required: true },
   })
 
-  const vertex_attribute_name = ref("")
-  const vertex_attribute_names = ref([])
-
-  onMounted(() => {
-    if (model.value != null) {
-      vertex_attribute_name.value = model.value.name
-    }
+  const rangeMin = computed({
+    get: () => vertex_attribute_range.value[0],
+    set: (val) => {
+      vertex_attribute_range.value = [val, vertex_attribute_range.value[1]]
+    },
   })
-  const vertex_attribute = reactive({ name: vertex_attribute_name.value })
-
-  watch(vertex_attribute_name, (value) => {
-    vertex_attribute.name = value
-    model.value = vertex_attribute
+  const rangeMax = computed({
+    get: () => vertex_attribute_range.value[1],
+    set: (val) => {
+      vertex_attribute_range.value = [vertex_attribute_range.value[0], val]
+    },
   })
 
   onMounted(() => {
@@ -35,18 +43,42 @@
       { id: props.id },
       {
         response_function: (response) => {
-          vertex_attribute_names.value = response.vertex_attribute_names
+          vertex_attributes.value = response.attributes
         },
       },
     )
   }
+
+  const currentAttribute = computed(() => {
+    return vertex_attributes.value.find(
+      (attr) => attr.attribute_name === vertex_attribute_name.value,
+    )
+  })
+
+  function resetRange() {
+    if (currentAttribute.value) {
+      vertex_attribute_range.value = [
+        currentAttribute.value.min_value,
+        currentAttribute.value.max_value,
+      ]
+    }
+  }
 </script>
 
 <template>
   <v-select
     v-model="vertex_attribute_name"
-    :items="vertex_attribute_names"
+    :items="vertex_attributes.map((attribute) => attribute.attribute_name)"
+    item-title="attribute_name"
+    item-value="attribute_name"
     label="Select an attribute"
     density="compact"
   />
+  <ViewerOptionsAttributeColorBar
+    v-if="vertex_attribute_name"
+    v-model:minimum="rangeMin"
+    v-model:maximum="rangeMax"
+    v-model:colorMap="vertex_attribute_color_map"
+    @reset="resetRange"
+  />
 </template>

package/app/components/Viewer/PointSet/SpecificPointsOptions.vue

@@ -18,41 +18,63 @@
 
   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()
     },
   })
-  const vertex_attribute = computed({
-    get: () => dataStyleStore.meshPointsVertexAttribute(id.value),
-    set: (newValue) => {
-      dataStyleStore.setMeshPointsVertexAttribute(id.value, newValue)
+  const vertex_attribute_name = computed({
+    get: () => dataStyleStore.meshPointsVertexAttributeName(id.value),
+    set: async (newValue) => {
+      await dataStyleStore.setMeshPointsVertexAttributeName(id.value, newValue)
+      await dataStyleStore.updateMeshPointsVertexAttribute(id.value)
+      hybridViewerStore.remoteRender()
+    },
+  })
+  const vertex_attribute_range = computed({
+    get: () => dataStyleStore.meshPointsVertexAttributeRange(id.value),
+    set: async (newValue) => {
+      await dataStyleStore.setMeshPointsVertexAttributeRange(
+        id.value,
+        newValue[0],
+        newValue[1],
+      )
+      await dataStyleStore.updateMeshPointsVertexAttribute(id.value)
+      hybridViewerStore.remoteRender()
+    },
+  })
+  const vertex_attribute_color_map = computed({
+    get: () => dataStyleStore.meshPointsVertexAttributeColorMap(id.value),
+    set: async (newValue) => {
+      await dataStyleStore.setMeshPointsVertexAttributeColorMap(
+        id.value,
+        newValue,
+      )
       hybridViewerStore.remoteRender()
     },
   })
 </script>
-
 <template>
   <ViewerContextMenuItem
     :itemProps="props.itemProps"
@@ -85,7 +107,9 @@
               :id="id"
               v-model:coloring_style_key="coloring_style_key"
               v-model:color="color"
-              v-model:vertex_attribute="vertex_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-col>
         </v-row>

package/app/components/Viewer/PolygonalSurface/SpecificPolygonsOptions.vue

@@ -19,43 +19,95 @@
 
   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()
     },
   })
-  const vertex_attribute = computed({
-    get: () => dataStyleStore.meshPolygonsVertexAttribute(id.value),
-    set: (newValue) => {
-      dataStyleStore.setMeshPolygonsVertexAttribute(id.value, newValue)
+  const vertex_attribute_name = computed({
+    get: () => dataStyleStore.meshPolygonsVertexAttributeName(id.value),
+    set: async (newValue) => {
+      await dataStyleStore.setMeshPolygonsVertexAttributeName(
+        id.value,
+        newValue,
+      )
+      await dataStyleStore.updateMeshPolygonsVertexAttribute(id.value)
       hybridViewerStore.remoteRender()
     },
   })
-  const polygon_attribute = computed({
-    get: () => dataStyleStore.meshPolygonsPolygonAttribute(id.value),
-    set: (newValue) => {
-      dataStyleStore.setMeshPolygonsPolygonAttribute(id.value, newValue)
+  const vertex_attribute_range = computed({
+    get: () => dataStyleStore.meshPolygonsVertexAttributeRange(id.value),
+    set: async (newValue) => {
+      await dataStyleStore.setMeshPolygonsVertexAttributeRange(
+        id.value,
+        newValue[0],
+        newValue[1],
+      )
+      await dataStyleStore.updateMeshPolygonsVertexAttribute(id.value)
+      hybridViewerStore.remoteRender()
+    },
+  })
+  const vertex_attribute_color_map = computed({
+    get: () => dataStyleStore.meshPolygonsVertexAttributeColorMap(id.value),
+    set: async (newValue) => {
+      await dataStyleStore.setMeshPolygonsVertexAttributeColorMap(
+        id.value,
+        newValue,
+      )
+      hybridViewerStore.remoteRender()
+    },
+  })
+  const polygon_attribute_name = computed({
+    get: () => dataStyleStore.meshPolygonsPolygonAttributeName(id.value),
+    set: async (newValue) => {
+      await dataStyleStore.setMeshPolygonsPolygonAttributeName(
+        id.value,
+        newValue,
+      )
+      await dataStyleStore.updateMeshPolygonsPolygonAttribute(id.value)
+      hybridViewerStore.remoteRender()
+    },
+  })
+  const polygon_attribute_range = computed({
+    get: () => dataStyleStore.meshPolygonsPolygonAttributeRange(id.value),
+    set: async (newValue) => {
+      await dataStyleStore.setMeshPolygonsPolygonAttributeRange(
+        id.value,
+        newValue[0],
+        newValue[1],
+      )
+      await dataStyleStore.updateMeshPolygonsPolygonAttribute(id.value)
+      hybridViewerStore.remoteRender()
+    },
+  })
+  const polygon_attribute_color_map = computed({
+    get: () => dataStyleStore.meshPolygonsPolygonAttributeColorMap(id.value),
+    set: async (newValue) => {
+      await dataStyleStore.setMeshPolygonsPolygonAttributeColorMap(
+        id.value,
+        newValue,
+      )
       hybridViewerStore.remoteRender()
     },
   })
@@ -75,8 +127,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:polygon_attribute="polygon_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:polygon_attribute_name="polygon_attribute_name"
+          v-model:polygon_attribute_range="polygon_attribute_range"
+          v-model:polygon_attribute_color_map="polygon_attribute_color_map"
         />
       </template>
     </template>

package/app/components/Viewer/Solid/SpecificPolyhedraOptions.vue

@@ -19,41 +19,93 @@
 
   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()
     },
   })
-  const vertex_attribute = computed({
-    get: () => dataStyleStore.meshPolyhedraVertexAttribute(id.value),
-    set: (newValue) => {
-      dataStyleStore.setMeshPolyhedraVertexAttribute(id.value, newValue)
+  const vertex_attribute_name = computed({
+    get: () => dataStyleStore.meshPolyhedraVertexAttributeName(id.value),
+    set: async (newValue) => {
+      await dataStyleStore.setMeshPolyhedraVertexAttributeName(
+        id.value,
+        newValue,
+      )
+      await dataStyleStore.updateMeshPolyhedraVertexAttribute(id.value)
       hybridViewerStore.remoteRender()
     },
   })
-  const polyhedron_attribute = computed({
-    get: () => dataStyleStore.meshPolyhedraPolyhedronAttribute(id.value),
-    set: (newValue) => {
-      dataStyleStore.setMeshPolyhedraPolyhedronAttribute(id.value, newValue)
+  const vertex_attribute_range = computed({
+    get: () => dataStyleStore.meshPolyhedraVertexAttributeRange(id.value),
+    set: async (newValue) => {
+      await dataStyleStore.setMeshPolyhedraVertexAttributeRange(
+        id.value,
+        newValue[0],
+        newValue[1],
+      )
+      await dataStyleStore.updateMeshPolyhedraVertexAttribute(id.value)
+      hybridViewerStore.remoteRender()
+    },
+  })
+  const vertex_attribute_color_map = computed({
+    get: () => dataStyleStore.meshPolyhedraVertexAttributeColorMap(id.value),
+    set: async (newValue) => {
+      await dataStyleStore.setMeshPolyhedraVertexAttributeColorMap(
+        id.value,
+        newValue,
+      )
+      hybridViewerStore.remoteRender()
+    },
+  })
+  const polyhedron_attribute_name = computed({
+    get: () => dataStyleStore.meshPolyhedraPolyhedronAttributeName(id.value),
+    set: async (newValue) => {
+      await dataStyleStore.setMeshPolyhedraPolyhedronAttributeName(
+        id.value,
+        newValue,
+      )
+      await dataStyleStore.updateMeshPolyhedraPolyhedronAttribute(id.value)
+      hybridViewerStore.remoteRender()
+    },
+  })
+  const polyhedron_attribute_range = computed({
+    get: () => dataStyleStore.meshPolyhedraPolyhedronAttributeRange(id.value),
+    set: async (newValue) => {
+      await dataStyleStore.setMeshPolyhedraPolyhedronAttributeRange(
+        id.value,
+        newValue[0],
+        newValue[1],
+      )
+      await dataStyleStore.updateMeshPolyhedraPolyhedronAttribute(id.value)
+      hybridViewerStore.remoteRender()
+    },
+  })
+  const polyhedron_attribute_color_map = computed({
+    get: () =>
+      dataStyleStore.meshPolyhedraPolyhedronAttributeColorMap(id.value),
+    set: async (newValue) => {
+      await dataStyleStore.setMeshPolyhedraPolyhedronAttributeColorMap(
+        id.value,
+        newValue,
+      )
       hybridViewerStore.remoteRender()
     },
   })
 </script>
-
 <template>
   <ViewerContextMenuItem
     :itemProps="props.itemProps"
@@ -67,8 +119,14 @@
           :id="id"
           v-model:coloring_style_key="coloring_style_key"
           v-model:color="color"
-          v-model:vertex_attribute="vertex_attribute"
-          v-model:polyhedron_attribute="polyhedron_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:polyhedron_attribute_name="polyhedron_attribute_name"
+          v-model:polyhedron_attribute_range="polyhedron_attribute_range"
+          v-model:polyhedron_attribute_color_map="
+            polyhedron_attribute_color_map
+          "
         />
       </template>
     </template>