@geode/opengeodeweb-front 10.34.0-rc.21 → 10.34.0-rc.22

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

@@ -1,4 +1,5 @@
 <script setup lang="ts">
+import type { CollectionComponent } from "@ogw_front/stores/data_helpers/collections";
 import OptionsSection from "@ogw_front/components/Viewer/Options/OptionsSection.vue";
 import type { RGBAColor } from "@ogw_front/utils/default_styles/constants";
 import ViewerOptionsColoringTypeSelector from "@ogw_front/components/Viewer/Options/ColoringTypeSelector.vue";
@@ -11,16 +12,29 @@ interface Props {
   modelId: string;
   blockId?: string;
   targetBlockIds: string[];
+  collections?: CollectionComponent[];
 }
 
-const { modelId, blockId = undefined, targetBlockIds } = defineProps<Props>();
+const {
+  modelId,
+  blockId = undefined,
+  targetBlockIds,
+  collections = undefined,
+} = defineProps<Props>();
 
 const dataStyleStore = useDataStyleStore();
 const hybridViewerStore = useHybridViewerStore();
 
+const referenceBlockId = computed<string | undefined>(() =>
+  collections ? targetBlockIds[0] : undefined,
+);
+
 // Visibility
 const blocksVisibility = computed<boolean>({
-  get: () => dataStyleStore.modelComponentTypeVisibility(modelId, "Block"),
+  get: () =>
+    collections
+      ? targetBlockIds.every((id) => dataStyleStore.modelBlockVisibility(modelId, id))
+      : dataStyleStore.modelComponentTypeVisibility(modelId, "Block"),
   set: async (newValue) => {
     await dataStyleStore.setModelBlocksVisibility(modelId, targetBlockIds, newValue);
     hybridViewerStore.remoteRender();
@@ -40,7 +54,8 @@ const blockVisibility = computed<boolean | undefined>({
 
 // Color
 const blocksColor = computed<RGBAColor | undefined>({
-  get: () => dataStyleStore.modelComponentTypeColor(modelId, "Block") as RGBAColor | undefined,
+  get: () =>
+    dataStyleStore.modelBlockColor(modelId, referenceBlockId.value) as RGBAColor | undefined,
   set: async (color) => {
     await dataStyleStore.setModelBlocksColor(modelId, targetBlockIds, color);
     hybridViewerStore.remoteRender();
@@ -60,12 +75,25 @@ const blockColor = computed<RGBAColor | undefined>({
 
 const blocksActiveColoring = computed<string | undefined>({
   get: () =>
-    dataStyleStore.getModelComponentTypeActiveColoring(modelId, "Block") as string | undefined,
+    dataStyleStore.modelBlockActiveColoring(modelId, referenceBlockId.value) as string | undefined,
   set: async (coloringType) => {
     if (typeof coloringType !== "string") {
       return;
     }
-    await dataStyleStore.setModelBlocksActiveColoring(modelId, targetBlockIds, coloringType);
+    if (collections && coloringType === "random") {
+      await Promise.all(
+        collections.map((collection) =>
+          dataStyleStore.setModelBlocksActiveColoring(
+            modelId,
+            collection.children.map((child) => child.id),
+            coloringType,
+            collection.id,
+          ),
+        ),
+      );
+    } else {
+      await dataStyleStore.setModelBlocksActiveColoring(modelId, targetBlockIds, coloringType);
+    }
     hybridViewerStore.remoteRender();
   },
 });
@@ -83,7 +111,7 @@ const blockActiveColoring = computed<string | undefined>({
 
 // Group Attributes
 const blocksVertexAttributeName = computed<string | undefined>({
-  get: () => dataStyleStore.modelBlocksVertexAttributeName(modelId),
+  get: () => dataStyleStore.modelBlocksVertexAttributeName(modelId, referenceBlockId.value),
   set: async (newValue) => {
     if (newValue === undefined) {
       return;
@@ -94,7 +122,7 @@ const blocksVertexAttributeName = computed<string | undefined>({
 });
 
 const blocksVertexAttributeItem = computed<string | undefined>({
-  get: () => dataStyleStore.modelBlocksVertexAttributeItem(modelId),
+  get: () => dataStyleStore.modelBlocksVertexAttributeItem(modelId, referenceBlockId.value),
   set: async (newValue) => {
     await dataStyleStore.setModelBlocksVertexAttributeItem(modelId, targetBlockIds, newValue);
     hybridViewerStore.remoteRender();
@@ -102,7 +130,7 @@ const blocksVertexAttributeItem = computed<string | undefined>({
 });
 
 const blocksVertexAttributeRange = computed<[number, number] | undefined>({
-  get: () => dataStyleStore.modelBlocksVertexAttributeRange(modelId),
+  get: () => dataStyleStore.modelBlocksVertexAttributeRange(modelId, referenceBlockId.value),
   set: async (newValue) => {
     const [minimum, maximum] = newValue;
     if (minimum === undefined || maximum === undefined) {
@@ -119,7 +147,7 @@ const blocksVertexAttributeRange = computed<[number, number] | undefined>({
 });
 
 const blocksVertexAttributeColorMap = computed<Map<string, RGBAColor> | undefined>({
-  get: () => dataStyleStore.modelBlocksVertexAttributeColorMap(modelId),
+  get: () => dataStyleStore.modelBlocksVertexAttributeColorMap(modelId, referenceBlockId.value),
   set: async (newValue) => {
     await dataStyleStore.setModelBlocksVertexAttributeColorMap(modelId, targetBlockIds, newValue);
     hybridViewerStore.remoteRender();
@@ -127,7 +155,10 @@ const blocksVertexAttributeColorMap = computed<Map<string, RGBAColor> | undefine
 });
 
 const blocksVertexAttributeNoDataColor = computed<RGBAColor | undefined>({
-  get: () => dataStyleStore.modelBlocksVertexAttributeNoDataColor(modelId) as RGBAColor | undefined,
+  get: () =>
+    dataStyleStore.modelBlocksVertexAttributeNoDataColor(modelId, referenceBlockId.value) as
+      | RGBAColor
+      | undefined,
   set: async (newValue) => {
     await dataStyleStore.setModelBlocksVertexAttributeNoDataColor(
       modelId,
@@ -139,7 +170,7 @@ const blocksVertexAttributeNoDataColor = computed<RGBAColor | undefined>({
 });
 
 const blocksPolyhedronAttributeName = computed<string | undefined>({
-  get: () => dataStyleStore.modelBlocksPolyhedronAttributeName(modelId),
+  get: () => dataStyleStore.modelBlocksPolyhedronAttributeName(modelId, referenceBlockId.value),
   set: async (newValue) => {
     if (newValue === undefined) {
       return;
@@ -150,7 +181,7 @@ const blocksPolyhedronAttributeName = computed<string | undefined>({
 });
 
 const blocksPolyhedronAttributeItem = computed<string | undefined>({
-  get: () => dataStyleStore.modelBlocksPolyhedronAttributeItem(modelId),
+  get: () => dataStyleStore.modelBlocksPolyhedronAttributeItem(modelId, referenceBlockId.value),
   set: async (newValue) => {
     await dataStyleStore.setModelBlocksPolyhedronAttributeItem(modelId, targetBlockIds, newValue);
     hybridViewerStore.remoteRender();
@@ -158,7 +189,7 @@ const blocksPolyhedronAttributeItem = computed<string | undefined>({
 });
 
 const blocksPolyhedronAttributeRange = computed<[number, number] | undefined>({
-  get: () => dataStyleStore.modelBlocksPolyhedronAttributeRange(modelId),
+  get: () => dataStyleStore.modelBlocksPolyhedronAttributeRange(modelId, referenceBlockId.value),
   set: async (newValue) => {
     const [minimum, maximum] = newValue;
     if (minimum === undefined || maximum === undefined) {
@@ -175,7 +206,7 @@ const blocksPolyhedronAttributeRange = computed<[number, number] | undefined>({
 });
 
 const blocksPolyhedronAttributeColorMap = computed<Map<string, RGBAColor> | undefined>({
-  get: () => dataStyleStore.modelBlocksPolyhedronAttributeColorMap(modelId),
+  get: () => dataStyleStore.modelBlocksPolyhedronAttributeColorMap(modelId, referenceBlockId.value),
   set: async (newValue) => {
     await dataStyleStore.setModelBlocksPolyhedronAttributeColorMap(
       modelId,
@@ -188,7 +219,9 @@ const blocksPolyhedronAttributeColorMap = computed<Map<string, RGBAColor> | unde
 
 const blocksPolyhedronAttributeNoDataColor = computed<RGBAColor | undefined>({
   get: () =>
-    dataStyleStore.modelBlocksPolyhedronAttributeNoDataColor(modelId) as RGBAColor | undefined,
+    dataStyleStore.modelBlocksPolyhedronAttributeNoDataColor(modelId, referenceBlockId.value) as
+      | RGBAColor
+      | undefined,
   set: async (newValue) => {
     await dataStyleStore.setModelBlocksPolyhedronAttributeNoDataColor(
       modelId,

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

@@ -1,4 +1,5 @@
 <script setup lang="ts">
+import type { CollectionComponent } from "@ogw_front/stores/data_helpers/collections";
 import OptionsSection from "@ogw_front/components/Viewer/Options/OptionsSection.vue";
 import type { RGBAColor } from "@ogw_front/utils/default_styles/constants";
 import ViewerOptionsColoringTypeSelector from "@ogw_front/components/Viewer/Options/ColoringTypeSelector.vue";
@@ -11,16 +12,29 @@ interface Props {
   modelId: string;
   cornerId?: string;
   targetCornerIds: string[];
+  collections?: CollectionComponent[];
 }
 
-const { modelId, cornerId = undefined, targetCornerIds } = defineProps<Props>();
+const {
+  modelId,
+  cornerId = undefined,
+  targetCornerIds,
+  collections = undefined,
+} = defineProps<Props>();
 
 const dataStyleStore = useDataStyleStore();
 const hybridViewerStore = useHybridViewerStore();
 
+const referenceCornerId = computed<string | undefined>(() =>
+  collections ? targetCornerIds[0] : undefined,
+);
+
 // Visibility
 const cornersVisibility = computed<boolean>({
-  get: () => dataStyleStore.modelComponentTypeVisibility(modelId, "Corner"),
+  get: () =>
+    collections
+      ? targetCornerIds.every((id) => dataStyleStore.modelCornerVisibility(modelId, id))
+      : dataStyleStore.modelComponentTypeVisibility(modelId, "Corner"),
   set: async (newValue) => {
     await dataStyleStore.setModelCornersVisibility(modelId, targetCornerIds, newValue);
     hybridViewerStore.remoteRender();
@@ -40,7 +54,8 @@ const cornerVisibility = computed<boolean | undefined>({
 
 // Color
 const cornersColor = computed<RGBAColor | undefined>({
-  get: () => dataStyleStore.modelComponentTypeColor(modelId, "Corner") as RGBAColor | undefined,
+  get: () =>
+    dataStyleStore.modelCornerColor(modelId, referenceCornerId.value) as RGBAColor | undefined,
   set: async (color) => {
     await dataStyleStore.setModelCornersColor(modelId, targetCornerIds, color);
     hybridViewerStore.remoteRender();
@@ -60,12 +75,27 @@ const cornerColor = computed<RGBAColor | undefined>({
 
 const cornersActiveColoring = computed<string | undefined>({
   get: () =>
-    dataStyleStore.getModelComponentTypeActiveColoring(modelId, "Corner") as string | undefined,
+    dataStyleStore.modelCornerActiveColoring(modelId, referenceCornerId.value) as
+      | string
+      | undefined,
   set: async (coloringType) => {
     if (typeof coloringType !== "string") {
       return;
     }
-    await dataStyleStore.setModelCornersActiveColoring(modelId, targetCornerIds, coloringType);
+    if (collections && coloringType === "random") {
+      await Promise.all(
+        collections.map((collection) =>
+          dataStyleStore.setModelCornersActiveColoring(
+            modelId,
+            collection.children.map((child) => child.id),
+            coloringType,
+            collection.id,
+          ),
+        ),
+      );
+    } else {
+      await dataStyleStore.setModelCornersActiveColoring(modelId, targetCornerIds, coloringType);
+    }
     hybridViewerStore.remoteRender();
   },
 });
@@ -83,7 +113,7 @@ const cornerActiveColoring = computed<string | undefined>({
 
 // Group Attributes
 const cornersVertexAttributeName = computed<string | undefined>({
-  get: () => dataStyleStore.modelCornersVertexAttributeName(modelId),
+  get: () => dataStyleStore.modelCornersVertexAttributeName(modelId, referenceCornerId.value),
   set: async (newValue) => {
     if (newValue === undefined) {
       return;
@@ -94,7 +124,7 @@ const cornersVertexAttributeName = computed<string | undefined>({
 });
 
 const cornersVertexAttributeItem = computed<string | undefined>({
-  get: () => dataStyleStore.modelCornersVertexAttributeItem(modelId),
+  get: () => dataStyleStore.modelCornersVertexAttributeItem(modelId, referenceCornerId.value),
   set: async (newValue) => {
     await dataStyleStore.setModelCornersVertexAttributeItem(modelId, targetCornerIds, newValue);
     hybridViewerStore.remoteRender();
@@ -102,7 +132,7 @@ const cornersVertexAttributeItem = computed<string | undefined>({
 });
 
 const cornersVertexAttributeRange = computed<[number, number] | undefined>({
-  get: () => dataStyleStore.modelCornersVertexAttributeRange(modelId),
+  get: () => dataStyleStore.modelCornersVertexAttributeRange(modelId, referenceCornerId.value),
   set: async (newValue) => {
     const [minimum, maximum] = newValue;
     if (minimum === undefined || maximum === undefined) {
@@ -119,7 +149,7 @@ const cornersVertexAttributeRange = computed<[number, number] | undefined>({
 });
 
 const cornersVertexAttributeColorMap = computed<ColorMap | undefined>({
-  get: () => dataStyleStore.modelCornersVertexAttributeColorMap(modelId),
+  get: () => dataStyleStore.modelCornersVertexAttributeColorMap(modelId, referenceCornerId.value),
   set: async (newValue) => {
     await dataStyleStore.setModelCornersVertexAttributeColorMap(modelId, targetCornerIds, newValue);
     hybridViewerStore.remoteRender();
@@ -128,7 +158,9 @@ const cornersVertexAttributeColorMap = computed<ColorMap | undefined>({
 
 const cornersVertexAttributeNoDataColor = computed<RGBAColor | undefined>({
   get: () =>
-    dataStyleStore.modelCornersVertexAttributeNoDataColor(modelId) as RGBAColor | undefined,
+    dataStyleStore.modelCornersVertexAttributeNoDataColor(modelId, referenceCornerId.value) as
+      | RGBAColor
+      | undefined,
   set: async (newValue) => {
     await dataStyleStore.setModelCornersVertexAttributeNoDataColor(
       modelId,

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

@@ -1,4 +1,5 @@
 <script setup lang="ts">
+import type { CollectionComponent } from "@ogw_front/stores/data_helpers/collections";
 import OptionsSection from "@ogw_front/components/Viewer/Options/OptionsSection.vue";
 import type { RGBAColor } from "@ogw_front/utils/default_styles/constants";
 import ViewerOptionsColoringTypeSelector from "@ogw_front/components/Viewer/Options/ColoringTypeSelector.vue";
@@ -11,16 +12,29 @@ interface Props {
   modelId: string;
   lineId?: string;
   targetLineIds: string[];
+  collections?: CollectionComponent[];
 }
 
-const { modelId, lineId = undefined, targetLineIds } = defineProps<Props>();
+const {
+  modelId,
+  lineId = undefined,
+  targetLineIds,
+  collections = undefined,
+} = defineProps<Props>();
 
 const dataStyleStore = useDataStyleStore();
 const hybridViewerStore = useHybridViewerStore();
 
+const referenceLineId = computed<string | undefined>(() =>
+  collections ? targetLineIds[0] : undefined,
+);
+
 // Visibility
 const linesVisibility = computed<boolean>({
-  get: () => dataStyleStore.modelComponentTypeVisibility(modelId, "Line"),
+  get: () =>
+    collections
+      ? targetLineIds.every((id) => dataStyleStore.modelLineVisibility(modelId, id))
+      : dataStyleStore.modelComponentTypeVisibility(modelId, "Line"),
   set: async (newValue) => {
     await dataStyleStore.setModelLinesVisibility(modelId, targetLineIds, newValue);
     hybridViewerStore.remoteRender();
@@ -40,7 +54,7 @@ const lineVisibility = computed<boolean | undefined>({
 
 // Color
 const linesColor = computed<RGBAColor | undefined>({
-  get: () => dataStyleStore.modelComponentTypeColor(modelId, "Line") as RGBAColor | undefined,
+  get: () => dataStyleStore.modelLineColor(modelId, referenceLineId.value) as RGBAColor | undefined,
   set: async (color) => {
     await dataStyleStore.setModelLinesColor(modelId, targetLineIds, color);
     hybridViewerStore.remoteRender();
@@ -60,12 +74,25 @@ const lineColor = computed<RGBAColor | undefined>({
 
 const linesActiveColoring = computed<string | undefined>({
   get: () =>
-    dataStyleStore.getModelComponentTypeActiveColoring(modelId, "Line") as string | undefined,
+    dataStyleStore.modelLineActiveColoring(modelId, referenceLineId.value) as string | undefined,
   set: async (coloringType) => {
     if (typeof coloringType !== "string") {
       return;
     }
-    await dataStyleStore.setModelLinesActiveColoring(modelId, targetLineIds, coloringType);
+    if (collections && coloringType === "random") {
+      await Promise.all(
+        collections.map((collection) =>
+          dataStyleStore.setModelLinesActiveColoring(
+            modelId,
+            collection.children.map((child) => child.id),
+            coloringType,
+            collection.id,
+          ),
+        ),
+      );
+    } else {
+      await dataStyleStore.setModelLinesActiveColoring(modelId, targetLineIds, coloringType);
+    }
     hybridViewerStore.remoteRender();
   },
 });
@@ -83,7 +110,7 @@ const lineActiveColoring = computed<string | undefined>({
 
 // Group Attributes
 const linesVertexAttributeName = computed<string | undefined>({
-  get: () => dataStyleStore.modelLinesVertexAttributeName(modelId),
+  get: () => dataStyleStore.modelLinesVertexAttributeName(modelId, referenceLineId.value),
   set: async (newValue) => {
     if (newValue === undefined) {
       return;
@@ -94,7 +121,7 @@ const linesVertexAttributeName = computed<string | undefined>({
 });
 
 const linesVertexAttributeItem = computed<string | undefined>({
-  get: () => dataStyleStore.modelLinesVertexAttributeItem(modelId),
+  get: () => dataStyleStore.modelLinesVertexAttributeItem(modelId, referenceLineId.value),
   set: async (newValue) => {
     await dataStyleStore.setModelLinesVertexAttributeItem(modelId, targetLineIds, newValue);
     hybridViewerStore.remoteRender();
@@ -102,7 +129,7 @@ const linesVertexAttributeItem = computed<string | undefined>({
 });
 
 const linesVertexAttributeRange = computed<[number, number] | undefined>({
-  get: () => dataStyleStore.modelLinesVertexAttributeRange(modelId),
+  get: () => dataStyleStore.modelLinesVertexAttributeRange(modelId, referenceLineId.value),
   set: async (newValue) => {
     const [minimum, maximum] = newValue;
     if (minimum === undefined || maximum === undefined) {
@@ -119,7 +146,7 @@ const linesVertexAttributeRange = computed<[number, number] | undefined>({
 });
 
 const linesVertexAttributeColorMap = computed<RGBAColorMap | undefined>({
-  get: () => dataStyleStore.modelLinesVertexAttributeColorMap(modelId),
+  get: () => dataStyleStore.modelLinesVertexAttributeColorMap(modelId, referenceLineId.value),
   set: async (newValue) => {
     await dataStyleStore.setModelLinesVertexAttributeColorMap(modelId, targetLineIds, newValue);
     hybridViewerStore.remoteRender();
@@ -127,7 +154,10 @@ const linesVertexAttributeColorMap = computed<RGBAColorMap | undefined>({
 });
 
 const linesVertexAttributeNoDataColor = computed<RGBAColor | undefined>({
-  get: () => dataStyleStore.modelLinesVertexAttributeNoDataColor(modelId) as RGBAColor | undefined,
+  get: () =>
+    dataStyleStore.modelLinesVertexAttributeNoDataColor(modelId, referenceLineId.value) as
+      | RGBAColor
+      | undefined,
   set: async (newValue) => {
     await dataStyleStore.setModelLinesVertexAttributeNoDataColor(modelId, targetLineIds, newValue);
     hybridViewerStore.remoteRender();
@@ -135,7 +165,7 @@ const linesVertexAttributeNoDataColor = computed<RGBAColor | undefined>({
 });
 
 const linesEdgeAttributeName = computed<string | undefined>({
-  get: () => dataStyleStore.modelLinesEdgeAttributeName(modelId),
+  get: () => dataStyleStore.modelLinesEdgeAttributeName(modelId, referenceLineId.value),
   set: async (newValue) => {
     if (newValue === undefined) {
       return;
@@ -146,7 +176,7 @@ const linesEdgeAttributeName = computed<string | undefined>({
 });
 
 const linesEdgeAttributeItem = computed<string | undefined>({
-  get: () => dataStyleStore.modelLinesEdgeAttributeItem(modelId),
+  get: () => dataStyleStore.modelLinesEdgeAttributeItem(modelId, referenceLineId.value),
   set: async (newValue) => {
     await dataStyleStore.setModelLinesEdgeAttributeItem(modelId, targetLineIds, newValue);
     hybridViewerStore.remoteRender();
@@ -154,7 +184,7 @@ const linesEdgeAttributeItem = computed<string | undefined>({
 });
 
 const linesEdgeAttributeRange = computed<[number, number] | undefined>({
-  get: () => dataStyleStore.modelLinesEdgeAttributeRange(modelId),
+  get: () => dataStyleStore.modelLinesEdgeAttributeRange(modelId, referenceLineId.value),
   set: async (newValue) => {
     const [minimum, maximum] = newValue;
     if (minimum === undefined || maximum === undefined) {
@@ -166,7 +196,7 @@ const linesEdgeAttributeRange = computed<[number, number] | undefined>({
 });
 
 const linesEdgeAttributeColorMap = computed<Map<string, RGBAColor> | undefined>({
-  get: () => dataStyleStore.modelLinesEdgeAttributeColorMap(modelId),
+  get: () => dataStyleStore.modelLinesEdgeAttributeColorMap(modelId, referenceLineId.value),
   set: async (newValue) => {
     await dataStyleStore.setModelLinesEdgeAttributeColorMap(modelId, targetLineIds, newValue);
     hybridViewerStore.remoteRender();
@@ -174,7 +204,10 @@ const linesEdgeAttributeColorMap = computed<Map<string, RGBAColor> | undefined>(
 });
 
 const linesEdgeAttributeNoDataColor = computed<RGBAColor | undefined>({
-  get: () => dataStyleStore.modelLinesEdgeAttributeNoDataColor(modelId) as RGBAColor | undefined,
+  get: () =>
+    dataStyleStore.modelLinesEdgeAttributeNoDataColor(modelId, referenceLineId.value) as
+      | RGBAColor
+      | undefined,
   set: async (newValue) => {
     await dataStyleStore.setModelLinesEdgeAttributeNoDataColor(modelId, targetLineIds, newValue);
     hybridViewerStore.remoteRender();

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

@@ -1,7 +1,9 @@
 <script setup lang="ts">
 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";
@@ -37,6 +39,7 @@ const selection = computed<string[]>(
   () => dataStyleStore.visibleMeshComponents(modelId.value).value || [],
 );
 const componentType = ref<string | undefined>(undefined);
+const collections = ref<CollectionComponent[] | undefined>(undefined);
 
 watch(
   () => [
@@ -47,8 +50,18 @@ watch(
   ],
   async () => {
     componentType.value = undefined;
+    collections.value = undefined;
     if (itemProps.meta_data.viewer_type === "model_component_type") {
-      componentType.value = itemProps.meta_data.modelComponentType;
+      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;
@@ -155,24 +168,28 @@ const modelComponentsActiveColoring = computed<string | undefined>({
       :modelId="modelId"
       :blockId="componentId"
       :targetBlockIds="targetComponentIds"
+      :collections="collections"
     />
     <SurfacesOptions
       v-else-if="componentType === 'Surface'"
       :modelId="modelId"
       :surfaceId="componentId"
       :targetSurfaceIds="targetComponentIds"
+      :collections="collections"
     />
     <LinesOptions
       v-else-if="componentType === 'Line'"
       :modelId="modelId"
       :lineId="componentId"
       :targetLineIds="targetComponentIds"
+      :collections="collections"
     />
     <CornersOptions
       v-else-if="componentType === 'Corner'"
       :modelId="modelId"
       :cornerId="componentId"
       :targetCornerIds="targetComponentIds"
+      :collections="collections"
     />
   </v-sheet>
 </template>

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

@@ -1,4 +1,5 @@
 <script setup lang="ts">
+import type { CollectionComponent } from "@ogw_front/stores/data_helpers/collections";
 import OptionsSection from "@ogw_front/components/Viewer/Options/OptionsSection.vue";
 import type { RGBAColor } from "@ogw_front/utils/default_styles/constants";
 import ViewerOptionsColoringTypeSelector from "@ogw_front/components/Viewer/Options/ColoringTypeSelector.vue";
@@ -11,16 +12,29 @@ interface Props {
   modelId: string;
   surfaceId?: string;
   targetSurfaceIds: string[];
+  collections?: CollectionComponent[];
 }
 
-const { modelId, surfaceId = undefined, targetSurfaceIds } = defineProps<Props>();
+const {
+  modelId,
+  surfaceId = undefined,
+  targetSurfaceIds,
+  collections = undefined,
+} = defineProps<Props>();
 
 const dataStyleStore = useDataStyleStore();
 const hybridViewerStore = useHybridViewerStore();
 
+const referenceSurfaceId = computed<string | undefined>(() =>
+  collections ? targetSurfaceIds[0] : undefined,
+);
+
 // Visibility
 const surfacesVisibility = computed<boolean>({
-  get: () => dataStyleStore.modelComponentTypeVisibility(modelId, "Surface"),
+  get: () =>
+    collections
+      ? targetSurfaceIds.every((id) => dataStyleStore.modelSurfaceVisibility(modelId, id))
+      : dataStyleStore.modelComponentTypeVisibility(modelId, "Surface"),
   set: async (newValue) => {
     await dataStyleStore.setModelSurfacesVisibility(modelId, targetSurfaceIds, newValue);
     hybridViewerStore.remoteRender();
@@ -40,7 +54,8 @@ const surfaceVisibility = computed<boolean>({
 
 // Color
 const surfacesColor = computed<RGBAColor | undefined>({
-  get: () => dataStyleStore.modelComponentTypeColor(modelId, "Surface") as RGBAColor | undefined,
+  get: () =>
+    dataStyleStore.modelSurfaceColor(modelId, referenceSurfaceId.value) as RGBAColor | undefined,
   set: async (color) => {
     await dataStyleStore.setModelSurfacesColor(modelId, targetSurfaceIds, color);
     hybridViewerStore.remoteRender();
@@ -60,12 +75,27 @@ const surfaceColor = computed<RGBAColor | undefined>({
 
 const surfacesActiveColoring = computed<string | undefined>({
   get: () =>
-    dataStyleStore.getModelComponentTypeActiveColoring(modelId, "Surface") as string | undefined,
+    dataStyleStore.modelSurfaceActiveColoring(modelId, referenceSurfaceId.value) as
+      | string
+      | undefined,
   set: async (coloringType) => {
     if (typeof coloringType !== "string") {
       return;
     }
-    await dataStyleStore.setModelSurfacesActiveColoring(modelId, targetSurfaceIds, coloringType);
+    if (collections && coloringType === "random") {
+      await Promise.all(
+        collections.map((collection) =>
+          dataStyleStore.setModelSurfacesActiveColoring(
+            modelId,
+            collection.children.map((child) => child.id),
+            coloringType,
+            collection.id,
+          ),
+        ),
+      );
+    } else {
+      await dataStyleStore.setModelSurfacesActiveColoring(modelId, targetSurfaceIds, coloringType);
+    }
     hybridViewerStore.remoteRender();
   },
 });
@@ -83,7 +113,7 @@ const surfaceActiveColoring = computed<string | undefined>({
 
 // Group Attributes
 const surfacesVertexAttributeName = computed<string | undefined>({
-  get: () => dataStyleStore.modelSurfacesVertexAttributeName(modelId),
+  get: () => dataStyleStore.modelSurfacesVertexAttributeName(modelId, referenceSurfaceId.value),
   set: async (newValue) => {
     if (newValue === undefined) {
       return;
@@ -94,7 +124,7 @@ const surfacesVertexAttributeName = computed<string | undefined>({
 });
 
 const surfacesVertexAttributeItem = computed<string | undefined>({
-  get: () => dataStyleStore.modelSurfacesVertexAttributeItem(modelId),
+  get: () => dataStyleStore.modelSurfacesVertexAttributeItem(modelId, referenceSurfaceId.value),
   set: async (newValue) => {
     await dataStyleStore.setModelSurfacesVertexAttributeItem(modelId, targetSurfaceIds, newValue);
     hybridViewerStore.remoteRender();
@@ -102,7 +132,7 @@ const surfacesVertexAttributeItem = computed<string | undefined>({
 });
 
 const surfacesVertexAttributeRange = computed<[number, number] | undefined>({
-  get: () => dataStyleStore.modelSurfacesVertexAttributeRange(modelId),
+  get: () => dataStyleStore.modelSurfacesVertexAttributeRange(modelId, referenceSurfaceId.value),
   set: async (newValue) => {
     const [minimum, maximum] = newValue;
     if (minimum === undefined || maximum === undefined) {
@@ -119,7 +149,7 @@ const surfacesVertexAttributeRange = computed<[number, number] | undefined>({
 });
 
 const surfacesVertexAttributeColorMap = computed<Map<string, RGBAColor> | undefined>({
-  get: () => dataStyleStore.modelSurfacesVertexAttributeColorMap(modelId),
+  get: () => dataStyleStore.modelSurfacesVertexAttributeColorMap(modelId, referenceSurfaceId.value),
   set: async (newValue) => {
     await dataStyleStore.setModelSurfacesVertexAttributeColorMap(
       modelId,
@@ -132,7 +162,9 @@ const surfacesVertexAttributeColorMap = computed<Map<string, RGBAColor> | undefi
 
 const surfacesVertexAttributeNoDataColor = computed<RGBAColor | undefined>({
   get: () =>
-    dataStyleStore.modelSurfacesVertexAttributeNoDataColor(modelId) as RGBAColor | undefined,
+    dataStyleStore.modelSurfacesVertexAttributeNoDataColor(modelId, referenceSurfaceId.value) as
+      | RGBAColor
+      | undefined,
   set: async (newValue) => {
     await dataStyleStore.setModelSurfacesVertexAttributeNoDataColor(
       modelId,
@@ -144,7 +176,7 @@ const surfacesVertexAttributeNoDataColor = computed<RGBAColor | undefined>({
 });
 
 const surfacesPolygonAttributeName = computed<string | undefined>({
-  get: () => dataStyleStore.modelSurfacesPolygonAttributeName(modelId),
+  get: () => dataStyleStore.modelSurfacesPolygonAttributeName(modelId, referenceSurfaceId.value),
   set: async (newValue) => {
     if (newValue === undefined) {
       return;
@@ -155,7 +187,7 @@ const surfacesPolygonAttributeName = computed<string | undefined>({
 });
 
 const surfacesPolygonAttributeItem = computed<string | undefined>({
-  get: () => dataStyleStore.modelSurfacesPolygonAttributeItem(modelId),
+  get: () => dataStyleStore.modelSurfacesPolygonAttributeItem(modelId, referenceSurfaceId.value),
   set: async (newValue) => {
     await dataStyleStore.setModelSurfacesPolygonAttributeItem(modelId, targetSurfaceIds, newValue);
     hybridViewerStore.remoteRender();
@@ -163,7 +195,7 @@ const surfacesPolygonAttributeItem = computed<string | undefined>({
 });
 
 const surfacesPolygonAttributeRange = computed<[number, number] | undefined>({
-  get: () => dataStyleStore.modelSurfacesPolygonAttributeRange(modelId),
+  get: () => dataStyleStore.modelSurfacesPolygonAttributeRange(modelId, referenceSurfaceId.value),
   set: async (newValue) => {
     const [minimum, maximum] = newValue;
     if (minimum === undefined || maximum === undefined) {
@@ -180,7 +212,8 @@ const surfacesPolygonAttributeRange = computed<[number, number] | undefined>({
 });
 
 const surfacesPolygonAttributeColorMap = computed<Map<string, RGBAColor> | undefined>({
-  get: () => dataStyleStore.modelSurfacesPolygonAttributeColorMap(modelId),
+  get: () =>
+    dataStyleStore.modelSurfacesPolygonAttributeColorMap(modelId, referenceSurfaceId.value),
   set: async (newValue) => {
     await dataStyleStore.setModelSurfacesPolygonAttributeColorMap(
       modelId,
@@ -193,7 +226,9 @@ const surfacesPolygonAttributeColorMap = computed<Map<string, RGBAColor> | undef
 
 const surfacesPolygonAttributeNoDataColor = computed<RGBAColor | undefined>({
   get: () =>
-    dataStyleStore.modelSurfacesPolygonAttributeNoDataColor(modelId) as RGBAColor | undefined,
+    dataStyleStore.modelSurfacesPolygonAttributeNoDataColor(modelId, referenceSurfaceId.value) as
+      | RGBAColor
+      | undefined,
   set: async (newValue) => {
     await dataStyleStore.setModelSurfacesPolygonAttributeNoDataColor(
       modelId,

package/app/components/Viewer/ObjectTree/Views/ModelTree.vue

@@ -3,6 +3,7 @@ import { sortAndFormatItems, useTreeFilter } from "@ogw_front/composables/tree_f
 import CommonTreeView from "@ogw_front/components/Viewer/ObjectTree/Base/CommonTreeView.vue";
 import type { DisplayItem } from "@ogw_front/composables/virtual_tree";
 import FetchingData from "@ogw_front/components/FetchingData.vue";
+import { MESH_COMPONENT_TYPES } from "@ogw_front/utils/default_styles";
 import ObjectTreeControls from "@ogw_front/components/Viewer/ObjectTree/Base/Controls.vue";
 import ObjectTreeItemLabel from "@ogw_front/components/Viewer/ObjectTree/Base/ItemLabel.vue";
 import { useHoverhighlight } from "@ogw_front/composables/hover_highlight";
@@ -129,8 +130,26 @@ const itemsForTreeView = computed<CollectionTreeItem[]>(() => {
   return result;
 });
 
+function extractComponentIds(node: CollectionTreeItem): string[] {
+  if (node.children) {
+    return node.children.flatMap((child) => extractComponentIds(child));
+  }
+  return [node.id];
+}
+
 function showContextMenu(event: unknown, item: CollectionTreeItem): void {
   const actualItem = item.raw || item;
+  if (isCollections.value && !MESH_COMPONENT_TYPES.includes(actualItem.category ?? "")) {
+    emit("show-menu", {
+      event,
+      itemId: id,
+      context_type: "model_component_type",
+      modelId: id,
+      modelComponentType: actualItem.category ?? actualItem.id,
+      targetComponentIds: extractComponentIds(actualItem),
+    });
+    return;
+  }
   const typeId = actualItem.category || actualItem.id;
   const typeItem = itemsForTreeView.value.find((type) => type.id === typeId);
   const targetComponentIds = typeItem?.children?.map((child) => child.id);

package/internal/stores/data_style/model/blocks/color.ts

@@ -19,12 +19,14 @@ export function useModelBlocksColor(): {
     blocks_ids: string[],
     color: unknown,
     activeColoring?: string,
+    collectionId?: string,
   ) => Promise<unknown>;
   modelBlockActiveColoring: (id: string, block_id?: string) => unknown;
   setModelBlocksActiveColoring: (
     modelId: string,
     blocks_ids: string[],
     activeColoring: string,
+    collectionId?: string,
   ) => Promise<void>;
 } {
   const dataStore = useDataStore();
@@ -47,6 +49,7 @@ export function useModelBlocksColor(): {
     blocks_ids: string[],
     color: unknown,
     activeColoring = "constant",
+    collectionId?: string,
   ): Promise<unknown> {
     const result = await modelCommonStyle.setModelTypeColor(
       modelId,
@@ -54,6 +57,7 @@ export function useModelBlocksColor(): {
       color,
       schema,
       activeColoring,
+      collectionId,
     );
     return result;
   }
@@ -66,6 +70,7 @@ export function useModelBlocksColor(): {
     modelId: string,
     blocks_ids: string[],
     activeColoring: string,
+    collectionId?: string,
   ): Promise<void> {
     const totalBlockIds = await dataStore.getBlocksGeodeIds(modelId);
     if (blocks_ids.length === totalBlockIds.length) {
@@ -78,7 +83,7 @@ export function useModelBlocksColor(): {
     });
     if (activeColoring === "constant" || activeColoring === "random") {
       const color = modelBlockColor(modelId, blocks_ids[0]);
-      await setModelBlocksColor(modelId, blocks_ids, color, activeColoring);
+      await setModelBlocksColor(modelId, blocks_ids, color, activeColoring, collectionId);
       return;
     }
 

package/internal/stores/data_style/model/common.ts

@@ -48,6 +48,7 @@ interface UseModelCommonStyleReturn {
     color: unknown,
     schema: JsonRpcSchema,
     activeColoring?: string,
+    collectionId?: string,
   ) => Promise<unknown>;
   setModelTypeVisibility: (
     id: string,
@@ -166,6 +167,7 @@ export function useModelCommonStyle(): UseModelCommonStyleReturn {
     color: unknown,
     schema: JsonRpcSchema,
     activeColoring = "constant",
+    collectionId?: string,
   ): Promise<unknown> {
     if (!component_ids?.length) {
       return undefined;
@@ -180,6 +182,7 @@ export function useModelCommonStyle(): UseModelCommonStyleReturn {
       id,
       block_ids: viewer_ids,
       color_mode: activeColoring,
+      collection_id: collectionId,
     };
     if (activeColoring === "constant") {
       await mutateComponentStyles(id, component_ids, {

package/internal/stores/data_style/model/corners/color.ts

@@ -13,6 +13,7 @@ interface ModelCornersColorApi {
     corners_ids: string[],
     color: unknown,
     activeColoring?: string,
+    collectionId?: string,
   ) => Promise<unknown>;
   modelCornerColoring: (id: string, corner_id?: string) => StyleValues;
   modelCornerColor: (id: string, corner_id?: string) => unknown;
@@ -21,6 +22,7 @@ interface ModelCornersColorApi {
     modelId: string,
     corners_ids: string[],
     activeColoring: string,
+    collectionId?: string,
   ) => Promise<unknown>;
 }
 
@@ -44,6 +46,7 @@ export function useModelCornersColor(): ModelCornersColorApi {
     corners_ids: string[],
     color: unknown,
     activeColoring = "constant",
+    collectionId?: string,
   ): Promise<unknown> {
     const result = await modelCommonStyle.setModelTypeColor(
       modelId,
@@ -51,6 +54,7 @@ export function useModelCornersColor(): ModelCornersColorApi {
       color,
       schema,
       activeColoring,
+      collectionId,
     );
     return result;
   }
@@ -63,6 +67,7 @@ export function useModelCornersColor(): ModelCornersColorApi {
     modelId: string,
     corners_ids: string[],
     activeColoring: string,
+    collectionId?: string,
   ): Promise<unknown> {
     const totalCornerIds = await dataStore.getCornersGeodeIds(modelId);
     if (corners_ids.length === totalCornerIds.length) {
@@ -75,7 +80,7 @@ export function useModelCornersColor(): ModelCornersColorApi {
     });
     if (activeColoring === "constant" || activeColoring === "random") {
       const color = modelCornerColor(modelId, corners_ids[0]);
-      return setModelCornersColor(modelId, corners_ids, color, activeColoring);
+      return setModelCornersColor(modelId, corners_ids, color, activeColoring, collectionId);
     }
 
     if (activeColoring === "vertex") {

package/internal/stores/data_style/model/lines/color.ts

@@ -14,6 +14,7 @@ export function useModelLinesColor(): {
     lines_ids: string[],
     color: unknown,
     activeColoring?: string,
+    collectionId?: string,
   ) => Promise<unknown>;
   modelLineColoring: (id: string, line_id?: string) => StyleValues;
   modelLineColor: (id: string, line_id?: string) => unknown;
@@ -22,6 +23,7 @@ export function useModelLinesColor(): {
     modelId: string,
     lines_ids: string[],
     activeColoring: string,
+    collectionId?: string,
   ) => Promise<unknown>;
 } {
   const dataStore = useDataStore();
@@ -44,6 +46,7 @@ export function useModelLinesColor(): {
     lines_ids: string[],
     color: unknown,
     activeColoring = "constant",
+    collectionId?: string,
   ): Promise<unknown> {
     const result = await modelCommonStyle.setModelTypeColor(
       modelId,
@@ -51,6 +54,7 @@ export function useModelLinesColor(): {
       color,
       schema,
       activeColoring,
+      collectionId,
     );
     return result;
   }
@@ -63,6 +67,7 @@ export function useModelLinesColor(): {
     modelId: string,
     lines_ids: string[],
     activeColoring: string,
+    collectionId?: string,
   ): Promise<unknown> {
     const totalLineIds = await dataStore.getLinesGeodeIds(modelId);
     if (lines_ids.length === totalLineIds.length) {
@@ -75,7 +80,7 @@ export function useModelLinesColor(): {
     });
     if (activeColoring === "constant" || activeColoring === "random") {
       const color = modelLineColor(modelId, lines_ids[0]);
-      return setModelLinesColor(modelId, lines_ids, color, activeColoring);
+      return setModelLinesColor(modelId, lines_ids, color, activeColoring, collectionId);
     }
 
     if (activeColoring === "vertex") {

package/internal/stores/data_style/model/surfaces/color.ts

@@ -14,6 +14,7 @@ export function useModelSurfacesColor(): {
     surfaces_ids: string[],
     color: unknown,
     activeColoring?: string,
+    collectionId?: string,
   ) => Promise<unknown>;
   modelSurfaceColoring: (id: string, surface_id?: string) => StyleValues;
   modelSurfaceColor: (id: string, surface_id?: string) => unknown;
@@ -22,6 +23,7 @@ export function useModelSurfacesColor(): {
     modelId: string,
     surfaces_ids: string[],
     activeColoring: string,
+    collectionId?: string,
   ) => Promise<unknown>;
 } {
   const dataStore = useDataStore();
@@ -44,6 +46,7 @@ export function useModelSurfacesColor(): {
     surfaces_ids: string[],
     color: unknown,
     activeColoring = "constant",
+    collectionId?: string,
   ): Promise<unknown> {
     const result = await modelCommonStyle.setModelTypeColor(
       modelId,
@@ -51,6 +54,7 @@ export function useModelSurfacesColor(): {
       color,
       schema,
       activeColoring,
+      collectionId,
     );
     return result;
   }
@@ -63,6 +67,7 @@ export function useModelSurfacesColor(): {
     modelId: string,
     surfaces_ids: string[],
     activeColoring: string,
+    collectionId?: string,
   ): Promise<unknown> {
     const totalSurfaceIds = await dataStore.getSurfacesGeodeIds(modelId);
     if (surfaces_ids.length === totalSurfaceIds.length) {
@@ -75,7 +80,7 @@ export function useModelSurfacesColor(): {
     });
     if (activeColoring === "constant" || activeColoring === "random") {
       const color = modelSurfaceColor(modelId, surfaces_ids[0]);
-      return setModelSurfacesColor(modelId, surfaces_ids, color, activeColoring);
+      return setModelSurfacesColor(modelId, surfaces_ids, color, activeColoring, collectionId);
     }
 
     if (activeColoring === "vertex") {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@geode/opengeodeweb-front",
-  "version": "10.34.0-rc.21",
+  "version": "10.34.0-rc.22",
   "description": "OpenSource Vue/Nuxt/Pinia/Vuetify framework for web applications",
   "homepage": "https://github.com/Geode-solutions/OpenGeodeWeb-Front",
   "bugs": {