@geode/opengeodeweb-front 10.2.1 → 10.3.0

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

@@ -0,0 +1,216 @@
+<script setup>
+  import vtkColorMaps from "@kitware/vtk.js/Rendering/Core/ColorTransferFunction/ColorMaps"
+  import vtkColorTransferFunction from "@kitware/vtk.js/Rendering/Core/ColorTransferFunction"
+
+  const props = defineProps({
+    presets: { type: Array, required: true },
+  })
+
+  const emit = defineEmits(["select"])
+
+  const filterText = ref("")
+  const canvasRefs = ref({})
+  const loading = ref(true)
+  let renderJobId = 0
+
+  const setCanvasRef = (presetName, el, id) => {
+    if (el) {
+      canvasRefs.value[id] = { el, presetName }
+    } else {
+      delete canvasRefs.value[id]
+    }
+  }
+
+  const filteredPresets = computed(() => {
+    if (!filterText.value) return props.presets
+    const term = filterText.value.toLowerCase()
+
+    return props.presets.reduce((acc, item) => {
+      if (item.Children) {
+        const children = item.Children.filter((c) =>
+          c.Name.toLowerCase().includes(term),
+        )
+        if (children.length) acc.push({ ...item, Children: children })
+      } else if (item.Name.toLowerCase().includes(term)) {
+        acc.push(item)
+      }
+      return acc
+    }, [])
+  })
+
+  function drawPresetCanvas(presetName, canvas) {
+    if (!canvas) return
+    const preset = vtkColorMaps.getPresetByName(presetName)
+    if (!preset || !preset.RGBPoints) return
+
+    const ctx = canvas.getContext("2d")
+    const { width, height } = canvas
+    const lut = vtkColorTransferFunction.newInstance()
+    const rgbPoints = preset.RGBPoints
+
+    for (let i = 0; i < rgbPoints.length; i += 4) {
+      lut.addRGBPoint(
+        rgbPoints[i],
+        rgbPoints[i + 1],
+        rgbPoints[i + 2],
+        rgbPoints[i + 3],
+      )
+    }
+
+    const table = lut.getUint8Table(
+      rgbPoints[0],
+      rgbPoints[rgbPoints.length - 4],
+      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
+      }
+    }
+    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))
+    }
+    if (currentJobId === renderJobId) loading.value = false
+  }
+
+  onMounted(drawAllCanvases)
+  watch(filteredPresets, drawAllCanvases)
+</script>
+
+<template>
+  <v-card
+    width="320"
+    class="pa-3 blur-card overflow-hidden"
+    theme="dark"
+    variant="outlined"
+    rounded="lg"
+  >
+    <v-overlay
+      v-model="loading"
+      contained
+      persistent
+      class="align-center justify-center"
+      scrim="#1e1e1e"
+      opacity="0.6"
+    >
+      <v-progress-circular indeterminate color="primary" />
+    </v-overlay>
+
+    <v-text-field
+      v-model="filterText"
+      placeholder="Search presets..."
+      density="compact"
+      hide-details
+      prepend-inner-icon="mdi-magnify"
+      variant="solo-filled"
+      flat
+      class="mb-3"
+      base-color="white"
+      color="white"
+    />
+
+    <v-list
+      density="compact"
+      max-height="350"
+      bg-color="transparent"
+      class="pa-0"
+      :style="{ opacity: loading ? '0.3' : '1', transition: 'opacity 0.2s' }"
+    >
+      <template v-for="(item, index) in filteredPresets" :key="index">
+        <v-list-group v-if="item.Children" :value="item.Name">
+          <template #activator="{ props: gProps }">
+            <v-list-item
+              v-bind="gProps"
+              :title="item.Name"
+              class="text-white font-weight-bold"
+            />
+          </template>
+
+          <v-list-item
+            v-for="(child, cIdx) in item.Children"
+            :key="cIdx"
+            @click="$emit('select', child)"
+            class="px-2 mb-1"
+            rounded="md"
+          >
+            <div class="d-flex flex-column py-1">
+              <span class="text-caption text-grey-lighten-1 mb-1">{{
+                child.Name
+              }}</span>
+              <canvas
+                :ref="
+                  (el) => setCanvasRef(child.Name, el, `g-${index}-${cIdx}`)
+                "
+                width="200"
+                height="18"
+                class="w-100 rounded-xs border-thin"
+              />
+            </div>
+          </v-list-item>
+        </v-list-group>
+
+        <v-list-item
+          v-else
+          @click="$emit('select', item)"
+          class="px-2 mb-1"
+          rounded="md"
+        >
+          <div class="d-flex flex-column py-1">
+            <span class="text-caption text-grey-lighten-1 mb-1">{{
+              item.Name
+            }}</span>
+            <canvas
+              :ref="(el) => setCanvasRef(item.Name, el, `s-${index}`)"
+              width="200"
+              height="18"
+              class="w-100 rounded-xs border-thin"
+            />
+          </div>
+        </v-list-item>
+      </template>
+    </v-list>
+  </v-card>
+</template>
+
+<style scoped>
+  .blur-card {
+    background-color: rgba(35, 35, 35, 0.8) !important;
+    backdrop-filter: blur(16px);
+    -webkit-backdrop-filter: blur(16px);
+    border-color: rgba(255, 255, 255, 0.1) !important;
+  }
+
+  .border-thin {
+    border: 1px solid rgba(255, 255, 255, 0.15) !important;
+  }
+
+  .v-list-item {
+    background-color: rgba(255, 255, 255, 0.1) !important;
+  }
+</style>

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

@@ -0,0 +1,168 @@
+<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"
+
+  const props = defineProps({
+    modelValue: { type: String, default: "Cool to Warm" },
+    min: { type: Number, required: true },
+    max: { type: Number, required: true },
+  })
+
+  const emit = defineEmits(["update:modelValue"])
+
+  const menuOpen = ref(false)
+  const lutCanvas = ref(null)
+  const selectedPresetName = ref(props.modelValue)
+
+  const presets = computed(() => {
+    const allPresets = vtkColorMaps.rgbPresetNames.map((name) =>
+      vtkColorMaps.getPresetByName(name),
+    )
+
+    const defaultPreset = vtkColorMaps.getPresetByName("Cool to Warm")
+
+    const paraviewNames = [
+      "Cool to Warm",
+      "Warm to Cool",
+      "rainbow",
+      "Grayscale",
+      "X Ray",
+      "Black-Body Radiation",
+      "erdc_rainbow_bright",
+    ]
+    const matplotlibNames = [
+      "Viridis (matplotlib)",
+      "Plasma (matplotlib)",
+      "Inferno (matplotlib)",
+      "Magma (matplotlib)",
+    ]
+
+    const paraviewPresets = paraviewNames
+      .map((name) => vtkColorMaps.getPresetByName(name))
+      .filter(Boolean)
+    const matplotlibPresets = matplotlibNames
+      .map((name) => vtkColorMaps.getPresetByName(name))
+      .filter(Boolean)
+    const otherPresets = allPresets.filter(
+      (preset) =>
+        !paraviewNames.includes(preset.Name) &&
+        !matplotlibNames.includes(preset.Name),
+    )
+
+    return [
+      defaultPreset,
+      { Name: "ParaView", Children: paraviewPresets },
+      { Name: "Matplotlib", Children: matplotlibPresets },
+      { Name: "Others", Children: otherPresets },
+    ]
+  })
+
+  function drawLutCanvas() {
+    if (!lutCanvas.value) return
+    const preset = vtkColorMaps.getPresetByName(selectedPresetName.value)
+    if (!preset || !preset.RGBPoints) return
+
+    const canvas = lutCanvas.value
+    const ctx = canvas.getContext("2d")
+    const { width, height } = canvas
+
+    const lut = vtkColorTransferFunction.newInstance()
+    const rgbPoints = preset.RGBPoints
+
+    for (let i = 0; i < rgbPoints.length; i += 4) {
+      lut.addRGBPoint(
+        rgbPoints[i],
+        rgbPoints[i + 1],
+        rgbPoints[i + 2],
+        rgbPoints[i + 3],
+      )
+    }
+
+    const table = lut.getUint8Table(
+      rgbPoints[0],
+      rgbPoints[rgbPoints.length - 4],
+      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
+      }
+    }
+    ctx.putImageData(imageData, 0, 0)
+  }
+
+  function onSelectPreset(preset) {
+    selectedPresetName.value = preset.Name
+    emit("update:modelValue", preset.Name)
+    menuOpen.value = false
+  }
+
+  onMounted(() => nextTick(drawLutCanvas))
+  watch(
+    [lutCanvas, selectedPresetName, () => props.min, () => props.max],
+    drawLutCanvas,
+  )
+  watch(
+    () => props.modelValue,
+    (nv) => {
+      if (nv !== selectedPresetName.value) selectedPresetName.value = nv
+    },
+  )
+</script>
+
+<template>
+  <v-menu v-model="menuOpen" :close-on-content-click="false" location="bottom">
+    <template #activator="{ props: menuProps }">
+      <v-card
+        v-bind="menuProps"
+        theme="dark"
+        variant="outlined"
+        rounded="sm"
+        class="pa-2 blur-picker d-flex flex-column"
+        style="gap: 4px; cursor: pointer"
+      >
+        <span class="text-caption text-white font-weight-medium">
+          {{ selectedPresetName }}
+        </span>
+        <canvas
+          ref="lutCanvas"
+          width="200"
+          height="18"
+          class="w-100 rounded-xs border-thin"
+        />
+      </v-card>
+    </template>
+
+    <ColorMapList :presets="presets" @select="onSelectPreset" />
+  </v-menu>
+</template>
+
+<style scoped>
+  .blur-picker {
+    background-color: rgba(40, 40, 40, 0.7) !important;
+    backdrop-filter: blur(12px);
+    -webkit-backdrop-filter: blur(12px);
+    border-color: rgba(255, 255, 255, 0.2) !important;
+    transition: background-color 0.2s;
+  }
+
+  .blur-picker {
+    background-color: rgba(60, 60, 60, 0.9) !important;
+  }
+
+  .border-thin {
+    border: 1px solid rgba(255, 255, 255, 0.15) !important;
+  }
+</style>

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

@@ -11,11 +11,28 @@
 
   const color = defineModel("color")
   const textures = defineModel("textures")
-  const vertex_attribute = defineModel("vertex_attribute")
-  const edge_attribute = defineModel("edge_attribute")
-  const cell_attribute = defineModel("cell_attribute")
-  const polygon_attribute = defineModel("polygon_attribute")
-  const polyhedron_attribute = defineModel("polyhedron_attribute")
+
+  const vertex_attribute_name = defineModel("vertex_attribute_name")
+  const vertex_attribute_range = defineModel("vertex_attribute_range")
+  const vertex_attribute_color_map = defineModel("vertex_attribute_color_map")
+
+  const edge_attribute_name = defineModel("edge_attribute_name")
+  const edge_attribute_range = defineModel("edge_attribute_range")
+  const edge_attribute_color_map = defineModel("edge_attribute_color_map")
+
+  const cell_attribute_name = defineModel("cell_attribute_name")
+  const cell_attribute_range = defineModel("cell_attribute_range")
+  const cell_attribute_color_map = defineModel("cell_attribute_color_map")
+
+  const polygon_attribute_name = defineModel("polygon_attribute_name")
+  const polygon_attribute_range = defineModel("polygon_attribute_range")
+  const polygon_attribute_color_map = defineModel("polygon_attribute_color_map")
+
+  const polyhedron_attribute_name = defineModel("polyhedron_attribute_name")
+  const polyhedron_attribute_range = defineModel("polyhedron_attribute_range")
+  const polyhedron_attribute_color_map = defineModel(
+    "polyhedron_attribute_color_map",
+  )
 
   const props = defineProps({
     id: { type: String, required: true },
@@ -25,20 +42,14 @@
   const has_textures = computed(() =>
     textures.value !== undefined ? true : false,
   )
-  const has_vertex = computed(() =>
-    vertex_attribute.value !== undefined ? true : false,
-  )
-  const has_edge = computed(() =>
-    edge_attribute.value !== undefined ? true : false,
-  )
-  const has_cells = computed(() =>
-    cell_attribute.value !== undefined ? true : false,
+  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)
+  const has_polygons = computed(
+    () => polygon_attribute_range.value !== undefined,
   )
-  const has_polygons = computed(() =>
-    polygon_attribute.value !== undefined ? true : false,
-  )
-  const has_polyhedra = computed(() =>
-    polyhedron_attribute.value !== undefined ? true : false,
+  const has_polyhedra = computed(
+    () => polyhedron_attribute_range.value !== undefined,
   )
 
   const color_dict = { name: "Color", value: "color" }
@@ -82,7 +93,6 @@
       coloring_styles.value.values[coloring_styles.value.labels.indexOf(value)]
   })
 </script>
-
 <template>
   <v-row justify="center" align="center">
     <v-divider />
@@ -115,31 +125,43 @@
           </template>
           <template v-if="coloring_style_key === vertex_dict['value']">
             <ViewerOptionsVertexAttributeSelector
-              v-model="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"
               :id="id"
             />
           </template>
           <template v-if="coloring_style_key === edge_dict['value']">
             <ViewerOptionsEdgeAttributeSelector
-              v-model="edge_attribute"
+              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"
               :id="id"
             />
           </template>
           <template v-if="coloring_style_key === cell_dict['value']">
             <ViewerOptionsCellAttributeSelector
-              v-model="cell_attribute"
+              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"
               :id="id"
             />
           </template>
           <template v-if="coloring_style_key === polygon_dict['value']">
             <ViewerOptionsPolygonAttributeSelector
-              v-model="polygon_attribute"
+              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"
               :id="id"
             />
           </template>
           <template v-if="coloring_style_key === polyhedron_dict['value']">
             <ViewerOptionsPolyhedronAttributeSelector
-              v-model="polyhedron_attribute"
+              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
+              "
               :id="id"
             />
           </template>

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

@@ -1,72 +1,84 @@
 <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 edge_attribute_name = defineModel("edge_attribute_name", {
+    type: String,
+  })
+  const edge_attribute_range = defineModel("edge_attribute_range", {
+    type: Array,
+  })
+  const edge_attribute_color_map = defineModel("edge_attribute_color_map", {
+    type: String,
+  })
+  const edge_attributes = ref([])
 
   const props = defineProps({
     id: { type: String, required: true },
   })
 
-  const edge_attribute_name = ref("")
-  const edge_attribute_names = ref([])
-
-  onMounted(() => {
-    if (model.value != null) {
-      edge_attribute_name.value = model.value.name
-    }
+  const rangeMin = computed({
+    get: () => edge_attribute_range.value[0],
+    set: (val) => {
+      edge_attribute_range.value = [val, edge_attribute_range.value[1]]
+    },
+  })
+  const rangeMax = computed({
+    get: () => edge_attribute_range.value[1],
+    set: (val) => {
+      edge_attribute_range.value = [edge_attribute_range.value[0], val]
+    },
   })
 
-  const edge_attribute = reactive({ name: edge_attribute_name.value })
-
-  watch(edge_attribute_name, (value) => {
-    edge_attribute.name = value
-    model.value = edge_attribute
+  onMounted(() => {
+    getEdgeAttributes()
   })
 
-  function get_edge_attribute_names() {
+  function getEdgeAttributes() {
     geodeStore.request(
       back_schemas.opengeodeweb_back.edge_attribute_names,
       { id: props.id },
       {
         response_function: (response) => {
-          edge_attribute_names.value = response.edge_attribute_names
+          edge_attributes.value = response.attributes
         },
       },
     )
   }
 
-  onMounted(() => {
-    get_edge_attribute_names()
+  const currentAttribute = computed(() => {
+    return edge_attributes.value.find(
+      (attr) => attr.attribute_name === edge_attribute_name.value,
+    )
   })
 
-  watch(
-    () => props.id,
-    () => {
-      get_edge_attribute_names()
-    },
-  )
+  function resetRange() {
+    if (currentAttribute.value) {
+      edge_attribute_range.value = [
+        currentAttribute.value.min_value,
+        currentAttribute.value.max_value,
+      ]
+    }
+  }
 </script>
 
 <template>
-  <v-row justify="center" align="center">
-    <v-col cols="auto">
-      <v-icon
-        size="30"
-        icon="mdi-ray-end-arrow"
-        v-tooltip:left="'Edge Attribute'"
-      />
-    </v-col>
-    <v-col>
-      <v-select
-        v-model="edge_attribute_name"
-        :items="edge_attribute_names"
-        label="Select an edge attribute"
-        density="compact"
-        hide-details
-      />
-    </v-col>
-  </v-row>
+  <v-select
+    v-model="edge_attribute_name"
+    :items="edge_attributes.map((attribute) => attribute.attribute_name)"
+    item-title="attribute_name"
+    item-value="attribute_name"
+    label="Select an attribute"
+    density="compact"
+  />
+  <ViewerOptionsAttributeColorBar
+    v-if="edge_attribute_name"
+    v-model:minimum="rangeMin"
+    v-model:maximum="rangeMax"
+    v-model:colorMap="edge_attribute_color_map"
+    @reset="resetRange"
+  />
 </template>