@geode/opengeodeweb-front 10.23.0-rc.2 → 10.23.0-rc.4

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

@@ -51,10 +51,8 @@ const size = computed({
         v-model="visibility"
       />
       <template v-if="visibility">
-        <v-row class="pa-0" align="center">
-          <v-divider />
-          <ViewerOptionsSizeSlider data-testid="modelPointsSizeSlider" v-model="size" />
-        </v-row>
+        <v-divider class="my-2" />
+        <ViewerOptionsSizeSlider data-testid="modelPointsSizeSlider" v-model="size" />
       </template>
     </template>
   </ViewerContextMenuItem>

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

@@ -210,51 +210,41 @@ const polygonSchema = back_schemas.opengeodeweb_back.model_component_polygon_att
 </script>
 
 <template>
-  <div>
-    <OptionsSection title="Surfaces Options" class="mt-6">
-      <VisibilitySwitch v-model="surfacesVisibility" />
-      <v-row class="mt-2 pa-0">
-        <v-col class="pa-0">
-          <ViewerOptionsColoringTypeSelector
-            :id="modelId"
-            :componentId="targetSurfaceIds[0]"
-            v-model:coloring_style_key="surfacesColorMode"
-            v-model:color="surfacesColor"
-            v-model:vertex_attribute_name="surfacesVertexAttributeName"
-            v-model:vertex_attribute_range="surfacesVertexAttributeRange"
-            v-model:vertex_attribute_color_map="surfacesVertexAttributeColorMap"
-            v-model:polygon_attribute_name="surfacesPolygonAttributeName"
-            v-model:polygon_attribute_range="surfacesPolygonAttributeRange"
-            v-model:polygon_attribute_color_map="surfacesPolygonAttributeColorMap"
-            :capabilities="capabilities"
-            :schemas="{ vertex: vertexSchema, polygon: polygonSchema }"
-            :allowRandom="true"
-          />
-        </v-col>
-      </v-row>
-    </OptionsSection>
-
-    <OptionsSection v-if="surfaceId" title="Component Options" class="mt-6">
-      <VisibilitySwitch v-model="surfaceVisibility" />
-      <v-row class="mt-2 pa-0">
-        <v-col class="pa-0">
-          <ViewerOptionsColoringTypeSelector
-            :id="modelId"
-            :componentId="surfaceId"
-            v-model:coloring_style_key="surfaceColorMode"
-            v-model:color="surfaceColor"
-            v-model:vertex_attribute_name="vertexAttributeName"
-            v-model:vertex_attribute_range="vertexAttributeRange"
-            v-model:vertex_attribute_color_map="vertexAttributeColorMap"
-            v-model:polygon_attribute_name="polygonAttributeName"
-            v-model:polygon_attribute_range="polygonAttributeRange"
-            v-model:polygon_attribute_color_map="polygonAttributeColorMap"
-            :capabilities="capabilities"
-            :schemas="{ vertex: vertexSchema, polygon: polygonSchema }"
-            :allowRandom="true"
-          />
-        </v-col>
-      </v-row>
-    </OptionsSection>
-  </div>
+  <OptionsSection title="Surfaces Options" class="mt-4">
+    <VisibilitySwitch v-model="surfacesVisibility" />
+    <ViewerOptionsColoringTypeSelector
+      :id="modelId"
+      :componentId="targetSurfaceIds[0]"
+      v-model:coloring_style_key="surfacesColorMode"
+      v-model:color="surfacesColor"
+      v-model:vertex_attribute_name="surfacesVertexAttributeName"
+      v-model:vertex_attribute_range="surfacesVertexAttributeRange"
+      v-model:vertex_attribute_color_map="surfacesVertexAttributeColorMap"
+      v-model:polygon_attribute_name="surfacesPolygonAttributeName"
+      v-model:polygon_attribute_range="surfacesPolygonAttributeRange"
+      v-model:polygon_attribute_color_map="surfacesPolygonAttributeColorMap"
+      :capabilities="capabilities"
+      :schemas="{ vertex: vertexSchema, polygon: polygonSchema }"
+      :allowRandom="true"
+    />
+  </OptionsSection>
+
+  <OptionsSection v-if="surfaceId" title="Component Options" class="mt-4">
+    <VisibilitySwitch v-model="surfaceVisibility" />
+    <ViewerOptionsColoringTypeSelector
+      :id="modelId"
+      :componentId="surfaceId"
+      v-model:coloring_style_key="surfaceColorMode"
+      v-model:color="surfaceColor"
+      v-model:vertex_attribute_name="vertexAttributeName"
+      v-model:vertex_attribute_range="vertexAttributeRange"
+      v-model:vertex_attribute_color_map="vertexAttributeColorMap"
+      v-model:polygon_attribute_name="polygonAttributeName"
+      v-model:polygon_attribute_range="polygonAttributeRange"
+      v-model:polygon_attribute_color_map="polygonAttributeColorMap"
+      :capabilities="capabilities"
+      :schemas="{ vertex: vertexSchema, polygon: polygonSchema }"
+      :allowRandom="true"
+    />
+  </OptionsSection>
 </template>

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

@@ -11,8 +11,8 @@ const colorMap = defineModel("colorMap", { type: String });
 <template>
   <div class="attribute-colorbar mt-3">
     <ColorMapPicker v-model:selected-preset-name="colorMap" :min="minimum" :max="maximum" />
-    <v-row dense align="center" class="mt-2">
-      <v-col cols="5">
+    <v-row dense align="center" class="mt-2" no-gutters>
+      <v-col cols="5" class="pe-1">
         <v-text-field
           :model-value="minimum"
           @update:model-value="(value) => (minimum = Number(value))"
@@ -33,7 +33,7 @@ const colorMap = defineModel("colorMap", { type: String });
           v-tooltip="'Reset range'"
         />
       </v-col>
-      <v-col cols="5">
+      <v-col cols="5" class="ps-1">
         <v-text-field
           :model-value="maximum"
           @update:model-value="(value) => (maximum = Number(value))"

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

@@ -109,6 +109,7 @@ watch(name, (newName, oldName) => {
     item-value="attribute_name"
     density="compact"
     label="Select an attribute"
+    hide-details
   />
   <ViewerOptionsAttributeColorBar
     v-if="name"

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

@@ -1,9 +1,7 @@
 <script setup>
-import { getRGBPointsFromPreset } from "@ogw_front/utils/colormap";
-import { newInstance as vtkColorTransferFunction } from "@kitware/vtk.js/Rendering/Core/ColorTransferFunction";
+import GlassCard from "@ogw_front/components/GlassCard.vue";
+import { drawCanvasForPreset } from "@ogw_front/utils/colormap";
 
-const LAST_POINT_OFFSET = 4;
-const THREE = 3;
 const CHUNK_SIZE = 5;
 
 const { presets, selectedPresetName } = defineProps({
@@ -46,43 +44,6 @@ const filteredPresets = computed(() => {
   return result;
 });
 
-function drawPresetCanvas(presetName, canvas) {
-  if (!canvas) {
-    return;
-  }
-  const rgbPoints = getRGBPointsFromPreset(presetName);
-  if (!rgbPoints || rgbPoints.length === 0) {
-    return;
-  }
-  const ctx = canvas.getContext("2d");
-  const { height, width } = canvas;
-  const lut = vtkColorTransferFunction();
-  for (let pointIdx = 0; pointIdx < rgbPoints.length; pointIdx += 4) {
-    lut.addRGBPoint(
-      rgbPoints[pointIdx],
-      rgbPoints[pointIdx + 1],
-      rgbPoints[pointIdx + 2],
-      rgbPoints[pointIdx + THREE],
-    );
-  }
-  const table = lut.getUint8Table(rgbPoints[0], rgbPoints.at(-LAST_POINT_OFFSET), width, true);
-  const imageData = ctx.createImageData(width, height);
-  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);
-}
-
 function processChunk(entries, index, jobId) {
   if (jobId !== renderJobId.value || index >= entries.length) {
     if (jobId === renderJobId.value) {
@@ -94,7 +55,7 @@ function processChunk(entries, index, jobId) {
   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);
+    drawCanvasForPreset(refValue.presetName, refValue.element);
   }
   const ZERO = 0;
   setTimeout(() => processChunk(entries, end, jobId), ZERO);
@@ -115,13 +76,7 @@ watch(filteredPresets, drawAllCanvases);
 </script>
 
 <template>
-  <v-card
-    width="320"
-    class="pa-3 blur-card overflow-hidden"
-    theme="dark"
-    variant="outlined"
-    rounded="lg"
-  >
+  <GlassCard width="320" variant="panel" padding="pa-3" rounded="lg" class="overflow-hidden">
     <v-overlay
       v-model="loading"
       contained
@@ -199,17 +154,10 @@ watch(filteredPresets, drawAllCanvases);
         </v-list-item>
       </template>
     </v-list>
-  </v-card>
+  </GlassCard>
 </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;
 }

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

@@ -1,10 +1,7 @@
 <script setup>
-import { colormaps, getRGBPointsFromPreset } from "@ogw_front/utils/colormap";
+import { drawCanvasForPreset, getPresetsWithCurrentAtTop } from "@ogw_front/utils/colormap";
 import ColorMapList from "./ColorMapList.vue";
-import { newInstance } from "@kitware/vtk.js/Rendering/Core/ColorTransferFunction";
-
-const LAST_POINT_OFFSET = 4;
-const THREE = 3;
+import GlassCard from "@ogw_front/components/GlassCard.vue";
 
 const { max, min } = defineProps({
   min: { type: Number, required: true },
@@ -16,58 +13,10 @@ const selectedPresetName = defineModel("selectedPresetName", { default: "batlow"
 const menuOpen = ref(false);
 const lutCanvas = ref();
 
-const presets = computed(() => {
-  let currentPreset = undefined;
-  for (const category of colormaps) {
-    currentPreset = category.Children.find((preset) => preset.Name === selectedPresetName.value);
-    if (currentPreset) {
-      break;
-    }
-  }
-  return [currentPreset, ...colormaps].filter(Boolean);
-});
+const presets = computed(() => getPresetsWithCurrentAtTop(selectedPresetName.value));
 
 function drawLutCanvas() {
-  if (!lutCanvas.value) {
-    return;
-  }
-  const rgbPoints = getRGBPointsFromPreset(selectedPresetName.value);
-  if (!rgbPoints || rgbPoints.length === 0) {
-    return;
-  }
-
-  const canvas = lutCanvas.value;
-  const ctx = canvas.getContext("2d");
-  const { height, width } = canvas;
-
-  const lut = newInstance();
-
-  for (let pointIdx = 0; pointIdx < rgbPoints.length; pointIdx += 4) {
-    lut.addRGBPoint(
-      rgbPoints[pointIdx],
-      rgbPoints[pointIdx + 1],
-      rgbPoints[pointIdx + 2],
-      rgbPoints[pointIdx + THREE],
-    );
-  }
-
-  const table = lut.getUint8Table(rgbPoints[0], rgbPoints.at(-LAST_POINT_OFFSET), width, true);
-  const imageData = ctx.createImageData(width, height);
-
-  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);
+  drawCanvasForPreset(selectedPresetName.value, lutCanvas.value);
 }
 
 function onSelectPreset(preset) {
@@ -82,19 +31,19 @@ watch([lutCanvas, selectedPresetName, () => min, () => max], drawLutCanvas);
 <template>
   <v-menu v-model="menuOpen" :close-on-content-click="false" location="bottom">
     <template #activator="{ props: menuProps }">
-      <v-card
+      <GlassCard
         v-bind="menuProps"
-        theme="dark"
-        variant="outlined"
+        variant="ui"
+        padding="pa-2"
         rounded="sm"
-        class="pa-2 blur-picker d-flex flex-column"
+        class="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>
+      </GlassCard>
     </template>
 
     <ColorMapList
@@ -106,18 +55,6 @@ watch([lutCanvas, selectedPresetName, () => min, () => max], drawLutCanvas);
 </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;
 }

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

@@ -41,9 +41,25 @@ watch(pressed, (value) => {
     ref="colorPickerRef"
     v-model="vuetifyColor"
     flat
-    canvas-height="100"
+    canvas-height="75"
     hide-inputs
-    width="100%"
+    width="220"
     mode="rgba"
+    class="mx-auto"
   />
 </template>
+
+<style scoped>
+:deep(.v-color-picker__controls) {
+  padding: 8px !important;
+}
+
+:deep(.v-color-picker__dot) {
+  width: 18px !important;
+  height: 18px !important;
+}
+
+:deep(.v-color-picker__preview) {
+  margin-bottom: 0 !important;
+}
+</style>

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

@@ -161,85 +161,79 @@ watch(
 );
 </script>
 <template>
-  <v-row justify="center" align="center">
-    <v-divider />
+  <v-divider class="my-2 mx-2" />
+  <v-row justify="center" align="center" no-gutters class="px-2">
+    <v-col cols="auto" class="mr-2">
+      <v-icon size="18" icon="mdi-format-color-fill" v-tooltip:left="'Coloring'" />
+    </v-col>
     <v-col>
-      <v-row justify="center" align="center">
-        <v-col cols="auto">
-          <v-icon size="30" icon="mdi-format-color-fill" v-tooltip:left="'Coloring'" />
-        </v-col>
-        <v-col>
-          <v-select
-            v-model="coloring_style_label"
-            :items="coloring_styles.labels"
-            label="Select a coloring style"
-            density="compact"
-          />
-        </v-col>
-      </v-row>
-      <v-row>
-        <v-spacer />
-        <v-col cols="10">
-          <template v-if="coloring_style_key === color_dict['value']">
-            <ViewerOptionsColorPicker v-model="color" />
-          </template>
-          <template v-if="coloring_style_key === textures_dict['value']">
-            <ViewerOptionsTexturesSelector v-model="textures" :id="id" />
-          </template>
-          <template v-if="coloring_style_key === vertex_dict['value'] && hasColorMap('vertex')">
-            <ViewerOptionsAttributeSelector
-              v-model:name="vertex_attribute_name"
-              v-model:range="vertex_attribute_range"
-              v-model:colorMap="vertex_attribute_color_map"
-              :id="id"
-              :componentId="componentId"
-              :schema="vertexSchema"
-            />
-          </template>
-          <template v-if="coloring_style_key === edge_dict['value'] && hasColorMap('edge')">
-            <ViewerOptionsAttributeSelector
-              v-model:name="edge_attribute_name"
-              v-model:range="edge_attribute_range"
-              v-model:colorMap="edge_attribute_color_map"
-              :id="id"
-              :componentId="componentId"
-              :schema="edgeSchema"
-            />
-          </template>
-          <template v-if="coloring_style_key === cell_dict['value'] && hasColorMap('cell')">
-            <ViewerOptionsAttributeSelector
-              v-model:name="cell_attribute_name"
-              v-model:range="cell_attribute_range"
-              v-model:colorMap="cell_attribute_color_map"
-              :id="id"
-              :componentId="componentId"
-              :schema="cellSchema"
-            />
-          </template>
-          <template v-if="coloring_style_key === polygon_dict['value'] && hasColorMap('polygon')">
-            <ViewerOptionsAttributeSelector
-              v-model:name="polygon_attribute_name"
-              v-model:range="polygon_attribute_range"
-              v-model:colorMap="polygon_attribute_color_map"
-              :id="id"
-              :componentId="componentId"
-              :schema="polygonSchema"
-            />
-          </template>
-          <template
-            v-if="coloring_style_key === polyhedron_dict['value'] && hasColorMap('polyhedron')"
-          >
-            <ViewerOptionsAttributeSelector
-              v-model:name="polyhedron_attribute_name"
-              v-model:range="polyhedron_attribute_range"
-              v-model:colorMap="polyhedron_attribute_color_map"
-              :id="id"
-              :componentId="componentId"
-              :schema="polyhedronSchema"
-            />
-          </template>
-        </v-col>
-      </v-row>
+      <v-select
+        v-model="coloring_style_label"
+        :items="coloring_styles.labels"
+        label="Select a coloring style"
+        density="compact"
+        hide-details
+      />
+    </v-col>
+  </v-row>
+  <v-row class="mt-3 px-2" no-gutters>
+    <v-col cols="12" class="ps-7 pe-1">
+      <template v-if="coloring_style_key === color_dict['value']">
+        <ViewerOptionsColorPicker v-model="color" />
+      </template>
+      <template v-if="coloring_style_key === textures_dict['value']">
+        <ViewerOptionsTexturesSelector v-model="textures" :id="id" />
+      </template>
+      <template v-if="coloring_style_key === vertex_dict['value'] && hasColorMap('vertex')">
+        <ViewerOptionsAttributeSelector
+          v-model:name="vertex_attribute_name"
+          v-model:range="vertex_attribute_range"
+          v-model:colorMap="vertex_attribute_color_map"
+          :id="id"
+          :componentId="componentId"
+          :schema="vertexSchema"
+        />
+      </template>
+      <template v-if="coloring_style_key === edge_dict['value'] && hasColorMap('edge')">
+        <ViewerOptionsAttributeSelector
+          v-model:name="edge_attribute_name"
+          v-model:range="edge_attribute_range"
+          v-model:colorMap="edge_attribute_color_map"
+          :id="id"
+          :componentId="componentId"
+          :schema="edgeSchema"
+        />
+      </template>
+      <template v-if="coloring_style_key === cell_dict['value'] && hasColorMap('cell')">
+        <ViewerOptionsAttributeSelector
+          v-model:name="cell_attribute_name"
+          v-model:range="cell_attribute_range"
+          v-model:colorMap="cell_attribute_color_map"
+          :id="id"
+          :componentId="componentId"
+          :schema="cellSchema"
+        />
+      </template>
+      <template v-if="coloring_style_key === polygon_dict['value'] && hasColorMap('polygon')">
+        <ViewerOptionsAttributeSelector
+          v-model:name="polygon_attribute_name"
+          v-model:range="polygon_attribute_range"
+          v-model:colorMap="polygon_attribute_color_map"
+          :id="id"
+          :componentId="componentId"
+          :schema="polygonSchema"
+        />
+      </template>
+      <template v-if="coloring_style_key === polyhedron_dict['value'] && hasColorMap('polyhedron')">
+        <ViewerOptionsAttributeSelector
+          v-model:name="polyhedron_attribute_name"
+          v-model:range="polyhedron_attribute_range"
+          v-model:colorMap="polyhedron_attribute_color_map"
+          :id="id"
+          :componentId="componentId"
+          :schema="polyhedronSchema"
+        />
+      </template>
     </v-col>
   </v-row>
 </template>

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

@@ -0,0 +1,120 @@
+<script setup>
+import ColorMapList from "@ogw_front/components/Viewer/Options/ColorMapList.vue";
+import { getPresetsWithCurrentAtTop } from "@ogw_front/utils/colormap";
+import { useDataStyleStore } from "@ogw_front/stores/data_style";
+import { useHybridViewerStore } from "@ogw_front/stores/hybrid_viewer";
+
+const { dataId, x, y } = defineProps({
+  dataId: { required: false, type: String },
+  x: { required: true, type: Number },
+  y: { required: true, type: Number },
+});
+
+const show = defineModel("show", { type: Boolean, default: false });
+
+const dataStyleStore = useDataStyleStore();
+const hybridViewerStore = useHybridViewerStore();
+
+const componentNames = [
+  { getterKey: "meshPoints", setterKey: "MeshPoints", key: "points" },
+  { getterKey: "meshEdges", setterKey: "MeshEdges", key: "edges" },
+  { getterKey: "meshPolygons", setterKey: "MeshPolygons", key: "polygons" },
+  { getterKey: "meshCells", setterKey: "MeshCells", key: "cells" },
+  { getterKey: "meshPolyhedra", setterKey: "MeshPolyhedra", key: "polyhedra" },
+];
+
+const current = computed(() => {
+  const targetId = dataId;
+  if (!targetId) {
+    return "batlow";
+  }
+
+  const style = dataStyleStore.getStyle(targetId);
+  if (!style) {
+    return "batlow";
+  }
+
+  for (const { key, getterKey } of componentNames) {
+    if (!style[key] || !style[key].coloring) {
+      continue;
+    }
+
+    const activeColoring = style[key].coloring.active;
+    if (!["vertex", "edge", "polygon", "cell", "polyhedron"].includes(activeColoring)) {
+      continue;
+    }
+
+    const attributeType = `${activeColoring.charAt(0).toUpperCase()}${activeColoring.slice(1)}Attribute`;
+    const getterName = `${getterKey}${attributeType}ColorMap`;
+    const getter = dataStyleStore[getterName];
+
+    if (!getter) {
+      continue;
+    }
+
+    const colorMap = getter(targetId);
+    if (colorMap) {
+      return colorMap;
+    }
+  }
+
+  return "batlow";
+});
+
+const quickColormapPresets = computed(() => getPresetsWithCurrentAtTop(current.value));
+
+async function onQuickColormapSelect(preset) {
+  show.value = false;
+  const newMap = preset.Name;
+  const targetId = dataId;
+  if (!targetId) {
+    return;
+  }
+
+  const style = dataStyleStore.getStyle(targetId);
+  if (!style) {
+    return;
+  }
+
+  const promises = [];
+
+  for (const { key, setterKey } of componentNames) {
+    if (!style[key] || !style[key].coloring) {
+      continue;
+    }
+
+    const activeColoring = style[key].coloring.active;
+    if (!["vertex", "edge", "polygon", "cell", "polyhedron"].includes(activeColoring)) {
+      continue;
+    }
+
+    const attributeType = `${activeColoring.charAt(0).toUpperCase() + activeColoring.slice(1)}Attribute`;
+    const setterName = `set${setterKey}${attributeType}ColorMap`;
+    const setter = dataStyleStore[setterName];
+
+    if (setter) {
+      promises.push(setter(targetId, newMap));
+    }
+  }
+
+  await Promise.all(promises);
+
+  hybridViewerStore.remoteRender();
+}
+</script>
+
+<template>
+  <v-menu
+    v-model="show"
+    :target="[x, y - 80]"
+    location="top center"
+    :close-on-content-click="false"
+    eager
+  >
+    <ColorMapList
+      :presets="quickColormapPresets"
+      :selected-preset-name="current"
+      @select="onQuickColormapSelect"
+    />
+  </v-menu>
+</template>