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

package/.build/shared/utils/file.js

@@ -1,5 +1,7 @@
 import _ from "lodash";
 //#region shared/utils/file.ts
+const BYTES_PER_KIBIBYTE = 1024;
+const CHUNK_SIZE_BYTES = 8192 * BYTES_PER_KIBIBYTE;
 function assertFile(file) {
 	console.log("[ASSERT_FILE] Asserting file", { file });
 	if (!(file instanceof File)) throw new Error("file must be an instance of File");
@@ -9,4 +11,4 @@ function hasBody(params) {
 	return !_.isEmpty(params);
 }
 //#endregion
-export { assertFile, hasBody };
+export { BYTES_PER_KIBIBYTE, CHUNK_SIZE_BYTES, assertFile, hasBody };

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/app/stores/back.ts

@@ -133,7 +133,6 @@ export const useBackStore = defineStore("back", {
         {
           schema,
           file,
-          raw: true,
         },
         {
           ...callbacks,

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/internal/utils/upload_file.ts

@@ -1,4 +1,5 @@
 import type { JsonRpcSchema, RequestHandlers } from "@ogw_shared/utils/types.js";
+import { CHUNK_SIZE_BYTES } from "@ogw_shared/utils/file.js";
 import type { Microservice } from "./api_fetch.js";
 import { fetchRaw } from "@ogw_shared/utils/fetch_raw.js";
 import { useFeedbackStore } from "@ogw_front/stores/feedback.js";
@@ -8,11 +9,7 @@ interface UploadFileParams {
   // HTTP-flavored ("front"/"back") schemas.
   schema: JsonRpcSchema & { methods: string[] };
   file: File;
-  params?: Record<string, string | Blob>;
-  // When true, the file is sent as the raw request body instead of multipart
-  // FormData, with `params`/filename moved into the query string. See
-  // OpenGeodeWeb-Back's upload_file route, which supports both request shapes.
-  raw?: boolean;
+  params?: Record<string, string>;
 }
 
 // Loosely-typed shapes for the dynamic error/response values reported by fetchRaw.
@@ -38,7 +35,7 @@ function isFetchErrorResponseLike(value: unknown): value is FetchErrorResponseLi
 
 async function upload_file(
   microservice: Microservice,
-  { schema, file, params = {}, raw = false }: UploadFileParams,
+  { schema, file, params = {} }: UploadFileParams,
   { request_error_function, response_function, response_error_function }: RequestHandlers = {},
 ): Promise<unknown> {
   console.log("[UPLOAD_FILE] Uploading file", { schema, file });
@@ -48,68 +45,70 @@ async function upload_file(
     throw new Error("file must be an instance of File");
   }
 
-  let route = schema.$id;
-  let body: FormData | File = file;
+  const route = schema.$id;
+  const method = schema.methods.find((candidate) => candidate !== "OPTIONS");
+  const totalChunks = Math.max(1, Math.ceil(file.size / CHUNK_SIZE_BYTES));
 
-  if (raw) {
-    const queryEntries = Object.entries(params).filter(
-      (entry): entry is [string, string] => typeof entry[1] === "string",
+  function onRequestError(error: unknown): void {
+    microservice.stop_request();
+    const typedError = isFetchErrorLike(error) ? error : {};
+    feedbackStore.add_error(
+      typedError.code ?? 0,
+      route,
+      typedError.message ?? "",
+      typedError.stack ?? "",
     );
-    const query = new URLSearchParams([...queryEntries, ["filename", file.name]]);
-    route = `${route}?${query.toString()}`;
-  } else {
-    const formData = new FormData();
-    for (const [key, value] of Object.entries(params)) {
-      formData.append(key, value);
+    if (request_error_function) {
+      request_error_function(error);
+    }
+  }
+
+  function onResponseError(response: unknown): void {
+    microservice.stop_request();
+    const typedResponse = isFetchErrorResponseLike(response) ? response : {};
+    feedbackStore.add_error(
+      typedResponse.status ?? 0,
+      route,
+      typedResponse.name ?? "",
+      typedResponse.description ?? "",
+    );
+    if (response_error_function) {
+      response_error_function(response);
     }
-    formData.append("file", file);
-    body = formData;
   }
 
   microservice.start_request();
 
-  const result = await fetchRaw(
-    {
-      route,
-      method: schema.methods.find((method) => method !== "OPTIONS"),
-      params: body,
-      baseURL: microservice.base_url,
-    },
-    {
-      request_error_function(error: unknown) {
-        microservice.stop_request();
-        const typedError = isFetchErrorLike(error) ? error : {};
-        feedbackStore.add_error(
-          typedError.code ?? 0,
-          route,
-          typedError.message ?? "",
-          typedError.stack ?? "",
-        );
-        if (request_error_function) {
-          request_error_function(error);
-        }
-      },
-      response_function(data: unknown) {
-        microservice.stop_request();
-        if (response_function) {
-          response_function(data);
-        }
+  let result: unknown = undefined;
+  for (let chunkIndex = 0; chunkIndex < totalChunks; chunkIndex += 1) {
+    const start = chunkIndex * CHUNK_SIZE_BYTES;
+    const chunk = file.slice(start, start + CHUNK_SIZE_BYTES);
+    const query = new URLSearchParams({
+      ...params,
+      filename: file.name,
+      chunk_index: String(chunkIndex),
+      total_chunks: String(totalChunks),
+    });
+
+    // oxlint-disable-next-line no-await-in-loop -- chunks must be sent in order; the server appends each one to the file as it arrives.
+    result = await fetchRaw(
+      {
+        route: `${route}?${query.toString()}`,
+        method,
+        params: chunk,
+        baseURL: microservice.base_url,
       },
-      response_error_function(response: unknown) {
-        microservice.stop_request();
-        const typedResponse = isFetchErrorResponseLike(response) ? response : {};
-        feedbackStore.add_error(
-          typedResponse.status ?? 0,
-          route,
-          typedResponse.name ?? "",
-          typedResponse.description ?? "",
-        );
-        if (response_error_function) {
-          response_error_function(response);
-        }
+      {
+        request_error_function: onRequestError,
+        response_error_function: onResponseError,
       },
-    },
-  );
+    );
+  }
+
+  microservice.stop_request();
+  if (response_function) {
+    response_function(result);
+  }
   return result;
 }
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@geode/opengeodeweb-front",
-  "version": "10.34.0-rc.20",
+  "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": {

package/server/api/local/extensions/upload.put.ts

@@ -1,98 +1,71 @@
 // Node imports
-import { finished, pipeline } from "node:stream/promises";
-import type { IncomingHttpHeaders } from "node:http";
 import { Readable } from "node:stream";
 import fs from "node:fs";
+import { pipeline } from "node:stream/promises";
 
 // Third party imports
-import {
-  type H3Event,
-  createError,
-  defineEventHandler,
-  getRequestHeaders,
-  getRequestWebStream,
-} from "h3";
-import busboy from "busboy";
+import { type H3Event, createError, defineEventHandler, getQuery, getRequestWebStream } from "h3";
 
 // Local imports
 import {
   registerExtensionFile,
   targetExtensionFilePath,
 } from "@geode/opengeodeweb-front/server/utils/app_config.ts";
+import { BYTES_PER_KIBIBYTE } from "@ogw_shared/utils/file.js";
 import { toNodeWebStream } from "@geode/opengeodeweb-front/server/utils/stream.ts";
 
+const CODE_200 = 200;
 const CODE_201 = 201;
-const BYTES_PER_KIBIBYTE = 1024;
 const MAX_FILE_MEGABYTES = 500;
 const FILE_SIZE_LIMIT = MAX_FILE_MEGABYTES * BYTES_PER_KIBIBYTE * BYTES_PER_KIBIBYTE;
 
-export default defineEventHandler(async (event: H3Event) => {
-  const writePromises: Promise<void>[] = [];
-  const savedFiles: string[] = [];
-
-  const headers: IncomingHttpHeaders = Object.fromEntries(
-    Object.entries(getRequestHeaders(event)).filter(
-      (entry: readonly [string, string | undefined]) => entry[1] !== undefined,
-    ),
-  );
-  const busboyInstance = busboy({
-    headers,
-    limits: {
-      fileSize: FILE_SIZE_LIMIT,
-      files: 1,
-    },
-  });
-  let projectName = "";
-  busboyInstance.on("field", (name, value) => {
-    console.log(`Field ${name}: ${value}`);
-    if (name === "projectName") {
-      projectName = value;
-    }
-  });
+function requiredQueryString(event: H3Event, key: string): string {
+  const value = getQuery(event)[key];
+  if (typeof value !== "string" || value.length === 0) {
+    throw createError({ statusCode: 400, message: `Missing "${key}" query parameter` });
+  }
+  return value;
+}
 
-  busboyInstance.on("file", (fieldname, fileStream, info) => {
-    if (fieldname !== "file") {
-      // Drain & ignore unwanted fields
-      fileStream.resume();
-      return;
-    }
-    const targetPath = targetExtensionFilePath(projectName, info.filename);
-    const writePromise = (async (): Promise<void> => {
-      const writeStream = fs.createWriteStream(targetPath);
-      await pipeline(fileStream, writeStream);
-      savedFiles.push(targetPath);
-      console.log("File written:", targetPath);
-    })();
-    writePromises.push(writePromise);
-    fileStream.on("limit", () => {
-      busboyInstance.destroy(new Error("File too large"));
-    });
-  });
+function requiredQueryInt(event: H3Event, key: string): number {
+  const parsed = Math.trunc(Number(requiredQueryString(event, key)));
+  if (!Number.isInteger(parsed) || parsed < 0) {
+    throw createError({ statusCode: 400, message: `Invalid "${key}" query parameter` });
+  }
+  return parsed;
+}
 
-  busboyInstance.on("filesLimit", () => {
-    busboyInstance.destroy(new Error("Too many files"));
-  });
-  busboyInstance.on("partsLimit", () => {
-    busboyInstance.destroy(new Error("Too many parts"));
-  });
+// The file is sent as a raw (non-multipart) body, split into sequential chunks the client uploads in order (see OpenGeodeWeb-Front's upload_file.ts and OpenGeodeWeb-Back's upload_file route, which use the same protocol). Each chunk is appended to a `.part` file; the last one triggers the existing zip-metadata registration.
+export default defineEventHandler(async (event: H3Event) => {
+  const projectName = requiredQueryString(event, "projectName");
+  const filename = requiredQueryString(event, "filename");
+  const totalChunks = requiredQueryInt(event, "total_chunks");
+  const chunkIndex = requiredQueryInt(event, "chunk_index");
+  if (chunkIndex >= totalChunks) {
+    throw createError({ statusCode: 400, message: "chunk_index must be less than total_chunks" });
+  }
 
   const webStream = getRequestWebStream(event);
   if (!webStream) {
     throw createError({ statusCode: 400, message: "No request body received" });
   }
-  Readable.fromWeb(toNodeWebStream(webStream)).pipe(busboyInstance);
-  await finished(busboyInstance);
-  if (writePromises.length > 0) {
-    await Promise.all(writePromises);
-    console.log("All disk writes completed");
+
+  const targetPath = targetExtensionFilePath(projectName, filename);
+  const partPath = `${targetPath}.part`;
+  const writeStream = fs.createWriteStream(partPath, { flags: chunkIndex === 0 ? "w" : "a" });
+  await pipeline(Readable.fromWeb(toNodeWebStream(webStream)), writeStream);
+
+  const { size } = await fs.promises.stat(partPath);
+  if (size > FILE_SIZE_LIMIT) {
+    await fs.promises.unlink(partPath);
+    throw createError({ statusCode: 400, message: "File too large" });
   }
-  if (savedFiles.length === 0) {
-    throw createError({ statusCode: 400, message: "No file received" });
+
+  if (chunkIndex < totalChunks - 1) {
+    return { statusCode: CODE_200 };
   }
-  await Promise.all(
-    savedFiles.map(async (file) => {
-      await registerExtensionFile(projectName, file);
-    }),
-  );
+
+  await fs.promises.rename(partPath, targetPath);
+  await registerExtensionFile(projectName, targetPath);
   return { statusCode: CODE_201 };
 });

package/shared/utils/file.ts

@@ -1,5 +1,11 @@
 import _ from "lodash";
 
+const BYTES_PER_KIBIBYTE = 1024;
+const KIBIBYTES_PER_MEBIBYTE = 1024;
+const CHUNK_SIZE_MEBIBYTES = 8;
+// Cloud hosting in front of the upload routes (Cloud Run/Firebase Hosting) enforces a hard ~32MB request body limit that no amount of server-side streaming can bypass, so uploads are always split into chunks comfortably under that cap. The single source of truth here keeps every uploader (OpenGeodeWeb-Front, Vease) and the routes that assemble the chunks in agreement.
+const CHUNK_SIZE_BYTES = CHUNK_SIZE_MEBIBYTES * KIBIBYTES_PER_MEBIBYTE * BYTES_PER_KIBIBYTE;
+
 function assertFile(file: unknown): asserts file is File {
   console.log("[ASSERT_FILE] Asserting file", { file });
   if (!(file instanceof File)) {
@@ -13,4 +19,4 @@ function hasBody(params: unknown): params is Blob | FormData | Record<string, un
   }
   return !_.isEmpty(params);
 }
-export { assertFile, hasBody };
+export { assertFile, BYTES_PER_KIBIBYTE, CHUNK_SIZE_BYTES, hasBody };