@geode/opengeodeweb-front 10.3.0 → 10.3.1

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

@@ -1,8 +1,12 @@
 <script setup>
   import vtkColorMaps from "@kitware/vtk.js/Rendering/Core/ColorTransferFunction/ColorMaps"
-  import vtkColorTransferFunction from "@kitware/vtk.js/Rendering/Core/ColorTransferFunction"
+  import { newInstance as vtkColorTransferFunction } from "@kitware/vtk.js/Rendering/Core/ColorTransferFunction"
 
-  const props = defineProps({
+  const LAST_POINT_OFFSET = 4
+  const THREE = 3
+  const CHUNK_SIZE = 5
+
+  const { presets } = defineProps({
     presets: { type: Array, required: true },
   })
 
@@ -11,92 +15,113 @@
   const filterText = ref("")
   const canvasRefs = ref({})
   const loading = ref(true)
-  let renderJobId = 0
+  const renderJobId = ref(0)
 
-  const setCanvasRef = (presetName, el, id) => {
-    if (el) {
-      canvasRefs.value[id] = { el, presetName }
+  function setCanvasRef(presetName, element, id) {
+    if (element) {
+      canvasRefs.value[id] = { element, presetName }
     } else {
       delete canvasRefs.value[id]
     }
   }
 
   const filteredPresets = computed(() => {
-    if (!filterText.value) return props.presets
+    if (!filterText.value) {
+      return presets
+    }
     const term = filterText.value.toLowerCase()
 
-    return props.presets.reduce((acc, item) => {
+    const result = []
+    for (const item of presets) {
       if (item.Children) {
-        const children = item.Children.filter((c) =>
-          c.Name.toLowerCase().includes(term),
+        const children = item.Children.filter((child) =>
+          child.Name.toLowerCase().includes(term),
         )
-        if (children.length) acc.push({ ...item, Children: children })
+        if (children.length > 0) {
+          result.push({ ...item, Children: children })
+        }
       } else if (item.Name.toLowerCase().includes(term)) {
-        acc.push(item)
+        result.push(item)
       }
-      return acc
-    }, [])
+    }
+    return result
   })
 
   function drawPresetCanvas(presetName, canvas) {
-    if (!canvas) return
+    if (!canvas) {
+      return
+    }
     const preset = vtkColorMaps.getPresetByName(presetName)
-    if (!preset || !preset.RGBPoints) return
+    if (!preset || !preset.RGBPoints) {
+      return
+    }
 
     const ctx = canvas.getContext("2d")
-    const { width, height } = canvas
-    const lut = vtkColorTransferFunction.newInstance()
+    const { height, width } = canvas
+    const lut = vtkColorTransferFunction()
     const rgbPoints = preset.RGBPoints
 
-    for (let i = 0; i < rgbPoints.length; i += 4) {
+    for (let pointIdx = 0; pointIdx < rgbPoints.length; pointIdx += 4) {
       lut.addRGBPoint(
-        rgbPoints[i],
-        rgbPoints[i + 1],
-        rgbPoints[i + 2],
-        rgbPoints[i + 3],
+        rgbPoints[pointIdx],
+        rgbPoints[pointIdx + 1],
+        rgbPoints[pointIdx + 2],
+        rgbPoints[pointIdx + THREE],
       )
     }
 
     const table = lut.getUint8Table(
       rgbPoints[0],
-      rgbPoints[rgbPoints.length - 4],
+      rgbPoints.at(-LAST_POINT_OFFSET),
       width,
       true,
     )
     const imageData = ctx.createImageData(width, height)
 
-    for (let x = 0; x < width; x++) {
-      const r = table[x * 4],
-        g = table[x * 4 + 1],
-        b = table[x * 4 + 2],
-        a = table[x * 4 + 3]
-      for (let y = 0; y < height; y++) {
-        const idx = (y * width + x) * 4
-        imageData.data[idx] = r
-        imageData.data[idx + 1] = g
-        imageData.data[idx + 2] = b
-        imageData.data[idx + 3] = a
+    for (let xCoord = 0; xCoord < width; xCoord += 1) {
+      const alpha = table[xCoord * 4 + THREE],
+        blue = table[xCoord * 4 + 2],
+        green = table[xCoord * 4 + 1],
+        red = table[xCoord * 4]
+      for (let yCoord = 0; yCoord < height; yCoord += 1) {
+        const pixelIdx = (yCoord * width + xCoord) * 4
+        imageData.data[pixelIdx] = red
+        imageData.data[pixelIdx + 1] = green
+        imageData.data[pixelIdx + 2] = blue
+        imageData.data[pixelIdx + THREE] = alpha
       }
     }
     ctx.putImageData(imageData, 0, 0)
   }
 
-  async function drawAllCanvases() {
-    renderJobId++
-    const currentJobId = renderJobId
-    loading.value = true
-    await nextTick()
-    await new Promise((r) => setTimeout(r, 50))
-
-    const entries = Object.entries(canvasRefs.value)
-    for (let i = 0; i < entries.length; i += 5) {
-      if (currentJobId !== renderJobId) return
-      entries
-        .slice(i, i + 5)
-        .forEach(([_, { presetName, el }]) => drawPresetCanvas(presetName, el))
-      await new Promise((r) => setTimeout(r, 0))
+  function processChunk(entries, index, jobId) {
+    if (jobId !== renderJobId.value || index >= entries.length) {
+      if (jobId === renderJobId.value) {
+        loading.value = false
+      }
+      return
     }
-    if (currentJobId === renderJobId) loading.value = false
+
+    const end = Math.min(index + CHUNK_SIZE, entries.length)
+    for (let i = index; i < end; i += 1) {
+      const [unusedKey, refValue] = entries[i]
+      drawPresetCanvas(refValue.presetName, refValue.element)
+    }
+    const ZERO = 0
+    setTimeout(() => processChunk(entries, end, jobId), ZERO)
+  }
+
+  function drawAllCanvases() {
+    renderJobId.value += 1
+    const jobId = renderJobId.value
+    loading.value = true
+    nextTick(() => {
+      const WAIT_MS = 50
+      setTimeout(
+        () => processChunk(Object.entries(canvasRefs.value), 0, jobId),
+        WAIT_MS,
+      )
+    })
   }
 
   onMounted(drawAllCanvases)

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

@@ -1,9 +1,12 @@
 <script setup>
-  import vtkColorMaps from "@kitware/vtk.js/Rendering/Core/ColorTransferFunction/ColorMaps"
-  import vtkColorTransferFunction from "@kitware/vtk.js/Rendering/Core/ColorTransferFunction"
   import ColorMapList from "./ColorMapList.vue"
+  import { newInstance } from "@kitware/vtk.js/Rendering/Core/ColorTransferFunction"
+  import vtkColorMaps from "@kitware/vtk.js/Rendering/Core/ColorTransferFunction/ColorMaps"
 
-  const props = defineProps({
+  const LAST_POINT_OFFSET = 4
+  const THREE = 3
+
+  const { max, min, modelValue } = defineProps({
     modelValue: { type: String, default: "Cool to Warm" },
     min: { type: Number, required: true },
     max: { type: Number, required: true },
@@ -12,8 +15,8 @@
   const emit = defineEmits(["update:modelValue"])
 
   const menuOpen = ref(false)
-  const lutCanvas = ref(null)
-  const selectedPresetName = ref(props.modelValue)
+  const lutCanvas = ref()
+  const selectedPresetName = ref(modelValue)
 
   const presets = computed(() => {
     const allPresets = vtkColorMaps.rgbPresetNames.map((name) =>
@@ -59,45 +62,49 @@
   })
 
   function drawLutCanvas() {
-    if (!lutCanvas.value) return
+    if (!lutCanvas.value) {
+      return
+    }
     const preset = vtkColorMaps.getPresetByName(selectedPresetName.value)
-    if (!preset || !preset.RGBPoints) return
+    if (!preset || !preset.RGBPoints) {
+      return
+    }
 
     const canvas = lutCanvas.value
     const ctx = canvas.getContext("2d")
-    const { width, height } = canvas
+    const { height, width } = canvas
 
-    const lut = vtkColorTransferFunction.newInstance()
+    const lut = newInstance()
     const rgbPoints = preset.RGBPoints
 
-    for (let i = 0; i < rgbPoints.length; i += 4) {
+    for (let pointIdx = 0; pointIdx < rgbPoints.length; pointIdx += 4) {
       lut.addRGBPoint(
-        rgbPoints[i],
-        rgbPoints[i + 1],
-        rgbPoints[i + 2],
-        rgbPoints[i + 3],
+        rgbPoints[pointIdx],
+        rgbPoints[pointIdx + 1],
+        rgbPoints[pointIdx + 2],
+        rgbPoints[pointIdx + THREE],
       )
     }
 
     const table = lut.getUint8Table(
       rgbPoints[0],
-      rgbPoints[rgbPoints.length - 4],
+      rgbPoints.at(-LAST_POINT_OFFSET),
       width,
       true,
     )
     const imageData = ctx.createImageData(width, height)
 
-    for (let x = 0; x < width; x++) {
-      const r = table[x * 4],
-        g = table[x * 4 + 1],
-        b = table[x * 4 + 2],
-        a = table[x * 4 + 3]
-      for (let y = 0; y < height; y++) {
-        const idx = (y * width + x) * 4
-        imageData.data[idx] = r
-        imageData.data[idx + 1] = g
-        imageData.data[idx + 2] = b
-        imageData.data[idx + 3] = a
+    for (let xCoord = 0; xCoord < width; xCoord += 1) {
+      const red = table[xCoord * 4]
+      const green = table[xCoord * 4 + 1]
+      const blue = table[xCoord * 4 + 2]
+      const alpha = table[xCoord * 4 + THREE]
+      for (let yCoord = 0; yCoord < height; yCoord += 1) {
+        const pixelIdx = (yCoord * width + xCoord) * 4
+        imageData.data[pixelIdx] = red
+        imageData.data[pixelIdx + 1] = green
+        imageData.data[pixelIdx + 2] = blue
+        imageData.data[pixelIdx + THREE] = alpha
       }
     }
     ctx.putImageData(imageData, 0, 0)
@@ -110,14 +117,13 @@
   }
 
   onMounted(() => nextTick(drawLutCanvas))
+  watch([lutCanvas, selectedPresetName, () => min, () => max], drawLutCanvas)
   watch(
-    [lutCanvas, selectedPresetName, () => props.min, () => props.max],
-    drawLutCanvas,
-  )
-  watch(
-    () => props.modelValue,
+    () => modelValue,
     (nv) => {
-      if (nv !== selectedPresetName.value) selectedPresetName.value = nv
+      if (nv !== selectedPresetName.value) {
+        selectedPresetName.value = nv
+      }
     },
   )
 </script>

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

@@ -1,7 +1,7 @@
 <script setup>
-  const el = useTemplateRef("el")
+  const colorPickerRef = useTemplateRef("colorPickerRef")
   const model = defineModel()
-  const { pressed } = useMousePressed({ target: el })
+  const { pressed } = useMousePressed({ target: colorPickerRef })
 
   const color = ref(model)
 
@@ -14,7 +14,7 @@
 
 <template>
   <v-color-picker
-    ref="el"
+    ref="colorPickerRef"
     v-model="color"
     flat
     canvas-height="100"

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

@@ -1,11 +1,11 @@
 <script setup>
+  import ViewerOptionsCellAttributeSelector from "@ogw_front/components/Viewer/Options/CellAttributeSelector"
   import ViewerOptionsColorPicker from "@ogw_front/components/Viewer/Options/ColorPicker"
-  import ViewerOptionsTexturesSelector from "@ogw_front/components/Viewer/Options/TexturesSelector"
-  import ViewerOptionsVertexAttributeSelector from "@ogw_front/components/Viewer/Options/VertexAttributeSelector"
   import ViewerOptionsEdgeAttributeSelector from "@ogw_front/components/Viewer/Options/EdgeAttributeSelector"
   import ViewerOptionsPolygonAttributeSelector from "@ogw_front/components/Viewer/Options/PolygonAttributeSelector"
-  import ViewerOptionsCellAttributeSelector from "@ogw_front/components/Viewer/Options/CellAttributeSelector"
   import ViewerOptionsPolyhedronAttributeSelector from "@ogw_front/components/Viewer/Options/PolyhedronAttributeSelector"
+  import ViewerOptionsTexturesSelector from "@ogw_front/components/Viewer/Options/TexturesSelector"
+  import ViewerOptionsVertexAttributeSelector from "@ogw_front/components/Viewer/Options/VertexAttributeSelector"
 
   const coloring_style_key = defineModel("coloring_style_key")
 
@@ -34,14 +34,12 @@
     "polyhedron_attribute_color_map",
   )
 
-  const props = defineProps({
+  const { id } = defineProps({
     id: { type: String, required: true },
   })
 
-  const has_color = computed(() => (color.value !== undefined ? true : false))
-  const has_textures = computed(() =>
-    textures.value !== undefined ? true : false,
-  )
+  const has_color = computed(() => color.value !== undefined)
+  const has_textures = computed(() => textures.value !== undefined)
   const has_vertex = computed(() => vertex_attribute_range.value !== undefined)
   const has_edge = computed(() => edge_attribute_range.value !== undefined)
   const has_cells = computed(() => cell_attribute_range.value !== undefined)
@@ -64,20 +62,30 @@
   }
   const coloring_styles = computed(() => {
     let array = []
-    if (has_color.value) array.push(color_dict)
-    if (has_textures.value) array.push(textures_dict)
-    if (has_vertex.value) array.push(vertex_dict)
-    if (has_edge.value) array.push(edge_dict)
-    if (has_cells.value) array.push(cell_dict)
-    if (has_polygons.value) array.push(polygon_dict)
-    if (has_polyhedra.value) array.push(polyhedron_dict)
+    if (has_color.value) {
+      array.push(color_dict)
+    }
+    if (has_textures.value) {
+      array.push(textures_dict)
+    }
+    if (has_vertex.value) {
+      array.push(vertex_dict)
+    }
+    if (has_edge.value) {
+      array.push(edge_dict)
+    }
+    if (has_cells.value) {
+      array.push(cell_dict)
+    }
+    if (has_polygons.value) {
+      array.push(polygon_dict)
+    }
+    if (has_polyhedra.value) {
+      array.push(polyhedron_dict)
+    }
 
-    const labels = array.map((coloring) => {
-      return coloring.name
-    })
-    const values = array.map((coloring) => {
-      return coloring.value
-    })
+    const labels = array.map((coloring) => coloring.name)
+    const values = array.map((coloring) => coloring.value)
 
     return { labels, values }
   })

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

@@ -1,7 +1,7 @@
 <script setup>
+  import ViewerOptionsAttributeColorBar from "@ogw_front/components/Viewer/Options/AttributeColorBar"
   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()
 
@@ -16,7 +16,7 @@
   })
   const edge_attributes = ref([])
 
-  const props = defineProps({
+  const { id } = defineProps({
     id: { type: String, required: true },
   })
 
@@ -40,7 +40,7 @@
   function getEdgeAttributes() {
     geodeStore.request(
       back_schemas.opengeodeweb_back.edge_attribute_names,
-      { id: props.id },
+      { id: id },
       {
         response_function: (response) => {
           edge_attributes.value = response.attributes
@@ -49,11 +49,11 @@
     )
   }
 
-  const currentAttribute = computed(() => {
-    return edge_attributes.value.find(
+  const currentAttribute = computed(() =>
+    edge_attributes.value.find(
       (attr) => attr.attribute_name === edge_attribute_name.value,
-    )
-  })
+    ),
+  )
 
   function resetRange() {
     if (currentAttribute.value) {

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

@@ -1,7 +1,7 @@
 <script setup>
+  import ViewerOptionsAttributeColorBar from "@ogw_front/components/Viewer/Options/AttributeColorBar"
   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()
 
@@ -17,7 +17,7 @@
   )
   const polygon_attributes = ref([])
 
-  const props = defineProps({
+  const { id } = defineProps({
     id: { type: String, required: true },
   })
 
@@ -41,7 +41,7 @@
   function getPolygonAttributes() {
     geodeStore.request(
       back_schemas.opengeodeweb_back.polygon_attribute_names,
-      { id: props.id },
+      { id: id },
       {
         response_function: (response) => {
           polygon_attributes.value = response.attributes
@@ -50,11 +50,11 @@
     )
   }
 
-  const currentAttribute = computed(() => {
-    return polygon_attributes.value.find(
+  const currentAttribute = computed(() =>
+    polygon_attributes.value.find(
       (attr) => attr.attribute_name === polygon_attribute_name.value,
-    )
-  })
+    ),
+  )
 
   function resetRange() {
     if (currentAttribute.value) {

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

@@ -1,7 +1,7 @@
 <script setup>
+  import ViewerOptionsAttributeColorBar from "@ogw_front/components/Viewer/Options/AttributeColorBar"
   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()
 
@@ -17,7 +17,7 @@
   )
   const polyhedron_attributes = ref([])
 
-  const props = defineProps({
+  const { id } = defineProps({
     id: { type: String, required: true },
   })
 
@@ -47,7 +47,7 @@
   function getPolyhedronAttributes() {
     geodeStore.request(
       back_schemas.opengeodeweb_back.polyhedron_attribute_names,
-      { id: props.id },
+      { id: id },
       {
         response_function: (response) => {
           polyhedron_attributes.value = response.attributes
@@ -56,11 +56,11 @@
     )
   }
 
-  const currentAttribute = computed(() => {
-    return polyhedron_attributes.value.find(
+  const currentAttribute = computed(() =>
+    polyhedron_attributes.value.find(
       (attr) => attr.attribute_name === polyhedron_attribute_name.value,
-    )
-  })
+    ),
+  )
 
   function resetRange() {
     if (currentAttribute.value) {

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

@@ -1,21 +1,21 @@
 <script setup>
-  import back_schemas from "@geode/opengeodeweb-back/opengeodeweb_back_schemas.json"
   import FileUploader from "@ogw_front/components/FileUploader"
+  import back_schemas from "@geode/opengeodeweb-back/opengeodeweb_back_schemas.json"
   import { useGeodeStore } from "@ogw_front/stores/geode"
 
   const emit = defineEmits(["update_value"])
 
-  const props = defineProps({
+  const { id } = defineProps({
     id: { type: String, required: true },
     texture_id: { type: String, required: true },
     texture_name: { type: String, required: true },
   })
 
   const texture_name = ref("")
-  texture_name.value = props.texture_name
+  texture_name.value = texture_name
 
   const texture_id = ref("")
-  texture_id.value = props.texture_id
+  texture_id.value = texture_id
 
   const texture_coordinates = ref([])
   const geodeStore = useGeodeStore()
@@ -27,7 +27,7 @@
   function getTextureCoordinates() {
     geodeStore.request(
       back_schemas.opengeodeweb_back.texture_coordinates,
-      { id: props.id },
+      { id: id },
       {
         response_function: (response) => {
           texture_coordinates.value = response.texture_coordinates

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

@@ -3,14 +3,14 @@
 
   const textures = defineModel()
 
-  const props = defineProps({
+  const { id } = defineProps({
     id: { type: String, required: true },
   })
 
   const internal_textures = ref([])
 
   onMounted(() => {
-    if (textures.value != null) {
+    if (textures.value !== null) {
       internal_textures.value = textures.value
     } else {
       internal_textures.value = [{ id: "", texture_name: "" }]
@@ -19,9 +19,9 @@
 
   function update_value_event($event, index) {
     internal_textures.value[index][$event.key] = $event.value
-    const filtered = internal_textures.value.filter((texture) => {
-      return texture.texture_name !== "" && texture.id !== ""
-    })
+    const filtered = internal_textures.value.filter(
+      (texture) => texture.texture_name !== "" && texture.id !== "",
+    )
     if (filtered.length !== 0) {
       textures.value = filtered
     }

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

@@ -1,7 +1,7 @@
 <script setup>
+  import ViewerOptionsAttributeColorBar from "@ogw_front/components/Viewer/Options/AttributeColorBar"
   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()
 
@@ -16,7 +16,7 @@
   })
   const vertex_attributes = ref([])
 
-  const props = defineProps({
+  const { id } = defineProps({
     id: { type: String, required: true },
   })
 
@@ -40,7 +40,7 @@
   function getVertexAttributes() {
     geodeStore.request(
       back_schemas.opengeodeweb_back.vertex_attribute_names,
-      { id: props.id },
+      { id: id },
       {
         response_function: (response) => {
           vertex_attributes.value = response.attributes
@@ -49,11 +49,11 @@
     )
   }
 
-  const currentAttribute = computed(() => {
-    return vertex_attributes.value.find(
+  const currentAttribute = computed(() =>
+    vertex_attributes.value.find(
       (attr) => attr.attribute_name === vertex_attribute_name.value,
-    )
-  })
+    ),
+  )
 
   function resetRange() {
     if (currentAttribute.value) {

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

@@ -1,8 +1,8 @@
 <script setup>
+  import PointSetPoints from "@ogw_front/assets/viewer_svgs/point_set_points.svg"
   import ViewerContextMenuItem from "@ogw_front/components/Viewer/ContextMenuItem"
-  import ViewerOptionsVisibilitySwitch from "@ogw_front/components/Viewer/Options/VisibilitySwitch"
   import ViewerOptionsColoringTypeSelector from "@ogw_front/components/Viewer/Options/ColoringTypeSelector"
-  import PointSetPoints from "@ogw_front/assets/viewer_svgs/point_set_points.svg"
+  import ViewerOptionsVisibilitySwitch from "@ogw_front/components/Viewer/Options/VisibilitySwitch"
 
   import { useDataStyleStore } from "@ogw_front/stores/data_style"
   import { useHybridViewerStore } from "@ogw_front/stores/hybrid_viewer"
@@ -10,11 +10,11 @@
   const dataStyleStore = useDataStyleStore()
   const hybridViewerStore = useHybridViewerStore()
 
-  const props = defineProps({
+  const { itemProps } = defineProps({
     itemProps: { type: Object, required: true },
   })
 
-  const id = toRef(() => props.itemProps.id)
+  const id = toRef(() => itemProps.id)
 
   const visibility = computed({
     get: () => dataStyleStore.meshPointsVisibility(id.value),
@@ -77,7 +77,7 @@
 </script>
 <template>
   <ViewerContextMenuItem
-    :itemProps="props.itemProps"
+    :itemProps="itemProps"
     tooltip="Points options"
     :btn_image="PointSetPoints"
   >