@geode/opengeodeweb-front 10.41.0-rc.1 → 10.41.0-rc.3

package/app/components/HybridRenderingView.vue

@@ -98,10 +98,12 @@ async function handleClick(event: PointerEvent): Promise<void> {
   <ClientOnly>
     <div data-testid="hybridViewer" class="fill-height" style="position: relative; height: 100%">
       <ColormapQuickPicker
+        :key="quickColormap.data_id"
         v-model:show="quickColormap.show"
         :x="quickColormap.x"
         :y="quickColormap.y"
         :data-id="quickColormap.data_id"
+        :block-ids="quickColormap.block_ids"
       />
       <ZoomBoxOverlay v-if="hybridViewerStore.is_zoom_box_active" />
       <ViewToolbar />

package/app/components/RemoteRenderingView.vue

@@ -116,10 +116,12 @@ onMounted(async () => {
   <ClientOnly>
     <div style="position: relative; width: 100%; height: 100%">
       <ColormapQuickPicker
+        :key="quickColormap.data_id"
         v-model:show="quickColormap.show"
         :x="quickColormap.x"
         :y="quickColormap.y"
         :data-id="quickColormap.data_id"
+        :block-ids="quickColormap.block_ids"
       />
       <ViewToolbar />
       <slot name="ui"></slot>

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

@@ -172,7 +172,6 @@ async function setVertexAttributeRangesPerData(ranges: RangesPerData): Promise<v
           v-model:vertex_attribute_color_map="vertex_attribute_color_map"
           v-model:vertex_attribute_no_data_color="vertex_attribute_no_data_color"
           v-model:vertex_attribute_time_step="vertex_attribute_time_step"
-          :capabilities="{ vertex: { available: false } }"
         />
       </template>
     </template>

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

@@ -0,0 +1,245 @@
+<script setup lang="ts">
+import type { RGBAColor } from "@ogw_front/utils/default_styles/constants";
+import ViewerOptionsColoringTypeSelector from "@ogw_front/components/Viewer/Options/ColoringTypeSelector.vue";
+import ViewerOptionsSizeSlider from "@ogw_front/components/Viewer/Options/Sliders/Size.vue";
+import VisibilitySwitch from "@ogw_front/components/Viewer/Options/VisibilitySwitch.vue";
+import back_schemas from "@geode/opengeodeweb-back/opengeodeweb_back_typed_schemas.js";
+import { useDataStyleStore } from "@ogw_front/stores/data_style";
+import { useHybridViewerStore } from "@ogw_front/stores/hybrid_viewer";
+
+interface PointsTarget {
+  componentType: "Surface" | "Line" | "Block";
+  componentIds: string[];
+}
+
+interface Props {
+  modelId: string;
+  targets: PointsTarget[];
+  referenceComponentId?: string;
+}
+
+const { modelId, targets, referenceComponentId = undefined } = defineProps<Props>();
+
+const dataStyleStore = useDataStyleStore();
+const hybridViewerStore = useHybridViewerStore();
+
+// Each component type exposes its own points functions in the data style store
+const POINTS_STYLES = {
+  Surface: {
+    visibility: dataStyleStore.modelSurfacePointsVisibility,
+    size: dataStyleStore.modelSurfacePointsSize,
+    color: dataStyleStore.modelSurfacePointsColor,
+    activeColoring: dataStyleStore.modelSurfacePointsActiveColoring,
+    vertexAttributeName: dataStyleStore.modelSurfacePointsVertexAttributeName,
+    vertexAttributeItem: dataStyleStore.modelSurfacePointsVertexAttributeItem,
+    vertexAttributeRange: dataStyleStore.modelSurfacePointsVertexAttributeRange,
+    vertexAttributeColorMap: dataStyleStore.modelSurfacePointsVertexAttributeColorMap,
+    vertexAttributeNoDataColor: dataStyleStore.modelSurfacePointsVertexAttributeNoDataColor,
+    setVisibility: dataStyleStore.setModelSurfacesPointsVisibility,
+    setSize: dataStyleStore.setModelSurfacesPointsSize,
+    setColor: dataStyleStore.setModelSurfacesPointsColor,
+    setActiveColoring: dataStyleStore.setModelSurfacesPointsActiveColoring,
+    setVertexAttributeName: dataStyleStore.setModelSurfacesPointsVertexAttributeName,
+    setVertexAttributeItem: dataStyleStore.setModelSurfacesPointsVertexAttributeItem,
+    setVertexAttributeRange: dataStyleStore.setModelSurfacesPointsVertexAttributeRange,
+    setVertexAttributeColorMap: dataStyleStore.setModelSurfacesPointsVertexAttributeColorMap,
+    setVertexAttributeNoDataColor: dataStyleStore.setModelSurfacesPointsVertexAttributeNoDataColor,
+  },
+  Line: {
+    visibility: dataStyleStore.modelLinePointsVisibility,
+    size: dataStyleStore.modelLinePointsSize,
+    color: dataStyleStore.modelLinePointsColor,
+    activeColoring: dataStyleStore.modelLinePointsActiveColoring,
+    vertexAttributeName: dataStyleStore.modelLinePointsVertexAttributeName,
+    vertexAttributeItem: dataStyleStore.modelLinePointsVertexAttributeItem,
+    vertexAttributeRange: dataStyleStore.modelLinePointsVertexAttributeRange,
+    vertexAttributeColorMap: dataStyleStore.modelLinePointsVertexAttributeColorMap,
+    vertexAttributeNoDataColor: dataStyleStore.modelLinePointsVertexAttributeNoDataColor,
+    setVisibility: dataStyleStore.setModelLinesPointsVisibility,
+    setSize: dataStyleStore.setModelLinesPointsSize,
+    setColor: dataStyleStore.setModelLinesPointsColor,
+    setActiveColoring: dataStyleStore.setModelLinesPointsActiveColoring,
+    setVertexAttributeName: dataStyleStore.setModelLinesPointsVertexAttributeName,
+    setVertexAttributeItem: dataStyleStore.setModelLinesPointsVertexAttributeItem,
+    setVertexAttributeRange: dataStyleStore.setModelLinesPointsVertexAttributeRange,
+    setVertexAttributeColorMap: dataStyleStore.setModelLinesPointsVertexAttributeColorMap,
+    setVertexAttributeNoDataColor: dataStyleStore.setModelLinesPointsVertexAttributeNoDataColor,
+  },
+  Block: {
+    visibility: dataStyleStore.modelBlockPointsVisibility,
+    size: dataStyleStore.modelBlockPointsSize,
+    color: dataStyleStore.modelBlockPointsColor,
+    activeColoring: dataStyleStore.modelBlockPointsActiveColoring,
+    vertexAttributeName: dataStyleStore.modelBlockPointsVertexAttributeName,
+    vertexAttributeItem: dataStyleStore.modelBlockPointsVertexAttributeItem,
+    vertexAttributeRange: dataStyleStore.modelBlockPointsVertexAttributeRange,
+    vertexAttributeColorMap: dataStyleStore.modelBlockPointsVertexAttributeColorMap,
+    vertexAttributeNoDataColor: dataStyleStore.modelBlockPointsVertexAttributeNoDataColor,
+    setVisibility: dataStyleStore.setModelBlocksPointsVisibility,
+    setSize: dataStyleStore.setModelBlocksPointsSize,
+    setColor: dataStyleStore.setModelBlocksPointsColor,
+    setActiveColoring: dataStyleStore.setModelBlocksPointsActiveColoring,
+    setVertexAttributeName: dataStyleStore.setModelBlocksPointsVertexAttributeName,
+    setVertexAttributeItem: dataStyleStore.setModelBlocksPointsVertexAttributeItem,
+    setVertexAttributeRange: dataStyleStore.setModelBlocksPointsVertexAttributeRange,
+    setVertexAttributeColorMap: dataStyleStore.setModelBlocksPointsVertexAttributeColorMap,
+    setVertexAttributeNoDataColor: dataStyleStore.setModelBlocksPointsVertexAttributeNoDataColor,
+  },
+};
+type PointsStyle = (typeof POINTS_STYLES)[PointsTarget["componentType"]];
+
+// Values are read from the first target, changes are applied to every target
+const pointsStyle = computed<PointsStyle | undefined>(() => {
+  const [reference] = targets;
+  return reference === undefined ? undefined : POINTS_STYLES[reference.componentType];
+});
+const allComponentIds = computed<string[]>(() => targets.flatMap((target) => target.componentIds));
+
+async function applyPointsStyle(
+  setter: (style: PointsStyle, componentIds: string[]) => Promise<unknown>,
+): Promise<void> {
+  await Promise.all(
+    targets.map(async (target) => {
+      await setter(POINTS_STYLES[target.componentType], target.componentIds);
+    }),
+  );
+  hybridViewerStore.remoteRender();
+}
+
+const visibility = computed<boolean | undefined>({
+  get: () => pointsStyle.value?.visibility(modelId, referenceComponentId),
+  set: async (newValue) => {
+    if (newValue === undefined) {
+      return;
+    }
+    await applyPointsStyle((style, ids) => style.setVisibility(modelId, ids, newValue));
+  },
+});
+
+const size = computed<number | undefined>({
+  get: () => pointsStyle.value?.size(modelId, referenceComponentId),
+  set: async (newValue) => {
+    if (newValue === undefined) {
+      return;
+    }
+    await applyPointsStyle((style, ids) => style.setSize(modelId, ids, newValue));
+  },
+});
+
+const activeColoring = computed<string | undefined>({
+  get: () => pointsStyle.value?.activeColoring(modelId, referenceComponentId),
+  set: async (newValue) => {
+    if (newValue === undefined) {
+      return;
+    }
+    await applyPointsStyle((style, ids) => style.setActiveColoring(modelId, ids, newValue));
+  },
+});
+
+const color = computed<RGBAColor | undefined>({
+  get: () => pointsStyle.value?.color(modelId, referenceComponentId),
+  set: async (newValue) => {
+    if (newValue === undefined) {
+      return;
+    }
+    await applyPointsStyle((style, ids) => style.setColor(modelId, ids, newValue));
+  },
+});
+
+const vertexAttributeName = computed<string | undefined>({
+  get: () => pointsStyle.value?.vertexAttributeName(modelId, referenceComponentId),
+  set: async (newValue) => {
+    if (newValue === undefined) {
+      return;
+    }
+    await applyPointsStyle((style, ids) => style.setVertexAttributeName(modelId, ids, newValue));
+  },
+});
+
+const vertexAttributeItem = computed<number | undefined>({
+  get: () => pointsStyle.value?.vertexAttributeItem(modelId, referenceComponentId),
+  set: async (newValue) => {
+    if (newValue === undefined) {
+      return;
+    }
+    await applyPointsStyle((style, ids) => style.setVertexAttributeItem(modelId, ids, newValue));
+  },
+});
+
+const vertexAttributeRange = computed<(number | undefined)[] | undefined>({
+  get: () => pointsStyle.value?.vertexAttributeRange(modelId, referenceComponentId),
+  set: async (newValue) => {
+    if (newValue === undefined) {
+      return;
+    }
+    const [minimum, maximum] = newValue;
+    if (minimum === undefined || maximum === undefined) {
+      return;
+    }
+    await applyPointsStyle((style, ids) =>
+      style.setVertexAttributeRange(modelId, ids, minimum, maximum),
+    );
+  },
+});
+
+const vertexAttributeColorMap = computed<string | undefined>({
+  get: () => pointsStyle.value?.vertexAttributeColorMap(modelId, referenceComponentId),
+  set: async (newValue) => {
+    await applyPointsStyle((style, ids) =>
+      style.setVertexAttributeColorMap(modelId, ids, newValue),
+    );
+  },
+});
+
+const vertexAttributeNoDataColor = computed<RGBAColor | undefined>({
+  get: () => pointsStyle.value?.vertexAttributeNoDataColor(modelId, referenceComponentId),
+  set: async (newValue) => {
+    if (newValue === undefined) {
+      return;
+    }
+    await applyPointsStyle((style, ids) =>
+      style.setVertexAttributeNoDataColor(modelId, ids, newValue),
+    );
+  },
+});
+
+const capabilities = {
+  color: { available: true },
+  textures: { available: false },
+  vertex: { available: true },
+  edge: { available: false },
+  cell: { available: false },
+  polygon: { available: false },
+  polyhedron: { available: false },
+};
+
+const backSchemas = back_schemas.opengeodeweb_back;
+const attributeSchemas = {
+  vertex: {
+    names: backSchemas.model_component_vertex_attribute_names,
+    range: backSchemas.model_component_vertex_attribute_range,
+  },
+};
+</script>
+
+<template>
+  <div class="mt-2" data-testid="modelComponentPointsOptions">
+    <VisibilitySwitch data-testid="modelComponentPointsVisibilitySwitch" v-model="visibility" />
+    <template v-if="visibility">
+      <ViewerOptionsSizeSlider data-testid="modelComponentPointsSizeSlider" v-model="size" />
+      <ViewerOptionsColoringTypeSelector
+        :id="modelId"
+        :componentIds="allComponentIds"
+        v-model:coloring_style_key="activeColoring"
+        v-model:color="color"
+        v-model:vertex_attribute_name="vertexAttributeName"
+        v-model:vertex_attribute_item="vertexAttributeItem"
+        v-model:vertex_attribute_range="vertexAttributeRange"
+        v-model:vertex_attribute_color_map="vertexAttributeColorMap"
+        v-model:vertex_attribute_no_data_color="vertexAttributeNoDataColor"
+        :capabilities="capabilities"
+        :schemas="attributeSchemas"
+      />
+    </template>
+  </div>
+</template>

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

@@ -0,0 +1,141 @@
+<script setup lang="ts">
+import {
+  type ModelMenuItemProps,
+  useModelMenuContext,
+} from "@ogw_front/composables/model_menu_context";
+import OptionsSection from "@ogw_front/components/Viewer/Options/OptionsSection.vue";
+import ViewerGenericModelComponentPointsOptions from "@ogw_front/components/Viewer/Generic/Model/ComponentPointsOptions.vue";
+import VisibilitySwitch from "@ogw_front/components/Viewer/Options/VisibilitySwitch.vue";
+import { useBatchStyle } from "@ogw_front/composables/batch_style";
+import { useDataStore } from "@ogw_front/stores/data";
+import { useDataStyleStore } from "@ogw_front/stores/data_style";
+import { useHybridViewerStore } from "@ogw_front/stores/hybrid_viewer";
+
+// Corners have no points options: their points are the corners themselves
+const POINTS_TYPE_TITLES = {
+  Surface: "Surfaces Points Options",
+  Line: "Lines Points Options",
+  Block: "Blocks Points Options",
+} as const;
+type PointsComponentType = keyof typeof POINTS_TYPE_TITLES;
+const POINTS_COMPONENT_TYPES: PointsComponentType[] = ["Surface", "Line", "Block"];
+
+function isPointsComponentType(type: string | undefined): type is PointsComponentType {
+  return type !== undefined && type in POINTS_TYPE_TITLES;
+}
+
+interface Props {
+  itemProps: ModelMenuItemProps;
+}
+
+const { itemProps } = defineProps<Props>();
+
+const dataStore = useDataStore();
+const dataStyleStore = useDataStyleStore();
+const hybridViewerStore = useHybridViewerStore();
+const { applyBatchStyle } = useBatchStyle();
+
+const { modelId, componentId, componentType, collections, targetComponentIds } =
+  useModelMenuContext(() => itemProps);
+
+const modelPointsVisibility = computed<boolean>({
+  get: () => dataStyleStore.modelPointsVisibility(modelId.value),
+  set: async (newValue) => {
+    await applyBatchStyle(modelId.value, (targetId: string) =>
+      dataStyleStore.setModelPointsVisibility(targetId, newValue),
+    );
+    hybridViewerStore.remoteRender();
+  },
+});
+
+const pointsComponentType = computed<PointsComponentType | undefined>(() =>
+  isPointsComponentType(componentType.value) ? componentType.value : undefined,
+);
+
+const allComponentsTargets = ref<{ componentType: PointsComponentType; componentIds: string[] }[]>(
+  [],
+);
+watch(
+  modelId,
+  async (currentModelId) => {
+    const targets = await Promise.all(
+      POINTS_COMPONENT_TYPES.map(async (type) => ({
+        componentType: type,
+        componentIds: await dataStore.getMeshComponentGeodeIds(currentModelId, type),
+      })),
+    );
+    if (modelId.value === currentModelId) {
+      allComponentsTargets.value = targets.filter((target) => target.componentIds.length > 0);
+    }
+  },
+  { immediate: true },
+);
+
+const typeTargets = computed(() =>
+  pointsComponentType.value === undefined
+    ? []
+    : [{ componentType: pointsComponentType.value, componentIds: targetComponentIds.value }],
+);
+const typeReferenceId = computed<string | undefined>(() =>
+  collections.value ? targetComponentIds.value[0] : undefined,
+);
+
+const componentTargets = computed(() =>
+  pointsComponentType.value === undefined || componentId.value === undefined
+    ? []
+    : [{ componentType: pointsComponentType.value, componentIds: [componentId.value] }],
+);
+</script>
+
+<template>
+  <v-sheet class="model-points-card" color="transparent">
+    <OptionsSection title="Model Points Options">
+      <VisibilitySwitch data-testid="modelPointsVisibilitySwitch" v-model="modelPointsVisibility" />
+    </OptionsSection>
+
+    <OptionsSection
+      v-if="!componentType && !componentId && allComponentsTargets.length > 0"
+      title="Components Points Options"
+      data-testid="modelPointsComponentsOptions"
+      class="mt-4"
+    >
+      <ViewerGenericModelComponentPointsOptions
+        :modelId="modelId"
+        :targets="allComponentsTargets"
+      />
+    </OptionsSection>
+
+    <OptionsSection
+      v-if="pointsComponentType"
+      :title="POINTS_TYPE_TITLES[pointsComponentType]"
+      data-testid="modelPointsComponentTypeOptions"
+      class="mt-4"
+    >
+      <ViewerGenericModelComponentPointsOptions
+        :modelId="modelId"
+        :targets="typeTargets"
+        :referenceComponentId="typeReferenceId"
+      />
+    </OptionsSection>
+
+    <OptionsSection
+      v-if="pointsComponentType && componentId"
+      title="Component Points Options"
+      data-testid="modelPointsComponentOptions"
+      class="mt-4"
+    >
+      <ViewerGenericModelComponentPointsOptions
+        :modelId="modelId"
+        :targets="componentTargets"
+        :referenceComponentId="componentId"
+      />
+    </OptionsSection>
+  </v-sheet>
+</template>
+
+<style scoped>
+.model-points-card {
+  padding-top: 12px;
+  overflow-x: hidden;
+}
+</style>

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

@@ -1,95 +1,35 @@
 <script setup lang="ts">
+import {
+  type ModelMenuItemProps,
+  useModelMenuContext,
+} from "@ogw_front/composables/model_menu_context";
 import BlocksOptions from "./BlocksOptions.vue";
-import type { CollectionComponent } from "@ogw_front/stores/data_helpers/collections";
 import CornersOptions from "./CornersOptions.vue";
 import LinesOptions from "./LinesOptions.vue";
-import { MESH_COMPONENT_TYPES } from "@ogw_front/utils/default_styles";
 import OptionsSection from "@ogw_front/components/Viewer/Options/OptionsSection.vue";
 import type { RGBAColor } from "@ogw_front/utils/default_styles/constants";
 import SurfacesOptions from "./SurfacesOptions.vue";
 import ViewerOptionsColoringTypeSelector from "@ogw_front/components/Viewer/Options/ColoringTypeSelector.vue";
 import VisibilitySwitch from "@ogw_front/components/Viewer/Options/VisibilitySwitch.vue";
 import { useBatchStyle } from "@ogw_front/composables/batch_style";
-import { useDataStore } from "@ogw_front/stores/data";
 import { useDataStyleStore } from "@ogw_front/stores/data_style";
 import { useHybridViewerStore } from "@ogw_front/stores/hybrid_viewer";
 
 const dataStyleStore = useDataStyleStore();
 const hybridViewerStore = useHybridViewerStore();
-const dataStore = useDataStore();
 const { applyBatchStyle } = useBatchStyle();
 
 interface Props {
-  itemProps: Record<string, unknown>;
+  itemProps: ModelMenuItemProps;
 }
 
 const { itemProps } = defineProps<Props>();
 
-const modelId = computed<string>(() => itemProps.meta_data.modelId || itemProps.id);
-const componentId = computed<string | undefined>(() => itemProps.meta_data.pickedComponentId);
+const { modelId, componentId, componentType, collections, targetComponentIds } =
+  useModelMenuContext(() => itemProps);
 function visibleComponents(targetId: string): string[] {
   return dataStyleStore.visibleMeshComponents(targetId).value || [];
 }
-const componentType = ref<string | undefined>(undefined);
-const collections = ref<CollectionComponent[] | undefined>(undefined);
-
-watch(
-  () => [
-    modelId.value,
-    componentId.value,
-    itemProps.meta_data.viewer_type,
-    itemProps.meta_data.modelComponentType,
-  ],
-  async () => {
-    componentType.value = undefined;
-    collections.value = undefined;
-    if (itemProps.meta_data.viewer_type === "model_component_type") {
-      const { modelComponentType, targetComponentIds: ids } = itemProps.meta_data;
-      if (MESH_COMPONENT_TYPES.includes(modelComponentType)) {
-        componentType.value = modelComponentType;
-      } else {
-        const collectionsByType = await dataStore.fetchAllCollectionComponents(modelId.value);
-        collections.value = collectionsByType[modelComponentType].filter((collection) =>
-          collection.children.every((child) => ids.includes(child.id)),
-        );
-        componentType.value = collections.value[0].children[0].category;
-      }
-    } else if (componentId.value && modelId.value) {
-      const currentModelId = modelId.value;
-      const currentCompId = componentId.value;
-      const type = await dataStore.meshComponentType(currentModelId, currentCompId);
-      if (
-        modelId.value === currentModelId &&
-        componentId.value === currentCompId &&
-        itemProps.meta_data.viewer_type !== "model_component_type"
-      ) {
-        componentType.value = type;
-      }
-    }
-  },
-  { immediate: true },
-);
-
-const targetComponentIds = ref<string[]>([]);
-watch(
-  () => [modelId.value, componentType.value, itemProps.meta_data.targetComponentIds],
-  async () => {
-    targetComponentIds.value = [];
-    if (itemProps.meta_data.targetComponentIds) {
-      targetComponentIds.value = itemProps.meta_data.targetComponentIds;
-      return;
-    }
-    if (componentType.value && modelId.value) {
-      const currentModelId = modelId.value;
-      const currentType = componentType.value;
-      const ids = await dataStore.getMeshComponentGeodeIds(currentModelId, currentType);
-      if (modelId.value === currentModelId && componentType.value === currentType) {
-        targetComponentIds.value = ids;
-      }
-    }
-  },
-  { immediate: true },
-);
 
 const modelVisibility = computed<boolean | undefined>({
   get: () => dataStyleStore.modelVisibility(modelId.value),

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

@@ -2,45 +2,14 @@
 import ViewerContextMenuItem, {
   type ItemProps,
 } from "@ogw_front/components/Viewer/ContextMenu/ContextMenuItem.vue";
+import ModelPointsCard from "./ModelPointsCard.vue";
 import SurfacePoints from "@ogw_front/assets/viewer_svgs/surface_points.svg";
-import ViewerOptionsSizeSlider from "@ogw_front/components/Viewer/Options/Sliders/Size.vue";
-import ViewerOptionsVisibilitySwitch from "@ogw_front/components/Viewer/Options/VisibilitySwitch.vue";
-import { useBatchStyle } from "@ogw_front/composables/batch_style";
-import { useDataStyleStore } from "@ogw_front/stores/data_style";
-import { useHybridViewerStore } from "@ogw_front/stores/hybrid_viewer";
-
-const dataStyleStore = useDataStyleStore();
-const hybridViewerStore = useHybridViewerStore();
-const { applyBatchStyle } = useBatchStyle();
 
 interface Props {
   itemProps: ItemProps & { index: number };
 }
 
 const { itemProps } = defineProps<Props>();
-
-const id = computed<string>(
-  () => (itemProps.meta_data.modelId as string | undefined) || itemProps.id,
-);
-
-const visibility = computed<boolean>({
-  get: () => dataStyleStore.modelPointsVisibility(id.value),
-  set: async (newValue) => {
-    await applyBatchStyle(id.value, (targetId: string) =>
-      dataStyleStore.setModelPointsVisibility(targetId, newValue),
-    );
-    hybridViewerStore.remoteRender();
-  },
-});
-const size = computed<number>({
-  get: () => dataStyleStore.modelPointsSize(id.value),
-  set: async (newValue) => {
-    await applyBatchStyle(id.value, (targetId: string) =>
-      dataStyleStore.setModelPointsSize(targetId, newValue),
-    );
-    hybridViewerStore.remoteRender();
-  },
-});
 </script>
 
 <template>
@@ -52,14 +21,7 @@ const size = computed<number>({
     :btnImage="SurfacePoints"
   >
     <template #options>
-      <ViewerOptionsVisibilitySwitch
-        data-testid="modelPointsVisibilitySwitch"
-        v-model="visibility"
-      />
-      <template v-if="visibility">
-        <v-divider class="my-2" />
-        <ViewerOptionsSizeSlider data-testid="modelPointsSizeSlider" v-model="size" />
-      </template>
+      <ModelPointsCard :itemProps="itemProps" />
     </template>
   </ViewerContextMenuItem>
 </template>

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

@@ -5,18 +5,21 @@ import TimeStepSlider from "@ogw_front/components/Viewer/Options/TimeStepSlider.
 
 import { getPresetsWithCurrentAtTop } from "@ogw_front/utils/colormap";
 import { useGlobalAttributeStyle } from "@ogw_front/composables/global_attribute_style";
+import { useModelAttributeStyle } from "@ogw_front/composables/model_attribute_style";
 
 interface Props {
   dataId?: string;
+  blockIds?: number[];
   x: number;
   y: number;
 }
 
-const { dataId = undefined, x, y } = defineProps<Props>();
+const { dataId = undefined, blockIds = undefined, x, y } = defineProps<Props>();
 
 const show = defineModel<boolean>("show", { default: false });
 
 const dataIdRef = computed<string>(() => dataId);
+// The parent keys this picker on the picked data: a mesh or a model, so the style is chosen once here
 const {
   currentColormap,
   currentRange,
@@ -25,7 +28,13 @@ const {
   currentTimeSteps,
   currentTimeStep,
   loadTimeSteps,
-} = useGlobalAttributeStyle(dataIdRef);
+} =
+  blockIds === undefined
+    ? useGlobalAttributeStyle(dataIdRef)
+    : useModelAttributeStyle(
+        dataIdRef,
+        computed<number[]>(() => blockIds),
+      );
 
 watch(show, async (isShown) => {
   if (isShown) {