From 86f15757aefba4399a10f9557b80491dfdeed5d1 Mon Sep 17 00:00:00 2001
From: JulienChampagnol <julien.champagnol@geode-solutions.com>
Date: Tue, 3 Nov 2026 14:48:58 +0100
Subject: [PATCH 1/5] refactor: split files exceeding 200 lines

Split the 49 source and test files that exceed 200 counted lines (the new
max-lines limit) into cohesive modules. Original paths keep exporting the
same names, so no importer changes. Behaviour is unchanged; the unit and
integration test counts are identical before and after.

Co-Authored-By: Claude Sonnet 5.5 <noreply@anthropic.com>
---
 app/components/ClippingPlanes.vue             |  91 +---
 app/components/DragAndDrop.vue                |  75 +--
 app/components/ThresholdFilter.vue            |  69 +--
 app/components/ViewToolbar.vue                | 246 +---------
 .../EdgedCurve/SpecificEdgesColoring.vue      | 209 +++++++++
 .../EdgedCurve/SpecificEdgesOptions.vue       | 194 +-------
 .../Viewer/Generic/Mesh/CellsColoring.vue     | 228 +++++++++
 .../Viewer/Generic/Mesh/CellsOptions.vue      | 213 +--------
 .../Viewer/Generic/Mesh/EdgesColoring.vue     | 211 +++++++++
 .../Viewer/Generic/Mesh/EdgesOptions.vue      | 195 +-------
 .../Viewer/Generic/Mesh/PolygonsColoring.vue  | 234 ++++++++++
 .../Viewer/Generic/Mesh/PolygonsOptions.vue   | 218 +--------
 .../Viewer/Generic/Mesh/PolyhedraColoring.vue | 221 +++++++++
 .../Viewer/Generic/Mesh/PolyhedraOptions.vue  | 206 +--------
 .../Generic/Model/ComponentPointsOptions.vue  |  20 +-
 .../Generic/Model/CornerComponentOptions.vue  | 145 ++++++
 .../Viewer/Generic/Model/CornersOptions.vue   | 305 +-----------
 .../Generic/Model/CornersTypeOptions.vue      | 166 +++++++
 .../Generic/Model/LineComponentOptions.vue    | 218 +++++++++
 .../Viewer/Generic/Model/LinesOptions.vue     | 436 +-----------------
 .../Viewer/Generic/Model/LinesTypeOptions.vue | 222 +++++++++
 .../Viewer/Options/AttributeSelector.vue      | 141 +-----
 .../Viewer/Options/ColoringTypeSelector.vue   | 110 ++---
 .../Viewer/Options/NoDataColorInfo.vue        |  56 +++
 .../Solid/SpecificPolyhedraColoring.vue       | 217 +++++++++
 .../Viewer/Solid/SpecificPolyhedraOptions.vue | 203 +-------
 .../Viewer/Surface/PolygonsColoring.vue       | 231 ++++++++++
 .../Viewer/Surface/PolygonsOptions.vue        | 216 +--------
 app/composables/attribute_selector.ts         | 103 +++++
 app/composables/clipping_slices.ts            | 159 +++++++
 app/composables/view_toolbar_options.ts       | 126 +++++
 app/composables/view_toolbar_tool_options.ts  | 115 +++++
 app/composables/view_toolbar_tools.ts         | 108 +++++
 app/composables/virtual_tree.ts               | 151 +-----
 app/composables/virtual_tree_flatten.ts       |  79 ++++
 app/composables/virtual_tree_types.ts         |  81 ++++
 app/stores/app.ts                             |  63 +--
 app/stores/app_helpers/registry.ts            |  69 +++
 app/stores/menu.ts                            | 125 +----
 app/stores/menu_helpers/menus_data.ts         | 127 +++++
 app/stores/viewer.ts                          |  95 +---
 app/stores/viewer_helpers/actions.ts          |  68 +++
 app/stores/viewer_helpers/request.ts          |  61 +++
 app/utils/clipping_planes.ts                  | 135 +-----
 app/utils/clipping_planes_scene.ts            | 130 ++++++
 app/utils/coloring_styles.ts                  | 101 ++++
 app/utils/default_styles/mesh_components.ts   | 168 +++++++
 app/utils/default_styles/meshes.ts            | 166 +------
 app/utils/default_styles/model_components.ts  | 170 +++++++
 app/utils/default_styles/models.ts            | 169 +------
 app/utils/drag_and_drop.ts                    |  80 ++++
 app/utils/model_component_coloring.ts         |  46 ++
 app/utils/threshold_sources.ts                |  60 +++
 internal/stores/data_style/mesh/cells/cell.ts | 177 ++-----
 .../data_style/mesh/cells/cell_attribute.ts   |  74 +++
 .../data_style/mesh/cells/cell_config.ts      | 152 ++++++
 .../stores/data_style/mesh/cells/vertex.ts    | 183 ++------
 .../data_style/mesh/cells/vertex_attribute.ts |  80 ++++
 .../data_style/mesh/cells/vertex_config.ts    | 152 ++++++
 internal/stores/data_style/mesh/edges/edge.ts | 177 ++-----
 .../data_style/mesh/edges/edge_attribute.ts   |  74 +++
 .../data_style/mesh/edges/edge_config.ts      | 152 ++++++
 .../stores/data_style/mesh/edges/vertex.ts    | 183 ++------
 .../data_style/mesh/edges/vertex_attribute.ts |  80 ++++
 .../data_style/mesh/edges/vertex_config.ts    | 152 ++++++
 .../stores/data_style/mesh/points/vertex.ts   | 183 ++------
 .../mesh/points/vertex_attribute.ts           |  80 ++++
 .../data_style/mesh/points/vertex_config.ts   | 152 ++++++
 .../data_style/mesh/polygons/polygon.ts       | 179 ++-----
 .../mesh/polygons/polygon_attribute.ts        |  80 ++++
 .../mesh/polygons/polygon_config.ts           | 148 ++++++
 .../stores/data_style/mesh/polygons/vertex.ts | 183 ++------
 .../mesh/polygons/vertex_attribute.ts         |  80 ++++
 .../data_style/mesh/polygons/vertex_config.ts | 152 ++++++
 .../data_style/mesh/polyhedra/polyhedron.ts   | 187 ++------
 .../mesh/polyhedra/polyhedron_attribute.ts    |  82 ++++
 .../mesh/polyhedra/polyhedron_config.ts       | 157 +++++++
 .../data_style/mesh/polyhedra/vertex.ts       | 183 ++------
 .../mesh/polyhedra/vertex_attribute.ts        |  80 ++++
 .../mesh/polyhedra/vertex_config.ts           | 152 ++++++
 .../data_style/model/blocks/apply_coloring.ts | 173 +++++++
 .../model/blocks/coloring_groups.ts           |  18 +
 .../stores/data_style/model/blocks/index.ts   | 152 +-----
 internal/stores/data_style/model/common.ts    | 129 +-----
 .../data_style/model/common_mutations.ts      | 184 ++++++++
 .../data_style/model/lines/apply_coloring.ts  | 154 +++++++
 .../data_style/model/lines/coloring_groups.ts |  18 +
 .../stores/data_style/model/lines/index.ts    | 144 +-----
 .../model/surfaces/apply_coloring.ts          | 186 ++++++++
 .../model/surfaces/coloring_groups.ts         |  18 +
 .../stores/data_style/model/surfaces/index.ts | 176 +------
 .../stores/data_style/model/visibility.ts     | 159 +------
 .../data_style/model/visibility_dispatch.ts   | 160 +++++++
 internal/stores/data_style/state.ts           | 182 +-------
 internal/stores/data_style/state_shared.ts    | 191 ++++++++
 internal/stores/hybrid_viewer/camera.ts       | 168 +------
 .../stores/hybrid_viewer/camera_helpers.ts    | 120 +++++
 .../hybrid_viewer/camera_orientation.ts       |  60 +++
 server/utils/microservices.ts                 | 112 +----
 server/utils/microservices_process.ts         | 120 +++++
 .../stores/data_style/mesh/edges.nuxt.test.ts | 128 +----
 .../mesh/edges_edge_attribute.nuxt.test.ts    | 144 ++++++
 .../stores/data_style/mesh/edges_helpers.ts   |  21 +
 .../data_style/mesh/polygons.nuxt.test.ts     | 151 +-----
 .../data_style/mesh/polygons_helpers.ts       |  23 +
 .../polygons_polygon_attribute.nuxt.test.ts   | 164 +++++++
 .../data_style/mesh/polyhedra.nuxt.test.ts    | 163 +------
 .../mesh/polyhedra_attributes.nuxt.test.ts    | 174 +++++++
 .../data_style/mesh/polyhedra_helpers.ts      |  23 +
 .../data_style/model/corners.nuxt.test.ts     |  85 +---
 .../data_style/model/corners_helpers.ts       |  27 ++
 .../corners_visibility_color.nuxt.test.ts     |  90 ++++
 .../components/ObjectSelector.nuxt.test.ts    | 120 +----
 .../unit/components/ObjectSelectorHelpers.ts  |  14 +
 .../ObjectSelectorSeveralFiles.nuxt.test.ts   | 120 +++++
 tests/unit/stores/cloud.nuxt.test.ts          | 204 +-------
 .../cloud_connect_existing.nuxt.test.ts       | 108 +++++
 tests/unit/stores/cloud_helpers.ts            |  72 +++
 tests/unit/stores/cloud_start.nuxt.test.ts    | 104 +++++
 tests/unit/stores/data.nuxt.test.ts           | 208 +--------
 .../data_collection_components.nuxt.test.ts   | 162 +++++++
 .../stores/data_registered_items.nuxt.test.ts |  78 ++++
 tests/unit/stores/infra.nuxt.test.ts          |  91 +---
 .../stores/infra_create_backend.nuxt.test.ts  | 105 +++++
 tests/unit/stores/viewer.nuxt.test.ts         | 107 +----
 tests/unit/stores/viewer_helpers.ts           |  53 +++
 .../unit/stores/viewer_requests.nuxt.test.ts  |  77 ++++
 127 files changed, 9836 insertions(+), 7369 deletions(-)
 create mode 100644 app/components/Viewer/EdgedCurve/SpecificEdgesColoring.vue
 create mode 100644 app/components/Viewer/Generic/Mesh/CellsColoring.vue
 create mode 100644 app/components/Viewer/Generic/Mesh/EdgesColoring.vue
 create mode 100644 app/components/Viewer/Generic/Mesh/PolygonsColoring.vue
 create mode 100644 app/components/Viewer/Generic/Mesh/PolyhedraColoring.vue
 create mode 100644 app/components/Viewer/Generic/Model/CornerComponentOptions.vue
 create mode 100644 app/components/Viewer/Generic/Model/CornersTypeOptions.vue
 create mode 100644 app/components/Viewer/Generic/Model/LineComponentOptions.vue
 create mode 100644 app/components/Viewer/Generic/Model/LinesTypeOptions.vue
 create mode 100644 app/components/Viewer/Options/NoDataColorInfo.vue
 create mode 100644 app/components/Viewer/Solid/SpecificPolyhedraColoring.vue
 create mode 100644 app/components/Viewer/Surface/PolygonsColoring.vue
 create mode 100644 app/composables/attribute_selector.ts
 create mode 100644 app/composables/clipping_slices.ts
 create mode 100644 app/composables/view_toolbar_options.ts
 create mode 100644 app/composables/view_toolbar_tool_options.ts
 create mode 100644 app/composables/view_toolbar_tools.ts
 create mode 100644 app/composables/virtual_tree_flatten.ts
 create mode 100644 app/composables/virtual_tree_types.ts
 create mode 100644 app/stores/app_helpers/registry.ts
 create mode 100644 app/stores/menu_helpers/menus_data.ts
 create mode 100644 app/stores/viewer_helpers/actions.ts
 create mode 100644 app/stores/viewer_helpers/request.ts
 create mode 100644 app/utils/clipping_planes_scene.ts
 create mode 100644 app/utils/coloring_styles.ts
 create mode 100644 app/utils/default_styles/mesh_components.ts
 create mode 100644 app/utils/default_styles/model_components.ts
 create mode 100644 app/utils/drag_and_drop.ts
 create mode 100644 app/utils/model_component_coloring.ts
 create mode 100644 app/utils/threshold_sources.ts
 create mode 100644 internal/stores/data_style/mesh/cells/cell_attribute.ts
 create mode 100644 internal/stores/data_style/mesh/cells/cell_config.ts
 create mode 100644 internal/stores/data_style/mesh/cells/vertex_attribute.ts
 create mode 100644 internal/stores/data_style/mesh/cells/vertex_config.ts
 create mode 100644 internal/stores/data_style/mesh/edges/edge_attribute.ts
 create mode 100644 internal/stores/data_style/mesh/edges/edge_config.ts
 create mode 100644 internal/stores/data_style/mesh/edges/vertex_attribute.ts
 create mode 100644 internal/stores/data_style/mesh/edges/vertex_config.ts
 create mode 100644 internal/stores/data_style/mesh/points/vertex_attribute.ts
 create mode 100644 internal/stores/data_style/mesh/points/vertex_config.ts
 create mode 100644 internal/stores/data_style/mesh/polygons/polygon_attribute.ts
 create mode 100644 internal/stores/data_style/mesh/polygons/polygon_config.ts
 create mode 100644 internal/stores/data_style/mesh/polygons/vertex_attribute.ts
 create mode 100644 internal/stores/data_style/mesh/polygons/vertex_config.ts
 create mode 100644 internal/stores/data_style/mesh/polyhedra/polyhedron_attribute.ts
 create mode 100644 internal/stores/data_style/mesh/polyhedra/polyhedron_config.ts
 create mode 100644 internal/stores/data_style/mesh/polyhedra/vertex_attribute.ts
 create mode 100644 internal/stores/data_style/mesh/polyhedra/vertex_config.ts
 create mode 100644 internal/stores/data_style/model/blocks/apply_coloring.ts
 create mode 100644 internal/stores/data_style/model/blocks/coloring_groups.ts
 create mode 100644 internal/stores/data_style/model/common_mutations.ts
 create mode 100644 internal/stores/data_style/model/lines/apply_coloring.ts
 create mode 100644 internal/stores/data_style/model/lines/coloring_groups.ts
 create mode 100644 internal/stores/data_style/model/surfaces/apply_coloring.ts
 create mode 100644 internal/stores/data_style/model/surfaces/coloring_groups.ts
 create mode 100644 internal/stores/data_style/model/visibility_dispatch.ts
 create mode 100644 internal/stores/data_style/state_shared.ts
 create mode 100644 internal/stores/hybrid_viewer/camera_helpers.ts
 create mode 100644 internal/stores/hybrid_viewer/camera_orientation.ts
 create mode 100644 server/utils/microservices_process.ts
 create mode 100644 tests/integration/stores/data_style/mesh/edges_edge_attribute.nuxt.test.ts
 create mode 100644 tests/integration/stores/data_style/mesh/edges_helpers.ts
 create mode 100644 tests/integration/stores/data_style/mesh/polygons_helpers.ts
 create mode 100644 tests/integration/stores/data_style/mesh/polygons_polygon_attribute.nuxt.test.ts
 create mode 100644 tests/integration/stores/data_style/mesh/polyhedra_attributes.nuxt.test.ts
 create mode 100644 tests/integration/stores/data_style/mesh/polyhedra_helpers.ts
 create mode 100644 tests/integration/stores/data_style/model/corners_helpers.ts
 create mode 100644 tests/integration/stores/data_style/model/corners_visibility_color.nuxt.test.ts
 create mode 100644 tests/unit/components/ObjectSelectorHelpers.ts
 create mode 100644 tests/unit/components/ObjectSelectorSeveralFiles.nuxt.test.ts
 create mode 100644 tests/unit/stores/cloud_connect_existing.nuxt.test.ts
 create mode 100644 tests/unit/stores/cloud_helpers.ts
 create mode 100644 tests/unit/stores/cloud_start.nuxt.test.ts
 create mode 100644 tests/unit/stores/data_collection_components.nuxt.test.ts
 create mode 100644 tests/unit/stores/data_registered_items.nuxt.test.ts
 create mode 100644 tests/unit/stores/infra_create_backend.nuxt.test.ts
 create mode 100644 tests/unit/stores/viewer_helpers.ts
 create mode 100644 tests/unit/stores/viewer_requests.nuxt.test.ts

diff --git a/app/components/ClippingPlanes.vue b/app/components/ClippingPlanes.vue
index fc68da83f..bfe71113d 100644
--- a/app/components/ClippingPlanes.vue
+++ b/app/components/ClippingPlanes.vue
@@ -1,16 +1,11 @@
 <script setup lang="ts">
 import { DEBOUNCE_DELAY, DEFAULT_NORMALS } from "@ogw_front/utils/clipping_planes";
-import {
-  DEFAULT_SLICE_AXIS,
-  SLICE_AXES,
-  type SliceAxis,
-  areAllGrids,
-} from "@ogw_front/utils/slice";
 import type { ClippingPlane } from "@ogw_front/composables/clipping_planes_widget_entries";
 import ClippingPlaneCard from "@ogw_front/components/ClippingPlaneCard.vue";
 import SliceCard from "@ogw_front/components/SliceCard.vue";
 import ToolPanel from "@ogw_front/components/ToolPanel.vue";
 import { useClippingPlanesWidget } from "@ogw_front/composables/clipping_planes_widget";
+import { useClippingSlices } from "@ogw_front/composables/clipping_slices";
 import { useDataStore } from "@ogw_front/stores/data";
 import { useDebounceFn } from "@vueuse/core";
 import { useHybridViewerStore } from "@ogw_front/stores/hybrid_viewer";
@@ -33,16 +28,9 @@ function newItemId(): number {
 }
 const planes = ref<ClippingPlane[]>([{ id: newItemId(), origin: undefined, normal: [1, 0, 0] }]);
 const allItems = dataStore.refRegisteredItems();
-const sliceEnabled = ref<boolean>(false);
-const slices = ref<{ id: number; axis: SliceAxis; index: number }[]>([
-  { id: newItemId(), axis: DEFAULT_SLICE_AXIS, index: 0 },
-]);
-const sliceMaxIndices = ref<[number, number, number]>([0, 0, 0]);
 const targetIds = computed<string[]>(() =>
   targetAllVisible.value ? allItems.value.map((item) => item.id) : selectedDatasetIds.value,
 );
-const isAllGrid = computed<boolean>(() => areAllGrids(allItems.value, targetIds.value));
-const isSliceActive = computed<boolean>(() => isAllGrid.value && sliceEnabled.value);
 const availableDatasets = computed<{ title: string; value: string }[]>(() =>
   allItems.value.map((item) => ({
     title: item.name || item.id,
@@ -51,8 +39,6 @@ const availableDatasets = computed<{ title: string; value: string }[]>(() =>
 );
 const widgetContainer = useTemplateRef("widgetContainer");
 let debouncedApply: ((...args: unknown[]) => void) | undefined = undefined;
-let areSlicesApplied = false;
-let pendingSlices: Promise<void> = Promise.resolve();
 
 const {
   getSceneCenter,
@@ -76,6 +62,19 @@ function getUntargetedIds(): string[] {
   return allItems.value.map((item) => item.id).filter((id) => !targetIds.value.includes(id));
 }
 
+const {
+  sliceEnabled,
+  slices,
+  sliceMaxIndices,
+  isAllGrid,
+  isSliceActive,
+  applySlices,
+  addSlice,
+  removeSlice,
+  resetSlices,
+  removeSlices,
+} = useClippingSlices({ allItems, targetIds, getUntargetedIds, newItemId, hybridViewerStore });
+
 async function applyClippingPlanes(): Promise<void> {
   if (allItems.value.length === 0) {
     return;
@@ -97,45 +96,6 @@ async function applyClippingPlanes(): Promise<void> {
   }
 }
 
-async function sendSlices(): Promise<void> {
-  if (!isAllGrid.value && !areSlicesApplied) {
-    return;
-  }
-  const isActive = isSliceActive.value;
-  const untargetedIds = getUntargetedIds();
-  if (targetIds.value.length > 0) {
-    const maxIndices = await hybridViewerStore.setSlice(
-      targetIds.value,
-      isActive ? slices.value.map(({ axis, index }) => ({ axis, index })) : [],
-    );
-    if (isAllGrid.value) {
-      sliceMaxIndices.value = maxIndices;
-    }
-    if (isActive) {
-      for (const slice of slices.value) {
-        slice.index = Math.min(slice.index, maxIndices[slice.axis]);
-      }
-    }
-  }
-  if (areSlicesApplied && untargetedIds.length > 0) {
-    await hybridViewerStore.setSlice(untargetedIds, []);
-  }
-  areSlicesApplied = isActive;
-}
-
-function queueSliceTask(task: () => Promise<void>): Promise<void> {
-  const previous = pendingSlices;
-  pendingSlices = (async (): Promise<void> => {
-    await Promise.allSettled([previous]);
-    await task();
-  })();
-  return pendingSlices;
-}
-
-function applySlices(): Promise<void> {
-  return queueSliceTask(sendSlices);
-}
-
 async function applyAll(): Promise<void> {
   await applyClippingPlanes();
   await applySlices();
@@ -156,19 +116,6 @@ function removePlane(index: number): void {
   planes.value.splice(index, 1);
 }
 
-function addSlice(): void {
-  const lastSlice = slices.value.at(-1);
-  slices.value.push({
-    id: newItemId(),
-    axis: lastSlice ? SLICE_AXES[lastSlice.axis].next : DEFAULT_SLICE_AXIS,
-    index: 0,
-  });
-}
-
-function removeSlice(index: number): void {
-  slices.value.splice(index, 1);
-}
-
 function flipNormal(plane: { normal: number[] }): void {
   plane.normal = plane.normal.map((component) => -component);
   syncWidgets();
@@ -178,8 +125,7 @@ function flipNormal(plane: { normal: number[] }): void {
 async function resetClippingPlanes(): Promise<void> {
   setFromWidget(true);
   planes.value = [{ id: newItemId(), origin: undefined, normal: [1, 0, 0] }];
-  sliceEnabled.value = false;
-  slices.value = [{ id: newItemId(), axis: DEFAULT_SLICE_AXIS, index: 0 }];
+  resetSlices();
   updateWidgetPlacement({ isReset: true });
   setFromWidget(false);
   await applyAll();
@@ -188,12 +134,7 @@ async function resetClippingPlanes(): Promise<void> {
 async function removeClippingPlanes(): Promise<void> {
   const allIds = allItems.value.map((item) => item.id);
   await hybridViewerStore.setClippingPlanes(allIds, []);
-  await queueSliceTask(async () => {
-    if (areSlicesApplied) {
-      await hybridViewerStore.setSlice(allIds, []);
-      areSlicesApplied = false;
-    }
-  });
+  await removeSlices(allIds);
 }
 
 watch(widgetContainer, (container) => {
diff --git a/app/components/DragAndDrop.vue b/app/components/DragAndDrop.vue
index 76d05cbf4..4e0f98deb 100644
--- a/app/components/DragAndDrop.vue
+++ b/app/components/DragAndDrop.vue
@@ -1,4 +1,5 @@
 <script setup lang="ts">
+import { filesFromEntry, isFileAccepted } from "@ogw_front/utils/drag_and_drop";
 import DragAndDropInline from "./DragAndDropInternal/DragAndDropInline.vue";
 import DragAndDropOverlay from "./DragAndDropInternal/DragAndDropOverlay.vue";
 import type { UploadFile } from "@ogw_front/utils/upload_path";
@@ -55,52 +56,6 @@ const isInternalDrag = ref(false);
 const dragCounter = ref(0);
 const fileInput = ref<HTMLInputElement | undefined>(undefined);
 
-const WILDCARD_SUFFIX_LENGTH = 2;
-
-function isFileAccepted(file: File, acceptValue: string | string[] | undefined): boolean {
-  const fileName = (file.name || "").toLowerCase();
-  const fileType = (file.type || "").toLowerCase();
-  const isVext = fileName.endsWith(".vext");
-
-  if (!acceptValue) {
-    return !isVext;
-  }
-  let rules: string[] = [];
-  if (Array.isArray(acceptValue)) {
-    rules = acceptValue;
-  } else if (typeof acceptValue === "string") {
-    rules = acceptValue.split(",");
-  }
-  rules = rules.map((rule) => String(rule).trim()).filter(Boolean);
-  if (rules.length === 0) {
-    return !isVext;
-  }
-
-  return rules.some((rule) => {
-    let cleanRule = rule.toLowerCase();
-    if (!cleanRule) {
-      return !isVext;
-    }
-    if (cleanRule === "*" || cleanRule === "*.*") {
-      return !isVext;
-    }
-    if (cleanRule.startsWith("*.")) {
-      cleanRule = cleanRule.slice(1);
-    }
-    if (cleanRule.startsWith(".")) {
-      return fileName.endsWith(cleanRule);
-    }
-    if (cleanRule.includes("/")) {
-      if (cleanRule.endsWith("/*")) {
-        const typeGroup = cleanRule.slice(0, -WILDCARD_SUFFIX_LENGTH);
-        return fileType.startsWith(typeGroup);
-      }
-      return fileType === cleanRule;
-    }
-    return fileName.endsWith(`.${cleanRule}`);
-  });
-}
-
 function triggerFileDialog(): void {
   fileInput.value?.click();
 }
@@ -126,34 +81,6 @@ function onDragOver(event: DragEvent): void {
   }
 }
 
-async function readAllEntries(reader: FileSystemDirectoryReader): Promise<FileSystemEntry[]> {
-  // oxlint-disable-next-line promise/avoid-new
-  const batch = await new Promise<FileSystemEntry[]>((resolve, reject) => {
-    reader.readEntries(resolve, reject);
-  });
-  if (batch.length === 0) {
-    return [];
-  }
-  return [...batch, ...(await readAllEntries(reader))];
-}
-
-async function filesFromEntry(entry: FileSystemEntry, path: string): Promise<UploadFile[]> {
-  if (entry.isFile) {
-    // oxlint-disable-next-line promise/avoid-new
-    const file = await new Promise<File>((resolve, reject) => {
-      // oxlint-disable-next-line no-unsafe-type-assertion -- isFile guarantees a FileSystemFileEntry
-      (entry as FileSystemFileEntry).file(resolve, reject);
-    });
-    return [Object.assign(file, { relativePath: path })];
-  }
-  // oxlint-disable-next-line no-unsafe-type-assertion -- not a file, so a FileSystemDirectoryEntry
-  const children = await readAllEntries((entry as FileSystemDirectoryEntry).createReader());
-  const nested = await Promise.all(
-    children.map((child) => filesFromEntry(child, `${path}/${child.name}`)),
-  );
-  return nested.flat();
-}
-
 async function emitDroppedEntries(entries: FileSystemEntry[]): Promise<void> {
   try {
     const groups = await Promise.all(
diff --git a/app/components/ThresholdFilter.vue b/app/components/ThresholdFilter.vue
index cc571fe9d..df5bf382e 100644
--- a/app/components/ThresholdFilter.vue
+++ b/app/components/ThresholdFilter.vue
@@ -1,16 +1,9 @@
 <script setup lang="ts">
-import { type AttributeSchemas, fetchAttributeRange } from "@ogw_front/utils/attribute_range";
-import {
-  MESH_ELEMENT_KINDS,
-  MODEL_COMPONENT_ATTRIBUTE_SCHEMAS,
-  MODEL_COMPONENT_KINDS,
-  attributeArrayName,
-  getAttributeRange,
-} from "@ogw_front/utils/attributes";
-import type { JsonRpcSchema } from "@ogw_shared/utils/types.js";
+import { type AttributeSource, fetchSources } from "@ogw_front/utils/threshold_sources";
+import { attributeArrayName, getAttributeRange } from "@ogw_front/utils/attributes";
 import ToolPanel from "@ogw_front/components/ToolPanel.vue";
 import ViewerOptionsAttributeRangeSelector from "@ogw_front/components/Viewer/Options/AttributeRangeSelector.vue";
-import back_schemas from "@geode/opengeodeweb-back/opengeodeweb_back_typed_schemas.js";
+import { fetchAttributeRange } from "@ogw_front/utils/attribute_range";
 import { useBackStore } from "@ogw_front/stores/back";
 import { useDataStore } from "@ogw_front/stores/data";
 import { useDataStyleStore } from "@ogw_front/stores/data_style";
@@ -25,14 +18,6 @@ interface Props {
 
 const { escapeFunction = undefined } = defineProps<Props>();
 
-interface AttributeSource {
-  title: string;
-  schemas: AttributeSchemas;
-  timeStepKey: string;
-  params: { id: string; component_ids?: string[] };
-  location: "point" | "cell";
-}
-
 interface AttributeInfo {
   attribute_name: string;
   nb_items: number;
@@ -87,52 +72,6 @@ const itemOptions = computed<{ title: string; value: number }[]>(() =>
   })),
 );
 
-function attributeSchema(kind: string, isModel: boolean, route: "names" | "range"): JsonRpcSchema {
-  const prefix = isModel ? "model_component_" : "";
-  return back_schemas.opengeodeweb_back[
-    `${prefix}${kind}_attribute_${route}` as keyof typeof back_schemas.opengeodeweb_back
-  ] as JsonRpcSchema;
-}
-
-function attributeSource(
-  kind: string,
-  title: string,
-  params: { id: string; component_ids?: string[] },
-  modelType?: string,
-): AttributeSource {
-  const isModel = modelType !== undefined;
-  const schema = attributeSchema(kind, isModel, "names");
-  return {
-    title: `${title}${kind} attribute`,
-    schemas: { names: schema, range: attributeSchema(kind, isModel, "range") },
-    timeStepKey:
-      modelType === undefined
-        ? schema.$id
-        : (MODEL_COMPONENT_ATTRIBUTE_SCHEMAS[modelType]?.[kind]?.$id ?? schema.$id),
-    params,
-    location: kind === "vertex" ? "point" : "cell",
-  };
-}
-
-async function fetchSources(id: string): Promise<AttributeSource[]> {
-  const item = await dataStore.item(id);
-  if (item.viewer_type !== "model") {
-    return ["vertex", MESH_ELEMENT_KINDS[item.geode_object_type]]
-      .filter((kind): kind is string => kind !== undefined)
-      .map((kind) => attributeSource(kind, "", { id }));
-  }
-  const modelSources = await Promise.all(
-    Object.entries(MODEL_COMPONENT_KINDS).map(async ([type, kinds]) => {
-      const component_ids = await dataStore.getMeshComponentGeodeIds(id, type);
-      if (component_ids.length === 0) {
-        return [];
-      }
-      return kinds.map((kind) => attributeSource(kind, `${type} `, { id, component_ids }, type));
-    }),
-  );
-  return modelSources.flat();
-}
-
 async function applyThreshold(): Promise<void> {
   const source = sources.value[selectedSourceIndex.value ?? -1];
   if (
@@ -183,7 +122,7 @@ watch(selectedDatasetId, async (id, previousId) => {
     await hybridViewerStore.setThreshold([previousId]);
   }
   selectedSourceIndex.value = undefined;
-  sources.value = id ? await fetchSources(id) : [];
+  sources.value = id ? await fetchSources(dataStore, id) : [];
 });
 
 watch(selectedSourceIndex, async (index) => {
diff --git a/app/components/ViewToolbar.vue b/app/components/ViewToolbar.vue
index 1d182bbcd..25998e4ca 100644
--- a/app/components/ViewToolbar.vue
+++ b/app/components/ViewToolbar.vue
@@ -1,9 +1,5 @@
 <script setup lang="ts">
-import schemas, {
-  type PickedFieldType,
-} from "@geode/opengeodeweb-viewer/opengeodeweb_viewer_typed_schemas.js";
 import ActionButton from "@ogw_front/components/ActionButton.vue";
-import CameraBookmarkIcon from "@ogw_front/assets/viewer_svgs/camera-bookmark.svg";
 import CameraManager from "@ogw_front/components/CameraManager.vue";
 import CameraOrientation from "@ogw_front/components/CameraOrientation.vue";
 import ClippingPlanes from "@ogw_front/components/ClippingPlanes.vue";
@@ -15,35 +11,25 @@ import ThresholdFilter from "@ogw_front/components/ThresholdFilter.vue";
 import ZScaling from "@ogw_front/components/ZScaling.vue";
 import { onKeyStroke } from "@vueuse/core";
 import { useHybridViewerStore } from "@ogw_front/stores/hybrid_viewer";
-import { useViewerStore } from "@ogw_front/stores/viewer";
+import { useViewToolbarOptions } from "@ogw_front/composables/view_toolbar_options";
+import { useViewToolbarTools } from "@ogw_front/composables/view_toolbar_tools";
 
 const hybridViewerStore = useHybridViewerStore();
-const viewerStore = useViewerStore();
-const { is_picking, is_zoom_box_active } = storeToRefs(hybridViewerStore);
-const { picking_mode } = storeToRefs(viewerStore);
-const showScreenshot = ref<boolean>(false);
-const showCameraManager = ref<boolean>(false);
-const showCameraOrientation = ref<boolean>(false);
-const showZScaling = ref<boolean>(false);
-const showClippingPlanes = ref<boolean>(false);
-const showShrinkFilter = ref<boolean>(false);
-const showExplodeFilter = ref<boolean>(false);
-const showThresholdFilter = ref<boolean>(false);
-const showRuler = ref<boolean>(false);
-const gridScale = ref<boolean>(false);
+const tools = useViewToolbarTools();
+const {
+  showScreenshot,
+  showCameraManager,
+  showCameraOrientation,
+  showZScaling,
+  showClippingPlanes,
+  showShrinkFilter,
+  showExplodeFilter,
+  showThresholdFilter,
+  showRuler,
+} = tools;
 const zScale = ref<number>(hybridViewerStore.zScale);
 const openSubMenus = ref<Record<string, boolean>>({});
-
-interface CameraOptionAction {
-  title?: string;
-  testId: string;
-  tooltip?: string;
-  icon: string;
-  iconSize?: number;
-  color?: string;
-  action?: () => void;
-  menu?: CameraOptionAction[];
-}
+const camera_options = useViewToolbarOptions(tools);
 
 watch(
   () => hybridViewerStore.zScale,
@@ -65,208 +51,6 @@ onKeyStroke("Escape", () => {
     }
   }
 });
-
-function stopHoverHighlight(): void {
-  hybridViewerStore.is_hover_highlight = false;
-  hybridViewerStore.clearHoverHighlight();
-}
-
-function closeAllToolsExcept(toolRef: Ref<boolean>): void {
-  const tools = [
-    showCameraOrientation,
-    showCameraManager,
-    showScreenshot,
-    showZScaling,
-    showClippingPlanes,
-    showShrinkFilter,
-    showExplodeFilter,
-    showThresholdFilter,
-    showRuler,
-    is_picking,
-    is_zoom_box_active,
-    picking_mode,
-  ];
-  for (const tool of tools) {
-    if (tool !== toolRef) {
-      tool.value = false;
-    }
-  }
-  if (toolRef !== showRuler) {
-    void nextTick(stopHoverHighlight);
-  }
-}
-
-function toggleTool(toolRef: Ref<boolean>): void {
-  closeAllToolsExcept(toolRef);
-  toolRef.value = !toolRef.value;
-}
-
-function toggleHoverHighlight(fieldType: PickedFieldType): void {
-  const activate =
-    !hybridViewerStore.is_hover_highlight ||
-    hybridViewerStore.hover_highlight_field_type !== fieldType;
-  closeAllToolsExcept(showRuler);
-  if (activate) {
-    hybridViewerStore.is_hover_highlight = true;
-    hybridViewerStore.hover_highlight_field_type = fieldType;
-  } else {
-    stopHoverHighlight();
-  }
-}
-
-const camera_options = computed<CameraOptionAction[]>(() => [
-  {
-    testId: "resetCameraButton",
-    tooltip: "Reset camera",
-    icon: "mdi-cube-scan",
-    action: (): void => {
-      hybridViewerStore.resetCamera();
-    },
-  },
-  {
-    testId: "centerOnClickButton",
-    tooltip: "Center on click",
-    icon: "mdi-crosshairs-question",
-    color: hybridViewerStore.is_picking ? "primary" : undefined,
-    action: (): void => {
-      toggleTool(is_picking);
-    },
-  },
-  {
-    testId: "zoomToBoxButton",
-    tooltip: "Zoom to box",
-    icon: "mdi-magnify-scan",
-    color: hybridViewerStore.is_zoom_box_active ? "primary" : undefined,
-    action: (): void => {
-      toggleTool(is_zoom_box_active);
-    },
-  },
-  {
-    testId: "highlightOnHoverButton",
-    tooltip: "Highlight on hover",
-    icon: "mdi-cursor-default-click",
-    color: hybridViewerStore.is_hover_highlight ? "primary" : undefined,
-    action: hybridViewerStore.is_hover_highlight ? stopHoverHighlight : undefined,
-    menu: [
-      {
-        title: "Cells",
-        testId: "highlightOnHoverCellsButton",
-        icon: "mdi-select-all",
-        action: (): void => {
-          toggleHoverHighlight("CELL");
-        },
-      },
-      {
-        title: "Points",
-        testId: "highlightOnHoverPointsButton",
-        icon: "mdi-select-drag",
-        action: (): void => {
-          toggleHoverHighlight("POINT");
-        },
-      },
-    ],
-  },
-  {
-    testId: "cameraOrientationButton",
-    tooltip: "Camera orientation",
-    icon: "mdi-rotate-3d",
-    action: (): void => {
-      toggleTool(showCameraOrientation);
-    },
-  },
-  {
-    testId: "cameraManagerButton",
-    tooltip: "Manage camera positions",
-    icon: CameraBookmarkIcon,
-    iconSize: 34,
-    action: (): void => {
-      toggleTool(showCameraManager);
-    },
-  },
-  {
-    testId: "screenshotButton",
-    tooltip: "Take a screenshot",
-    icon: "mdi-camera",
-    action: (): void => {
-      toggleTool(showScreenshot);
-    },
-  },
-  {
-    testId: "gridScaleButton",
-    tooltip: "Toggle grid scale",
-    icon: "mdi-ruler-square",
-    color: gridScale.value ? "primary" : undefined,
-    action: (): void => {
-      const schema = schemas.opengeodeweb_viewer.viewer.grid_scale;
-      const params = { visibility: !gridScale.value };
-      viewerStore.request(
-        {
-          schema,
-          params,
-        },
-        {
-          response_function: () => {
-            gridScale.value = !gridScale.value;
-            hybridViewerStore.remoteRender();
-          },
-        },
-      );
-    },
-  },
-  {
-    testId: "zScalingButton",
-    tooltip: "Z Scaling Control",
-    icon: "mdi-sort",
-    action: (): void => {
-      toggleTool(showZScaling);
-    },
-  },
-  {
-    testId: "clippingPlanesButton",
-    tooltip: "Clipping Planes",
-    icon: "mdi-content-cut",
-    color: showClippingPlanes.value ? "primary" : undefined,
-    action: (): void => {
-      toggleTool(showClippingPlanes);
-    },
-  },
-  {
-    testId: "shrinkFilterButton",
-    tooltip: "Shrink Filter",
-    icon: "mdi-arrow-collapse-all",
-    color: showShrinkFilter.value ? "primary" : undefined,
-    action: (): void => {
-      toggleTool(showShrinkFilter);
-    },
-  },
-  {
-    testId: "explodeFilterButton",
-    tooltip: "Exploded View",
-    icon: "mdi-arrow-expand-all",
-    color: showExplodeFilter.value ? "primary" : undefined,
-    action: (): void => {
-      toggleTool(showExplodeFilter);
-    },
-  },
-  {
-    testId: "thresholdFilterButton",
-    tooltip: "Threshold Filter",
-    icon: "mdi-filter-variant",
-    color: showThresholdFilter.value ? "primary" : undefined,
-    action: (): void => {
-      toggleTool(showThresholdFilter);
-    },
-  },
-  {
-    testId: "rulerButton",
-    tooltip: "Ruler",
-    icon: "mdi-ruler",
-    color: showRuler.value ? "primary" : undefined,
-    action: (): void => {
-      toggleTool(showRuler);
-    },
-  },
-]);
 </script>
 
 <template>
diff --git a/app/components/Viewer/EdgedCurve/SpecificEdgesColoring.vue b/app/components/Viewer/EdgedCurve/SpecificEdgesColoring.vue
new file mode 100644
index 000000000..68a592daa
--- /dev/null
+++ b/app/components/Viewer/EdgedCurve/SpecificEdgesColoring.vue
@@ -0,0 +1,209 @@
+<script setup lang="ts">
+import {
+  type RangesPerData,
+  applyRangesPerData,
+  useBatchStyle,
+} from "@ogw_front/composables/batch_style";
+import type { RGBAColor } from "@ogw_front/utils/default_styles/constants";
+import ViewerOptionsColoringTypeSelector from "@ogw_front/components/Viewer/Options/ColoringTypeSelector.vue";
+import { useDataStyleStore } from "@ogw_front/stores/data_style";
+import { useHybridViewerStore } from "@ogw_front/stores/hybrid_viewer";
+
+const dataStyleStore = useDataStyleStore();
+const hybridViewerStore = useHybridViewerStore();
+const { applyBatchStyle } = useBatchStyle();
+
+interface Props {
+  id: string;
+}
+
+const { id } = defineProps<Props>();
+
+const coloring_style_key = computed<string>({
+  get: () => dataStyleStore.meshEdgesActiveColoring(id),
+  set: async (newValue) => {
+    await applyBatchStyle(id, (targetId: string) =>
+      dataStyleStore.setMeshEdgesActiveColoring(targetId, newValue),
+    );
+    hybridViewerStore.remoteRender();
+  },
+});
+const color = computed<RGBAColor | undefined>({
+  get: () => dataStyleStore.meshEdgesColor(id) as RGBAColor | undefined,
+  set: async (newValue) => {
+    if (newValue === undefined) {
+      return;
+    }
+    await applyBatchStyle(id, (targetId: string) =>
+      dataStyleStore.setMeshEdgesColor(targetId, newValue),
+    );
+    hybridViewerStore.remoteRender();
+  },
+});
+const vertex_attribute_name = computed<string | undefined>({
+  get: () => dataStyleStore.meshEdgesVertexAttributeName(id),
+  set: async (newValue) => {
+    if (newValue === undefined) {
+      return;
+    }
+    await applyBatchStyle(id, (targetId: string) =>
+      Promise.resolve(dataStyleStore.setMeshEdgesVertexAttributeName(targetId, newValue)),
+    );
+    hybridViewerStore.remoteRender();
+  },
+});
+
+const vertex_attribute_time_step = computed<number | undefined>({
+  get: () => dataStyleStore.meshEdgesVertexAttributeTimeStep(id),
+  set: async (newValue) => {
+    if (newValue === undefined) {
+      return;
+    }
+    await applyBatchStyle(id, (targetId: string) =>
+      Promise.resolve(dataStyleStore.setMeshEdgesVertexAttributeTimeStep(targetId, newValue)),
+    );
+    hybridViewerStore.remoteRender();
+  },
+});
+const vertex_attribute_item = computed<string | undefined>({
+  get: () => dataStyleStore.meshEdgesVertexAttributeItem(id),
+  set: async (newValue) => {
+    await applyBatchStyle(id, (targetId: string) =>
+      Promise.resolve(dataStyleStore.setMeshEdgesVertexAttributeItem(targetId, newValue)),
+    );
+    hybridViewerStore.remoteRender();
+  },
+});
+const vertex_attribute_range = computed<[number, number] | undefined>({
+  get: () => dataStyleStore.meshEdgesVertexAttributeRange(id),
+  set: async (newValue) => {
+    const [minimum, maximum] = newValue;
+    if (minimum === undefined || maximum === undefined) {
+      return;
+    }
+    await applyBatchStyle(id, (targetId: string) =>
+      Promise.resolve(dataStyleStore.setMeshEdgesVertexAttributeRange(targetId, minimum, maximum)),
+    );
+    hybridViewerStore.remoteRender();
+  },
+});
+const vertex_attribute_color_map = computed<Map<string, RGBAColor>>({
+  get: () => dataStyleStore.meshEdgesVertexAttributeColorMap(id),
+  set: async (newValue) => {
+    await applyBatchStyle(id, (targetId: string) =>
+      Promise.resolve(dataStyleStore.setMeshEdgesVertexAttributeColorMap(targetId, newValue)),
+    );
+    hybridViewerStore.remoteRender();
+  },
+});
+const vertex_attribute_no_data_color = computed<RGBAColor>({
+  get: () => dataStyleStore.meshEdgesVertexAttributeNoDataColor(id),
+  set: async (newValue) => {
+    await applyBatchStyle(id, (targetId: string) =>
+      dataStyleStore.setMeshEdgesVertexAttributeNoDataColor(targetId, newValue),
+    );
+    hybridViewerStore.remoteRender();
+  },
+});
+const edge_attribute_name = computed<string | undefined>({
+  get: () => dataStyleStore.meshEdgesEdgeAttributeName(id),
+  set: async (newValue) => {
+    if (newValue === undefined) {
+      return;
+    }
+    await applyBatchStyle(id, (targetId: string) =>
+      Promise.resolve(dataStyleStore.setMeshEdgesEdgeAttributeName(targetId, newValue)),
+    );
+    hybridViewerStore.remoteRender();
+  },
+});
+
+const edge_attribute_time_step = computed<number | undefined>({
+  get: () => dataStyleStore.meshEdgesEdgeAttributeTimeStep(id),
+  set: async (newValue) => {
+    if (newValue === undefined) {
+      return;
+    }
+    await applyBatchStyle(id, (targetId: string) =>
+      Promise.resolve(dataStyleStore.setMeshEdgesEdgeAttributeTimeStep(targetId, newValue)),
+    );
+    hybridViewerStore.remoteRender();
+  },
+});
+const edge_attribute_item = computed<string | undefined>({
+  get: () => dataStyleStore.meshEdgesEdgeAttributeItem(id),
+  set: async (newValue) => {
+    await applyBatchStyle(id, (targetId: string) =>
+      Promise.resolve(dataStyleStore.setMeshEdgesEdgeAttributeItem(targetId, newValue)),
+    );
+    hybridViewerStore.remoteRender();
+  },
+});
+const edge_attribute_range = computed<[number, number] | undefined>({
+  get: () => dataStyleStore.meshEdgesEdgeAttributeRange(id),
+  set: async (newValue) => {
+    const [minimum, maximum] = newValue;
+    if (minimum === undefined || maximum === undefined) {
+      return;
+    }
+    await applyBatchStyle(id, (targetId: string) =>
+      Promise.resolve(dataStyleStore.setMeshEdgesEdgeAttributeRange(targetId, minimum, maximum)),
+    );
+    hybridViewerStore.remoteRender();
+  },
+});
+const edge_attribute_color_map = computed<Map<string, RGBAColor>>({
+  get: () => dataStyleStore.meshEdgesEdgeAttributeColorMap(id),
+  set: async (newValue) => {
+    await applyBatchStyle(id, (targetId: string) =>
+      Promise.resolve(dataStyleStore.setMeshEdgesEdgeAttributeColorMap(targetId, newValue)),
+    );
+    hybridViewerStore.remoteRender();
+  },
+});
+const edge_attribute_no_data_color = computed<RGBAColor>({
+  get: () => dataStyleStore.meshEdgesEdgeAttributeNoDataColor(id),
+  set: async (newValue) => {
+    await applyBatchStyle(id, (targetId: string) =>
+      dataStyleStore.setMeshEdgesEdgeAttributeNoDataColor(targetId, newValue),
+    );
+    hybridViewerStore.remoteRender();
+  },
+});
+
+async function setVertexAttributeRangesPerData(ranges: RangesPerData): Promise<void> {
+  await applyRangesPerData(ranges, (targetId, minimum, maximum) =>
+    dataStyleStore.setMeshEdgesVertexAttributeRange(targetId, minimum, maximum),
+  );
+  hybridViewerStore.remoteRender();
+}
+
+async function setEdgeAttributeRangesPerData(ranges: RangesPerData): Promise<void> {
+  await applyRangesPerData(ranges, (targetId, minimum, maximum) =>
+    dataStyleStore.setMeshEdgesEdgeAttributeRange(targetId, minimum, maximum),
+  );
+  hybridViewerStore.remoteRender();
+}
+</script>
+
+<template>
+  <ViewerOptionsColoringTypeSelector
+    :id="id"
+    v-model:coloring_style_key="coloring_style_key"
+    v-model:color="color"
+    v-model:vertex_attribute_name="vertex_attribute_name"
+    v-model:vertex_attribute_item="vertex_attribute_item"
+    v-model:vertex_attribute_range="vertex_attribute_range"
+    @vertex_attribute_ranges_per_data="setVertexAttributeRangesPerData"
+    v-model:vertex_attribute_color_map="vertex_attribute_color_map"
+    v-model:vertex_attribute_no_data_color="vertex_attribute_no_data_color"
+    v-model:vertex_attribute_time_step="vertex_attribute_time_step"
+    v-model:edge_attribute_name="edge_attribute_name"
+    v-model:edge_attribute_item="edge_attribute_item"
+    v-model:edge_attribute_range="edge_attribute_range"
+    @edge_attribute_ranges_per_data="setEdgeAttributeRangesPerData"
+    v-model:edge_attribute_color_map="edge_attribute_color_map"
+    v-model:edge_attribute_no_data_color="edge_attribute_no_data_color"
+    v-model:edge_attribute_time_step="edge_attribute_time_step"
+  />
+</template>
diff --git a/app/components/Viewer/EdgedCurve/SpecificEdgesOptions.vue b/app/components/Viewer/EdgedCurve/SpecificEdgesOptions.vue
index dba2a3118..eff9523a1 100644
--- a/app/components/Viewer/EdgedCurve/SpecificEdgesOptions.vue
+++ b/app/components/Viewer/EdgedCurve/SpecificEdgesOptions.vue
@@ -1,17 +1,12 @@
 <script setup lang="ts">
-import {
-  type RangesPerData,
-  applyRangesPerData,
-  useBatchStyle,
-} from "@ogw_front/composables/batch_style";
 import ViewerContextMenuItem, {
   type ItemProps,
 } from "@ogw_front/components/Viewer/ContextMenu/ContextMenuItem.vue";
 import EdgedCurveEdges from "@ogw_front/assets/viewer_svgs/edged_curve_edges.svg";
-import type { RGBAColor } from "@ogw_front/utils/default_styles/constants";
-import ViewerOptionsColoringTypeSelector from "@ogw_front/components/Viewer/Options/ColoringTypeSelector.vue";
+import ViewerEdgedCurveSpecificEdgesColoring from "@ogw_front/components/Viewer/EdgedCurve/SpecificEdgesColoring.vue";
 import ViewerOptionsVisibilitySwitch from "@ogw_front/components/Viewer/Options/VisibilitySwitch.vue";
 import ViewerOptionsWidthSlider from "@ogw_front/components/Viewer/Options/Sliders/Width.vue";
+import { useBatchStyle } from "@ogw_front/composables/batch_style";
 import { useDataStyleStore } from "@ogw_front/stores/data_style";
 import { useHybridViewerStore } from "@ogw_front/stores/hybrid_viewer";
 
@@ -45,171 +40,6 @@ const width = computed<number>({
     hybridViewerStore.remoteRender();
   },
 });
-const coloring_style_key = computed<string>({
-  get: () => dataStyleStore.meshEdgesActiveColoring(id.value),
-  set: async (newValue) => {
-    await applyBatchStyle(id.value, (targetId: string) =>
-      dataStyleStore.setMeshEdgesActiveColoring(targetId, newValue),
-    );
-    hybridViewerStore.remoteRender();
-  },
-});
-const color = computed<RGBAColor | undefined>({
-  get: () => dataStyleStore.meshEdgesColor(id.value) as RGBAColor | undefined,
-  set: async (newValue) => {
-    if (newValue === undefined) {
-      return;
-    }
-    await applyBatchStyle(id.value, (targetId: string) =>
-      dataStyleStore.setMeshEdgesColor(targetId, newValue),
-    );
-    hybridViewerStore.remoteRender();
-  },
-});
-const vertex_attribute_name = computed<string | undefined>({
-  get: () => dataStyleStore.meshEdgesVertexAttributeName(id.value),
-  set: async (newValue) => {
-    if (newValue === undefined) {
-      return;
-    }
-    await applyBatchStyle(id.value, (targetId: string) =>
-      Promise.resolve(dataStyleStore.setMeshEdgesVertexAttributeName(targetId, newValue)),
-    );
-    hybridViewerStore.remoteRender();
-  },
-});
-
-const vertex_attribute_time_step = computed<number | undefined>({
-  get: () => dataStyleStore.meshEdgesVertexAttributeTimeStep(id.value),
-  set: async (newValue) => {
-    if (newValue === undefined) {
-      return;
-    }
-    await applyBatchStyle(id.value, (targetId: string) =>
-      Promise.resolve(dataStyleStore.setMeshEdgesVertexAttributeTimeStep(targetId, newValue)),
-    );
-    hybridViewerStore.remoteRender();
-  },
-});
-const vertex_attribute_item = computed<string | undefined>({
-  get: () => dataStyleStore.meshEdgesVertexAttributeItem(id.value),
-  set: async (newValue) => {
-    await applyBatchStyle(id.value, (targetId: string) =>
-      Promise.resolve(dataStyleStore.setMeshEdgesVertexAttributeItem(targetId, newValue)),
-    );
-    hybridViewerStore.remoteRender();
-  },
-});
-const vertex_attribute_range = computed<[number, number] | undefined>({
-  get: () => dataStyleStore.meshEdgesVertexAttributeRange(id.value),
-  set: async (newValue) => {
-    const [minimum, maximum] = newValue;
-    if (minimum === undefined || maximum === undefined) {
-      return;
-    }
-    await applyBatchStyle(id.value, (targetId: string) =>
-      Promise.resolve(dataStyleStore.setMeshEdgesVertexAttributeRange(targetId, minimum, maximum)),
-    );
-    hybridViewerStore.remoteRender();
-  },
-});
-const vertex_attribute_color_map = computed<Map<string, RGBAColor>>({
-  get: () => dataStyleStore.meshEdgesVertexAttributeColorMap(id.value),
-  set: async (newValue) => {
-    await applyBatchStyle(id.value, (targetId: string) =>
-      Promise.resolve(dataStyleStore.setMeshEdgesVertexAttributeColorMap(targetId, newValue)),
-    );
-    hybridViewerStore.remoteRender();
-  },
-});
-const vertex_attribute_no_data_color = computed<RGBAColor>({
-  get: () => dataStyleStore.meshEdgesVertexAttributeNoDataColor(id.value),
-  set: async (newValue) => {
-    await applyBatchStyle(id.value, (targetId: string) =>
-      dataStyleStore.setMeshEdgesVertexAttributeNoDataColor(targetId, newValue),
-    );
-    hybridViewerStore.remoteRender();
-  },
-});
-const edge_attribute_name = computed<string | undefined>({
-  get: () => dataStyleStore.meshEdgesEdgeAttributeName(id.value),
-  set: async (newValue) => {
-    if (newValue === undefined) {
-      return;
-    }
-    await applyBatchStyle(id.value, (targetId: string) =>
-      Promise.resolve(dataStyleStore.setMeshEdgesEdgeAttributeName(targetId, newValue)),
-    );
-    hybridViewerStore.remoteRender();
-  },
-});
-
-const edge_attribute_time_step = computed<number | undefined>({
-  get: () => dataStyleStore.meshEdgesEdgeAttributeTimeStep(id.value),
-  set: async (newValue) => {
-    if (newValue === undefined) {
-      return;
-    }
-    await applyBatchStyle(id.value, (targetId: string) =>
-      Promise.resolve(dataStyleStore.setMeshEdgesEdgeAttributeTimeStep(targetId, newValue)),
-    );
-    hybridViewerStore.remoteRender();
-  },
-});
-const edge_attribute_item = computed<string | undefined>({
-  get: () => dataStyleStore.meshEdgesEdgeAttributeItem(id.value),
-  set: async (newValue) => {
-    await applyBatchStyle(id.value, (targetId: string) =>
-      Promise.resolve(dataStyleStore.setMeshEdgesEdgeAttributeItem(targetId, newValue)),
-    );
-    hybridViewerStore.remoteRender();
-  },
-});
-const edge_attribute_range = computed<[number, number] | undefined>({
-  get: () => dataStyleStore.meshEdgesEdgeAttributeRange(id.value),
-  set: async (newValue) => {
-    const [minimum, maximum] = newValue;
-    if (minimum === undefined || maximum === undefined) {
-      return;
-    }
-    await applyBatchStyle(id.value, (targetId: string) =>
-      Promise.resolve(dataStyleStore.setMeshEdgesEdgeAttributeRange(targetId, minimum, maximum)),
-    );
-    hybridViewerStore.remoteRender();
-  },
-});
-const edge_attribute_color_map = computed<Map<string, RGBAColor>>({
-  get: () => dataStyleStore.meshEdgesEdgeAttributeColorMap(id.value),
-  set: async (newValue) => {
-    await applyBatchStyle(id.value, (targetId: string) =>
-      Promise.resolve(dataStyleStore.setMeshEdgesEdgeAttributeColorMap(targetId, newValue)),
-    );
-    hybridViewerStore.remoteRender();
-  },
-});
-const edge_attribute_no_data_color = computed<RGBAColor>({
-  get: () => dataStyleStore.meshEdgesEdgeAttributeNoDataColor(id.value),
-  set: async (newValue) => {
-    await applyBatchStyle(id.value, (targetId: string) =>
-      dataStyleStore.setMeshEdgesEdgeAttributeNoDataColor(targetId, newValue),
-    );
-    hybridViewerStore.remoteRender();
-  },
-});
-
-async function setVertexAttributeRangesPerData(ranges: RangesPerData): Promise<void> {
-  await applyRangesPerData(ranges, (targetId, minimum, maximum) =>
-    dataStyleStore.setMeshEdgesVertexAttributeRange(targetId, minimum, maximum),
-  );
-  hybridViewerStore.remoteRender();
-}
-
-async function setEdgeAttributeRangesPerData(ranges: RangesPerData): Promise<void> {
-  await applyRangesPerData(ranges, (targetId, minimum, maximum) =>
-    dataStyleStore.setMeshEdgesEdgeAttributeRange(targetId, minimum, maximum),
-  );
-  hybridViewerStore.remoteRender();
-}
 </script>
 
 <template>
@@ -225,25 +55,7 @@ async function setEdgeAttributeRangesPerData(ranges: RangesPerData): Promise<voi
       <template v-if="visibility">
         <v-divider class="my-2" />
         <ViewerOptionsWidthSlider data-testid="meshEdgesWidthSlider" v-model="width" />
-        <ViewerOptionsColoringTypeSelector
-          :id="id"
-          v-model:coloring_style_key="coloring_style_key"
-          v-model:color="color"
-          v-model:vertex_attribute_name="vertex_attribute_name"
-          v-model:vertex_attribute_item="vertex_attribute_item"
-          v-model:vertex_attribute_range="vertex_attribute_range"
-          @vertex_attribute_ranges_per_data="setVertexAttributeRangesPerData"
-          v-model:vertex_attribute_color_map="vertex_attribute_color_map"
-          v-model:vertex_attribute_no_data_color="vertex_attribute_no_data_color"
-          v-model:vertex_attribute_time_step="vertex_attribute_time_step"
-          v-model:edge_attribute_name="edge_attribute_name"
-          v-model:edge_attribute_item="edge_attribute_item"
-          v-model:edge_attribute_range="edge_attribute_range"
-          @edge_attribute_ranges_per_data="setEdgeAttributeRangesPerData"
-          v-model:edge_attribute_color_map="edge_attribute_color_map"
-          v-model:edge_attribute_no_data_color="edge_attribute_no_data_color"
-          v-model:edge_attribute_time_step="edge_attribute_time_step"
-        />
+        <ViewerEdgedCurveSpecificEdgesColoring :id="id" />
       </template>
     </template>
   </ViewerContextMenuItem>
diff --git a/app/components/Viewer/Generic/Mesh/CellsColoring.vue b/app/components/Viewer/Generic/Mesh/CellsColoring.vue
new file mode 100644
index 000000000..518599e5b
--- /dev/null
+++ b/app/components/Viewer/Generic/Mesh/CellsColoring.vue
@@ -0,0 +1,228 @@
+<script setup lang="ts">
+import {
+  type RangesPerData,
+  applyRangesPerData,
+  useBatchStyle,
+} from "@ogw_front/composables/batch_style";
+import type { RGBAColor } from "@ogw_front/utils/default_styles/constants";
+import ViewerOptionsColoringTypeSelector from "@ogw_front/components/Viewer/Options/ColoringTypeSelector.vue";
+import { useDataStyleStore } from "@ogw_front/stores/data_style";
+import { useHybridViewerStore } from "@ogw_front/stores/hybrid_viewer";
+
+interface Texture {
+  id: string;
+  texture_name: string;
+}
+
+const dataStyleStore = useDataStyleStore();
+const hybridViewerStore = useHybridViewerStore();
+const { applyBatchStyle } = useBatchStyle();
+
+interface Props {
+  id: string;
+}
+
+const { id } = defineProps<Props>();
+
+const coloring_style_key = computed<string>({
+  get: () => dataStyleStore.meshCellsActiveColoring(id),
+  set: async (newValue) => {
+    await applyBatchStyle(id, (targetId: string) =>
+      dataStyleStore.setMeshCellsActiveColoring(targetId, newValue),
+    );
+    hybridViewerStore.remoteRender();
+  },
+});
+const color = computed<RGBAColor | undefined>({
+  get: () => dataStyleStore.meshCellsColor(id) as RGBAColor | undefined,
+  set: async (newValue) => {
+    if (newValue === undefined) {
+      return;
+    }
+    await applyBatchStyle(id, (targetId: string) =>
+      dataStyleStore.setMeshCellsColor(targetId, newValue),
+    );
+    hybridViewerStore.remoteRender();
+  },
+});
+const textures = computed<Texture[] | undefined>({
+  get: () => dataStyleStore.meshCellsTextures(id) as Texture[] | undefined,
+  set: async (newValue) => {
+    if (newValue === undefined) {
+      return;
+    }
+    await applyBatchStyle(id, (targetId: string) =>
+      dataStyleStore.setMeshCellsTextures(targetId, newValue),
+    );
+    hybridViewerStore.remoteRender();
+  },
+});
+
+const vertex_attribute_name = computed<string | undefined>({
+  get: () => dataStyleStore.meshCellsVertexAttributeName(id),
+  set: async (newValue) => {
+    if (newValue === undefined) {
+      return;
+    }
+    await applyBatchStyle(id, (targetId: string) =>
+      Promise.resolve(dataStyleStore.setMeshCellsVertexAttributeName(targetId, newValue)),
+    );
+    hybridViewerStore.remoteRender();
+  },
+});
+
+const vertex_attribute_time_step = computed<number | undefined>({
+  get: () => dataStyleStore.meshCellsVertexAttributeTimeStep(id),
+  set: async (newValue) => {
+    if (newValue === undefined) {
+      return;
+    }
+    await applyBatchStyle(id, (targetId: string) =>
+      Promise.resolve(dataStyleStore.setMeshCellsVertexAttributeTimeStep(targetId, newValue)),
+    );
+    hybridViewerStore.remoteRender();
+  },
+});
+const vertex_attribute_item = computed<string | undefined>({
+  get: () => dataStyleStore.meshCellsVertexAttributeItem(id),
+  set: async (newValue) => {
+    await applyBatchStyle(id, (targetId: string) =>
+      Promise.resolve(dataStyleStore.setMeshCellsVertexAttributeItem(targetId, newValue)),
+    );
+    hybridViewerStore.remoteRender();
+  },
+});
+const vertex_attribute_range = computed<[number, number] | undefined>({
+  get: () => dataStyleStore.meshCellsVertexAttributeRange(id),
+  set: async (newValue) => {
+    const [minimum, maximum] = newValue;
+    if (minimum === undefined || maximum === undefined) {
+      return;
+    }
+    await applyBatchStyle(id, (targetId: string) =>
+      Promise.resolve(dataStyleStore.setMeshCellsVertexAttributeRange(targetId, minimum, maximum)),
+    );
+    hybridViewerStore.remoteRender();
+  },
+});
+const vertex_attribute_color_map = computed<Map<string, RGBAColor>>({
+  get: () => dataStyleStore.meshCellsVertexAttributeColorMap(id),
+  set: async (newValue) => {
+    await applyBatchStyle(id, (targetId: string) =>
+      Promise.resolve(dataStyleStore.setMeshCellsVertexAttributeColorMap(targetId, newValue)),
+    );
+    hybridViewerStore.remoteRender();
+  },
+});
+const vertex_attribute_no_data_color = computed<RGBAColor>({
+  get: () => dataStyleStore.meshCellsVertexAttributeNoDataColor(id),
+  set: async (newValue) => {
+    await applyBatchStyle(id, (targetId: string) =>
+      dataStyleStore.setMeshCellsVertexAttributeNoDataColor(targetId, newValue),
+    );
+    hybridViewerStore.remoteRender();
+  },
+});
+const cell_attribute_name = computed<string | undefined>({
+  get: () => dataStyleStore.meshCellsCellAttributeName(id),
+  set: async (newValue) => {
+    if (newValue === undefined) {
+      return;
+    }
+    await applyBatchStyle(id, (targetId: string) =>
+      Promise.resolve(dataStyleStore.setMeshCellsCellAttributeName(targetId, newValue)),
+    );
+    hybridViewerStore.remoteRender();
+  },
+});
+
+const cell_attribute_time_step = computed<number | undefined>({
+  get: () => dataStyleStore.meshCellsCellAttributeTimeStep(id),
+  set: async (newValue) => {
+    if (newValue === undefined) {
+      return;
+    }
+    await applyBatchStyle(id, (targetId: string) =>
+      Promise.resolve(dataStyleStore.setMeshCellsCellAttributeTimeStep(targetId, newValue)),
+    );
+    hybridViewerStore.remoteRender();
+  },
+});
+const cell_attribute_item = computed<string | undefined>({
+  get: () => dataStyleStore.meshCellsCellAttributeItem(id),
+  set: async (newValue) => {
+    await applyBatchStyle(id, (targetId: string) =>
+      Promise.resolve(dataStyleStore.setMeshCellsCellAttributeItem(targetId, newValue)),
+    );
+    hybridViewerStore.remoteRender();
+  },
+});
+const cell_attribute_range = computed<[number, number] | undefined>({
+  get: () => dataStyleStore.meshCellsCellAttributeRange(id),
+  set: async (newValue) => {
+    const [minimum, maximum] = newValue;
+    if (minimum === undefined || maximum === undefined) {
+      return;
+    }
+    await applyBatchStyle(id, (targetId: string) =>
+      Promise.resolve(dataStyleStore.setMeshCellsCellAttributeRange(targetId, minimum, maximum)),
+    );
+    hybridViewerStore.remoteRender();
+  },
+});
+const cell_attribute_color_map = computed<Map<string, RGBAColor>>({
+  get: () => dataStyleStore.meshCellsCellAttributeColorMap(id),
+  set: async (newValue) => {
+    await applyBatchStyle(id, (targetId: string) =>
+      Promise.resolve(dataStyleStore.setMeshCellsCellAttributeColorMap(targetId, newValue)),
+    );
+    hybridViewerStore.remoteRender();
+  },
+});
+const cell_attribute_no_data_color = computed<RGBAColor>({
+  get: () => dataStyleStore.meshCellsCellAttributeNoDataColor(id),
+  set: async (newValue) => {
+    await applyBatchStyle(id, (targetId: string) =>
+      dataStyleStore.setMeshCellsCellAttributeNoDataColor(targetId, newValue),
+    );
+    hybridViewerStore.remoteRender();
+  },
+});
+
+async function setVertexAttributeRangesPerData(ranges: RangesPerData): Promise<void> {
+  await applyRangesPerData(ranges, (targetId, minimum, maximum) =>
+    dataStyleStore.setMeshCellsVertexAttributeRange(targetId, minimum, maximum),
+  );
+  hybridViewerStore.remoteRender();
+}
+
+async function setCellAttributeRangesPerData(ranges: RangesPerData): Promise<void> {
+  await applyRangesPerData(ranges, (targetId, minimum, maximum) =>
+    dataStyleStore.setMeshCellsCellAttributeRange(targetId, minimum, maximum),
+  );
+  hybridViewerStore.remoteRender();
+}
+</script>
+
+<template>
+  <ViewerOptionsColoringTypeSelector
+    :id="id"
+    v-model:coloring_style_key="coloring_style_key"
+    v-model:color="color"
+    v-model:textures="textures"
+    v-model:vertex_attribute_name="vertex_attribute_name"
+    v-model:vertex_attribute_item="vertex_attribute_item"
+    v-model:vertex_attribute_range="vertex_attribute_range"
+    @vertex_attribute_ranges_per_data="setVertexAttributeRangesPerData"
+    v-model:vertex_attribute_color_map="vertex_attribute_color_map"
+    v-model:vertex_attribute_no_data_color="vertex_attribute_no_data_color"
+    v-model:vertex_attribute_time_step="vertex_attribute_time_step"
+    v-model:cell_attribute_name="cell_attribute_name"
+    v-model:cell_attribute_item="cell_attribute_item"
+    v-model:cell_attribute_range="cell_attribute_range"
+    @cell_attribute_ranges_per_data="setCellAttributeRangesPerData"
+    v-model:cell_attribute_color_map="cell_attribute_color_map"
+    v-model:cell_attribute_no_data_color="cell_attribute_no_data_color"
+    v-model:cell_attribute_time_step="cell_attribute_time_step"
+  />
+</template>
diff --git a/app/components/Viewer/Generic/Mesh/CellsOptions.vue b/app/components/Viewer/Generic/Mesh/CellsOptions.vue
index d0024db82..409e81155 100644
--- a/app/components/Viewer/Generic/Mesh/CellsOptions.vue
+++ b/app/components/Viewer/Generic/Mesh/CellsOptions.vue
@@ -1,23 +1,13 @@
 <script setup lang="ts">
-import {
-  type RangesPerData,
-  applyRangesPerData,
-  useBatchStyle,
-} from "@ogw_front/composables/batch_style";
 import ViewerContextMenuItem, {
   type ItemProps,
 } from "@ogw_front/components/Viewer/ContextMenu/ContextMenuItem.vue";
-import type { RGBAColor } from "@ogw_front/utils/default_styles/constants";
-import ViewerOptionsColoringTypeSelector from "@ogw_front/components/Viewer/Options/ColoringTypeSelector.vue";
+import ViewerGenericMeshCellsColoring from "@ogw_front/components/Viewer/Generic/Mesh/CellsColoring.vue";
 import ViewerOptionsVisibilitySwitch from "@ogw_front/components/Viewer/Options/VisibilitySwitch.vue";
+import { useBatchStyle } from "@ogw_front/composables/batch_style";
 import { useDataStyleStore } from "@ogw_front/stores/data_style";
 import { useHybridViewerStore } from "@ogw_front/stores/hybrid_viewer";
 
-interface Texture {
-  id: string;
-  texture_name: string;
-}
-
 const dataStyleStore = useDataStyleStore();
 const hybridViewerStore = useHybridViewerStore();
 const { applyBatchStyle } = useBatchStyle();
@@ -41,184 +31,6 @@ const visibility = computed<boolean>({
     hybridViewerStore.remoteRender();
   },
 });
-const coloring_style_key = computed<string>({
-  get: () => dataStyleStore.meshCellsActiveColoring(id.value),
-  set: async (newValue) => {
-    await applyBatchStyle(id.value, (targetId: string) =>
-      dataStyleStore.setMeshCellsActiveColoring(targetId, newValue),
-    );
-    hybridViewerStore.remoteRender();
-  },
-});
-const color = computed<RGBAColor | undefined>({
-  get: () => dataStyleStore.meshCellsColor(id.value) as RGBAColor | undefined,
-  set: async (newValue) => {
-    if (newValue === undefined) {
-      return;
-    }
-    await applyBatchStyle(id.value, (targetId: string) =>
-      dataStyleStore.setMeshCellsColor(targetId, newValue),
-    );
-    hybridViewerStore.remoteRender();
-  },
-});
-const textures = computed<Texture[] | undefined>({
-  get: () => dataStyleStore.meshCellsTextures(id.value) as Texture[] | undefined,
-  set: async (newValue) => {
-    if (newValue === undefined) {
-      return;
-    }
-    await applyBatchStyle(id.value, (targetId: string) =>
-      dataStyleStore.setMeshCellsTextures(targetId, newValue),
-    );
-    hybridViewerStore.remoteRender();
-  },
-});
-
-const vertex_attribute_name = computed<string | undefined>({
-  get: () => dataStyleStore.meshCellsVertexAttributeName(id.value),
-  set: async (newValue) => {
-    if (newValue === undefined) {
-      return;
-    }
-    await applyBatchStyle(id.value, (targetId: string) =>
-      Promise.resolve(dataStyleStore.setMeshCellsVertexAttributeName(targetId, newValue)),
-    );
-    hybridViewerStore.remoteRender();
-  },
-});
-
-const vertex_attribute_time_step = computed<number | undefined>({
-  get: () => dataStyleStore.meshCellsVertexAttributeTimeStep(id.value),
-  set: async (newValue) => {
-    if (newValue === undefined) {
-      return;
-    }
-    await applyBatchStyle(id.value, (targetId: string) =>
-      Promise.resolve(dataStyleStore.setMeshCellsVertexAttributeTimeStep(targetId, newValue)),
-    );
-    hybridViewerStore.remoteRender();
-  },
-});
-const vertex_attribute_item = computed<string | undefined>({
-  get: () => dataStyleStore.meshCellsVertexAttributeItem(id.value),
-  set: async (newValue) => {
-    await applyBatchStyle(id.value, (targetId: string) =>
-      Promise.resolve(dataStyleStore.setMeshCellsVertexAttributeItem(targetId, newValue)),
-    );
-    hybridViewerStore.remoteRender();
-  },
-});
-const vertex_attribute_range = computed<[number, number] | undefined>({
-  get: () => dataStyleStore.meshCellsVertexAttributeRange(id.value),
-  set: async (newValue) => {
-    const [minimum, maximum] = newValue;
-    if (minimum === undefined || maximum === undefined) {
-      return;
-    }
-    await applyBatchStyle(id.value, (targetId: string) =>
-      Promise.resolve(dataStyleStore.setMeshCellsVertexAttributeRange(targetId, minimum, maximum)),
-    );
-    hybridViewerStore.remoteRender();
-  },
-});
-const vertex_attribute_color_map = computed<Map<string, RGBAColor>>({
-  get: () => dataStyleStore.meshCellsVertexAttributeColorMap(id.value),
-  set: async (newValue) => {
-    await applyBatchStyle(id.value, (targetId: string) =>
-      Promise.resolve(dataStyleStore.setMeshCellsVertexAttributeColorMap(targetId, newValue)),
-    );
-    hybridViewerStore.remoteRender();
-  },
-});
-const vertex_attribute_no_data_color = computed<RGBAColor>({
-  get: () => dataStyleStore.meshCellsVertexAttributeNoDataColor(id.value),
-  set: async (newValue) => {
-    await applyBatchStyle(id.value, (targetId: string) =>
-      dataStyleStore.setMeshCellsVertexAttributeNoDataColor(targetId, newValue),
-    );
-    hybridViewerStore.remoteRender();
-  },
-});
-const cell_attribute_name = computed<string | undefined>({
-  get: () => dataStyleStore.meshCellsCellAttributeName(id.value),
-  set: async (newValue) => {
-    if (newValue === undefined) {
-      return;
-    }
-    await applyBatchStyle(id.value, (targetId: string) =>
-      Promise.resolve(dataStyleStore.setMeshCellsCellAttributeName(targetId, newValue)),
-    );
-    hybridViewerStore.remoteRender();
-  },
-});
-
-const cell_attribute_time_step = computed<number | undefined>({
-  get: () => dataStyleStore.meshCellsCellAttributeTimeStep(id.value),
-  set: async (newValue) => {
-    if (newValue === undefined) {
-      return;
-    }
-    await applyBatchStyle(id.value, (targetId: string) =>
-      Promise.resolve(dataStyleStore.setMeshCellsCellAttributeTimeStep(targetId, newValue)),
-    );
-    hybridViewerStore.remoteRender();
-  },
-});
-const cell_attribute_item = computed<string | undefined>({
-  get: () => dataStyleStore.meshCellsCellAttributeItem(id.value),
-  set: async (newValue) => {
-    await applyBatchStyle(id.value, (targetId: string) =>
-      Promise.resolve(dataStyleStore.setMeshCellsCellAttributeItem(targetId, newValue)),
-    );
-    hybridViewerStore.remoteRender();
-  },
-});
-const cell_attribute_range = computed<[number, number] | undefined>({
-  get: () => dataStyleStore.meshCellsCellAttributeRange(id.value),
-  set: async (newValue) => {
-    const [minimum, maximum] = newValue;
-    if (minimum === undefined || maximum === undefined) {
-      return;
-    }
-    await applyBatchStyle(id.value, (targetId: string) =>
-      Promise.resolve(dataStyleStore.setMeshCellsCellAttributeRange(targetId, minimum, maximum)),
-    );
-    hybridViewerStore.remoteRender();
-  },
-});
-const cell_attribute_color_map = computed<Map<string, RGBAColor>>({
-  get: () => dataStyleStore.meshCellsCellAttributeColorMap(id.value),
-  set: async (newValue) => {
-    await applyBatchStyle(id.value, (targetId: string) =>
-      Promise.resolve(dataStyleStore.setMeshCellsCellAttributeColorMap(targetId, newValue)),
-    );
-    hybridViewerStore.remoteRender();
-  },
-});
-const cell_attribute_no_data_color = computed<RGBAColor>({
-  get: () => dataStyleStore.meshCellsCellAttributeNoDataColor(id.value),
-  set: async (newValue) => {
-    await applyBatchStyle(id.value, (targetId: string) =>
-      dataStyleStore.setMeshCellsCellAttributeNoDataColor(targetId, newValue),
-    );
-    hybridViewerStore.remoteRender();
-  },
-});
-
-async function setVertexAttributeRangesPerData(ranges: RangesPerData): Promise<void> {
-  await applyRangesPerData(ranges, (targetId, minimum, maximum) =>
-    dataStyleStore.setMeshCellsVertexAttributeRange(targetId, minimum, maximum),
-  );
-  hybridViewerStore.remoteRender();
-}
-
-async function setCellAttributeRangesPerData(ranges: RangesPerData): Promise<void> {
-  await applyRangesPerData(ranges, (targetId, minimum, maximum) =>
-    dataStyleStore.setMeshCellsCellAttributeRange(targetId, minimum, maximum),
-  );
-  hybridViewerStore.remoteRender();
-}
 </script>
 
 <template>
@@ -233,26 +45,7 @@ async function setCellAttributeRangesPerData(ranges: RangesPerData): Promise<voi
       <ViewerOptionsVisibilitySwitch data-testid="meshCellsVisibilitySwitch" v-model="visibility" />
       <template v-if="visibility">
         <v-divider />
-        <ViewerOptionsColoringTypeSelector
-          :id="id"
-          v-model:coloring_style_key="coloring_style_key"
-          v-model:color="color"
-          v-model:textures="textures"
-          v-model:vertex_attribute_name="vertex_attribute_name"
-          v-model:vertex_attribute_item="vertex_attribute_item"
-          v-model:vertex_attribute_range="vertex_attribute_range"
-          @vertex_attribute_ranges_per_data="setVertexAttributeRangesPerData"
-          v-model:vertex_attribute_color_map="vertex_attribute_color_map"
-          v-model:vertex_attribute_no_data_color="vertex_attribute_no_data_color"
-          v-model:vertex_attribute_time_step="vertex_attribute_time_step"
-          v-model:cell_attribute_name="cell_attribute_name"
-          v-model:cell_attribute_item="cell_attribute_item"
-          v-model:cell_attribute_range="cell_attribute_range"
-          @cell_attribute_ranges_per_data="setCellAttributeRangesPerData"
-          v-model:cell_attribute_color_map="cell_attribute_color_map"
-          v-model:cell_attribute_no_data_color="cell_attribute_no_data_color"
-          v-model:cell_attribute_time_step="cell_attribute_time_step"
-        />
+        <ViewerGenericMeshCellsColoring :id="id" />
       </template>
     </template>
   </ViewerContextMenuItem>
diff --git a/app/components/Viewer/Generic/Mesh/EdgesColoring.vue b/app/components/Viewer/Generic/Mesh/EdgesColoring.vue
new file mode 100644
index 000000000..3d90f7c4f
--- /dev/null
+++ b/app/components/Viewer/Generic/Mesh/EdgesColoring.vue
@@ -0,0 +1,211 @@
+<script setup lang="ts">
+import {
+  type RangesPerData,
+  applyRangesPerData,
+  useBatchStyle,
+} from "@ogw_front/composables/batch_style";
+import type { RGBAColor } from "@ogw_front/utils/default_styles/constants";
+import ViewerOptionsColoringTypeSelector from "@ogw_front/components/Viewer/Options/ColoringTypeSelector.vue";
+import { useDataStyleStore } from "@ogw_front/stores/data_style";
+import { useHybridViewerStore } from "@ogw_front/stores/hybrid_viewer";
+
+const dataStyleStore = useDataStyleStore();
+const hybridViewerStore = useHybridViewerStore();
+const { applyBatchStyle } = useBatchStyle();
+
+interface Props {
+  id: string;
+  capabilities: Record<string, { available?: boolean; hasColorMap?: boolean }>;
+}
+
+const { id, capabilities } = defineProps<Props>();
+
+const coloring_style_key = computed<string>({
+  get: () => dataStyleStore.meshEdgesActiveColoring(id),
+  set: async (newValue) => {
+    await applyBatchStyle(id, (targetId: string) =>
+      dataStyleStore.setMeshEdgesActiveColoring(targetId, newValue),
+    );
+    hybridViewerStore.remoteRender();
+  },
+});
+const color = computed<RGBAColor | undefined>({
+  get: () => dataStyleStore.meshEdgesColor(id) as RGBAColor | undefined,
+  set: async (newValue) => {
+    if (newValue === undefined) {
+      return;
+    }
+    await applyBatchStyle(id, (targetId: string) =>
+      dataStyleStore.setMeshEdgesColor(targetId, newValue),
+    );
+    hybridViewerStore.remoteRender();
+  },
+});
+const vertex_attribute_name = computed<string | undefined>({
+  get: () => dataStyleStore.meshEdgesVertexAttributeName(id),
+  set: async (newValue) => {
+    if (newValue === undefined) {
+      return;
+    }
+    await applyBatchStyle(id, (targetId: string) =>
+      Promise.resolve(dataStyleStore.setMeshEdgesVertexAttributeName(targetId, newValue)),
+    );
+    hybridViewerStore.remoteRender();
+  },
+});
+
+const vertex_attribute_time_step = computed<number | undefined>({
+  get: () => dataStyleStore.meshEdgesVertexAttributeTimeStep(id),
+  set: async (newValue) => {
+    if (newValue === undefined) {
+      return;
+    }
+    await applyBatchStyle(id, (targetId: string) =>
+      Promise.resolve(dataStyleStore.setMeshEdgesVertexAttributeTimeStep(targetId, newValue)),
+    );
+    hybridViewerStore.remoteRender();
+  },
+});
+const vertex_attribute_item = computed<string | undefined>({
+  get: () => dataStyleStore.meshEdgesVertexAttributeItem(id),
+  set: async (newValue) => {
+    await applyBatchStyle(id, (targetId: string) =>
+      Promise.resolve(dataStyleStore.setMeshEdgesVertexAttributeItem(targetId, newValue)),
+    );
+    hybridViewerStore.remoteRender();
+  },
+});
+const vertex_attribute_range = computed<[number, number] | undefined>({
+  get: () => dataStyleStore.meshEdgesVertexAttributeRange(id),
+  set: async (newValue) => {
+    const [minimum, maximum] = newValue;
+    if (minimum === undefined || maximum === undefined) {
+      return;
+    }
+    await applyBatchStyle(id, (targetId: string) =>
+      Promise.resolve(dataStyleStore.setMeshEdgesVertexAttributeRange(targetId, minimum, maximum)),
+    );
+    hybridViewerStore.remoteRender();
+  },
+});
+const vertex_attribute_color_map = computed<Map<string, RGBAColor>>({
+  get: () => dataStyleStore.meshEdgesVertexAttributeColorMap(id),
+  set: async (newValue) => {
+    await applyBatchStyle(id, (targetId: string) =>
+      Promise.resolve(dataStyleStore.setMeshEdgesVertexAttributeColorMap(targetId, newValue)),
+    );
+    hybridViewerStore.remoteRender();
+  },
+});
+const vertex_attribute_no_data_color = computed<RGBAColor>({
+  get: () => dataStyleStore.meshEdgesVertexAttributeNoDataColor(id),
+  set: async (newValue) => {
+    await applyBatchStyle(id, (targetId: string) =>
+      dataStyleStore.setMeshEdgesVertexAttributeNoDataColor(targetId, newValue),
+    );
+    hybridViewerStore.remoteRender();
+  },
+});
+const edge_attribute_name = computed<string | undefined>({
+  get: () => dataStyleStore.meshEdgesEdgeAttributeName(id),
+  set: async (newValue) => {
+    if (newValue === undefined) {
+      return;
+    }
+    await applyBatchStyle(id, (targetId: string) =>
+      Promise.resolve(dataStyleStore.setMeshEdgesEdgeAttributeName(targetId, newValue)),
+    );
+    hybridViewerStore.remoteRender();
+  },
+});
+
+const edge_attribute_time_step = computed<number | undefined>({
+  get: () => dataStyleStore.meshEdgesEdgeAttributeTimeStep(id),
+  set: async (newValue) => {
+    if (newValue === undefined) {
+      return;
+    }
+    await applyBatchStyle(id, (targetId: string) =>
+      Promise.resolve(dataStyleStore.setMeshEdgesEdgeAttributeTimeStep(targetId, newValue)),
+    );
+    hybridViewerStore.remoteRender();
+  },
+});
+const edge_attribute_item = computed<string | undefined>({
+  get: () => dataStyleStore.meshEdgesEdgeAttributeItem(id),
+  set: async (newValue) => {
+    await applyBatchStyle(id, (targetId: string) =>
+      Promise.resolve(dataStyleStore.setMeshEdgesEdgeAttributeItem(targetId, newValue)),
+    );
+    hybridViewerStore.remoteRender();
+  },
+});
+const edge_attribute_range = computed<[number, number] | undefined>({
+  get: () => dataStyleStore.meshEdgesEdgeAttributeRange(id),
+  set: async (newValue) => {
+    const [minimum, maximum] = newValue;
+    if (minimum === undefined || maximum === undefined) {
+      return;
+    }
+    await applyBatchStyle(id, (targetId: string) =>
+      Promise.resolve(dataStyleStore.setMeshEdgesEdgeAttributeRange(targetId, minimum, maximum)),
+    );
+    hybridViewerStore.remoteRender();
+  },
+});
+const edge_attribute_color_map = computed<Map<string, RGBAColor>>({
+  get: () => dataStyleStore.meshEdgesEdgeAttributeColorMap(id),
+  set: async (newValue) => {
+    await applyBatchStyle(id, (targetId: string) =>
+      Promise.resolve(dataStyleStore.setMeshEdgesEdgeAttributeColorMap(targetId, newValue)),
+    );
+    hybridViewerStore.remoteRender();
+  },
+});
+const edge_attribute_no_data_color = computed<RGBAColor>({
+  get: () => dataStyleStore.meshEdgesEdgeAttributeNoDataColor(id),
+  set: async (newValue) => {
+    await applyBatchStyle(id, (targetId: string) =>
+      dataStyleStore.setMeshEdgesEdgeAttributeNoDataColor(targetId, newValue),
+    );
+    hybridViewerStore.remoteRender();
+  },
+});
+
+async function setVertexAttributeRangesPerData(ranges: RangesPerData): Promise<void> {
+  await applyRangesPerData(ranges, (targetId, minimum, maximum) =>
+    dataStyleStore.setMeshEdgesVertexAttributeRange(targetId, minimum, maximum),
+  );
+  hybridViewerStore.remoteRender();
+}
+
+async function setEdgeAttributeRangesPerData(ranges: RangesPerData): Promise<void> {
+  await applyRangesPerData(ranges, (targetId, minimum, maximum) =>
+    dataStyleStore.setMeshEdgesEdgeAttributeRange(targetId, minimum, maximum),
+  );
+  hybridViewerStore.remoteRender();
+}
+</script>
+
+<template>
+  <ViewerOptionsColoringTypeSelector
+    :id="id"
+    v-model:coloring_style_key="coloring_style_key"
+    v-model:color="color"
+    v-model:vertex_attribute_name="vertex_attribute_name"
+    v-model:vertex_attribute_item="vertex_attribute_item"
+    v-model:vertex_attribute_range="vertex_attribute_range"
+    @vertex_attribute_ranges_per_data="setVertexAttributeRangesPerData"
+    v-model:vertex_attribute_color_map="vertex_attribute_color_map"
+    v-model:vertex_attribute_no_data_color="vertex_attribute_no_data_color"
+    v-model:vertex_attribute_time_step="vertex_attribute_time_step"
+    v-model:edge_attribute_name="edge_attribute_name"
+    v-model:edge_attribute_item="edge_attribute_item"
+    v-model:edge_attribute_range="edge_attribute_range"
+    @edge_attribute_ranges_per_data="setEdgeAttributeRangesPerData"
+    v-model:edge_attribute_color_map="edge_attribute_color_map"
+    v-model:edge_attribute_no_data_color="edge_attribute_no_data_color"
+    v-model:edge_attribute_time_step="edge_attribute_time_step"
+    :capabilities="capabilities"
+  />
+</template>
diff --git a/app/components/Viewer/Generic/Mesh/EdgesOptions.vue b/app/components/Viewer/Generic/Mesh/EdgesOptions.vue
index 413704044..39b77ad52 100644
--- a/app/components/Viewer/Generic/Mesh/EdgesOptions.vue
+++ b/app/components/Viewer/Generic/Mesh/EdgesOptions.vue
@@ -1,16 +1,11 @@
 <script setup lang="ts">
-import {
-  type RangesPerData,
-  applyRangesPerData,
-  useBatchStyle,
-} from "@ogw_front/composables/batch_style";
 import ViewerContextMenuItem, {
   type ItemProps,
 } from "@ogw_front/components/Viewer/ContextMenu/ContextMenuItem.vue";
-import type { RGBAColor } from "@ogw_front/utils/default_styles/constants";
-import ViewerOptionsColoringTypeSelector from "@ogw_front/components/Viewer/Options/ColoringTypeSelector.vue";
+import ViewerGenericMeshEdgesColoring from "@ogw_front/components/Viewer/Generic/Mesh/EdgesColoring.vue";
 import ViewerOptionsVisibilitySwitch from "@ogw_front/components/Viewer/Options/VisibilitySwitch.vue";
 import ViewerOptionsWidthSlider from "@ogw_front/components/Viewer/Options/Sliders/Width.vue";
+import { useBatchStyle } from "@ogw_front/composables/batch_style";
 import { useDataStyleStore } from "@ogw_front/stores/data_style";
 import { useHybridViewerStore } from "@ogw_front/stores/hybrid_viewer";
 
@@ -52,171 +47,6 @@ const size = computed<number>({
     hybridViewerStore.remoteRender();
   },
 });
-const coloring_style_key = computed<string>({
-  get: () => dataStyleStore.meshEdgesActiveColoring(id.value),
-  set: async (newValue) => {
-    await applyBatchStyle(id.value, (targetId: string) =>
-      dataStyleStore.setMeshEdgesActiveColoring(targetId, newValue),
-    );
-    hybridViewerStore.remoteRender();
-  },
-});
-const color = computed<RGBAColor | undefined>({
-  get: () => dataStyleStore.meshEdgesColor(id.value) as RGBAColor | undefined,
-  set: async (newValue) => {
-    if (newValue === undefined) {
-      return;
-    }
-    await applyBatchStyle(id.value, (targetId: string) =>
-      dataStyleStore.setMeshEdgesColor(targetId, newValue),
-    );
-    hybridViewerStore.remoteRender();
-  },
-});
-const vertex_attribute_name = computed<string | undefined>({
-  get: () => dataStyleStore.meshEdgesVertexAttributeName(id.value),
-  set: async (newValue) => {
-    if (newValue === undefined) {
-      return;
-    }
-    await applyBatchStyle(id.value, (targetId: string) =>
-      Promise.resolve(dataStyleStore.setMeshEdgesVertexAttributeName(targetId, newValue)),
-    );
-    hybridViewerStore.remoteRender();
-  },
-});
-
-const vertex_attribute_time_step = computed<number | undefined>({
-  get: () => dataStyleStore.meshEdgesVertexAttributeTimeStep(id.value),
-  set: async (newValue) => {
-    if (newValue === undefined) {
-      return;
-    }
-    await applyBatchStyle(id.value, (targetId: string) =>
-      Promise.resolve(dataStyleStore.setMeshEdgesVertexAttributeTimeStep(targetId, newValue)),
-    );
-    hybridViewerStore.remoteRender();
-  },
-});
-const vertex_attribute_item = computed<string | undefined>({
-  get: () => dataStyleStore.meshEdgesVertexAttributeItem(id.value),
-  set: async (newValue) => {
-    await applyBatchStyle(id.value, (targetId: string) =>
-      Promise.resolve(dataStyleStore.setMeshEdgesVertexAttributeItem(targetId, newValue)),
-    );
-    hybridViewerStore.remoteRender();
-  },
-});
-const vertex_attribute_range = computed<[number, number] | undefined>({
-  get: () => dataStyleStore.meshEdgesVertexAttributeRange(id.value),
-  set: async (newValue) => {
-    const [minimum, maximum] = newValue;
-    if (minimum === undefined || maximum === undefined) {
-      return;
-    }
-    await applyBatchStyle(id.value, (targetId: string) =>
-      Promise.resolve(dataStyleStore.setMeshEdgesVertexAttributeRange(targetId, minimum, maximum)),
-    );
-    hybridViewerStore.remoteRender();
-  },
-});
-const vertex_attribute_color_map = computed<Map<string, RGBAColor>>({
-  get: () => dataStyleStore.meshEdgesVertexAttributeColorMap(id.value),
-  set: async (newValue) => {
-    await applyBatchStyle(id.value, (targetId: string) =>
-      Promise.resolve(dataStyleStore.setMeshEdgesVertexAttributeColorMap(targetId, newValue)),
-    );
-    hybridViewerStore.remoteRender();
-  },
-});
-const vertex_attribute_no_data_color = computed<RGBAColor>({
-  get: () => dataStyleStore.meshEdgesVertexAttributeNoDataColor(id.value),
-  set: async (newValue) => {
-    await applyBatchStyle(id.value, (targetId: string) =>
-      dataStyleStore.setMeshEdgesVertexAttributeNoDataColor(targetId, newValue),
-    );
-    hybridViewerStore.remoteRender();
-  },
-});
-const edge_attribute_name = computed<string | undefined>({
-  get: () => dataStyleStore.meshEdgesEdgeAttributeName(id.value),
-  set: async (newValue) => {
-    if (newValue === undefined) {
-      return;
-    }
-    await applyBatchStyle(id.value, (targetId: string) =>
-      Promise.resolve(dataStyleStore.setMeshEdgesEdgeAttributeName(targetId, newValue)),
-    );
-    hybridViewerStore.remoteRender();
-  },
-});
-
-const edge_attribute_time_step = computed<number | undefined>({
-  get: () => dataStyleStore.meshEdgesEdgeAttributeTimeStep(id.value),
-  set: async (newValue) => {
-    if (newValue === undefined) {
-      return;
-    }
-    await applyBatchStyle(id.value, (targetId: string) =>
-      Promise.resolve(dataStyleStore.setMeshEdgesEdgeAttributeTimeStep(targetId, newValue)),
-    );
-    hybridViewerStore.remoteRender();
-  },
-});
-const edge_attribute_item = computed<string | undefined>({
-  get: () => dataStyleStore.meshEdgesEdgeAttributeItem(id.value),
-  set: async (newValue) => {
-    await applyBatchStyle(id.value, (targetId: string) =>
-      Promise.resolve(dataStyleStore.setMeshEdgesEdgeAttributeItem(targetId, newValue)),
-    );
-    hybridViewerStore.remoteRender();
-  },
-});
-const edge_attribute_range = computed<[number, number] | undefined>({
-  get: () => dataStyleStore.meshEdgesEdgeAttributeRange(id.value),
-  set: async (newValue) => {
-    const [minimum, maximum] = newValue;
-    if (minimum === undefined || maximum === undefined) {
-      return;
-    }
-    await applyBatchStyle(id.value, (targetId: string) =>
-      Promise.resolve(dataStyleStore.setMeshEdgesEdgeAttributeRange(targetId, minimum, maximum)),
-    );
-    hybridViewerStore.remoteRender();
-  },
-});
-const edge_attribute_color_map = computed<Map<string, RGBAColor>>({
-  get: () => dataStyleStore.meshEdgesEdgeAttributeColorMap(id.value),
-  set: async (newValue) => {
-    await applyBatchStyle(id.value, (targetId: string) =>
-      Promise.resolve(dataStyleStore.setMeshEdgesEdgeAttributeColorMap(targetId, newValue)),
-    );
-    hybridViewerStore.remoteRender();
-  },
-});
-const edge_attribute_no_data_color = computed<RGBAColor>({
-  get: () => dataStyleStore.meshEdgesEdgeAttributeNoDataColor(id.value),
-  set: async (newValue) => {
-    await applyBatchStyle(id.value, (targetId: string) =>
-      dataStyleStore.setMeshEdgesEdgeAttributeNoDataColor(targetId, newValue),
-    );
-    hybridViewerStore.remoteRender();
-  },
-});
-
-async function setVertexAttributeRangesPerData(ranges: RangesPerData): Promise<void> {
-  await applyRangesPerData(ranges, (targetId, minimum, maximum) =>
-    dataStyleStore.setMeshEdgesVertexAttributeRange(targetId, minimum, maximum),
-  );
-  hybridViewerStore.remoteRender();
-}
-
-async function setEdgeAttributeRangesPerData(ranges: RangesPerData): Promise<void> {
-  await applyRangesPerData(ranges, (targetId, minimum, maximum) =>
-    dataStyleStore.setMeshEdgesEdgeAttributeRange(targetId, minimum, maximum),
-  );
-  hybridViewerStore.remoteRender();
-}
 </script>
 
 <template>
@@ -239,26 +69,7 @@ async function setEdgeAttributeRangesPerData(ranges: RangesPerData): Promise<voi
       <template v-if="visibility">
         <v-divider class="my-2" />
         <ViewerOptionsWidthSlider data-testid="meshEdgesWidthSlider" v-model="size" />
-        <ViewerOptionsColoringTypeSelector
-          :id="id"
-          v-model:coloring_style_key="coloring_style_key"
-          v-model:color="color"
-          v-model:vertex_attribute_name="vertex_attribute_name"
-          v-model:vertex_attribute_item="vertex_attribute_item"
-          v-model:vertex_attribute_range="vertex_attribute_range"
-          @vertex_attribute_ranges_per_data="setVertexAttributeRangesPerData"
-          v-model:vertex_attribute_color_map="vertex_attribute_color_map"
-          v-model:vertex_attribute_no_data_color="vertex_attribute_no_data_color"
-          v-model:vertex_attribute_time_step="vertex_attribute_time_step"
-          v-model:edge_attribute_name="edge_attribute_name"
-          v-model:edge_attribute_item="edge_attribute_item"
-          v-model:edge_attribute_range="edge_attribute_range"
-          @edge_attribute_ranges_per_data="setEdgeAttributeRangesPerData"
-          v-model:edge_attribute_color_map="edge_attribute_color_map"
-          v-model:edge_attribute_no_data_color="edge_attribute_no_data_color"
-          v-model:edge_attribute_time_step="edge_attribute_time_step"
-          :capabilities="capabilities"
-        />
+        <ViewerGenericMeshEdgesColoring :id="id" :capabilities="capabilities" />
       </template>
     </template>
   </ViewerContextMenuItem>
diff --git a/app/components/Viewer/Generic/Mesh/PolygonsColoring.vue b/app/components/Viewer/Generic/Mesh/PolygonsColoring.vue
new file mode 100644
index 000000000..ca76ab272
--- /dev/null
+++ b/app/components/Viewer/Generic/Mesh/PolygonsColoring.vue
@@ -0,0 +1,234 @@
+<script setup lang="ts">
+import {
+  type RangesPerData,
+  applyRangesPerData,
+  useBatchStyle,
+} from "@ogw_front/composables/batch_style";
+import type { RGBAColor } from "@ogw_front/utils/default_styles/constants";
+import ViewerOptionsColoringTypeSelector from "@ogw_front/components/Viewer/Options/ColoringTypeSelector.vue";
+import { useDataStyleStore } from "@ogw_front/stores/data_style";
+import { useHybridViewerStore } from "@ogw_front/stores/hybrid_viewer";
+
+interface Texture {
+  id: string;
+  texture_name: string;
+}
+
+const dataStyleStore = useDataStyleStore();
+const hybridViewerStore = useHybridViewerStore();
+const { applyBatchStyle } = useBatchStyle();
+
+interface Props {
+  id: string;
+  capabilities: Record<string, { available?: boolean; hasColorMap?: boolean }>;
+}
+
+const { id, capabilities } = defineProps<Props>();
+
+const coloring_style_key = computed<string>({
+  get: () => dataStyleStore.meshPolygonsActiveColoring(id),
+  set: async (newValue) => {
+    await applyBatchStyle(id, (targetId: string) =>
+      dataStyleStore.setMeshPolygonsActiveColoring(targetId, newValue),
+    );
+    hybridViewerStore.remoteRender();
+  },
+});
+const color = computed<RGBAColor | undefined>({
+  get: () => dataStyleStore.meshPolygonsColor(id) as RGBAColor | undefined,
+  set: async (newValue) => {
+    if (newValue === undefined) {
+      return;
+    }
+    await applyBatchStyle(id, (targetId: string) =>
+      dataStyleStore.setMeshPolygonsColor(targetId, newValue),
+    );
+    hybridViewerStore.remoteRender();
+  },
+});
+const textures = computed<Texture[] | undefined>({
+  get: () => dataStyleStore.meshPolygonsTextures(id) as Texture[] | undefined,
+  set: async (newValue) => {
+    if (newValue === undefined) {
+      return;
+    }
+    await applyBatchStyle(id, (targetId: string) =>
+      dataStyleStore.setMeshPolygonsTextures(targetId, newValue),
+    );
+    hybridViewerStore.remoteRender();
+  },
+});
+
+const vertex_attribute_name = computed<string | undefined>({
+  get: () => dataStyleStore.meshPolygonsVertexAttributeName(id),
+  set: async (newValue) => {
+    if (newValue === undefined) {
+      return;
+    }
+    await applyBatchStyle(id, (targetId: string) =>
+      Promise.resolve(dataStyleStore.setMeshPolygonsVertexAttributeName(targetId, newValue)),
+    );
+    hybridViewerStore.remoteRender();
+  },
+});
+
+const vertex_attribute_time_step = computed<number | undefined>({
+  get: () => dataStyleStore.meshPolygonsVertexAttributeTimeStep(id),
+  set: async (newValue) => {
+    if (newValue === undefined) {
+      return;
+    }
+    await applyBatchStyle(id, (targetId: string) =>
+      Promise.resolve(dataStyleStore.setMeshPolygonsVertexAttributeTimeStep(targetId, newValue)),
+    );
+    hybridViewerStore.remoteRender();
+  },
+});
+const vertex_attribute_item = computed<string | undefined>({
+  get: () => dataStyleStore.meshPolygonsVertexAttributeItem(id),
+  set: async (newValue) => {
+    await applyBatchStyle(id, (targetId: string) =>
+      Promise.resolve(dataStyleStore.setMeshPolygonsVertexAttributeItem(targetId, newValue)),
+    );
+    hybridViewerStore.remoteRender();
+  },
+});
+const vertex_attribute_range = computed<[number, number] | undefined>({
+  get: () => dataStyleStore.meshPolygonsVertexAttributeRange(id),
+  set: async (newValue) => {
+    const [minimum, maximum] = newValue;
+    if (minimum === undefined || maximum === undefined) {
+      return;
+    }
+    await applyBatchStyle(id, (targetId: string) =>
+      Promise.resolve(
+        dataStyleStore.setMeshPolygonsVertexAttributeRange(targetId, minimum, maximum),
+      ),
+    );
+    hybridViewerStore.remoteRender();
+  },
+});
+const vertex_attribute_color_map = computed<Map<string, RGBAColor>>({
+  get: () => dataStyleStore.meshPolygonsVertexAttributeColorMap(id),
+  set: async (newValue) => {
+    await applyBatchStyle(id, (targetId: string) =>
+      Promise.resolve(dataStyleStore.setMeshPolygonsVertexAttributeColorMap(targetId, newValue)),
+    );
+    hybridViewerStore.remoteRender();
+  },
+});
+const vertex_attribute_no_data_color = computed<RGBAColor>({
+  get: () => dataStyleStore.meshPolygonsVertexAttributeNoDataColor(id),
+  set: async (newValue) => {
+    await applyBatchStyle(id, (targetId: string) =>
+      dataStyleStore.setMeshPolygonsVertexAttributeNoDataColor(targetId, newValue),
+    );
+    hybridViewerStore.remoteRender();
+  },
+});
+const polygon_attribute_name = computed<string | undefined>({
+  get: () => dataStyleStore.meshPolygonsPolygonAttributeName(id),
+  set: async (newValue) => {
+    if (newValue === undefined) {
+      return;
+    }
+    await applyBatchStyle(id, (targetId: string) =>
+      Promise.resolve(dataStyleStore.setMeshPolygonsPolygonAttributeName(targetId, newValue)),
+    );
+    hybridViewerStore.remoteRender();
+  },
+});
+
+const polygon_attribute_time_step = computed<number | undefined>({
+  get: () => dataStyleStore.meshPolygonsPolygonAttributeTimeStep(id),
+  set: async (newValue) => {
+    if (newValue === undefined) {
+      return;
+    }
+    await applyBatchStyle(id, (targetId: string) =>
+      Promise.resolve(dataStyleStore.setMeshPolygonsPolygonAttributeTimeStep(targetId, newValue)),
+    );
+    hybridViewerStore.remoteRender();
+  },
+});
+const polygon_attribute_item = computed<string | undefined>({
+  get: () => dataStyleStore.meshPolygonsPolygonAttributeItem(id),
+  set: async (newValue) => {
+    await applyBatchStyle(id, (targetId: string) =>
+      Promise.resolve(dataStyleStore.setMeshPolygonsPolygonAttributeItem(targetId, newValue)),
+    );
+    hybridViewerStore.remoteRender();
+  },
+});
+const polygon_attribute_range = computed<[number, number] | undefined>({
+  get: () => dataStyleStore.meshPolygonsPolygonAttributeRange(id),
+  set: async (newValue) => {
+    const [minimum, maximum] = newValue;
+    if (minimum === undefined || maximum === undefined) {
+      return;
+    }
+    await applyBatchStyle(id, (targetId: string) =>
+      Promise.resolve(
+        dataStyleStore.setMeshPolygonsPolygonAttributeRange(targetId, minimum, maximum),
+      ),
+    );
+    hybridViewerStore.remoteRender();
+  },
+});
+const polygon_attribute_color_map = computed<Map<string, RGBAColor>>({
+  get: () => dataStyleStore.meshPolygonsPolygonAttributeColorMap(id),
+  set: async (newValue) => {
+    await applyBatchStyle(id, (targetId: string) =>
+      Promise.resolve(dataStyleStore.setMeshPolygonsPolygonAttributeColorMap(targetId, newValue)),
+    );
+    hybridViewerStore.remoteRender();
+  },
+});
+const polygon_attribute_no_data_color = computed<RGBAColor>({
+  get: () => dataStyleStore.meshPolygonsPolygonAttributeNoDataColor(id),
+  set: async (newValue) => {
+    await applyBatchStyle(id, (targetId: string) =>
+      dataStyleStore.setMeshPolygonsPolygonAttributeNoDataColor(targetId, newValue),
+    );
+    hybridViewerStore.remoteRender();
+  },
+});
+
+async function setVertexAttributeRangesPerData(ranges: RangesPerData): Promise<void> {
+  await applyRangesPerData(ranges, (targetId, minimum, maximum) =>
+    dataStyleStore.setMeshPolygonsVertexAttributeRange(targetId, minimum, maximum),
+  );
+  hybridViewerStore.remoteRender();
+}
+
+async function setPolygonAttributeRangesPerData(ranges: RangesPerData): Promise<void> {
+  await applyRangesPerData(ranges, (targetId, minimum, maximum) =>
+    dataStyleStore.setMeshPolygonsPolygonAttributeRange(targetId, minimum, maximum),
+  );
+  hybridViewerStore.remoteRender();
+}
+</script>
+
+<template>
+  <ViewerOptionsColoringTypeSelector
+    :id="id"
+    v-model:coloring_style_key="coloring_style_key"
+    v-model:color="color"
+    v-model:textures="textures"
+    v-model:vertex_attribute_name="vertex_attribute_name"
+    v-model:vertex_attribute_item="vertex_attribute_item"
+    v-model:vertex_attribute_range="vertex_attribute_range"
+    @vertex_attribute_ranges_per_data="setVertexAttributeRangesPerData"
+    v-model:vertex_attribute_color_map="vertex_attribute_color_map"
+    v-model:vertex_attribute_no_data_color="vertex_attribute_no_data_color"
+    v-model:vertex_attribute_time_step="vertex_attribute_time_step"
+    v-model:polygon_attribute_name="polygon_attribute_name"
+    v-model:polygon_attribute_item="polygon_attribute_item"
+    v-model:polygon_attribute_range="polygon_attribute_range"
+    @polygon_attribute_ranges_per_data="setPolygonAttributeRangesPerData"
+    v-model:polygon_attribute_color_map="polygon_attribute_color_map"
+    v-model:polygon_attribute_no_data_color="polygon_attribute_no_data_color"
+    v-model:polygon_attribute_time_step="polygon_attribute_time_step"
+    :capabilities="capabilities"
+  />
+</template>
diff --git a/app/components/Viewer/Generic/Mesh/PolygonsOptions.vue b/app/components/Viewer/Generic/Mesh/PolygonsOptions.vue
index 4f5cb2e9f..5a8050462 100644
--- a/app/components/Viewer/Generic/Mesh/PolygonsOptions.vue
+++ b/app/components/Viewer/Generic/Mesh/PolygonsOptions.vue
@@ -1,23 +1,13 @@
 <script setup lang="ts">
-import {
-  type RangesPerData,
-  applyRangesPerData,
-  useBatchStyle,
-} from "@ogw_front/composables/batch_style";
 import ViewerContextMenuItem, {
   type ItemProps,
 } from "@ogw_front/components/Viewer/ContextMenu/ContextMenuItem.vue";
-import type { RGBAColor } from "@ogw_front/utils/default_styles/constants";
-import ViewerOptionsColoringTypeSelector from "@ogw_front/components/Viewer/Options/ColoringTypeSelector.vue";
+import ViewerGenericMeshPolygonsColoring from "@ogw_front/components/Viewer/Generic/Mesh/PolygonsColoring.vue";
 import ViewerOptionsVisibilitySwitch from "@ogw_front/components/Viewer/Options/VisibilitySwitch.vue";
+import { useBatchStyle } from "@ogw_front/composables/batch_style";
 import { useDataStyleStore } from "@ogw_front/stores/data_style";
 import { useHybridViewerStore } from "@ogw_front/stores/hybrid_viewer";
 
-interface Texture {
-  id: string;
-  texture_name: string;
-}
-
 interface CapabilityConfig {
   available?: boolean;
   hasColorMap?: boolean;
@@ -52,188 +42,6 @@ const visibility = computed<boolean>({
     hybridViewerStore.remoteRender();
   },
 });
-const coloring_style_key = computed<string>({
-  get: () => dataStyleStore.meshPolygonsActiveColoring(id.value),
-  set: async (newValue) => {
-    await applyBatchStyle(id.value, (targetId: string) =>
-      dataStyleStore.setMeshPolygonsActiveColoring(targetId, newValue),
-    );
-    hybridViewerStore.remoteRender();
-  },
-});
-const color = computed<RGBAColor | undefined>({
-  get: () => dataStyleStore.meshPolygonsColor(id.value) as RGBAColor | undefined,
-  set: async (newValue) => {
-    if (newValue === undefined) {
-      return;
-    }
-    await applyBatchStyle(id.value, (targetId: string) =>
-      dataStyleStore.setMeshPolygonsColor(targetId, newValue),
-    );
-    hybridViewerStore.remoteRender();
-  },
-});
-const textures = computed<Texture[] | undefined>({
-  get: () => dataStyleStore.meshPolygonsTextures(id.value) as Texture[] | undefined,
-  set: async (newValue) => {
-    if (newValue === undefined) {
-      return;
-    }
-    await applyBatchStyle(id.value, (targetId: string) =>
-      dataStyleStore.setMeshPolygonsTextures(targetId, newValue),
-    );
-    hybridViewerStore.remoteRender();
-  },
-});
-
-const vertex_attribute_name = computed<string | undefined>({
-  get: () => dataStyleStore.meshPolygonsVertexAttributeName(id.value),
-  set: async (newValue) => {
-    if (newValue === undefined) {
-      return;
-    }
-    await applyBatchStyle(id.value, (targetId: string) =>
-      Promise.resolve(dataStyleStore.setMeshPolygonsVertexAttributeName(targetId, newValue)),
-    );
-    hybridViewerStore.remoteRender();
-  },
-});
-
-const vertex_attribute_time_step = computed<number | undefined>({
-  get: () => dataStyleStore.meshPolygonsVertexAttributeTimeStep(id.value),
-  set: async (newValue) => {
-    if (newValue === undefined) {
-      return;
-    }
-    await applyBatchStyle(id.value, (targetId: string) =>
-      Promise.resolve(dataStyleStore.setMeshPolygonsVertexAttributeTimeStep(targetId, newValue)),
-    );
-    hybridViewerStore.remoteRender();
-  },
-});
-const vertex_attribute_item = computed<string | undefined>({
-  get: () => dataStyleStore.meshPolygonsVertexAttributeItem(id.value),
-  set: async (newValue) => {
-    await applyBatchStyle(id.value, (targetId: string) =>
-      Promise.resolve(dataStyleStore.setMeshPolygonsVertexAttributeItem(targetId, newValue)),
-    );
-    hybridViewerStore.remoteRender();
-  },
-});
-const vertex_attribute_range = computed<[number, number] | undefined>({
-  get: () => dataStyleStore.meshPolygonsVertexAttributeRange(id.value),
-  set: async (newValue) => {
-    const [minimum, maximum] = newValue;
-    if (minimum === undefined || maximum === undefined) {
-      return;
-    }
-    await applyBatchStyle(id.value, (targetId: string) =>
-      Promise.resolve(
-        dataStyleStore.setMeshPolygonsVertexAttributeRange(targetId, minimum, maximum),
-      ),
-    );
-    hybridViewerStore.remoteRender();
-  },
-});
-const vertex_attribute_color_map = computed<Map<string, RGBAColor>>({
-  get: () => dataStyleStore.meshPolygonsVertexAttributeColorMap(id.value),
-  set: async (newValue) => {
-    await applyBatchStyle(id.value, (targetId: string) =>
-      Promise.resolve(dataStyleStore.setMeshPolygonsVertexAttributeColorMap(targetId, newValue)),
-    );
-    hybridViewerStore.remoteRender();
-  },
-});
-const vertex_attribute_no_data_color = computed<RGBAColor>({
-  get: () => dataStyleStore.meshPolygonsVertexAttributeNoDataColor(id.value),
-  set: async (newValue) => {
-    await applyBatchStyle(id.value, (targetId: string) =>
-      dataStyleStore.setMeshPolygonsVertexAttributeNoDataColor(targetId, newValue),
-    );
-    hybridViewerStore.remoteRender();
-  },
-});
-const polygon_attribute_name = computed<string | undefined>({
-  get: () => dataStyleStore.meshPolygonsPolygonAttributeName(id.value),
-  set: async (newValue) => {
-    if (newValue === undefined) {
-      return;
-    }
-    await applyBatchStyle(id.value, (targetId: string) =>
-      Promise.resolve(dataStyleStore.setMeshPolygonsPolygonAttributeName(targetId, newValue)),
-    );
-    hybridViewerStore.remoteRender();
-  },
-});
-
-const polygon_attribute_time_step = computed<number | undefined>({
-  get: () => dataStyleStore.meshPolygonsPolygonAttributeTimeStep(id.value),
-  set: async (newValue) => {
-    if (newValue === undefined) {
-      return;
-    }
-    await applyBatchStyle(id.value, (targetId: string) =>
-      Promise.resolve(dataStyleStore.setMeshPolygonsPolygonAttributeTimeStep(targetId, newValue)),
-    );
-    hybridViewerStore.remoteRender();
-  },
-});
-const polygon_attribute_item = computed<string | undefined>({
-  get: () => dataStyleStore.meshPolygonsPolygonAttributeItem(id.value),
-  set: async (newValue) => {
-    await applyBatchStyle(id.value, (targetId: string) =>
-      Promise.resolve(dataStyleStore.setMeshPolygonsPolygonAttributeItem(targetId, newValue)),
-    );
-    hybridViewerStore.remoteRender();
-  },
-});
-const polygon_attribute_range = computed<[number, number] | undefined>({
-  get: () => dataStyleStore.meshPolygonsPolygonAttributeRange(id.value),
-  set: async (newValue) => {
-    const [minimum, maximum] = newValue;
-    if (minimum === undefined || maximum === undefined) {
-      return;
-    }
-    await applyBatchStyle(id.value, (targetId: string) =>
-      Promise.resolve(
-        dataStyleStore.setMeshPolygonsPolygonAttributeRange(targetId, minimum, maximum),
-      ),
-    );
-    hybridViewerStore.remoteRender();
-  },
-});
-const polygon_attribute_color_map = computed<Map<string, RGBAColor>>({
-  get: () => dataStyleStore.meshPolygonsPolygonAttributeColorMap(id.value),
-  set: async (newValue) => {
-    await applyBatchStyle(id.value, (targetId: string) =>
-      Promise.resolve(dataStyleStore.setMeshPolygonsPolygonAttributeColorMap(targetId, newValue)),
-    );
-    hybridViewerStore.remoteRender();
-  },
-});
-const polygon_attribute_no_data_color = computed<RGBAColor>({
-  get: () => dataStyleStore.meshPolygonsPolygonAttributeNoDataColor(id.value),
-  set: async (newValue) => {
-    await applyBatchStyle(id.value, (targetId: string) =>
-      dataStyleStore.setMeshPolygonsPolygonAttributeNoDataColor(targetId, newValue),
-    );
-    hybridViewerStore.remoteRender();
-  },
-});
-
-async function setVertexAttributeRangesPerData(ranges: RangesPerData): Promise<void> {
-  await applyRangesPerData(ranges, (targetId, minimum, maximum) =>
-    dataStyleStore.setMeshPolygonsVertexAttributeRange(targetId, minimum, maximum),
-  );
-  hybridViewerStore.remoteRender();
-}
-
-async function setPolygonAttributeRangesPerData(ranges: RangesPerData): Promise<void> {
-  await applyRangesPerData(ranges, (targetId, minimum, maximum) =>
-    dataStyleStore.setMeshPolygonsPolygonAttributeRange(targetId, minimum, maximum),
-  );
-  hybridViewerStore.remoteRender();
-}
 </script>
 
 <template>
@@ -251,27 +59,7 @@ async function setPolygonAttributeRangesPerData(ranges: RangesPerData): Promise<
       />
       <template v-if="visibility">
         <v-divider />
-        <ViewerOptionsColoringTypeSelector
-          :id="id"
-          v-model:coloring_style_key="coloring_style_key"
-          v-model:color="color"
-          v-model:textures="textures"
-          v-model:vertex_attribute_name="vertex_attribute_name"
-          v-model:vertex_attribute_item="vertex_attribute_item"
-          v-model:vertex_attribute_range="vertex_attribute_range"
-          @vertex_attribute_ranges_per_data="setVertexAttributeRangesPerData"
-          v-model:vertex_attribute_color_map="vertex_attribute_color_map"
-          v-model:vertex_attribute_no_data_color="vertex_attribute_no_data_color"
-          v-model:vertex_attribute_time_step="vertex_attribute_time_step"
-          v-model:polygon_attribute_name="polygon_attribute_name"
-          v-model:polygon_attribute_item="polygon_attribute_item"
-          v-model:polygon_attribute_range="polygon_attribute_range"
-          @polygon_attribute_ranges_per_data="setPolygonAttributeRangesPerData"
-          v-model:polygon_attribute_color_map="polygon_attribute_color_map"
-          v-model:polygon_attribute_no_data_color="polygon_attribute_no_data_color"
-          v-model:polygon_attribute_time_step="polygon_attribute_time_step"
-          :capabilities="capabilities"
-        />
+        <ViewerGenericMeshPolygonsColoring :id="id" :capabilities="capabilities" />
       </template>
     </template>
   </ViewerContextMenuItem>
diff --git a/app/components/Viewer/Generic/Mesh/PolyhedraColoring.vue b/app/components/Viewer/Generic/Mesh/PolyhedraColoring.vue
new file mode 100644
index 000000000..f8b72e74a
--- /dev/null
+++ b/app/components/Viewer/Generic/Mesh/PolyhedraColoring.vue
@@ -0,0 +1,221 @@
+<script setup lang="ts">
+import {
+  type RangesPerData,
+  applyRangesPerData,
+  useBatchStyle,
+} from "@ogw_front/composables/batch_style";
+import type { RGBAColor } from "@ogw_front/utils/default_styles/constants";
+import ViewerOptionsColoringTypeSelector from "@ogw_front/components/Viewer/Options/ColoringTypeSelector.vue";
+import { useDataStyleStore } from "@ogw_front/stores/data_style";
+import { useHybridViewerStore } from "@ogw_front/stores/hybrid_viewer";
+
+const dataStyleStore = useDataStyleStore();
+const hybridViewerStore = useHybridViewerStore();
+const { applyBatchStyle } = useBatchStyle();
+
+interface Props {
+  id: string;
+}
+
+const { id } = defineProps<Props>();
+
+const coloring_style_key = computed<string>({
+  get: () => dataStyleStore.meshPolyhedraActiveColoring(id),
+  set: async (newValue) => {
+    await applyBatchStyle(id, (targetId: string) =>
+      dataStyleStore.setMeshPolyhedraActiveColoring(targetId, newValue),
+    );
+    hybridViewerStore.remoteRender();
+  },
+});
+const color = computed<RGBAColor | undefined>({
+  get: () => dataStyleStore.meshPolyhedraColor(id) as RGBAColor | undefined,
+  set: async (newValue) => {
+    if (newValue === undefined) {
+      return;
+    }
+    await applyBatchStyle(id, (targetId: string) =>
+      dataStyleStore.setMeshPolyhedraColor(targetId, newValue),
+    );
+    hybridViewerStore.remoteRender();
+  },
+});
+const vertex_attribute_name = computed<string | undefined>({
+  get: () => dataStyleStore.meshPolyhedraVertexAttributeName(id),
+  set: async (newValue) => {
+    if (newValue === undefined) {
+      return;
+    }
+    await applyBatchStyle(id, (targetId: string) =>
+      Promise.resolve(dataStyleStore.setMeshPolyhedraVertexAttributeName(targetId, newValue)),
+    );
+    hybridViewerStore.remoteRender();
+  },
+});
+
+const vertex_attribute_time_step = computed<number | undefined>({
+  get: () => dataStyleStore.meshPolyhedraVertexAttributeTimeStep(id),
+  set: async (newValue) => {
+    if (newValue === undefined) {
+      return;
+    }
+    await applyBatchStyle(id, (targetId: string) =>
+      Promise.resolve(dataStyleStore.setMeshPolyhedraVertexAttributeTimeStep(targetId, newValue)),
+    );
+    hybridViewerStore.remoteRender();
+  },
+});
+const vertex_attribute_item = computed<string | undefined>({
+  get: () => dataStyleStore.meshPolyhedraVertexAttributeItem(id),
+  set: async (newValue) => {
+    await applyBatchStyle(id, (targetId: string) =>
+      Promise.resolve(dataStyleStore.setMeshPolyhedraVertexAttributeItem(targetId, newValue)),
+    );
+    hybridViewerStore.remoteRender();
+  },
+});
+const vertex_attribute_range = computed<[number, number] | undefined>({
+  get: () => dataStyleStore.meshPolyhedraVertexAttributeRange(id),
+  set: async (newValue) => {
+    const [minimum, maximum] = newValue;
+    if (minimum === undefined || maximum === undefined) {
+      return;
+    }
+    await applyBatchStyle(id, (targetId: string) =>
+      Promise.resolve(
+        dataStyleStore.setMeshPolyhedraVertexAttributeRange(targetId, minimum, maximum),
+      ),
+    );
+    hybridViewerStore.remoteRender();
+  },
+});
+const vertex_attribute_color_map = computed<Map<string, RGBAColor>>({
+  get: () => dataStyleStore.meshPolyhedraVertexAttributeColorMap(id),
+  set: async (newValue) => {
+    await applyBatchStyle(id, (targetId: string) =>
+      Promise.resolve(dataStyleStore.setMeshPolyhedraVertexAttributeColorMap(targetId, newValue)),
+    );
+    hybridViewerStore.remoteRender();
+  },
+});
+const vertex_attribute_no_data_color = computed<RGBAColor>({
+  get: () => dataStyleStore.meshPolyhedraVertexAttributeNoDataColor(id),
+  set: async (newValue) => {
+    await applyBatchStyle(id, (targetId: string) =>
+      dataStyleStore.setMeshPolyhedraVertexAttributeNoDataColor(targetId, newValue),
+    );
+    hybridViewerStore.remoteRender();
+  },
+});
+const polyhedron_attribute_name = computed<string | undefined>({
+  get: () => dataStyleStore.meshPolyhedraPolyhedronAttributeName(id),
+  set: async (newValue) => {
+    if (newValue === undefined) {
+      return;
+    }
+    await applyBatchStyle(id, (targetId: string) =>
+      Promise.resolve(dataStyleStore.setMeshPolyhedraPolyhedronAttributeName(targetId, newValue)),
+    );
+    hybridViewerStore.remoteRender();
+  },
+});
+
+const polyhedron_attribute_time_step = computed<number | undefined>({
+  get: () => dataStyleStore.meshPolyhedraPolyhedronAttributeTimeStep(id),
+  set: async (newValue) => {
+    if (newValue === undefined) {
+      return;
+    }
+    await applyBatchStyle(id, (targetId: string) =>
+      Promise.resolve(
+        dataStyleStore.setMeshPolyhedraPolyhedronAttributeTimeStep(targetId, newValue),
+      ),
+    );
+    hybridViewerStore.remoteRender();
+  },
+});
+const polyhedron_attribute_item = computed<string | undefined>({
+  get: () => dataStyleStore.meshPolyhedraPolyhedronAttributeItem(id),
+  set: async (newValue) => {
+    await applyBatchStyle(id, (targetId: string) =>
+      Promise.resolve(dataStyleStore.setMeshPolyhedraPolyhedronAttributeItem(targetId, newValue)),
+    );
+    hybridViewerStore.remoteRender();
+  },
+});
+const polyhedron_attribute_range = computed<[number, number] | undefined>({
+  get: () => dataStyleStore.meshPolyhedraPolyhedronAttributeRange(id),
+  set: async (newValue) => {
+    const [minimum, maximum] = newValue;
+    if (minimum === undefined || maximum === undefined) {
+      return;
+    }
+    await applyBatchStyle(id, (targetId: string) =>
+      Promise.resolve(
+        dataStyleStore.setMeshPolyhedraPolyhedronAttributeRange(targetId, minimum, maximum),
+      ),
+    );
+    hybridViewerStore.remoteRender();
+  },
+});
+const polyhedron_attribute_color_map = computed<Map<string, RGBAColor>>({
+  get: () => dataStyleStore.meshPolyhedraPolyhedronAttributeColorMap(id),
+  set: async (newValue) => {
+    await applyBatchStyle(id, (targetId: string) =>
+      Promise.resolve(
+        dataStyleStore.setMeshPolyhedraPolyhedronAttributeColorMap(targetId, newValue),
+      ),
+    );
+    hybridViewerStore.remoteRender();
+  },
+});
+const polyhedron_attribute_no_data_color = computed<RGBAColor>({
+  get: () => dataStyleStore.meshPolyhedraPolyhedronAttributeNoDataColor(id),
+  set: async (newValue) => {
+    await applyBatchStyle(id, (targetId: string) =>
+      dataStyleStore.setMeshPolyhedraPolyhedronAttributeNoDataColor(targetId, newValue),
+    );
+    hybridViewerStore.remoteRender();
+  },
+});
+
+async function setVertexAttributeRangesPerData(ranges: RangesPerData): Promise<void> {
+  await applyRangesPerData(ranges, (targetId, minimum, maximum) =>
+    dataStyleStore.setMeshPolyhedraVertexAttributeRange(targetId, minimum, maximum),
+  );
+  hybridViewerStore.remoteRender();
+}
+
+async function setPolyhedronAttributeRangesPerData(ranges: RangesPerData): Promise<void> {
+  await applyRangesPerData(ranges, (targetId, minimum, maximum) =>
+    dataStyleStore.setMeshPolyhedraPolyhedronAttributeRange(targetId, minimum, maximum),
+  );
+  hybridViewerStore.remoteRender();
+}
+</script>
+
+<template>
+  <ViewerOptionsColoringTypeSelector
+    :id="id"
+    v-model:coloring_style_key="coloring_style_key"
+    v-model:color="color"
+    v-model:vertex_attribute_name="vertex_attribute_name"
+    v-model:vertex_attribute_item="vertex_attribute_item"
+    v-model:vertex_attribute_range="vertex_attribute_range"
+    @vertex_attribute_ranges_per_data="setVertexAttributeRangesPerData"
+    v-model:vertex_attribute_color_map="vertex_attribute_color_map"
+    v-model:vertex_attribute_no_data_color="vertex_attribute_no_data_color"
+    v-model:vertex_attribute_time_step="vertex_attribute_time_step"
+    v-model:polyhedron_attribute_name="polyhedron_attribute_name"
+    v-model:polyhedron_attribute_item="polyhedron_attribute_item"
+    v-model:polyhedron_attribute_range="polyhedron_attribute_range"
+    @polyhedron_attribute_ranges_per_data="setPolyhedronAttributeRangesPerData"
+    v-model:polyhedron_attribute_color_map="polyhedron_attribute_color_map"
+    v-model:polyhedron_attribute_no_data_color="polyhedron_attribute_no_data_color"
+    v-model:polyhedron_attribute_time_step="polyhedron_attribute_time_step"
+    :capabilities="{
+      vertex: { available: true, hasColorMap: true },
+      polyhedron: { available: true, hasColorMap: true },
+    }"
+  />
+</template>
diff --git a/app/components/Viewer/Generic/Mesh/PolyhedraOptions.vue b/app/components/Viewer/Generic/Mesh/PolyhedraOptions.vue
index 73be90404..e23a678cf 100644
--- a/app/components/Viewer/Generic/Mesh/PolyhedraOptions.vue
+++ b/app/components/Viewer/Generic/Mesh/PolyhedraOptions.vue
@@ -1,15 +1,10 @@
 <script setup lang="ts">
-import {
-  type RangesPerData,
-  applyRangesPerData,
-  useBatchStyle,
-} from "@ogw_front/composables/batch_style";
 import ViewerContextMenuItem, {
   type ItemProps,
 } from "@ogw_front/components/Viewer/ContextMenu/ContextMenuItem.vue";
-import type { RGBAColor } from "@ogw_front/utils/default_styles/constants";
-import ViewerOptionsColoringTypeSelector from "@ogw_front/components/Viewer/Options/ColoringTypeSelector.vue";
+import ViewerGenericMeshPolyhedraColoring from "@ogw_front/components/Viewer/Generic/Mesh/PolyhedraColoring.vue";
 import ViewerOptionsVisibilitySwitch from "@ogw_front/components/Viewer/Options/VisibilitySwitch.vue";
+import { useBatchStyle } from "@ogw_front/composables/batch_style";
 import { useDataStyleStore } from "@ogw_front/stores/data_style";
 import { useHybridViewerStore } from "@ogw_front/stores/hybrid_viewer";
 
@@ -36,179 +31,6 @@ const visibility = computed<boolean>({
     hybridViewerStore.remoteRender();
   },
 });
-const coloring_style_key = computed<string>({
-  get: () => dataStyleStore.meshPolyhedraActiveColoring(id.value),
-  set: async (newValue) => {
-    await applyBatchStyle(id.value, (targetId: string) =>
-      dataStyleStore.setMeshPolyhedraActiveColoring(targetId, newValue),
-    );
-    hybridViewerStore.remoteRender();
-  },
-});
-const color = computed<RGBAColor | undefined>({
-  get: () => dataStyleStore.meshPolyhedraColor(id.value) as RGBAColor | undefined,
-  set: async (newValue) => {
-    if (newValue === undefined) {
-      return;
-    }
-    await applyBatchStyle(id.value, (targetId: string) =>
-      dataStyleStore.setMeshPolyhedraColor(targetId, newValue),
-    );
-    hybridViewerStore.remoteRender();
-  },
-});
-const vertex_attribute_name = computed<string | undefined>({
-  get: () => dataStyleStore.meshPolyhedraVertexAttributeName(id.value),
-  set: async (newValue) => {
-    if (newValue === undefined) {
-      return;
-    }
-    await applyBatchStyle(id.value, (targetId: string) =>
-      Promise.resolve(dataStyleStore.setMeshPolyhedraVertexAttributeName(targetId, newValue)),
-    );
-    hybridViewerStore.remoteRender();
-  },
-});
-
-const vertex_attribute_time_step = computed<number | undefined>({
-  get: () => dataStyleStore.meshPolyhedraVertexAttributeTimeStep(id.value),
-  set: async (newValue) => {
-    if (newValue === undefined) {
-      return;
-    }
-    await applyBatchStyle(id.value, (targetId: string) =>
-      Promise.resolve(dataStyleStore.setMeshPolyhedraVertexAttributeTimeStep(targetId, newValue)),
-    );
-    hybridViewerStore.remoteRender();
-  },
-});
-const vertex_attribute_item = computed<string | undefined>({
-  get: () => dataStyleStore.meshPolyhedraVertexAttributeItem(id.value),
-  set: async (newValue) => {
-    await applyBatchStyle(id.value, (targetId: string) =>
-      Promise.resolve(dataStyleStore.setMeshPolyhedraVertexAttributeItem(targetId, newValue)),
-    );
-    hybridViewerStore.remoteRender();
-  },
-});
-const vertex_attribute_range = computed<[number, number] | undefined>({
-  get: () => dataStyleStore.meshPolyhedraVertexAttributeRange(id.value),
-  set: async (newValue) => {
-    const [minimum, maximum] = newValue;
-    if (minimum === undefined || maximum === undefined) {
-      return;
-    }
-    await applyBatchStyle(id.value, (targetId: string) =>
-      Promise.resolve(
-        dataStyleStore.setMeshPolyhedraVertexAttributeRange(targetId, minimum, maximum),
-      ),
-    );
-    hybridViewerStore.remoteRender();
-  },
-});
-const vertex_attribute_color_map = computed<Map<string, RGBAColor>>({
-  get: () => dataStyleStore.meshPolyhedraVertexAttributeColorMap(id.value),
-  set: async (newValue) => {
-    await applyBatchStyle(id.value, (targetId: string) =>
-      Promise.resolve(dataStyleStore.setMeshPolyhedraVertexAttributeColorMap(targetId, newValue)),
-    );
-    hybridViewerStore.remoteRender();
-  },
-});
-const vertex_attribute_no_data_color = computed<RGBAColor>({
-  get: () => dataStyleStore.meshPolyhedraVertexAttributeNoDataColor(id.value),
-  set: async (newValue) => {
-    await applyBatchStyle(id.value, (targetId: string) =>
-      dataStyleStore.setMeshPolyhedraVertexAttributeNoDataColor(targetId, newValue),
-    );
-    hybridViewerStore.remoteRender();
-  },
-});
-const polyhedron_attribute_name = computed<string | undefined>({
-  get: () => dataStyleStore.meshPolyhedraPolyhedronAttributeName(id.value),
-  set: async (newValue) => {
-    if (newValue === undefined) {
-      return;
-    }
-    await applyBatchStyle(id.value, (targetId: string) =>
-      Promise.resolve(dataStyleStore.setMeshPolyhedraPolyhedronAttributeName(targetId, newValue)),
-    );
-    hybridViewerStore.remoteRender();
-  },
-});
-
-const polyhedron_attribute_time_step = computed<number | undefined>({
-  get: () => dataStyleStore.meshPolyhedraPolyhedronAttributeTimeStep(id.value),
-  set: async (newValue) => {
-    if (newValue === undefined) {
-      return;
-    }
-    await applyBatchStyle(id.value, (targetId: string) =>
-      Promise.resolve(
-        dataStyleStore.setMeshPolyhedraPolyhedronAttributeTimeStep(targetId, newValue),
-      ),
-    );
-    hybridViewerStore.remoteRender();
-  },
-});
-const polyhedron_attribute_item = computed<string | undefined>({
-  get: () => dataStyleStore.meshPolyhedraPolyhedronAttributeItem(id.value),
-  set: async (newValue) => {
-    await applyBatchStyle(id.value, (targetId: string) =>
-      Promise.resolve(dataStyleStore.setMeshPolyhedraPolyhedronAttributeItem(targetId, newValue)),
-    );
-    hybridViewerStore.remoteRender();
-  },
-});
-const polyhedron_attribute_range = computed<[number, number] | undefined>({
-  get: () => dataStyleStore.meshPolyhedraPolyhedronAttributeRange(id.value),
-  set: async (newValue) => {
-    const [minimum, maximum] = newValue;
-    if (minimum === undefined || maximum === undefined) {
-      return;
-    }
-    await applyBatchStyle(id.value, (targetId: string) =>
-      Promise.resolve(
-        dataStyleStore.setMeshPolyhedraPolyhedronAttributeRange(targetId, minimum, maximum),
-      ),
-    );
-    hybridViewerStore.remoteRender();
-  },
-});
-const polyhedron_attribute_color_map = computed<Map<string, RGBAColor>>({
-  get: () => dataStyleStore.meshPolyhedraPolyhedronAttributeColorMap(id.value),
-  set: async (newValue) => {
-    await applyBatchStyle(id.value, (targetId: string) =>
-      Promise.resolve(
-        dataStyleStore.setMeshPolyhedraPolyhedronAttributeColorMap(targetId, newValue),
-      ),
-    );
-    hybridViewerStore.remoteRender();
-  },
-});
-const polyhedron_attribute_no_data_color = computed<RGBAColor>({
-  get: () => dataStyleStore.meshPolyhedraPolyhedronAttributeNoDataColor(id.value),
-  set: async (newValue) => {
-    await applyBatchStyle(id.value, (targetId: string) =>
-      dataStyleStore.setMeshPolyhedraPolyhedronAttributeNoDataColor(targetId, newValue),
-    );
-    hybridViewerStore.remoteRender();
-  },
-});
-
-async function setVertexAttributeRangesPerData(ranges: RangesPerData): Promise<void> {
-  await applyRangesPerData(ranges, (targetId, minimum, maximum) =>
-    dataStyleStore.setMeshPolyhedraVertexAttributeRange(targetId, minimum, maximum),
-  );
-  hybridViewerStore.remoteRender();
-}
-
-async function setPolyhedronAttributeRangesPerData(ranges: RangesPerData): Promise<void> {
-  await applyRangesPerData(ranges, (targetId, minimum, maximum) =>
-    dataStyleStore.setMeshPolyhedraPolyhedronAttributeRange(targetId, minimum, maximum),
-  );
-  hybridViewerStore.remoteRender();
-}
 </script>
 
 <template>
@@ -226,29 +48,7 @@ async function setPolyhedronAttributeRangesPerData(ranges: RangesPerData): Promi
       />
       <template v-if="visibility">
         <v-divider />
-        <ViewerOptionsColoringTypeSelector
-          :id="id"
-          v-model:coloring_style_key="coloring_style_key"
-          v-model:color="color"
-          v-model:vertex_attribute_name="vertex_attribute_name"
-          v-model:vertex_attribute_item="vertex_attribute_item"
-          v-model:vertex_attribute_range="vertex_attribute_range"
-          @vertex_attribute_ranges_per_data="setVertexAttributeRangesPerData"
-          v-model:vertex_attribute_color_map="vertex_attribute_color_map"
-          v-model:vertex_attribute_no_data_color="vertex_attribute_no_data_color"
-          v-model:vertex_attribute_time_step="vertex_attribute_time_step"
-          v-model:polyhedron_attribute_name="polyhedron_attribute_name"
-          v-model:polyhedron_attribute_item="polyhedron_attribute_item"
-          v-model:polyhedron_attribute_range="polyhedron_attribute_range"
-          @polyhedron_attribute_ranges_per_data="setPolyhedronAttributeRangesPerData"
-          v-model:polyhedron_attribute_color_map="polyhedron_attribute_color_map"
-          v-model:polyhedron_attribute_no_data_color="polyhedron_attribute_no_data_color"
-          v-model:polyhedron_attribute_time_step="polyhedron_attribute_time_step"
-          :capabilities="{
-            vertex: { available: true, hasColorMap: true },
-            polyhedron: { available: true, hasColorMap: true },
-          }"
-        />
+        <ViewerGenericMeshPolyhedraColoring :id="id" />
       </template>
     </template>
   </ViewerContextMenuItem>
diff --git a/app/components/Viewer/Generic/Model/ComponentPointsOptions.vue b/app/components/Viewer/Generic/Model/ComponentPointsOptions.vue
index cfa03900b..ead454724 100644
--- a/app/components/Viewer/Generic/Model/ComponentPointsOptions.vue
+++ b/app/components/Viewer/Generic/Model/ComponentPointsOptions.vue
@@ -1,9 +1,9 @@
 <script setup lang="ts">
+import { MODEL_VERTEX_COLORING } from "@ogw_front/utils/model_component_coloring";
 import type { RGBAColor } from "@ogw_front/utils/default_styles/constants";
 import ViewerOptionsColoringTypeSelector from "@ogw_front/components/Viewer/Options/ColoringTypeSelector.vue";
 import ViewerOptionsSizeSlider from "@ogw_front/components/Viewer/Options/Sliders/Size.vue";
 import VisibilitySwitch from "@ogw_front/components/Viewer/Options/VisibilitySwitch.vue";
-import back_schemas from "@geode/opengeodeweb-back/opengeodeweb_back_typed_schemas.js";
 import { useDataStyleStore } from "@ogw_front/stores/data_style";
 import { useHybridViewerStore } from "@ogw_front/stores/hybrid_viewer";
 
@@ -203,23 +203,7 @@ const vertexAttributeNoDataColor = computed<RGBAColor | undefined>({
   },
 });
 
-const capabilities = {
-  color: { available: true },
-  textures: { available: false },
-  vertex: { available: true },
-  edge: { available: false },
-  cell: { available: false },
-  polygon: { available: false },
-  polyhedron: { available: false },
-};
-
-const backSchemas = back_schemas.opengeodeweb_back;
-const attributeSchemas = {
-  vertex: {
-    names: backSchemas.model_component_vertex_attribute_names,
-    range: backSchemas.model_component_vertex_attribute_range,
-  },
-};
+const { capabilities, schemas: attributeSchemas } = MODEL_VERTEX_COLORING;
 </script>
 
 <template>
diff --git a/app/components/Viewer/Generic/Model/CornerComponentOptions.vue b/app/components/Viewer/Generic/Model/CornerComponentOptions.vue
new file mode 100644
index 000000000..669350671
--- /dev/null
+++ b/app/components/Viewer/Generic/Model/CornerComponentOptions.vue
@@ -0,0 +1,145 @@
+<script setup lang="ts">
+import { MODEL_VERTEX_COLORING } from "@ogw_front/utils/model_component_coloring";
+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";
+import VisibilitySwitch from "@ogw_front/components/Viewer/Options/VisibilitySwitch.vue";
+import { useDataStyleStore } from "@ogw_front/stores/data_style";
+import { useHybridViewerStore } from "@ogw_front/stores/hybrid_viewer";
+
+interface Props {
+  modelId: string;
+  cornerId?: string;
+}
+
+const { modelId, cornerId = undefined } = defineProps<Props>();
+
+const dataStyleStore = useDataStyleStore();
+const hybridViewerStore = useHybridViewerStore();
+
+const cornerComponentIds = computed<string[]>(() => (cornerId === undefined ? [] : [cornerId]));
+
+const cornerVisibility = computed<boolean | undefined>({
+  get: () => dataStyleStore.modelCornerVisibility(modelId, cornerId) as boolean | undefined,
+  set: async (newValue) => {
+    if (newValue === undefined || cornerId === undefined) {
+      return;
+    }
+    await dataStyleStore.setModelCornersVisibility(modelId, [cornerId], newValue);
+    hybridViewerStore.remoteRender();
+  },
+});
+
+const cornerColor = computed<RGBAColor | undefined>({
+  get: () => dataStyleStore.modelCornerColor(modelId, cornerId) as RGBAColor | undefined,
+  set: async (color) => {
+    if (cornerId === undefined) {
+      return;
+    }
+    await dataStyleStore.setModelCornersColor(modelId, [cornerId], color);
+    hybridViewerStore.remoteRender();
+  },
+});
+
+const cornerActiveColoring = computed<string | undefined>({
+  get: () => dataStyleStore.modelCornerActiveColoring(modelId, cornerId) as string | undefined,
+  set: async (coloringType) => {
+    if (cornerId === undefined || typeof coloringType !== "string") {
+      return;
+    }
+    await dataStyleStore.setModelCornersActiveColoring(modelId, [cornerId], coloringType);
+    hybridViewerStore.remoteRender();
+  },
+});
+
+// Individual Attributes
+const vertexAttributeName = computed<string | undefined>({
+  get: () => dataStyleStore.modelCornersVertexAttributeName(modelId, cornerId),
+  set: async (newValue) => {
+    if (cornerId === undefined || newValue === undefined) {
+      return;
+    }
+    await dataStyleStore.setModelCornersVertexAttributeName(modelId, [cornerId], newValue);
+    hybridViewerStore.remoteRender();
+  },
+});
+
+const vertexAttributeTimeStep = computed<number | undefined>({
+  get: () => dataStyleStore.modelCornersVertexAttributeTimeStep(modelId, cornerId),
+  set: async (newValue) => {
+    if (cornerId === undefined || newValue === undefined) {
+      return;
+    }
+    await dataStyleStore.setModelCornersVertexAttributeTimeStep(modelId, [cornerId], newValue);
+    hybridViewerStore.remoteRender();
+  },
+});
+
+const vertexAttributeItem = computed<string | undefined>({
+  get: () => dataStyleStore.modelCornersVertexAttributeItem(modelId, cornerId),
+  set: async (newValue) => {
+    if (cornerId === undefined) {
+      return;
+    }
+    await dataStyleStore.setModelCornersVertexAttributeItem(modelId, [cornerId], newValue);
+    hybridViewerStore.remoteRender();
+  },
+});
+
+const vertexAttributeRange = computed<[number, number] | undefined>({
+  get: () => dataStyleStore.modelCornersVertexAttributeRange(modelId, cornerId),
+  set: async (newValue) => {
+    const [minimum, maximum] = newValue;
+    if (cornerId === undefined || minimum === undefined || maximum === undefined) {
+      return;
+    }
+    await dataStyleStore.setModelCornersVertexAttributeRange(modelId, [cornerId], minimum, maximum);
+    hybridViewerStore.remoteRender();
+  },
+});
+
+const vertexAttributeColorMap = computed<ColorMap | undefined>({
+  get: () => dataStyleStore.modelCornersVertexAttributeColorMap(modelId, cornerId),
+  set: async (newValue) => {
+    if (cornerId === undefined) {
+      return;
+    }
+    await dataStyleStore.setModelCornersVertexAttributeColorMap(modelId, [cornerId], newValue);
+    hybridViewerStore.remoteRender();
+  },
+});
+
+const vertexAttributeNoDataColor = computed<RGBAColor>({
+  get: () => dataStyleStore.modelCornersVertexAttributeNoDataColor(modelId, cornerId),
+  set: async (newValue) => {
+    if (cornerId === undefined) {
+      return;
+    }
+    await dataStyleStore.setModelCornersVertexAttributeNoDataColor(modelId, [cornerId], newValue);
+    hybridViewerStore.remoteRender();
+  },
+});
+
+const { capabilities, schemas: attributeSchemas } = MODEL_VERTEX_COLORING;
+</script>
+
+<template>
+  <OptionsSection title="Component Options" class="mt-4" data-testid="modelComponentOptions">
+    <VisibilitySwitch v-model="cornerVisibility" />
+    <ViewerOptionsColoringTypeSelector
+      :id="modelId"
+      :componentIds="cornerComponentIds"
+      v-model:coloring_style_key="cornerActiveColoring"
+      v-model:color="cornerColor"
+      v-model:vertex_attribute_name="vertexAttributeName"
+      v-model:vertex_attribute_item="vertexAttributeItem"
+      v-model:vertex_attribute_range="vertexAttributeRange"
+      v-model:vertex_attribute_color_map="vertexAttributeColorMap"
+      v-model:vertex_attribute_no_data_color="vertexAttributeNoDataColor"
+      v-model:vertex_attribute_time_step="vertexAttributeTimeStep"
+      :capabilities="capabilities"
+      :schemas="attributeSchemas"
+      :allowRandom="true"
+    />
+  </OptionsSection>
+</template>
diff --git a/app/components/Viewer/Generic/Model/CornersOptions.vue b/app/components/Viewer/Generic/Model/CornersOptions.vue
index 7d2f387b4..b614cb711 100644
--- a/app/components/Viewer/Generic/Model/CornersOptions.vue
+++ b/app/components/Viewer/Generic/Model/CornersOptions.vue
@@ -1,12 +1,7 @@
 <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";
-import VisibilitySwitch from "@ogw_front/components/Viewer/Options/VisibilitySwitch.vue";
-import back_schemas from "@geode/opengeodeweb-back/opengeodeweb_back_typed_schemas.js";
-import { useDataStyleStore } from "@ogw_front/stores/data_style";
-import { useHybridViewerStore } from "@ogw_front/stores/hybrid_viewer";
+import ViewerGenericModelCornerComponentOptions from "@ogw_front/components/Viewer/Generic/Model/CornerComponentOptions.vue";
+import ViewerGenericModelCornersTypeOptions from "@ogw_front/components/Viewer/Generic/Model/CornersTypeOptions.vue";
 
 interface Props {
   modelId: string;
@@ -21,295 +16,17 @@ const {
   targetCornerIds,
   collections = undefined,
 } = defineProps<Props>();
-
-const dataStyleStore = useDataStyleStore();
-const hybridViewerStore = useHybridViewerStore();
-
-const referenceCornerId = computed<string | undefined>(() =>
-  collections ? targetCornerIds[0] : undefined,
-);
-
-const cornerComponentIds = computed<string[]>(() => (cornerId === undefined ? [] : [cornerId]));
-
-// Visibility
-const cornersVisibility = computed<boolean>({
-  get: () =>
-    collections
-      ? targetCornerIds.every((id) => dataStyleStore.modelCornerVisibility(modelId, id))
-      : dataStyleStore.modelComponentTypeVisibility(modelId, "Corner"),
-  set: async (newValue) => {
-    await dataStyleStore.setModelCornersVisibility(modelId, targetCornerIds, newValue);
-    hybridViewerStore.remoteRender();
-  },
-});
-
-const cornerVisibility = computed<boolean | undefined>({
-  get: () => dataStyleStore.modelCornerVisibility(modelId, cornerId) as boolean | undefined,
-  set: async (newValue) => {
-    if (newValue === undefined || cornerId === undefined) {
-      return;
-    }
-    await dataStyleStore.setModelCornersVisibility(modelId, [cornerId], newValue);
-    hybridViewerStore.remoteRender();
-  },
-});
-
-// Color
-const cornersColor = computed<RGBAColor | undefined>({
-  get: () =>
-    dataStyleStore.modelCornerColor(modelId, referenceCornerId.value) as RGBAColor | undefined,
-  set: async (color) => {
-    await dataStyleStore.setModelCornersColor(modelId, targetCornerIds, color);
-    hybridViewerStore.remoteRender();
-  },
-});
-
-const cornerColor = computed<RGBAColor | undefined>({
-  get: () => dataStyleStore.modelCornerColor(modelId, cornerId) as RGBAColor | undefined,
-  set: async (color) => {
-    if (cornerId === undefined) {
-      return;
-    }
-    await dataStyleStore.setModelCornersColor(modelId, [cornerId], color);
-    hybridViewerStore.remoteRender();
-  },
-});
-
-const cornersActiveColoring = computed<string | undefined>({
-  get: () =>
-    dataStyleStore.modelCornerActiveColoring(modelId, referenceCornerId.value) as
-      | string
-      | undefined,
-  set: async (coloringType) => {
-    if (typeof coloringType !== "string") {
-      return;
-    }
-    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();
-  },
-});
-
-const cornerActiveColoring = computed<string | undefined>({
-  get: () => dataStyleStore.modelCornerActiveColoring(modelId, cornerId) as string | undefined,
-  set: async (coloringType) => {
-    if (cornerId === undefined || typeof coloringType !== "string") {
-      return;
-    }
-    await dataStyleStore.setModelCornersActiveColoring(modelId, [cornerId], coloringType);
-    hybridViewerStore.remoteRender();
-  },
-});
-
-// Group Attributes
-const cornersVertexAttributeName = computed<string | undefined>({
-  get: () => dataStyleStore.modelCornersVertexAttributeName(modelId, referenceCornerId.value),
-  set: async (newValue) => {
-    if (newValue === undefined) {
-      return;
-    }
-    await dataStyleStore.setModelCornersVertexAttributeName(modelId, targetCornerIds, newValue);
-    hybridViewerStore.remoteRender();
-  },
-});
-
-const cornersVertexAttributeTimeStep = computed<number | undefined>({
-  get: () => dataStyleStore.modelCornersVertexAttributeTimeStep(modelId, referenceCornerId.value),
-  set: async (newValue) => {
-    if (newValue === undefined) {
-      return;
-    }
-    await dataStyleStore.setModelCornersVertexAttributeTimeStep(modelId, targetCornerIds, newValue);
-    hybridViewerStore.remoteRender();
-  },
-});
-
-const cornersVertexAttributeItem = computed<string | undefined>({
-  get: () => dataStyleStore.modelCornersVertexAttributeItem(modelId, referenceCornerId.value),
-  set: async (newValue) => {
-    await dataStyleStore.setModelCornersVertexAttributeItem(modelId, targetCornerIds, newValue);
-    hybridViewerStore.remoteRender();
-  },
-});
-
-const cornersVertexAttributeRange = computed<[number, number] | undefined>({
-  get: () => dataStyleStore.modelCornersVertexAttributeRange(modelId, referenceCornerId.value),
-  set: async (newValue) => {
-    const [minimum, maximum] = newValue;
-    if (minimum === undefined || maximum === undefined) {
-      return;
-    }
-    await dataStyleStore.setModelCornersVertexAttributeRange(
-      modelId,
-      targetCornerIds,
-      minimum,
-      maximum,
-    );
-    hybridViewerStore.remoteRender();
-  },
-});
-
-const cornersVertexAttributeColorMap = computed<ColorMap | undefined>({
-  get: () => dataStyleStore.modelCornersVertexAttributeColorMap(modelId, referenceCornerId.value),
-  set: async (newValue) => {
-    await dataStyleStore.setModelCornersVertexAttributeColorMap(modelId, targetCornerIds, newValue);
-    hybridViewerStore.remoteRender();
-  },
-});
-
-const cornersVertexAttributeNoDataColor = computed<RGBAColor>({
-  get: () =>
-    dataStyleStore.modelCornersVertexAttributeNoDataColor(modelId, referenceCornerId.value),
-  set: async (newValue) => {
-    await dataStyleStore.setModelCornersVertexAttributeNoDataColor(
-      modelId,
-      targetCornerIds,
-      newValue,
-    );
-    hybridViewerStore.remoteRender();
-  },
-});
-
-// Individual Attributes
-const vertexAttributeName = computed<string | undefined>({
-  get: () => dataStyleStore.modelCornersVertexAttributeName(modelId, cornerId),
-  set: async (newValue) => {
-    if (cornerId === undefined || newValue === undefined) {
-      return;
-    }
-    await dataStyleStore.setModelCornersVertexAttributeName(modelId, [cornerId], newValue);
-    hybridViewerStore.remoteRender();
-  },
-});
-
-const vertexAttributeTimeStep = computed<number | undefined>({
-  get: () => dataStyleStore.modelCornersVertexAttributeTimeStep(modelId, cornerId),
-  set: async (newValue) => {
-    if (cornerId === undefined || newValue === undefined) {
-      return;
-    }
-    await dataStyleStore.setModelCornersVertexAttributeTimeStep(modelId, [cornerId], newValue);
-    hybridViewerStore.remoteRender();
-  },
-});
-
-const vertexAttributeItem = computed<string | undefined>({
-  get: () => dataStyleStore.modelCornersVertexAttributeItem(modelId, cornerId),
-  set: async (newValue) => {
-    if (cornerId === undefined) {
-      return;
-    }
-    await dataStyleStore.setModelCornersVertexAttributeItem(modelId, [cornerId], newValue);
-    hybridViewerStore.remoteRender();
-  },
-});
-
-const vertexAttributeRange = computed<[number, number] | undefined>({
-  get: () => dataStyleStore.modelCornersVertexAttributeRange(modelId, cornerId),
-  set: async (newValue) => {
-    const [minimum, maximum] = newValue;
-    if (cornerId === undefined || minimum === undefined || maximum === undefined) {
-      return;
-    }
-    await dataStyleStore.setModelCornersVertexAttributeRange(modelId, [cornerId], minimum, maximum);
-    hybridViewerStore.remoteRender();
-  },
-});
-
-const vertexAttributeColorMap = computed<ColorMap | undefined>({
-  get: () => dataStyleStore.modelCornersVertexAttributeColorMap(modelId, cornerId),
-  set: async (newValue) => {
-    if (cornerId === undefined) {
-      return;
-    }
-    await dataStyleStore.setModelCornersVertexAttributeColorMap(modelId, [cornerId], newValue);
-    hybridViewerStore.remoteRender();
-  },
-});
-
-const vertexAttributeNoDataColor = computed<RGBAColor>({
-  get: () => dataStyleStore.modelCornersVertexAttributeNoDataColor(modelId, cornerId),
-  set: async (newValue) => {
-    if (cornerId === undefined) {
-      return;
-    }
-    await dataStyleStore.setModelCornersVertexAttributeNoDataColor(modelId, [cornerId], newValue);
-    hybridViewerStore.remoteRender();
-  },
-});
-
-const capabilities = {
-  color: { available: true },
-  textures: { available: false },
-  vertex: { available: true },
-  edge: { available: false },
-  cell: { available: false },
-  polygon: { available: false },
-  polyhedron: { available: false },
-};
-
-const backSchemas = back_schemas.opengeodeweb_back;
-const attributeSchemas = {
-  vertex: {
-    names: backSchemas.model_component_vertex_attribute_names,
-    range: backSchemas.model_component_vertex_attribute_range,
-  },
-};
 </script>
 
 <template>
-  <OptionsSection title="Corners Options" class="mt-4" data-testid="modelComponentTypeOptions">
-    <VisibilitySwitch data-testid="modelCornersVisibilitySwitch" v-model="cornersVisibility" />
-    <ViewerOptionsColoringTypeSelector
-      :id="modelId"
-      :componentIds="targetCornerIds"
-      v-model:coloring_style_key="cornersActiveColoring"
-      v-model:color="cornersColor"
-      v-model:vertex_attribute_name="cornersVertexAttributeName"
-      v-model:vertex_attribute_item="cornersVertexAttributeItem"
-      v-model:vertex_attribute_range="cornersVertexAttributeRange"
-      v-model:vertex_attribute_color_map="cornersVertexAttributeColorMap"
-      v-model:vertex_attribute_no_data_color="cornersVertexAttributeNoDataColor"
-      v-model:vertex_attribute_time_step="cornersVertexAttributeTimeStep"
-      :capabilities="capabilities"
-      :schemas="attributeSchemas"
-      :allowRandom="true"
-    />
-  </OptionsSection>
-
-  <OptionsSection
+  <ViewerGenericModelCornersTypeOptions
+    :modelId="modelId"
+    :targetCornerIds="targetCornerIds"
+    :collections="collections"
+  />
+  <ViewerGenericModelCornerComponentOptions
     v-if="cornerId"
-    title="Component Options"
-    class="mt-4"
-    data-testid="modelComponentOptions"
-  >
-    <VisibilitySwitch v-model="cornerVisibility" />
-    <ViewerOptionsColoringTypeSelector
-      :id="modelId"
-      :componentIds="cornerComponentIds"
-      v-model:coloring_style_key="cornerActiveColoring"
-      v-model:color="cornerColor"
-      v-model:vertex_attribute_name="vertexAttributeName"
-      v-model:vertex_attribute_item="vertexAttributeItem"
-      v-model:vertex_attribute_range="vertexAttributeRange"
-      v-model:vertex_attribute_color_map="vertexAttributeColorMap"
-      v-model:vertex_attribute_no_data_color="vertexAttributeNoDataColor"
-      v-model:vertex_attribute_time_step="vertexAttributeTimeStep"
-      :capabilities="capabilities"
-      :schemas="attributeSchemas"
-      :allowRandom="true"
-    />
-  </OptionsSection>
+    :modelId="modelId"
+    :cornerId="cornerId"
+  />
 </template>
diff --git a/app/components/Viewer/Generic/Model/CornersTypeOptions.vue b/app/components/Viewer/Generic/Model/CornersTypeOptions.vue
new file mode 100644
index 000000000..4c55a4c6a
--- /dev/null
+++ b/app/components/Viewer/Generic/Model/CornersTypeOptions.vue
@@ -0,0 +1,166 @@
+<script setup lang="ts">
+import type { CollectionComponent } from "@ogw_front/stores/data_helpers/collections";
+import { MODEL_VERTEX_COLORING } from "@ogw_front/utils/model_component_coloring";
+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";
+import VisibilitySwitch from "@ogw_front/components/Viewer/Options/VisibilitySwitch.vue";
+import { useDataStyleStore } from "@ogw_front/stores/data_style";
+import { useHybridViewerStore } from "@ogw_front/stores/hybrid_viewer";
+
+interface Props {
+  modelId: string;
+  targetCornerIds: string[];
+  collections?: CollectionComponent[];
+}
+
+const { modelId, 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: () =>
+    collections
+      ? targetCornerIds.every((id) => dataStyleStore.modelCornerVisibility(modelId, id))
+      : dataStyleStore.modelComponentTypeVisibility(modelId, "Corner"),
+  set: async (newValue) => {
+    await dataStyleStore.setModelCornersVisibility(modelId, targetCornerIds, newValue);
+    hybridViewerStore.remoteRender();
+  },
+});
+
+// Color
+const cornersColor = computed<RGBAColor | undefined>({
+  get: () =>
+    dataStyleStore.modelCornerColor(modelId, referenceCornerId.value) as RGBAColor | undefined,
+  set: async (color) => {
+    await dataStyleStore.setModelCornersColor(modelId, targetCornerIds, color);
+    hybridViewerStore.remoteRender();
+  },
+});
+
+const cornersActiveColoring = computed<string | undefined>({
+  get: () =>
+    dataStyleStore.modelCornerActiveColoring(modelId, referenceCornerId.value) as
+      | string
+      | undefined,
+  set: async (coloringType) => {
+    if (typeof coloringType !== "string") {
+      return;
+    }
+    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();
+  },
+});
+
+// Group Attributes
+const cornersVertexAttributeName = computed<string | undefined>({
+  get: () => dataStyleStore.modelCornersVertexAttributeName(modelId, referenceCornerId.value),
+  set: async (newValue) => {
+    if (newValue === undefined) {
+      return;
+    }
+    await dataStyleStore.setModelCornersVertexAttributeName(modelId, targetCornerIds, newValue);
+    hybridViewerStore.remoteRender();
+  },
+});
+
+const cornersVertexAttributeTimeStep = computed<number | undefined>({
+  get: () => dataStyleStore.modelCornersVertexAttributeTimeStep(modelId, referenceCornerId.value),
+  set: async (newValue) => {
+    if (newValue === undefined) {
+      return;
+    }
+    await dataStyleStore.setModelCornersVertexAttributeTimeStep(modelId, targetCornerIds, newValue);
+    hybridViewerStore.remoteRender();
+  },
+});
+
+const cornersVertexAttributeItem = computed<string | undefined>({
+  get: () => dataStyleStore.modelCornersVertexAttributeItem(modelId, referenceCornerId.value),
+  set: async (newValue) => {
+    await dataStyleStore.setModelCornersVertexAttributeItem(modelId, targetCornerIds, newValue);
+    hybridViewerStore.remoteRender();
+  },
+});
+
+const cornersVertexAttributeRange = computed<[number, number] | undefined>({
+  get: () => dataStyleStore.modelCornersVertexAttributeRange(modelId, referenceCornerId.value),
+  set: async (newValue) => {
+    const [minimum, maximum] = newValue;
+    if (minimum === undefined || maximum === undefined) {
+      return;
+    }
+    await dataStyleStore.setModelCornersVertexAttributeRange(
+      modelId,
+      targetCornerIds,
+      minimum,
+      maximum,
+    );
+    hybridViewerStore.remoteRender();
+  },
+});
+
+const cornersVertexAttributeColorMap = computed<ColorMap | undefined>({
+  get: () => dataStyleStore.modelCornersVertexAttributeColorMap(modelId, referenceCornerId.value),
+  set: async (newValue) => {
+    await dataStyleStore.setModelCornersVertexAttributeColorMap(modelId, targetCornerIds, newValue);
+    hybridViewerStore.remoteRender();
+  },
+});
+
+const cornersVertexAttributeNoDataColor = computed<RGBAColor>({
+  get: () =>
+    dataStyleStore.modelCornersVertexAttributeNoDataColor(modelId, referenceCornerId.value),
+  set: async (newValue) => {
+    await dataStyleStore.setModelCornersVertexAttributeNoDataColor(
+      modelId,
+      targetCornerIds,
+      newValue,
+    );
+    hybridViewerStore.remoteRender();
+  },
+});
+
+const { capabilities, schemas: attributeSchemas } = MODEL_VERTEX_COLORING;
+</script>
+
+<template>
+  <OptionsSection title="Corners Options" class="mt-4" data-testid="modelComponentTypeOptions">
+    <VisibilitySwitch data-testid="modelCornersVisibilitySwitch" v-model="cornersVisibility" />
+    <ViewerOptionsColoringTypeSelector
+      :id="modelId"
+      :componentIds="targetCornerIds"
+      v-model:coloring_style_key="cornersActiveColoring"
+      v-model:color="cornersColor"
+      v-model:vertex_attribute_name="cornersVertexAttributeName"
+      v-model:vertex_attribute_item="cornersVertexAttributeItem"
+      v-model:vertex_attribute_range="cornersVertexAttributeRange"
+      v-model:vertex_attribute_color_map="cornersVertexAttributeColorMap"
+      v-model:vertex_attribute_no_data_color="cornersVertexAttributeNoDataColor"
+      v-model:vertex_attribute_time_step="cornersVertexAttributeTimeStep"
+      :capabilities="capabilities"
+      :schemas="attributeSchemas"
+      :allowRandom="true"
+    />
+  </OptionsSection>
+</template>
diff --git a/app/components/Viewer/Generic/Model/LineComponentOptions.vue b/app/components/Viewer/Generic/Model/LineComponentOptions.vue
new file mode 100644
index 000000000..0ca0ea722
--- /dev/null
+++ b/app/components/Viewer/Generic/Model/LineComponentOptions.vue
@@ -0,0 +1,218 @@
+<script setup lang="ts">
+import { MODEL_LINE_COLORING } from "@ogw_front/utils/model_component_coloring";
+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";
+import VisibilitySwitch from "@ogw_front/components/Viewer/Options/VisibilitySwitch.vue";
+import { useDataStyleStore } from "@ogw_front/stores/data_style";
+import { useHybridViewerStore } from "@ogw_front/stores/hybrid_viewer";
+
+interface Props {
+  modelId: string;
+  lineId?: string;
+}
+
+const { modelId, lineId = undefined } = defineProps<Props>();
+
+const dataStyleStore = useDataStyleStore();
+const hybridViewerStore = useHybridViewerStore();
+
+const lineComponentIds = computed<string[]>(() => (lineId === undefined ? [] : [lineId]));
+
+const lineVisibility = computed<boolean | undefined>({
+  get: () => dataStyleStore.modelLineVisibility(modelId, lineId) as boolean | undefined,
+  set: async (newValue) => {
+    if (newValue === undefined || lineId === undefined) {
+      return;
+    }
+    await dataStyleStore.setModelLinesVisibility(modelId, [lineId], newValue);
+    hybridViewerStore.remoteRender();
+  },
+});
+
+const lineColor = computed<RGBAColor | undefined>({
+  get: () => dataStyleStore.modelLineColor(modelId, lineId) as RGBAColor | undefined,
+  set: async (color) => {
+    if (lineId === undefined) {
+      return;
+    }
+    await dataStyleStore.setModelLinesColor(modelId, [lineId], color);
+    hybridViewerStore.remoteRender();
+  },
+});
+
+const lineActiveColoring = computed<string | undefined>({
+  get: () => dataStyleStore.modelLineActiveColoring(modelId, lineId) as string | undefined,
+  set: async (coloringType) => {
+    if (lineId === undefined || typeof coloringType !== "string") {
+      return;
+    }
+    await dataStyleStore.setModelLinesActiveColoring(modelId, [lineId], coloringType);
+    hybridViewerStore.remoteRender();
+  },
+});
+
+// Individual Attributes
+const vertexAttributeName = computed<string | undefined>({
+  get: () => dataStyleStore.modelLinesVertexAttributeName(modelId, lineId),
+  set: async (newValue) => {
+    if (lineId === undefined || newValue === undefined) {
+      return;
+    }
+    await dataStyleStore.setModelLinesVertexAttributeName(modelId, [lineId], newValue);
+    hybridViewerStore.remoteRender();
+  },
+});
+
+const vertexAttributeTimeStep = computed<number | undefined>({
+  get: () => dataStyleStore.modelLinesVertexAttributeTimeStep(modelId, lineId),
+  set: async (newValue) => {
+    if (lineId === undefined || newValue === undefined) {
+      return;
+    }
+    await dataStyleStore.setModelLinesVertexAttributeTimeStep(modelId, [lineId], newValue);
+    hybridViewerStore.remoteRender();
+  },
+});
+
+const vertexAttributeItem = computed<string | undefined>({
+  get: () => dataStyleStore.modelLinesVertexAttributeItem(modelId, lineId),
+  set: async (newValue) => {
+    if (lineId === undefined) {
+      return;
+    }
+    await dataStyleStore.setModelLinesVertexAttributeItem(modelId, [lineId], newValue);
+    hybridViewerStore.remoteRender();
+  },
+});
+
+const vertexAttributeRange = computed<[number, number] | undefined>({
+  get: () => dataStyleStore.modelLinesVertexAttributeRange(modelId, lineId),
+  set: async (newValue) => {
+    const [minimum, maximum] = newValue;
+    if (lineId === undefined || minimum === undefined || maximum === undefined) {
+      return;
+    }
+    await dataStyleStore.setModelLinesVertexAttributeRange(modelId, [lineId], minimum, maximum);
+    hybridViewerStore.remoteRender();
+  },
+});
+
+const vertexAttributeColorMap = computed<ColorMap | undefined>({
+  get: () => dataStyleStore.modelLinesVertexAttributeColorMap(modelId, lineId),
+  set: async (newValue) => {
+    if (lineId === undefined) {
+      return;
+    }
+    await dataStyleStore.setModelLinesVertexAttributeColorMap(modelId, [lineId], newValue);
+    hybridViewerStore.remoteRender();
+  },
+});
+
+const vertexAttributeNoDataColor = computed<RGBAColor>({
+  get: () => dataStyleStore.modelLinesVertexAttributeNoDataColor(modelId, lineId),
+  set: async (newValue) => {
+    if (lineId === undefined) {
+      return;
+    }
+    await dataStyleStore.setModelLinesVertexAttributeNoDataColor(modelId, [lineId], newValue);
+    hybridViewerStore.remoteRender();
+  },
+});
+
+const edgeAttributeName = computed<string | undefined>({
+  get: () => dataStyleStore.modelLinesEdgeAttributeName(modelId, lineId),
+  set: async (newValue) => {
+    if (lineId === undefined || newValue === undefined) {
+      return;
+    }
+    await dataStyleStore.setModelLinesEdgeAttributeName(modelId, [lineId], newValue);
+    hybridViewerStore.remoteRender();
+  },
+});
+
+const edgeAttributeTimeStep = computed<number | undefined>({
+  get: () => dataStyleStore.modelLinesEdgeAttributeTimeStep(modelId, lineId),
+  set: async (newValue) => {
+    if (lineId === undefined || newValue === undefined) {
+      return;
+    }
+    await dataStyleStore.setModelLinesEdgeAttributeTimeStep(modelId, [lineId], newValue);
+    hybridViewerStore.remoteRender();
+  },
+});
+
+const edgeAttributeItem = computed<string | undefined>({
+  get: () => dataStyleStore.modelLinesEdgeAttributeItem(modelId, lineId),
+  set: async (newValue) => {
+    if (lineId === undefined) {
+      return;
+    }
+    await dataStyleStore.setModelLinesEdgeAttributeItem(modelId, [lineId], newValue);
+    hybridViewerStore.remoteRender();
+  },
+});
+
+const edgeAttributeRange = computed<[number, number] | undefined>({
+  get: () => dataStyleStore.modelLinesEdgeAttributeRange(modelId, lineId),
+  set: async (newValue) => {
+    const [minimum, maximum] = newValue;
+    if (lineId === undefined || minimum === undefined || maximum === undefined) {
+      return;
+    }
+    await dataStyleStore.setModelLinesEdgeAttributeRange(modelId, [lineId], minimum, maximum);
+    hybridViewerStore.remoteRender();
+  },
+});
+
+const edgeAttributeColorMap = computed<Map<string, RGBAColor> | undefined>({
+  get: () => dataStyleStore.modelLinesEdgeAttributeColorMap(modelId, lineId),
+  set: async (newValue) => {
+    if (lineId === undefined) {
+      return;
+    }
+    await dataStyleStore.setModelLinesEdgeAttributeColorMap(modelId, [lineId], newValue);
+    hybridViewerStore.remoteRender();
+  },
+});
+
+const edgeAttributeNoDataColor = computed<RGBAColor>({
+  get: () => dataStyleStore.modelLinesEdgeAttributeNoDataColor(modelId, lineId),
+  set: async (newValue) => {
+    if (lineId === undefined) {
+      return;
+    }
+    await dataStyleStore.setModelLinesEdgeAttributeNoDataColor(modelId, [lineId], newValue);
+    hybridViewerStore.remoteRender();
+  },
+});
+
+const { capabilities, schemas: attributeSchemas } = MODEL_LINE_COLORING;
+</script>
+
+<template>
+  <OptionsSection title="Component Options" class="mt-4" data-testid="modelComponentOptions">
+    <VisibilitySwitch v-model="lineVisibility" />
+    <ViewerOptionsColoringTypeSelector
+      :id="modelId"
+      :componentIds="lineComponentIds"
+      v-model:coloring_style_key="lineActiveColoring"
+      v-model:color="lineColor"
+      v-model:vertex_attribute_name="vertexAttributeName"
+      v-model:vertex_attribute_item="vertexAttributeItem"
+      v-model:vertex_attribute_range="vertexAttributeRange"
+      v-model:vertex_attribute_color_map="vertexAttributeColorMap"
+      v-model:vertex_attribute_no_data_color="vertexAttributeNoDataColor"
+      v-model:vertex_attribute_time_step="vertexAttributeTimeStep"
+      v-model:edge_attribute_name="edgeAttributeName"
+      v-model:edge_attribute_item="edgeAttributeItem"
+      v-model:edge_attribute_range="edgeAttributeRange"
+      v-model:edge_attribute_color_map="edgeAttributeColorMap"
+      v-model:edge_attribute_no_data_color="edgeAttributeNoDataColor"
+      v-model:edge_attribute_time_step="edgeAttributeTimeStep"
+      :capabilities="capabilities"
+      :schemas="attributeSchemas"
+      :allowRandom="true"
+    />
+  </OptionsSection>
+</template>
diff --git a/app/components/Viewer/Generic/Model/LinesOptions.vue b/app/components/Viewer/Generic/Model/LinesOptions.vue
index 02cb66a08..da662d678 100644
--- a/app/components/Viewer/Generic/Model/LinesOptions.vue
+++ b/app/components/Viewer/Generic/Model/LinesOptions.vue
@@ -1,12 +1,7 @@
 <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";
-import VisibilitySwitch from "@ogw_front/components/Viewer/Options/VisibilitySwitch.vue";
-import back_schemas from "@geode/opengeodeweb-back/opengeodeweb_back_typed_schemas.js";
-import { useDataStyleStore } from "@ogw_front/stores/data_style";
-import { useHybridViewerStore } from "@ogw_front/stores/hybrid_viewer";
+import ViewerGenericModelLineComponentOptions from "@ogw_front/components/Viewer/Generic/Model/LineComponentOptions.vue";
+import ViewerGenericModelLinesTypeOptions from "@ogw_front/components/Viewer/Generic/Model/LinesTypeOptions.vue";
 
 interface Props {
   modelId: string;
@@ -21,428 +16,13 @@ const {
   targetLineIds,
   collections = undefined,
 } = defineProps<Props>();
-
-const dataStyleStore = useDataStyleStore();
-const hybridViewerStore = useHybridViewerStore();
-
-const referenceLineId = computed<string | undefined>(() =>
-  collections ? targetLineIds[0] : undefined,
-);
-
-const lineComponentIds = computed<string[]>(() => (lineId === undefined ? [] : [lineId]));
-
-// Visibility
-const linesVisibility = computed<boolean>({
-  get: () =>
-    collections
-      ? targetLineIds.every((id) => dataStyleStore.modelLineVisibility(modelId, id))
-      : dataStyleStore.modelComponentTypeVisibility(modelId, "Line"),
-  set: async (newValue) => {
-    await dataStyleStore.setModelLinesVisibility(modelId, targetLineIds, newValue);
-    hybridViewerStore.remoteRender();
-  },
-});
-
-const lineVisibility = computed<boolean | undefined>({
-  get: () => dataStyleStore.modelLineVisibility(modelId, lineId) as boolean | undefined,
-  set: async (newValue) => {
-    if (newValue === undefined || lineId === undefined) {
-      return;
-    }
-    await dataStyleStore.setModelLinesVisibility(modelId, [lineId], newValue);
-    hybridViewerStore.remoteRender();
-  },
-});
-
-// Color
-const linesColor = computed<RGBAColor | undefined>({
-  get: () => dataStyleStore.modelLineColor(modelId, referenceLineId.value) as RGBAColor | undefined,
-  set: async (color) => {
-    await dataStyleStore.setModelLinesColor(modelId, targetLineIds, color);
-    hybridViewerStore.remoteRender();
-  },
-});
-
-const lineColor = computed<RGBAColor | undefined>({
-  get: () => dataStyleStore.modelLineColor(modelId, lineId) as RGBAColor | undefined,
-  set: async (color) => {
-    if (lineId === undefined) {
-      return;
-    }
-    await dataStyleStore.setModelLinesColor(modelId, [lineId], color);
-    hybridViewerStore.remoteRender();
-  },
-});
-
-const linesActiveColoring = computed<string | undefined>({
-  get: () =>
-    dataStyleStore.modelLineActiveColoring(modelId, referenceLineId.value) as string | undefined,
-  set: async (coloringType) => {
-    if (typeof coloringType !== "string") {
-      return;
-    }
-    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();
-  },
-});
-
-const lineActiveColoring = computed<string | undefined>({
-  get: () => dataStyleStore.modelLineActiveColoring(modelId, lineId) as string | undefined,
-  set: async (coloringType) => {
-    if (lineId === undefined || typeof coloringType !== "string") {
-      return;
-    }
-    await dataStyleStore.setModelLinesActiveColoring(modelId, [lineId], coloringType);
-    hybridViewerStore.remoteRender();
-  },
-});
-
-// Group Attributes
-const linesVertexAttributeName = computed<string | undefined>({
-  get: () => dataStyleStore.modelLinesVertexAttributeName(modelId, referenceLineId.value),
-  set: async (newValue) => {
-    if (newValue === undefined) {
-      return;
-    }
-    await dataStyleStore.setModelLinesVertexAttributeName(modelId, targetLineIds, newValue);
-    hybridViewerStore.remoteRender();
-  },
-});
-
-const linesVertexAttributeTimeStep = computed<number | undefined>({
-  get: () => dataStyleStore.modelLinesVertexAttributeTimeStep(modelId, referenceLineId.value),
-  set: async (newValue) => {
-    if (newValue === undefined) {
-      return;
-    }
-    await dataStyleStore.setModelLinesVertexAttributeTimeStep(modelId, targetLineIds, newValue);
-    hybridViewerStore.remoteRender();
-  },
-});
-
-const linesVertexAttributeItem = computed<string | undefined>({
-  get: () => dataStyleStore.modelLinesVertexAttributeItem(modelId, referenceLineId.value),
-  set: async (newValue) => {
-    await dataStyleStore.setModelLinesVertexAttributeItem(modelId, targetLineIds, newValue);
-    hybridViewerStore.remoteRender();
-  },
-});
-
-const linesVertexAttributeRange = computed<[number, number] | undefined>({
-  get: () => dataStyleStore.modelLinesVertexAttributeRange(modelId, referenceLineId.value),
-  set: async (newValue) => {
-    const [minimum, maximum] = newValue;
-    if (minimum === undefined || maximum === undefined) {
-      return;
-    }
-    await dataStyleStore.setModelLinesVertexAttributeRange(
-      modelId,
-      targetLineIds,
-      minimum,
-      maximum,
-    );
-    hybridViewerStore.remoteRender();
-  },
-});
-
-const linesVertexAttributeColorMap = computed<RGBAColorMap | undefined>({
-  get: () => dataStyleStore.modelLinesVertexAttributeColorMap(modelId, referenceLineId.value),
-  set: async (newValue) => {
-    await dataStyleStore.setModelLinesVertexAttributeColorMap(modelId, targetLineIds, newValue);
-    hybridViewerStore.remoteRender();
-  },
-});
-
-const linesVertexAttributeNoDataColor = computed<RGBAColor>({
-  get: () => dataStyleStore.modelLinesVertexAttributeNoDataColor(modelId, referenceLineId.value),
-  set: async (newValue) => {
-    await dataStyleStore.setModelLinesVertexAttributeNoDataColor(modelId, targetLineIds, newValue);
-    hybridViewerStore.remoteRender();
-  },
-});
-
-const linesEdgeAttributeName = computed<string | undefined>({
-  get: () => dataStyleStore.modelLinesEdgeAttributeName(modelId, referenceLineId.value),
-  set: async (newValue) => {
-    if (newValue === undefined) {
-      return;
-    }
-    await dataStyleStore.setModelLinesEdgeAttributeName(modelId, targetLineIds, newValue);
-    hybridViewerStore.remoteRender();
-  },
-});
-
-const linesEdgeAttributeTimeStep = computed<number | undefined>({
-  get: () => dataStyleStore.modelLinesEdgeAttributeTimeStep(modelId, referenceLineId.value),
-  set: async (newValue) => {
-    if (newValue === undefined) {
-      return;
-    }
-    await dataStyleStore.setModelLinesEdgeAttributeTimeStep(modelId, targetLineIds, newValue);
-    hybridViewerStore.remoteRender();
-  },
-});
-
-const linesEdgeAttributeItem = computed<string | undefined>({
-  get: () => dataStyleStore.modelLinesEdgeAttributeItem(modelId, referenceLineId.value),
-  set: async (newValue) => {
-    await dataStyleStore.setModelLinesEdgeAttributeItem(modelId, targetLineIds, newValue);
-    hybridViewerStore.remoteRender();
-  },
-});
-
-const linesEdgeAttributeRange = computed<[number, number] | undefined>({
-  get: () => dataStyleStore.modelLinesEdgeAttributeRange(modelId, referenceLineId.value),
-  set: async (newValue) => {
-    const [minimum, maximum] = newValue;
-    if (minimum === undefined || maximum === undefined) {
-      return;
-    }
-    await dataStyleStore.setModelLinesEdgeAttributeRange(modelId, targetLineIds, minimum, maximum);
-    hybridViewerStore.remoteRender();
-  },
-});
-
-const linesEdgeAttributeColorMap = computed<Map<string, RGBAColor> | undefined>({
-  get: () => dataStyleStore.modelLinesEdgeAttributeColorMap(modelId, referenceLineId.value),
-  set: async (newValue) => {
-    await dataStyleStore.setModelLinesEdgeAttributeColorMap(modelId, targetLineIds, newValue);
-    hybridViewerStore.remoteRender();
-  },
-});
-
-const linesEdgeAttributeNoDataColor = computed<RGBAColor>({
-  get: () => dataStyleStore.modelLinesEdgeAttributeNoDataColor(modelId, referenceLineId.value),
-  set: async (newValue) => {
-    await dataStyleStore.setModelLinesEdgeAttributeNoDataColor(modelId, targetLineIds, newValue);
-    hybridViewerStore.remoteRender();
-  },
-});
-
-// Individual Attributes
-const vertexAttributeName = computed<string | undefined>({
-  get: () => dataStyleStore.modelLinesVertexAttributeName(modelId, lineId),
-  set: async (newValue) => {
-    if (lineId === undefined || newValue === undefined) {
-      return;
-    }
-    await dataStyleStore.setModelLinesVertexAttributeName(modelId, [lineId], newValue);
-    hybridViewerStore.remoteRender();
-  },
-});
-
-const vertexAttributeTimeStep = computed<number | undefined>({
-  get: () => dataStyleStore.modelLinesVertexAttributeTimeStep(modelId, lineId),
-  set: async (newValue) => {
-    if (lineId === undefined || newValue === undefined) {
-      return;
-    }
-    await dataStyleStore.setModelLinesVertexAttributeTimeStep(modelId, [lineId], newValue);
-    hybridViewerStore.remoteRender();
-  },
-});
-
-const vertexAttributeItem = computed<string | undefined>({
-  get: () => dataStyleStore.modelLinesVertexAttributeItem(modelId, lineId),
-  set: async (newValue) => {
-    if (lineId === undefined) {
-      return;
-    }
-    await dataStyleStore.setModelLinesVertexAttributeItem(modelId, [lineId], newValue);
-    hybridViewerStore.remoteRender();
-  },
-});
-
-const vertexAttributeRange = computed<[number, number] | undefined>({
-  get: () => dataStyleStore.modelLinesVertexAttributeRange(modelId, lineId),
-  set: async (newValue) => {
-    const [minimum, maximum] = newValue;
-    if (lineId === undefined || minimum === undefined || maximum === undefined) {
-      return;
-    }
-    await dataStyleStore.setModelLinesVertexAttributeRange(modelId, [lineId], minimum, maximum);
-    hybridViewerStore.remoteRender();
-  },
-});
-
-const vertexAttributeColorMap = computed<ColorMap | undefined>({
-  get: () => dataStyleStore.modelLinesVertexAttributeColorMap(modelId, lineId),
-  set: async (newValue) => {
-    if (lineId === undefined) {
-      return;
-    }
-    await dataStyleStore.setModelLinesVertexAttributeColorMap(modelId, [lineId], newValue);
-    hybridViewerStore.remoteRender();
-  },
-});
-
-const vertexAttributeNoDataColor = computed<RGBAColor>({
-  get: () => dataStyleStore.modelLinesVertexAttributeNoDataColor(modelId, lineId),
-  set: async (newValue) => {
-    if (lineId === undefined) {
-      return;
-    }
-    await dataStyleStore.setModelLinesVertexAttributeNoDataColor(modelId, [lineId], newValue);
-    hybridViewerStore.remoteRender();
-  },
-});
-
-const edgeAttributeName = computed<string | undefined>({
-  get: () => dataStyleStore.modelLinesEdgeAttributeName(modelId, lineId),
-  set: async (newValue) => {
-    if (lineId === undefined || newValue === undefined) {
-      return;
-    }
-    await dataStyleStore.setModelLinesEdgeAttributeName(modelId, [lineId], newValue);
-    hybridViewerStore.remoteRender();
-  },
-});
-
-const edgeAttributeTimeStep = computed<number | undefined>({
-  get: () => dataStyleStore.modelLinesEdgeAttributeTimeStep(modelId, lineId),
-  set: async (newValue) => {
-    if (lineId === undefined || newValue === undefined) {
-      return;
-    }
-    await dataStyleStore.setModelLinesEdgeAttributeTimeStep(modelId, [lineId], newValue);
-    hybridViewerStore.remoteRender();
-  },
-});
-
-const edgeAttributeItem = computed<string | undefined>({
-  get: () => dataStyleStore.modelLinesEdgeAttributeItem(modelId, lineId),
-  set: async (newValue) => {
-    if (lineId === undefined) {
-      return;
-    }
-    await dataStyleStore.setModelLinesEdgeAttributeItem(modelId, [lineId], newValue);
-    hybridViewerStore.remoteRender();
-  },
-});
-
-const edgeAttributeRange = computed<[number, number] | undefined>({
-  get: () => dataStyleStore.modelLinesEdgeAttributeRange(modelId, lineId),
-  set: async (newValue) => {
-    const [minimum, maximum] = newValue;
-    if (lineId === undefined || minimum === undefined || maximum === undefined) {
-      return;
-    }
-    await dataStyleStore.setModelLinesEdgeAttributeRange(modelId, [lineId], minimum, maximum);
-    hybridViewerStore.remoteRender();
-  },
-});
-
-const edgeAttributeColorMap = computed<Map<string, RGBAColor> | undefined>({
-  get: () => dataStyleStore.modelLinesEdgeAttributeColorMap(modelId, lineId),
-  set: async (newValue) => {
-    if (lineId === undefined) {
-      return;
-    }
-    await dataStyleStore.setModelLinesEdgeAttributeColorMap(modelId, [lineId], newValue);
-    hybridViewerStore.remoteRender();
-  },
-});
-
-const edgeAttributeNoDataColor = computed<RGBAColor>({
-  get: () => dataStyleStore.modelLinesEdgeAttributeNoDataColor(modelId, lineId),
-  set: async (newValue) => {
-    if (lineId === undefined) {
-      return;
-    }
-    await dataStyleStore.setModelLinesEdgeAttributeNoDataColor(modelId, [lineId], newValue);
-    hybridViewerStore.remoteRender();
-  },
-});
-
-const capabilities = {
-  color: { available: true },
-  textures: { available: false },
-  vertex: { available: true },
-  edge: { available: true },
-  cell: { available: false },
-  polygon: { available: false },
-  polyhedron: { available: false },
-};
-
-const backSchemas = back_schemas.opengeodeweb_back;
-const attributeSchemas = {
-  vertex: {
-    names: backSchemas.model_component_vertex_attribute_names,
-    range: backSchemas.model_component_vertex_attribute_range,
-  },
-  edge: {
-    names: backSchemas.model_component_edge_attribute_names,
-    range: backSchemas.model_component_edge_attribute_range,
-  },
-};
 </script>
 
 <template>
-  <OptionsSection title="Lines Options" class="mt-4" data-testid="modelComponentTypeOptions">
-    <VisibilitySwitch data-testid="modelLinesVisibilitySwitch" v-model="linesVisibility" />
-    <ViewerOptionsColoringTypeSelector
-      :id="modelId"
-      :componentIds="targetLineIds"
-      v-model:coloring_style_key="linesActiveColoring"
-      v-model:color="linesColor"
-      v-model:vertex_attribute_name="linesVertexAttributeName"
-      v-model:vertex_attribute_item="linesVertexAttributeItem"
-      v-model:vertex_attribute_range="linesVertexAttributeRange"
-      v-model:vertex_attribute_color_map="linesVertexAttributeColorMap"
-      v-model:vertex_attribute_no_data_color="linesVertexAttributeNoDataColor"
-      v-model:vertex_attribute_time_step="linesVertexAttributeTimeStep"
-      v-model:edge_attribute_name="linesEdgeAttributeName"
-      v-model:edge_attribute_item="linesEdgeAttributeItem"
-      v-model:edge_attribute_range="linesEdgeAttributeRange"
-      v-model:edge_attribute_color_map="linesEdgeAttributeColorMap"
-      v-model:edge_attribute_no_data_color="linesEdgeAttributeNoDataColor"
-      v-model:edge_attribute_time_step="linesEdgeAttributeTimeStep"
-      :capabilities="capabilities"
-      :schemas="attributeSchemas"
-      :allowRandom="true"
-    />
-  </OptionsSection>
-
-  <OptionsSection
-    v-if="lineId"
-    title="Component Options"
-    class="mt-4"
-    data-testid="modelComponentOptions"
-  >
-    <VisibilitySwitch v-model="lineVisibility" />
-    <ViewerOptionsColoringTypeSelector
-      :id="modelId"
-      :componentIds="lineComponentIds"
-      v-model:coloring_style_key="lineActiveColoring"
-      v-model:color="lineColor"
-      v-model:vertex_attribute_name="vertexAttributeName"
-      v-model:vertex_attribute_item="vertexAttributeItem"
-      v-model:vertex_attribute_range="vertexAttributeRange"
-      v-model:vertex_attribute_color_map="vertexAttributeColorMap"
-      v-model:vertex_attribute_no_data_color="vertexAttributeNoDataColor"
-      v-model:vertex_attribute_time_step="vertexAttributeTimeStep"
-      v-model:edge_attribute_name="edgeAttributeName"
-      v-model:edge_attribute_item="edgeAttributeItem"
-      v-model:edge_attribute_range="edgeAttributeRange"
-      v-model:edge_attribute_color_map="edgeAttributeColorMap"
-      v-model:edge_attribute_no_data_color="edgeAttributeNoDataColor"
-      v-model:edge_attribute_time_step="edgeAttributeTimeStep"
-      :capabilities="capabilities"
-      :schemas="attributeSchemas"
-      :allowRandom="true"
-    />
-  </OptionsSection>
+  <ViewerGenericModelLinesTypeOptions
+    :modelId="modelId"
+    :targetLineIds="targetLineIds"
+    :collections="collections"
+  />
+  <ViewerGenericModelLineComponentOptions v-if="lineId" :modelId="modelId" :lineId="lineId" />
 </template>
diff --git a/app/components/Viewer/Generic/Model/LinesTypeOptions.vue b/app/components/Viewer/Generic/Model/LinesTypeOptions.vue
new file mode 100644
index 000000000..d3dc33eff
--- /dev/null
+++ b/app/components/Viewer/Generic/Model/LinesTypeOptions.vue
@@ -0,0 +1,222 @@
+<script setup lang="ts">
+import type { CollectionComponent } from "@ogw_front/stores/data_helpers/collections";
+import { MODEL_LINE_COLORING } from "@ogw_front/utils/model_component_coloring";
+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";
+import VisibilitySwitch from "@ogw_front/components/Viewer/Options/VisibilitySwitch.vue";
+import { useDataStyleStore } from "@ogw_front/stores/data_style";
+import { useHybridViewerStore } from "@ogw_front/stores/hybrid_viewer";
+
+interface Props {
+  modelId: string;
+  targetLineIds: string[];
+  collections?: CollectionComponent[];
+}
+
+const { modelId, 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: () =>
+    collections
+      ? targetLineIds.every((id) => dataStyleStore.modelLineVisibility(modelId, id))
+      : dataStyleStore.modelComponentTypeVisibility(modelId, "Line"),
+  set: async (newValue) => {
+    await dataStyleStore.setModelLinesVisibility(modelId, targetLineIds, newValue);
+    hybridViewerStore.remoteRender();
+  },
+});
+
+// Color
+const linesColor = computed<RGBAColor | undefined>({
+  get: () => dataStyleStore.modelLineColor(modelId, referenceLineId.value) as RGBAColor | undefined,
+  set: async (color) => {
+    await dataStyleStore.setModelLinesColor(modelId, targetLineIds, color);
+    hybridViewerStore.remoteRender();
+  },
+});
+
+const linesActiveColoring = computed<string | undefined>({
+  get: () =>
+    dataStyleStore.modelLineActiveColoring(modelId, referenceLineId.value) as string | undefined,
+  set: async (coloringType) => {
+    if (typeof coloringType !== "string") {
+      return;
+    }
+    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();
+  },
+});
+
+// Group Attributes
+const linesVertexAttributeName = computed<string | undefined>({
+  get: () => dataStyleStore.modelLinesVertexAttributeName(modelId, referenceLineId.value),
+  set: async (newValue) => {
+    if (newValue === undefined) {
+      return;
+    }
+    await dataStyleStore.setModelLinesVertexAttributeName(modelId, targetLineIds, newValue);
+    hybridViewerStore.remoteRender();
+  },
+});
+
+const linesVertexAttributeTimeStep = computed<number | undefined>({
+  get: () => dataStyleStore.modelLinesVertexAttributeTimeStep(modelId, referenceLineId.value),
+  set: async (newValue) => {
+    if (newValue === undefined) {
+      return;
+    }
+    await dataStyleStore.setModelLinesVertexAttributeTimeStep(modelId, targetLineIds, newValue);
+    hybridViewerStore.remoteRender();
+  },
+});
+
+const linesVertexAttributeItem = computed<string | undefined>({
+  get: () => dataStyleStore.modelLinesVertexAttributeItem(modelId, referenceLineId.value),
+  set: async (newValue) => {
+    await dataStyleStore.setModelLinesVertexAttributeItem(modelId, targetLineIds, newValue);
+    hybridViewerStore.remoteRender();
+  },
+});
+
+const linesVertexAttributeRange = computed<[number, number] | undefined>({
+  get: () => dataStyleStore.modelLinesVertexAttributeRange(modelId, referenceLineId.value),
+  set: async (newValue) => {
+    const [minimum, maximum] = newValue;
+    if (minimum === undefined || maximum === undefined) {
+      return;
+    }
+    await dataStyleStore.setModelLinesVertexAttributeRange(
+      modelId,
+      targetLineIds,
+      minimum,
+      maximum,
+    );
+    hybridViewerStore.remoteRender();
+  },
+});
+
+const linesVertexAttributeColorMap = computed<RGBAColorMap | undefined>({
+  get: () => dataStyleStore.modelLinesVertexAttributeColorMap(modelId, referenceLineId.value),
+  set: async (newValue) => {
+    await dataStyleStore.setModelLinesVertexAttributeColorMap(modelId, targetLineIds, newValue);
+    hybridViewerStore.remoteRender();
+  },
+});
+
+const linesVertexAttributeNoDataColor = computed<RGBAColor>({
+  get: () => dataStyleStore.modelLinesVertexAttributeNoDataColor(modelId, referenceLineId.value),
+  set: async (newValue) => {
+    await dataStyleStore.setModelLinesVertexAttributeNoDataColor(modelId, targetLineIds, newValue);
+    hybridViewerStore.remoteRender();
+  },
+});
+
+const linesEdgeAttributeName = computed<string | undefined>({
+  get: () => dataStyleStore.modelLinesEdgeAttributeName(modelId, referenceLineId.value),
+  set: async (newValue) => {
+    if (newValue === undefined) {
+      return;
+    }
+    await dataStyleStore.setModelLinesEdgeAttributeName(modelId, targetLineIds, newValue);
+    hybridViewerStore.remoteRender();
+  },
+});
+
+const linesEdgeAttributeTimeStep = computed<number | undefined>({
+  get: () => dataStyleStore.modelLinesEdgeAttributeTimeStep(modelId, referenceLineId.value),
+  set: async (newValue) => {
+    if (newValue === undefined) {
+      return;
+    }
+    await dataStyleStore.setModelLinesEdgeAttributeTimeStep(modelId, targetLineIds, newValue);
+    hybridViewerStore.remoteRender();
+  },
+});
+
+const linesEdgeAttributeItem = computed<string | undefined>({
+  get: () => dataStyleStore.modelLinesEdgeAttributeItem(modelId, referenceLineId.value),
+  set: async (newValue) => {
+    await dataStyleStore.setModelLinesEdgeAttributeItem(modelId, targetLineIds, newValue);
+    hybridViewerStore.remoteRender();
+  },
+});
+
+const linesEdgeAttributeRange = computed<[number, number] | undefined>({
+  get: () => dataStyleStore.modelLinesEdgeAttributeRange(modelId, referenceLineId.value),
+  set: async (newValue) => {
+    const [minimum, maximum] = newValue;
+    if (minimum === undefined || maximum === undefined) {
+      return;
+    }
+    await dataStyleStore.setModelLinesEdgeAttributeRange(modelId, targetLineIds, minimum, maximum);
+    hybridViewerStore.remoteRender();
+  },
+});
+
+const linesEdgeAttributeColorMap = computed<Map<string, RGBAColor> | undefined>({
+  get: () => dataStyleStore.modelLinesEdgeAttributeColorMap(modelId, referenceLineId.value),
+  set: async (newValue) => {
+    await dataStyleStore.setModelLinesEdgeAttributeColorMap(modelId, targetLineIds, newValue);
+    hybridViewerStore.remoteRender();
+  },
+});
+
+const linesEdgeAttributeNoDataColor = computed<RGBAColor>({
+  get: () => dataStyleStore.modelLinesEdgeAttributeNoDataColor(modelId, referenceLineId.value),
+  set: async (newValue) => {
+    await dataStyleStore.setModelLinesEdgeAttributeNoDataColor(modelId, targetLineIds, newValue);
+    hybridViewerStore.remoteRender();
+  },
+});
+
+const { capabilities, schemas: attributeSchemas } = MODEL_LINE_COLORING;
+</script>
+
+<template>
+  <OptionsSection title="Lines Options" class="mt-4" data-testid="modelComponentTypeOptions">
+    <VisibilitySwitch data-testid="modelLinesVisibilitySwitch" v-model="linesVisibility" />
+    <ViewerOptionsColoringTypeSelector
+      :id="modelId"
+      :componentIds="targetLineIds"
+      v-model:coloring_style_key="linesActiveColoring"
+      v-model:color="linesColor"
+      v-model:vertex_attribute_name="linesVertexAttributeName"
+      v-model:vertex_attribute_item="linesVertexAttributeItem"
+      v-model:vertex_attribute_range="linesVertexAttributeRange"
+      v-model:vertex_attribute_color_map="linesVertexAttributeColorMap"
+      v-model:vertex_attribute_no_data_color="linesVertexAttributeNoDataColor"
+      v-model:vertex_attribute_time_step="linesVertexAttributeTimeStep"
+      v-model:edge_attribute_name="linesEdgeAttributeName"
+      v-model:edge_attribute_item="linesEdgeAttributeItem"
+      v-model:edge_attribute_range="linesEdgeAttributeRange"
+      v-model:edge_attribute_color_map="linesEdgeAttributeColorMap"
+      v-model:edge_attribute_no_data_color="linesEdgeAttributeNoDataColor"
+      v-model:edge_attribute_time_step="linesEdgeAttributeTimeStep"
+      :capabilities="capabilities"
+      :schemas="attributeSchemas"
+      :allowRandom="true"
+    />
+  </OptionsSection>
+</template>
diff --git a/app/components/Viewer/Options/AttributeSelector.vue b/app/components/Viewer/Options/AttributeSelector.vue
index 30325d04f..436d35e15 100644
--- a/app/components/Viewer/Options/AttributeSelector.vue
+++ b/app/components/Viewer/Options/AttributeSelector.vue
@@ -1,18 +1,21 @@
 <script setup lang="ts">
 import {
-  type AttributeRange,
-  type RangesPerData,
-  useBatchGroup,
-} from "@ogw_front/composables/batch_style";
+  type AttributeInfo,
+  attributeItemOptions,
+  attributeRangesPerTarget,
+  useAttributeRangeBounds,
+  useSeriesTimeStepCommit,
+} from "@ogw_front/composables/attribute_selector";
 import {
   type AttributeRangeInfo,
   type AttributeSchemas,
   fetchAttributeRange,
 } from "@ogw_front/utils/attribute_range";
+import { type RangesPerData, useBatchGroup } from "@ogw_front/composables/batch_style";
 import { getAttributeRange, intersectAttributes } from "@ogw_front/utils/attributes";
 import { DEFAULT_NO_DATA_COLOR } from "@ogw_front/utils/default_styles/constants";
 import ViewerOptionsAttributeColorBar from "@ogw_front/components/Viewer/Options/AttributeColorBar.vue";
-import ViewerOptionsColorPicker from "@ogw_front/components/Viewer/Options/ColorPicker.vue";
+import ViewerOptionsNoDataColorInfo from "@ogw_front/components/Viewer/Options/NoDataColorInfo.vue";
 import ViewerOptionsTimeStepSlider from "@ogw_front/components/Viewer/Options/TimeStepSlider.vue";
 import { requestForTargets } from "@ogw_front/utils/request_for_targets";
 import { useBackStore } from "@ogw_front/stores/back";
@@ -44,13 +47,6 @@ interface Emits {
 
 const emit = defineEmits<Emits>();
 
-interface AttributeInfo {
-  attribute_name: string;
-  nb_items: number;
-  time_steps?: number[];
-  [key: string]: unknown;
-}
-
 const attributes = ref<AttributeInfo[]>([]);
 let attributesPerTarget = new Map<string, AttributeInfo[]>();
 const rangesPerTarget = ref(new Map<string, AttributeRangeInfo>());
@@ -67,68 +63,20 @@ const noData = computed<boolean>(() =>
   [...rangesPerTarget.value.values()].some((range) => range.no_data),
 );
 
-let committedSeries: string | undefined = undefined;
-
-function commitSeriesTimeStep(): void {
-  if (timeSteps.value.length === 0) {
-    committedSeries = undefined;
-    return;
-  }
-  const name = currentAttribute.value?.attribute_name;
-  if (name === committedSeries) {
-    return;
-  }
-  committedSeries = name;
-  const current = attributeTimeStep.value;
-  const valid = current !== undefined && current >= 0 && current < timeSteps.value.length;
-  // A valid step is already stored and applied with the series: emitting it again re-applies the attribute
-  if (!valid) {
+const commitSeriesTimeStep = useSeriesTimeStepCommit(
+  timeSteps,
+  () => currentAttribute.value?.attribute_name,
+  attributeTimeStep,
+  () => {
     emit("update:attributeTimeStep", 0);
-  }
-}
-
-const cssNoDataColor = computed<string>(() => {
-  const { red, green, blue, alpha } = attributeNoDataColor.value ?? DEFAULT_NO_DATA_COLOR;
-  return `rgba(${red}, ${green}, ${blue}, ${alpha})`;
-});
-const rangeMin = computed<number | undefined>({
-  get: () => attributeRange.value[0],
-  set: (val: number | undefined) => {
-    if (val === undefined) {
-      return;
-    }
-    const [, currentMax] = attributeRange.value;
-    let newMin = val;
-    if (typeof currentMax === "number" && val > currentMax) {
-      newMin = currentMax;
-    }
-    attributeRange.value = [newMin, currentMax];
   },
-});
-const rangeMax = computed<number | undefined>({
-  get: () => attributeRange.value[1],
-  set: (val: number | undefined) => {
-    if (val === undefined) {
-      return;
-    }
-    const [currentMin] = attributeRange.value;
-    let newMax = val;
-    if (typeof currentMin === "number" && val < currentMin) {
-      newMax = currentMin;
-    }
-    attributeRange.value = [currentMin, newMax];
-  },
-});
+);
 
-const componentItems = computed<{ title: string; value: number }[]>(() => {
-  if (!currentAttribute.value) {
-    return [];
-  }
-  return Array.from({ length: currentAttribute.value.nb_items }, (_, index) => ({
-    title: `Item ${index + 1}`,
-    value: index,
-  }));
-});
+const { rangeMin, rangeMax } = useAttributeRangeBounds(attributeRange);
+
+const componentItems = computed<{ title: string; value: number }[]>(() =>
+  currentAttribute.value ? attributeItemOptions(currentAttribute.value.nb_items) : [],
+);
 
 function hasSelectedComponent(components: unknown): boolean {
   return Array.isArray(components) && components.length > 0;
@@ -206,13 +154,8 @@ async function initGroupAttribute(name: string, item: number): Promise<void> {
   if (attributeName.value !== name) {
     return;
   }
-  const ranges = new Map<string, AttributeRange>();
-  for (const [targetId, range] of rangesPerTarget.value) {
-    const { min, max } = getAttributeRange(range, item);
-    ranges.set(targetId, [min, max]);
-  }
   emit("update:attributeColorMap", attributeColorMap.value ?? "batlow");
-  emit("ranges_per_data", ranges);
+  emit("ranges_per_data", attributeRangesPerTarget(rangesPerTarget.value, item));
 }
 
 async function getAttributes(): Promise<void> {
@@ -300,29 +243,7 @@ watch([attributeName, attributeItem, currentAttribute], async () => {
     hide-details
   />
   <ViewerOptionsTimeStepSlider v-model="attributeTimeStep" :time-steps="timeSteps" />
-  <div
-    v-if="currentAttribute && noData"
-    class="text-caption text-high-emphasis mt-1 d-flex align-center ga-1"
-    data-testid="noDataInfo"
-  >
-    <v-icon icon="mdi-information-outline" size="14" color="info" />
-    <span>Contains unmapped elements</span>
-    <v-menu :close-on-content-click="false">
-      <template #activator="{ props }">
-        <button
-          v-bind="props"
-          type="button"
-          class="color-picker-rect-btn ml-1"
-          :style="{ backgroundColor: cssNoDataColor }"
-          v-tooltip="'Change unmapped elements color'"
-          data-testid="noDataColorBtn"
-        />
-      </template>
-      <v-card class="pa-2">
-        <ViewerOptionsColorPicker v-model="attributeNoDataColor" disabled-alpha />
-      </v-card>
-    </v-menu>
-  </div>
+  <ViewerOptionsNoDataColorInfo v-if="currentAttribute && noData" v-model="attributeNoDataColor" />
   <ViewerOptionsAttributeColorBar
     v-if="attributeName"
     v-model:minimum="rangeMin"
@@ -332,23 +253,3 @@ watch([attributeName, attributeItem, currentAttribute], async () => {
     @reset="resetRange"
   />
 </template>
-
-<style scoped>
-.color-picker-rect-btn {
-  width: 26px;
-  height: 15px;
-  border-radius: 3px;
-  border: 2px solid rgba(255, 255, 255, 0.912);
-  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
-  cursor: pointer;
-  outline: none;
-  transition:
-    border-color 0.15s ease,
-    transform 0.15s ease;
-}
-
-.color-picker-rect-btn:hover {
-  border-color: rgba(255, 255, 255, 0.9);
-  transform: scale(1.1);
-}
-</style>
diff --git a/app/components/Viewer/Options/ColoringTypeSelector.vue b/app/components/Viewer/Options/ColoringTypeSelector.vue
index ad9c2525f..55c59845c 100644
--- a/app/components/Viewer/Options/ColoringTypeSelector.vue
+++ b/app/components/Viewer/Options/ColoringTypeSelector.vue
@@ -1,11 +1,15 @@
 <script setup lang="ts">
-import type { AttributeSchemas } from "@ogw_front/utils/attribute_range";
+import {
+  COLORING_STYLES,
+  type Schemas,
+  buildColoringStyles,
+  resolveAttributeSchemas,
+} from "@ogw_front/utils/coloring_styles";
 import type { RGBAColor } from "@ogw_front/utils/default_styles/constants";
 import type { RangesPerData } from "@ogw_front/composables/batch_style";
 import ViewerOptionsAttributeSelector from "@ogw_front/components/Viewer/Options/AttributeSelector.vue";
 import ViewerOptionsColorPicker from "@ogw_front/components/Viewer/Options/ColorPicker.vue";
 import ViewerOptionsTexturesSelector from "@ogw_front/components/Viewer/Options/TexturesSelector.vue";
-import back_schemas from "@geode/opengeodeweb-back/opengeodeweb_back_typed_schemas.js";
 
 interface Texture {
   id: string;
@@ -17,14 +21,6 @@ interface CapabilityConfig {
   hasColorMap?: boolean;
 }
 
-interface Schemas {
-  vertex?: AttributeSchemas;
-  edge?: AttributeSchemas;
-  cell?: AttributeSchemas;
-  polygon?: AttributeSchemas;
-  polyhedron?: AttributeSchemas;
-}
-
 const coloring_style_key = defineModel<string>("coloring_style_key");
 
 interface Emits {
@@ -95,27 +91,13 @@ const {
   allowRandom = false,
 } = defineProps<Props>();
 
-const backSchemas = back_schemas.opengeodeweb_back;
-const vertexSchemas = schemas.vertex ?? {
-  names: backSchemas.vertex_attribute_names,
-  range: backSchemas.vertex_attribute_range,
-};
-const edgeSchemas = schemas.edge ?? {
-  names: backSchemas.edge_attribute_names,
-  range: backSchemas.edge_attribute_range,
-};
-const cellSchemas = schemas.cell ?? {
-  names: backSchemas.cell_attribute_names,
-  range: backSchemas.cell_attribute_range,
-};
-const polygonSchemas = schemas.polygon ?? {
-  names: backSchemas.polygon_attribute_names,
-  range: backSchemas.polygon_attribute_range,
-};
-const polyhedronSchemas = schemas.polyhedron ?? {
-  names: backSchemas.polyhedron_attribute_names,
-  range: backSchemas.polyhedron_attribute_range,
-};
+const {
+  vertex: vertexSchemas,
+  edge: edgeSchemas,
+  cell: cellSchemas,
+  polygon: polygonSchemas,
+  polyhedron: polyhedronSchemas,
+} = resolveAttributeSchemas(schemas);
 
 function isAvailable(key: string): boolean {
   if (capabilities[key] && capabilities[key].available === false) {
@@ -156,49 +138,29 @@ const has_polyhedra = computed<boolean>(
     hasColorMap("polyhedron"),
 );
 
-const color_dict = { name: "Constant", value: "constant" };
-const random_dict = { name: "Random", value: "random" };
-const textures_dict = { name: "Textures", value: "textures" };
-const vertex_dict = { name: "Vertex attribute", value: "vertex" };
-const edge_dict = { name: "Edge attribute", value: "edge" };
-const cell_dict = { name: "Cell attribute", value: "cell" };
-const polygon_dict = { name: "Polygon attribute", value: "polygon" };
-const polyhedron_dict = {
-  name: "Polyhedron attribute",
-  value: "polyhedron",
-};
-const coloring_styles = computed<{ labels: string[]; values: string[] }>(() => {
-  const array = [];
-  if (has_color.value) {
-    array.push(color_dict);
-    if (allowRandom) {
-      array.push(random_dict);
-    }
-  }
-  if (has_textures.value) {
-    array.push(textures_dict);
-  }
-  if (has_vertex.value) {
-    array.push(vertex_dict);
-  }
-  if (has_edge.value) {
-    array.push(edge_dict);
-  }
-  if (has_cells.value) {
-    array.push(cell_dict);
-  }
-  if (has_polygons.value) {
-    array.push(polygon_dict);
-  }
-  if (has_polyhedra.value) {
-    array.push(polyhedron_dict);
-  }
-
-  const labels = array.map((coloring) => coloring.name);
-  const values = array.map((coloring) => coloring.value);
-
-  return { labels, values };
-});
+const {
+  color: color_dict,
+  textures: textures_dict,
+  vertex: vertex_dict,
+  edge: edge_dict,
+  cell: cell_dict,
+  polygon: polygon_dict,
+  polyhedron: polyhedron_dict,
+} = COLORING_STYLES;
+const coloring_styles = computed<{ labels: string[]; values: string[] }>(() =>
+  buildColoringStyles(
+    {
+      color: has_color.value,
+      textures: has_textures.value,
+      vertex: has_vertex.value,
+      edge: has_edge.value,
+      cell: has_cells.value,
+      polygon: has_polygons.value,
+      polyhedron: has_polyhedra.value,
+    },
+    allowRandom,
+  ),
+);
 
 const coloring_style_label = ref<string>("");
 
diff --git a/app/components/Viewer/Options/NoDataColorInfo.vue b/app/components/Viewer/Options/NoDataColorInfo.vue
new file mode 100644
index 000000000..b2caacd3e
--- /dev/null
+++ b/app/components/Viewer/Options/NoDataColorInfo.vue
@@ -0,0 +1,56 @@
+<script setup lang="ts">
+import { DEFAULT_NO_DATA_COLOR } from "@ogw_front/utils/default_styles/constants";
+import ViewerOptionsColorPicker from "@ogw_front/components/Viewer/Options/ColorPicker.vue";
+
+const attributeNoDataColor = defineModel<typeof DEFAULT_NO_DATA_COLOR>();
+
+const cssNoDataColor = computed<string>(() => {
+  const { red, green, blue, alpha } = attributeNoDataColor.value ?? DEFAULT_NO_DATA_COLOR;
+  return `rgba(${red}, ${green}, ${blue}, ${alpha})`;
+});
+</script>
+
+<template>
+  <div
+    class="text-caption text-high-emphasis mt-1 d-flex align-center ga-1"
+    data-testid="noDataInfo"
+  >
+    <v-icon icon="mdi-information-outline" size="14" color="info" />
+    <span>Contains unmapped elements</span>
+    <v-menu :close-on-content-click="false">
+      <template #activator="{ props }">
+        <button
+          v-bind="props"
+          type="button"
+          class="color-picker-rect-btn ml-1"
+          :style="{ backgroundColor: cssNoDataColor }"
+          v-tooltip="'Change unmapped elements color'"
+          data-testid="noDataColorBtn"
+        />
+      </template>
+      <v-card class="pa-2">
+        <ViewerOptionsColorPicker v-model="attributeNoDataColor" disabled-alpha />
+      </v-card>
+    </v-menu>
+  </div>
+</template>
+
+<style scoped>
+.color-picker-rect-btn {
+  width: 26px;
+  height: 15px;
+  border-radius: 3px;
+  border: 2px solid rgba(255, 255, 255, 0.912);
+  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
+  cursor: pointer;
+  outline: none;
+  transition:
+    border-color 0.15s ease,
+    transform 0.15s ease;
+}
+
+.color-picker-rect-btn:hover {
+  border-color: rgba(255, 255, 255, 0.9);
+  transform: scale(1.1);
+}
+</style>
diff --git a/app/components/Viewer/Solid/SpecificPolyhedraColoring.vue b/app/components/Viewer/Solid/SpecificPolyhedraColoring.vue
new file mode 100644
index 000000000..9d6576382
--- /dev/null
+++ b/app/components/Viewer/Solid/SpecificPolyhedraColoring.vue
@@ -0,0 +1,217 @@
+<script setup lang="ts">
+import {
+  type RangesPerData,
+  applyRangesPerData,
+  useBatchStyle,
+} from "@ogw_front/composables/batch_style";
+import type { RGBAColor } from "@ogw_front/utils/default_styles/constants";
+import ViewerOptionsColoringTypeSelector from "@ogw_front/components/Viewer/Options/ColoringTypeSelector.vue";
+import { useDataStyleStore } from "@ogw_front/stores/data_style";
+import { useHybridViewerStore } from "@ogw_front/stores/hybrid_viewer";
+
+const dataStyleStore = useDataStyleStore();
+const hybridViewerStore = useHybridViewerStore();
+const { applyBatchStyle } = useBatchStyle();
+
+interface Props {
+  id: string;
+}
+
+const { id } = defineProps<Props>();
+
+const coloring_style_key = computed<string>({
+  get: () => dataStyleStore.meshPolyhedraActiveColoring(id),
+  set: async (newValue) => {
+    await applyBatchStyle(id, (targetId: string) =>
+      dataStyleStore.setMeshPolyhedraActiveColoring(targetId, newValue),
+    );
+    hybridViewerStore.remoteRender();
+  },
+});
+const color = computed<RGBAColor | undefined>({
+  get: () => dataStyleStore.meshPolyhedraColor(id) as RGBAColor | undefined,
+  set: async (newValue) => {
+    if (newValue === undefined) {
+      return;
+    }
+    await applyBatchStyle(id, (targetId: string) =>
+      dataStyleStore.setMeshPolyhedraColor(targetId, newValue),
+    );
+    hybridViewerStore.remoteRender();
+  },
+});
+const vertex_attribute_name = computed<string | undefined>({
+  get: () => dataStyleStore.meshPolyhedraVertexAttributeName(id),
+  set: async (newValue) => {
+    if (newValue === undefined) {
+      return;
+    }
+    await applyBatchStyle(id, (targetId: string) =>
+      Promise.resolve(dataStyleStore.setMeshPolyhedraVertexAttributeName(targetId, newValue)),
+    );
+    hybridViewerStore.remoteRender();
+  },
+});
+
+const vertex_attribute_time_step = computed<number | undefined>({
+  get: () => dataStyleStore.meshPolyhedraVertexAttributeTimeStep(id),
+  set: async (newValue) => {
+    if (newValue === undefined) {
+      return;
+    }
+    await applyBatchStyle(id, (targetId: string) =>
+      Promise.resolve(dataStyleStore.setMeshPolyhedraVertexAttributeTimeStep(targetId, newValue)),
+    );
+    hybridViewerStore.remoteRender();
+  },
+});
+const vertex_attribute_item = computed<string | undefined>({
+  get: () => dataStyleStore.meshPolyhedraVertexAttributeItem(id),
+  set: async (newValue) => {
+    await applyBatchStyle(id, (targetId: string) =>
+      Promise.resolve(dataStyleStore.setMeshPolyhedraVertexAttributeItem(targetId, newValue)),
+    );
+    hybridViewerStore.remoteRender();
+  },
+});
+const vertex_attribute_range = computed<[number, number] | undefined>({
+  get: () => dataStyleStore.meshPolyhedraVertexAttributeRange(id),
+  set: async (newValue) => {
+    const [minimum, maximum] = newValue;
+    if (minimum === undefined || maximum === undefined) {
+      return;
+    }
+    await applyBatchStyle(id, (targetId: string) =>
+      Promise.resolve(
+        dataStyleStore.setMeshPolyhedraVertexAttributeRange(targetId, minimum, maximum),
+      ),
+    );
+    hybridViewerStore.remoteRender();
+  },
+});
+const vertex_attribute_color_map = computed<Map<string, RGBAColor> | undefined>({
+  get: () => dataStyleStore.meshPolyhedraVertexAttributeColorMap(id),
+  set: async (newValue) => {
+    await applyBatchStyle(id, (targetId: string) =>
+      Promise.resolve(dataStyleStore.setMeshPolyhedraVertexAttributeColorMap(targetId, newValue)),
+    );
+    hybridViewerStore.remoteRender();
+  },
+});
+const vertex_attribute_no_data_color = computed<RGBAColor>({
+  get: () => dataStyleStore.meshPolyhedraVertexAttributeNoDataColor(id),
+  set: async (newValue) => {
+    await applyBatchStyle(id, (targetId: string) =>
+      dataStyleStore.setMeshPolyhedraVertexAttributeNoDataColor(targetId, newValue),
+    );
+    hybridViewerStore.remoteRender();
+  },
+});
+const polyhedron_attribute_name = computed<string | undefined>({
+  get: () => dataStyleStore.meshPolyhedraPolyhedronAttributeName(id),
+  set: async (newValue) => {
+    if (newValue === undefined) {
+      return;
+    }
+    await applyBatchStyle(id, (targetId: string) =>
+      Promise.resolve(dataStyleStore.setMeshPolyhedraPolyhedronAttributeName(targetId, newValue)),
+    );
+    hybridViewerStore.remoteRender();
+  },
+});
+
+const polyhedron_attribute_time_step = computed<number | undefined>({
+  get: () => dataStyleStore.meshPolyhedraPolyhedronAttributeTimeStep(id),
+  set: async (newValue) => {
+    if (newValue === undefined) {
+      return;
+    }
+    await applyBatchStyle(id, (targetId: string) =>
+      Promise.resolve(
+        dataStyleStore.setMeshPolyhedraPolyhedronAttributeTimeStep(targetId, newValue),
+      ),
+    );
+    hybridViewerStore.remoteRender();
+  },
+});
+const polyhedron_attribute_item = computed<string | undefined>({
+  get: () => dataStyleStore.meshPolyhedraPolyhedronAttributeItem(id),
+  set: async (newValue) => {
+    await applyBatchStyle(id, (targetId: string) =>
+      Promise.resolve(dataStyleStore.setMeshPolyhedraPolyhedronAttributeItem(targetId, newValue)),
+    );
+    hybridViewerStore.remoteRender();
+  },
+});
+const polyhedron_attribute_range = computed<[number, number] | undefined>({
+  get: () => dataStyleStore.meshPolyhedraPolyhedronAttributeRange(id),
+  set: async (newValue) => {
+    const [minimum, maximum] = newValue;
+    if (minimum === undefined || maximum === undefined) {
+      return;
+    }
+    await applyBatchStyle(id, (targetId: string) =>
+      Promise.resolve(
+        dataStyleStore.setMeshPolyhedraPolyhedronAttributeRange(targetId, minimum, maximum),
+      ),
+    );
+    hybridViewerStore.remoteRender();
+  },
+});
+const polyhedron_attribute_color_map = computed<Map<string, RGBAColor> | undefined>({
+  get: () => dataStyleStore.meshPolyhedraPolyhedronAttributeColorMap(id),
+  set: async (newValue) => {
+    await applyBatchStyle(id, (targetId: string) =>
+      Promise.resolve(
+        dataStyleStore.setMeshPolyhedraPolyhedronAttributeColorMap(targetId, newValue),
+      ),
+    );
+    hybridViewerStore.remoteRender();
+  },
+});
+const polyhedron_attribute_no_data_color = computed<RGBAColor>({
+  get: () => dataStyleStore.meshPolyhedraPolyhedronAttributeNoDataColor(id),
+  set: async (newValue) => {
+    await applyBatchStyle(id, (targetId: string) =>
+      dataStyleStore.setMeshPolyhedraPolyhedronAttributeNoDataColor(targetId, newValue),
+    );
+    hybridViewerStore.remoteRender();
+  },
+});
+
+async function setVertexAttributeRangesPerData(ranges: RangesPerData): Promise<void> {
+  await applyRangesPerData(ranges, (targetId, minimum, maximum) =>
+    dataStyleStore.setMeshPolyhedraVertexAttributeRange(targetId, minimum, maximum),
+  );
+  hybridViewerStore.remoteRender();
+}
+
+async function setPolyhedronAttributeRangesPerData(ranges: RangesPerData): Promise<void> {
+  await applyRangesPerData(ranges, (targetId, minimum, maximum) =>
+    dataStyleStore.setMeshPolyhedraPolyhedronAttributeRange(targetId, minimum, maximum),
+  );
+  hybridViewerStore.remoteRender();
+}
+</script>
+
+<template>
+  <ViewerOptionsColoringTypeSelector
+    :id="id"
+    v-model:coloring_style_key="coloring_style_key"
+    v-model:color="color"
+    v-model:vertex_attribute_name="vertex_attribute_name"
+    v-model:vertex_attribute_item="vertex_attribute_item"
+    v-model:vertex_attribute_range="vertex_attribute_range"
+    @vertex_attribute_ranges_per_data="setVertexAttributeRangesPerData"
+    v-model:vertex_attribute_color_map="vertex_attribute_color_map"
+    v-model:vertex_attribute_no_data_color="vertex_attribute_no_data_color"
+    v-model:vertex_attribute_time_step="vertex_attribute_time_step"
+    v-model:polyhedron_attribute_name="polyhedron_attribute_name"
+    v-model:polyhedron_attribute_item="polyhedron_attribute_item"
+    v-model:polyhedron_attribute_range="polyhedron_attribute_range"
+    @polyhedron_attribute_ranges_per_data="setPolyhedronAttributeRangesPerData"
+    v-model:polyhedron_attribute_color_map="polyhedron_attribute_color_map"
+    v-model:polyhedron_attribute_no_data_color="polyhedron_attribute_no_data_color"
+    v-model:polyhedron_attribute_time_step="polyhedron_attribute_time_step"
+  />
+</template>
diff --git a/app/components/Viewer/Solid/SpecificPolyhedraOptions.vue b/app/components/Viewer/Solid/SpecificPolyhedraOptions.vue
index b114db67f..bb875cc4b 100644
--- a/app/components/Viewer/Solid/SpecificPolyhedraOptions.vue
+++ b/app/components/Viewer/Solid/SpecificPolyhedraOptions.vue
@@ -1,16 +1,11 @@
 <script setup lang="ts">
-import {
-  type RangesPerData,
-  applyRangesPerData,
-  useBatchStyle,
-} from "@ogw_front/composables/batch_style";
 import ViewerContextMenuItem, {
   type ItemProps,
 } from "@ogw_front/components/Viewer/ContextMenu/ContextMenuItem.vue";
-import type { RGBAColor } from "@ogw_front/utils/default_styles/constants";
 import SolidPolyhedra from "@ogw_front/assets/viewer_svgs/solid_polyhedra.svg";
-import ViewerOptionsColoringTypeSelector from "@ogw_front/components/Viewer/Options/ColoringTypeSelector.vue";
 import ViewerOptionsVisibilitySwitch from "@ogw_front/components/Viewer/Options/VisibilitySwitch.vue";
+import ViewerSolidSpecificPolyhedraColoring from "@ogw_front/components/Viewer/Solid/SpecificPolyhedraColoring.vue";
+import { useBatchStyle } from "@ogw_front/composables/batch_style";
 import { useDataStyleStore } from "@ogw_front/stores/data_style";
 import { useHybridViewerStore } from "@ogw_front/stores/hybrid_viewer";
 
@@ -36,180 +31,8 @@ const visibility = computed<boolean>({
     hybridViewerStore.remoteRender();
   },
 });
-const coloring_style_key = computed<string>({
-  get: () => dataStyleStore.meshPolyhedraActiveColoring(id.value),
-  set: async (newValue) => {
-    await applyBatchStyle(id.value, (targetId: string) =>
-      dataStyleStore.setMeshPolyhedraActiveColoring(targetId, newValue),
-    );
-    hybridViewerStore.remoteRender();
-  },
-});
-const color = computed<RGBAColor | undefined>({
-  get: () => dataStyleStore.meshPolyhedraColor(id.value) as RGBAColor | undefined,
-  set: async (newValue) => {
-    if (newValue === undefined) {
-      return;
-    }
-    await applyBatchStyle(id.value, (targetId: string) =>
-      dataStyleStore.setMeshPolyhedraColor(targetId, newValue),
-    );
-    hybridViewerStore.remoteRender();
-  },
-});
-const vertex_attribute_name = computed<string | undefined>({
-  get: () => dataStyleStore.meshPolyhedraVertexAttributeName(id.value),
-  set: async (newValue) => {
-    if (newValue === undefined) {
-      return;
-    }
-    await applyBatchStyle(id.value, (targetId: string) =>
-      Promise.resolve(dataStyleStore.setMeshPolyhedraVertexAttributeName(targetId, newValue)),
-    );
-    hybridViewerStore.remoteRender();
-  },
-});
-
-const vertex_attribute_time_step = computed<number | undefined>({
-  get: () => dataStyleStore.meshPolyhedraVertexAttributeTimeStep(id.value),
-  set: async (newValue) => {
-    if (newValue === undefined) {
-      return;
-    }
-    await applyBatchStyle(id.value, (targetId: string) =>
-      Promise.resolve(dataStyleStore.setMeshPolyhedraVertexAttributeTimeStep(targetId, newValue)),
-    );
-    hybridViewerStore.remoteRender();
-  },
-});
-const vertex_attribute_item = computed<string | undefined>({
-  get: () => dataStyleStore.meshPolyhedraVertexAttributeItem(id.value),
-  set: async (newValue) => {
-    await applyBatchStyle(id.value, (targetId: string) =>
-      Promise.resolve(dataStyleStore.setMeshPolyhedraVertexAttributeItem(targetId, newValue)),
-    );
-    hybridViewerStore.remoteRender();
-  },
-});
-const vertex_attribute_range = computed<[number, number] | undefined>({
-  get: () => dataStyleStore.meshPolyhedraVertexAttributeRange(id.value),
-  set: async (newValue) => {
-    const [minimum, maximum] = newValue;
-    if (minimum === undefined || maximum === undefined) {
-      return;
-    }
-    await applyBatchStyle(id.value, (targetId: string) =>
-      Promise.resolve(
-        dataStyleStore.setMeshPolyhedraVertexAttributeRange(targetId, minimum, maximum),
-      ),
-    );
-    hybridViewerStore.remoteRender();
-  },
-});
-const vertex_attribute_color_map = computed<Map<string, RGBAColor> | undefined>({
-  get: () => dataStyleStore.meshPolyhedraVertexAttributeColorMap(id.value),
-  set: async (newValue) => {
-    await applyBatchStyle(id.value, (targetId: string) =>
-      Promise.resolve(dataStyleStore.setMeshPolyhedraVertexAttributeColorMap(targetId, newValue)),
-    );
-    hybridViewerStore.remoteRender();
-  },
-});
-const vertex_attribute_no_data_color = computed<RGBAColor>({
-  get: () => dataStyleStore.meshPolyhedraVertexAttributeNoDataColor(id.value),
-  set: async (newValue) => {
-    await applyBatchStyle(id.value, (targetId: string) =>
-      dataStyleStore.setMeshPolyhedraVertexAttributeNoDataColor(targetId, newValue),
-    );
-    hybridViewerStore.remoteRender();
-  },
-});
-const polyhedron_attribute_name = computed<string | undefined>({
-  get: () => dataStyleStore.meshPolyhedraPolyhedronAttributeName(id.value),
-  set: async (newValue) => {
-    if (newValue === undefined) {
-      return;
-    }
-    await applyBatchStyle(id.value, (targetId: string) =>
-      Promise.resolve(dataStyleStore.setMeshPolyhedraPolyhedronAttributeName(targetId, newValue)),
-    );
-    hybridViewerStore.remoteRender();
-  },
-});
-
-const polyhedron_attribute_time_step = computed<number | undefined>({
-  get: () => dataStyleStore.meshPolyhedraPolyhedronAttributeTimeStep(id.value),
-  set: async (newValue) => {
-    if (newValue === undefined) {
-      return;
-    }
-    await applyBatchStyle(id.value, (targetId: string) =>
-      Promise.resolve(
-        dataStyleStore.setMeshPolyhedraPolyhedronAttributeTimeStep(targetId, newValue),
-      ),
-    );
-    hybridViewerStore.remoteRender();
-  },
-});
-const polyhedron_attribute_item = computed<string | undefined>({
-  get: () => dataStyleStore.meshPolyhedraPolyhedronAttributeItem(id.value),
-  set: async (newValue) => {
-    await applyBatchStyle(id.value, (targetId: string) =>
-      Promise.resolve(dataStyleStore.setMeshPolyhedraPolyhedronAttributeItem(targetId, newValue)),
-    );
-    hybridViewerStore.remoteRender();
-  },
-});
-const polyhedron_attribute_range = computed<[number, number] | undefined>({
-  get: () => dataStyleStore.meshPolyhedraPolyhedronAttributeRange(id.value),
-  set: async (newValue) => {
-    const [minimum, maximum] = newValue;
-    if (minimum === undefined || maximum === undefined) {
-      return;
-    }
-    await applyBatchStyle(id.value, (targetId: string) =>
-      Promise.resolve(
-        dataStyleStore.setMeshPolyhedraPolyhedronAttributeRange(targetId, minimum, maximum),
-      ),
-    );
-    hybridViewerStore.remoteRender();
-  },
-});
-const polyhedron_attribute_color_map = computed<Map<string, RGBAColor> | undefined>({
-  get: () => dataStyleStore.meshPolyhedraPolyhedronAttributeColorMap(id.value),
-  set: async (newValue) => {
-    await applyBatchStyle(id.value, (targetId: string) =>
-      Promise.resolve(
-        dataStyleStore.setMeshPolyhedraPolyhedronAttributeColorMap(targetId, newValue),
-      ),
-    );
-    hybridViewerStore.remoteRender();
-  },
-});
-const polyhedron_attribute_no_data_color = computed<RGBAColor>({
-  get: () => dataStyleStore.meshPolyhedraPolyhedronAttributeNoDataColor(id.value),
-  set: async (newValue) => {
-    await applyBatchStyle(id.value, (targetId: string) =>
-      dataStyleStore.setMeshPolyhedraPolyhedronAttributeNoDataColor(targetId, newValue),
-    );
-    hybridViewerStore.remoteRender();
-  },
-});
-
-async function setVertexAttributeRangesPerData(ranges: RangesPerData): Promise<void> {
-  await applyRangesPerData(ranges, (targetId, minimum, maximum) =>
-    dataStyleStore.setMeshPolyhedraVertexAttributeRange(targetId, minimum, maximum),
-  );
-  hybridViewerStore.remoteRender();
-}
-
-async function setPolyhedronAttributeRangesPerData(ranges: RangesPerData): Promise<void> {
-  await applyRangesPerData(ranges, (targetId, minimum, maximum) =>
-    dataStyleStore.setMeshPolyhedraPolyhedronAttributeRange(targetId, minimum, maximum),
-  );
-  hybridViewerStore.remoteRender();
-}
 </script>
+
 <template>
   <ViewerContextMenuItem
     data-testid="meshPolyhedraMenu"
@@ -224,25 +47,7 @@ async function setPolyhedronAttributeRangesPerData(ranges: RangesPerData): Promi
         v-model="visibility"
       />
       <template v-if="visibility">
-        <ViewerOptionsColoringTypeSelector
-          :id="id"
-          v-model:coloring_style_key="coloring_style_key"
-          v-model:color="color"
-          v-model:vertex_attribute_name="vertex_attribute_name"
-          v-model:vertex_attribute_item="vertex_attribute_item"
-          v-model:vertex_attribute_range="vertex_attribute_range"
-          @vertex_attribute_ranges_per_data="setVertexAttributeRangesPerData"
-          v-model:vertex_attribute_color_map="vertex_attribute_color_map"
-          v-model:vertex_attribute_no_data_color="vertex_attribute_no_data_color"
-          v-model:vertex_attribute_time_step="vertex_attribute_time_step"
-          v-model:polyhedron_attribute_name="polyhedron_attribute_name"
-          v-model:polyhedron_attribute_item="polyhedron_attribute_item"
-          v-model:polyhedron_attribute_range="polyhedron_attribute_range"
-          @polyhedron_attribute_ranges_per_data="setPolyhedronAttributeRangesPerData"
-          v-model:polyhedron_attribute_color_map="polyhedron_attribute_color_map"
-          v-model:polyhedron_attribute_no_data_color="polyhedron_attribute_no_data_color"
-          v-model:polyhedron_attribute_time_step="polyhedron_attribute_time_step"
-        />
+        <ViewerSolidSpecificPolyhedraColoring :id="id" />
       </template>
     </template>
   </ViewerContextMenuItem>
diff --git a/app/components/Viewer/Surface/PolygonsColoring.vue b/app/components/Viewer/Surface/PolygonsColoring.vue
new file mode 100644
index 000000000..8c8076fcb
--- /dev/null
+++ b/app/components/Viewer/Surface/PolygonsColoring.vue
@@ -0,0 +1,231 @@
+<script setup lang="ts">
+import {
+  type RangesPerData,
+  applyRangesPerData,
+  useBatchStyle,
+} from "@ogw_front/composables/batch_style";
+import type { RGBAColor } from "@ogw_front/utils/default_styles/constants";
+import ViewerOptionsColoringTypeSelector from "@ogw_front/components/Viewer/Options/ColoringTypeSelector.vue";
+import { useDataStyleStore } from "@ogw_front/stores/data_style";
+import { useHybridViewerStore } from "@ogw_front/stores/hybrid_viewer";
+
+interface Texture {
+  id: string;
+  texture_name: string;
+}
+
+const dataStyleStore = useDataStyleStore();
+const hybridViewerStore = useHybridViewerStore();
+const { applyBatchStyle } = useBatchStyle();
+
+interface Props {
+  id: string;
+}
+
+const { id } = defineProps<Props>();
+
+const coloring_style_key = computed<string>({
+  get: () => dataStyleStore.meshPolygonsActiveColoring(id),
+  set: async (newValue) => {
+    await applyBatchStyle(id, (targetId: string) =>
+      dataStyleStore.setMeshPolygonsActiveColoring(targetId, newValue),
+    );
+    hybridViewerStore.remoteRender();
+  },
+});
+const color = computed<RGBAColor | undefined>({
+  get: () => dataStyleStore.meshPolygonsColor(id) as RGBAColor | undefined,
+  set: async (newValue) => {
+    if (newValue === undefined) {
+      return;
+    }
+    await applyBatchStyle(id, (targetId: string) =>
+      dataStyleStore.setMeshPolygonsColor(targetId, newValue),
+    );
+    hybridViewerStore.remoteRender();
+  },
+});
+const textures = computed<Texture[] | undefined>({
+  get: () => dataStyleStore.meshPolygonsTextures(id) as Texture[] | undefined,
+  set: async (newValue) => {
+    if (newValue === undefined) {
+      return;
+    }
+    await applyBatchStyle(id, (targetId: string) =>
+      dataStyleStore.setMeshPolygonsTextures(targetId, newValue),
+    );
+    hybridViewerStore.remoteRender();
+  },
+});
+const vertex_attribute_name = computed<string | undefined>({
+  get: () => dataStyleStore.meshPolygonsVertexAttributeName(id),
+  set: async (newValue) => {
+    if (newValue === undefined) {
+      return;
+    }
+    await applyBatchStyle(id, (targetId: string) =>
+      Promise.resolve(dataStyleStore.setMeshPolygonsVertexAttributeName(targetId, newValue)),
+    );
+    hybridViewerStore.remoteRender();
+  },
+});
+
+const vertex_attribute_time_step = computed<number | undefined>({
+  get: () => dataStyleStore.meshPolygonsVertexAttributeTimeStep(id),
+  set: async (newValue) => {
+    if (newValue === undefined) {
+      return;
+    }
+    await applyBatchStyle(id, (targetId: string) =>
+      Promise.resolve(dataStyleStore.setMeshPolygonsVertexAttributeTimeStep(targetId, newValue)),
+    );
+    hybridViewerStore.remoteRender();
+  },
+});
+const vertex_attribute_item = computed<string | undefined>({
+  get: () => dataStyleStore.meshPolygonsVertexAttributeItem(id),
+  set: async (newValue) => {
+    await applyBatchStyle(id, (targetId: string) =>
+      Promise.resolve(dataStyleStore.setMeshPolygonsVertexAttributeItem(targetId, newValue)),
+    );
+    hybridViewerStore.remoteRender();
+  },
+});
+const vertex_attribute_range = computed<[number, number] | undefined>({
+  get: () => dataStyleStore.meshPolygonsVertexAttributeRange(id),
+  set: async (newValue) => {
+    const [minimum, maximum] = newValue;
+    if (minimum === undefined || maximum === undefined) {
+      return;
+    }
+    await applyBatchStyle(id, (targetId: string) =>
+      Promise.resolve(
+        dataStyleStore.setMeshPolygonsVertexAttributeRange(targetId, minimum, maximum),
+      ),
+    );
+    hybridViewerStore.remoteRender();
+  },
+});
+const vertex_attribute_color_map = computed<Map<string, RGBAColor> | undefined>({
+  get: () => dataStyleStore.meshPolygonsVertexAttributeColorMap(id),
+  set: async (newValue) => {
+    await applyBatchStyle(id, (targetId: string) =>
+      Promise.resolve(dataStyleStore.setMeshPolygonsVertexAttributeColorMap(targetId, newValue)),
+    );
+    hybridViewerStore.remoteRender();
+  },
+});
+const vertex_attribute_no_data_color = computed<RGBAColor>({
+  get: () => dataStyleStore.meshPolygonsVertexAttributeNoDataColor(id),
+  set: async (newValue) => {
+    await applyBatchStyle(id, (targetId: string) =>
+      dataStyleStore.setMeshPolygonsVertexAttributeNoDataColor(targetId, newValue),
+    );
+    hybridViewerStore.remoteRender();
+  },
+});
+const polygon_attribute_name = computed<string | undefined>({
+  get: () => dataStyleStore.meshPolygonsPolygonAttributeName(id),
+  set: async (newValue) => {
+    if (newValue === undefined) {
+      return;
+    }
+    await applyBatchStyle(id, (targetId: string) =>
+      Promise.resolve(dataStyleStore.setMeshPolygonsPolygonAttributeName(targetId, newValue)),
+    );
+    hybridViewerStore.remoteRender();
+  },
+});
+
+const polygon_attribute_time_step = computed<number | undefined>({
+  get: () => dataStyleStore.meshPolygonsPolygonAttributeTimeStep(id),
+  set: async (newValue) => {
+    if (newValue === undefined) {
+      return;
+    }
+    await applyBatchStyle(id, (targetId: string) =>
+      Promise.resolve(dataStyleStore.setMeshPolygonsPolygonAttributeTimeStep(targetId, newValue)),
+    );
+    hybridViewerStore.remoteRender();
+  },
+});
+const polygon_attribute_item = computed<string | undefined>({
+  get: () => dataStyleStore.meshPolygonsPolygonAttributeItem(id),
+  set: async (newValue) => {
+    await applyBatchStyle(id, (targetId: string) =>
+      Promise.resolve(dataStyleStore.setMeshPolygonsPolygonAttributeItem(targetId, newValue)),
+    );
+    hybridViewerStore.remoteRender();
+  },
+});
+const polygon_attribute_range = computed<[number, number] | undefined>({
+  get: () => dataStyleStore.meshPolygonsPolygonAttributeRange(id),
+  set: async (newValue) => {
+    const [minimum, maximum] = newValue;
+    if (minimum === undefined || maximum === undefined) {
+      return;
+    }
+    await applyBatchStyle(id, (targetId: string) =>
+      Promise.resolve(
+        dataStyleStore.setMeshPolygonsPolygonAttributeRange(targetId, minimum, maximum),
+      ),
+    );
+    hybridViewerStore.remoteRender();
+  },
+});
+const polygon_attribute_color_map = computed<Map<string, RGBAColor> | undefined>({
+  get: () => dataStyleStore.meshPolygonsPolygonAttributeColorMap(id),
+  set: async (newValue) => {
+    await applyBatchStyle(id, (targetId: string) =>
+      Promise.resolve(dataStyleStore.setMeshPolygonsPolygonAttributeColorMap(targetId, newValue)),
+    );
+    hybridViewerStore.remoteRender();
+  },
+});
+const polygon_attribute_no_data_color = computed<RGBAColor>({
+  get: () => dataStyleStore.meshPolygonsPolygonAttributeNoDataColor(id),
+  set: async (newValue) => {
+    await applyBatchStyle(id, (targetId: string) =>
+      dataStyleStore.setMeshPolygonsPolygonAttributeNoDataColor(targetId, newValue),
+    );
+    hybridViewerStore.remoteRender();
+  },
+});
+
+async function setVertexAttributeRangesPerData(ranges: RangesPerData): Promise<void> {
+  await applyRangesPerData(ranges, (targetId, minimum, maximum) =>
+    dataStyleStore.setMeshPolygonsVertexAttributeRange(targetId, minimum, maximum),
+  );
+  hybridViewerStore.remoteRender();
+}
+
+async function setPolygonAttributeRangesPerData(ranges: RangesPerData): Promise<void> {
+  await applyRangesPerData(ranges, (targetId, minimum, maximum) =>
+    dataStyleStore.setMeshPolygonsPolygonAttributeRange(targetId, minimum, maximum),
+  );
+  hybridViewerStore.remoteRender();
+}
+</script>
+
+<template>
+  <ViewerOptionsColoringTypeSelector
+    :id="id"
+    v-model:coloring_style_key="coloring_style_key"
+    v-model:color="color"
+    v-model:textures="textures"
+    v-model:vertex_attribute_name="vertex_attribute_name"
+    v-model:vertex_attribute_item="vertex_attribute_item"
+    v-model:vertex_attribute_range="vertex_attribute_range"
+    @vertex_attribute_ranges_per_data="setVertexAttributeRangesPerData"
+    v-model:vertex_attribute_color_map="vertex_attribute_color_map"
+    v-model:vertex_attribute_no_data_color="vertex_attribute_no_data_color"
+    v-model:vertex_attribute_time_step="vertex_attribute_time_step"
+    v-model:polygon_attribute_name="polygon_attribute_name"
+    v-model:polygon_attribute_item="polygon_attribute_item"
+    v-model:polygon_attribute_range="polygon_attribute_range"
+    @polygon_attribute_ranges_per_data="setPolygonAttributeRangesPerData"
+    v-model:polygon_attribute_color_map="polygon_attribute_color_map"
+    v-model:polygon_attribute_no_data_color="polygon_attribute_no_data_color"
+    v-model:polygon_attribute_time_step="polygon_attribute_time_step"
+  />
+</template>
diff --git a/app/components/Viewer/Surface/PolygonsOptions.vue b/app/components/Viewer/Surface/PolygonsOptions.vue
index ff6232bdb..9294100eb 100644
--- a/app/components/Viewer/Surface/PolygonsOptions.vue
+++ b/app/components/Viewer/Surface/PolygonsOptions.vue
@@ -1,16 +1,11 @@
 <script setup lang="ts">
-import {
-  type RangesPerData,
-  applyRangesPerData,
-  useBatchStyle,
-} from "@ogw_front/composables/batch_style";
 import ViewerContextMenuItem, {
   type ItemProps,
 } from "@ogw_front/components/Viewer/ContextMenu/ContextMenuItem.vue";
 import PolygonalSurfacePolygons from "@ogw_front/assets/viewer_svgs/surface_triangles.svg";
-import type { RGBAColor } from "@ogw_front/utils/default_styles/constants";
-import ViewerOptionsColoringTypeSelector from "@ogw_front/components/Viewer/Options/ColoringTypeSelector.vue";
 import ViewerOptionsVisibilitySwitch from "@ogw_front/components/Viewer/Options/VisibilitySwitch.vue";
+import ViewerSurfacePolygonsColoring from "@ogw_front/components/Viewer/Surface/PolygonsColoring.vue";
+import { useBatchStyle } from "@ogw_front/composables/batch_style";
 import { useDataStyleStore } from "@ogw_front/stores/data_style";
 import { useHybridViewerStore } from "@ogw_front/stores/hybrid_viewer";
 
@@ -18,11 +13,6 @@ const dataStyleStore = useDataStyleStore();
 const hybridViewerStore = useHybridViewerStore();
 const { applyBatchStyle } = useBatchStyle();
 
-interface Texture {
-  id: string;
-  texture_name: string;
-}
-
 interface Props {
   itemProps: ItemProps & { index: number };
   tooltip?: string;
@@ -41,187 +31,6 @@ const visibility = computed<boolean>({
     hybridViewerStore.remoteRender();
   },
 });
-const coloring_style_key = computed<string>({
-  get: () => dataStyleStore.meshPolygonsActiveColoring(id.value),
-  set: async (newValue) => {
-    await applyBatchStyle(id.value, (targetId: string) =>
-      dataStyleStore.setMeshPolygonsActiveColoring(targetId, newValue),
-    );
-    hybridViewerStore.remoteRender();
-  },
-});
-const color = computed<RGBAColor | undefined>({
-  get: () => dataStyleStore.meshPolygonsColor(id.value) as RGBAColor | undefined,
-  set: async (newValue) => {
-    if (newValue === undefined) {
-      return;
-    }
-    await applyBatchStyle(id.value, (targetId: string) =>
-      dataStyleStore.setMeshPolygonsColor(targetId, newValue),
-    );
-    hybridViewerStore.remoteRender();
-  },
-});
-const textures = computed<Texture[] | undefined>({
-  get: () => dataStyleStore.meshPolygonsTextures(id.value) as Texture[] | undefined,
-  set: async (newValue) => {
-    if (newValue === undefined) {
-      return;
-    }
-    await applyBatchStyle(id.value, (targetId: string) =>
-      dataStyleStore.setMeshPolygonsTextures(targetId, newValue),
-    );
-    hybridViewerStore.remoteRender();
-  },
-});
-const vertex_attribute_name = computed<string | undefined>({
-  get: () => dataStyleStore.meshPolygonsVertexAttributeName(id.value),
-  set: async (newValue) => {
-    if (newValue === undefined) {
-      return;
-    }
-    await applyBatchStyle(id.value, (targetId: string) =>
-      Promise.resolve(dataStyleStore.setMeshPolygonsVertexAttributeName(targetId, newValue)),
-    );
-    hybridViewerStore.remoteRender();
-  },
-});
-
-const vertex_attribute_time_step = computed<number | undefined>({
-  get: () => dataStyleStore.meshPolygonsVertexAttributeTimeStep(id.value),
-  set: async (newValue) => {
-    if (newValue === undefined) {
-      return;
-    }
-    await applyBatchStyle(id.value, (targetId: string) =>
-      Promise.resolve(dataStyleStore.setMeshPolygonsVertexAttributeTimeStep(targetId, newValue)),
-    );
-    hybridViewerStore.remoteRender();
-  },
-});
-const vertex_attribute_item = computed<string | undefined>({
-  get: () => dataStyleStore.meshPolygonsVertexAttributeItem(id.value),
-  set: async (newValue) => {
-    await applyBatchStyle(id.value, (targetId: string) =>
-      Promise.resolve(dataStyleStore.setMeshPolygonsVertexAttributeItem(targetId, newValue)),
-    );
-    hybridViewerStore.remoteRender();
-  },
-});
-const vertex_attribute_range = computed<[number, number] | undefined>({
-  get: () => dataStyleStore.meshPolygonsVertexAttributeRange(id.value),
-  set: async (newValue) => {
-    const [minimum, maximum] = newValue;
-    if (minimum === undefined || maximum === undefined) {
-      return;
-    }
-    await applyBatchStyle(id.value, (targetId: string) =>
-      Promise.resolve(
-        dataStyleStore.setMeshPolygonsVertexAttributeRange(targetId, minimum, maximum),
-      ),
-    );
-    hybridViewerStore.remoteRender();
-  },
-});
-const vertex_attribute_color_map = computed<Map<string, RGBAColor> | undefined>({
-  get: () => dataStyleStore.meshPolygonsVertexAttributeColorMap(id.value),
-  set: async (newValue) => {
-    await applyBatchStyle(id.value, (targetId: string) =>
-      Promise.resolve(dataStyleStore.setMeshPolygonsVertexAttributeColorMap(targetId, newValue)),
-    );
-    hybridViewerStore.remoteRender();
-  },
-});
-const vertex_attribute_no_data_color = computed<RGBAColor>({
-  get: () => dataStyleStore.meshPolygonsVertexAttributeNoDataColor(id.value),
-  set: async (newValue) => {
-    await applyBatchStyle(id.value, (targetId: string) =>
-      dataStyleStore.setMeshPolygonsVertexAttributeNoDataColor(targetId, newValue),
-    );
-    hybridViewerStore.remoteRender();
-  },
-});
-const polygon_attribute_name = computed<string | undefined>({
-  get: () => dataStyleStore.meshPolygonsPolygonAttributeName(id.value),
-  set: async (newValue) => {
-    if (newValue === undefined) {
-      return;
-    }
-    await applyBatchStyle(id.value, (targetId: string) =>
-      Promise.resolve(dataStyleStore.setMeshPolygonsPolygonAttributeName(targetId, newValue)),
-    );
-    hybridViewerStore.remoteRender();
-  },
-});
-
-const polygon_attribute_time_step = computed<number | undefined>({
-  get: () => dataStyleStore.meshPolygonsPolygonAttributeTimeStep(id.value),
-  set: async (newValue) => {
-    if (newValue === undefined) {
-      return;
-    }
-    await applyBatchStyle(id.value, (targetId: string) =>
-      Promise.resolve(dataStyleStore.setMeshPolygonsPolygonAttributeTimeStep(targetId, newValue)),
-    );
-    hybridViewerStore.remoteRender();
-  },
-});
-const polygon_attribute_item = computed<string | undefined>({
-  get: () => dataStyleStore.meshPolygonsPolygonAttributeItem(id.value),
-  set: async (newValue) => {
-    await applyBatchStyle(id.value, (targetId: string) =>
-      Promise.resolve(dataStyleStore.setMeshPolygonsPolygonAttributeItem(targetId, newValue)),
-    );
-    hybridViewerStore.remoteRender();
-  },
-});
-const polygon_attribute_range = computed<[number, number] | undefined>({
-  get: () => dataStyleStore.meshPolygonsPolygonAttributeRange(id.value),
-  set: async (newValue) => {
-    const [minimum, maximum] = newValue;
-    if (minimum === undefined || maximum === undefined) {
-      return;
-    }
-    await applyBatchStyle(id.value, (targetId: string) =>
-      Promise.resolve(
-        dataStyleStore.setMeshPolygonsPolygonAttributeRange(targetId, minimum, maximum),
-      ),
-    );
-    hybridViewerStore.remoteRender();
-  },
-});
-const polygon_attribute_color_map = computed<Map<string, RGBAColor> | undefined>({
-  get: () => dataStyleStore.meshPolygonsPolygonAttributeColorMap(id.value),
-  set: async (newValue) => {
-    await applyBatchStyle(id.value, (targetId: string) =>
-      Promise.resolve(dataStyleStore.setMeshPolygonsPolygonAttributeColorMap(targetId, newValue)),
-    );
-    hybridViewerStore.remoteRender();
-  },
-});
-const polygon_attribute_no_data_color = computed<RGBAColor>({
-  get: () => dataStyleStore.meshPolygonsPolygonAttributeNoDataColor(id.value),
-  set: async (newValue) => {
-    await applyBatchStyle(id.value, (targetId: string) =>
-      dataStyleStore.setMeshPolygonsPolygonAttributeNoDataColor(targetId, newValue),
-    );
-    hybridViewerStore.remoteRender();
-  },
-});
-
-async function setVertexAttributeRangesPerData(ranges: RangesPerData): Promise<void> {
-  await applyRangesPerData(ranges, (targetId, minimum, maximum) =>
-    dataStyleStore.setMeshPolygonsVertexAttributeRange(targetId, minimum, maximum),
-  );
-  hybridViewerStore.remoteRender();
-}
-
-async function setPolygonAttributeRangesPerData(ranges: RangesPerData): Promise<void> {
-  await applyRangesPerData(ranges, (targetId, minimum, maximum) =>
-    dataStyleStore.setMeshPolygonsPolygonAttributeRange(targetId, minimum, maximum),
-  );
-  hybridViewerStore.remoteRender();
-}
 </script>
 
 <template>
@@ -238,26 +47,7 @@ async function setPolygonAttributeRangesPerData(ranges: RangesPerData): Promise<
         v-model="visibility"
       />
       <template v-if="visibility">
-        <ViewerOptionsColoringTypeSelector
-          :id="id"
-          v-model:coloring_style_key="coloring_style_key"
-          v-model:color="color"
-          v-model:textures="textures"
-          v-model:vertex_attribute_name="vertex_attribute_name"
-          v-model:vertex_attribute_item="vertex_attribute_item"
-          v-model:vertex_attribute_range="vertex_attribute_range"
-          @vertex_attribute_ranges_per_data="setVertexAttributeRangesPerData"
-          v-model:vertex_attribute_color_map="vertex_attribute_color_map"
-          v-model:vertex_attribute_no_data_color="vertex_attribute_no_data_color"
-          v-model:vertex_attribute_time_step="vertex_attribute_time_step"
-          v-model:polygon_attribute_name="polygon_attribute_name"
-          v-model:polygon_attribute_item="polygon_attribute_item"
-          v-model:polygon_attribute_range="polygon_attribute_range"
-          @polygon_attribute_ranges_per_data="setPolygonAttributeRangesPerData"
-          v-model:polygon_attribute_color_map="polygon_attribute_color_map"
-          v-model:polygon_attribute_no_data_color="polygon_attribute_no_data_color"
-          v-model:polygon_attribute_time_step="polygon_attribute_time_step"
-        />
+        <ViewerSurfacePolygonsColoring :id="id" />
       </template>
     </template>
   </ViewerContextMenuItem>
diff --git a/app/composables/attribute_selector.ts b/app/composables/attribute_selector.ts
new file mode 100644
index 000000000..9f676a4e1
--- /dev/null
+++ b/app/composables/attribute_selector.ts
@@ -0,0 +1,103 @@
+import type { AttributeRange } from "@ogw_front/composables/batch_style";
+import type { AttributeRangeInfo } from "@ogw_front/utils/attribute_range";
+import { getAttributeRange } from "@ogw_front/utils/attributes";
+
+interface AttributeInfo {
+  attribute_name: string;
+  nb_items: number;
+  time_steps?: number[];
+  [key: string]: unknown;
+}
+
+// The minimum and maximum of an attribute range: each one is clamped by the other
+function useAttributeRangeBounds(attributeRange: Ref<(number | undefined)[]>): {
+  rangeMin: WritableComputedRef<number | undefined>;
+  rangeMax: WritableComputedRef<number | undefined>;
+} {
+  const rangeMin = computed<number | undefined>({
+    get: () => attributeRange.value[0],
+    set: (val: number | undefined) => {
+      if (val === undefined) {
+        return;
+      }
+      const [, currentMax] = attributeRange.value;
+      let newMin = val;
+      if (typeof currentMax === "number" && val > currentMax) {
+        newMin = currentMax;
+      }
+      attributeRange.value = [newMin, currentMax];
+    },
+  });
+  const rangeMax = computed<number | undefined>({
+    get: () => attributeRange.value[1],
+    set: (val: number | undefined) => {
+      if (val === undefined) {
+        return;
+      }
+      const [currentMin] = attributeRange.value;
+      let newMax = val;
+      if (typeof currentMin === "number" && val < currentMin) {
+        newMax = currentMin;
+      }
+      attributeRange.value = [currentMin, newMax];
+    },
+  });
+  return { rangeMin, rangeMax };
+}
+
+// The items of an attribute with several components
+function attributeItemOptions(itemCount: number): { title: string; value: number }[] {
+  return Array.from({ length: itemCount }, (_, index) => ({
+    title: `Item ${index + 1}`,
+    value: index,
+  }));
+}
+
+// The range of every target for the picked item
+function attributeRangesPerTarget(
+  rangesPerTarget: ReadonlyMap<string, AttributeRangeInfo>,
+  item: number,
+): Map<string, AttributeRange> {
+  const ranges = new Map<string, AttributeRange>();
+  for (const [targetId, range] of rangesPerTarget) {
+    const { min, max } = getAttributeRange(range, item);
+    ranges.set(targetId, [min, max]);
+  }
+  return ranges;
+}
+
+// Commits the first time step when the picked series changes and the stored one is not valid
+function useSeriesTimeStepCommit(
+  timeSteps: ComputedRef<number[]>,
+  seriesName: () => string | undefined,
+  attributeTimeStep: Readonly<Ref<number | undefined>>,
+  resetTimeStep: () => void,
+): () => void {
+  let committedSeries: string | undefined = undefined;
+
+  return (): void => {
+    if (timeSteps.value.length === 0) {
+      committedSeries = undefined;
+      return;
+    }
+    const name = seriesName();
+    if (name === committedSeries) {
+      return;
+    }
+    committedSeries = name;
+    const current = attributeTimeStep.value;
+    const valid = current !== undefined && current >= 0 && current < timeSteps.value.length;
+    // A valid step is already stored and applied with the series: emitting it again re-applies the attribute
+    if (!valid) {
+      resetTimeStep();
+    }
+  };
+}
+
+export {
+  type AttributeInfo,
+  attributeItemOptions,
+  attributeRangesPerTarget,
+  useAttributeRangeBounds,
+  useSeriesTimeStepCommit,
+};
diff --git a/app/composables/clipping_slices.ts b/app/composables/clipping_slices.ts
new file mode 100644
index 000000000..212cff4d1
--- /dev/null
+++ b/app/composables/clipping_slices.ts
@@ -0,0 +1,159 @@
+import {
+  DEFAULT_SLICE_AXIS,
+  SLICE_AXES,
+  type SliceAxis,
+  areAllGrids,
+} from "@ogw_front/utils/slice";
+import type { useHybridViewerStore } from "@ogw_front/stores/hybrid_viewer";
+
+interface Slice {
+  id: number;
+  axis: SliceAxis;
+  index: number;
+}
+
+interface SliceList {
+  sliceEnabled: Ref<boolean>;
+  slices: Ref<Slice[]>;
+  addSlice: () => void;
+  removeSlice: (index: number) => void;
+  resetSlices: () => void;
+}
+
+interface SliceSyncParams {
+  slices: Ref<Slice[]>;
+  sliceMaxIndices: Ref<[number, number, number]>;
+  isAllGrid: ComputedRef<boolean>;
+  isSliceActive: ComputedRef<boolean>;
+  targetIds: ComputedRef<string[]>;
+  getUntargetedIds: () => string[];
+  hybridViewerStore: ReturnType<typeof useHybridViewerStore>;
+}
+
+interface ClippingSlicesParams {
+  allItems: ComputedRef<{ id: string; geode_object_type: string }[]>;
+  targetIds: ComputedRef<string[]>;
+  getUntargetedIds: () => string[];
+  newItemId: () => number;
+  hybridViewerStore: ReturnType<typeof useHybridViewerStore>;
+}
+
+interface ClippingSlices extends SliceList {
+  sliceMaxIndices: Ref<[number, number, number]>;
+  isAllGrid: ComputedRef<boolean>;
+  isSliceActive: ComputedRef<boolean>;
+  applySlices: () => Promise<void>;
+  removeSlices: (allIds: string[]) => Promise<void>;
+}
+
+function useSliceList(newItemId: () => number): SliceList {
+  const sliceEnabled = ref<boolean>(false);
+  const slices = ref<Slice[]>([{ id: newItemId(), axis: DEFAULT_SLICE_AXIS, index: 0 }]);
+
+  function addSlice(): void {
+    const lastSlice = slices.value.at(-1);
+    slices.value.push({
+      id: newItemId(),
+      axis: lastSlice ? SLICE_AXES[lastSlice.axis].next : DEFAULT_SLICE_AXIS,
+      index: 0,
+    });
+  }
+
+  function removeSlice(index: number): void {
+    slices.value.splice(index, 1);
+  }
+
+  function resetSlices(): void {
+    sliceEnabled.value = false;
+    slices.value = [{ id: newItemId(), axis: DEFAULT_SLICE_AXIS, index: 0 }];
+  }
+
+  return { sliceEnabled, slices, addSlice, removeSlice, resetSlices };
+}
+
+// Runs the tasks one after the other, whatever the outcome of the previous one
+function createSliceQueue(): (task: () => Promise<void>) => Promise<void> {
+  let pendingSlices: Promise<void> = Promise.resolve();
+
+  return async (task) => {
+    const previous = pendingSlices;
+    pendingSlices = (async (): Promise<void> => {
+      await Promise.allSettled([previous]);
+      await task();
+    })();
+    await pendingSlices;
+  };
+}
+
+function useSliceSync(params: SliceSyncParams): {
+  applySlices: () => Promise<void>;
+  removeSlices: (allIds: string[]) => Promise<void>;
+} {
+  const { slices, sliceMaxIndices, isAllGrid, isSliceActive, targetIds, hybridViewerStore } =
+    params;
+  const queueSliceTask = createSliceQueue();
+  let areSlicesApplied = false;
+
+  async function sendSlices(): Promise<void> {
+    if (!isAllGrid.value && !areSlicesApplied) {
+      return;
+    }
+    const isActive = isSliceActive.value;
+    const untargetedIds = params.getUntargetedIds();
+    if (targetIds.value.length > 0) {
+      const maxIndices = await hybridViewerStore.setSlice(
+        targetIds.value,
+        isActive ? slices.value.map(({ axis, index }) => ({ axis, index })) : [],
+      );
+      if (isAllGrid.value) {
+        sliceMaxIndices.value = maxIndices;
+      }
+      if (isActive) {
+        for (const slice of slices.value) {
+          slice.index = Math.min(slice.index, maxIndices[slice.axis]);
+        }
+      }
+    }
+    if (areSlicesApplied && untargetedIds.length > 0) {
+      await hybridViewerStore.setSlice(untargetedIds, []);
+    }
+    areSlicesApplied = isActive;
+  }
+
+  async function applySlices(): Promise<void> {
+    await queueSliceTask(sendSlices);
+  }
+
+  async function removeSlices(allIds: string[]): Promise<void> {
+    await queueSliceTask(async () => {
+      if (areSlicesApplied) {
+        await hybridViewerStore.setSlice(allIds, []);
+        areSlicesApplied = false;
+      }
+    });
+  }
+
+  return { applySlices, removeSlices };
+}
+
+// The slices applied to the targeted grids
+function useClippingSlices(params: ClippingSlicesParams): ClippingSlices {
+  const { allItems, targetIds, getUntargetedIds, newItemId, hybridViewerStore } = params;
+  const list = useSliceList(newItemId);
+  const sliceMaxIndices = ref<[number, number, number]>([0, 0, 0]);
+  const isAllGrid = computed<boolean>(() => areAllGrids(allItems.value, targetIds.value));
+  const isSliceActive = computed<boolean>(() => isAllGrid.value && list.sliceEnabled.value);
+  const sync = useSliceSync({
+    slices: list.slices,
+    sliceMaxIndices,
+    isAllGrid,
+    isSliceActive,
+    targetIds,
+    getUntargetedIds,
+    hybridViewerStore,
+  });
+
+  return { ...list, ...sync, sliceMaxIndices, isAllGrid, isSliceActive };
+}
+
+export { useClippingSlices };
diff --git a/app/composables/view_toolbar_options.ts b/app/composables/view_toolbar_options.ts
new file mode 100644
index 000000000..ade94f33f
--- /dev/null
+++ b/app/composables/view_toolbar_options.ts
@@ -0,0 +1,126 @@
+import {
+  type CameraOptionAction,
+  controlOptions,
+  filterOptions,
+  panelOptions,
+  rulerOption,
+} from "@ogw_front/composables/view_toolbar_tool_options";
+import type { ViewToolbarTools } from "@ogw_front/composables/view_toolbar_tools";
+import schemas from "@geode/opengeodeweb-viewer/opengeodeweb_viewer_typed_schemas.js";
+import { useHybridViewerStore } from "@ogw_front/stores/hybrid_viewer";
+import { useViewerStore } from "@ogw_front/stores/viewer";
+
+type HybridViewerStore = ReturnType<typeof useHybridViewerStore>;
+
+function pickingOptions(
+  hybridViewerStore: HybridViewerStore,
+  tools: ViewToolbarTools,
+): CameraOptionAction[] {
+  return [
+    {
+      testId: "resetCameraButton",
+      tooltip: "Reset camera",
+      icon: "mdi-cube-scan",
+      action: (): void => {
+        hybridViewerStore.resetCamera();
+      },
+    },
+    {
+      testId: "centerOnClickButton",
+      tooltip: "Center on click",
+      icon: "mdi-crosshairs-question",
+      color: hybridViewerStore.is_picking ? "primary" : undefined,
+      action: (): void => {
+        tools.toggleTool(tools.is_picking);
+      },
+    },
+    {
+      testId: "zoomToBoxButton",
+      tooltip: "Zoom to box",
+      icon: "mdi-magnify-scan",
+      color: hybridViewerStore.is_zoom_box_active ? "primary" : undefined,
+      action: (): void => {
+        tools.toggleTool(tools.is_zoom_box_active);
+      },
+    },
+  ];
+}
+
+function hoverHighlightOption(
+  hybridViewerStore: HybridViewerStore,
+  tools: ViewToolbarTools,
+): CameraOptionAction {
+  return {
+    testId: "highlightOnHoverButton",
+    tooltip: "Highlight on hover",
+    icon: "mdi-cursor-default-click",
+    color: hybridViewerStore.is_hover_highlight ? "primary" : undefined,
+    action: hybridViewerStore.is_hover_highlight ? tools.stopHoverHighlight : undefined,
+    menu: [
+      {
+        title: "Cells",
+        testId: "highlightOnHoverCellsButton",
+        icon: "mdi-select-all",
+        action: (): void => {
+          tools.toggleHoverHighlight("CELL");
+        },
+      },
+      {
+        title: "Points",
+        testId: "highlightOnHoverPointsButton",
+        icon: "mdi-select-drag",
+        action: (): void => {
+          tools.toggleHoverHighlight("POINT");
+        },
+      },
+    ],
+  };
+}
+
+function gridScaleOption(
+  hybridViewerStore: HybridViewerStore,
+  viewerStore: ReturnType<typeof useViewerStore>,
+  gridScale: Ref<boolean>,
+): CameraOptionAction {
+  return {
+    testId: "gridScaleButton",
+    tooltip: "Toggle grid scale",
+    icon: "mdi-ruler-square",
+    color: gridScale.value ? "primary" : undefined,
+    action: (): void => {
+      const schema = schemas.opengeodeweb_viewer.viewer.grid_scale;
+      const params = { visibility: !gridScale.value };
+      void viewerStore.request(
+        {
+          schema,
+          params,
+        },
+        {
+          response_function: () => {
+            gridScale.value = !gridScale.value;
+            void hybridViewerStore.remoteRender();
+          },
+        },
+      );
+    },
+  };
+}
+
+// The buttons of the view toolbar
+function useViewToolbarOptions(tools: ViewToolbarTools): ComputedRef<CameraOptionAction[]> {
+  const hybridViewerStore = useHybridViewerStore();
+  const viewerStore = useViewerStore();
+  const gridScale = ref<boolean>(false);
+
+  return computed<CameraOptionAction[]>(() => [
+    ...pickingOptions(hybridViewerStore, tools),
+    hoverHighlightOption(hybridViewerStore, tools),
+    ...panelOptions(tools),
+    gridScaleOption(hybridViewerStore, viewerStore, gridScale),
+    ...controlOptions(tools),
+    ...filterOptions(tools),
+    rulerOption(tools),
+  ]);
+}
+
+export { useViewToolbarOptions };
diff --git a/app/composables/view_toolbar_tool_options.ts b/app/composables/view_toolbar_tool_options.ts
new file mode 100644
index 000000000..8c29aaf95
--- /dev/null
+++ b/app/composables/view_toolbar_tool_options.ts
@@ -0,0 +1,115 @@
+import CameraBookmarkIcon from "@ogw_front/assets/viewer_svgs/camera-bookmark.svg";
+import type { ViewToolbarTools } from "@ogw_front/composables/view_toolbar_tools";
+
+interface CameraOptionAction {
+  title?: string;
+  testId: string;
+  tooltip?: string;
+  icon: string;
+  iconSize?: number;
+  color?: string;
+  action?: () => void;
+  menu?: CameraOptionAction[];
+}
+
+// The buttons opening a panel
+function panelOptions(tools: ViewToolbarTools): CameraOptionAction[] {
+  return [
+    {
+      testId: "cameraOrientationButton",
+      tooltip: "Camera orientation",
+      icon: "mdi-rotate-3d",
+      action: (): void => {
+        tools.toggleTool(tools.showCameraOrientation);
+      },
+    },
+    {
+      testId: "cameraManagerButton",
+      tooltip: "Manage camera positions",
+      icon: CameraBookmarkIcon,
+      iconSize: 34,
+      action: (): void => {
+        tools.toggleTool(tools.showCameraManager);
+      },
+    },
+    {
+      testId: "screenshotButton",
+      tooltip: "Take a screenshot",
+      icon: "mdi-camera",
+      action: (): void => {
+        tools.toggleTool(tools.showScreenshot);
+      },
+    },
+  ];
+}
+
+// The buttons opening the scene controls
+function controlOptions(tools: ViewToolbarTools): CameraOptionAction[] {
+  return [
+    {
+      testId: "zScalingButton",
+      tooltip: "Z Scaling Control",
+      icon: "mdi-sort",
+      action: (): void => {
+        tools.toggleTool(tools.showZScaling);
+      },
+    },
+    {
+      testId: "clippingPlanesButton",
+      tooltip: "Clipping Planes",
+      icon: "mdi-content-cut",
+      color: tools.showClippingPlanes.value ? "primary" : undefined,
+      action: (): void => {
+        tools.toggleTool(tools.showClippingPlanes);
+      },
+    },
+  ];
+}
+
+// The buttons opening the filters
+function filterOptions(tools: ViewToolbarTools): CameraOptionAction[] {
+  return [
+    {
+      testId: "shrinkFilterButton",
+      tooltip: "Shrink Filter",
+      icon: "mdi-arrow-collapse-all",
+      color: tools.showShrinkFilter.value ? "primary" : undefined,
+      action: (): void => {
+        tools.toggleTool(tools.showShrinkFilter);
+      },
+    },
+    {
+      testId: "explodeFilterButton",
+      tooltip: "Exploded View",
+      icon: "mdi-arrow-expand-all",
+      color: tools.showExplodeFilter.value ? "primary" : undefined,
+      action: (): void => {
+        tools.toggleTool(tools.showExplodeFilter);
+      },
+    },
+    {
+      testId: "thresholdFilterButton",
+      tooltip: "Threshold Filter",
+      icon: "mdi-filter-variant",
+      color: tools.showThresholdFilter.value ? "primary" : undefined,
+      action: (): void => {
+        tools.toggleTool(tools.showThresholdFilter);
+      },
+    },
+  ];
+}
+
+function rulerOption(tools: ViewToolbarTools): CameraOptionAction {
+  return {
+    testId: "rulerButton",
+    tooltip: "Ruler",
+    icon: "mdi-ruler",
+    color: tools.showRuler.value ? "primary" : undefined,
+    action: (): void => {
+      tools.toggleTool(tools.showRuler);
+    },
+  };
+}
+
+export { controlOptions, filterOptions, panelOptions, rulerOption };
+export type { CameraOptionAction };
diff --git a/app/composables/view_toolbar_tools.ts b/app/composables/view_toolbar_tools.ts
new file mode 100644
index 000000000..5bb80dfb3
--- /dev/null
+++ b/app/composables/view_toolbar_tools.ts
@@ -0,0 +1,108 @@
+import type { PickedFieldType } from "@geode/opengeodeweb-viewer/opengeodeweb_viewer_typed_schemas.js";
+import { useHybridViewerStore } from "@ogw_front/stores/hybrid_viewer";
+import { useViewerStore } from "@ogw_front/stores/viewer";
+
+interface ToolRefs {
+  showScreenshot: Ref<boolean>;
+  showCameraManager: Ref<boolean>;
+  showCameraOrientation: Ref<boolean>;
+  showZScaling: Ref<boolean>;
+  showClippingPlanes: Ref<boolean>;
+  showShrinkFilter: Ref<boolean>;
+  showExplodeFilter: Ref<boolean>;
+  showThresholdFilter: Ref<boolean>;
+  showRuler: Ref<boolean>;
+}
+
+interface ViewToolbarTools extends ToolRefs {
+  is_picking: Ref<boolean>;
+  is_zoom_box_active: Ref<boolean>;
+  stopHoverHighlight: () => void;
+  toggleTool: (toolRef: Ref<boolean>) => void;
+  toggleHoverHighlight: (fieldType: PickedFieldType) => void;
+}
+
+function createToolRefs(): ToolRefs {
+  return {
+    showScreenshot: ref<boolean>(false),
+    showCameraManager: ref<boolean>(false),
+    showCameraOrientation: ref<boolean>(false),
+    showZScaling: ref<boolean>(false),
+    showClippingPlanes: ref<boolean>(false),
+    showShrinkFilter: ref<boolean>(false),
+    showExplodeFilter: ref<boolean>(false),
+    showThresholdFilter: ref<boolean>(false),
+    showRuler: ref<boolean>(false),
+  };
+}
+
+function exclusiveTools(toolRefs: ToolRefs, pickingTools: Ref<boolean>[]): Ref<boolean>[] {
+  return [
+    toolRefs.showCameraOrientation,
+    toolRefs.showCameraManager,
+    toolRefs.showScreenshot,
+    toolRefs.showZScaling,
+    toolRefs.showClippingPlanes,
+    toolRefs.showShrinkFilter,
+    toolRefs.showExplodeFilter,
+    toolRefs.showThresholdFilter,
+    toolRefs.showRuler,
+    ...pickingTools,
+  ];
+}
+
+// The toolbar tools are exclusive: opening one closes the others
+function useViewToolbarTools(): ViewToolbarTools {
+  const hybridViewerStore = useHybridViewerStore();
+  const viewerStore = useViewerStore();
+  const { is_picking, is_zoom_box_active } = storeToRefs(hybridViewerStore);
+  const { picking_mode } = storeToRefs(viewerStore);
+  const toolRefs = createToolRefs();
+  const allTools = exclusiveTools(toolRefs, [is_picking, is_zoom_box_active, picking_mode]);
+
+  function stopHoverHighlight(): void {
+    hybridViewerStore.is_hover_highlight = false;
+    hybridViewerStore.clearHoverHighlight();
+  }
+
+  function closeAllToolsExcept(toolRef: Ref<boolean>): void {
+    for (const tool of allTools) {
+      if (tool !== toolRef) {
+        tool.value = false;
+      }
+    }
+    if (toolRef !== toolRefs.showRuler) {
+      void nextTick(stopHoverHighlight);
+    }
+  }
+
+  function toggleTool(toolRef: Ref<boolean>): void {
+    closeAllToolsExcept(toolRef);
+    toolRef.value = !toolRef.value;
+  }
+
+  function toggleHoverHighlight(fieldType: PickedFieldType): void {
+    const activate =
+      !hybridViewerStore.is_hover_highlight ||
+      hybridViewerStore.hover_highlight_field_type !== fieldType;
+    closeAllToolsExcept(toolRefs.showRuler);
+    if (activate) {
+      hybridViewerStore.is_hover_highlight = true;
+      hybridViewerStore.hover_highlight_field_type = fieldType;
+    } else {
+      stopHoverHighlight();
+    }
+  }
+
+  return {
+    ...toolRefs,
+    is_picking,
+    is_zoom_box_active,
+    stopHoverHighlight,
+    toggleTool,
+    toggleHoverHighlight,
+  };
+}
+
+export { useViewToolbarTools };
+export type { ViewToolbarTools };
diff --git a/app/composables/virtual_tree.ts b/app/composables/virtual_tree.ts
index 7e68cbcf8..463fe72e0 100644
--- a/app/composables/virtual_tree.ts
+++ b/app/composables/virtual_tree.ts
@@ -1,72 +1,14 @@
-import type { Ref } from "vue";
-
-// Same shape as Vue's MaybeRefOrGetter<T>, kept as a local alias for readability at call sites.
-type ReadonlyMaybeRefOrGetter<Value> = Value | Ref<Value> | (() => Value);
-
-type TreeItem = Record<string, unknown>;
-
-interface ItemPropsConfig {
-  value: string;
-  title: string;
-  children: string;
-  height: number;
-  [key: string]: unknown;
-}
-
-interface SelectionConfig {
-  selectable: boolean;
-  strategy: string;
-  [key: string]: unknown;
-}
-
-interface VirtualTreeProps {
-  readonly items?: readonly TreeItem[];
-  readonly opened?: readonly unknown[];
-  readonly selected?: readonly unknown[];
-  readonly active?: readonly unknown[];
-  readonly itemProps?: Partial<ItemPropsConfig>;
-  readonly selection?: Partial<SelectionConfig>;
-  readonly search?: string;
-  readonly customFilter?: (id: unknown, search: string, context: { raw: TreeItem }) => boolean;
-}
-
-interface DisplayItem {
-  raw: TreeItem;
-  id: unknown;
-  depth: number;
-  isOpen: boolean;
-  isActive: boolean;
-  isLeaf: boolean;
-}
-
-type EmitFn = (event: string, ...args: readonly unknown[]) => void;
-
-interface UseVirtualTreeReturn {
-  actualItemProps: ComputedRef<ItemPropsConfig>;
-  actualSelection: ComputedRef<SelectionConfig>;
-  displayItems: ComputedRef<DisplayItem[]>;
-  toggleOpen: (item: TreeItem) => void;
-  toggleSelect: (item: TreeItem) => void;
-  isSelected: (item: TreeItem) => boolean;
-  getIndeterminate: (item: TreeItem) => boolean;
-}
-
-// Real runtime check (rather than an `as TreeItem[]` cast) for the duck-typed "children" field:
-// Item shapes vary across callers (treeview groups, model component/collection groups, ...), so
-// This only verifies it is actually an array, same as the assumption the old cast silently made.
-function isTreeItemArray(value: unknown): value is TreeItem[] {
-  return Array.isArray(value);
-}
-
-// Extracted so we never call String() directly on a value typed as `unknown` (ids and titles can
-// Be anything at runtime): only stringify primitives that have a sane toString, and fall back to
-// "" for anything else instead of risking "[object Object]".
-function toDisplayString(value: unknown): string {
-  if (typeof value === "string" || typeof value === "number" || typeof value === "boolean") {
-    return String(value);
-  }
-  return "";
-}
+import {
+  type EmitFn,
+  type ItemPropsConfig,
+  type ReadonlyMaybeRefOrGetter,
+  type SelectionConfig,
+  type TreeItem,
+  type UseVirtualTreeReturn,
+  type VirtualTreeProps,
+  isTreeItemArray,
+} from "./virtual_tree_types";
+import { flattenTree } from "./virtual_tree_flatten";
 
 function useVirtualTree(
   propsIn: ReadonlyMaybeRefOrGetter<VirtualTreeProps>,
@@ -171,66 +113,6 @@ function useVirtualTree(
     emit("update:selected", [...newSelected]);
   }
 
-  function flattenTree(itemsList: readonly TreeItem[], depth = 0): DisplayItem[] {
-    const { search, customFilter } = props.value;
-    const result: DisplayItem[] = [];
-
-    for (const item of itemsList) {
-      const id = item[actualItemProps.value.value];
-      const children = getChildrenOf(item);
-      const hasChildren = Boolean(children && children.length > 0);
-
-      const isOpen = openedSet.value.has(id);
-      const isActive = activeSet.value.has(id);
-
-      if (search !== undefined && search !== "") {
-        const lowerSearch = search.toLowerCase();
-        const matches = customFilter
-          ? customFilter(id, search, { raw: item })
-          : toDisplayString(item[actualItemProps.value.title])
-              .toLowerCase()
-              .includes(lowerSearch) || toDisplayString(id).toLowerCase().includes(lowerSearch);
-
-        if (hasChildren) {
-          const subtree = flattenTree(children ?? [], depth + 1);
-          if (subtree.length === 0 && !matches) {
-            continue;
-          }
-
-          result.push({
-            raw: item,
-            id,
-            depth,
-            isOpen,
-            isActive,
-            isLeaf: false,
-          });
-          if (isOpen) {
-            result.push(...subtree);
-          }
-          continue;
-        }
-        if (!matches) {
-          continue;
-        }
-      }
-
-      result.push({
-        raw: item,
-        id,
-        depth,
-        isOpen,
-        isActive,
-        isLeaf: !hasChildren,
-      });
-
-      if (isOpen && hasChildren) {
-        result.push(...flattenTree(children ?? [], depth + 1));
-      }
-    }
-    return result;
-  }
-
   function collectNonLeafIds(itemsList: readonly TreeItem[]): unknown[] {
     const allIds: unknown[] = [];
     for (const item of itemsList) {
@@ -242,7 +124,8 @@ function useVirtualTree(
     return allIds;
   }
 
-  const displayItems = computed(() => flattenTree(props.value.items ?? []));
+  const flattenContext = { props, actualItemProps, openedSet, activeSet, getChildrenOf };
+  const displayItems = computed(() => flattenTree(flattenContext, props.value.items ?? []));
 
   watch(
     () => props.value.search,
@@ -267,5 +150,11 @@ function useVirtualTree(
   };
 }
 
+export type {
+  DisplayItem,
+  EmitFn,
+  ItemPropsConfig,
+  SelectionConfig,
+  TreeItem,
+} from "./virtual_tree_types";
 export { useVirtualTree };
-export type { TreeItem, ItemPropsConfig, SelectionConfig, DisplayItem, EmitFn };
diff --git a/app/composables/virtual_tree_flatten.ts b/app/composables/virtual_tree_flatten.ts
new file mode 100644
index 000000000..eb48ebfc0
--- /dev/null
+++ b/app/composables/virtual_tree_flatten.ts
@@ -0,0 +1,79 @@
+import type { ComputedRef, Ref } from "vue";
+import {
+  type DisplayItem,
+  type ItemPropsConfig,
+  type TreeItem,
+  type VirtualTreeProps,
+  toDisplayString,
+} from "./virtual_tree_types";
+
+interface FlattenContext {
+  props: Ref<VirtualTreeProps>;
+  actualItemProps: ComputedRef<ItemPropsConfig>;
+  openedSet: ComputedRef<Set<unknown>>;
+  activeSet: ComputedRef<Set<unknown>>;
+  getChildrenOf: (item: TreeItem) => TreeItem[] | undefined;
+}
+
+function flattenTree(ctx: FlattenContext, nodes: readonly TreeItem[], depth = 0): DisplayItem[] {
+  const { search, customFilter } = ctx.props.value;
+  const result: DisplayItem[] = [];
+
+  for (const item of nodes) {
+    const id = item[ctx.actualItemProps.value.value];
+    const children = ctx.getChildrenOf(item);
+    const hasChildren = Boolean(children && children.length > 0);
+
+    const isOpen = ctx.openedSet.value.has(id);
+    const isActive = ctx.activeSet.value.has(id);
+
+    if (search !== undefined && search !== "") {
+      const lowerSearch = search.toLowerCase();
+      const matches = customFilter
+        ? customFilter(id, search, { raw: item })
+        : toDisplayString(item[ctx.actualItemProps.value.title])
+            .toLowerCase()
+            .includes(lowerSearch) || toDisplayString(id).toLowerCase().includes(lowerSearch);
+
+      if (hasChildren) {
+        const subtree = flattenTree(ctx, children ?? [], depth + 1);
+        if (subtree.length === 0 && !matches) {
+          continue;
+        }
+
+        result.push({
+          raw: item,
+          id,
+          depth,
+          isOpen,
+          isActive,
+          isLeaf: false,
+        });
+        if (isOpen) {
+          result.push(...subtree);
+        }
+        continue;
+      }
+      if (!matches) {
+        continue;
+      }
+    }
+
+    result.push({
+      raw: item,
+      id,
+      depth,
+      isOpen,
+      isActive,
+      isLeaf: !hasChildren,
+    });
+
+    if (isOpen && hasChildren) {
+      result.push(...flattenTree(ctx, children ?? [], depth + 1));
+    }
+  }
+  return result;
+}
+
+export { flattenTree };
+export type { FlattenContext };
diff --git a/app/composables/virtual_tree_types.ts b/app/composables/virtual_tree_types.ts
new file mode 100644
index 000000000..bc067f635
--- /dev/null
+++ b/app/composables/virtual_tree_types.ts
@@ -0,0 +1,81 @@
+import type { ComputedRef, Ref } from "vue";
+
+// Same shape as Vue's MaybeRefOrGetter<T>, kept as a local alias for readability at call sites.
+type ReadonlyMaybeRefOrGetter<Value> = Value | Ref<Value> | (() => Value);
+
+type TreeItem = Record<string, unknown>;
+
+interface ItemPropsConfig {
+  value: string;
+  title: string;
+  children: string;
+  height: number;
+  [key: string]: unknown;
+}
+
+interface SelectionConfig {
+  selectable: boolean;
+  strategy: string;
+  [key: string]: unknown;
+}
+
+interface VirtualTreeProps {
+  readonly items?: readonly TreeItem[];
+  readonly opened?: readonly unknown[];
+  readonly selected?: readonly unknown[];
+  readonly active?: readonly unknown[];
+  readonly itemProps?: Partial<ItemPropsConfig>;
+  readonly selection?: Partial<SelectionConfig>;
+  readonly search?: string;
+  readonly customFilter?: (id: unknown, search: string, context: { raw: TreeItem }) => boolean;
+}
+
+interface DisplayItem {
+  raw: TreeItem;
+  id: unknown;
+  depth: number;
+  isOpen: boolean;
+  isActive: boolean;
+  isLeaf: boolean;
+}
+
+type EmitFn = (event: string, ...args: readonly unknown[]) => void;
+
+interface UseVirtualTreeReturn {
+  actualItemProps: ComputedRef<ItemPropsConfig>;
+  actualSelection: ComputedRef<SelectionConfig>;
+  displayItems: ComputedRef<DisplayItem[]>;
+  toggleOpen: (item: TreeItem) => void;
+  toggleSelect: (item: TreeItem) => void;
+  isSelected: (item: TreeItem) => boolean;
+  getIndeterminate: (item: TreeItem) => boolean;
+}
+
+// Real runtime check (rather than an `as TreeItem[]` cast) for the duck-typed "children" field:
+// Item shapes vary across callers (treeview groups, model component/collection groups, ...), so
+// This only verifies it is actually an array, same as the assumption the old cast silently made.
+function isTreeItemArray(value: unknown): value is TreeItem[] {
+  return Array.isArray(value);
+}
+
+// Extracted so we never call String() directly on a value typed as `unknown` (ids and titles can
+// Be anything at runtime): only stringify primitives that have a sane toString, and fall back to
+// "" for anything else instead of risking "[object Object]".
+function toDisplayString(value: unknown): string {
+  if (typeof value === "string" || typeof value === "number" || typeof value === "boolean") {
+    return String(value);
+  }
+  return "";
+}
+
+export { isTreeItemArray, toDisplayString };
+export type {
+  DisplayItem,
+  EmitFn,
+  ItemPropsConfig,
+  ReadonlyMaybeRefOrGetter,
+  SelectionConfig,
+  TreeItem,
+  UseVirtualTreeReturn,
+  VirtualTreeProps,
+};
diff --git a/app/stores/app.ts b/app/stores/app.ts
index 56849d428..d2b503351 100644
--- a/app/stores/app.ts
+++ b/app/stores/app.ts
@@ -1,6 +1,9 @@
-import { consola } from "consola";
-
 // Local imports
+import {
+  type RegisterableStore,
+  exportRegisteredStores,
+  importRegisteredStores,
+} from "./app_helpers/registry.js";
 import { getRestApiPort, getRestApiProtocol, isCloudMode } from "@ogw_front/utils/stores.js";
 import { Status } from "@ogw_front/utils/status";
 import { api_fetch } from "@ogw_internal/utils/api_fetch.js";
@@ -27,16 +30,6 @@ declare module "pinia" {
   }
 }
 
-interface RegisterableStore {
-  $id: string;
-  $patch?: (partial: Record<string, unknown>) => void;
-  exportStores?: (params?: Record<string, unknown>) => Promise<unknown>;
-  importStores?: (snapshot: unknown) => Promise<void> | void;
-  connect?: () => Promise<void>;
-  kill?: () => Promise<void>;
-  [key: string]: unknown;
-}
-
 // oxlint-disable-next-line max-lines-per-function, max-statements
 export const useAppStore = defineStore("app", () => {
   const stores: RegisterableStore[] = [];
@@ -85,52 +78,12 @@ export const useAppStore = defineStore("app", () => {
   async function exportStores(
     params: Record<string, unknown> = {},
   ): Promise<Record<string, unknown>> {
-    const snapshot: Record<string, unknown> = {};
-
-    await Promise.all(
-      stores.map(async (store: RegisterableStore) => {
-        if (!store.exportStores) {
-          return;
-        }
-        const storeId = store.$id;
-        try {
-          snapshot[storeId] = await store.exportStores(params);
-        } catch {
-          // Ignore stores that fail to export; other stores still complete independently.
-        }
-      }),
-    );
+    const snapshot = await exportRegisteredStores(stores, params);
     return snapshot;
   }
 
   async function importStores(snapshot: Record<string, unknown> | undefined): Promise<void> {
-    if (!snapshot) {
-      return;
-    }
-
-    const missingStoreIds: string[] = [];
-
-    await Promise.all(
-      stores.map(async (store: RegisterableStore) => {
-        if (!store.importStores) {
-          return;
-        }
-        const storeId = store.$id;
-        if (snapshot[storeId] === undefined) {
-          missingStoreIds.push(storeId);
-          return;
-        }
-        try {
-          await store.importStores(snapshot[storeId]);
-        } catch {
-          // Ignore stores that fail to import; other stores still complete independently.
-        }
-      }),
-    );
-
-    if (missingStoreIds.length > 0) {
-      consola.warn(`Stores not found in snapshot: ${missingStoreIds.join(", ")}`);
-    }
+    await importRegisteredStores(stores, snapshot);
   }
 
   const {
@@ -253,4 +206,4 @@ export const useAppStore = defineStore("app", () => {
   };
 });
 
-export type { RegisterableStore };
+export type { RegisterableStore } from "./app_helpers/registry.js";
diff --git a/app/stores/app_helpers/registry.ts b/app/stores/app_helpers/registry.ts
new file mode 100644
index 000000000..fd62bba05
--- /dev/null
+++ b/app/stores/app_helpers/registry.ts
@@ -0,0 +1,69 @@
+import { consola } from "consola";
+
+interface RegisterableStore {
+  $id: string;
+  $patch?: (partial: Record<string, unknown>) => void;
+  exportStores?: (params?: Record<string, unknown>) => Promise<unknown>;
+  importStores?: (snapshot: unknown) => Promise<void> | void;
+  connect?: () => Promise<void>;
+  kill?: () => Promise<void>;
+  [key: string]: unknown;
+}
+
+async function exportRegisteredStores(
+  stores: readonly RegisterableStore[],
+  params: Record<string, unknown> = {},
+): Promise<Record<string, unknown>> {
+  const snapshot: Record<string, unknown> = {};
+
+  await Promise.all(
+    stores.map(async (store: RegisterableStore) => {
+      if (!store.exportStores) {
+        return;
+      }
+      const storeId = store.$id;
+      try {
+        snapshot[storeId] = await store.exportStores(params);
+      } catch {
+        // Ignore stores that fail to export; other stores still complete independently.
+      }
+    }),
+  );
+  return snapshot;
+}
+
+async function importRegisteredStores(
+  stores: readonly RegisterableStore[],
+  snapshot: Record<string, unknown> | undefined,
+): Promise<void> {
+  if (!snapshot) {
+    return;
+  }
+
+  const missingStoreIds: string[] = [];
+
+  await Promise.all(
+    stores.map(async (store: RegisterableStore) => {
+      if (!store.importStores) {
+        return;
+      }
+      const storeId = store.$id;
+      if (snapshot[storeId] === undefined) {
+        missingStoreIds.push(storeId);
+        return;
+      }
+      try {
+        await store.importStores(snapshot[storeId]);
+      } catch {
+        // Ignore stores that fail to import; other stores still complete independently.
+      }
+    }),
+  );
+
+  if (missingStoreIds.length > 0) {
+    consola.warn(`Stores not found in snapshot: ${missingStoreIds.join(", ")}`);
+  }
+}
+
+export { exportRegisteredStores, importRegisteredStores };
+export type { RegisterableStore };
diff --git a/app/stores/menu.ts b/app/stores/menu.ts
index c66dd1c83..712e54c65 100644
--- a/app/stores/menu.ts
+++ b/app/stores/menu.ts
@@ -1,46 +1,4 @@
-// PointSet components
-import PointSetPointsOptions from "@ogw_front/components/Viewer/PointSet/SpecificPointsOptions.vue";
-
-// EdgedCurve components
-import EdgedCurveEdgesOptions from "@ogw_front/components/Viewer/EdgedCurve/SpecificEdgesOptions.vue";
-import EdgedCurvePointsOptions from "@ogw_front/components/Viewer/EdgedCurve/PointsOptions.vue";
-
-// Surface components
-import SurfaceEdgesOptions from "@ogw_front/components/Viewer/Surface/EdgesOptions.vue";
-import SurfacePointsOptions from "@ogw_front/components/Viewer/Surface/PointsOptions.vue";
-import SurfacePolygonsOptions from "@ogw_front/components/Viewer/Surface/PolygonsOptions.vue";
-
-// TriangulatedSurface components
-import TriangulatedSurfaceTrianglesOptions from "@ogw_front/components/Viewer/Surface/Triangulated/TrianglesOptions.vue";
-
-// Grid 2D components
-import Grid2DCellsOptions from "@ogw_front/components/Viewer/Grid/2D/CellsOptions.vue";
-import Grid2DEdgesOptions from "@ogw_front/components/Viewer/Grid/2D/EdgesOptions.vue";
-import Grid2DPointsOptions from "@ogw_front/components/Viewer/Grid/2D/PointsOptions.vue";
-
-// Grid 3D components
-import Grid3DCellsOptions from "@ogw_front/components/Viewer/Grid/3D/CellsOptions.vue";
-import Grid3DEdgesOptions from "@ogw_front/components/Viewer/Grid/3D/EdgesOptions.vue";
-import Grid3DPointsOptions from "@ogw_front/components/Viewer/Grid/3D/PointsOptions.vue";
-
-// Solid components
-import SolidEdgesOptions from "@ogw_front/components/Viewer/Solid/EdgesOptions.vue";
-import SolidPointsOptions from "@ogw_front/components/Viewer/Solid/PointsOptions.vue";
-import SolidPolygonsOptions from "@ogw_front/components/Viewer/Solid/PolygonsOptions.vue";
-import SolidPolyhedraOptions from "@ogw_front/components/Viewer/Solid/SpecificPolyhedraOptions.vue";
-
-// TetrahedralSolid components
-import TetrahedralSolidTetrahedraOptions from "@ogw_front/components/Viewer/TetrahedralSolid/TetrahedraOptions.vue";
-import TetrahedralSolidTrianglesOptions from "@ogw_front/components/Viewer/TetrahedralSolid/TrianglesOptions.vue";
-
-// Model components
-import ModelEdgesOptions from "@ogw_front/components/Viewer/Generic/Model/EdgesOptions.vue";
-import ModelPointsOptions from "@ogw_front/components/Viewer/Generic/Model/PointsOptions.vue";
-import ModelStyleOptions from "@ogw_front/components/Viewer/Generic/Model/ModelStyleOptions.vue";
-
-import type { Component } from "vue";
-
-type MenuItems = Component[];
+import { type MenuItems, menusData } from "./menu_helpers/menus_data.js";
 
 interface MenuMetaData {
   viewer_type?: string;
@@ -60,87 +18,6 @@ interface OpenMenuOptions {
   readonly meta_data: MenuMetaData | undefined;
 }
 
-const PointSet_menu = [PointSetPointsOptions];
-
-const EdgedCurve_menu = [EdgedCurvePointsOptions, EdgedCurveEdgesOptions];
-
-const PolygonalSurface_menu = [SurfacePointsOptions, SurfaceEdgesOptions, SurfacePolygonsOptions];
-
-const TriangulatedSurface_menu = [
-  SurfacePointsOptions,
-  SurfaceEdgesOptions,
-  TriangulatedSurfaceTrianglesOptions,
-];
-
-const Grid2D_menu = [Grid2DPointsOptions, Grid2DEdgesOptions, Grid2DCellsOptions];
-const Grid3D_menu = [
-  Grid3DPointsOptions,
-  Grid3DEdgesOptions,
-  // Grid3DFacetsOptions,
-  Grid3DCellsOptions,
-];
-
-const Solid_menu = [
-  SolidPointsOptions,
-  SolidEdgesOptions,
-  SolidPolygonsOptions,
-  SolidPolyhedraOptions,
-];
-
-const TetrahedralSolid_menu = [
-  SolidPointsOptions,
-  SolidEdgesOptions,
-  TetrahedralSolidTrianglesOptions,
-  TetrahedralSolidTetrahedraOptions,
-];
-
-const BRep_menu = [ModelEdgesOptions, ModelPointsOptions, ModelStyleOptions];
-
-const CrossSection_menu = [ModelEdgesOptions, ModelPointsOptions, ModelStyleOptions];
-
-const ImplicitCrossSection_menu = [ModelEdgesOptions, ModelPointsOptions, ModelStyleOptions];
-const ImplicitStructuralModel_menu = [ModelEdgesOptions, ModelPointsOptions, ModelStyleOptions];
-
-const Section_menu = [ModelEdgesOptions, ModelPointsOptions, ModelStyleOptions];
-
-const StructuralModel_menu = [ModelEdgesOptions, ModelPointsOptions, ModelStyleOptions];
-
-const ModelComponent_menu = [ModelEdgesOptions, ModelPointsOptions, ModelStyleOptions];
-
-const menusData: Record<string, Record<string, MenuItems>> = {
-  mesh: {
-    EdgedCurve2D: EdgedCurve_menu,
-    EdgedCurve3D: EdgedCurve_menu,
-    HybridSolid3D: Solid_menu,
-    LightRegularGrid2D: Grid2D_menu,
-    LightRegularGrid3D: Grid3D_menu,
-    PointSet2D: PointSet_menu,
-    PointSet3D: PointSet_menu,
-    PolygonalSurface2D: PolygonalSurface_menu,
-    PolygonalSurface3D: PolygonalSurface_menu,
-    PolyhedralSolid3D: Solid_menu,
-    RegularGrid2D: Grid2D_menu,
-    RegularGrid3D: Grid3D_menu,
-    TetrahedralSolid3D: TetrahedralSolid_menu,
-    TriangulatedSurface2D: TriangulatedSurface_menu,
-    TriangulatedSurface3D: TriangulatedSurface_menu,
-  },
-  model: {
-    BRep: BRep_menu,
-    CrossSection: CrossSection_menu,
-    ImplicitCrossSection: ImplicitCrossSection_menu,
-    ImplicitStructuralModel: ImplicitStructuralModel_menu,
-    Section: Section_menu,
-    StructuralModel: StructuralModel_menu,
-  },
-  model_component_type: {
-    type: ModelComponent_menu,
-  },
-  model_component: {
-    component: ModelComponent_menu,
-  },
-};
-
 export const useMenuStore = defineStore("menu", () => {
   const menus = shallowRef(menusData);
   const display_menu = ref(false);
diff --git a/app/stores/menu_helpers/menus_data.ts b/app/stores/menu_helpers/menus_data.ts
new file mode 100644
index 000000000..27187d09f
--- /dev/null
+++ b/app/stores/menu_helpers/menus_data.ts
@@ -0,0 +1,127 @@
+// PointSet components
+import PointSetPointsOptions from "@ogw_front/components/Viewer/PointSet/SpecificPointsOptions.vue";
+
+// EdgedCurve components
+import EdgedCurveEdgesOptions from "@ogw_front/components/Viewer/EdgedCurve/SpecificEdgesOptions.vue";
+import EdgedCurvePointsOptions from "@ogw_front/components/Viewer/EdgedCurve/PointsOptions.vue";
+
+// Surface components
+import SurfaceEdgesOptions from "@ogw_front/components/Viewer/Surface/EdgesOptions.vue";
+import SurfacePointsOptions from "@ogw_front/components/Viewer/Surface/PointsOptions.vue";
+import SurfacePolygonsOptions from "@ogw_front/components/Viewer/Surface/PolygonsOptions.vue";
+
+// TriangulatedSurface components
+import TriangulatedSurfaceTrianglesOptions from "@ogw_front/components/Viewer/Surface/Triangulated/TrianglesOptions.vue";
+
+// Grid 2D components
+import Grid2DCellsOptions from "@ogw_front/components/Viewer/Grid/2D/CellsOptions.vue";
+import Grid2DEdgesOptions from "@ogw_front/components/Viewer/Grid/2D/EdgesOptions.vue";
+import Grid2DPointsOptions from "@ogw_front/components/Viewer/Grid/2D/PointsOptions.vue";
+
+// Grid 3D components
+import Grid3DCellsOptions from "@ogw_front/components/Viewer/Grid/3D/CellsOptions.vue";
+import Grid3DEdgesOptions from "@ogw_front/components/Viewer/Grid/3D/EdgesOptions.vue";
+import Grid3DPointsOptions from "@ogw_front/components/Viewer/Grid/3D/PointsOptions.vue";
+
+// Solid components
+import SolidEdgesOptions from "@ogw_front/components/Viewer/Solid/EdgesOptions.vue";
+import SolidPointsOptions from "@ogw_front/components/Viewer/Solid/PointsOptions.vue";
+import SolidPolygonsOptions from "@ogw_front/components/Viewer/Solid/PolygonsOptions.vue";
+import SolidPolyhedraOptions from "@ogw_front/components/Viewer/Solid/SpecificPolyhedraOptions.vue";
+
+// TetrahedralSolid components
+import TetrahedralSolidTetrahedraOptions from "@ogw_front/components/Viewer/TetrahedralSolid/TetrahedraOptions.vue";
+import TetrahedralSolidTrianglesOptions from "@ogw_front/components/Viewer/TetrahedralSolid/TrianglesOptions.vue";
+
+// Model components
+import ModelEdgesOptions from "@ogw_front/components/Viewer/Generic/Model/EdgesOptions.vue";
+import ModelPointsOptions from "@ogw_front/components/Viewer/Generic/Model/PointsOptions.vue";
+import ModelStyleOptions from "@ogw_front/components/Viewer/Generic/Model/ModelStyleOptions.vue";
+
+import type { Component } from "vue";
+
+type MenuItems = Component[];
+
+const PointSet_menu = [PointSetPointsOptions];
+
+const EdgedCurve_menu = [EdgedCurvePointsOptions, EdgedCurveEdgesOptions];
+
+const PolygonalSurface_menu = [SurfacePointsOptions, SurfaceEdgesOptions, SurfacePolygonsOptions];
+
+const TriangulatedSurface_menu = [
+  SurfacePointsOptions,
+  SurfaceEdgesOptions,
+  TriangulatedSurfaceTrianglesOptions,
+];
+
+const Grid2D_menu = [Grid2DPointsOptions, Grid2DEdgesOptions, Grid2DCellsOptions];
+const Grid3D_menu = [
+  Grid3DPointsOptions,
+  Grid3DEdgesOptions,
+  // Grid3DFacetsOptions,
+  Grid3DCellsOptions,
+];
+
+const Solid_menu = [
+  SolidPointsOptions,
+  SolidEdgesOptions,
+  SolidPolygonsOptions,
+  SolidPolyhedraOptions,
+];
+
+const TetrahedralSolid_menu = [
+  SolidPointsOptions,
+  SolidEdgesOptions,
+  TetrahedralSolidTrianglesOptions,
+  TetrahedralSolidTetrahedraOptions,
+];
+
+const BRep_menu = [ModelEdgesOptions, ModelPointsOptions, ModelStyleOptions];
+
+const CrossSection_menu = [ModelEdgesOptions, ModelPointsOptions, ModelStyleOptions];
+
+const ImplicitCrossSection_menu = [ModelEdgesOptions, ModelPointsOptions, ModelStyleOptions];
+const ImplicitStructuralModel_menu = [ModelEdgesOptions, ModelPointsOptions, ModelStyleOptions];
+
+const Section_menu = [ModelEdgesOptions, ModelPointsOptions, ModelStyleOptions];
+
+const StructuralModel_menu = [ModelEdgesOptions, ModelPointsOptions, ModelStyleOptions];
+
+const ModelComponent_menu = [ModelEdgesOptions, ModelPointsOptions, ModelStyleOptions];
+
+const menusData: Record<string, Record<string, MenuItems>> = {
+  mesh: {
+    EdgedCurve2D: EdgedCurve_menu,
+    EdgedCurve3D: EdgedCurve_menu,
+    HybridSolid3D: Solid_menu,
+    LightRegularGrid2D: Grid2D_menu,
+    LightRegularGrid3D: Grid3D_menu,
+    PointSet2D: PointSet_menu,
+    PointSet3D: PointSet_menu,
+    PolygonalSurface2D: PolygonalSurface_menu,
+    PolygonalSurface3D: PolygonalSurface_menu,
+    PolyhedralSolid3D: Solid_menu,
+    RegularGrid2D: Grid2D_menu,
+    RegularGrid3D: Grid3D_menu,
+    TetrahedralSolid3D: TetrahedralSolid_menu,
+    TriangulatedSurface2D: TriangulatedSurface_menu,
+    TriangulatedSurface3D: TriangulatedSurface_menu,
+  },
+  model: {
+    BRep: BRep_menu,
+    CrossSection: CrossSection_menu,
+    ImplicitCrossSection: ImplicitCrossSection_menu,
+    ImplicitStructuralModel: ImplicitStructuralModel_menu,
+    Section: Section_menu,
+    StructuralModel: StructuralModel_menu,
+  },
+  model_component_type: {
+    type: ModelComponent_menu,
+  },
+  model_component: {
+    component: ModelComponent_menu,
+  },
+};
+
+export { menusData };
+export type { MenuItems };
diff --git a/app/stores/viewer.ts b/app/stores/viewer.ts
index c81a34dd1..9333f65dc 100644
--- a/app/stores/viewer.ts
+++ b/app/stores/viewer.ts
@@ -4,24 +4,26 @@ import "@kitware/vtk.js/Rendering/OpenGL/Profiles/Geometry";
 import type { Vector3 } from "@kitware/vtk.js/types";
 import { connectImageStream } from "@kitware/vtk.js/Rendering/Misc/RemoteView";
 import { initWebSocketClient } from "@ogw_internal/utils/ws_client";
-import opengeodeweb_front_schemas from "@geode/opengeodeweb-front/opengeodeweb_front_typed_schemas.js";
 import opengeodeweb_viewer_schemas from "@geode/opengeodeweb-viewer/opengeodeweb_viewer_typed_schemas.js";
 
 // Local imports
+import { type ViewerRequestArgs, callViewer } from "./viewer_helpers/request.js";
+import {
+  fetchViewerVersion,
+  launchViewerMicroservice,
+  pickWorldPosition,
+} from "./viewer_helpers/actions.js";
 import {
   getWebsocketApiPort,
   getWebsocketApiProtocol,
   isCloudMode,
 } from "@ogw_front/utils/stores.js";
 import { Status } from "@ogw_front/utils/status";
-import { useAppStore } from "@ogw_front/stores/app";
 import { useInfraStore } from "@ogw_front/stores/infra";
-import { viewer_call } from "@ogw_internal/utils/viewer_call";
 
 import type {
   JsonRpcSchema,
   MicroserviceVersionSchema,
-  ParamsOf,
   RequestHandlers,
   ResponseOf,
 } from "@ogw_shared/utils/types.js";
@@ -34,9 +36,6 @@ interface PickedPoint {
   z: number | undefined;
 }
 
-const MS_PER_SECOND = 1000;
-const SECONDS_PER_REQUEST = 10;
-const request_timeout = MS_PER_SECOND * SECONDS_PER_REQUEST;
 export const useViewerStore = defineStore(
   "viewer",
   // oxlint-disable-next-line max-lines-per-function, max-statements
@@ -77,15 +76,7 @@ export const useViewerStore = defineStore(
     }
     // oxlint-disable-next-line unicorn/consistent-function-scoping
     async function request<Schema extends JsonRpcSchema>(
-      {
-        schema,
-        params,
-        timeout = request_timeout,
-      }: {
-        schema: Schema;
-        params?: ParamsOf<Schema>;
-        timeout?: number;
-      },
+      args: ViewerRequestArgs<Schema>,
       callbacks: RequestHandlers<ResponseOf<Schema>> = {},
     ): Promise<ResponseOf<Schema>> {
       const microservice = {
@@ -95,38 +86,12 @@ export const useViewerStore = defineStore(
         start_request,
         stop_request,
       };
-      const result = await viewer_call(
-        microservice,
-        {
-          schema,
-          params: params ?? {},
-          timeout,
-        },
-        {
-          ...callbacks,
-          response_function: async (response: unknown) => {
-            if (callbacks.response_function) {
-              // The viewer validates its responses against the schema `response` it was generated from.
-              // oxlint-disable-next-line typescript/no-unsafe-type-assertion
-              await callbacks.response_function(response as ResponseOf<Schema>);
-            }
-          },
-        },
-      );
-      // oxlint-disable-next-line typescript/no-unsafe-type-assertion
-      return result as ResponseOf<Schema>;
+      const result = await callViewer(microservice, args, callbacks);
+      return result;
     }
     async function pick_world_position(x: number, y: number): Promise<Vector3> {
-      const schema = opengeodeweb_viewer_schemas.opengeodeweb_viewer.viewer.get_point_position;
-      const {
-        x: world_x,
-        y: world_y,
-        z: world_z,
-      } = await request({
-        schema,
-        params: { x: Math.round(x), y: Math.round(y) },
-      });
-      return [world_x, world_y, world_z];
+      const position = await pickWorldPosition(request, x, y);
+      return position;
     }
     async function set_picked_point(x: number, y: number): Promise<void> {
       const [world_x, world_y, world_z] = await pick_world_position(x, y);
@@ -166,25 +131,9 @@ export const useViewerStore = defineStore(
       });
     }
     async function launch(args: Readonly<{ projectFolderPath: string }>): Promise<unknown> {
-      const appStore = useAppStore();
-      const { COMMAND_VIEWER, NUXT_ROOT_PATH } = useRuntimeConfig().public;
-      const schema = opengeodeweb_front_schemas.api.local.app.run_viewer;
-      const params = {
-        COMMAND_VIEWER,
-        NUXT_ROOT_PATH,
-        args,
-      };
-      const result = await appStore.request(
-        {
-          schema,
-          params,
-        },
-        {
-          response_function: (response) => {
-            default_local_port.value = String(response.port);
-          },
-        },
-      );
+      const result = await launchViewerMicroservice(args, (new_port) => {
+        default_local_port.value = new_port;
+      });
       return result;
     }
     async function connect(): Promise<void> {
@@ -193,19 +142,9 @@ export const useViewerStore = defineStore(
     async function get_version(
       schema: MicroserviceVersionSchema | undefined,
     ): Promise<{ microservice_version: string } | undefined> {
-      if (!schema) {
-        return undefined;
-      }
-      const result = await request(
-        {
-          schema,
-        },
-        {
-          response_function: ({ microservice_version }) => {
-            version.value = microservice_version;
-          },
-        },
-      );
+      const result = await fetchViewerVersion(request, schema, (microservice_version) => {
+        version.value = microservice_version;
+      });
       return result;
     }
     return {
diff --git a/app/stores/viewer_helpers/actions.ts b/app/stores/viewer_helpers/actions.ts
new file mode 100644
index 000000000..48feba29b
--- /dev/null
+++ b/app/stores/viewer_helpers/actions.ts
@@ -0,0 +1,68 @@
+import type { MicroserviceVersionSchema } from "@ogw_shared/utils/types.js";
+import type { Vector3 } from "@kitware/vtk.js/types";
+import type { ViewerRequest } from "./request.js";
+import opengeodeweb_front_schemas from "@geode/opengeodeweb-front/opengeodeweb_front_typed_schemas.js";
+import opengeodeweb_viewer_schemas from "@geode/opengeodeweb-viewer/opengeodeweb_viewer_typed_schemas.js";
+import { useAppStore } from "@ogw_front/stores/app";
+
+async function pickWorldPosition(request: ViewerRequest, x: number, y: number): Promise<Vector3> {
+  const schema = opengeodeweb_viewer_schemas.opengeodeweb_viewer.viewer.get_point_position;
+  const {
+    x: world_x,
+    y: world_y,
+    z: world_z,
+  } = await request({
+    schema,
+    params: { x: Math.round(x), y: Math.round(y) },
+  });
+  return [world_x, world_y, world_z];
+}
+
+async function launchViewerMicroservice(
+  args: Readonly<{ projectFolderPath: string }>,
+  onPort: (port: string) => void,
+): Promise<unknown> {
+  const appStore = useAppStore();
+  const { COMMAND_VIEWER, NUXT_ROOT_PATH } = useRuntimeConfig().public;
+  const schema = opengeodeweb_front_schemas.api.local.app.run_viewer;
+  const params = {
+    COMMAND_VIEWER,
+    NUXT_ROOT_PATH,
+    args,
+  };
+  const result = await appStore.request(
+    {
+      schema,
+      params,
+    },
+    {
+      response_function: (response) => {
+        onPort(String(response.port));
+      },
+    },
+  );
+  return result;
+}
+
+async function fetchViewerVersion(
+  request: ViewerRequest,
+  schema: MicroserviceVersionSchema | undefined,
+  onVersion: (version: string) => void,
+): Promise<{ microservice_version: string } | undefined> {
+  if (!schema) {
+    return undefined;
+  }
+  const result = await request(
+    {
+      schema,
+    },
+    {
+      response_function: ({ microservice_version }) => {
+        onVersion(microservice_version);
+      },
+    },
+  );
+  return result;
+}
+
+export { fetchViewerVersion, launchViewerMicroservice, pickWorldPosition };
diff --git a/app/stores/viewer_helpers/request.ts b/app/stores/viewer_helpers/request.ts
new file mode 100644
index 000000000..b5674775e
--- /dev/null
+++ b/app/stores/viewer_helpers/request.ts
@@ -0,0 +1,61 @@
+import type {
+  JsonRpcSchema,
+  ParamsOf,
+  RequestHandlers,
+  ResponseOf,
+} from "@ogw_shared/utils/types.js";
+import type { RpcClient } from "@ogw_shared/utils/call_raw.js";
+import { viewer_call } from "@ogw_internal/utils/viewer_call";
+
+interface ViewerRequestMicroservice {
+  $id: string;
+  client: RpcClient;
+  base_url: string;
+  start_request: () => void;
+  stop_request: () => void;
+}
+
+interface ViewerRequestArgs<Schema extends JsonRpcSchema> {
+  schema: Schema;
+  params?: ParamsOf<Schema>;
+  timeout?: number;
+}
+
+type ViewerRequest = <Schema extends JsonRpcSchema>(
+  args: ViewerRequestArgs<Schema>,
+  callbacks?: RequestHandlers<ResponseOf<Schema>>,
+) => Promise<ResponseOf<Schema>>;
+
+const MS_PER_SECOND = 1000;
+const SECONDS_PER_REQUEST = 10;
+const request_timeout = MS_PER_SECOND * SECONDS_PER_REQUEST;
+
+async function callViewer<Schema extends JsonRpcSchema>(
+  microservice: ViewerRequestMicroservice,
+  { schema, params, timeout = request_timeout }: ViewerRequestArgs<Schema>,
+  callbacks: RequestHandlers<ResponseOf<Schema>> = {},
+): Promise<ResponseOf<Schema>> {
+  const result = await viewer_call(
+    microservice,
+    {
+      schema,
+      params: params ?? {},
+      timeout,
+    },
+    {
+      ...callbacks,
+      response_function: async (response: unknown) => {
+        if (callbacks.response_function) {
+          // The viewer validates its responses against the schema `response` it was generated from.
+          // oxlint-disable-next-line typescript/no-unsafe-type-assertion
+          await callbacks.response_function(response as ResponseOf<Schema>);
+        }
+      },
+    },
+  );
+  // oxlint-disable-next-line typescript/no-unsafe-type-assertion
+  return result as ResponseOf<Schema>;
+}
+
+export { callViewer };
+export type { ViewerRequest, ViewerRequestArgs };
diff --git a/app/utils/clipping_planes.ts b/app/utils/clipping_planes.ts
index 006cb2eb1..7c94a796b 100644
--- a/app/utils/clipping_planes.ts
+++ b/app/utils/clipping_planes.ts
@@ -1,7 +1,3 @@
-import type { Bounds } from "@kitware/vtk.js/types";
-import type vtkActor from "@kitware/vtk.js/Rendering/Core/Actor";
-import type { vtkCamera } from "@kitware/vtk.js/Rendering/Core/Camera";
-
 const AXIS_SCALE = 0.45;
 const SIZE_RATIO = 0.1;
 const DEBOUNCE_DELAY = 200;
@@ -79,130 +75,6 @@ function getPlaneStyle(rgb: readonly number[]): PlaneStyle {
   };
 }
 
-function computeSceneBounds(actors: readonly vtkActor[]): Bounds {
-  let bounds: Bounds = [Infinity, -Infinity, Infinity, -Infinity, Infinity, -Infinity];
-  for (const actor of actors) {
-    const boundsOfActor = actor.getBounds();
-    bounds = [
-      Math.min(bounds[0], boundsOfActor[0]),
-      Math.max(bounds[1], boundsOfActor[1]),
-      Math.min(bounds[2], boundsOfActor[2]),
-      Math.max(bounds[3], boundsOfActor[3]),
-      Math.min(bounds[4], boundsOfActor[4]),
-      Math.max(bounds[5], boundsOfActor[5]),
-    ];
-  }
-  return bounds;
-}
-
-interface SceneBoundsInfo {
-  readonly center: readonly number[];
-  readonly cubicBounds: readonly number[];
-}
-
-function computeSceneBoundsInfo(actors: readonly vtkActor[]): SceneBoundsInfo {
-  if (actors.length === 0) {
-    return { center: [0, 0, 0], cubicBounds: [-1, 1, -1, 1, -1, 1] };
-  }
-  const [xmin, xmax, ymin, ymax, zmin, zmax] = computeSceneBounds(actors);
-  const center = [
-    Number(((xmin + xmax) / 2).toFixed(4)),
-    Number(((ymin + ymax) / 2).toFixed(4)),
-    Number(((zmin + zmax) / 2).toFixed(4)),
-  ];
-
-  const maxActorExtent = Math.max(
-    ...actors.map((actor: vtkActor) => {
-      const bounds = actor.getBounds();
-      return Math.max(bounds[1] - bounds[0], bounds[3] - bounds[2], bounds[5] - bounds[4]);
-    }),
-  );
-  const halfExtent = maxActorExtent / 2;
-  const [centerX = 0, centerY = 0, centerZ = 0] = center;
-  const cubicBounds = [
-    centerX - halfExtent,
-    centerX + halfExtent,
-    centerY - halfExtent,
-    centerY + halfExtent,
-    centerZ - halfExtent,
-    centerZ + halfExtent,
-  ];
-  return { center, cubicBounds };
-}
-
-interface ActorEntry {
-  readonly actor: vtkActor;
-}
-
-interface MainCameraOptions {
-  readonly focal_point?: readonly number[];
-  readonly position?: readonly number[];
-  readonly view_up?: readonly number[];
-}
-
-function resolveActiveActors(
-  targetAllVisible: boolean,
-  allItems: readonly { readonly id: string }[],
-  selectedDatasetIds: readonly string[],
-  hybridDb: Record<string, ActorEntry | undefined>,
-): vtkActor[] {
-  const targetIds = targetAllVisible
-    ? allItems.map((item: { id: string }) => item.id)
-    : selectedDatasetIds;
-  const targeted = targetIds
-    .map((id) => hybridDb[id]?.actor)
-    .filter((actor: vtkActor | undefined): actor is vtkActor => actor !== undefined);
-  if (targeted.length > 0) {
-    return targeted;
-  }
-  return Object.values(hybridDb)
-    .filter((entry: ActorEntry | undefined): entry is ActorEntry => entry !== undefined)
-    .map((entry: ActorEntry) => entry.actor);
-}
-
-function computeNormalizedViewDirection(
-  focalPoint: readonly number[],
-  position: readonly number[],
-): readonly number[] | undefined {
-  const dir = [
-    (position[0] ?? 0) - (focalPoint[0] ?? 0),
-    (position[1] ?? 0) - (focalPoint[1] ?? 0),
-    (position[2] ?? 0) - (focalPoint[2] ?? 0),
-  ];
-  const dirLen = Math.hypot(...dir);
-  if (dirLen === 0) {
-    return undefined;
-  }
-  return dir.map((component) => component / dirLen);
-}
-
-// Aligns the local clipping-plane preview camera onto the same viewing direction as the
-// Main viewer camera, re-centered on the clipped scene's bounds.
-function alignCameraToMainCamera(
-  camera: vtkCamera,
-  mainCam: MainCameraOptions,
-  center: readonly number[],
-): void {
-  if (!mainCam.focal_point || !mainCam.position) {
-    return;
-  }
-  const normDir = computeNormalizedViewDirection(mainCam.focal_point, mainCam.position);
-  if (!normDir) {
-    return;
-  }
-  const distance = camera.getDistance();
-  camera.setFocalPoint(center[0] ?? 0, center[1] ?? 0, center[2] ?? 0);
-  camera.setPosition(
-    (center[0] ?? 0) + (normDir[0] ?? 0) * distance,
-    (center[1] ?? 0) + (normDir[1] ?? 0) * distance,
-    (center[2] ?? 0) + (normDir[2] ?? 0) * distance,
-  );
-  if (mainCam.view_up) {
-    const [viewUpX = 0, viewUpY = 0, viewUpZ = 0] = mainCam.view_up;
-    camera.setViewUp(viewUpX, viewUpY, viewUpZ);
-  }
-}
-
 export {
   AXIS_SCALE,
   SIZE_RATIO,
@@ -213,10 +85,11 @@ export {
   getPlaneCssColor,
   hasPlaneChanged,
   getPlaneStyle,
+};
+export {
   computeSceneBounds,
   computeSceneBoundsInfo,
   resolveActiveActors,
   alignCameraToMainCamera,
-};
-
-export type { SceneBoundsInfo, MainCameraOptions };
+} from "./clipping_planes_scene";
+export type { SceneBoundsInfo, MainCameraOptions } from "./clipping_planes_scene";
diff --git a/app/utils/clipping_planes_scene.ts b/app/utils/clipping_planes_scene.ts
new file mode 100644
index 000000000..b0a5142da
--- /dev/null
+++ b/app/utils/clipping_planes_scene.ts
@@ -0,0 +1,130 @@
+import type { Bounds } from "@kitware/vtk.js/types";
+import type vtkActor from "@kitware/vtk.js/Rendering/Core/Actor";
+import type { vtkCamera } from "@kitware/vtk.js/Rendering/Core/Camera";
+
+function computeSceneBounds(actors: readonly vtkActor[]): Bounds {
+  let bounds: Bounds = [Infinity, -Infinity, Infinity, -Infinity, Infinity, -Infinity];
+  for (const actor of actors) {
+    const boundsOfActor = actor.getBounds();
+    bounds = [
+      Math.min(bounds[0], boundsOfActor[0]),
+      Math.max(bounds[1], boundsOfActor[1]),
+      Math.min(bounds[2], boundsOfActor[2]),
+      Math.max(bounds[3], boundsOfActor[3]),
+      Math.min(bounds[4], boundsOfActor[4]),
+      Math.max(bounds[5], boundsOfActor[5]),
+    ];
+  }
+  return bounds;
+}
+
+interface SceneBoundsInfo {
+  readonly center: readonly number[];
+  readonly cubicBounds: readonly number[];
+}
+
+function computeSceneBoundsInfo(actors: readonly vtkActor[]): SceneBoundsInfo {
+  if (actors.length === 0) {
+    return { center: [0, 0, 0], cubicBounds: [-1, 1, -1, 1, -1, 1] };
+  }
+  const [xmin, xmax, ymin, ymax, zmin, zmax] = computeSceneBounds(actors);
+  const center = [
+    Number(((xmin + xmax) / 2).toFixed(4)),
+    Number(((ymin + ymax) / 2).toFixed(4)),
+    Number(((zmin + zmax) / 2).toFixed(4)),
+  ];
+
+  const maxActorExtent = Math.max(
+    ...actors.map((actor: vtkActor) => {
+      const bounds = actor.getBounds();
+      return Math.max(bounds[1] - bounds[0], bounds[3] - bounds[2], bounds[5] - bounds[4]);
+    }),
+  );
+  const halfExtent = maxActorExtent / 2;
+  const [centerX = 0, centerY = 0, centerZ = 0] = center;
+  const cubicBounds = [
+    centerX - halfExtent,
+    centerX + halfExtent,
+    centerY - halfExtent,
+    centerY + halfExtent,
+    centerZ - halfExtent,
+    centerZ + halfExtent,
+  ];
+  return { center, cubicBounds };
+}
+
+interface ActorEntry {
+  readonly actor: vtkActor;
+}
+
+interface MainCameraOptions {
+  readonly focal_point?: readonly number[];
+  readonly position?: readonly number[];
+  readonly view_up?: readonly number[];
+}
+
+function resolveActiveActors(
+  targetAllVisible: boolean,
+  allItems: readonly { readonly id: string }[],
+  selectedDatasetIds: readonly string[],
+  hybridDb: Record<string, ActorEntry | undefined>,
+): vtkActor[] {
+  const targetIds = targetAllVisible
+    ? allItems.map((item: { id: string }) => item.id)
+    : selectedDatasetIds;
+  const targeted = targetIds
+    .map((id) => hybridDb[id]?.actor)
+    .filter((actor: vtkActor | undefined): actor is vtkActor => actor !== undefined);
+  if (targeted.length > 0) {
+    return targeted;
+  }
+  return Object.values(hybridDb)
+    .filter((entry: ActorEntry | undefined): entry is ActorEntry => entry !== undefined)
+    .map((entry: ActorEntry) => entry.actor);
+}
+
+function computeNormalizedViewDirection(
+  focalPoint: readonly number[],
+  position: readonly number[],
+): readonly number[] | undefined {
+  const dir = [
+    (position[0] ?? 0) - (focalPoint[0] ?? 0),
+    (position[1] ?? 0) - (focalPoint[1] ?? 0),
+    (position[2] ?? 0) - (focalPoint[2] ?? 0),
+  ];
+  const dirLen = Math.hypot(...dir);
+  if (dirLen === 0) {
+    return undefined;
+  }
+  return dir.map((component) => component / dirLen);
+}
+
+// Aligns the local clipping-plane preview camera onto the same viewing direction as the
+// Main viewer camera, re-centered on the clipped scene's bounds.
+function alignCameraToMainCamera(
+  camera: vtkCamera,
+  mainCam: MainCameraOptions,
+  center: readonly number[],
+): void {
+  if (!mainCam.focal_point || !mainCam.position) {
+    return;
+  }
+  const normDir = computeNormalizedViewDirection(mainCam.focal_point, mainCam.position);
+  if (!normDir) {
+    return;
+  }
+  const distance = camera.getDistance();
+  camera.setFocalPoint(center[0] ?? 0, center[1] ?? 0, center[2] ?? 0);
+  camera.setPosition(
+    (center[0] ?? 0) + (normDir[0] ?? 0) * distance,
+    (center[1] ?? 0) + (normDir[1] ?? 0) * distance,
+    (center[2] ?? 0) + (normDir[2] ?? 0) * distance,
+  );
+  if (mainCam.view_up) {
+    const [viewUpX = 0, viewUpY = 0, viewUpZ = 0] = mainCam.view_up;
+    camera.setViewUp(viewUpX, viewUpY, viewUpZ);
+  }
+}
+
+export { alignCameraToMainCamera, computeSceneBounds, computeSceneBoundsInfo, resolveActiveActors };
+export type { MainCameraOptions, SceneBoundsInfo };
diff --git a/app/utils/coloring_styles.ts b/app/utils/coloring_styles.ts
new file mode 100644
index 000000000..e53418f1d
--- /dev/null
+++ b/app/utils/coloring_styles.ts
@@ -0,0 +1,101 @@
+import type { AttributeSchemas } from "@ogw_front/utils/attribute_range";
+import back_schemas from "@geode/opengeodeweb-back/opengeodeweb_back_typed_schemas.js";
+
+interface Schemas {
+  vertex?: AttributeSchemas;
+  edge?: AttributeSchemas;
+  cell?: AttributeSchemas;
+  polygon?: AttributeSchemas;
+  polyhedron?: AttributeSchemas;
+}
+
+interface ColoringStyle {
+  name: string;
+  value: string;
+}
+
+interface ColoringAvailability {
+  color: boolean;
+  textures: boolean;
+  vertex: boolean;
+  edge: boolean;
+  cell: boolean;
+  polygon: boolean;
+  polyhedron: boolean;
+}
+
+const COLORING_STYLES = {
+  color: { name: "Constant", value: "constant" },
+  random: { name: "Random", value: "random" },
+  textures: { name: "Textures", value: "textures" },
+  vertex: { name: "Vertex attribute", value: "vertex" },
+  edge: { name: "Edge attribute", value: "edge" },
+  cell: { name: "Cell attribute", value: "cell" },
+  polygon: { name: "Polygon attribute", value: "polygon" },
+  polyhedron: {
+    name: "Polyhedron attribute",
+    value: "polyhedron",
+  },
+};
+
+const ATTRIBUTE_STYLE_KEYS = [
+  "textures",
+  "vertex",
+  "edge",
+  "cell",
+  "polygon",
+  "polyhedron",
+] as const;
+
+function buildColoringStyles(
+  available: ColoringAvailability,
+  allowRandom: boolean,
+): { labels: string[]; values: string[] } {
+  const array: ColoringStyle[] = [];
+  if (available.color) {
+    array.push(COLORING_STYLES.color);
+    if (allowRandom) {
+      array.push(COLORING_STYLES.random);
+    }
+  }
+  for (const key of ATTRIBUTE_STYLE_KEYS) {
+    if (available[key]) {
+      array.push(COLORING_STYLES[key]);
+    }
+  }
+
+  const labels = array.map((coloring) => coloring.name);
+  const values = array.map((coloring) => coloring.value);
+
+  return { labels, values };
+}
+
+// The attribute schemas of the props, each defaulting to the ones of the mesh elements
+function resolveAttributeSchemas(schemas: Schemas): Required<Schemas> {
+  const backSchemas = back_schemas.opengeodeweb_back;
+  return {
+    vertex: schemas.vertex ?? {
+      names: backSchemas.vertex_attribute_names,
+      range: backSchemas.vertex_attribute_range,
+    },
+    edge: schemas.edge ?? {
+      names: backSchemas.edge_attribute_names,
+      range: backSchemas.edge_attribute_range,
+    },
+    cell: schemas.cell ?? {
+      names: backSchemas.cell_attribute_names,
+      range: backSchemas.cell_attribute_range,
+    },
+    polygon: schemas.polygon ?? {
+      names: backSchemas.polygon_attribute_names,
+      range: backSchemas.polygon_attribute_range,
+    },
+    polyhedron: schemas.polyhedron ?? {
+      names: backSchemas.polyhedron_attribute_names,
+      range: backSchemas.polyhedron_attribute_range,
+    },
+  };
+}
+
+export { COLORING_STYLES, buildColoringStyles, resolveAttributeSchemas };
+export type { Schemas };
diff --git a/app/utils/default_styles/mesh_components.ts b/app/utils/default_styles/mesh_components.ts
new file mode 100644
index 000000000..bf3dd7f3d
--- /dev/null
+++ b/app/utils/default_styles/mesh_components.ts
@@ -0,0 +1,168 @@
+import {
+  type AttributeConfig,
+  CELLS_DEFAULT_COLOR,
+  CELLS_DEFAULT_VISIBILITY,
+  EDGES_DEFAULT_COLOR,
+  EDGES_DEFAULT_VISIBILITY,
+  EDGES_DEFAULT_WIDTH,
+  MESH_DEFAULT_ACTIVE_COLORING,
+  POINTS_DEFAULT_COLOR,
+  POINTS_DEFAULT_SIZE,
+  POINTS_DEFAULT_VISIBILITY,
+  POLYGONS_DEFAULT_COLOR,
+  POLYGONS_DEFAULT_VISIBILITY,
+  POLYHEDRA_DEFAULT_COLOR,
+  POLYHEDRA_DEFAULT_VISIBILITY,
+  type RGBAColor,
+} from "./constants";
+import type { MeshApplyTexturesParams } from "@geode/opengeodeweb-viewer/opengeodeweb_viewer_typed_schemas.js";
+
+function emptyAttributeConfig(): AttributeConfig {
+  return { name: undefined, storedConfigs: {} };
+}
+
+interface MeshComponentColoring {
+  active: string;
+  constant: RGBAColor;
+  vertex: AttributeConfig;
+}
+
+interface MeshEdgesColoring extends MeshComponentColoring {
+  edge: AttributeConfig;
+}
+
+interface MeshCellsColoring extends MeshComponentColoring {
+  cell: AttributeConfig;
+  textures: MeshApplyTexturesParams["textures"];
+}
+
+interface MeshPolygonsColoring extends MeshComponentColoring {
+  textures: MeshApplyTexturesParams["textures"];
+  polygon: AttributeConfig;
+}
+
+interface MeshPolyhedraColoring extends MeshComponentColoring {
+  polyhedron: AttributeConfig;
+}
+
+interface MeshPointsStyle {
+  visibility: boolean;
+  coloring: MeshComponentColoring;
+  size: number;
+}
+
+interface MeshEdgesStyle {
+  visibility: boolean;
+  coloring: MeshEdgesColoring;
+  width: number;
+}
+
+interface MeshCellsStyle {
+  visibility: boolean;
+  coloring: MeshCellsColoring;
+}
+
+interface MeshPolygonsStyle {
+  visibility: boolean;
+  coloring: MeshPolygonsColoring;
+}
+
+interface MeshPolyhedraStyle {
+  visibility: boolean;
+  coloring: MeshPolyhedraColoring;
+}
+
+function meshPointsDefaultStyle(
+  visibility: boolean = POINTS_DEFAULT_VISIBILITY,
+  size: number = POINTS_DEFAULT_SIZE,
+  constant: RGBAColor = POINTS_DEFAULT_COLOR,
+): MeshPointsStyle {
+  return {
+    visibility,
+    coloring: {
+      active: MESH_DEFAULT_ACTIVE_COLORING,
+      constant,
+      vertex: emptyAttributeConfig(),
+    },
+    size,
+  };
+}
+
+function meshEdgesDefaultStyle(
+  visibility: boolean = EDGES_DEFAULT_VISIBILITY,
+  width: number = EDGES_DEFAULT_WIDTH,
+  constant: RGBAColor = EDGES_DEFAULT_COLOR,
+): MeshEdgesStyle {
+  return {
+    visibility,
+    coloring: {
+      active: MESH_DEFAULT_ACTIVE_COLORING,
+      constant,
+      edge: emptyAttributeConfig(),
+      vertex: emptyAttributeConfig(),
+    },
+    width,
+  };
+}
+
+function meshCellsDefaultStyle(
+  visibility: boolean = CELLS_DEFAULT_VISIBILITY,
+  constant: RGBAColor = CELLS_DEFAULT_COLOR,
+): MeshCellsStyle {
+  return {
+    visibility,
+    coloring: {
+      active: MESH_DEFAULT_ACTIVE_COLORING,
+      cell: emptyAttributeConfig(),
+      constant,
+      textures: [],
+      vertex: emptyAttributeConfig(),
+    },
+  };
+}
+
+function meshPolygonsDefaultStyle(
+  visibility: boolean = POLYGONS_DEFAULT_VISIBILITY,
+  constant: RGBAColor = POLYGONS_DEFAULT_COLOR,
+): MeshPolygonsStyle {
+  return {
+    visibility,
+    coloring: {
+      active: MESH_DEFAULT_ACTIVE_COLORING,
+      constant,
+      textures: [],
+      polygon: emptyAttributeConfig(),
+      vertex: emptyAttributeConfig(),
+    },
+  };
+}
+
+function meshPolyhedraDefaultStyle(
+  visibility: boolean = POLYHEDRA_DEFAULT_VISIBILITY,
+  constant: RGBAColor = POLYHEDRA_DEFAULT_COLOR,
+): MeshPolyhedraStyle {
+  return {
+    visibility,
+    coloring: {
+      active: MESH_DEFAULT_ACTIVE_COLORING,
+      constant,
+      polyhedron: emptyAttributeConfig(),
+      vertex: emptyAttributeConfig(),
+    },
+  };
+}
+
+export {
+  meshPointsDefaultStyle,
+  meshEdgesDefaultStyle,
+  meshCellsDefaultStyle,
+  meshPolygonsDefaultStyle,
+  meshPolyhedraDefaultStyle,
+};
+export type {
+  MeshCellsStyle,
+  MeshEdgesStyle,
+  MeshPointsStyle,
+  MeshPolygonsStyle,
+  MeshPolyhedraStyle,
+};
diff --git a/app/utils/default_styles/meshes.ts b/app/utils/default_styles/meshes.ts
index ee068eb23..4a4241549 100644
--- a/app/utils/default_styles/meshes.ts
+++ b/app/utils/default_styles/meshes.ts
@@ -1,77 +1,15 @@
-import type { MeshApplyTexturesParams } from "@geode/opengeodeweb-viewer/opengeodeweb_viewer_typed_schemas.js";
-
 import {
-  type AttributeConfig,
-  CELLS_DEFAULT_COLOR,
-  CELLS_DEFAULT_VISIBILITY,
-  EDGES_DEFAULT_COLOR,
-  EDGES_DEFAULT_VISIBILITY,
-  EDGES_DEFAULT_WIDTH,
-  MESH_DEFAULT_ACTIVE_COLORING,
-  POINTS_DEFAULT_COLOR,
-  POINTS_DEFAULT_SIZE,
-  POINTS_DEFAULT_VISIBILITY,
-  POLYGONS_DEFAULT_COLOR,
-  POLYGONS_DEFAULT_VISIBILITY,
-  POLYHEDRA_DEFAULT_COLOR,
-  POLYHEDRA_DEFAULT_VISIBILITY,
-  type RGBAColor,
-} from "./constants";
-
-function emptyAttributeConfig(): AttributeConfig {
-  return { name: undefined, storedConfigs: {} };
-}
-
-interface MeshComponentColoring {
-  active: string;
-  constant: RGBAColor;
-  vertex: AttributeConfig;
-}
-
-interface MeshEdgesColoring extends MeshComponentColoring {
-  edge: AttributeConfig;
-}
-
-interface MeshCellsColoring extends MeshComponentColoring {
-  cell: AttributeConfig;
-  textures: MeshApplyTexturesParams["textures"];
-}
-
-interface MeshPolygonsColoring extends MeshComponentColoring {
-  textures: MeshApplyTexturesParams["textures"];
-  polygon: AttributeConfig;
-}
-
-interface MeshPolyhedraColoring extends MeshComponentColoring {
-  polyhedron: AttributeConfig;
-}
-
-interface MeshPointsStyle {
-  visibility: boolean;
-  coloring: MeshComponentColoring;
-  size: number;
-}
-
-interface MeshEdgesStyle {
-  visibility: boolean;
-  coloring: MeshEdgesColoring;
-  width: number;
-}
-
-interface MeshCellsStyle {
-  visibility: boolean;
-  coloring: MeshCellsColoring;
-}
-
-interface MeshPolygonsStyle {
-  visibility: boolean;
-  coloring: MeshPolygonsColoring;
-}
-
-interface MeshPolyhedraStyle {
-  visibility: boolean;
-  coloring: MeshPolyhedraColoring;
-}
+  type MeshCellsStyle,
+  type MeshEdgesStyle,
+  type MeshPointsStyle,
+  type MeshPolygonsStyle,
+  type MeshPolyhedraStyle,
+  meshCellsDefaultStyle,
+  meshEdgesDefaultStyle,
+  meshPointsDefaultStyle,
+  meshPolygonsDefaultStyle,
+  meshPolyhedraDefaultStyle,
+} from "./mesh_components";
 
 interface PointSetStyle {
   visibility: boolean;
@@ -114,86 +52,6 @@ interface SolidStyle {
   polyhedra: MeshPolyhedraStyle;
 }
 
-function meshPointsDefaultStyle(
-  visibility: boolean = POINTS_DEFAULT_VISIBILITY,
-  size: number = POINTS_DEFAULT_SIZE,
-  constant: RGBAColor = POINTS_DEFAULT_COLOR,
-): MeshPointsStyle {
-  return {
-    visibility,
-    coloring: {
-      active: MESH_DEFAULT_ACTIVE_COLORING,
-      constant,
-      vertex: emptyAttributeConfig(),
-    },
-    size,
-  };
-}
-
-function meshEdgesDefaultStyle(
-  visibility: boolean = EDGES_DEFAULT_VISIBILITY,
-  width: number = EDGES_DEFAULT_WIDTH,
-  constant: RGBAColor = EDGES_DEFAULT_COLOR,
-): MeshEdgesStyle {
-  return {
-    visibility,
-    coloring: {
-      active: MESH_DEFAULT_ACTIVE_COLORING,
-      constant,
-      edge: emptyAttributeConfig(),
-      vertex: emptyAttributeConfig(),
-    },
-    width,
-  };
-}
-
-function meshCellsDefaultStyle(
-  visibility: boolean = CELLS_DEFAULT_VISIBILITY,
-  constant: RGBAColor = CELLS_DEFAULT_COLOR,
-): MeshCellsStyle {
-  return {
-    visibility,
-    coloring: {
-      active: MESH_DEFAULT_ACTIVE_COLORING,
-      cell: emptyAttributeConfig(),
-      constant,
-      textures: [],
-      vertex: emptyAttributeConfig(),
-    },
-  };
-}
-
-function meshPolygonsDefaultStyle(
-  visibility: boolean = POLYGONS_DEFAULT_VISIBILITY,
-  constant: RGBAColor = POLYGONS_DEFAULT_COLOR,
-): MeshPolygonsStyle {
-  return {
-    visibility,
-    coloring: {
-      active: MESH_DEFAULT_ACTIVE_COLORING,
-      constant,
-      textures: [],
-      polygon: emptyAttributeConfig(),
-      vertex: emptyAttributeConfig(),
-    },
-  };
-}
-
-function meshPolyhedraDefaultStyle(
-  visibility: boolean = POLYHEDRA_DEFAULT_VISIBILITY,
-  constant: RGBAColor = POLYHEDRA_DEFAULT_COLOR,
-): MeshPolyhedraStyle {
-  return {
-    visibility,
-    coloring: {
-      active: MESH_DEFAULT_ACTIVE_COLORING,
-      constant,
-      polyhedron: emptyAttributeConfig(),
-      vertex: emptyAttributeConfig(),
-    },
-  };
-}
-
 function pointSetDefaultStyle(): PointSetStyle {
   return {
     visibility: true,
@@ -253,6 +111,8 @@ export {
   meshCellsDefaultStyle,
   meshPolygonsDefaultStyle,
   meshPolyhedraDefaultStyle,
+} from "./mesh_components";
+export {
   pointSetDefaultStyle,
   edgedCurveDefaultStyle,
   grid2dDefaultStyle,
diff --git a/app/utils/default_styles/model_components.ts b/app/utils/default_styles/model_components.ts
new file mode 100644
index 000000000..9106ae320
--- /dev/null
+++ b/app/utils/default_styles/model_components.ts
@@ -0,0 +1,170 @@
+import {
+  type AttributeConfig,
+  BLOCKS_DEFAULT_ACTIVE_COLORING,
+  BLOCKS_DEFAULT_COLOR,
+  BLOCKS_DEFAULT_VISIBILITY,
+  CORNERS_DEFAULT_ACTIVE_COLORING,
+  CORNERS_DEFAULT_COLOR,
+  CORNERS_DEFAULT_VISIBILITY,
+  EDGES_DEFAULT_VISIBILITY,
+  EDGES_DEFAULT_WIDTH,
+  LINES_DEFAULT_ACTIVE_COLORING,
+  LINES_DEFAULT_COLOR,
+  LINES_DEFAULT_VISIBILITY,
+  POINTS_DEFAULT_SIZE,
+  POINTS_DEFAULT_VISIBILITY,
+  type RGBAColor,
+  SURFACES_DEFAULT_ACTIVE_COLORING,
+  SURFACES_DEFAULT_COLOR,
+  SURFACES_DEFAULT_VISIBILITY,
+} from "./constants";
+
+function emptyAttributeConfig(): AttributeConfig {
+  return { name: undefined, storedConfigs: {} };
+}
+
+interface ModelComponentColoring {
+  active: string;
+  constant: RGBAColor;
+  vertex: AttributeConfig;
+}
+
+interface ModelLinesColoring extends ModelComponentColoring {
+  edge: AttributeConfig;
+}
+
+interface ModelSurfacesColoring extends ModelComponentColoring {
+  polygon: AttributeConfig;
+}
+
+interface ModelBlocksColoring extends ModelComponentColoring {
+  polyhedron: AttributeConfig;
+}
+
+interface ModelCornersStyle {
+  visibility: boolean;
+  coloring: ModelComponentColoring;
+}
+
+interface ModelLinesStyle {
+  visibility: boolean;
+  coloring: ModelLinesColoring;
+}
+
+interface ModelSurfacesStyle {
+  visibility: boolean;
+  coloring: ModelSurfacesColoring;
+}
+
+interface ModelBlocksStyle {
+  visibility: boolean;
+  coloring: ModelBlocksColoring;
+}
+
+interface ModelPointsStyle {
+  visibility: boolean;
+  size: number;
+}
+
+interface ModelEdgesStyle {
+  visibility: boolean;
+  width: number;
+}
+
+function modelCornersDefaultStyle(
+  visibility: boolean = CORNERS_DEFAULT_VISIBILITY,
+  constant: RGBAColor = CORNERS_DEFAULT_COLOR,
+): ModelCornersStyle {
+  return {
+    visibility,
+    coloring: {
+      active: CORNERS_DEFAULT_ACTIVE_COLORING,
+      constant,
+      vertex: emptyAttributeConfig(),
+    },
+  };
+}
+
+function modelLinesDefaultStyle(
+  visibility: boolean = LINES_DEFAULT_VISIBILITY,
+  constant: RGBAColor = LINES_DEFAULT_COLOR,
+): ModelLinesStyle {
+  return {
+    visibility,
+    coloring: {
+      active: LINES_DEFAULT_ACTIVE_COLORING,
+      constant,
+      vertex: emptyAttributeConfig(),
+      edge: emptyAttributeConfig(),
+    },
+  };
+}
+
+function modelSurfacesDefaultStyle(
+  visibility: boolean = SURFACES_DEFAULT_VISIBILITY,
+  constant: RGBAColor = SURFACES_DEFAULT_COLOR,
+): ModelSurfacesStyle {
+  return {
+    visibility,
+    coloring: {
+      active: SURFACES_DEFAULT_ACTIVE_COLORING,
+      constant,
+      vertex: emptyAttributeConfig(),
+      polygon: emptyAttributeConfig(),
+    },
+  };
+}
+
+function modelBlocksDefaultStyle(
+  visibility: boolean = BLOCKS_DEFAULT_VISIBILITY,
+  constant: RGBAColor = BLOCKS_DEFAULT_COLOR,
+): ModelBlocksStyle {
+  return {
+    visibility,
+    coloring: {
+      active: BLOCKS_DEFAULT_ACTIVE_COLORING,
+      constant,
+      vertex: emptyAttributeConfig(),
+      polyhedron: emptyAttributeConfig(),
+    },
+  };
+}
+
+function modelPointsDefaultStyle(
+  visibility: boolean = POINTS_DEFAULT_VISIBILITY,
+  size: number = POINTS_DEFAULT_SIZE,
+): ModelPointsStyle {
+  return { visibility, size };
+}
+
+function modelEdgesDefaultStyle(
+  visibility: boolean = EDGES_DEFAULT_VISIBILITY,
+  width: number = EDGES_DEFAULT_WIDTH,
+): ModelEdgesStyle {
+  return { visibility, width };
+}
+
+const DEFAULT_MODEL_COMPONENT_TYPE_STYLES = {
+  Corner: modelCornersDefaultStyle(),
+  Line: modelLinesDefaultStyle(),
+  Surface: modelSurfacesDefaultStyle(),
+  Block: modelBlocksDefaultStyle(),
+};
+
+export {
+  modelCornersDefaultStyle,
+  modelLinesDefaultStyle,
+  modelSurfacesDefaultStyle,
+  modelBlocksDefaultStyle,
+  modelPointsDefaultStyle,
+  modelEdgesDefaultStyle,
+  DEFAULT_MODEL_COMPONENT_TYPE_STYLES,
+};
+export type {
+  ModelBlocksStyle,
+  ModelCornersStyle,
+  ModelEdgesStyle,
+  ModelLinesStyle,
+  ModelPointsStyle,
+  ModelSurfacesStyle,
+};
diff --git a/app/utils/default_styles/models.ts b/app/utils/default_styles/models.ts
index 360b8b18b..27782a10d 100644
--- a/app/utils/default_styles/models.ts
+++ b/app/utils/default_styles/models.ts
@@ -1,77 +1,18 @@
+import { MODEL_DEFAULT_ACTIVE_COLORING, MODEL_DEFAULT_COLOR, type RGBAColor } from "./constants";
 import {
-  type AttributeConfig,
-  BLOCKS_DEFAULT_ACTIVE_COLORING,
-  BLOCKS_DEFAULT_COLOR,
-  BLOCKS_DEFAULT_VISIBILITY,
-  CORNERS_DEFAULT_ACTIVE_COLORING,
-  CORNERS_DEFAULT_COLOR,
-  CORNERS_DEFAULT_VISIBILITY,
-  EDGES_DEFAULT_VISIBILITY,
-  EDGES_DEFAULT_WIDTH,
-  LINES_DEFAULT_ACTIVE_COLORING,
-  LINES_DEFAULT_COLOR,
-  LINES_DEFAULT_VISIBILITY,
-  MODEL_DEFAULT_ACTIVE_COLORING,
-  MODEL_DEFAULT_COLOR,
-  POINTS_DEFAULT_SIZE,
-  POINTS_DEFAULT_VISIBILITY,
-  type RGBAColor,
-  SURFACES_DEFAULT_ACTIVE_COLORING,
-  SURFACES_DEFAULT_COLOR,
-  SURFACES_DEFAULT_VISIBILITY,
-} from "./constants";
-
-function emptyAttributeConfig(): AttributeConfig {
-  return { name: undefined, storedConfigs: {} };
-}
-
-interface ModelComponentColoring {
-  active: string;
-  constant: RGBAColor;
-  vertex: AttributeConfig;
-}
-
-interface ModelLinesColoring extends ModelComponentColoring {
-  edge: AttributeConfig;
-}
-
-interface ModelSurfacesColoring extends ModelComponentColoring {
-  polygon: AttributeConfig;
-}
-
-interface ModelBlocksColoring extends ModelComponentColoring {
-  polyhedron: AttributeConfig;
-}
-
-interface ModelCornersStyle {
-  visibility: boolean;
-  coloring: ModelComponentColoring;
-}
-
-interface ModelLinesStyle {
-  visibility: boolean;
-  coloring: ModelLinesColoring;
-}
-
-interface ModelSurfacesStyle {
-  visibility: boolean;
-  coloring: ModelSurfacesColoring;
-}
-
-interface ModelBlocksStyle {
-  visibility: boolean;
-  coloring: ModelBlocksColoring;
-}
-
-interface ModelPointsStyle {
-  visibility: boolean;
-  size: number;
-}
-
-interface ModelEdgesStyle {
-  visibility: boolean;
-  width: number;
-}
+  type ModelBlocksStyle,
+  type ModelCornersStyle,
+  type ModelEdgesStyle,
+  type ModelLinesStyle,
+  type ModelPointsStyle,
+  type ModelSurfacesStyle,
+  modelBlocksDefaultStyle,
+  modelCornersDefaultStyle,
+  modelEdgesDefaultStyle,
+  modelLinesDefaultStyle,
+  modelPointsDefaultStyle,
+  modelSurfacesDefaultStyle,
+} from "./model_components";
 
 interface ModelWithBlocksStyle {
   visibility: boolean;
@@ -94,86 +35,6 @@ interface ModelWithoutBlocksStyle {
   edges: ModelEdgesStyle;
 }
 
-function modelCornersDefaultStyle(
-  visibility: boolean = CORNERS_DEFAULT_VISIBILITY,
-  constant: RGBAColor = CORNERS_DEFAULT_COLOR,
-): ModelCornersStyle {
-  return {
-    visibility,
-    coloring: {
-      active: CORNERS_DEFAULT_ACTIVE_COLORING,
-      constant,
-      vertex: emptyAttributeConfig(),
-    },
-  };
-}
-
-function modelLinesDefaultStyle(
-  visibility: boolean = LINES_DEFAULT_VISIBILITY,
-  constant: RGBAColor = LINES_DEFAULT_COLOR,
-): ModelLinesStyle {
-  return {
-    visibility,
-    coloring: {
-      active: LINES_DEFAULT_ACTIVE_COLORING,
-      constant,
-      vertex: emptyAttributeConfig(),
-      edge: emptyAttributeConfig(),
-    },
-  };
-}
-
-function modelSurfacesDefaultStyle(
-  visibility: boolean = SURFACES_DEFAULT_VISIBILITY,
-  constant: RGBAColor = SURFACES_DEFAULT_COLOR,
-): ModelSurfacesStyle {
-  return {
-    visibility,
-    coloring: {
-      active: SURFACES_DEFAULT_ACTIVE_COLORING,
-      constant,
-      vertex: emptyAttributeConfig(),
-      polygon: emptyAttributeConfig(),
-    },
-  };
-}
-
-function modelBlocksDefaultStyle(
-  visibility: boolean = BLOCKS_DEFAULT_VISIBILITY,
-  constant: RGBAColor = BLOCKS_DEFAULT_COLOR,
-): ModelBlocksStyle {
-  return {
-    visibility,
-    coloring: {
-      active: BLOCKS_DEFAULT_ACTIVE_COLORING,
-      constant,
-      vertex: emptyAttributeConfig(),
-      polyhedron: emptyAttributeConfig(),
-    },
-  };
-}
-
-function modelPointsDefaultStyle(
-  visibility: boolean = POINTS_DEFAULT_VISIBILITY,
-  size: number = POINTS_DEFAULT_SIZE,
-): ModelPointsStyle {
-  return { visibility, size };
-}
-
-function modelEdgesDefaultStyle(
-  visibility: boolean = EDGES_DEFAULT_VISIBILITY,
-  width: number = EDGES_DEFAULT_WIDTH,
-): ModelEdgesStyle {
-  return { visibility, width };
-}
-
-const DEFAULT_MODEL_COMPONENT_TYPE_STYLES = {
-  Corner: modelCornersDefaultStyle(),
-  Line: modelLinesDefaultStyle(),
-  Surface: modelSurfacesDefaultStyle(),
-  Block: modelBlocksDefaultStyle(),
-};
-
 function brepDefaultStyle(): ModelWithBlocksStyle {
   return {
     visibility: true,
@@ -275,6 +136,8 @@ export {
   modelPointsDefaultStyle,
   modelEdgesDefaultStyle,
   DEFAULT_MODEL_COMPONENT_TYPE_STYLES,
+} from "./model_components";
+export {
   brepDefaultStyle,
   crossSectionDefaultStyle,
   structuralModelDefaultStyle,
diff --git a/app/utils/drag_and_drop.ts b/app/utils/drag_and_drop.ts
new file mode 100644
index 000000000..15bd59e95
--- /dev/null
+++ b/app/utils/drag_and_drop.ts
@@ -0,0 +1,80 @@
+import type { UploadFile } from "@ogw_front/utils/upload_path";
+
+const WILDCARD_SUFFIX_LENGTH = 2;
+
+function isFileAccepted(file: File, acceptValue: string | string[] | undefined): boolean {
+  const fileName = (file.name || "").toLowerCase();
+  const fileType = (file.type || "").toLowerCase();
+  const isVext = fileName.endsWith(".vext");
+
+  if (acceptValue === undefined || acceptValue === "") {
+    return !isVext;
+  }
+  let rules: string[] = [];
+  if (Array.isArray(acceptValue)) {
+    rules = acceptValue;
+  } else if (typeof acceptValue === "string") {
+    rules = acceptValue.split(",");
+  }
+  rules = rules.map((rule) => rule.trim()).filter(Boolean);
+  if (rules.length === 0) {
+    return !isVext;
+  }
+
+  return rules.some((rule) => {
+    let cleanRule = rule.toLowerCase();
+    if (!cleanRule) {
+      return !isVext;
+    }
+    if (cleanRule === "*" || cleanRule === "*.*") {
+      return !isVext;
+    }
+    if (cleanRule.startsWith("*.")) {
+      cleanRule = cleanRule.slice(1);
+    }
+    if (cleanRule.startsWith(".")) {
+      return fileName.endsWith(cleanRule);
+    }
+    if (cleanRule.includes("/")) {
+      if (cleanRule.endsWith("/*")) {
+        const typeGroup = cleanRule.slice(0, -WILDCARD_SUFFIX_LENGTH);
+        return fileType.startsWith(typeGroup);
+      }
+      return fileType === cleanRule;
+    }
+    return fileName.endsWith(`.${cleanRule}`);
+  });
+}
+
+async function readAllEntries(reader: FileSystemDirectoryReader): Promise<FileSystemEntry[]> {
+  // oxlint-disable-next-line promise/avoid-new
+  const batch = await new Promise<FileSystemEntry[]>((resolve, reject) => {
+    reader.readEntries(resolve, reject);
+  });
+  if (batch.length === 0) {
+    return [];
+  }
+  return [...batch, ...(await readAllEntries(reader))];
+}
+
+async function filesFromEntry(entry: FileSystemEntry, path: string): Promise<UploadFile[]> {
+  if (entry.isFile) {
+    // oxlint-disable-next-line promise/avoid-new
+    const file = await new Promise<File>((resolve, reject) => {
+      // oxlint-disable-next-line no-unsafe-type-assertion -- isFile guarantees a FileSystemFileEntry
+      (entry as FileSystemFileEntry).file(resolve, reject);
+    });
+    return [Object.assign(file, { relativePath: path })];
+  }
+  // oxlint-disable-next-line no-unsafe-type-assertion -- not a file, so a FileSystemDirectoryEntry
+  const children = await readAllEntries((entry as FileSystemDirectoryEntry).createReader());
+  const nested = await Promise.all(
+    children.map(async (child) => {
+      const files = await filesFromEntry(child, `${path}/${child.name}`);
+      return files;
+    }),
+  );
+  return nested.flat();
+}
+
+export { filesFromEntry, isFileAccepted };
diff --git a/app/utils/model_component_coloring.ts b/app/utils/model_component_coloring.ts
new file mode 100644
index 000000000..0c814e7e2
--- /dev/null
+++ b/app/utils/model_component_coloring.ts
@@ -0,0 +1,46 @@
+import back_schemas from "@geode/opengeodeweb-back/opengeodeweb_back_typed_schemas.js";
+
+const backSchemas = back_schemas.opengeodeweb_back;
+
+const VERTEX_ATTRIBUTE_SCHEMAS = {
+  names: backSchemas.model_component_vertex_attribute_names,
+  range: backSchemas.model_component_vertex_attribute_range,
+};
+
+// Coloring options of the model components carrying only vertex attributes: the corners and the points
+const MODEL_VERTEX_COLORING = {
+  capabilities: {
+    color: { available: true },
+    textures: { available: false },
+    vertex: { available: true },
+    edge: { available: false },
+    cell: { available: false },
+    polygon: { available: false },
+    polyhedron: { available: false },
+  },
+  schemas: {
+    vertex: VERTEX_ATTRIBUTE_SCHEMAS,
+  },
+};
+
+// Coloring options of the model lines: vertex and edge attributes
+const MODEL_LINE_COLORING = {
+  capabilities: {
+    color: { available: true },
+    textures: { available: false },
+    vertex: { available: true },
+    edge: { available: true },
+    cell: { available: false },
+    polygon: { available: false },
+    polyhedron: { available: false },
+  },
+  schemas: {
+    vertex: VERTEX_ATTRIBUTE_SCHEMAS,
+    edge: {
+      names: backSchemas.model_component_edge_attribute_names,
+      range: backSchemas.model_component_edge_attribute_range,
+    },
+  },
+};
+
+export { MODEL_VERTEX_COLORING, MODEL_LINE_COLORING };
diff --git a/app/utils/threshold_sources.ts b/app/utils/threshold_sources.ts
new file mode 100644
index 000000000..01a6f7b4c
--- /dev/null
+++ b/app/utils/threshold_sources.ts
@@ -0,0 +1,60 @@
+import {
+  MESH_ELEMENT_KINDS,
+  MODEL_COMPONENT_ATTRIBUTE_SCHEMAS,
+  MODEL_COMPONENT_KINDS,
+} from "@ogw_front/utils/attributes";
+import type { AttributeSchemas } from "@ogw_front/utils/attribute_range";
+import { attributeSchemas } from "@ogw_front/composables/attribute_coloring_style";
+import type { useDataStore } from "@ogw_front/stores/data";
+
+interface AttributeSource {
+  title: string;
+  schemas: AttributeSchemas;
+  timeStepKey: string;
+  params: { id: string; component_ids?: string[] };
+  location: "point" | "cell";
+}
+
+function attributeSource(
+  kind: string,
+  title: string,
+  params: { id: string; component_ids?: string[] },
+  modelType?: string,
+): AttributeSource {
+  const schemas = attributeSchemas(modelType === undefined ? "" : "model_component_", kind);
+  return {
+    title: `${title}${kind} attribute`,
+    schemas,
+    timeStepKey:
+      modelType === undefined
+        ? schemas.names.$id
+        : (MODEL_COMPONENT_ATTRIBUTE_SCHEMAS[modelType]?.[kind]?.$id ?? schemas.names.$id),
+    params,
+    location: kind === "vertex" ? "point" : "cell",
+  };
+}
+
+async function fetchSources(
+  dataStore: ReturnType<typeof useDataStore>,
+  id: string,
+): Promise<AttributeSource[]> {
+  const item = await dataStore.item(id);
+  if (item.viewer_type !== "model") {
+    return ["vertex", MESH_ELEMENT_KINDS[item.geode_object_type]]
+      .filter((kind): kind is string => kind !== undefined)
+      .map((kind) => attributeSource(kind, "", { id }));
+  }
+  const modelSources = await Promise.all(
+    Object.entries(MODEL_COMPONENT_KINDS).map(async ([type, kinds]) => {
+      const component_ids = await dataStore.getMeshComponentGeodeIds(id, type);
+      if (component_ids.length === 0) {
+        return [];
+      }
+      return kinds.map((kind) => attributeSource(kind, `${type} `, { id, component_ids }, type));
+    }),
+  );
+  return modelSources.flat();
+}
+
+export { fetchSources };
+export type { AttributeSource };
diff --git a/internal/stores/data_style/mesh/cells/cell.ts b/internal/stores/data_style/mesh/cells/cell.ts
index 276a645f7..6497bcf92 100644
--- a/internal/stores/data_style/mesh/cells/cell.ts
+++ b/internal/stores/data_style/mesh/cells/cell.ts
@@ -4,148 +4,42 @@ import back_schemas from "@geode/opengeodeweb-back/opengeodeweb_back_typed_schem
 import viewer_schemas from "@geode/opengeodeweb-viewer/opengeodeweb_viewer_typed_schemas.js";
 
 // Local imports
+import {
+  type UseMeshCellsCellAttributeStyleReturn,
+  type ValidAttributeInput,
+  isMeshCellsCellAttributeValid,
+} from "./cell_attribute";
+import {
+  useMeshCellsCellAttributeConfig,
+  useMeshCellsCellAttributeConfigValues,
+  useMeshCellsCellAttributeConfigWriter,
+} from "./cell_config";
 import { getRGBPointsFromPreset } from "@ogw_front/utils/colormap";
 import { useAttributeTimeStepStyle } from "@ogw_internal/stores/data_style/time_step";
-import { useMeshCellsCommonStyle } from "./common";
 import { useViewerStore } from "@ogw_front/stores/viewer";
 
 // Local constants
 const attributeNamesSchema = back_schemas.opengeodeweb_back.cell_attribute_names;
 const meshCellsCellAttributeSchemas = viewer_schemas.opengeodeweb_viewer.mesh.cells.attribute.cell;
 
-interface AttributeStoredConfig {
-  minimum: number | undefined;
-  maximum: number | undefined;
-  colorMap: string | undefined;
-  no_data_color: RGBAColor;
-}
-
-interface AttributeState {
-  name?: string;
-  item?: number;
-  storedConfigs?: Record<string, { lastItem: number } & Record<string, AttributeStoredConfig>>;
-}
-
-interface AttributeInput {
-  name: string | undefined;
-  item: number | undefined;
-  minimum: number | undefined;
-  maximum: number | undefined;
-  colorMap: string | undefined;
-  no_data_color?: RGBAColor;
-}
-
-interface ValidAttributeInput {
-  name: string;
-  item: number;
-  minimum: number;
-  maximum: number;
-  colorMap: string;
-  no_data_color?: RGBAColor;
-}
-
-function isMeshCellsCellAttributeValid(input: AttributeInput): input is ValidAttributeInput {
-  return (
-    input.name !== undefined &&
-    input.item !== undefined &&
-    input.minimum !== undefined &&
-    input.maximum !== undefined &&
-    input.colorMap !== undefined
-  );
-}
-
 // oxlint-disable-next-line max-lines-per-function
-function useMeshCellsCellAttributeStyle(): {
-  meshCellsCellAttributeName: (id: string) => string | undefined;
-  meshCellsCellAttributeItem: (id: string) => number;
-  meshCellsCellAttributeRange: (id: string) => [number | undefined, number | undefined];
-  meshCellsCellAttributeTimeStep: (id: string) => number | undefined;
-  setMeshCellsCellAttributeTimeStep: (id: string, timeStep: number) => Promise<unknown>;
-  meshCellsCellAttributeColorMap: (id: string) => string | undefined;
-  meshCellsCellAttributeStoredConfig: (
-    id: string,
-    name: string | undefined,
-    item: number | undefined,
-  ) => AttributeStoredConfig;
-  setMeshCellsCellAttribute: (id: string, input: ValidAttributeInput) => Promise<unknown>;
-  setMeshCellsCellAttributeName: (id: string, name: string) => Promise<unknown>;
-  setMeshCellsCellAttributeItem: (id: string, item: number) => Promise<unknown>;
-  setMeshCellsCellAttributeRange: (
-    id: string,
-    minimum: number,
-    maximum: number,
-  ) => Promise<unknown>;
-  setMeshCellsCellAttributeColorMap: (id: string, colorMap: string | undefined) => Promise<unknown>;
-  meshCellsCellAttributeNoDataColor: (id: string) => RGBAColor;
-  setMeshCellsCellAttributeNoDataColor: (id: string, no_data_color: RGBAColor) => Promise<unknown>;
-} {
+function useMeshCellsCellAttributeStyle(): UseMeshCellsCellAttributeStyleReturn {
   const { attributeTimeStep, setAttributeTimeStep, seriesArrayName } = useAttributeTimeStepStyle();
   const viewerStore = useViewerStore();
-  const meshCellsCommonStyle = useMeshCellsCommonStyle();
-  function meshCellsCellAttribute(id: string): AttributeState {
-    // oxlint-disable-next-line no-unsafe-type-assertion -- coloring.cell shape is defined by the data style schema.
-    return meshCellsCommonStyle.meshCellsColoring(id).cell as AttributeState;
-  }
-  function meshCellsCellAttributeStoredConfig(
-    id: string,
-    name: string | undefined,
-    item: number | undefined,
-  ): AttributeStoredConfig {
-    const { storedConfigs } = meshCellsCellAttribute(id);
-    const nameConfig = name === undefined ? undefined : storedConfigs?.[name];
-    const itemConfig = item === undefined ? undefined : nameConfig?.[item];
-    if (itemConfig !== undefined) {
-      return itemConfig;
-    }
-    return {
-      minimum: undefined,
-      maximum: undefined,
-      colorMap: undefined,
-      no_data_color: DEFAULT_NO_DATA_COLOR,
-    };
-  }
-  async function mutateMeshCellsCellStyle(
-    id: string,
-    values: Record<string, unknown>,
-  ): Promise<string> {
-    const result = await meshCellsCommonStyle.mutateMeshCellsStyle(id, {
-      coloring: {
-        cell: values,
-      },
-    });
-    return result;
-  }
-  async function setMeshCellsCellAttributeStoredConfig(
-    id: string,
-    name: string | undefined,
-    item: number | undefined,
-    config: Partial<AttributeStoredConfig>,
-  ): Promise<string> {
-    const result = await mutateMeshCellsCellStyle(id, {
-      storedConfigs: {
-        [name ?? ""]: {
-          lastItem: item,
-          [item ?? 0]: config,
-        },
-      },
-    });
-    return result;
-  }
-  function meshCellsCellAttributeName(id: string): string | undefined {
-    return meshCellsCellAttribute(id).name;
-  }
-  function meshCellsCellAttributeLastItem(id: string, name: string | undefined): number {
-    const { storedConfigs } = meshCellsCellAttribute(id);
-    const nameConfig = name === undefined ? undefined : storedConfigs?.[name];
-    if (nameConfig !== undefined) {
-      return nameConfig.lastItem;
-    }
-    return 0;
-  }
-  function meshCellsCellAttributeItem(id: string): number {
-    const { item, name } = meshCellsCellAttribute(id);
-    return item ?? meshCellsCellAttributeLastItem(id, name);
-  }
+  const {
+    meshCellsCellAttribute,
+    meshCellsCellAttributeName,
+    meshCellsCellAttributeLastItem,
+    meshCellsCellAttributeItem,
+    meshCellsCellAttributeStoredConfig,
+  } = useMeshCellsCellAttributeConfig();
+  const {
+    meshCellsCellAttributeRange,
+    meshCellsCellAttributeColorMap,
+    meshCellsCellAttributeNoDataColor,
+  } = useMeshCellsCellAttributeConfigValues();
+  const { mutateMeshCellsCellStyle, setMeshCellsCellAttributeStoredConfig } =
+    useMeshCellsCellAttributeConfigWriter();
   function meshCellsCellAttributeTimeStep(id: string): number | undefined {
     return attributeTimeStep(id, attributeNamesSchema.$id, meshCellsCellAttribute(id).name);
   }
@@ -218,12 +112,6 @@ function useMeshCellsCellAttributeStyle(): {
     });
     return applyCellAttribute(id);
   }
-  function meshCellsCellAttributeRange(id: string): [number | undefined, number | undefined] {
-    const name = meshCellsCellAttributeName(id);
-    const item = meshCellsCellAttributeItem(id);
-    const storedConfig = meshCellsCellAttributeStoredConfig(id, name, item);
-    return [storedConfig.minimum, storedConfig.maximum];
-  }
   async function setMeshCellsCellAttributeTimeStep(id: string, timeStep: number): Promise<unknown> {
     const name = meshCellsCellAttributeName(id);
     if (name === undefined) {
@@ -245,12 +133,6 @@ function useMeshCellsCellAttributeStyle(): {
     });
     return applyCellAttribute(id);
   }
-  function meshCellsCellAttributeColorMap(id: string): string | undefined {
-    const name = meshCellsCellAttributeName(id);
-    const item = meshCellsCellAttributeItem(id);
-    const storedConfig = meshCellsCellAttributeStoredConfig(id, name, item);
-    return storedConfig.colorMap;
-  }
   async function setMeshCellsCellAttributeColorMap(
     id: string,
     colorMap: string | undefined,
@@ -262,12 +144,6 @@ function useMeshCellsCellAttributeStyle(): {
     });
     return applyCellAttribute(id);
   }
-  function meshCellsCellAttributeNoDataColor(id: string): RGBAColor {
-    const name = meshCellsCellAttributeName(id);
-    const item = meshCellsCellAttributeItem(id);
-    const storedConfig = meshCellsCellAttributeStoredConfig(id, name, item);
-    return storedConfig.no_data_color;
-  }
   async function setMeshCellsCellAttributeNoDataColor(
     id: string,
     no_data_color: RGBAColor,
@@ -298,4 +174,5 @@ function useMeshCellsCellAttributeStyle(): {
     setMeshCellsCellAttributeNoDataColor,
   };
 }
-export { isMeshCellsCellAttributeValid, useMeshCellsCellAttributeStyle };
+export { useMeshCellsCellAttributeStyle };
+export { isMeshCellsCellAttributeValid } from "./cell_attribute";
diff --git a/internal/stores/data_style/mesh/cells/cell_attribute.ts b/internal/stores/data_style/mesh/cells/cell_attribute.ts
new file mode 100644
index 000000000..d5669f1c2
--- /dev/null
+++ b/internal/stores/data_style/mesh/cells/cell_attribute.ts
@@ -0,0 +1,74 @@
+import type { RGBAColor } from "@ogw_front/utils/default_styles/constants";
+
+interface AttributeStoredConfig {
+  minimum: number | undefined;
+  maximum: number | undefined;
+  colorMap: string | undefined;
+  no_data_color: RGBAColor;
+}
+
+interface AttributeState {
+  name?: string;
+  item?: number;
+  storedConfigs?: Record<string, { lastItem: number } & Record<string, AttributeStoredConfig>>;
+}
+
+interface AttributeInput {
+  name: string | undefined;
+  item: number | undefined;
+  minimum: number | undefined;
+  maximum: number | undefined;
+  colorMap: string | undefined;
+  no_data_color?: RGBAColor;
+}
+
+interface ValidAttributeInput {
+  name: string;
+  item: number;
+  minimum: number;
+  maximum: number;
+  colorMap: string;
+  no_data_color?: RGBAColor;
+}
+
+function isMeshCellsCellAttributeValid(input: AttributeInput): input is ValidAttributeInput {
+  return (
+    input.name !== undefined &&
+    input.item !== undefined &&
+    input.minimum !== undefined &&
+    input.maximum !== undefined &&
+    input.colorMap !== undefined
+  );
+}
+
+interface UseMeshCellsCellAttributeStyleReturn {
+  meshCellsCellAttributeName: (id: string) => string | undefined;
+  meshCellsCellAttributeItem: (id: string) => number;
+  meshCellsCellAttributeRange: (id: string) => [number | undefined, number | undefined];
+  meshCellsCellAttributeTimeStep: (id: string) => number | undefined;
+  setMeshCellsCellAttributeTimeStep: (id: string, timeStep: number) => Promise<unknown>;
+  meshCellsCellAttributeColorMap: (id: string) => string | undefined;
+  meshCellsCellAttributeStoredConfig: (
+    id: string,
+    name: string | undefined,
+    item: number | undefined,
+  ) => AttributeStoredConfig;
+  setMeshCellsCellAttribute: (id: string, input: ValidAttributeInput) => Promise<unknown>;
+  setMeshCellsCellAttributeName: (id: string, name: string) => Promise<unknown>;
+  setMeshCellsCellAttributeItem: (id: string, item: number) => Promise<unknown>;
+  setMeshCellsCellAttributeRange: (
+    id: string,
+    minimum: number,
+    maximum: number,
+  ) => Promise<unknown>;
+  setMeshCellsCellAttributeColorMap: (id: string, colorMap: string | undefined) => Promise<unknown>;
+  meshCellsCellAttributeNoDataColor: (id: string) => RGBAColor;
+  setMeshCellsCellAttributeNoDataColor: (id: string, no_data_color: RGBAColor) => Promise<unknown>;
+}
+export { isMeshCellsCellAttributeValid };
+export type {
+  AttributeStoredConfig,
+  AttributeState,
+  ValidAttributeInput,
+  UseMeshCellsCellAttributeStyleReturn,
+};
diff --git a/internal/stores/data_style/mesh/cells/cell_config.ts b/internal/stores/data_style/mesh/cells/cell_config.ts
new file mode 100644
index 000000000..3e9b8880a
--- /dev/null
+++ b/internal/stores/data_style/mesh/cells/cell_config.ts
@@ -0,0 +1,152 @@
+import type { AttributeState, AttributeStoredConfig } from "./cell_attribute";
+import { DEFAULT_NO_DATA_COLOR, type RGBAColor } from "@ogw_front/utils/default_styles/constants";
+
+// Local imports
+import { useMeshCellsCommonStyle } from "./common";
+
+interface UseMeshCellsCellAttributeConfigReturn {
+  meshCellsCellAttribute: (id: string) => AttributeState;
+  meshCellsCellAttributeName: (id: string) => string | undefined;
+  meshCellsCellAttributeLastItem: (id: string, name: string | undefined) => number;
+  meshCellsCellAttributeItem: (id: string) => number;
+  meshCellsCellAttributeStoredConfig: (
+    id: string,
+    name: string | undefined,
+    item: number | undefined,
+  ) => AttributeStoredConfig;
+}
+
+interface UseMeshCellsCellAttributeConfigWriterReturn {
+  mutateMeshCellsCellStyle: (id: string, values: Record<string, unknown>) => Promise<string>;
+  setMeshCellsCellAttributeStoredConfig: (
+    id: string,
+    name: string | undefined,
+    item: number | undefined,
+    config: Partial<AttributeStoredConfig>,
+  ) => Promise<string>;
+}
+
+function useMeshCellsCellAttributeConfig(): UseMeshCellsCellAttributeConfigReturn {
+  const meshCellsCommonStyle = useMeshCellsCommonStyle();
+  function meshCellsCellAttribute(id: string): AttributeState {
+    // oxlint-disable-next-line no-unsafe-type-assertion -- coloring.cell shape is defined by the data style schema.
+    return meshCellsCommonStyle.meshCellsColoring(id).cell as AttributeState;
+  }
+  function meshCellsCellAttributeStoredConfig(
+    id: string,
+    name: string | undefined,
+    item: number | undefined,
+  ): AttributeStoredConfig {
+    const { storedConfigs } = meshCellsCellAttribute(id);
+    const nameConfig = name === undefined ? undefined : storedConfigs?.[name];
+    const itemConfig = item === undefined ? undefined : nameConfig?.[item];
+    if (itemConfig !== undefined) {
+      return itemConfig;
+    }
+    return {
+      minimum: undefined,
+      maximum: undefined,
+      colorMap: undefined,
+      no_data_color: DEFAULT_NO_DATA_COLOR,
+    };
+  }
+  function meshCellsCellAttributeName(id: string): string | undefined {
+    return meshCellsCellAttribute(id).name;
+  }
+  function meshCellsCellAttributeLastItem(id: string, name: string | undefined): number {
+    const { storedConfigs } = meshCellsCellAttribute(id);
+    const nameConfig = name === undefined ? undefined : storedConfigs?.[name];
+    if (nameConfig !== undefined) {
+      return nameConfig.lastItem;
+    }
+    return 0;
+  }
+  function meshCellsCellAttributeItem(id: string): number {
+    const { item, name } = meshCellsCellAttribute(id);
+    return item ?? meshCellsCellAttributeLastItem(id, name);
+  }
+  return {
+    meshCellsCellAttribute,
+    meshCellsCellAttributeName,
+    meshCellsCellAttributeLastItem,
+    meshCellsCellAttributeItem,
+    meshCellsCellAttributeStoredConfig,
+  };
+}
+
+interface UseMeshCellsCellAttributeConfigValuesReturn {
+  meshCellsCellAttributeRange: (id: string) => [number | undefined, number | undefined];
+  meshCellsCellAttributeColorMap: (id: string) => string | undefined;
+  meshCellsCellAttributeNoDataColor: (id: string) => RGBAColor;
+}
+
+function useMeshCellsCellAttributeConfigValues(): UseMeshCellsCellAttributeConfigValuesReturn {
+  const {
+    meshCellsCellAttributeName,
+    meshCellsCellAttributeItem,
+    meshCellsCellAttributeStoredConfig,
+  } = useMeshCellsCellAttributeConfig();
+  function meshCellsCellAttributeRange(id: string): [number | undefined, number | undefined] {
+    const name = meshCellsCellAttributeName(id);
+    const item = meshCellsCellAttributeItem(id);
+    const storedConfig = meshCellsCellAttributeStoredConfig(id, name, item);
+    return [storedConfig.minimum, storedConfig.maximum];
+  }
+  function meshCellsCellAttributeColorMap(id: string): string | undefined {
+    const name = meshCellsCellAttributeName(id);
+    const item = meshCellsCellAttributeItem(id);
+    const storedConfig = meshCellsCellAttributeStoredConfig(id, name, item);
+    return storedConfig.colorMap;
+  }
+  function meshCellsCellAttributeNoDataColor(id: string): RGBAColor {
+    const name = meshCellsCellAttributeName(id);
+    const item = meshCellsCellAttributeItem(id);
+    const storedConfig = meshCellsCellAttributeStoredConfig(id, name, item);
+    return storedConfig.no_data_color;
+  }
+  return {
+    meshCellsCellAttributeRange,
+    meshCellsCellAttributeColorMap,
+    meshCellsCellAttributeNoDataColor,
+  };
+}
+
+function useMeshCellsCellAttributeConfigWriter(): UseMeshCellsCellAttributeConfigWriterReturn {
+  const meshCellsCommonStyle = useMeshCellsCommonStyle();
+  async function mutateMeshCellsCellStyle(
+    id: string,
+    values: Record<string, unknown>,
+  ): Promise<string> {
+    const result = await meshCellsCommonStyle.mutateMeshCellsStyle(id, {
+      coloring: {
+        cell: values,
+      },
+    });
+    return result;
+  }
+  async function setMeshCellsCellAttributeStoredConfig(
+    id: string,
+    name: string | undefined,
+    item: number | undefined,
+    config: Partial<AttributeStoredConfig>,
+  ): Promise<string> {
+    const result = await mutateMeshCellsCellStyle(id, {
+      storedConfigs: {
+        [name ?? ""]: {
+          lastItem: item,
+          [item ?? 0]: config,
+        },
+      },
+    });
+    return result;
+  }
+  return {
+    mutateMeshCellsCellStyle,
+    setMeshCellsCellAttributeStoredConfig,
+  };
+}
+export {
+  useMeshCellsCellAttributeConfig,
+  useMeshCellsCellAttributeConfigValues,
+  useMeshCellsCellAttributeConfigWriter,
+};
diff --git a/internal/stores/data_style/mesh/cells/vertex.ts b/internal/stores/data_style/mesh/cells/vertex.ts
index ada1e3dfc..b5fe7046e 100644
--- a/internal/stores/data_style/mesh/cells/vertex.ts
+++ b/internal/stores/data_style/mesh/cells/vertex.ts
@@ -4,9 +4,18 @@ import back_schemas from "@geode/opengeodeweb-back/opengeodeweb_back_typed_schem
 import viewer_schemas from "@geode/opengeodeweb-viewer/opengeodeweb_viewer_typed_schemas.js";
 
 // Local imports
+import {
+  type UseMeshCellsVertexAttributeStyleReturn,
+  type ValidAttributeInput,
+  isMeshCellsVertexAttributeValid,
+} from "./vertex_attribute";
+import {
+  useMeshCellsVertexAttributeConfig,
+  useMeshCellsVertexAttributeConfigValues,
+  useMeshCellsVertexAttributeConfigWriter,
+} from "./vertex_config";
 import { getRGBPointsFromPreset } from "@ogw_front/utils/colormap";
 import { useAttributeTimeStepStyle } from "@ogw_internal/stores/data_style/time_step";
-import { useMeshCellsCommonStyle } from "./common";
 import { useViewerStore } from "@ogw_front/stores/viewer";
 
 // Local constants
@@ -14,147 +23,24 @@ const attributeNamesSchema = back_schemas.opengeodeweb_back.vertex_attribute_nam
 const meshCellsVertexAttributeSchemas =
   viewer_schemas.opengeodeweb_viewer.mesh.cells.attribute.vertex;
 
-interface AttributeStoredConfig {
-  minimum: number | undefined;
-  maximum: number | undefined;
-  colorMap: string | undefined;
-  no_data_color: RGBAColor;
-}
-
-interface AttributeState {
-  name?: string;
-  item?: number;
-  storedConfigs?: Record<string, { lastItem: number } & Record<string, AttributeStoredConfig>>;
-}
-
-interface AttributeInput {
-  name: string | undefined;
-  item: number | undefined;
-  minimum: number | undefined;
-  maximum: number | undefined;
-  colorMap: string | undefined;
-  no_data_color?: RGBAColor;
-}
-
-interface ValidAttributeInput {
-  name: string;
-  item: number;
-  minimum: number;
-  maximum: number;
-  colorMap: string;
-  no_data_color?: RGBAColor;
-}
-
-function isMeshCellsVertexAttributeValid(input: AttributeInput): input is ValidAttributeInput {
-  return (
-    input.name !== undefined &&
-    input.item !== undefined &&
-    input.minimum !== undefined &&
-    input.maximum !== undefined &&
-    input.colorMap !== undefined
-  );
-}
-
-interface UseMeshCellsVertexAttributeStyleReturn {
-  meshCellsVertexAttributeName: (id: string) => string | undefined;
-  meshCellsVertexAttributeItem: (id: string) => number;
-  meshCellsVertexAttributeRange: (id: string) => [number | undefined, number | undefined];
-  meshCellsVertexAttributeTimeStep: (id: string) => number | undefined;
-  setMeshCellsVertexAttributeTimeStep: (id: string, timeStep: number) => Promise<unknown>;
-  meshCellsVertexAttributeColorMap: (id: string) => string | undefined;
-  meshCellsVertexAttributeStoredConfig: (
-    id: string,
-    name: string | undefined,
-    item: number | undefined,
-  ) => AttributeStoredConfig;
-  setMeshCellsVertexAttribute: (id: string, input: ValidAttributeInput) => Promise<unknown>;
-  setMeshCellsVertexAttributeName: (id: string, name: string) => Promise<unknown>;
-  setMeshCellsVertexAttributeItem: (id: string, item: number) => Promise<unknown>;
-  setMeshCellsVertexAttributeRange: (
-    id: string,
-    minimum: number,
-    maximum: number,
-  ) => Promise<unknown>;
-  setMeshCellsVertexAttributeColorMap: (
-    id: string,
-    colorMap: string | undefined,
-  ) => Promise<unknown>;
-  meshCellsVertexAttributeNoDataColor: (id: string) => RGBAColor;
-  setMeshCellsVertexAttributeNoDataColor: (
-    id: string,
-    no_data_color: RGBAColor,
-  ) => Promise<unknown>;
-}
-
 // oxlint-disable-next-line max-lines-per-function
 function useMeshCellsVertexAttributeStyle(): UseMeshCellsVertexAttributeStyleReturn {
   const { attributeTimeStep, setAttributeTimeStep, seriesArrayName } = useAttributeTimeStepStyle();
   const viewerStore = useViewerStore();
-  const meshCellsCommonStyle = useMeshCellsCommonStyle();
-  function meshCellsVertexAttribute(id: string): AttributeState {
-    // oxlint-disable-next-line no-unsafe-type-assertion -- coloring.vertex shape is defined by the data style schema.
-    return meshCellsCommonStyle.meshCellsColoring(id).vertex as AttributeState;
-  }
-  function meshCellsVertexAttributeStoredConfig(
-    id: string,
-    name: string | undefined,
-    item: number | undefined,
-  ): AttributeStoredConfig {
-    const { storedConfigs } = meshCellsVertexAttribute(id);
-    const nameConfig = name === undefined ? undefined : storedConfigs?.[name];
-    const itemConfig = item === undefined ? undefined : nameConfig?.[item];
-    if (itemConfig !== undefined) {
-      return itemConfig;
-    }
-    return {
-      minimum: undefined,
-      maximum: undefined,
-      colorMap: undefined,
-      no_data_color: DEFAULT_NO_DATA_COLOR,
-    };
-  }
-  async function mutateMeshCellsVertexStyle(
-    id: string,
-    values: Record<string, unknown>,
-  ): Promise<string> {
-    const result = await meshCellsCommonStyle.mutateMeshCellsStyle(id, {
-      coloring: {
-        vertex: values,
-      },
-    });
-    return result;
-  }
-  async function setMeshCellsVertexAttributeStoredConfig(
-    id: string,
-    name: string | undefined,
-    item: number | undefined,
-    config: Partial<AttributeStoredConfig>,
-  ): Promise<string> {
-    const result = await mutateMeshCellsVertexStyle(id, {
-      storedConfigs: {
-        [name ?? ""]: {
-          lastItem: item,
-          [item ?? 0]: config,
-        },
-      },
-    });
-    return result;
-  }
-  function meshCellsVertexAttributeName(id: string): string | undefined {
-    return meshCellsVertexAttribute(id).name;
-  }
-  function meshCellsVertexAttributeLastItem(id: string, name: string | undefined): number {
-    const { storedConfigs } = meshCellsVertexAttribute(id);
-    const nameConfig = name === undefined ? undefined : storedConfigs?.[name];
-    if (nameConfig !== undefined) {
-      return nameConfig.lastItem;
-    }
-    return 0;
-  }
-  function meshCellsVertexAttributeItem(id: string): number {
-    const { item, name } = meshCellsVertexAttribute(id);
-    return item ?? meshCellsVertexAttributeLastItem(id, name);
-  }
+  const {
+    meshCellsVertexAttribute,
+    meshCellsVertexAttributeName,
+    meshCellsVertexAttributeLastItem,
+    meshCellsVertexAttributeItem,
+    meshCellsVertexAttributeStoredConfig,
+  } = useMeshCellsVertexAttributeConfig();
+  const {
+    meshCellsVertexAttributeRange,
+    meshCellsVertexAttributeColorMap,
+    meshCellsVertexAttributeNoDataColor,
+  } = useMeshCellsVertexAttributeConfigValues();
+  const { mutateMeshCellsVertexStyle, setMeshCellsVertexAttributeStoredConfig } =
+    useMeshCellsVertexAttributeConfigWriter();
   function meshCellsVertexAttributeTimeStep(id: string): number | undefined {
     return attributeTimeStep(id, attributeNamesSchema.$id, meshCellsVertexAttribute(id).name);
   }
@@ -227,12 +113,6 @@ function useMeshCellsVertexAttributeStyle(): UseMeshCellsVertexAttributeStyleRet
     });
     return applyVertexAttribute(id);
   }
-  function meshCellsVertexAttributeRange(id: string): [number | undefined, number | undefined] {
-    const name = meshCellsVertexAttributeName(id);
-    const item = meshCellsVertexAttributeItem(id);
-    const storedConfig = meshCellsVertexAttributeStoredConfig(id, name, item);
-    return [storedConfig.minimum, storedConfig.maximum];
-  }
   async function setMeshCellsVertexAttributeTimeStep(
     id: string,
     timeStep: number,
@@ -257,12 +137,6 @@ function useMeshCellsVertexAttributeStyle(): UseMeshCellsVertexAttributeStyleRet
     });
     return applyVertexAttribute(id);
   }
-  function meshCellsVertexAttributeColorMap(id: string): string | undefined {
-    const name = meshCellsVertexAttributeName(id);
-    const item = meshCellsVertexAttributeItem(id);
-    const storedConfig = meshCellsVertexAttributeStoredConfig(id, name, item);
-    return storedConfig.colorMap;
-  }
   async function setMeshCellsVertexAttributeColorMap(
     id: string,
     colorMap: string | undefined,
@@ -274,12 +148,6 @@ function useMeshCellsVertexAttributeStyle(): UseMeshCellsVertexAttributeStyleRet
     });
     return applyVertexAttribute(id);
   }
-  function meshCellsVertexAttributeNoDataColor(id: string): RGBAColor {
-    const name = meshCellsVertexAttributeName(id);
-    const item = meshCellsVertexAttributeItem(id);
-    const storedConfig = meshCellsVertexAttributeStoredConfig(id, name, item);
-    return storedConfig.no_data_color;
-  }
   async function setMeshCellsVertexAttributeNoDataColor(
     id: string,
     no_data_color: RGBAColor,
@@ -310,4 +178,5 @@ function useMeshCellsVertexAttributeStyle(): UseMeshCellsVertexAttributeStyleRet
     setMeshCellsVertexAttributeNoDataColor,
   };
 }
-export { isMeshCellsVertexAttributeValid, useMeshCellsVertexAttributeStyle };
+export { useMeshCellsVertexAttributeStyle };
+export { isMeshCellsVertexAttributeValid } from "./vertex_attribute";
diff --git a/internal/stores/data_style/mesh/cells/vertex_attribute.ts b/internal/stores/data_style/mesh/cells/vertex_attribute.ts
new file mode 100644
index 000000000..b7df8dc26
--- /dev/null
+++ b/internal/stores/data_style/mesh/cells/vertex_attribute.ts
@@ -0,0 +1,80 @@
+import type { RGBAColor } from "@ogw_front/utils/default_styles/constants";
+
+interface AttributeStoredConfig {
+  minimum: number | undefined;
+  maximum: number | undefined;
+  colorMap: string | undefined;
+  no_data_color: RGBAColor;
+}
+
+interface AttributeState {
+  name?: string;
+  item?: number;
+  storedConfigs?: Record<string, { lastItem: number } & Record<string, AttributeStoredConfig>>;
+}
+
+interface AttributeInput {
+  name: string | undefined;
+  item: number | undefined;
+  minimum: number | undefined;
+  maximum: number | undefined;
+  colorMap: string | undefined;
+  no_data_color?: RGBAColor;
+}
+
+interface ValidAttributeInput {
+  name: string;
+  item: number;
+  minimum: number;
+  maximum: number;
+  colorMap: string;
+  no_data_color?: RGBAColor;
+}
+
+function isMeshCellsVertexAttributeValid(input: AttributeInput): input is ValidAttributeInput {
+  return (
+    input.name !== undefined &&
+    input.item !== undefined &&
+    input.minimum !== undefined &&
+    input.maximum !== undefined &&
+    input.colorMap !== undefined
+  );
+}
+
+interface UseMeshCellsVertexAttributeStyleReturn {
+  meshCellsVertexAttributeName: (id: string) => string | undefined;
+  meshCellsVertexAttributeItem: (id: string) => number;
+  meshCellsVertexAttributeRange: (id: string) => [number | undefined, number | undefined];
+  meshCellsVertexAttributeTimeStep: (id: string) => number | undefined;
+  setMeshCellsVertexAttributeTimeStep: (id: string, timeStep: number) => Promise<unknown>;
+  meshCellsVertexAttributeColorMap: (id: string) => string | undefined;
+  meshCellsVertexAttributeStoredConfig: (
+    id: string,
+    name: string | undefined,
+    item: number | undefined,
+  ) => AttributeStoredConfig;
+  setMeshCellsVertexAttribute: (id: string, input: ValidAttributeInput) => Promise<unknown>;
+  setMeshCellsVertexAttributeName: (id: string, name: string) => Promise<unknown>;
+  setMeshCellsVertexAttributeItem: (id: string, item: number) => Promise<unknown>;
+  setMeshCellsVertexAttributeRange: (
+    id: string,
+    minimum: number,
+    maximum: number,
+  ) => Promise<unknown>;
+  setMeshCellsVertexAttributeColorMap: (
+    id: string,
+    colorMap: string | undefined,
+  ) => Promise<unknown>;
+  meshCellsVertexAttributeNoDataColor: (id: string) => RGBAColor;
+  setMeshCellsVertexAttributeNoDataColor: (
+    id: string,
+    no_data_color: RGBAColor,
+  ) => Promise<unknown>;
+}
+export { isMeshCellsVertexAttributeValid };
+export type {
+  AttributeStoredConfig,
+  AttributeState,
+  ValidAttributeInput,
+  UseMeshCellsVertexAttributeStyleReturn,
+};
diff --git a/internal/stores/data_style/mesh/cells/vertex_config.ts b/internal/stores/data_style/mesh/cells/vertex_config.ts
new file mode 100644
index 000000000..390d2fb6d
--- /dev/null
+++ b/internal/stores/data_style/mesh/cells/vertex_config.ts
@@ -0,0 +1,152 @@
+import type { AttributeState, AttributeStoredConfig } from "./vertex_attribute";
+import { DEFAULT_NO_DATA_COLOR, type RGBAColor } from "@ogw_front/utils/default_styles/constants";
+
+// Local imports
+import { useMeshCellsCommonStyle } from "./common";
+
+interface UseMeshCellsVertexAttributeConfigReturn {
+  meshCellsVertexAttribute: (id: string) => AttributeState;
+  meshCellsVertexAttributeName: (id: string) => string | undefined;
+  meshCellsVertexAttributeLastItem: (id: string, name: string | undefined) => number;
+  meshCellsVertexAttributeItem: (id: string) => number;
+  meshCellsVertexAttributeStoredConfig: (
+    id: string,
+    name: string | undefined,
+    item: number | undefined,
+  ) => AttributeStoredConfig;
+}
+
+interface UseMeshCellsVertexAttributeConfigWriterReturn {
+  mutateMeshCellsVertexStyle: (id: string, values: Record<string, unknown>) => Promise<string>;
+  setMeshCellsVertexAttributeStoredConfig: (
+    id: string,
+    name: string | undefined,
+    item: number | undefined,
+    config: Partial<AttributeStoredConfig>,
+  ) => Promise<string>;
+}
+
+function useMeshCellsVertexAttributeConfig(): UseMeshCellsVertexAttributeConfigReturn {
+  const meshCellsCommonStyle = useMeshCellsCommonStyle();
+  function meshCellsVertexAttribute(id: string): AttributeState {
+    // oxlint-disable-next-line no-unsafe-type-assertion -- coloring.vertex shape is defined by the data style schema.
+    return meshCellsCommonStyle.meshCellsColoring(id).vertex as AttributeState;
+  }
+  function meshCellsVertexAttributeStoredConfig(
+    id: string,
+    name: string | undefined,
+    item: number | undefined,
+  ): AttributeStoredConfig {
+    const { storedConfigs } = meshCellsVertexAttribute(id);
+    const nameConfig = name === undefined ? undefined : storedConfigs?.[name];
+    const itemConfig = item === undefined ? undefined : nameConfig?.[item];
+    if (itemConfig !== undefined) {
+      return itemConfig;
+    }
+    return {
+      minimum: undefined,
+      maximum: undefined,
+      colorMap: undefined,
+      no_data_color: DEFAULT_NO_DATA_COLOR,
+    };
+  }
+  function meshCellsVertexAttributeName(id: string): string | undefined {
+    return meshCellsVertexAttribute(id).name;
+  }
+  function meshCellsVertexAttributeLastItem(id: string, name: string | undefined): number {
+    const { storedConfigs } = meshCellsVertexAttribute(id);
+    const nameConfig = name === undefined ? undefined : storedConfigs?.[name];
+    if (nameConfig !== undefined) {
+      return nameConfig.lastItem;
+    }
+    return 0;
+  }
+  function meshCellsVertexAttributeItem(id: string): number {
+    const { item, name } = meshCellsVertexAttribute(id);
+    return item ?? meshCellsVertexAttributeLastItem(id, name);
+  }
+  return {
+    meshCellsVertexAttribute,
+    meshCellsVertexAttributeName,
+    meshCellsVertexAttributeLastItem,
+    meshCellsVertexAttributeItem,
+    meshCellsVertexAttributeStoredConfig,
+  };
+}
+
+interface UseMeshCellsVertexAttributeConfigValuesReturn {
+  meshCellsVertexAttributeRange: (id: string) => [number | undefined, number | undefined];
+  meshCellsVertexAttributeColorMap: (id: string) => string | undefined;
+  meshCellsVertexAttributeNoDataColor: (id: string) => RGBAColor;
+}
+
+function useMeshCellsVertexAttributeConfigValues(): UseMeshCellsVertexAttributeConfigValuesReturn {
+  const {
+    meshCellsVertexAttributeName,
+    meshCellsVertexAttributeItem,
+    meshCellsVertexAttributeStoredConfig,
+  } = useMeshCellsVertexAttributeConfig();
+  function meshCellsVertexAttributeRange(id: string): [number | undefined, number | undefined] {
+    const name = meshCellsVertexAttributeName(id);
+    const item = meshCellsVertexAttributeItem(id);
+    const storedConfig = meshCellsVertexAttributeStoredConfig(id, name, item);
+    return [storedConfig.minimum, storedConfig.maximum];
+  }
+  function meshCellsVertexAttributeColorMap(id: string): string | undefined {
+    const name = meshCellsVertexAttributeName(id);
+    const item = meshCellsVertexAttributeItem(id);
+    const storedConfig = meshCellsVertexAttributeStoredConfig(id, name, item);
+    return storedConfig.colorMap;
+  }
+  function meshCellsVertexAttributeNoDataColor(id: string): RGBAColor {
+    const name = meshCellsVertexAttributeName(id);
+    const item = meshCellsVertexAttributeItem(id);
+    const storedConfig = meshCellsVertexAttributeStoredConfig(id, name, item);
+    return storedConfig.no_data_color;
+  }
+  return {
+    meshCellsVertexAttributeRange,
+    meshCellsVertexAttributeColorMap,
+    meshCellsVertexAttributeNoDataColor,
+  };
+}
+
+function useMeshCellsVertexAttributeConfigWriter(): UseMeshCellsVertexAttributeConfigWriterReturn {
+  const meshCellsCommonStyle = useMeshCellsCommonStyle();
+  async function mutateMeshCellsVertexStyle(
+    id: string,
+    values: Record<string, unknown>,
+  ): Promise<string> {
+    const result = await meshCellsCommonStyle.mutateMeshCellsStyle(id, {
+      coloring: {
+        vertex: values,
+      },
+    });
+    return result;
+  }
+  async function setMeshCellsVertexAttributeStoredConfig(
+    id: string,
+    name: string | undefined,
+    item: number | undefined,
+    config: Partial<AttributeStoredConfig>,
+  ): Promise<string> {
+    const result = await mutateMeshCellsVertexStyle(id, {
+      storedConfigs: {
+        [name ?? ""]: {
+          lastItem: item,
+          [item ?? 0]: config,
+        },
+      },
+    });
+    return result;
+  }
+  return {
+    mutateMeshCellsVertexStyle,
+    setMeshCellsVertexAttributeStoredConfig,
+  };
+}
+export {
+  useMeshCellsVertexAttributeConfig,
+  useMeshCellsVertexAttributeConfigValues,
+  useMeshCellsVertexAttributeConfigWriter,
+};
diff --git a/internal/stores/data_style/mesh/edges/edge.ts b/internal/stores/data_style/mesh/edges/edge.ts
index 685f6b723..14bc5567b 100644
--- a/internal/stores/data_style/mesh/edges/edge.ts
+++ b/internal/stores/data_style/mesh/edges/edge.ts
@@ -4,148 +4,42 @@ import back_schemas from "@geode/opengeodeweb-back/opengeodeweb_back_typed_schem
 import viewer_schemas from "@geode/opengeodeweb-viewer/opengeodeweb_viewer_typed_schemas.js";
 
 // Local imports
+import {
+  type UseMeshEdgesEdgeAttributeStyleReturn,
+  type ValidAttributeInput,
+  isMeshEdgesEdgeAttributeValid,
+} from "./edge_attribute";
+import {
+  useMeshEdgesEdgeAttributeConfig,
+  useMeshEdgesEdgeAttributeConfigValues,
+  useMeshEdgesEdgeAttributeConfigWriter,
+} from "./edge_config";
 import { getRGBPointsFromPreset } from "@ogw_front/utils/colormap";
 import { useAttributeTimeStepStyle } from "@ogw_internal/stores/data_style/time_step";
-import { useMeshEdgesCommonStyle } from "./common";
 import { useViewerStore } from "@ogw_front/stores/viewer";
 
 // Local constants
 const attributeNamesSchema = back_schemas.opengeodeweb_back.edge_attribute_names;
 const meshEdgesEdgeAttributeSchemas = viewer_schemas.opengeodeweb_viewer.mesh.edges.attribute.edge;
 
-interface AttributeStoredConfig {
-  minimum: number | undefined;
-  maximum: number | undefined;
-  colorMap: string | undefined;
-  no_data_color: RGBAColor;
-}
-
-interface AttributeState {
-  name?: string;
-  item?: number;
-  storedConfigs?: Record<string, { lastItem: number } & Record<string, AttributeStoredConfig>>;
-}
-
-interface AttributeInput {
-  name: string | undefined;
-  item: number | undefined;
-  minimum: number | undefined;
-  maximum: number | undefined;
-  colorMap: string | undefined;
-  no_data_color?: RGBAColor;
-}
-
-interface ValidAttributeInput {
-  name: string;
-  item: number;
-  minimum: number;
-  maximum: number;
-  colorMap: string;
-  no_data_color?: RGBAColor;
-}
-
-function isMeshEdgesEdgeAttributeValid(input: AttributeInput): input is ValidAttributeInput {
-  return (
-    input.name !== undefined &&
-    input.item !== undefined &&
-    input.minimum !== undefined &&
-    input.maximum !== undefined &&
-    input.colorMap !== undefined
-  );
-}
-
 // oxlint-disable-next-line max-lines-per-function
-function useMeshEdgesEdgeAttributeStyle(): {
-  meshEdgesEdgeAttributeName: (id: string) => string | undefined;
-  meshEdgesEdgeAttributeItem: (id: string) => number;
-  meshEdgesEdgeAttributeRange: (id: string) => [number | undefined, number | undefined];
-  meshEdgesEdgeAttributeTimeStep: (id: string) => number | undefined;
-  setMeshEdgesEdgeAttributeTimeStep: (id: string, timeStep: number) => Promise<unknown>;
-  meshEdgesEdgeAttributeColorMap: (id: string) => string | undefined;
-  meshEdgesEdgeAttributeStoredConfig: (
-    id: string,
-    name: string | undefined,
-    item: number | undefined,
-  ) => AttributeStoredConfig;
-  setMeshEdgesEdgeAttribute: (id: string, input: ValidAttributeInput) => Promise<unknown>;
-  setMeshEdgesEdgeAttributeName: (id: string, name: string) => Promise<unknown>;
-  setMeshEdgesEdgeAttributeItem: (id: string, item: number) => Promise<unknown>;
-  setMeshEdgesEdgeAttributeRange: (
-    id: string,
-    minimum: number,
-    maximum: number,
-  ) => Promise<unknown>;
-  setMeshEdgesEdgeAttributeColorMap: (id: string, colorMap: string | undefined) => Promise<unknown>;
-  meshEdgesEdgeAttributeNoDataColor: (id: string) => RGBAColor;
-  setMeshEdgesEdgeAttributeNoDataColor: (id: string, no_data_color: RGBAColor) => Promise<unknown>;
-} {
+function useMeshEdgesEdgeAttributeStyle(): UseMeshEdgesEdgeAttributeStyleReturn {
   const { attributeTimeStep, setAttributeTimeStep, seriesArrayName } = useAttributeTimeStepStyle();
   const viewerStore = useViewerStore();
-  const meshEdgesCommonStyle = useMeshEdgesCommonStyle();
-  function meshEdgesEdgeAttribute(id: string): AttributeState {
-    // oxlint-disable-next-line no-unsafe-type-assertion -- coloring.edge shape is defined by the data style schema.
-    return meshEdgesCommonStyle.meshEdgesColoring(id).edge as AttributeState;
-  }
-  function meshEdgesEdgeAttributeStoredConfig(
-    id: string,
-    name: string | undefined,
-    item: number | undefined,
-  ): AttributeStoredConfig {
-    const { storedConfigs } = meshEdgesEdgeAttribute(id);
-    const nameConfig = name === undefined ? undefined : storedConfigs?.[name];
-    const itemConfig = item === undefined ? undefined : nameConfig?.[item];
-    if (itemConfig !== undefined) {
-      return itemConfig;
-    }
-    return {
-      minimum: undefined,
-      maximum: undefined,
-      colorMap: undefined,
-      no_data_color: DEFAULT_NO_DATA_COLOR,
-    };
-  }
-  async function mutateMeshEdgesEdgeStyle(
-    id: string,
-    values: Record<string, unknown>,
-  ): Promise<string> {
-    const result = await meshEdgesCommonStyle.mutateMeshEdgesStyle(id, {
-      coloring: {
-        edge: values,
-      },
-    });
-    return result;
-  }
-  async function setMeshEdgesEdgeAttributeStoredConfig(
-    id: string,
-    name: string | undefined,
-    item: number | undefined,
-    config: Partial<AttributeStoredConfig>,
-  ): Promise<string> {
-    const result = await mutateMeshEdgesEdgeStyle(id, {
-      storedConfigs: {
-        [name ?? ""]: {
-          lastItem: item,
-          [item ?? 0]: config,
-        },
-      },
-    });
-    return result;
-  }
-  function meshEdgesEdgeAttributeName(id: string): string | undefined {
-    return meshEdgesEdgeAttribute(id).name;
-  }
-  function meshEdgesEdgeAttributeLastItem(id: string, name: string | undefined): number {
-    const { storedConfigs } = meshEdgesEdgeAttribute(id);
-    const nameConfig = name === undefined ? undefined : storedConfigs?.[name];
-    if (nameConfig !== undefined) {
-      return nameConfig.lastItem;
-    }
-    return 0;
-  }
-  function meshEdgesEdgeAttributeItem(id: string): number {
-    const { item, name } = meshEdgesEdgeAttribute(id);
-    return item ?? meshEdgesEdgeAttributeLastItem(id, name);
-  }
+  const {
+    meshEdgesEdgeAttribute,
+    meshEdgesEdgeAttributeName,
+    meshEdgesEdgeAttributeLastItem,
+    meshEdgesEdgeAttributeItem,
+    meshEdgesEdgeAttributeStoredConfig,
+  } = useMeshEdgesEdgeAttributeConfig();
+  const {
+    meshEdgesEdgeAttributeRange,
+    meshEdgesEdgeAttributeColorMap,
+    meshEdgesEdgeAttributeNoDataColor,
+  } = useMeshEdgesEdgeAttributeConfigValues();
+  const { mutateMeshEdgesEdgeStyle, setMeshEdgesEdgeAttributeStoredConfig } =
+    useMeshEdgesEdgeAttributeConfigWriter();
   function meshEdgesEdgeAttributeTimeStep(id: string): number | undefined {
     return attributeTimeStep(id, attributeNamesSchema.$id, meshEdgesEdgeAttribute(id).name);
   }
@@ -218,12 +112,6 @@ function useMeshEdgesEdgeAttributeStyle(): {
     });
     return applyEdgeAttribute(id);
   }
-  function meshEdgesEdgeAttributeRange(id: string): [number | undefined, number | undefined] {
-    const name = meshEdgesEdgeAttributeName(id);
-    const item = meshEdgesEdgeAttributeItem(id);
-    const storedConfig = meshEdgesEdgeAttributeStoredConfig(id, name, item);
-    return [storedConfig.minimum, storedConfig.maximum];
-  }
   async function setMeshEdgesEdgeAttributeTimeStep(id: string, timeStep: number): Promise<unknown> {
     const name = meshEdgesEdgeAttributeName(id);
     if (name === undefined) {
@@ -245,12 +133,6 @@ function useMeshEdgesEdgeAttributeStyle(): {
     });
     return applyEdgeAttribute(id);
   }
-  function meshEdgesEdgeAttributeColorMap(id: string): string | undefined {
-    const name = meshEdgesEdgeAttributeName(id);
-    const item = meshEdgesEdgeAttributeItem(id);
-    const storedConfig = meshEdgesEdgeAttributeStoredConfig(id, name, item);
-    return storedConfig.colorMap;
-  }
   async function setMeshEdgesEdgeAttributeColorMap(
     id: string,
     colorMap: string | undefined,
@@ -262,12 +144,6 @@ function useMeshEdgesEdgeAttributeStyle(): {
     });
     return applyEdgeAttribute(id);
   }
-  function meshEdgesEdgeAttributeNoDataColor(id: string): RGBAColor {
-    const name = meshEdgesEdgeAttributeName(id);
-    const item = meshEdgesEdgeAttributeItem(id);
-    const storedConfig = meshEdgesEdgeAttributeStoredConfig(id, name, item);
-    return storedConfig.no_data_color;
-  }
   async function setMeshEdgesEdgeAttributeNoDataColor(
     id: string,
     no_data_color: RGBAColor,
@@ -298,4 +174,5 @@ function useMeshEdgesEdgeAttributeStyle(): {
     setMeshEdgesEdgeAttributeNoDataColor,
   };
 }
-export { isMeshEdgesEdgeAttributeValid, useMeshEdgesEdgeAttributeStyle };
+export { useMeshEdgesEdgeAttributeStyle };
+export { isMeshEdgesEdgeAttributeValid } from "./edge_attribute";
diff --git a/internal/stores/data_style/mesh/edges/edge_attribute.ts b/internal/stores/data_style/mesh/edges/edge_attribute.ts
new file mode 100644
index 000000000..b79a8fff4
--- /dev/null
+++ b/internal/stores/data_style/mesh/edges/edge_attribute.ts
@@ -0,0 +1,74 @@
+import type { RGBAColor } from "@ogw_front/utils/default_styles/constants";
+
+interface AttributeStoredConfig {
+  minimum: number | undefined;
+  maximum: number | undefined;
+  colorMap: string | undefined;
+  no_data_color: RGBAColor;
+}
+
+interface AttributeState {
+  name?: string;
+  item?: number;
+  storedConfigs?: Record<string, { lastItem: number } & Record<string, AttributeStoredConfig>>;
+}
+
+interface AttributeInput {
+  name: string | undefined;
+  item: number | undefined;
+  minimum: number | undefined;
+  maximum: number | undefined;
+  colorMap: string | undefined;
+  no_data_color?: RGBAColor;
+}
+
+interface ValidAttributeInput {
+  name: string;
+  item: number;
+  minimum: number;
+  maximum: number;
+  colorMap: string;
+  no_data_color?: RGBAColor;
+}
+
+function isMeshEdgesEdgeAttributeValid(input: AttributeInput): input is ValidAttributeInput {
+  return (
+    input.name !== undefined &&
+    input.item !== undefined &&
+    input.minimum !== undefined &&
+    input.maximum !== undefined &&
+    input.colorMap !== undefined
+  );
+}
+
+interface UseMeshEdgesEdgeAttributeStyleReturn {
+  meshEdgesEdgeAttributeName: (id: string) => string | undefined;
+  meshEdgesEdgeAttributeItem: (id: string) => number;
+  meshEdgesEdgeAttributeRange: (id: string) => [number | undefined, number | undefined];
+  meshEdgesEdgeAttributeTimeStep: (id: string) => number | undefined;
+  setMeshEdgesEdgeAttributeTimeStep: (id: string, timeStep: number) => Promise<unknown>;
+  meshEdgesEdgeAttributeColorMap: (id: string) => string | undefined;
+  meshEdgesEdgeAttributeStoredConfig: (
+    id: string,
+    name: string | undefined,
+    item: number | undefined,
+  ) => AttributeStoredConfig;
+  setMeshEdgesEdgeAttribute: (id: string, input: ValidAttributeInput) => Promise<unknown>;
+  setMeshEdgesEdgeAttributeName: (id: string, name: string) => Promise<unknown>;
+  setMeshEdgesEdgeAttributeItem: (id: string, item: number) => Promise<unknown>;
+  setMeshEdgesEdgeAttributeRange: (
+    id: string,
+    minimum: number,
+    maximum: number,
+  ) => Promise<unknown>;
+  setMeshEdgesEdgeAttributeColorMap: (id: string, colorMap: string | undefined) => Promise<unknown>;
+  meshEdgesEdgeAttributeNoDataColor: (id: string) => RGBAColor;
+  setMeshEdgesEdgeAttributeNoDataColor: (id: string, no_data_color: RGBAColor) => Promise<unknown>;
+}
+export { isMeshEdgesEdgeAttributeValid };
+export type {
+  AttributeStoredConfig,
+  AttributeState,
+  ValidAttributeInput,
+  UseMeshEdgesEdgeAttributeStyleReturn,
+};
diff --git a/internal/stores/data_style/mesh/edges/edge_config.ts b/internal/stores/data_style/mesh/edges/edge_config.ts
new file mode 100644
index 000000000..9fb877d91
--- /dev/null
+++ b/internal/stores/data_style/mesh/edges/edge_config.ts
@@ -0,0 +1,152 @@
+import type { AttributeState, AttributeStoredConfig } from "./edge_attribute";
+import { DEFAULT_NO_DATA_COLOR, type RGBAColor } from "@ogw_front/utils/default_styles/constants";
+
+// Local imports
+import { useMeshEdgesCommonStyle } from "./common";
+
+interface UseMeshEdgesEdgeAttributeConfigReturn {
+  meshEdgesEdgeAttribute: (id: string) => AttributeState;
+  meshEdgesEdgeAttributeName: (id: string) => string | undefined;
+  meshEdgesEdgeAttributeLastItem: (id: string, name: string | undefined) => number;
+  meshEdgesEdgeAttributeItem: (id: string) => number;
+  meshEdgesEdgeAttributeStoredConfig: (
+    id: string,
+    name: string | undefined,
+    item: number | undefined,
+  ) => AttributeStoredConfig;
+}
+
+interface UseMeshEdgesEdgeAttributeConfigWriterReturn {
+  mutateMeshEdgesEdgeStyle: (id: string, values: Record<string, unknown>) => Promise<string>;
+  setMeshEdgesEdgeAttributeStoredConfig: (
+    id: string,
+    name: string | undefined,
+    item: number | undefined,
+    config: Partial<AttributeStoredConfig>,
+  ) => Promise<string>;
+}
+
+function useMeshEdgesEdgeAttributeConfig(): UseMeshEdgesEdgeAttributeConfigReturn {
+  const meshEdgesCommonStyle = useMeshEdgesCommonStyle();
+  function meshEdgesEdgeAttribute(id: string): AttributeState {
+    // oxlint-disable-next-line no-unsafe-type-assertion -- coloring.edge shape is defined by the data style schema.
+    return meshEdgesCommonStyle.meshEdgesColoring(id).edge as AttributeState;
+  }
+  function meshEdgesEdgeAttributeStoredConfig(
+    id: string,
+    name: string | undefined,
+    item: number | undefined,
+  ): AttributeStoredConfig {
+    const { storedConfigs } = meshEdgesEdgeAttribute(id);
+    const nameConfig = name === undefined ? undefined : storedConfigs?.[name];
+    const itemConfig = item === undefined ? undefined : nameConfig?.[item];
+    if (itemConfig !== undefined) {
+      return itemConfig;
+    }
+    return {
+      minimum: undefined,
+      maximum: undefined,
+      colorMap: undefined,
+      no_data_color: DEFAULT_NO_DATA_COLOR,
+    };
+  }
+  function meshEdgesEdgeAttributeName(id: string): string | undefined {
+    return meshEdgesEdgeAttribute(id).name;
+  }
+  function meshEdgesEdgeAttributeLastItem(id: string, name: string | undefined): number {
+    const { storedConfigs } = meshEdgesEdgeAttribute(id);
+    const nameConfig = name === undefined ? undefined : storedConfigs?.[name];
+    if (nameConfig !== undefined) {
+      return nameConfig.lastItem;
+    }
+    return 0;
+  }
+  function meshEdgesEdgeAttributeItem(id: string): number {
+    const { item, name } = meshEdgesEdgeAttribute(id);
+    return item ?? meshEdgesEdgeAttributeLastItem(id, name);
+  }
+  return {
+    meshEdgesEdgeAttribute,
+    meshEdgesEdgeAttributeName,
+    meshEdgesEdgeAttributeLastItem,
+    meshEdgesEdgeAttributeItem,
+    meshEdgesEdgeAttributeStoredConfig,
+  };
+}
+
+interface UseMeshEdgesEdgeAttributeConfigValuesReturn {
+  meshEdgesEdgeAttributeRange: (id: string) => [number | undefined, number | undefined];
+  meshEdgesEdgeAttributeColorMap: (id: string) => string | undefined;
+  meshEdgesEdgeAttributeNoDataColor: (id: string) => RGBAColor;
+}
+
+function useMeshEdgesEdgeAttributeConfigValues(): UseMeshEdgesEdgeAttributeConfigValuesReturn {
+  const {
+    meshEdgesEdgeAttributeName,
+    meshEdgesEdgeAttributeItem,
+    meshEdgesEdgeAttributeStoredConfig,
+  } = useMeshEdgesEdgeAttributeConfig();
+  function meshEdgesEdgeAttributeRange(id: string): [number | undefined, number | undefined] {
+    const name = meshEdgesEdgeAttributeName(id);
+    const item = meshEdgesEdgeAttributeItem(id);
+    const storedConfig = meshEdgesEdgeAttributeStoredConfig(id, name, item);
+    return [storedConfig.minimum, storedConfig.maximum];
+  }
+  function meshEdgesEdgeAttributeColorMap(id: string): string | undefined {
+    const name = meshEdgesEdgeAttributeName(id);
+    const item = meshEdgesEdgeAttributeItem(id);
+    const storedConfig = meshEdgesEdgeAttributeStoredConfig(id, name, item);
+    return storedConfig.colorMap;
+  }
+  function meshEdgesEdgeAttributeNoDataColor(id: string): RGBAColor {
+    const name = meshEdgesEdgeAttributeName(id);
+    const item = meshEdgesEdgeAttributeItem(id);
+    const storedConfig = meshEdgesEdgeAttributeStoredConfig(id, name, item);
+    return storedConfig.no_data_color;
+  }
+  return {
+    meshEdgesEdgeAttributeRange,
+    meshEdgesEdgeAttributeColorMap,
+    meshEdgesEdgeAttributeNoDataColor,
+  };
+}
+
+function useMeshEdgesEdgeAttributeConfigWriter(): UseMeshEdgesEdgeAttributeConfigWriterReturn {
+  const meshEdgesCommonStyle = useMeshEdgesCommonStyle();
+  async function mutateMeshEdgesEdgeStyle(
+    id: string,
+    values: Record<string, unknown>,
+  ): Promise<string> {
+    const result = await meshEdgesCommonStyle.mutateMeshEdgesStyle(id, {
+      coloring: {
+        edge: values,
+      },
+    });
+    return result;
+  }
+  async function setMeshEdgesEdgeAttributeStoredConfig(
+    id: string,
+    name: string | undefined,
+    item: number | undefined,
+    config: Partial<AttributeStoredConfig>,
+  ): Promise<string> {
+    const result = await mutateMeshEdgesEdgeStyle(id, {
+      storedConfigs: {
+        [name ?? ""]: {
+          lastItem: item,
+          [item ?? 0]: config,
+        },
+      },
+    });
+    return result;
+  }
+  return {
+    mutateMeshEdgesEdgeStyle,
+    setMeshEdgesEdgeAttributeStoredConfig,
+  };
+}
+export {
+  useMeshEdgesEdgeAttributeConfig,
+  useMeshEdgesEdgeAttributeConfigValues,
+  useMeshEdgesEdgeAttributeConfigWriter,
+};
diff --git a/internal/stores/data_style/mesh/edges/vertex.ts b/internal/stores/data_style/mesh/edges/vertex.ts
index 9a0c0820b..47fdca19b 100644
--- a/internal/stores/data_style/mesh/edges/vertex.ts
+++ b/internal/stores/data_style/mesh/edges/vertex.ts
@@ -4,9 +4,18 @@ import back_schemas from "@geode/opengeodeweb-back/opengeodeweb_back_typed_schem
 import viewer_schemas from "@geode/opengeodeweb-viewer/opengeodeweb_viewer_typed_schemas.js";
 
 // Local imports
+import {
+  type UseMeshEdgesVertexAttributeStyleReturn,
+  type ValidAttributeInput,
+  isMeshEdgesVertexAttributeValid,
+} from "./vertex_attribute";
+import {
+  useMeshEdgesVertexAttributeConfig,
+  useMeshEdgesVertexAttributeConfigValues,
+  useMeshEdgesVertexAttributeConfigWriter,
+} from "./vertex_config";
 import { getRGBPointsFromPreset } from "@ogw_front/utils/colormap";
 import { useAttributeTimeStepStyle } from "@ogw_internal/stores/data_style/time_step";
-import { useMeshEdgesCommonStyle } from "./common";
 import { useViewerStore } from "@ogw_front/stores/viewer";
 
 // Local constants
@@ -14,147 +23,24 @@ const attributeNamesSchema = back_schemas.opengeodeweb_back.vertex_attribute_nam
 const meshEdgesVertexAttributeSchemas =
   viewer_schemas.opengeodeweb_viewer.mesh.edges.attribute.vertex;
 
-interface AttributeStoredConfig {
-  minimum: number | undefined;
-  maximum: number | undefined;
-  colorMap: string | undefined;
-  no_data_color: RGBAColor;
-}
-
-interface AttributeState {
-  name?: string;
-  item?: number;
-  storedConfigs?: Record<string, { lastItem: number } & Record<string, AttributeStoredConfig>>;
-}
-
-interface AttributeInput {
-  name: string | undefined;
-  item: number | undefined;
-  minimum: number | undefined;
-  maximum: number | undefined;
-  colorMap: string | undefined;
-  no_data_color?: RGBAColor;
-}
-
-interface ValidAttributeInput {
-  name: string;
-  item: number;
-  minimum: number;
-  maximum: number;
-  colorMap: string;
-  no_data_color?: RGBAColor;
-}
-
-function isMeshEdgesVertexAttributeValid(input: AttributeInput): input is ValidAttributeInput {
-  return (
-    input.name !== undefined &&
-    input.item !== undefined &&
-    input.minimum !== undefined &&
-    input.maximum !== undefined &&
-    input.colorMap !== undefined
-  );
-}
-
-interface UseMeshEdgesVertexAttributeStyleReturn {
-  meshEdgesVertexAttributeName: (id: string) => string | undefined;
-  meshEdgesVertexAttributeItem: (id: string) => number;
-  meshEdgesVertexAttributeRange: (id: string) => [number | undefined, number | undefined];
-  meshEdgesVertexAttributeTimeStep: (id: string) => number | undefined;
-  setMeshEdgesVertexAttributeTimeStep: (id: string, timeStep: number) => Promise<unknown>;
-  meshEdgesVertexAttributeColorMap: (id: string) => string | undefined;
-  meshEdgesVertexAttributeStoredConfig: (
-    id: string,
-    name: string | undefined,
-    item: number | undefined,
-  ) => AttributeStoredConfig;
-  setMeshEdgesVertexAttribute: (id: string, input: ValidAttributeInput) => Promise<unknown>;
-  setMeshEdgesVertexAttributeName: (id: string, name: string) => Promise<unknown>;
-  setMeshEdgesVertexAttributeItem: (id: string, item: number) => Promise<unknown>;
-  setMeshEdgesVertexAttributeRange: (
-    id: string,
-    minimum: number,
-    maximum: number,
-  ) => Promise<unknown>;
-  setMeshEdgesVertexAttributeColorMap: (
-    id: string,
-    colorMap: string | undefined,
-  ) => Promise<unknown>;
-  meshEdgesVertexAttributeNoDataColor: (id: string) => RGBAColor;
-  setMeshEdgesVertexAttributeNoDataColor: (
-    id: string,
-    no_data_color: RGBAColor,
-  ) => Promise<unknown>;
-}
-
 // oxlint-disable-next-line max-lines-per-function
 function useMeshEdgesVertexAttributeStyle(): UseMeshEdgesVertexAttributeStyleReturn {
   const { attributeTimeStep, setAttributeTimeStep, seriesArrayName } = useAttributeTimeStepStyle();
   const viewerStore = useViewerStore();
-  const meshEdgesCommonStyle = useMeshEdgesCommonStyle();
-  function meshEdgesVertexAttribute(id: string): AttributeState {
-    // oxlint-disable-next-line no-unsafe-type-assertion -- coloring.vertex shape is defined by the data style schema.
-    return meshEdgesCommonStyle.meshEdgesColoring(id).vertex as AttributeState;
-  }
-  function meshEdgesVertexAttributeStoredConfig(
-    id: string,
-    name: string | undefined,
-    item: number | undefined,
-  ): AttributeStoredConfig {
-    const { storedConfigs } = meshEdgesVertexAttribute(id);
-    const nameConfig = name === undefined ? undefined : storedConfigs?.[name];
-    const itemConfig = item === undefined ? undefined : nameConfig?.[item];
-    if (itemConfig !== undefined) {
-      return itemConfig;
-    }
-    return {
-      minimum: undefined,
-      maximum: undefined,
-      colorMap: undefined,
-      no_data_color: DEFAULT_NO_DATA_COLOR,
-    };
-  }
-  async function mutateMeshEdgesVertexStyle(
-    id: string,
-    values: Record<string, unknown>,
-  ): Promise<string> {
-    const result = await meshEdgesCommonStyle.mutateMeshEdgesStyle(id, {
-      coloring: {
-        vertex: values,
-      },
-    });
-    return result;
-  }
-  async function setMeshEdgesVertexAttributeStoredConfig(
-    id: string,
-    name: string | undefined,
-    item: number | undefined,
-    config: Partial<AttributeStoredConfig>,
-  ): Promise<string> {
-    const result = await mutateMeshEdgesVertexStyle(id, {
-      storedConfigs: {
-        [name ?? ""]: {
-          lastItem: item,
-          [item ?? 0]: config,
-        },
-      },
-    });
-    return result;
-  }
-  function meshEdgesVertexAttributeName(id: string): string | undefined {
-    return meshEdgesVertexAttribute(id).name;
-  }
-  function meshEdgesVertexAttributeLastItem(id: string, name: string | undefined): number {
-    const { storedConfigs } = meshEdgesVertexAttribute(id);
-    const nameConfig = name === undefined ? undefined : storedConfigs?.[name];
-    if (nameConfig !== undefined) {
-      return nameConfig.lastItem;
-    }
-    return 0;
-  }
-  function meshEdgesVertexAttributeItem(id: string): number {
-    const { item, name } = meshEdgesVertexAttribute(id);
-    return item ?? meshEdgesVertexAttributeLastItem(id, name);
-  }
+  const {
+    meshEdgesVertexAttribute,
+    meshEdgesVertexAttributeName,
+    meshEdgesVertexAttributeLastItem,
+    meshEdgesVertexAttributeItem,
+    meshEdgesVertexAttributeStoredConfig,
+  } = useMeshEdgesVertexAttributeConfig();
+  const {
+    meshEdgesVertexAttributeRange,
+    meshEdgesVertexAttributeColorMap,
+    meshEdgesVertexAttributeNoDataColor,
+  } = useMeshEdgesVertexAttributeConfigValues();
+  const { mutateMeshEdgesVertexStyle, setMeshEdgesVertexAttributeStoredConfig } =
+    useMeshEdgesVertexAttributeConfigWriter();
   function meshEdgesVertexAttributeTimeStep(id: string): number | undefined {
     return attributeTimeStep(id, attributeNamesSchema.$id, meshEdgesVertexAttribute(id).name);
   }
@@ -227,12 +113,6 @@ function useMeshEdgesVertexAttributeStyle(): UseMeshEdgesVertexAttributeStyleRet
     });
     return applyVertexAttribute(id);
   }
-  function meshEdgesVertexAttributeRange(id: string): [number | undefined, number | undefined] {
-    const name = meshEdgesVertexAttributeName(id);
-    const item = meshEdgesVertexAttributeItem(id);
-    const storedConfig = meshEdgesVertexAttributeStoredConfig(id, name, item);
-    return [storedConfig.minimum, storedConfig.maximum];
-  }
   async function setMeshEdgesVertexAttributeTimeStep(
     id: string,
     timeStep: number,
@@ -257,12 +137,6 @@ function useMeshEdgesVertexAttributeStyle(): UseMeshEdgesVertexAttributeStyleRet
     });
     return applyVertexAttribute(id);
   }
-  function meshEdgesVertexAttributeColorMap(id: string): string | undefined {
-    const name = meshEdgesVertexAttributeName(id);
-    const item = meshEdgesVertexAttributeItem(id);
-    const storedConfig = meshEdgesVertexAttributeStoredConfig(id, name, item);
-    return storedConfig.colorMap;
-  }
   async function setMeshEdgesVertexAttributeColorMap(
     id: string,
     colorMap: string | undefined,
@@ -274,12 +148,6 @@ function useMeshEdgesVertexAttributeStyle(): UseMeshEdgesVertexAttributeStyleRet
     });
     return applyVertexAttribute(id);
   }
-  function meshEdgesVertexAttributeNoDataColor(id: string): RGBAColor {
-    const name = meshEdgesVertexAttributeName(id);
-    const item = meshEdgesVertexAttributeItem(id);
-    const storedConfig = meshEdgesVertexAttributeStoredConfig(id, name, item);
-    return storedConfig.no_data_color;
-  }
   async function setMeshEdgesVertexAttributeNoDataColor(
     id: string,
     no_data_color: RGBAColor,
@@ -310,4 +178,5 @@ function useMeshEdgesVertexAttributeStyle(): UseMeshEdgesVertexAttributeStyleRet
     setMeshEdgesVertexAttributeNoDataColor,
   };
 }
-export { isMeshEdgesVertexAttributeValid, useMeshEdgesVertexAttributeStyle };
+export { useMeshEdgesVertexAttributeStyle };
+export { isMeshEdgesVertexAttributeValid } from "./vertex_attribute";
diff --git a/internal/stores/data_style/mesh/edges/vertex_attribute.ts b/internal/stores/data_style/mesh/edges/vertex_attribute.ts
new file mode 100644
index 000000000..0b293f4e2
--- /dev/null
+++ b/internal/stores/data_style/mesh/edges/vertex_attribute.ts
@@ -0,0 +1,80 @@
+import type { RGBAColor } from "@ogw_front/utils/default_styles/constants";
+
+interface AttributeStoredConfig {
+  minimum: number | undefined;
+  maximum: number | undefined;
+  colorMap: string | undefined;
+  no_data_color: RGBAColor;
+}
+
+interface AttributeState {
+  name?: string;
+  item?: number;
+  storedConfigs?: Record<string, { lastItem: number } & Record<string, AttributeStoredConfig>>;
+}
+
+interface AttributeInput {
+  name: string | undefined;
+  item: number | undefined;
+  minimum: number | undefined;
+  maximum: number | undefined;
+  colorMap: string | undefined;
+  no_data_color?: RGBAColor;
+}
+
+interface ValidAttributeInput {
+  name: string;
+  item: number;
+  minimum: number;
+  maximum: number;
+  colorMap: string;
+  no_data_color?: RGBAColor;
+}
+
+function isMeshEdgesVertexAttributeValid(input: AttributeInput): input is ValidAttributeInput {
+  return (
+    input.name !== undefined &&
+    input.item !== undefined &&
+    input.minimum !== undefined &&
+    input.maximum !== undefined &&
+    input.colorMap !== undefined
+  );
+}
+
+interface UseMeshEdgesVertexAttributeStyleReturn {
+  meshEdgesVertexAttributeName: (id: string) => string | undefined;
+  meshEdgesVertexAttributeItem: (id: string) => number;
+  meshEdgesVertexAttributeRange: (id: string) => [number | undefined, number | undefined];
+  meshEdgesVertexAttributeTimeStep: (id: string) => number | undefined;
+  setMeshEdgesVertexAttributeTimeStep: (id: string, timeStep: number) => Promise<unknown>;
+  meshEdgesVertexAttributeColorMap: (id: string) => string | undefined;
+  meshEdgesVertexAttributeStoredConfig: (
+    id: string,
+    name: string | undefined,
+    item: number | undefined,
+  ) => AttributeStoredConfig;
+  setMeshEdgesVertexAttribute: (id: string, input: ValidAttributeInput) => Promise<unknown>;
+  setMeshEdgesVertexAttributeName: (id: string, name: string) => Promise<unknown>;
+  setMeshEdgesVertexAttributeItem: (id: string, item: number) => Promise<unknown>;
+  setMeshEdgesVertexAttributeRange: (
+    id: string,
+    minimum: number,
+    maximum: number,
+  ) => Promise<unknown>;
+  setMeshEdgesVertexAttributeColorMap: (
+    id: string,
+    colorMap: string | undefined,
+  ) => Promise<unknown>;
+  meshEdgesVertexAttributeNoDataColor: (id: string) => RGBAColor;
+  setMeshEdgesVertexAttributeNoDataColor: (
+    id: string,
+    no_data_color: RGBAColor,
+  ) => Promise<unknown>;
+}
+export { isMeshEdgesVertexAttributeValid };
+export type {
+  AttributeStoredConfig,
+  AttributeState,
+  ValidAttributeInput,
+  UseMeshEdgesVertexAttributeStyleReturn,
+};
diff --git a/internal/stores/data_style/mesh/edges/vertex_config.ts b/internal/stores/data_style/mesh/edges/vertex_config.ts
new file mode 100644
index 000000000..f7ef4e190
--- /dev/null
+++ b/internal/stores/data_style/mesh/edges/vertex_config.ts
@@ -0,0 +1,152 @@
+import type { AttributeState, AttributeStoredConfig } from "./vertex_attribute";
+import { DEFAULT_NO_DATA_COLOR, type RGBAColor } from "@ogw_front/utils/default_styles/constants";
+
+// Local imports
+import { useMeshEdgesCommonStyle } from "./common";
+
+interface UseMeshEdgesVertexAttributeConfigReturn {
+  meshEdgesVertexAttribute: (id: string) => AttributeState;
+  meshEdgesVertexAttributeName: (id: string) => string | undefined;
+  meshEdgesVertexAttributeLastItem: (id: string, name: string | undefined) => number;
+  meshEdgesVertexAttributeItem: (id: string) => number;
+  meshEdgesVertexAttributeStoredConfig: (
+    id: string,
+    name: string | undefined,
+    item: number | undefined,
+  ) => AttributeStoredConfig;
+}
+
+interface UseMeshEdgesVertexAttributeConfigWriterReturn {
+  mutateMeshEdgesVertexStyle: (id: string, values: Record<string, unknown>) => Promise<string>;
+  setMeshEdgesVertexAttributeStoredConfig: (
+    id: string,
+    name: string | undefined,
+    item: number | undefined,
+    config: Partial<AttributeStoredConfig>,
+  ) => Promise<string>;
+}
+
+function useMeshEdgesVertexAttributeConfig(): UseMeshEdgesVertexAttributeConfigReturn {
+  const meshEdgesCommonStyle = useMeshEdgesCommonStyle();
+  function meshEdgesVertexAttribute(id: string): AttributeState {
+    // oxlint-disable-next-line no-unsafe-type-assertion -- coloring.vertex shape is defined by the data style schema.
+    return meshEdgesCommonStyle.meshEdgesColoring(id).vertex as AttributeState;
+  }
+  function meshEdgesVertexAttributeStoredConfig(
+    id: string,
+    name: string | undefined,
+    item: number | undefined,
+  ): AttributeStoredConfig {
+    const { storedConfigs } = meshEdgesVertexAttribute(id);
+    const nameConfig = name === undefined ? undefined : storedConfigs?.[name];
+    const itemConfig = item === undefined ? undefined : nameConfig?.[item];
+    if (itemConfig !== undefined) {
+      return itemConfig;
+    }
+    return {
+      minimum: undefined,
+      maximum: undefined,
+      colorMap: undefined,
+      no_data_color: DEFAULT_NO_DATA_COLOR,
+    };
+  }
+  function meshEdgesVertexAttributeName(id: string): string | undefined {
+    return meshEdgesVertexAttribute(id).name;
+  }
+  function meshEdgesVertexAttributeLastItem(id: string, name: string | undefined): number {
+    const { storedConfigs } = meshEdgesVertexAttribute(id);
+    const nameConfig = name === undefined ? undefined : storedConfigs?.[name];
+    if (nameConfig !== undefined) {
+      return nameConfig.lastItem;
+    }
+    return 0;
+  }
+  function meshEdgesVertexAttributeItem(id: string): number {
+    const { item, name } = meshEdgesVertexAttribute(id);
+    return item ?? meshEdgesVertexAttributeLastItem(id, name);
+  }
+  return {
+    meshEdgesVertexAttribute,
+    meshEdgesVertexAttributeName,
+    meshEdgesVertexAttributeLastItem,
+    meshEdgesVertexAttributeItem,
+    meshEdgesVertexAttributeStoredConfig,
+  };
+}
+
+interface UseMeshEdgesVertexAttributeConfigValuesReturn {
+  meshEdgesVertexAttributeRange: (id: string) => [number | undefined, number | undefined];
+  meshEdgesVertexAttributeColorMap: (id: string) => string | undefined;
+  meshEdgesVertexAttributeNoDataColor: (id: string) => RGBAColor;
+}
+
+function useMeshEdgesVertexAttributeConfigValues(): UseMeshEdgesVertexAttributeConfigValuesReturn {
+  const {
+    meshEdgesVertexAttributeName,
+    meshEdgesVertexAttributeItem,
+    meshEdgesVertexAttributeStoredConfig,
+  } = useMeshEdgesVertexAttributeConfig();
+  function meshEdgesVertexAttributeRange(id: string): [number | undefined, number | undefined] {
+    const name = meshEdgesVertexAttributeName(id);
+    const item = meshEdgesVertexAttributeItem(id);
+    const storedConfig = meshEdgesVertexAttributeStoredConfig(id, name, item);
+    return [storedConfig.minimum, storedConfig.maximum];
+  }
+  function meshEdgesVertexAttributeColorMap(id: string): string | undefined {
+    const name = meshEdgesVertexAttributeName(id);
+    const item = meshEdgesVertexAttributeItem(id);
+    const storedConfig = meshEdgesVertexAttributeStoredConfig(id, name, item);
+    return storedConfig.colorMap;
+  }
+  function meshEdgesVertexAttributeNoDataColor(id: string): RGBAColor {
+    const name = meshEdgesVertexAttributeName(id);
+    const item = meshEdgesVertexAttributeItem(id);
+    const storedConfig = meshEdgesVertexAttributeStoredConfig(id, name, item);
+    return storedConfig.no_data_color;
+  }
+  return {
+    meshEdgesVertexAttributeRange,
+    meshEdgesVertexAttributeColorMap,
+    meshEdgesVertexAttributeNoDataColor,
+  };
+}
+
+function useMeshEdgesVertexAttributeConfigWriter(): UseMeshEdgesVertexAttributeConfigWriterReturn {
+  const meshEdgesCommonStyle = useMeshEdgesCommonStyle();
+  async function mutateMeshEdgesVertexStyle(
+    id: string,
+    values: Record<string, unknown>,
+  ): Promise<string> {
+    const result = await meshEdgesCommonStyle.mutateMeshEdgesStyle(id, {
+      coloring: {
+        vertex: values,
+      },
+    });
+    return result;
+  }
+  async function setMeshEdgesVertexAttributeStoredConfig(
+    id: string,
+    name: string | undefined,
+    item: number | undefined,
+    config: Partial<AttributeStoredConfig>,
+  ): Promise<string> {
+    const result = await mutateMeshEdgesVertexStyle(id, {
+      storedConfigs: {
+        [name ?? ""]: {
+          lastItem: item,
+          [item ?? 0]: config,
+        },
+      },
+    });
+    return result;
+  }
+  return {
+    mutateMeshEdgesVertexStyle,
+    setMeshEdgesVertexAttributeStoredConfig,
+  };
+}
+export {
+  useMeshEdgesVertexAttributeConfig,
+  useMeshEdgesVertexAttributeConfigValues,
+  useMeshEdgesVertexAttributeConfigWriter,
+};
diff --git a/internal/stores/data_style/mesh/points/vertex.ts b/internal/stores/data_style/mesh/points/vertex.ts
index ad3b37c5a..d23f3de23 100644
--- a/internal/stores/data_style/mesh/points/vertex.ts
+++ b/internal/stores/data_style/mesh/points/vertex.ts
@@ -4,9 +4,18 @@ import back_schemas from "@geode/opengeodeweb-back/opengeodeweb_back_typed_schem
 import viewer_schemas from "@geode/opengeodeweb-viewer/opengeodeweb_viewer_typed_schemas.js";
 
 // Local imports
+import {
+  type UseMeshPointsVertexAttributeStyleReturn,
+  type ValidAttributeInput,
+  isMeshPointsVertexAttributeValid,
+} from "./vertex_attribute";
+import {
+  useMeshPointsVertexAttributeConfig,
+  useMeshPointsVertexAttributeConfigValues,
+  useMeshPointsVertexAttributeConfigWriter,
+} from "./vertex_config";
 import { getRGBPointsFromPreset } from "@ogw_front/utils/colormap";
 import { useAttributeTimeStepStyle } from "@ogw_internal/stores/data_style/time_step";
-import { useMeshPointsCommonStyle } from "./common";
 import { useViewerStore } from "@ogw_front/stores/viewer";
 
 // Local constants
@@ -14,147 +23,24 @@ const attributeNamesSchema = back_schemas.opengeodeweb_back.vertex_attribute_nam
 const meshPointsVertexAttributeSchemas =
   viewer_schemas.opengeodeweb_viewer.mesh.points.attribute.vertex;
 
-interface AttributeStoredConfig {
-  minimum: number | undefined;
-  maximum: number | undefined;
-  colorMap: string | undefined;
-  no_data_color: RGBAColor;
-}
-
-interface AttributeState {
-  name?: string;
-  item?: number;
-  storedConfigs?: Record<string, { lastItem: number } & Record<string, AttributeStoredConfig>>;
-}
-
-interface AttributeInput {
-  name: string | undefined;
-  item: number | undefined;
-  minimum: number | undefined;
-  maximum: number | undefined;
-  colorMap: string | undefined;
-  no_data_color?: RGBAColor;
-}
-
-interface ValidAttributeInput {
-  name: string;
-  item: number;
-  minimum: number;
-  maximum: number;
-  colorMap: string;
-  no_data_color?: RGBAColor;
-}
-
-function isMeshPointsVertexAttributeValid(input: AttributeInput): input is ValidAttributeInput {
-  return (
-    input.name !== undefined &&
-    input.item !== undefined &&
-    input.minimum !== undefined &&
-    input.maximum !== undefined &&
-    input.colorMap !== undefined
-  );
-}
-
-interface UseMeshPointsVertexAttributeStyleReturn {
-  meshPointsVertexAttributeName: (id: string) => string | undefined;
-  meshPointsVertexAttributeItem: (id: string) => number;
-  meshPointsVertexAttributeRange: (id: string) => [number | undefined, number | undefined];
-  meshPointsVertexAttributeTimeStep: (id: string) => number | undefined;
-  setMeshPointsVertexAttributeTimeStep: (id: string, timeStep: number) => Promise<unknown>;
-  meshPointsVertexAttributeColorMap: (id: string) => string | undefined;
-  meshPointsVertexAttributeStoredConfig: (
-    id: string,
-    name: string | undefined,
-    item: number | undefined,
-  ) => AttributeStoredConfig;
-  setMeshPointsVertexAttribute: (id: string, input: ValidAttributeInput) => Promise<unknown>;
-  setMeshPointsVertexAttributeName: (id: string, name: string) => Promise<unknown>;
-  setMeshPointsVertexAttributeItem: (id: string, item: number) => Promise<unknown>;
-  setMeshPointsVertexAttributeRange: (
-    id: string,
-    minimum: number,
-    maximum: number,
-  ) => Promise<unknown>;
-  setMeshPointsVertexAttributeColorMap: (
-    id: string,
-    colorMap: string | undefined,
-  ) => Promise<unknown>;
-  meshPointsVertexAttributeNoDataColor: (id: string) => RGBAColor;
-  setMeshPointsVertexAttributeNoDataColor: (
-    id: string,
-    no_data_color: RGBAColor,
-  ) => Promise<unknown>;
-}
-
 // oxlint-disable-next-line max-lines-per-function
 function useMeshPointsVertexAttributeStyle(): UseMeshPointsVertexAttributeStyleReturn {
   const { attributeTimeStep, setAttributeTimeStep, seriesArrayName } = useAttributeTimeStepStyle();
   const viewerStore = useViewerStore();
-  const meshPointsCommonStyle = useMeshPointsCommonStyle();
-  function meshPointsVertexAttribute(id: string): AttributeState {
-    // oxlint-disable-next-line no-unsafe-type-assertion -- coloring.vertex shape is defined by the data style schema.
-    return meshPointsCommonStyle.meshPointsColoring(id).vertex as AttributeState;
-  }
-  function meshPointsVertexAttributeStoredConfig(
-    id: string,
-    name: string | undefined,
-    item: number | undefined,
-  ): AttributeStoredConfig {
-    const { storedConfigs } = meshPointsVertexAttribute(id);
-    const nameConfig = name === undefined ? undefined : storedConfigs?.[name];
-    const itemConfig = item === undefined ? undefined : nameConfig?.[item];
-    if (itemConfig !== undefined) {
-      return itemConfig;
-    }
-    return {
-      minimum: undefined,
-      maximum: undefined,
-      colorMap: undefined,
-      no_data_color: DEFAULT_NO_DATA_COLOR,
-    };
-  }
-  async function mutateMeshPointsVertexStyle(
-    id: string,
-    values: Record<string, unknown>,
-  ): Promise<string> {
-    const result = await meshPointsCommonStyle.mutateMeshPointsStyle(id, {
-      coloring: {
-        vertex: values,
-      },
-    });
-    return result;
-  }
-  async function setMeshPointsVertexAttributeStoredConfig(
-    id: string,
-    name: string | undefined,
-    item: number | undefined,
-    config: Partial<AttributeStoredConfig>,
-  ): Promise<string> {
-    const result = await mutateMeshPointsVertexStyle(id, {
-      storedConfigs: {
-        [name ?? ""]: {
-          lastItem: item,
-          [item ?? 0]: config,
-        },
-      },
-    });
-    return result;
-  }
-  function meshPointsVertexAttributeName(id: string): string | undefined {
-    return meshPointsVertexAttribute(id).name;
-  }
-  function meshPointsVertexAttributeLastItem(id: string, name: string | undefined): number {
-    const { storedConfigs } = meshPointsVertexAttribute(id);
-    const nameConfig = name === undefined ? undefined : storedConfigs?.[name];
-    if (nameConfig !== undefined) {
-      return nameConfig.lastItem;
-    }
-    return 0;
-  }
-  function meshPointsVertexAttributeItem(id: string): number {
-    const { item, name } = meshPointsVertexAttribute(id);
-    return item ?? meshPointsVertexAttributeLastItem(id, name);
-  }
+  const {
+    meshPointsVertexAttribute,
+    meshPointsVertexAttributeName,
+    meshPointsVertexAttributeLastItem,
+    meshPointsVertexAttributeItem,
+    meshPointsVertexAttributeStoredConfig,
+  } = useMeshPointsVertexAttributeConfig();
+  const {
+    meshPointsVertexAttributeRange,
+    meshPointsVertexAttributeColorMap,
+    meshPointsVertexAttributeNoDataColor,
+  } = useMeshPointsVertexAttributeConfigValues();
+  const { mutateMeshPointsVertexStyle, setMeshPointsVertexAttributeStoredConfig } =
+    useMeshPointsVertexAttributeConfigWriter();
   function meshPointsVertexAttributeTimeStep(id: string): number | undefined {
     return attributeTimeStep(id, attributeNamesSchema.$id, meshPointsVertexAttribute(id).name);
   }
@@ -227,12 +113,6 @@ function useMeshPointsVertexAttributeStyle(): UseMeshPointsVertexAttributeStyleR
     });
     return applyVertexAttribute(id);
   }
-  function meshPointsVertexAttributeRange(id: string): [number | undefined, number | undefined] {
-    const name = meshPointsVertexAttributeName(id);
-    const item = meshPointsVertexAttributeItem(id);
-    const storedConfig = meshPointsVertexAttributeStoredConfig(id, name, item);
-    return [storedConfig.minimum, storedConfig.maximum];
-  }
   async function setMeshPointsVertexAttributeTimeStep(
     id: string,
     timeStep: number,
@@ -257,12 +137,6 @@ function useMeshPointsVertexAttributeStyle(): UseMeshPointsVertexAttributeStyleR
     });
     return applyVertexAttribute(id);
   }
-  function meshPointsVertexAttributeColorMap(id: string): string | undefined {
-    const name = meshPointsVertexAttributeName(id);
-    const item = meshPointsVertexAttributeItem(id);
-    const storedConfig = meshPointsVertexAttributeStoredConfig(id, name, item);
-    return storedConfig.colorMap;
-  }
   async function setMeshPointsVertexAttributeColorMap(
     id: string,
     colorMap: string | undefined,
@@ -274,12 +148,6 @@ function useMeshPointsVertexAttributeStyle(): UseMeshPointsVertexAttributeStyleR
     });
     return applyVertexAttribute(id);
   }
-  function meshPointsVertexAttributeNoDataColor(id: string): RGBAColor {
-    const name = meshPointsVertexAttributeName(id);
-    const item = meshPointsVertexAttributeItem(id);
-    const storedConfig = meshPointsVertexAttributeStoredConfig(id, name, item);
-    return storedConfig.no_data_color;
-  }
   async function setMeshPointsVertexAttributeNoDataColor(
     id: string,
     no_data_color: RGBAColor,
@@ -310,4 +178,5 @@ function useMeshPointsVertexAttributeStyle(): UseMeshPointsVertexAttributeStyleR
     setMeshPointsVertexAttributeNoDataColor,
   };
 }
-export { isMeshPointsVertexAttributeValid, useMeshPointsVertexAttributeStyle };
+export { useMeshPointsVertexAttributeStyle };
+export { isMeshPointsVertexAttributeValid } from "./vertex_attribute";
diff --git a/internal/stores/data_style/mesh/points/vertex_attribute.ts b/internal/stores/data_style/mesh/points/vertex_attribute.ts
new file mode 100644
index 000000000..7d8fceda1
--- /dev/null
+++ b/internal/stores/data_style/mesh/points/vertex_attribute.ts
@@ -0,0 +1,80 @@
+import type { RGBAColor } from "@ogw_front/utils/default_styles/constants";
+
+interface AttributeStoredConfig {
+  minimum: number | undefined;
+  maximum: number | undefined;
+  colorMap: string | undefined;
+  no_data_color: RGBAColor;
+}
+
+interface AttributeState {
+  name?: string;
+  item?: number;
+  storedConfigs?: Record<string, { lastItem: number } & Record<string, AttributeStoredConfig>>;
+}
+
+interface AttributeInput {
+  name: string | undefined;
+  item: number | undefined;
+  minimum: number | undefined;
+  maximum: number | undefined;
+  colorMap: string | undefined;
+  no_data_color?: RGBAColor;
+}
+
+interface ValidAttributeInput {
+  name: string;
+  item: number;
+  minimum: number;
+  maximum: number;
+  colorMap: string;
+  no_data_color?: RGBAColor;
+}
+
+function isMeshPointsVertexAttributeValid(input: AttributeInput): input is ValidAttributeInput {
+  return (
+    input.name !== undefined &&
+    input.item !== undefined &&
+    input.minimum !== undefined &&
+    input.maximum !== undefined &&
+    input.colorMap !== undefined
+  );
+}
+
+interface UseMeshPointsVertexAttributeStyleReturn {
+  meshPointsVertexAttributeName: (id: string) => string | undefined;
+  meshPointsVertexAttributeItem: (id: string) => number;
+  meshPointsVertexAttributeRange: (id: string) => [number | undefined, number | undefined];
+  meshPointsVertexAttributeTimeStep: (id: string) => number | undefined;
+  setMeshPointsVertexAttributeTimeStep: (id: string, timeStep: number) => Promise<unknown>;
+  meshPointsVertexAttributeColorMap: (id: string) => string | undefined;
+  meshPointsVertexAttributeStoredConfig: (
+    id: string,
+    name: string | undefined,
+    item: number | undefined,
+  ) => AttributeStoredConfig;
+  setMeshPointsVertexAttribute: (id: string, input: ValidAttributeInput) => Promise<unknown>;
+  setMeshPointsVertexAttributeName: (id: string, name: string) => Promise<unknown>;
+  setMeshPointsVertexAttributeItem: (id: string, item: number) => Promise<unknown>;
+  setMeshPointsVertexAttributeRange: (
+    id: string,
+    minimum: number,
+    maximum: number,
+  ) => Promise<unknown>;
+  setMeshPointsVertexAttributeColorMap: (
+    id: string,
+    colorMap: string | undefined,
+  ) => Promise<unknown>;
+  meshPointsVertexAttributeNoDataColor: (id: string) => RGBAColor;
+  setMeshPointsVertexAttributeNoDataColor: (
+    id: string,
+    no_data_color: RGBAColor,
+  ) => Promise<unknown>;
+}
+export { isMeshPointsVertexAttributeValid };
+export type {
+  AttributeStoredConfig,
+  AttributeState,
+  ValidAttributeInput,
+  UseMeshPointsVertexAttributeStyleReturn,
+};
diff --git a/internal/stores/data_style/mesh/points/vertex_config.ts b/internal/stores/data_style/mesh/points/vertex_config.ts
new file mode 100644
index 000000000..9aae585b0
--- /dev/null
+++ b/internal/stores/data_style/mesh/points/vertex_config.ts
@@ -0,0 +1,152 @@
+import type { AttributeState, AttributeStoredConfig } from "./vertex_attribute";
+import { DEFAULT_NO_DATA_COLOR, type RGBAColor } from "@ogw_front/utils/default_styles/constants";
+
+// Local imports
+import { useMeshPointsCommonStyle } from "./common";
+
+interface UseMeshPointsVertexAttributeConfigReturn {
+  meshPointsVertexAttribute: (id: string) => AttributeState;
+  meshPointsVertexAttributeName: (id: string) => string | undefined;
+  meshPointsVertexAttributeLastItem: (id: string, name: string | undefined) => number;
+  meshPointsVertexAttributeItem: (id: string) => number;
+  meshPointsVertexAttributeStoredConfig: (
+    id: string,
+    name: string | undefined,
+    item: number | undefined,
+  ) => AttributeStoredConfig;
+}
+
+interface UseMeshPointsVertexAttributeConfigWriterReturn {
+  mutateMeshPointsVertexStyle: (id: string, values: Record<string, unknown>) => Promise<string>;
+  setMeshPointsVertexAttributeStoredConfig: (
+    id: string,
+    name: string | undefined,
+    item: number | undefined,
+    config: Partial<AttributeStoredConfig>,
+  ) => Promise<string>;
+}
+
+function useMeshPointsVertexAttributeConfig(): UseMeshPointsVertexAttributeConfigReturn {
+  const meshPointsCommonStyle = useMeshPointsCommonStyle();
+  function meshPointsVertexAttribute(id: string): AttributeState {
+    // oxlint-disable-next-line no-unsafe-type-assertion -- coloring.vertex shape is defined by the data style schema.
+    return meshPointsCommonStyle.meshPointsColoring(id).vertex as AttributeState;
+  }
+  function meshPointsVertexAttributeStoredConfig(
+    id: string,
+    name: string | undefined,
+    item: number | undefined,
+  ): AttributeStoredConfig {
+    const { storedConfigs } = meshPointsVertexAttribute(id);
+    const nameConfig = name === undefined ? undefined : storedConfigs?.[name];
+    const itemConfig = item === undefined ? undefined : nameConfig?.[item];
+    if (itemConfig !== undefined) {
+      return itemConfig;
+    }
+    return {
+      minimum: undefined,
+      maximum: undefined,
+      colorMap: undefined,
+      no_data_color: DEFAULT_NO_DATA_COLOR,
+    };
+  }
+  function meshPointsVertexAttributeName(id: string): string | undefined {
+    return meshPointsVertexAttribute(id).name;
+  }
+  function meshPointsVertexAttributeLastItem(id: string, name: string | undefined): number {
+    const { storedConfigs } = meshPointsVertexAttribute(id);
+    const nameConfig = name === undefined ? undefined : storedConfigs?.[name];
+    if (nameConfig !== undefined) {
+      return nameConfig.lastItem;
+    }
+    return 0;
+  }
+  function meshPointsVertexAttributeItem(id: string): number {
+    const { item, name } = meshPointsVertexAttribute(id);
+    return item ?? meshPointsVertexAttributeLastItem(id, name);
+  }
+  return {
+    meshPointsVertexAttribute,
+    meshPointsVertexAttributeName,
+    meshPointsVertexAttributeLastItem,
+    meshPointsVertexAttributeItem,
+    meshPointsVertexAttributeStoredConfig,
+  };
+}
+
+interface UseMeshPointsVertexAttributeConfigValuesReturn {
+  meshPointsVertexAttributeRange: (id: string) => [number | undefined, number | undefined];
+  meshPointsVertexAttributeColorMap: (id: string) => string | undefined;
+  meshPointsVertexAttributeNoDataColor: (id: string) => RGBAColor;
+}
+
+function useMeshPointsVertexAttributeConfigValues(): UseMeshPointsVertexAttributeConfigValuesReturn {
+  const {
+    meshPointsVertexAttributeName,
+    meshPointsVertexAttributeItem,
+    meshPointsVertexAttributeStoredConfig,
+  } = useMeshPointsVertexAttributeConfig();
+  function meshPointsVertexAttributeRange(id: string): [number | undefined, number | undefined] {
+    const name = meshPointsVertexAttributeName(id);
+    const item = meshPointsVertexAttributeItem(id);
+    const storedConfig = meshPointsVertexAttributeStoredConfig(id, name, item);
+    return [storedConfig.minimum, storedConfig.maximum];
+  }
+  function meshPointsVertexAttributeColorMap(id: string): string | undefined {
+    const name = meshPointsVertexAttributeName(id);
+    const item = meshPointsVertexAttributeItem(id);
+    const storedConfig = meshPointsVertexAttributeStoredConfig(id, name, item);
+    return storedConfig.colorMap;
+  }
+  function meshPointsVertexAttributeNoDataColor(id: string): RGBAColor {
+    const name = meshPointsVertexAttributeName(id);
+    const item = meshPointsVertexAttributeItem(id);
+    const storedConfig = meshPointsVertexAttributeStoredConfig(id, name, item);
+    return storedConfig.no_data_color;
+  }
+  return {
+    meshPointsVertexAttributeRange,
+    meshPointsVertexAttributeColorMap,
+    meshPointsVertexAttributeNoDataColor,
+  };
+}
+
+function useMeshPointsVertexAttributeConfigWriter(): UseMeshPointsVertexAttributeConfigWriterReturn {
+  const meshPointsCommonStyle = useMeshPointsCommonStyle();
+  async function mutateMeshPointsVertexStyle(
+    id: string,
+    values: Record<string, unknown>,
+  ): Promise<string> {
+    const result = await meshPointsCommonStyle.mutateMeshPointsStyle(id, {
+      coloring: {
+        vertex: values,
+      },
+    });
+    return result;
+  }
+  async function setMeshPointsVertexAttributeStoredConfig(
+    id: string,
+    name: string | undefined,
+    item: number | undefined,
+    config: Partial<AttributeStoredConfig>,
+  ): Promise<string> {
+    const result = await mutateMeshPointsVertexStyle(id, {
+      storedConfigs: {
+        [name ?? ""]: {
+          lastItem: item,
+          [item ?? 0]: config,
+        },
+      },
+    });
+    return result;
+  }
+  return {
+    mutateMeshPointsVertexStyle,
+    setMeshPointsVertexAttributeStoredConfig,
+  };
+}
+export {
+  useMeshPointsVertexAttributeConfig,
+  useMeshPointsVertexAttributeConfigValues,
+  useMeshPointsVertexAttributeConfigWriter,
+};
diff --git a/internal/stores/data_style/mesh/polygons/polygon.ts b/internal/stores/data_style/mesh/polygons/polygon.ts
index 9e83ee234..84bc38cf9 100644
--- a/internal/stores/data_style/mesh/polygons/polygon.ts
+++ b/internal/stores/data_style/mesh/polygons/polygon.ts
@@ -4,9 +4,18 @@ import back_schemas from "@geode/opengeodeweb-back/opengeodeweb_back_typed_schem
 import viewer_schemas from "@geode/opengeodeweb-viewer/opengeodeweb_viewer_typed_schemas.js";
 
 // Local imports
+import {
+  type UseMeshPolygonsPolygonAttributeStyleReturn,
+  type ValidAttributeInput,
+  isMeshPolygonsPolygonAttributeValid,
+} from "./polygon_attribute";
+import {
+  useMeshPolygonsPolygonAttributeConfig,
+  useMeshPolygonsPolygonAttributeConfigValues,
+  useMeshPolygonsPolygonAttributeConfigWriter,
+} from "./polygon_config";
 import { getRGBPointsFromPreset } from "@ogw_front/utils/colormap";
 import { useAttributeTimeStepStyle } from "@ogw_internal/stores/data_style/time_step";
-import { useMeshPolygonsCommonStyle } from "./common";
 import { useViewerStore } from "@ogw_front/stores/viewer";
 
 // Local constants
@@ -14,141 +23,24 @@ const attributeNamesSchema = back_schemas.opengeodeweb_back.polygon_attribute_na
 const meshPolygonsPolygonAttributeSchemas =
   viewer_schemas.opengeodeweb_viewer.mesh.polygons.attribute.polygon;
 
-interface AttributeStoredConfig {
-  minimum: number | undefined;
-  maximum: number | undefined;
-  colorMap: string | undefined;
-  no_data_color: RGBAColor;
-}
-
-interface AttributeState {
-  name?: string;
-  item?: number;
-  storedConfigs?: Record<string, { lastItem: number } & Record<string, AttributeStoredConfig>>;
-}
-
-interface AttributeInput {
-  name: string | undefined;
-  item: number | undefined;
-  minimum: number | undefined;
-  maximum: number | undefined;
-  colorMap: string | undefined;
-  no_data_color?: RGBAColor;
-}
-
-interface ValidAttributeInput {
-  name: string;
-  item: number;
-  minimum: number;
-  maximum: number;
-  colorMap: string;
-  no_data_color?: RGBAColor;
-}
-
-function isMeshPolygonsPolygonAttributeValid(input: AttributeInput): input is ValidAttributeInput {
-  return (
-    input.name !== undefined &&
-    input.item !== undefined &&
-    input.minimum !== undefined &&
-    input.maximum !== undefined &&
-    input.colorMap !== undefined
-  );
-}
-
 // oxlint-disable-next-line max-lines-per-function
-function useMeshPolygonsPolygonAttributeStyle(): {
-  meshPolygonsPolygonAttributeName: (id: string) => string | undefined;
-  meshPolygonsPolygonAttributeItem: (id: string) => number;
-  meshPolygonsPolygonAttributeRange: (id: string) => [number | undefined, number | undefined];
-  meshPolygonsPolygonAttributeTimeStep: (id: string) => number | undefined;
-  setMeshPolygonsPolygonAttributeTimeStep: (id: string, timeStep: number) => Promise<unknown>;
-  meshPolygonsPolygonAttributeColorMap: (id: string) => string | undefined;
-  meshPolygonsPolygonAttributeStoredConfig: (
-    id: string,
-    name: string | undefined,
-    item: number | undefined,
-  ) => AttributeStoredConfig;
-  setMeshPolygonsPolygonAttribute: (id: string, input: ValidAttributeInput) => Promise<unknown>;
-  setMeshPolygonsPolygonAttributeName: (id: string, name: string) => Promise<unknown>;
-  setMeshPolygonsPolygonAttributeItem: (id: string, item: number) => Promise<unknown>;
-  setMeshPolygonsPolygonAttributeRange: (
-    id: string,
-    minimum: number,
-    maximum: number,
-  ) => Promise<unknown>;
-  setMeshPolygonsPolygonAttributeColorMap: (
-    id: string,
-    colorMap: string | undefined,
-  ) => Promise<unknown>;
-  meshPolygonsPolygonAttributeNoDataColor: (id: string) => RGBAColor;
-  setMeshPolygonsPolygonAttributeNoDataColor: (
-    id: string,
-    no_data_color: RGBAColor,
-  ) => Promise<unknown>;
-} {
+function useMeshPolygonsPolygonAttributeStyle(): UseMeshPolygonsPolygonAttributeStyleReturn {
   const { attributeTimeStep, setAttributeTimeStep, seriesArrayName } = useAttributeTimeStepStyle();
   const viewerStore = useViewerStore();
-  const meshPolygonsCommonStyle = useMeshPolygonsCommonStyle();
-  function meshPolygonsPolygonAttribute(id: string): AttributeState {
-    // oxlint-disable-next-line no-unsafe-type-assertion -- coloring.polygon shape is defined by the data style schema.
-    return meshPolygonsCommonStyle.meshPolygonsColoring(id).polygon as AttributeState;
-  }
-  function meshPolygonsPolygonAttributeStoredConfig(
-    id: string,
-    name: string | undefined,
-    item: number | undefined,
-  ): AttributeStoredConfig {
-    const { storedConfigs } = meshPolygonsPolygonAttribute(id);
-    const nameConfig = name === undefined ? undefined : storedConfigs?.[name];
-    const itemConfig = item === undefined ? undefined : nameConfig?.[item];
-    if (itemConfig !== undefined) {
-      return itemConfig;
-    }
-    return {
-      minimum: undefined,
-      maximum: undefined,
-      colorMap: undefined,
-      no_data_color: DEFAULT_NO_DATA_COLOR,
-    };
-  }
-  async function mutateMeshPolygonsPolygonStyle(
-    id: string,
-    values: Record<string, unknown>,
-  ): Promise<string> {
-    const result = await meshPolygonsCommonStyle.mutateMeshPolygonsPolygonStyle(id, values);
-    return result;
-  }
-  async function setMeshPolygonsPolygonAttributeStoredConfig(
-    id: string,
-    name: string | undefined,
-    item: number | undefined,
-    config: Partial<AttributeStoredConfig>,
-  ): Promise<string> {
-    const result = await mutateMeshPolygonsPolygonStyle(id, {
-      storedConfigs: {
-        [name ?? ""]: {
-          lastItem: item,
-          [item ?? 0]: config,
-        },
-      },
-    });
-    return result;
-  }
-  function meshPolygonsPolygonAttributeName(id: string): string | undefined {
-    return meshPolygonsPolygonAttribute(id).name;
-  }
-  function meshPolygonsPolygonAttributeLastItem(id: string, name: string | undefined): number {
-    const { storedConfigs } = meshPolygonsPolygonAttribute(id);
-    const nameConfig = name === undefined ? undefined : storedConfigs?.[name];
-    if (nameConfig !== undefined) {
-      return nameConfig.lastItem;
-    }
-    return 0;
-  }
-  function meshPolygonsPolygonAttributeItem(id: string): number {
-    const { item, name } = meshPolygonsPolygonAttribute(id);
-    return item ?? meshPolygonsPolygonAttributeLastItem(id, name);
-  }
+  const {
+    meshPolygonsPolygonAttribute,
+    meshPolygonsPolygonAttributeName,
+    meshPolygonsPolygonAttributeLastItem,
+    meshPolygonsPolygonAttributeItem,
+    meshPolygonsPolygonAttributeStoredConfig,
+  } = useMeshPolygonsPolygonAttributeConfig();
+  const {
+    meshPolygonsPolygonAttributeRange,
+    meshPolygonsPolygonAttributeColorMap,
+    meshPolygonsPolygonAttributeNoDataColor,
+  } = useMeshPolygonsPolygonAttributeConfigValues();
+  const { mutateMeshPolygonsPolygonStyle, setMeshPolygonsPolygonAttributeStoredConfig } =
+    useMeshPolygonsPolygonAttributeConfigWriter();
   function meshPolygonsPolygonAttributeTimeStep(id: string): number | undefined {
     return attributeTimeStep(id, attributeNamesSchema.$id, meshPolygonsPolygonAttribute(id).name);
   }
@@ -221,12 +113,6 @@ function useMeshPolygonsPolygonAttributeStyle(): {
     });
     return applyPolygonAttribute(id);
   }
-  function meshPolygonsPolygonAttributeRange(id: string): [number | undefined, number | undefined] {
-    const name = meshPolygonsPolygonAttributeName(id);
-    const item = meshPolygonsPolygonAttributeItem(id);
-    const storedConfig = meshPolygonsPolygonAttributeStoredConfig(id, name, item);
-    return [storedConfig.minimum, storedConfig.maximum];
-  }
   async function setMeshPolygonsPolygonAttributeTimeStep(
     id: string,
     timeStep: number,
@@ -251,12 +137,6 @@ function useMeshPolygonsPolygonAttributeStyle(): {
     });
     return applyPolygonAttribute(id);
   }
-  function meshPolygonsPolygonAttributeColorMap(id: string): string | undefined {
-    const name = meshPolygonsPolygonAttributeName(id);
-    const item = meshPolygonsPolygonAttributeItem(id);
-    const storedConfig = meshPolygonsPolygonAttributeStoredConfig(id, name, item);
-    return storedConfig.colorMap;
-  }
   async function setMeshPolygonsPolygonAttributeColorMap(
     id: string,
     colorMap: string | undefined,
@@ -268,12 +148,6 @@ function useMeshPolygonsPolygonAttributeStyle(): {
     });
     return applyPolygonAttribute(id);
   }
-  function meshPolygonsPolygonAttributeNoDataColor(id: string): RGBAColor {
-    const name = meshPolygonsPolygonAttributeName(id);
-    const item = meshPolygonsPolygonAttributeItem(id);
-    const storedConfig = meshPolygonsPolygonAttributeStoredConfig(id, name, item);
-    return storedConfig.no_data_color;
-  }
   async function setMeshPolygonsPolygonAttributeNoDataColor(
     id: string,
     no_data_color: RGBAColor,
@@ -304,4 +178,5 @@ function useMeshPolygonsPolygonAttributeStyle(): {
     setMeshPolygonsPolygonAttributeNoDataColor,
   };
 }
-export { isMeshPolygonsPolygonAttributeValid, useMeshPolygonsPolygonAttributeStyle };
+export { useMeshPolygonsPolygonAttributeStyle };
+export { isMeshPolygonsPolygonAttributeValid } from "./polygon_attribute";
diff --git a/internal/stores/data_style/mesh/polygons/polygon_attribute.ts b/internal/stores/data_style/mesh/polygons/polygon_attribute.ts
new file mode 100644
index 000000000..2dce94594
--- /dev/null
+++ b/internal/stores/data_style/mesh/polygons/polygon_attribute.ts
@@ -0,0 +1,80 @@
+import type { RGBAColor } from "@ogw_front/utils/default_styles/constants";
+
+interface AttributeStoredConfig {
+  minimum: number | undefined;
+  maximum: number | undefined;
+  colorMap: string | undefined;
+  no_data_color: RGBAColor;
+}
+
+interface AttributeState {
+  name?: string;
+  item?: number;
+  storedConfigs?: Record<string, { lastItem: number } & Record<string, AttributeStoredConfig>>;
+}
+
+interface AttributeInput {
+  name: string | undefined;
+  item: number | undefined;
+  minimum: number | undefined;
+  maximum: number | undefined;
+  colorMap: string | undefined;
+  no_data_color?: RGBAColor;
+}
+
+interface ValidAttributeInput {
+  name: string;
+  item: number;
+  minimum: number;
+  maximum: number;
+  colorMap: string;
+  no_data_color?: RGBAColor;
+}
+
+function isMeshPolygonsPolygonAttributeValid(input: AttributeInput): input is ValidAttributeInput {
+  return (
+    input.name !== undefined &&
+    input.item !== undefined &&
+    input.minimum !== undefined &&
+    input.maximum !== undefined &&
+    input.colorMap !== undefined
+  );
+}
+
+interface UseMeshPolygonsPolygonAttributeStyleReturn {
+  meshPolygonsPolygonAttributeName: (id: string) => string | undefined;
+  meshPolygonsPolygonAttributeItem: (id: string) => number;
+  meshPolygonsPolygonAttributeRange: (id: string) => [number | undefined, number | undefined];
+  meshPolygonsPolygonAttributeTimeStep: (id: string) => number | undefined;
+  setMeshPolygonsPolygonAttributeTimeStep: (id: string, timeStep: number) => Promise<unknown>;
+  meshPolygonsPolygonAttributeColorMap: (id: string) => string | undefined;
+  meshPolygonsPolygonAttributeStoredConfig: (
+    id: string,
+    name: string | undefined,
+    item: number | undefined,
+  ) => AttributeStoredConfig;
+  setMeshPolygonsPolygonAttribute: (id: string, input: ValidAttributeInput) => Promise<unknown>;
+  setMeshPolygonsPolygonAttributeName: (id: string, name: string) => Promise<unknown>;
+  setMeshPolygonsPolygonAttributeItem: (id: string, item: number) => Promise<unknown>;
+  setMeshPolygonsPolygonAttributeRange: (
+    id: string,
+    minimum: number,
+    maximum: number,
+  ) => Promise<unknown>;
+  setMeshPolygonsPolygonAttributeColorMap: (
+    id: string,
+    colorMap: string | undefined,
+  ) => Promise<unknown>;
+  meshPolygonsPolygonAttributeNoDataColor: (id: string) => RGBAColor;
+  setMeshPolygonsPolygonAttributeNoDataColor: (
+    id: string,
+    no_data_color: RGBAColor,
+  ) => Promise<unknown>;
+}
+export { isMeshPolygonsPolygonAttributeValid };
+export type {
+  AttributeStoredConfig,
+  AttributeState,
+  ValidAttributeInput,
+  UseMeshPolygonsPolygonAttributeStyleReturn,
+};
diff --git a/internal/stores/data_style/mesh/polygons/polygon_config.ts b/internal/stores/data_style/mesh/polygons/polygon_config.ts
new file mode 100644
index 000000000..0f1d989de
--- /dev/null
+++ b/internal/stores/data_style/mesh/polygons/polygon_config.ts
@@ -0,0 +1,148 @@
+import type { AttributeState, AttributeStoredConfig } from "./polygon_attribute";
+import { DEFAULT_NO_DATA_COLOR, type RGBAColor } from "@ogw_front/utils/default_styles/constants";
+
+// Local imports
+import { useMeshPolygonsCommonStyle } from "./common";
+
+interface UseMeshPolygonsPolygonAttributeConfigReturn {
+  meshPolygonsPolygonAttribute: (id: string) => AttributeState;
+  meshPolygonsPolygonAttributeName: (id: string) => string | undefined;
+  meshPolygonsPolygonAttributeLastItem: (id: string, name: string | undefined) => number;
+  meshPolygonsPolygonAttributeItem: (id: string) => number;
+  meshPolygonsPolygonAttributeStoredConfig: (
+    id: string,
+    name: string | undefined,
+    item: number | undefined,
+  ) => AttributeStoredConfig;
+}
+
+interface UseMeshPolygonsPolygonAttributeConfigWriterReturn {
+  mutateMeshPolygonsPolygonStyle: (id: string, values: Record<string, unknown>) => Promise<string>;
+  setMeshPolygonsPolygonAttributeStoredConfig: (
+    id: string,
+    name: string | undefined,
+    item: number | undefined,
+    config: Partial<AttributeStoredConfig>,
+  ) => Promise<string>;
+}
+
+function useMeshPolygonsPolygonAttributeConfig(): UseMeshPolygonsPolygonAttributeConfigReturn {
+  const meshPolygonsCommonStyle = useMeshPolygonsCommonStyle();
+  function meshPolygonsPolygonAttribute(id: string): AttributeState {
+    // oxlint-disable-next-line no-unsafe-type-assertion -- coloring.polygon shape is defined by the data style schema.
+    return meshPolygonsCommonStyle.meshPolygonsColoring(id).polygon as AttributeState;
+  }
+  function meshPolygonsPolygonAttributeStoredConfig(
+    id: string,
+    name: string | undefined,
+    item: number | undefined,
+  ): AttributeStoredConfig {
+    const { storedConfigs } = meshPolygonsPolygonAttribute(id);
+    const nameConfig = name === undefined ? undefined : storedConfigs?.[name];
+    const itemConfig = item === undefined ? undefined : nameConfig?.[item];
+    if (itemConfig !== undefined) {
+      return itemConfig;
+    }
+    return {
+      minimum: undefined,
+      maximum: undefined,
+      colorMap: undefined,
+      no_data_color: DEFAULT_NO_DATA_COLOR,
+    };
+  }
+  function meshPolygonsPolygonAttributeName(id: string): string | undefined {
+    return meshPolygonsPolygonAttribute(id).name;
+  }
+  function meshPolygonsPolygonAttributeLastItem(id: string, name: string | undefined): number {
+    const { storedConfigs } = meshPolygonsPolygonAttribute(id);
+    const nameConfig = name === undefined ? undefined : storedConfigs?.[name];
+    if (nameConfig !== undefined) {
+      return nameConfig.lastItem;
+    }
+    return 0;
+  }
+  function meshPolygonsPolygonAttributeItem(id: string): number {
+    const { item, name } = meshPolygonsPolygonAttribute(id);
+    return item ?? meshPolygonsPolygonAttributeLastItem(id, name);
+  }
+  return {
+    meshPolygonsPolygonAttribute,
+    meshPolygonsPolygonAttributeName,
+    meshPolygonsPolygonAttributeLastItem,
+    meshPolygonsPolygonAttributeItem,
+    meshPolygonsPolygonAttributeStoredConfig,
+  };
+}
+
+interface UseMeshPolygonsPolygonAttributeConfigValuesReturn {
+  meshPolygonsPolygonAttributeRange: (id: string) => [number | undefined, number | undefined];
+  meshPolygonsPolygonAttributeColorMap: (id: string) => string | undefined;
+  meshPolygonsPolygonAttributeNoDataColor: (id: string) => RGBAColor;
+}
+
+function useMeshPolygonsPolygonAttributeConfigValues(): UseMeshPolygonsPolygonAttributeConfigValuesReturn {
+  const {
+    meshPolygonsPolygonAttributeName,
+    meshPolygonsPolygonAttributeItem,
+    meshPolygonsPolygonAttributeStoredConfig,
+  } = useMeshPolygonsPolygonAttributeConfig();
+  function meshPolygonsPolygonAttributeRange(id: string): [number | undefined, number | undefined] {
+    const name = meshPolygonsPolygonAttributeName(id);
+    const item = meshPolygonsPolygonAttributeItem(id);
+    const storedConfig = meshPolygonsPolygonAttributeStoredConfig(id, name, item);
+    return [storedConfig.minimum, storedConfig.maximum];
+  }
+  function meshPolygonsPolygonAttributeColorMap(id: string): string | undefined {
+    const name = meshPolygonsPolygonAttributeName(id);
+    const item = meshPolygonsPolygonAttributeItem(id);
+    const storedConfig = meshPolygonsPolygonAttributeStoredConfig(id, name, item);
+    return storedConfig.colorMap;
+  }
+  function meshPolygonsPolygonAttributeNoDataColor(id: string): RGBAColor {
+    const name = meshPolygonsPolygonAttributeName(id);
+    const item = meshPolygonsPolygonAttributeItem(id);
+    const storedConfig = meshPolygonsPolygonAttributeStoredConfig(id, name, item);
+    return storedConfig.no_data_color;
+  }
+  return {
+    meshPolygonsPolygonAttributeRange,
+    meshPolygonsPolygonAttributeColorMap,
+    meshPolygonsPolygonAttributeNoDataColor,
+  };
+}
+
+function useMeshPolygonsPolygonAttributeConfigWriter(): UseMeshPolygonsPolygonAttributeConfigWriterReturn {
+  const meshPolygonsCommonStyle = useMeshPolygonsCommonStyle();
+  async function mutateMeshPolygonsPolygonStyle(
+    id: string,
+    values: Record<string, unknown>,
+  ): Promise<string> {
+    const result = await meshPolygonsCommonStyle.mutateMeshPolygonsPolygonStyle(id, values);
+    return result;
+  }
+  async function setMeshPolygonsPolygonAttributeStoredConfig(
+    id: string,
+    name: string | undefined,
+    item: number | undefined,
+    config: Partial<AttributeStoredConfig>,
+  ): Promise<string> {
+    const result = await mutateMeshPolygonsPolygonStyle(id, {
+      storedConfigs: {
+        [name ?? ""]: {
+          lastItem: item,
+          [item ?? 0]: config,
+        },
+      },
+    });
+    return result;
+  }
+  return {
+    mutateMeshPolygonsPolygonStyle,
+    setMeshPolygonsPolygonAttributeStoredConfig,
+  };
+}
+export {
+  useMeshPolygonsPolygonAttributeConfig,
+  useMeshPolygonsPolygonAttributeConfigValues,
+  useMeshPolygonsPolygonAttributeConfigWriter,
+};
diff --git a/internal/stores/data_style/mesh/polygons/vertex.ts b/internal/stores/data_style/mesh/polygons/vertex.ts
index b55709ca2..1aca8ca1b 100644
--- a/internal/stores/data_style/mesh/polygons/vertex.ts
+++ b/internal/stores/data_style/mesh/polygons/vertex.ts
@@ -4,9 +4,18 @@ import back_schemas from "@geode/opengeodeweb-back/opengeodeweb_back_typed_schem
 import viewer_schemas from "@geode/opengeodeweb-viewer/opengeodeweb_viewer_typed_schemas.js";
 
 // Local imports
+import {
+  type UseMeshPolygonsVertexAttributeStyleReturn,
+  type ValidAttributeInput,
+  isMeshPolygonsVertexAttributeValid,
+} from "./vertex_attribute";
+import {
+  useMeshPolygonsVertexAttributeConfig,
+  useMeshPolygonsVertexAttributeConfigValues,
+  useMeshPolygonsVertexAttributeConfigWriter,
+} from "./vertex_config";
 import { getRGBPointsFromPreset } from "@ogw_front/utils/colormap";
 import { useAttributeTimeStepStyle } from "@ogw_internal/stores/data_style/time_step";
-import { useMeshPolygonsCommonStyle } from "./common";
 import { useViewerStore } from "@ogw_front/stores/viewer";
 
 // Local constants
@@ -14,147 +23,24 @@ const attributeNamesSchema = back_schemas.opengeodeweb_back.vertex_attribute_nam
 const meshPolygonsVertexAttributeSchemas =
   viewer_schemas.opengeodeweb_viewer.mesh.polygons.attribute.vertex;
 
-interface AttributeStoredConfig {
-  minimum: number | undefined;
-  maximum: number | undefined;
-  colorMap: string | undefined;
-  no_data_color: RGBAColor;
-}
-
-interface AttributeState {
-  name?: string;
-  item?: number;
-  storedConfigs?: Record<string, { lastItem: number } & Record<string, AttributeStoredConfig>>;
-}
-
-interface AttributeInput {
-  name: string | undefined;
-  item: number | undefined;
-  minimum: number | undefined;
-  maximum: number | undefined;
-  colorMap: string | undefined;
-  no_data_color?: RGBAColor;
-}
-
-interface ValidAttributeInput {
-  name: string;
-  item: number;
-  minimum: number;
-  maximum: number;
-  colorMap: string;
-  no_data_color?: RGBAColor;
-}
-
-function isMeshPolygonsVertexAttributeValid(input: AttributeInput): input is ValidAttributeInput {
-  return (
-    input.name !== undefined &&
-    input.item !== undefined &&
-    input.minimum !== undefined &&
-    input.maximum !== undefined &&
-    input.colorMap !== undefined
-  );
-}
-
-interface UseMeshPolygonsVertexAttributeStyleReturn {
-  meshPolygonsVertexAttributeName: (id: string) => string | undefined;
-  meshPolygonsVertexAttributeItem: (id: string) => number;
-  meshPolygonsVertexAttributeRange: (id: string) => [number | undefined, number | undefined];
-  meshPolygonsVertexAttributeTimeStep: (id: string) => number | undefined;
-  setMeshPolygonsVertexAttributeTimeStep: (id: string, timeStep: number) => Promise<unknown>;
-  meshPolygonsVertexAttributeColorMap: (id: string) => string | undefined;
-  meshPolygonsVertexAttributeStoredConfig: (
-    id: string,
-    name: string | undefined,
-    item: number | undefined,
-  ) => AttributeStoredConfig;
-  setMeshPolygonsVertexAttribute: (id: string, input: ValidAttributeInput) => Promise<unknown>;
-  setMeshPolygonsVertexAttributeName: (id: string, name: string) => Promise<unknown>;
-  setMeshPolygonsVertexAttributeItem: (id: string, item: number) => Promise<unknown>;
-  setMeshPolygonsVertexAttributeRange: (
-    id: string,
-    minimum: number,
-    maximum: number,
-  ) => Promise<unknown>;
-  setMeshPolygonsVertexAttributeColorMap: (
-    id: string,
-    colorMap: string | undefined,
-  ) => Promise<unknown>;
-  meshPolygonsVertexAttributeNoDataColor: (id: string) => RGBAColor;
-  setMeshPolygonsVertexAttributeNoDataColor: (
-    id: string,
-    no_data_color: RGBAColor,
-  ) => Promise<unknown>;
-}
-
 // oxlint-disable-next-line max-lines-per-function
 function useMeshPolygonsVertexAttributeStyle(): UseMeshPolygonsVertexAttributeStyleReturn {
   const { attributeTimeStep, setAttributeTimeStep, seriesArrayName } = useAttributeTimeStepStyle();
   const viewerStore = useViewerStore();
-  const meshPolygonsCommonStyle = useMeshPolygonsCommonStyle();
-  function meshPolygonsVertexAttribute(id: string): AttributeState {
-    // oxlint-disable-next-line no-unsafe-type-assertion -- coloring.vertex shape is defined by the data style schema.
-    return meshPolygonsCommonStyle.meshPolygonsColoring(id).vertex as AttributeState;
-  }
-  function meshPolygonsVertexAttributeStoredConfig(
-    id: string,
-    name: string | undefined,
-    item: number | undefined,
-  ): AttributeStoredConfig {
-    const { storedConfigs } = meshPolygonsVertexAttribute(id);
-    const nameConfig = name === undefined ? undefined : storedConfigs?.[name];
-    const itemConfig = item === undefined ? undefined : nameConfig?.[item];
-    if (itemConfig !== undefined) {
-      return itemConfig;
-    }
-    return {
-      minimum: undefined,
-      maximum: undefined,
-      colorMap: undefined,
-      no_data_color: DEFAULT_NO_DATA_COLOR,
-    };
-  }
-  async function mutateMeshPolygonsVertexStyle(
-    id: string,
-    values: Record<string, unknown>,
-  ): Promise<string> {
-    const result = await meshPolygonsCommonStyle.mutateMeshPolygonsStyle(id, {
-      coloring: {
-        vertex: values,
-      },
-    });
-    return result;
-  }
-  async function setMeshPolygonsVertexAttributeStoredConfig(
-    id: string,
-    name: string | undefined,
-    item: number | undefined,
-    config: Partial<AttributeStoredConfig>,
-  ): Promise<string> {
-    const result = await mutateMeshPolygonsVertexStyle(id, {
-      storedConfigs: {
-        [name ?? ""]: {
-          lastItem: item,
-          [item ?? 0]: config,
-        },
-      },
-    });
-    return result;
-  }
-  function meshPolygonsVertexAttributeName(id: string): string | undefined {
-    return meshPolygonsVertexAttribute(id).name;
-  }
-  function meshPolygonsVertexAttributeLastItem(id: string, name: string | undefined): number {
-    const { storedConfigs } = meshPolygonsVertexAttribute(id);
-    const nameConfig = name === undefined ? undefined : storedConfigs?.[name];
-    if (nameConfig !== undefined) {
-      return nameConfig.lastItem;
-    }
-    return 0;
-  }
-  function meshPolygonsVertexAttributeItem(id: string): number {
-    const { item, name } = meshPolygonsVertexAttribute(id);
-    return item ?? meshPolygonsVertexAttributeLastItem(id, name);
-  }
+  const {
+    meshPolygonsVertexAttribute,
+    meshPolygonsVertexAttributeName,
+    meshPolygonsVertexAttributeLastItem,
+    meshPolygonsVertexAttributeItem,
+    meshPolygonsVertexAttributeStoredConfig,
+  } = useMeshPolygonsVertexAttributeConfig();
+  const {
+    meshPolygonsVertexAttributeRange,
+    meshPolygonsVertexAttributeColorMap,
+    meshPolygonsVertexAttributeNoDataColor,
+  } = useMeshPolygonsVertexAttributeConfigValues();
+  const { mutateMeshPolygonsVertexStyle, setMeshPolygonsVertexAttributeStoredConfig } =
+    useMeshPolygonsVertexAttributeConfigWriter();
   function meshPolygonsVertexAttributeTimeStep(id: string): number | undefined {
     return attributeTimeStep(id, attributeNamesSchema.$id, meshPolygonsVertexAttribute(id).name);
   }
@@ -227,12 +113,6 @@ function useMeshPolygonsVertexAttributeStyle(): UseMeshPolygonsVertexAttributeSt
     });
     return applyVertexAttribute(id);
   }
-  function meshPolygonsVertexAttributeRange(id: string): [number | undefined, number | undefined] {
-    const name = meshPolygonsVertexAttributeName(id);
-    const item = meshPolygonsVertexAttributeItem(id);
-    const storedConfig = meshPolygonsVertexAttributeStoredConfig(id, name, item);
-    return [storedConfig.minimum, storedConfig.maximum];
-  }
   async function setMeshPolygonsVertexAttributeTimeStep(
     id: string,
     timeStep: number,
@@ -257,12 +137,6 @@ function useMeshPolygonsVertexAttributeStyle(): UseMeshPolygonsVertexAttributeSt
     });
     return applyVertexAttribute(id);
   }
-  function meshPolygonsVertexAttributeColorMap(id: string): string | undefined {
-    const name = meshPolygonsVertexAttributeName(id);
-    const item = meshPolygonsVertexAttributeItem(id);
-    const storedConfig = meshPolygonsVertexAttributeStoredConfig(id, name, item);
-    return storedConfig.colorMap;
-  }
   async function setMeshPolygonsVertexAttributeColorMap(
     id: string,
     colorMap: string | undefined,
@@ -274,12 +148,6 @@ function useMeshPolygonsVertexAttributeStyle(): UseMeshPolygonsVertexAttributeSt
     });
     return applyVertexAttribute(id);
   }
-  function meshPolygonsVertexAttributeNoDataColor(id: string): RGBAColor {
-    const name = meshPolygonsVertexAttributeName(id);
-    const item = meshPolygonsVertexAttributeItem(id);
-    const storedConfig = meshPolygonsVertexAttributeStoredConfig(id, name, item);
-    return storedConfig.no_data_color;
-  }
   async function setMeshPolygonsVertexAttributeNoDataColor(
     id: string,
     no_data_color: RGBAColor,
@@ -310,4 +178,5 @@ function useMeshPolygonsVertexAttributeStyle(): UseMeshPolygonsVertexAttributeSt
     setMeshPolygonsVertexAttributeNoDataColor,
   };
 }
-export { isMeshPolygonsVertexAttributeValid, useMeshPolygonsVertexAttributeStyle };
+export { useMeshPolygonsVertexAttributeStyle };
+export { isMeshPolygonsVertexAttributeValid } from "./vertex_attribute";
diff --git a/internal/stores/data_style/mesh/polygons/vertex_attribute.ts b/internal/stores/data_style/mesh/polygons/vertex_attribute.ts
new file mode 100644
index 000000000..30a57345f
--- /dev/null
+++ b/internal/stores/data_style/mesh/polygons/vertex_attribute.ts
@@ -0,0 +1,80 @@
+import type { RGBAColor } from "@ogw_front/utils/default_styles/constants";
+
+interface AttributeStoredConfig {
+  minimum: number | undefined;
+  maximum: number | undefined;
+  colorMap: string | undefined;
+  no_data_color: RGBAColor;
+}
+
+interface AttributeState {
+  name?: string;
+  item?: number;
+  storedConfigs?: Record<string, { lastItem: number } & Record<string, AttributeStoredConfig>>;
+}
+
+interface AttributeInput {
+  name: string | undefined;
+  item: number | undefined;
+  minimum: number | undefined;
+  maximum: number | undefined;
+  colorMap: string | undefined;
+  no_data_color?: RGBAColor;
+}
+
+interface ValidAttributeInput {
+  name: string;
+  item: number;
+  minimum: number;
+  maximum: number;
+  colorMap: string;
+  no_data_color?: RGBAColor;
+}
+
+function isMeshPolygonsVertexAttributeValid(input: AttributeInput): input is ValidAttributeInput {
+  return (
+    input.name !== undefined &&
+    input.item !== undefined &&
+    input.minimum !== undefined &&
+    input.maximum !== undefined &&
+    input.colorMap !== undefined
+  );
+}
+
+interface UseMeshPolygonsVertexAttributeStyleReturn {
+  meshPolygonsVertexAttributeName: (id: string) => string | undefined;
+  meshPolygonsVertexAttributeItem: (id: string) => number;
+  meshPolygonsVertexAttributeRange: (id: string) => [number | undefined, number | undefined];
+  meshPolygonsVertexAttributeTimeStep: (id: string) => number | undefined;
+  setMeshPolygonsVertexAttributeTimeStep: (id: string, timeStep: number) => Promise<unknown>;
+  meshPolygonsVertexAttributeColorMap: (id: string) => string | undefined;
+  meshPolygonsVertexAttributeStoredConfig: (
+    id: string,
+    name: string | undefined,
+    item: number | undefined,
+  ) => AttributeStoredConfig;
+  setMeshPolygonsVertexAttribute: (id: string, input: ValidAttributeInput) => Promise<unknown>;
+  setMeshPolygonsVertexAttributeName: (id: string, name: string) => Promise<unknown>;
+  setMeshPolygonsVertexAttributeItem: (id: string, item: number) => Promise<unknown>;
+  setMeshPolygonsVertexAttributeRange: (
+    id: string,
+    minimum: number,
+    maximum: number,
+  ) => Promise<unknown>;
+  setMeshPolygonsVertexAttributeColorMap: (
+    id: string,
+    colorMap: string | undefined,
+  ) => Promise<unknown>;
+  meshPolygonsVertexAttributeNoDataColor: (id: string) => RGBAColor;
+  setMeshPolygonsVertexAttributeNoDataColor: (
+    id: string,
+    no_data_color: RGBAColor,
+  ) => Promise<unknown>;
+}
+export { isMeshPolygonsVertexAttributeValid };
+export type {
+  AttributeStoredConfig,
+  AttributeState,
+  ValidAttributeInput,
+  UseMeshPolygonsVertexAttributeStyleReturn,
+};
diff --git a/internal/stores/data_style/mesh/polygons/vertex_config.ts b/internal/stores/data_style/mesh/polygons/vertex_config.ts
new file mode 100644
index 000000000..5833b5e3f
--- /dev/null
+++ b/internal/stores/data_style/mesh/polygons/vertex_config.ts
@@ -0,0 +1,152 @@
+import type { AttributeState, AttributeStoredConfig } from "./vertex_attribute";
+import { DEFAULT_NO_DATA_COLOR, type RGBAColor } from "@ogw_front/utils/default_styles/constants";
+
+// Local imports
+import { useMeshPolygonsCommonStyle } from "./common";
+
+interface UseMeshPolygonsVertexAttributeConfigReturn {
+  meshPolygonsVertexAttribute: (id: string) => AttributeState;
+  meshPolygonsVertexAttributeName: (id: string) => string | undefined;
+  meshPolygonsVertexAttributeLastItem: (id: string, name: string | undefined) => number;
+  meshPolygonsVertexAttributeItem: (id: string) => number;
+  meshPolygonsVertexAttributeStoredConfig: (
+    id: string,
+    name: string | undefined,
+    item: number | undefined,
+  ) => AttributeStoredConfig;
+}
+
+interface UseMeshPolygonsVertexAttributeConfigWriterReturn {
+  mutateMeshPolygonsVertexStyle: (id: string, values: Record<string, unknown>) => Promise<string>;
+  setMeshPolygonsVertexAttributeStoredConfig: (
+    id: string,
+    name: string | undefined,
+    item: number | undefined,
+    config: Partial<AttributeStoredConfig>,
+  ) => Promise<string>;
+}
+
+function useMeshPolygonsVertexAttributeConfig(): UseMeshPolygonsVertexAttributeConfigReturn {
+  const meshPolygonsCommonStyle = useMeshPolygonsCommonStyle();
+  function meshPolygonsVertexAttribute(id: string): AttributeState {
+    // oxlint-disable-next-line no-unsafe-type-assertion -- coloring.vertex shape is defined by the data style schema.
+    return meshPolygonsCommonStyle.meshPolygonsColoring(id).vertex as AttributeState;
+  }
+  function meshPolygonsVertexAttributeStoredConfig(
+    id: string,
+    name: string | undefined,
+    item: number | undefined,
+  ): AttributeStoredConfig {
+    const { storedConfigs } = meshPolygonsVertexAttribute(id);
+    const nameConfig = name === undefined ? undefined : storedConfigs?.[name];
+    const itemConfig = item === undefined ? undefined : nameConfig?.[item];
+    if (itemConfig !== undefined) {
+      return itemConfig;
+    }
+    return {
+      minimum: undefined,
+      maximum: undefined,
+      colorMap: undefined,
+      no_data_color: DEFAULT_NO_DATA_COLOR,
+    };
+  }
+  function meshPolygonsVertexAttributeName(id: string): string | undefined {
+    return meshPolygonsVertexAttribute(id).name;
+  }
+  function meshPolygonsVertexAttributeLastItem(id: string, name: string | undefined): number {
+    const { storedConfigs } = meshPolygonsVertexAttribute(id);
+    const nameConfig = name === undefined ? undefined : storedConfigs?.[name];
+    if (nameConfig !== undefined) {
+      return nameConfig.lastItem;
+    }
+    return 0;
+  }
+  function meshPolygonsVertexAttributeItem(id: string): number {
+    const { item, name } = meshPolygonsVertexAttribute(id);
+    return item ?? meshPolygonsVertexAttributeLastItem(id, name);
+  }
+  return {
+    meshPolygonsVertexAttribute,
+    meshPolygonsVertexAttributeName,
+    meshPolygonsVertexAttributeLastItem,
+    meshPolygonsVertexAttributeItem,
+    meshPolygonsVertexAttributeStoredConfig,
+  };
+}
+
+interface UseMeshPolygonsVertexAttributeConfigValuesReturn {
+  meshPolygonsVertexAttributeRange: (id: string) => [number | undefined, number | undefined];
+  meshPolygonsVertexAttributeColorMap: (id: string) => string | undefined;
+  meshPolygonsVertexAttributeNoDataColor: (id: string) => RGBAColor;
+}
+
+function useMeshPolygonsVertexAttributeConfigValues(): UseMeshPolygonsVertexAttributeConfigValuesReturn {
+  const {
+    meshPolygonsVertexAttributeName,
+    meshPolygonsVertexAttributeItem,
+    meshPolygonsVertexAttributeStoredConfig,
+  } = useMeshPolygonsVertexAttributeConfig();
+  function meshPolygonsVertexAttributeRange(id: string): [number | undefined, number | undefined] {
+    const name = meshPolygonsVertexAttributeName(id);
+    const item = meshPolygonsVertexAttributeItem(id);
+    const storedConfig = meshPolygonsVertexAttributeStoredConfig(id, name, item);
+    return [storedConfig.minimum, storedConfig.maximum];
+  }
+  function meshPolygonsVertexAttributeColorMap(id: string): string | undefined {
+    const name = meshPolygonsVertexAttributeName(id);
+    const item = meshPolygonsVertexAttributeItem(id);
+    const storedConfig = meshPolygonsVertexAttributeStoredConfig(id, name, item);
+    return storedConfig.colorMap;
+  }
+  function meshPolygonsVertexAttributeNoDataColor(id: string): RGBAColor {
+    const name = meshPolygonsVertexAttributeName(id);
+    const item = meshPolygonsVertexAttributeItem(id);
+    const storedConfig = meshPolygonsVertexAttributeStoredConfig(id, name, item);
+    return storedConfig.no_data_color;
+  }
+  return {
+    meshPolygonsVertexAttributeRange,
+    meshPolygonsVertexAttributeColorMap,
+    meshPolygonsVertexAttributeNoDataColor,
+  };
+}
+
+function useMeshPolygonsVertexAttributeConfigWriter(): UseMeshPolygonsVertexAttributeConfigWriterReturn {
+  const meshPolygonsCommonStyle = useMeshPolygonsCommonStyle();
+  async function mutateMeshPolygonsVertexStyle(
+    id: string,
+    values: Record<string, unknown>,
+  ): Promise<string> {
+    const result = await meshPolygonsCommonStyle.mutateMeshPolygonsStyle(id, {
+      coloring: {
+        vertex: values,
+      },
+    });
+    return result;
+  }
+  async function setMeshPolygonsVertexAttributeStoredConfig(
+    id: string,
+    name: string | undefined,
+    item: number | undefined,
+    config: Partial<AttributeStoredConfig>,
+  ): Promise<string> {
+    const result = await mutateMeshPolygonsVertexStyle(id, {
+      storedConfigs: {
+        [name ?? ""]: {
+          lastItem: item,
+          [item ?? 0]: config,
+        },
+      },
+    });
+    return result;
+  }
+  return {
+    mutateMeshPolygonsVertexStyle,
+    setMeshPolygonsVertexAttributeStoredConfig,
+  };
+}
+export {
+  useMeshPolygonsVertexAttributeConfig,
+  useMeshPolygonsVertexAttributeConfigValues,
+  useMeshPolygonsVertexAttributeConfigWriter,
+};
diff --git a/internal/stores/data_style/mesh/polyhedra/polyhedron.ts b/internal/stores/data_style/mesh/polyhedra/polyhedron.ts
index c3f07f366..eb322cc1c 100644
--- a/internal/stores/data_style/mesh/polyhedra/polyhedron.ts
+++ b/internal/stores/data_style/mesh/polyhedra/polyhedron.ts
@@ -4,9 +4,18 @@ import back_schemas from "@geode/opengeodeweb-back/opengeodeweb_back_typed_schem
 import viewer_schemas from "@geode/opengeodeweb-viewer/opengeodeweb_viewer_typed_schemas.js";
 
 // Local imports
+import {
+  type UseMeshPolyhedraPolyhedronAttributeStyleReturn,
+  type ValidAttributeInput,
+  isMeshPolyhedraPolyhedronAttributeValid,
+} from "./polyhedron_attribute";
+import {
+  useMeshPolyhedraPolyhedronAttributeConfig,
+  useMeshPolyhedraPolyhedronAttributeConfigValues,
+  useMeshPolyhedraPolyhedronAttributeConfigWriter,
+} from "./polyhedron_config";
 import { getRGBPointsFromPreset } from "@ogw_front/utils/colormap";
 import { useAttributeTimeStepStyle } from "@ogw_internal/stores/data_style/time_step";
-import { useMeshPolyhedraCommonStyle } from "./common";
 import { useViewerStore } from "@ogw_front/stores/viewer";
 
 // Local constants
@@ -14,147 +23,24 @@ const attributeNamesSchema = back_schemas.opengeodeweb_back.polyhedron_attribute
 const meshPolyhedraPolyhedronAttributeSchemas =
   viewer_schemas.opengeodeweb_viewer.mesh.polyhedra.attribute.polyhedron;
 
-interface AttributeStoredConfig {
-  minimum: number | undefined;
-  maximum: number | undefined;
-  colorMap: string | undefined;
-  no_data_color: RGBAColor;
-}
-
-interface AttributeState {
-  name?: string;
-  item?: number;
-  storedConfigs?: Record<string, { lastItem: number } & Record<string, AttributeStoredConfig>>;
-}
-
-interface AttributeInput {
-  name: string | undefined;
-  item: number | undefined;
-  minimum: number | undefined;
-  maximum: number | undefined;
-  colorMap: string | undefined;
-  no_data_color?: RGBAColor;
-}
-
-interface ValidAttributeInput {
-  name: string;
-  item: number;
-  minimum: number;
-  maximum: number;
-  colorMap: string;
-  no_data_color?: RGBAColor;
-}
-
-function isMeshPolyhedraPolyhedronAttributeValid(
-  input: AttributeInput,
-): input is ValidAttributeInput {
-  return (
-    input.name !== undefined &&
-    input.item !== undefined &&
-    input.minimum !== undefined &&
-    input.maximum !== undefined &&
-    input.colorMap !== undefined
-  );
-}
-
 // oxlint-disable-next-line max-lines-per-function
-function useMeshPolyhedraPolyhedronAttributeStyle(): {
-  meshPolyhedraPolyhedronAttributeName: (id: string) => string | undefined;
-  meshPolyhedraPolyhedronAttributeItem: (id: string) => number;
-  meshPolyhedraPolyhedronAttributeRange: (id: string) => [number | undefined, number | undefined];
-  meshPolyhedraPolyhedronAttributeTimeStep: (id: string) => number | undefined;
-  setMeshPolyhedraPolyhedronAttributeTimeStep: (id: string, timeStep: number) => Promise<unknown>;
-  meshPolyhedraPolyhedronAttributeColorMap: (id: string) => string | undefined;
-  meshPolyhedraPolyhedronAttributeStoredConfig: (
-    id: string,
-    name: string | undefined,
-    item: number | undefined,
-  ) => AttributeStoredConfig;
-  setMeshPolyhedraPolyhedronAttribute: (id: string, input: ValidAttributeInput) => Promise<unknown>;
-  setMeshPolyhedraPolyhedronAttributeName: (id: string, name: string) => Promise<unknown>;
-  setMeshPolyhedraPolyhedronAttributeItem: (id: string, item: number) => Promise<unknown>;
-  setMeshPolyhedraPolyhedronAttributeRange: (
-    id: string,
-    minimum: number,
-    maximum: number,
-  ) => Promise<unknown>;
-  setMeshPolyhedraPolyhedronAttributeColorMap: (
-    id: string,
-    colorMap: string | undefined,
-  ) => Promise<unknown>;
-  meshPolyhedraPolyhedronAttributeNoDataColor: (id: string) => RGBAColor;
-  setMeshPolyhedraPolyhedronAttributeNoDataColor: (
-    id: string,
-    no_data_color: RGBAColor,
-  ) => Promise<unknown>;
-} {
+function useMeshPolyhedraPolyhedronAttributeStyle(): UseMeshPolyhedraPolyhedronAttributeStyleReturn {
   const { attributeTimeStep, setAttributeTimeStep, seriesArrayName } = useAttributeTimeStepStyle();
   const viewerStore = useViewerStore();
-  const meshPolyhedraCommonStyle = useMeshPolyhedraCommonStyle();
-  function meshPolyhedraPolyhedronAttribute(id: string): AttributeState {
-    // oxlint-disable-next-line no-unsafe-type-assertion -- coloring.polyhedron shape is defined by the data style schema.
-    return meshPolyhedraCommonStyle.meshPolyhedraColoring(id).polyhedron as AttributeState;
-  }
-  function meshPolyhedraPolyhedronAttributeStoredConfig(
-    id: string,
-    name: string | undefined,
-    item: number | undefined,
-  ): AttributeStoredConfig {
-    const { storedConfigs } = meshPolyhedraPolyhedronAttribute(id);
-    const nameConfig = name === undefined ? undefined : storedConfigs?.[name];
-    const itemConfig = item === undefined ? undefined : nameConfig?.[item];
-    if (itemConfig !== undefined) {
-      return itemConfig;
-    }
-    return {
-      minimum: undefined,
-      maximum: undefined,
-      colorMap: undefined,
-      no_data_color: DEFAULT_NO_DATA_COLOR,
-    };
-  }
-  async function mutateMeshPolyhedraPolyhedronStyle(
-    id: string,
-    values: Record<string, unknown>,
-  ): Promise<string> {
-    const result = await meshPolyhedraCommonStyle.mutateMeshPolyhedraStyle(id, {
-      coloring: {
-        polyhedron: values,
-      },
-    });
-    return result;
-  }
-  async function setMeshPolyhedraPolyhedronAttributeStoredConfig(
-    id: string,
-    name: string | undefined,
-    item: number | undefined,
-    config: Partial<AttributeStoredConfig>,
-  ): Promise<string> {
-    const result = await mutateMeshPolyhedraPolyhedronStyle(id, {
-      storedConfigs: {
-        [name ?? ""]: {
-          lastItem: item,
-          [item ?? 0]: config,
-        },
-      },
-    });
-    return result;
-  }
-  function meshPolyhedraPolyhedronAttributeName(id: string): string | undefined {
-    return meshPolyhedraPolyhedronAttribute(id).name;
-  }
-  function meshPolyhedraPolyhedronAttributeLastItem(id: string, name: string | undefined): number {
-    const { storedConfigs } = meshPolyhedraPolyhedronAttribute(id);
-    const nameConfig = name === undefined ? undefined : storedConfigs?.[name];
-    if (nameConfig !== undefined) {
-      return nameConfig.lastItem;
-    }
-    return 0;
-  }
-  function meshPolyhedraPolyhedronAttributeItem(id: string): number {
-    const { item, name } = meshPolyhedraPolyhedronAttribute(id);
-    return item ?? meshPolyhedraPolyhedronAttributeLastItem(id, name);
-  }
+  const {
+    meshPolyhedraPolyhedronAttribute,
+    meshPolyhedraPolyhedronAttributeName,
+    meshPolyhedraPolyhedronAttributeLastItem,
+    meshPolyhedraPolyhedronAttributeItem,
+    meshPolyhedraPolyhedronAttributeStoredConfig,
+  } = useMeshPolyhedraPolyhedronAttributeConfig();
+  const {
+    meshPolyhedraPolyhedronAttributeRange,
+    meshPolyhedraPolyhedronAttributeColorMap,
+    meshPolyhedraPolyhedronAttributeNoDataColor,
+  } = useMeshPolyhedraPolyhedronAttributeConfigValues();
+  const { mutateMeshPolyhedraPolyhedronStyle, setMeshPolyhedraPolyhedronAttributeStoredConfig } =
+    useMeshPolyhedraPolyhedronAttributeConfigWriter();
   function meshPolyhedraPolyhedronAttributeTimeStep(id: string): number | undefined {
     return attributeTimeStep(
       id,
@@ -237,14 +123,6 @@ function useMeshPolyhedraPolyhedronAttributeStyle(): {
     });
     return applyPolyhedronAttribute(id);
   }
-  function meshPolyhedraPolyhedronAttributeRange(
-    id: string,
-  ): [number | undefined, number | undefined] {
-    const name = meshPolyhedraPolyhedronAttributeName(id);
-    const item = meshPolyhedraPolyhedronAttributeItem(id);
-    const storedConfig = meshPolyhedraPolyhedronAttributeStoredConfig(id, name, item);
-    return [storedConfig.minimum, storedConfig.maximum];
-  }
   async function setMeshPolyhedraPolyhedronAttributeTimeStep(
     id: string,
     timeStep: number,
@@ -269,12 +147,6 @@ function useMeshPolyhedraPolyhedronAttributeStyle(): {
     });
     return applyPolyhedronAttribute(id);
   }
-  function meshPolyhedraPolyhedronAttributeColorMap(id: string): string | undefined {
-    const name = meshPolyhedraPolyhedronAttributeName(id);
-    const item = meshPolyhedraPolyhedronAttributeItem(id);
-    const storedConfig = meshPolyhedraPolyhedronAttributeStoredConfig(id, name, item);
-    return storedConfig.colorMap;
-  }
   async function setMeshPolyhedraPolyhedronAttributeColorMap(
     id: string,
     colorMap: string | undefined,
@@ -286,12 +158,6 @@ function useMeshPolyhedraPolyhedronAttributeStyle(): {
     });
     return applyPolyhedronAttribute(id);
   }
-  function meshPolyhedraPolyhedronAttributeNoDataColor(id: string): RGBAColor {
-    const name = meshPolyhedraPolyhedronAttributeName(id);
-    const item = meshPolyhedraPolyhedronAttributeItem(id);
-    const storedConfig = meshPolyhedraPolyhedronAttributeStoredConfig(id, name, item);
-    return storedConfig.no_data_color;
-  }
   async function setMeshPolyhedraPolyhedronAttributeNoDataColor(
     id: string,
     no_data_color: RGBAColor,
@@ -322,4 +188,5 @@ function useMeshPolyhedraPolyhedronAttributeStyle(): {
     setMeshPolyhedraPolyhedronAttributeNoDataColor,
   };
 }
-export { isMeshPolyhedraPolyhedronAttributeValid, useMeshPolyhedraPolyhedronAttributeStyle };
+export { useMeshPolyhedraPolyhedronAttributeStyle };
+export { isMeshPolyhedraPolyhedronAttributeValid } from "./polyhedron_attribute";
diff --git a/internal/stores/data_style/mesh/polyhedra/polyhedron_attribute.ts b/internal/stores/data_style/mesh/polyhedra/polyhedron_attribute.ts
new file mode 100644
index 000000000..400e44885
--- /dev/null
+++ b/internal/stores/data_style/mesh/polyhedra/polyhedron_attribute.ts
@@ -0,0 +1,82 @@
+import type { RGBAColor } from "@ogw_front/utils/default_styles/constants";
+
+interface AttributeStoredConfig {
+  minimum: number | undefined;
+  maximum: number | undefined;
+  colorMap: string | undefined;
+  no_data_color: RGBAColor;
+}
+
+interface AttributeState {
+  name?: string;
+  item?: number;
+  storedConfigs?: Record<string, { lastItem: number } & Record<string, AttributeStoredConfig>>;
+}
+
+interface AttributeInput {
+  name: string | undefined;
+  item: number | undefined;
+  minimum: number | undefined;
+  maximum: number | undefined;
+  colorMap: string | undefined;
+  no_data_color?: RGBAColor;
+}
+
+interface ValidAttributeInput {
+  name: string;
+  item: number;
+  minimum: number;
+  maximum: number;
+  colorMap: string;
+  no_data_color?: RGBAColor;
+}
+
+function isMeshPolyhedraPolyhedronAttributeValid(
+  input: AttributeInput,
+): input is ValidAttributeInput {
+  return (
+    input.name !== undefined &&
+    input.item !== undefined &&
+    input.minimum !== undefined &&
+    input.maximum !== undefined &&
+    input.colorMap !== undefined
+  );
+}
+
+interface UseMeshPolyhedraPolyhedronAttributeStyleReturn {
+  meshPolyhedraPolyhedronAttributeName: (id: string) => string | undefined;
+  meshPolyhedraPolyhedronAttributeItem: (id: string) => number;
+  meshPolyhedraPolyhedronAttributeRange: (id: string) => [number | undefined, number | undefined];
+  meshPolyhedraPolyhedronAttributeTimeStep: (id: string) => number | undefined;
+  setMeshPolyhedraPolyhedronAttributeTimeStep: (id: string, timeStep: number) => Promise<unknown>;
+  meshPolyhedraPolyhedronAttributeColorMap: (id: string) => string | undefined;
+  meshPolyhedraPolyhedronAttributeStoredConfig: (
+    id: string,
+    name: string | undefined,
+    item: number | undefined,
+  ) => AttributeStoredConfig;
+  setMeshPolyhedraPolyhedronAttribute: (id: string, input: ValidAttributeInput) => Promise<unknown>;
+  setMeshPolyhedraPolyhedronAttributeName: (id: string, name: string) => Promise<unknown>;
+  setMeshPolyhedraPolyhedronAttributeItem: (id: string, item: number) => Promise<unknown>;
+  setMeshPolyhedraPolyhedronAttributeRange: (
+    id: string,
+    minimum: number,
+    maximum: number,
+  ) => Promise<unknown>;
+  setMeshPolyhedraPolyhedronAttributeColorMap: (
+    id: string,
+    colorMap: string | undefined,
+  ) => Promise<unknown>;
+  meshPolyhedraPolyhedronAttributeNoDataColor: (id: string) => RGBAColor;
+  setMeshPolyhedraPolyhedronAttributeNoDataColor: (
+    id: string,
+    no_data_color: RGBAColor,
+  ) => Promise<unknown>;
+}
+export { isMeshPolyhedraPolyhedronAttributeValid };
+export type {
+  AttributeStoredConfig,
+  AttributeState,
+  ValidAttributeInput,
+  UseMeshPolyhedraPolyhedronAttributeStyleReturn,
+};
diff --git a/internal/stores/data_style/mesh/polyhedra/polyhedron_config.ts b/internal/stores/data_style/mesh/polyhedra/polyhedron_config.ts
new file mode 100644
index 000000000..203e111c3
--- /dev/null
+++ b/internal/stores/data_style/mesh/polyhedra/polyhedron_config.ts
@@ -0,0 +1,157 @@
+import type { AttributeState, AttributeStoredConfig } from "./polyhedron_attribute";
+import { DEFAULT_NO_DATA_COLOR, type RGBAColor } from "@ogw_front/utils/default_styles/constants";
+
+// Local imports
+import { useMeshPolyhedraCommonStyle } from "./common";
+
+interface UseMeshPolyhedraPolyhedronAttributeConfigReturn {
+  meshPolyhedraPolyhedronAttribute: (id: string) => AttributeState;
+  meshPolyhedraPolyhedronAttributeName: (id: string) => string | undefined;
+  meshPolyhedraPolyhedronAttributeLastItem: (id: string, name: string | undefined) => number;
+  meshPolyhedraPolyhedronAttributeItem: (id: string) => number;
+  meshPolyhedraPolyhedronAttributeStoredConfig: (
+    id: string,
+    name: string | undefined,
+    item: number | undefined,
+  ) => AttributeStoredConfig;
+}
+
+interface UseMeshPolyhedraPolyhedronAttributeConfigWriterReturn {
+  mutateMeshPolyhedraPolyhedronStyle: (
+    id: string,
+    values: Record<string, unknown>,
+  ) => Promise<string>;
+  setMeshPolyhedraPolyhedronAttributeStoredConfig: (
+    id: string,
+    name: string | undefined,
+    item: number | undefined,
+    config: Partial<AttributeStoredConfig>,
+  ) => Promise<string>;
+}
+
+function useMeshPolyhedraPolyhedronAttributeConfig(): UseMeshPolyhedraPolyhedronAttributeConfigReturn {
+  const meshPolyhedraCommonStyle = useMeshPolyhedraCommonStyle();
+  function meshPolyhedraPolyhedronAttribute(id: string): AttributeState {
+    // oxlint-disable-next-line no-unsafe-type-assertion -- coloring.polyhedron shape is defined by the data style schema.
+    return meshPolyhedraCommonStyle.meshPolyhedraColoring(id).polyhedron as AttributeState;
+  }
+  function meshPolyhedraPolyhedronAttributeStoredConfig(
+    id: string,
+    name: string | undefined,
+    item: number | undefined,
+  ): AttributeStoredConfig {
+    const { storedConfigs } = meshPolyhedraPolyhedronAttribute(id);
+    const nameConfig = name === undefined ? undefined : storedConfigs?.[name];
+    const itemConfig = item === undefined ? undefined : nameConfig?.[item];
+    if (itemConfig !== undefined) {
+      return itemConfig;
+    }
+    return {
+      minimum: undefined,
+      maximum: undefined,
+      colorMap: undefined,
+      no_data_color: DEFAULT_NO_DATA_COLOR,
+    };
+  }
+  function meshPolyhedraPolyhedronAttributeName(id: string): string | undefined {
+    return meshPolyhedraPolyhedronAttribute(id).name;
+  }
+  function meshPolyhedraPolyhedronAttributeLastItem(id: string, name: string | undefined): number {
+    const { storedConfigs } = meshPolyhedraPolyhedronAttribute(id);
+    const nameConfig = name === undefined ? undefined : storedConfigs?.[name];
+    if (nameConfig !== undefined) {
+      return nameConfig.lastItem;
+    }
+    return 0;
+  }
+  function meshPolyhedraPolyhedronAttributeItem(id: string): number {
+    const { item, name } = meshPolyhedraPolyhedronAttribute(id);
+    return item ?? meshPolyhedraPolyhedronAttributeLastItem(id, name);
+  }
+  return {
+    meshPolyhedraPolyhedronAttribute,
+    meshPolyhedraPolyhedronAttributeName,
+    meshPolyhedraPolyhedronAttributeLastItem,
+    meshPolyhedraPolyhedronAttributeItem,
+    meshPolyhedraPolyhedronAttributeStoredConfig,
+  };
+}
+
+interface UseMeshPolyhedraPolyhedronAttributeConfigValuesReturn {
+  meshPolyhedraPolyhedronAttributeRange: (id: string) => [number | undefined, number | undefined];
+  meshPolyhedraPolyhedronAttributeColorMap: (id: string) => string | undefined;
+  meshPolyhedraPolyhedronAttributeNoDataColor: (id: string) => RGBAColor;
+}
+
+function useMeshPolyhedraPolyhedronAttributeConfigValues(): UseMeshPolyhedraPolyhedronAttributeConfigValuesReturn {
+  const {
+    meshPolyhedraPolyhedronAttributeName,
+    meshPolyhedraPolyhedronAttributeItem,
+    meshPolyhedraPolyhedronAttributeStoredConfig,
+  } = useMeshPolyhedraPolyhedronAttributeConfig();
+  function meshPolyhedraPolyhedronAttributeRange(
+    id: string,
+  ): [number | undefined, number | undefined] {
+    const name = meshPolyhedraPolyhedronAttributeName(id);
+    const item = meshPolyhedraPolyhedronAttributeItem(id);
+    const storedConfig = meshPolyhedraPolyhedronAttributeStoredConfig(id, name, item);
+    return [storedConfig.minimum, storedConfig.maximum];
+  }
+  function meshPolyhedraPolyhedronAttributeColorMap(id: string): string | undefined {
+    const name = meshPolyhedraPolyhedronAttributeName(id);
+    const item = meshPolyhedraPolyhedronAttributeItem(id);
+    const storedConfig = meshPolyhedraPolyhedronAttributeStoredConfig(id, name, item);
+    return storedConfig.colorMap;
+  }
+  function meshPolyhedraPolyhedronAttributeNoDataColor(id: string): RGBAColor {
+    const name = meshPolyhedraPolyhedronAttributeName(id);
+    const item = meshPolyhedraPolyhedronAttributeItem(id);
+    const storedConfig = meshPolyhedraPolyhedronAttributeStoredConfig(id, name, item);
+    return storedConfig.no_data_color;
+  }
+  return {
+    meshPolyhedraPolyhedronAttributeRange,
+    meshPolyhedraPolyhedronAttributeColorMap,
+    meshPolyhedraPolyhedronAttributeNoDataColor,
+  };
+}
+
+function useMeshPolyhedraPolyhedronAttributeConfigWriter(): UseMeshPolyhedraPolyhedronAttributeConfigWriterReturn {
+  const meshPolyhedraCommonStyle = useMeshPolyhedraCommonStyle();
+  async function mutateMeshPolyhedraPolyhedronStyle(
+    id: string,
+    values: Record<string, unknown>,
+  ): Promise<string> {
+    const result = await meshPolyhedraCommonStyle.mutateMeshPolyhedraStyle(id, {
+      coloring: {
+        polyhedron: values,
+      },
+    });
+    return result;
+  }
+  async function setMeshPolyhedraPolyhedronAttributeStoredConfig(
+    id: string,
+    name: string | undefined,
+    item: number | undefined,
+    config: Partial<AttributeStoredConfig>,
+  ): Promise<string> {
+    const result = await mutateMeshPolyhedraPolyhedronStyle(id, {
+      storedConfigs: {
+        [name ?? ""]: {
+          lastItem: item,
+          [item ?? 0]: config,
+        },
+      },
+    });
+    return result;
+  }
+  return {
+    mutateMeshPolyhedraPolyhedronStyle,
+    setMeshPolyhedraPolyhedronAttributeStoredConfig,
+  };
+}
+export {
+  useMeshPolyhedraPolyhedronAttributeConfig,
+  useMeshPolyhedraPolyhedronAttributeConfigValues,
+  useMeshPolyhedraPolyhedronAttributeConfigWriter,
+};
diff --git a/internal/stores/data_style/mesh/polyhedra/vertex.ts b/internal/stores/data_style/mesh/polyhedra/vertex.ts
index 5391ae961..e70fe4369 100644
--- a/internal/stores/data_style/mesh/polyhedra/vertex.ts
+++ b/internal/stores/data_style/mesh/polyhedra/vertex.ts
@@ -4,9 +4,18 @@ import back_schemas from "@geode/opengeodeweb-back/opengeodeweb_back_typed_schem
 import viewer_schemas from "@geode/opengeodeweb-viewer/opengeodeweb_viewer_typed_schemas.js";
 
 // Local imports
+import {
+  type UseMeshPolyhedraVertexAttributeStyleReturn,
+  type ValidAttributeInput,
+  isMeshPolyhedraVertexAttributeValid,
+} from "./vertex_attribute";
+import {
+  useMeshPolyhedraVertexAttributeConfig,
+  useMeshPolyhedraVertexAttributeConfigValues,
+  useMeshPolyhedraVertexAttributeConfigWriter,
+} from "./vertex_config";
 import { getRGBPointsFromPreset } from "@ogw_front/utils/colormap";
 import { useAttributeTimeStepStyle } from "@ogw_internal/stores/data_style/time_step";
-import { useMeshPolyhedraCommonStyle } from "./common";
 import { useViewerStore } from "@ogw_front/stores/viewer";
 
 // Local constants
@@ -14,147 +23,24 @@ const attributeNamesSchema = back_schemas.opengeodeweb_back.vertex_attribute_nam
 const meshPolyhedraVertexAttributeSchemas =
   viewer_schemas.opengeodeweb_viewer.mesh.polyhedra.attribute.vertex;
 
-interface AttributeStoredConfig {
-  minimum: number | undefined;
-  maximum: number | undefined;
-  colorMap: string | undefined;
-  no_data_color: RGBAColor;
-}
-
-interface AttributeState {
-  name?: string;
-  item?: number;
-  storedConfigs?: Record<string, { lastItem: number } & Record<string, AttributeStoredConfig>>;
-}
-
-interface AttributeInput {
-  name: string | undefined;
-  item: number | undefined;
-  minimum: number | undefined;
-  maximum: number | undefined;
-  colorMap: string | undefined;
-  no_data_color?: RGBAColor;
-}
-
-interface ValidAttributeInput {
-  name: string;
-  item: number;
-  minimum: number;
-  maximum: number;
-  colorMap: string;
-  no_data_color?: RGBAColor;
-}
-
-function isMeshPolyhedraVertexAttributeValid(input: AttributeInput): input is ValidAttributeInput {
-  return (
-    input.name !== undefined &&
-    input.item !== undefined &&
-    input.minimum !== undefined &&
-    input.maximum !== undefined &&
-    input.colorMap !== undefined
-  );
-}
-
-interface UseMeshPolyhedraVertexAttributeStyleReturn {
-  meshPolyhedraVertexAttributeName: (id: string) => string | undefined;
-  meshPolyhedraVertexAttributeItem: (id: string) => number;
-  meshPolyhedraVertexAttributeRange: (id: string) => [number | undefined, number | undefined];
-  meshPolyhedraVertexAttributeTimeStep: (id: string) => number | undefined;
-  setMeshPolyhedraVertexAttributeTimeStep: (id: string, timeStep: number) => Promise<unknown>;
-  meshPolyhedraVertexAttributeColorMap: (id: string) => string | undefined;
-  meshPolyhedraVertexAttributeStoredConfig: (
-    id: string,
-    name: string | undefined,
-    item: number | undefined,
-  ) => AttributeStoredConfig;
-  setMeshPolyhedraVertexAttribute: (id: string, input: ValidAttributeInput) => Promise<unknown>;
-  setMeshPolyhedraVertexAttributeName: (id: string, name: string) => Promise<unknown>;
-  setMeshPolyhedraVertexAttributeItem: (id: string, item: number) => Promise<unknown>;
-  setMeshPolyhedraVertexAttributeRange: (
-    id: string,
-    minimum: number,
-    maximum: number,
-  ) => Promise<unknown>;
-  setMeshPolyhedraVertexAttributeColorMap: (
-    id: string,
-    colorMap: string | undefined,
-  ) => Promise<unknown>;
-  meshPolyhedraVertexAttributeNoDataColor: (id: string) => RGBAColor;
-  setMeshPolyhedraVertexAttributeNoDataColor: (
-    id: string,
-    no_data_color: RGBAColor,
-  ) => Promise<unknown>;
-}
-
 // oxlint-disable-next-line max-lines-per-function
 function useMeshPolyhedraVertexAttributeStyle(): UseMeshPolyhedraVertexAttributeStyleReturn {
   const { attributeTimeStep, setAttributeTimeStep, seriesArrayName } = useAttributeTimeStepStyle();
   const viewerStore = useViewerStore();
-  const meshPolyhedraCommonStyle = useMeshPolyhedraCommonStyle();
-  function meshPolyhedraVertexAttribute(id: string): AttributeState {
-    // oxlint-disable-next-line no-unsafe-type-assertion -- coloring.vertex shape is defined by the data style schema.
-    return meshPolyhedraCommonStyle.meshPolyhedraColoring(id).vertex as AttributeState;
-  }
-  function meshPolyhedraVertexAttributeStoredConfig(
-    id: string,
-    name: string | undefined,
-    item: number | undefined,
-  ): AttributeStoredConfig {
-    const { storedConfigs } = meshPolyhedraVertexAttribute(id);
-    const nameConfig = name === undefined ? undefined : storedConfigs?.[name];
-    const itemConfig = item === undefined ? undefined : nameConfig?.[item];
-    if (itemConfig !== undefined) {
-      return itemConfig;
-    }
-    return {
-      minimum: undefined,
-      maximum: undefined,
-      colorMap: undefined,
-      no_data_color: DEFAULT_NO_DATA_COLOR,
-    };
-  }
-  async function mutateMeshPolyhedraVertexStyle(
-    id: string,
-    values: Record<string, unknown>,
-  ): Promise<string> {
-    const result = await meshPolyhedraCommonStyle.mutateMeshPolyhedraStyle(id, {
-      coloring: {
-        vertex: values,
-      },
-    });
-    return result;
-  }
-  async function setMeshPolyhedraVertexAttributeStoredConfig(
-    id: string,
-    name: string | undefined,
-    item: number | undefined,
-    config: Partial<AttributeStoredConfig>,
-  ): Promise<string> {
-    const result = await mutateMeshPolyhedraVertexStyle(id, {
-      storedConfigs: {
-        [name ?? ""]: {
-          lastItem: item,
-          [item ?? 0]: config,
-        },
-      },
-    });
-    return result;
-  }
-  function meshPolyhedraVertexAttributeName(id: string): string | undefined {
-    return meshPolyhedraVertexAttribute(id).name;
-  }
-  function meshPolyhedraVertexAttributeLastItem(id: string, name: string | undefined): number {
-    const { storedConfigs } = meshPolyhedraVertexAttribute(id);
-    const nameConfig = name === undefined ? undefined : storedConfigs?.[name];
-    if (nameConfig !== undefined) {
-      return nameConfig.lastItem;
-    }
-    return 0;
-  }
-  function meshPolyhedraVertexAttributeItem(id: string): number {
-    const { item, name } = meshPolyhedraVertexAttribute(id);
-    return item ?? meshPolyhedraVertexAttributeLastItem(id, name);
-  }
+  const {
+    meshPolyhedraVertexAttribute,
+    meshPolyhedraVertexAttributeName,
+    meshPolyhedraVertexAttributeLastItem,
+    meshPolyhedraVertexAttributeItem,
+    meshPolyhedraVertexAttributeStoredConfig,
+  } = useMeshPolyhedraVertexAttributeConfig();
+  const {
+    meshPolyhedraVertexAttributeRange,
+    meshPolyhedraVertexAttributeColorMap,
+    meshPolyhedraVertexAttributeNoDataColor,
+  } = useMeshPolyhedraVertexAttributeConfigValues();
+  const { mutateMeshPolyhedraVertexStyle, setMeshPolyhedraVertexAttributeStoredConfig } =
+    useMeshPolyhedraVertexAttributeConfigWriter();
   function meshPolyhedraVertexAttributeTimeStep(id: string): number | undefined {
     return attributeTimeStep(id, attributeNamesSchema.$id, meshPolyhedraVertexAttribute(id).name);
   }
@@ -227,12 +113,6 @@ function useMeshPolyhedraVertexAttributeStyle(): UseMeshPolyhedraVertexAttribute
     });
     return applyVertexAttribute(id);
   }
-  function meshPolyhedraVertexAttributeRange(id: string): [number | undefined, number | undefined] {
-    const name = meshPolyhedraVertexAttributeName(id);
-    const item = meshPolyhedraVertexAttributeItem(id);
-    const storedConfig = meshPolyhedraVertexAttributeStoredConfig(id, name, item);
-    return [storedConfig.minimum, storedConfig.maximum];
-  }
   async function setMeshPolyhedraVertexAttributeTimeStep(
     id: string,
     timeStep: number,
@@ -257,12 +137,6 @@ function useMeshPolyhedraVertexAttributeStyle(): UseMeshPolyhedraVertexAttribute
     });
     return applyVertexAttribute(id);
   }
-  function meshPolyhedraVertexAttributeColorMap(id: string): string | undefined {
-    const name = meshPolyhedraVertexAttributeName(id);
-    const item = meshPolyhedraVertexAttributeItem(id);
-    const storedConfig = meshPolyhedraVertexAttributeStoredConfig(id, name, item);
-    return storedConfig.colorMap;
-  }
   async function setMeshPolyhedraVertexAttributeColorMap(
     id: string,
     colorMap: string | undefined,
@@ -274,12 +148,6 @@ function useMeshPolyhedraVertexAttributeStyle(): UseMeshPolyhedraVertexAttribute
     });
     return applyVertexAttribute(id);
   }
-  function meshPolyhedraVertexAttributeNoDataColor(id: string): RGBAColor {
-    const name = meshPolyhedraVertexAttributeName(id);
-    const item = meshPolyhedraVertexAttributeItem(id);
-    const storedConfig = meshPolyhedraVertexAttributeStoredConfig(id, name, item);
-    return storedConfig.no_data_color;
-  }
   async function setMeshPolyhedraVertexAttributeNoDataColor(
     id: string,
     no_data_color: RGBAColor,
@@ -310,4 +178,5 @@ function useMeshPolyhedraVertexAttributeStyle(): UseMeshPolyhedraVertexAttribute
     setMeshPolyhedraVertexAttributeNoDataColor,
   };
 }
-export { isMeshPolyhedraVertexAttributeValid, useMeshPolyhedraVertexAttributeStyle };
+export { useMeshPolyhedraVertexAttributeStyle };
+export { isMeshPolyhedraVertexAttributeValid } from "./vertex_attribute";
diff --git a/internal/stores/data_style/mesh/polyhedra/vertex_attribute.ts b/internal/stores/data_style/mesh/polyhedra/vertex_attribute.ts
new file mode 100644
index 000000000..9af740980
--- /dev/null
+++ b/internal/stores/data_style/mesh/polyhedra/vertex_attribute.ts
@@ -0,0 +1,80 @@
+import type { RGBAColor } from "@ogw_front/utils/default_styles/constants";
+
+interface AttributeStoredConfig {
+  minimum: number | undefined;
+  maximum: number | undefined;
+  colorMap: string | undefined;
+  no_data_color: RGBAColor;
+}
+
+interface AttributeState {
+  name?: string;
+  item?: number;
+  storedConfigs?: Record<string, { lastItem: number } & Record<string, AttributeStoredConfig>>;
+}
+
+interface AttributeInput {
+  name: string | undefined;
+  item: number | undefined;
+  minimum: number | undefined;
+  maximum: number | undefined;
+  colorMap: string | undefined;
+  no_data_color?: RGBAColor;
+}
+
+interface ValidAttributeInput {
+  name: string;
+  item: number;
+  minimum: number;
+  maximum: number;
+  colorMap: string;
+  no_data_color?: RGBAColor;
+}
+
+function isMeshPolyhedraVertexAttributeValid(input: AttributeInput): input is ValidAttributeInput {
+  return (
+    input.name !== undefined &&
+    input.item !== undefined &&
+    input.minimum !== undefined &&
+    input.maximum !== undefined &&
+    input.colorMap !== undefined
+  );
+}
+
+interface UseMeshPolyhedraVertexAttributeStyleReturn {
+  meshPolyhedraVertexAttributeName: (id: string) => string | undefined;
+  meshPolyhedraVertexAttributeItem: (id: string) => number;
+  meshPolyhedraVertexAttributeRange: (id: string) => [number | undefined, number | undefined];
+  meshPolyhedraVertexAttributeTimeStep: (id: string) => number | undefined;
+  setMeshPolyhedraVertexAttributeTimeStep: (id: string, timeStep: number) => Promise<unknown>;
+  meshPolyhedraVertexAttributeColorMap: (id: string) => string | undefined;
+  meshPolyhedraVertexAttributeStoredConfig: (
+    id: string,
+    name: string | undefined,
+    item: number | undefined,
+  ) => AttributeStoredConfig;
+  setMeshPolyhedraVertexAttribute: (id: string, input: ValidAttributeInput) => Promise<unknown>;
+  setMeshPolyhedraVertexAttributeName: (id: string, name: string) => Promise<unknown>;
+  setMeshPolyhedraVertexAttributeItem: (id: string, item: number) => Promise<unknown>;
+  setMeshPolyhedraVertexAttributeRange: (
+    id: string,
+    minimum: number,
+    maximum: number,
+  ) => Promise<unknown>;
+  setMeshPolyhedraVertexAttributeColorMap: (
+    id: string,
+    colorMap: string | undefined,
+  ) => Promise<unknown>;
+  meshPolyhedraVertexAttributeNoDataColor: (id: string) => RGBAColor;
+  setMeshPolyhedraVertexAttributeNoDataColor: (
+    id: string,
+    no_data_color: RGBAColor,
+  ) => Promise<unknown>;
+}
+export { isMeshPolyhedraVertexAttributeValid };
+export type {
+  AttributeStoredConfig,
+  AttributeState,
+  ValidAttributeInput,
+  UseMeshPolyhedraVertexAttributeStyleReturn,
+};
diff --git a/internal/stores/data_style/mesh/polyhedra/vertex_config.ts b/internal/stores/data_style/mesh/polyhedra/vertex_config.ts
new file mode 100644
index 000000000..ee0e53aaa
--- /dev/null
+++ b/internal/stores/data_style/mesh/polyhedra/vertex_config.ts
@@ -0,0 +1,152 @@
+import type { AttributeState, AttributeStoredConfig } from "./vertex_attribute";
+import { DEFAULT_NO_DATA_COLOR, type RGBAColor } from "@ogw_front/utils/default_styles/constants";
+
+// Local imports
+import { useMeshPolyhedraCommonStyle } from "./common";
+
+interface UseMeshPolyhedraVertexAttributeConfigReturn {
+  meshPolyhedraVertexAttribute: (id: string) => AttributeState;
+  meshPolyhedraVertexAttributeName: (id: string) => string | undefined;
+  meshPolyhedraVertexAttributeLastItem: (id: string, name: string | undefined) => number;
+  meshPolyhedraVertexAttributeItem: (id: string) => number;
+  meshPolyhedraVertexAttributeStoredConfig: (
+    id: string,
+    name: string | undefined,
+    item: number | undefined,
+  ) => AttributeStoredConfig;
+}
+
+interface UseMeshPolyhedraVertexAttributeConfigWriterReturn {
+  mutateMeshPolyhedraVertexStyle: (id: string, values: Record<string, unknown>) => Promise<string>;
+  setMeshPolyhedraVertexAttributeStoredConfig: (
+    id: string,
+    name: string | undefined,
+    item: number | undefined,
+    config: Partial<AttributeStoredConfig>,
+  ) => Promise<string>;
+}
+
+function useMeshPolyhedraVertexAttributeConfig(): UseMeshPolyhedraVertexAttributeConfigReturn {
+  const meshPolyhedraCommonStyle = useMeshPolyhedraCommonStyle();
+  function meshPolyhedraVertexAttribute(id: string): AttributeState {
+    // oxlint-disable-next-line no-unsafe-type-assertion -- coloring.vertex shape is defined by the data style schema.
+    return meshPolyhedraCommonStyle.meshPolyhedraColoring(id).vertex as AttributeState;
+  }
+  function meshPolyhedraVertexAttributeStoredConfig(
+    id: string,
+    name: string | undefined,
+    item: number | undefined,
+  ): AttributeStoredConfig {
+    const { storedConfigs } = meshPolyhedraVertexAttribute(id);
+    const nameConfig = name === undefined ? undefined : storedConfigs?.[name];
+    const itemConfig = item === undefined ? undefined : nameConfig?.[item];
+    if (itemConfig !== undefined) {
+      return itemConfig;
+    }
+    return {
+      minimum: undefined,
+      maximum: undefined,
+      colorMap: undefined,
+      no_data_color: DEFAULT_NO_DATA_COLOR,
+    };
+  }
+  function meshPolyhedraVertexAttributeName(id: string): string | undefined {
+    return meshPolyhedraVertexAttribute(id).name;
+  }
+  function meshPolyhedraVertexAttributeLastItem(id: string, name: string | undefined): number {
+    const { storedConfigs } = meshPolyhedraVertexAttribute(id);
+    const nameConfig = name === undefined ? undefined : storedConfigs?.[name];
+    if (nameConfig !== undefined) {
+      return nameConfig.lastItem;
+    }
+    return 0;
+  }
+  function meshPolyhedraVertexAttributeItem(id: string): number {
+    const { item, name } = meshPolyhedraVertexAttribute(id);
+    return item ?? meshPolyhedraVertexAttributeLastItem(id, name);
+  }
+  return {
+    meshPolyhedraVertexAttribute,
+    meshPolyhedraVertexAttributeName,
+    meshPolyhedraVertexAttributeLastItem,
+    meshPolyhedraVertexAttributeItem,
+    meshPolyhedraVertexAttributeStoredConfig,
+  };
+}
+
+interface UseMeshPolyhedraVertexAttributeConfigValuesReturn {
+  meshPolyhedraVertexAttributeRange: (id: string) => [number | undefined, number | undefined];
+  meshPolyhedraVertexAttributeColorMap: (id: string) => string | undefined;
+  meshPolyhedraVertexAttributeNoDataColor: (id: string) => RGBAColor;
+}
+
+function useMeshPolyhedraVertexAttributeConfigValues(): UseMeshPolyhedraVertexAttributeConfigValuesReturn {
+  const {
+    meshPolyhedraVertexAttributeName,
+    meshPolyhedraVertexAttributeItem,
+    meshPolyhedraVertexAttributeStoredConfig,
+  } = useMeshPolyhedraVertexAttributeConfig();
+  function meshPolyhedraVertexAttributeRange(id: string): [number | undefined, number | undefined] {
+    const name = meshPolyhedraVertexAttributeName(id);
+    const item = meshPolyhedraVertexAttributeItem(id);
+    const storedConfig = meshPolyhedraVertexAttributeStoredConfig(id, name, item);
+    return [storedConfig.minimum, storedConfig.maximum];
+  }
+  function meshPolyhedraVertexAttributeColorMap(id: string): string | undefined {
+    const name = meshPolyhedraVertexAttributeName(id);
+    const item = meshPolyhedraVertexAttributeItem(id);
+    const storedConfig = meshPolyhedraVertexAttributeStoredConfig(id, name, item);
+    return storedConfig.colorMap;
+  }
+  function meshPolyhedraVertexAttributeNoDataColor(id: string): RGBAColor {
+    const name = meshPolyhedraVertexAttributeName(id);
+    const item = meshPolyhedraVertexAttributeItem(id);
+    const storedConfig = meshPolyhedraVertexAttributeStoredConfig(id, name, item);
+    return storedConfig.no_data_color;
+  }
+  return {
+    meshPolyhedraVertexAttributeRange,
+    meshPolyhedraVertexAttributeColorMap,
+    meshPolyhedraVertexAttributeNoDataColor,
+  };
+}
+
+function useMeshPolyhedraVertexAttributeConfigWriter(): UseMeshPolyhedraVertexAttributeConfigWriterReturn {
+  const meshPolyhedraCommonStyle = useMeshPolyhedraCommonStyle();
+  async function mutateMeshPolyhedraVertexStyle(
+    id: string,
+    values: Record<string, unknown>,
+  ): Promise<string> {
+    const result = await meshPolyhedraCommonStyle.mutateMeshPolyhedraStyle(id, {
+      coloring: {
+        vertex: values,
+      },
+    });
+    return result;
+  }
+  async function setMeshPolyhedraVertexAttributeStoredConfig(
+    id: string,
+    name: string | undefined,
+    item: number | undefined,
+    config: Partial<AttributeStoredConfig>,
+  ): Promise<string> {
+    const result = await mutateMeshPolyhedraVertexStyle(id, {
+      storedConfigs: {
+        [name ?? ""]: {
+          lastItem: item,
+          [item ?? 0]: config,
+        },
+      },
+    });
+    return result;
+  }
+  return {
+    mutateMeshPolyhedraVertexStyle,
+    setMeshPolyhedraVertexAttributeStoredConfig,
+  };
+}
+export {
+  useMeshPolyhedraVertexAttributeConfig,
+  useMeshPolyhedraVertexAttributeConfigValues,
+  useMeshPolyhedraVertexAttributeConfigWriter,
+};
diff --git a/internal/stores/data_style/model/blocks/apply_coloring.ts b/internal/stores/data_style/model/blocks/apply_coloring.ts
new file mode 100644
index 000000000..1ab1c6dd0
--- /dev/null
+++ b/internal/stores/data_style/model/blocks/apply_coloring.ts
@@ -0,0 +1,173 @@
+import type { AttributeGroup, ColorGroup } from "./coloring_groups";
+import {
+  isModelBlocksPolyhedronAttributeValid,
+  type useModelBlocksPolyhedronAttribute,
+} from "./polyhedron";
+import { isModelBlocksVertexAttributeValid, type useModelBlocksVertexAttribute } from "./vertex";
+import type { useModelBlocksColor } from "./color";
+
+type ColorStyle = ReturnType<typeof useModelBlocksColor>;
+type VertexAttributeStyle = ReturnType<typeof useModelBlocksVertexAttribute>;
+type PolyhedronAttributeStyle = ReturnType<typeof useModelBlocksPolyhedronAttribute>;
+
+function applyModelBlocksConstantColoring(
+  modelId: string,
+  type_blocks_ids: string[],
+  modelColorStyle: ColorStyle,
+): Promise<unknown>[] {
+  const colorGroups: Record<string, ColorGroup> = {};
+  for (const block_id of type_blocks_ids) {
+    const color = modelColorStyle.modelBlockColor(modelId, block_id);
+    const color_key = JSON.stringify(color);
+    colorGroups[color_key] ??= { color, blocks_ids: [] };
+    colorGroups[color_key].blocks_ids.push(block_id);
+  }
+  return Object.values(colorGroups).map(async ({ color, blocks_ids: ids }) => {
+    const result = await modelColorStyle.setModelBlocksColor(modelId, ids, color, "constant");
+    return result;
+  });
+}
+
+function groupModelBlocksVertexAttributes(
+  modelId: string,
+  type_blocks_ids: string[],
+  modelBlocksVertexAttribute: VertexAttributeStyle,
+): Record<string, AttributeGroup> {
+  const vertexGroups: Record<string, AttributeGroup> = {};
+  for (const block_id of type_blocks_ids) {
+    const name = modelBlocksVertexAttribute.modelBlocksVertexAttributeName(modelId, block_id);
+    const item = modelBlocksVertexAttribute.modelBlocksVertexAttributeItem(modelId, block_id);
+    const [minimum, maximum] = modelBlocksVertexAttribute.modelBlocksVertexAttributeRange(
+      modelId,
+      block_id,
+    );
+    const colorMap = modelBlocksVertexAttribute.modelBlocksVertexAttributeColorMap(
+      modelId,
+      block_id,
+    );
+    const no_data_color = modelBlocksVertexAttribute.modelBlocksVertexAttributeNoDataColor(
+      modelId,
+      block_id,
+    );
+    const attribute = {
+      name,
+      item,
+      minimum,
+      maximum,
+      colorMap,
+      no_data_color,
+    };
+    if (!isModelBlocksVertexAttributeValid(attribute)) {
+      continue;
+    }
+    const key = [name, item, colorMap, minimum, maximum, JSON.stringify(no_data_color)].join("_");
+    vertexGroups[key] ??= { ...attribute, blocks_ids: [] };
+    vertexGroups[key].blocks_ids.push(block_id);
+  }
+  return vertexGroups;
+}
+
+function applyModelBlocksVertexColoring(
+  modelId: string,
+  type_blocks_ids: string[],
+  modelBlocksVertexAttribute: VertexAttributeStyle,
+): Promise<unknown>[] {
+  const vertexGroups = groupModelBlocksVertexAttributes(
+    modelId,
+    type_blocks_ids,
+    modelBlocksVertexAttribute,
+  );
+  return Object.values(vertexGroups).map(
+    async ({ name, item, minimum, maximum, colorMap, no_data_color, blocks_ids: ids }) => {
+      const result = await modelBlocksVertexAttribute.setModelBlocksVertexAttribute(modelId, ids, {
+        name,
+        item,
+        minimum,
+        maximum,
+        colorMap,
+        no_data_color,
+      });
+      return result;
+    },
+  );
+}
+
+function groupModelBlocksPolyhedronAttributes(
+  modelId: string,
+  type_blocks_ids: string[],
+  modelBlocksPolyhedronAttribute: PolyhedronAttributeStyle,
+): Record<string, AttributeGroup> {
+  const polyhedronGroups: Record<string, AttributeGroup> = {};
+  for (const block_id of type_blocks_ids) {
+    const name = modelBlocksPolyhedronAttribute.modelBlocksPolyhedronAttributeName(
+      modelId,
+      block_id,
+    );
+    const item = modelBlocksPolyhedronAttribute.modelBlocksPolyhedronAttributeItem(
+      modelId,
+      block_id,
+    );
+    const [minimum, maximum] = modelBlocksPolyhedronAttribute.modelBlocksPolyhedronAttributeRange(
+      modelId,
+      block_id,
+    );
+    const colorMap = modelBlocksPolyhedronAttribute.modelBlocksPolyhedronAttributeColorMap(
+      modelId,
+      block_id,
+    );
+    const no_data_color = modelBlocksPolyhedronAttribute.modelBlocksPolyhedronAttributeNoDataColor(
+      modelId,
+      block_id,
+    );
+    const attribute = {
+      name,
+      item,
+      minimum,
+      maximum,
+      colorMap,
+      no_data_color,
+    };
+    if (!isModelBlocksPolyhedronAttributeValid(attribute)) {
+      continue;
+    }
+    const key = [name, item, colorMap, minimum, maximum, JSON.stringify(no_data_color)].join("_");
+    polyhedronGroups[key] ??= { ...attribute, blocks_ids: [] };
+    polyhedronGroups[key].blocks_ids.push(block_id);
+  }
+  return polyhedronGroups;
+}
+
+function applyModelBlocksPolyhedronColoring(
+  modelId: string,
+  type_blocks_ids: string[],
+  modelBlocksPolyhedronAttribute: PolyhedronAttributeStyle,
+): Promise<unknown>[] {
+  const polyhedronGroups = groupModelBlocksPolyhedronAttributes(
+    modelId,
+    type_blocks_ids,
+    modelBlocksPolyhedronAttribute,
+  );
+  return Object.values(polyhedronGroups).map(
+    async ({ name, item, minimum, maximum, colorMap, no_data_color, blocks_ids: ids }) => {
+      const result = await modelBlocksPolyhedronAttribute.setModelBlocksPolyhedronAttribute(
+        modelId,
+        ids,
+        {
+          name,
+          item,
+          minimum,
+          maximum,
+          colorMap,
+          no_data_color,
+        },
+      );
+      return result;
+    },
+  );
+}
+
+export {
+  applyModelBlocksConstantColoring,
+  applyModelBlocksVertexColoring,
+  applyModelBlocksPolyhedronColoring,
+};
diff --git a/internal/stores/data_style/model/blocks/coloring_groups.ts b/internal/stores/data_style/model/blocks/coloring_groups.ts
new file mode 100644
index 000000000..20484b1a3
--- /dev/null
+++ b/internal/stores/data_style/model/blocks/coloring_groups.ts
@@ -0,0 +1,18 @@
+import type { RGBAColor } from "@ogw_front/utils/default_styles/constants";
+
+interface ColorGroup {
+  color: RGBAColor | undefined;
+  blocks_ids: string[];
+}
+
+interface AttributeGroup {
+  name: string;
+  item: number;
+  minimum: number;
+  maximum: number;
+  colorMap: string;
+  no_data_color?: RGBAColor;
+  blocks_ids: string[];
+}
+
+export type { AttributeGroup, ColorGroup };
diff --git a/internal/stores/data_style/model/blocks/index.ts b/internal/stores/data_style/model/blocks/index.ts
index 6bbd48f71..4336f9fcc 100644
--- a/internal/stores/data_style/model/blocks/index.ts
+++ b/internal/stores/data_style/model/blocks/index.ts
@@ -1,31 +1,17 @@
 import {
-  isModelBlocksPolyhedronAttributeValid,
-  useModelBlocksPolyhedronAttribute,
-} from "./polyhedron";
-import { isModelBlocksVertexAttributeValid, useModelBlocksVertexAttribute } from "./vertex";
-import type { RGBAColor } from "@ogw_front/utils/default_styles/constants";
+  applyModelBlocksConstantColoring,
+  applyModelBlocksPolyhedronColoring,
+  applyModelBlocksVertexColoring,
+} from "./apply_coloring";
 import { useDataStore } from "@ogw_front/stores/data";
 import { useModelBlocksColor } from "./color";
 import { useModelBlocksCommonStyle } from "./common";
 import { useModelBlocksEdgesStyle } from "./edges";
 import { useModelBlocksPointsStyle } from "./points";
+import { useModelBlocksPolyhedronAttribute } from "./polyhedron";
+import { useModelBlocksVertexAttribute } from "./vertex";
 import { useModelBlocksVisibility } from "./visibility";
 
-interface ColorGroup {
-  color: RGBAColor | undefined;
-  blocks_ids: string[];
-}
-
-interface AttributeGroup {
-  name: string;
-  item: number;
-  minimum: number;
-  maximum: number;
-  colorMap: string;
-  no_data_color?: RGBAColor;
-  blocks_ids: string[];
-}
-
 async function setModelBlocksDefaultStyle(_id: string): Promise<void> {
   // Placeholder
 }
@@ -91,137 +77,23 @@ export function useModelBlocksStyle(): UseModelBlocksStyleReturn {
 
     for (const [type, type_blocks_ids] of Object.entries(activeColoringGroups)) {
       if (type === "constant") {
-        const colorGroups: Record<string, ColorGroup> = {};
-        for (const block_id of type_blocks_ids) {
-          const color = modelColorStyle.modelBlockColor(modelId, block_id);
-          const color_key = JSON.stringify(color);
-          colorGroups[color_key] ??= { color, blocks_ids: [] };
-          colorGroups[color_key].blocks_ids.push(block_id);
-        }
         coloringPromises.push(
-          ...Object.values(colorGroups).map(async ({ color, blocks_ids: ids }) => {
-            const result = await modelColorStyle.setModelBlocksColor(
-              modelId,
-              ids,
-              color,
-              "constant",
-            );
-            return result;
-          }),
+          ...applyModelBlocksConstantColoring(modelId, type_blocks_ids, modelColorStyle),
         );
       } else if (type === "random") {
         coloringPromises.push(
           modelColorStyle.setModelBlocksColor(modelId, type_blocks_ids, undefined, "random"),
         );
       } else if (type === "vertex") {
-        const vertexGroups: Record<string, AttributeGroup> = {};
-        for (const block_id of type_blocks_ids) {
-          const name = modelBlocksVertexAttribute.modelBlocksVertexAttributeName(modelId, block_id);
-          const item = modelBlocksVertexAttribute.modelBlocksVertexAttributeItem(modelId, block_id);
-          const [minimum, maximum] = modelBlocksVertexAttribute.modelBlocksVertexAttributeRange(
-            modelId,
-            block_id,
-          );
-          const colorMap = modelBlocksVertexAttribute.modelBlocksVertexAttributeColorMap(
-            modelId,
-            block_id,
-          );
-          const no_data_color = modelBlocksVertexAttribute.modelBlocksVertexAttributeNoDataColor(
-            modelId,
-            block_id,
-          );
-          const attribute = {
-            name,
-            item,
-            minimum,
-            maximum,
-            colorMap,
-            no_data_color,
-          };
-          if (!isModelBlocksVertexAttributeValid(attribute)) {
-            continue;
-          }
-          const key = [name, item, colorMap, minimum, maximum, JSON.stringify(no_data_color)].join(
-            "_",
-          );
-          vertexGroups[key] ??= { ...attribute, blocks_ids: [] };
-          vertexGroups[key].blocks_ids.push(block_id);
-        }
         coloringPromises.push(
-          ...Object.values(vertexGroups).map(
-            async ({ name, item, minimum, maximum, colorMap, no_data_color, blocks_ids: ids }) => {
-              const result = await modelBlocksVertexAttribute.setModelBlocksVertexAttribute(
-                modelId,
-                ids,
-                {
-                  name,
-                  item,
-                  minimum,
-                  maximum,
-                  colorMap,
-                  no_data_color,
-                },
-              );
-              return result;
-            },
-          ),
+          ...applyModelBlocksVertexColoring(modelId, type_blocks_ids, modelBlocksVertexAttribute),
         );
       } else if (type === "polyhedron") {
-        const polyhedronGroups: Record<string, AttributeGroup> = {};
-        for (const block_id of type_blocks_ids) {
-          const name = modelBlocksPolyhedronAttribute.modelBlocksPolyhedronAttributeName(
-            modelId,
-            block_id,
-          );
-          const item = modelBlocksPolyhedronAttribute.modelBlocksPolyhedronAttributeItem(
-            modelId,
-            block_id,
-          );
-          const [minimum, maximum] =
-            modelBlocksPolyhedronAttribute.modelBlocksPolyhedronAttributeRange(modelId, block_id);
-          const colorMap = modelBlocksPolyhedronAttribute.modelBlocksPolyhedronAttributeColorMap(
-            modelId,
-            block_id,
-          );
-          const no_data_color =
-            modelBlocksPolyhedronAttribute.modelBlocksPolyhedronAttributeNoDataColor(
-              modelId,
-              block_id,
-            );
-          const attribute = {
-            name,
-            item,
-            minimum,
-            maximum,
-            colorMap,
-            no_data_color,
-          };
-          if (!isModelBlocksPolyhedronAttributeValid(attribute)) {
-            continue;
-          }
-          const key = [name, item, colorMap, minimum, maximum, JSON.stringify(no_data_color)].join(
-            "_",
-          );
-          polyhedronGroups[key] ??= { ...attribute, blocks_ids: [] };
-          polyhedronGroups[key].blocks_ids.push(block_id);
-        }
         coloringPromises.push(
-          ...Object.values(polyhedronGroups).map(
-            async ({ name, item, minimum, maximum, colorMap, no_data_color, blocks_ids: ids }) => {
-              const result = await modelBlocksPolyhedronAttribute.setModelBlocksPolyhedronAttribute(
-                modelId,
-                ids,
-                {
-                  name,
-                  item,
-                  minimum,
-                  maximum,
-                  colorMap,
-                  no_data_color,
-                },
-              );
-              return result;
-            },
+          ...applyModelBlocksPolyhedronColoring(
+            modelId,
+            type_blocks_ids,
+            modelBlocksPolyhedronAttribute,
           ),
         );
       }
diff --git a/internal/stores/data_style/model/common.ts b/internal/stores/data_style/model/common.ts
index 938fc8458..4f6f25b28 100644
--- a/internal/stores/data_style/model/common.ts
+++ b/internal/stores/data_style/model/common.ts
@@ -1,24 +1,16 @@
-import type { Dexie, Table } from "dexie";
-import type {
-  ModelComponentStyle,
-  ModelComponentTypeStyle,
-  StyleValues,
-} from "@ogw_internal/stores/data_style/types.js";
+import {
+  type ComponentStyleUpdate,
+  useModelComponentStyleMutations,
+  useModelComponentsPerComponentStyleMutation,
+  useModelComponentsStyleMutation,
+} from "./common_mutations";
 import type { ParamsOf } from "@ogw_shared/utils/types.js";
 import type { RGBAColor } from "@ogw_front/utils/default_styles/constants";
-import { database } from "@ogw_internal/database/database";
-import merge from "lodash/merge";
+import type { StyleValues } from "@ogw_internal/stores/data_style/types.js";
 import { useDataStore } from "@ogw_front/stores/data";
-import { useDataStyleState } from "@ogw_internal/stores/data_style/state";
 import { useViewerStore } from "@ogw_front/stores/viewer";
 import type viewer_schemas from "@geode/opengeodeweb-viewer/opengeodeweb_viewer_typed_schemas.js";
 
-// The underlying dexie tables use compound array keys ([id_model, id_component] /
-// [id_model, type]) but the shared `database` proxy types every table as
-// Table<Record<string, unknown>, string>. Cast locally to the real key shape.
-type ComponentTable = Table<ModelComponentStyle, [string, string]>;
-type ComponentTypeTable = Table<ModelComponentTypeStyle, [string, string]>;
-
 type ModelComponentSchemas = (typeof viewer_schemas)["opengeodeweb_viewer"]["model"][
   | "corners"
   | "lines"
@@ -32,11 +24,6 @@ function isModelColorMode(value: string): value is ModelColorMode {
   return value === "constant" || value === "random";
 }
 
-interface ComponentStyleUpdate {
-  id_component: string;
-  values: StyleValues;
-}
-
 interface UseModelCommonStyleReturn {
   mutateComponentStyle: (
     id_model: string,
@@ -77,105 +64,9 @@ interface UseModelCommonStyleReturn {
 export function useModelCommonStyle(): UseModelCommonStyleReturn {
   const dataStore = useDataStore();
   const viewerStore = useViewerStore();
-  const dataStyleState = useDataStyleState();
-  const model_component_datastyle_db =
-    // oxlint-disable-next-line no-unsafe-type-assertion -- compound-key table cast; see comment above.
-    database.model_component_datastyle as unknown as ComponentTable;
-  const model_component_type_datastyle_db =
-    // oxlint-disable-next-line no-unsafe-type-assertion -- compound-key table cast; see comment above.
-    database.model_component_type_datastyle as unknown as ComponentTypeTable;
-
-  async function mutateComponentStyle(
-    id_model: string,
-    id_component: string,
-    values: StyleValues,
-  ): Promise<unknown> {
-    dataStyleState.updateComponentStyleCache(id_model, id_component, values);
-    const key: [string, string] = [id_model, id_component];
-    const entry: ModelComponentStyle = (await model_component_datastyle_db.get(key)) ?? {
-      id_model,
-      id_component,
-    };
-    merge(entry, values);
-    return model_component_datastyle_db.put(structuredClone(toRaw(entry)));
-  }
-
-  async function mutateModelComponentTypeStyle(
-    id_model: string,
-    type: string,
-    values: StyleValues,
-  ): Promise<void> {
-    dataStyleState.updateModelComponentTypeStyleCache(id_model, type, values);
-    // oxlint-disable-next-line no-unsafe-type-assertion -- the shared database proxy types every table as Dexie; see comment above.
-    await (database as unknown as Dexie).transaction(
-      "rw",
-      model_component_type_datastyle_db,
-      async () => {
-        const key: [string, string] = [id_model, type];
-        const entry: ModelComponentTypeStyle = (await model_component_type_datastyle_db.get(
-          key,
-        )) ?? {
-          id_model,
-          type,
-        };
-        merge(entry, values);
-        return model_component_type_datastyle_db.put(structuredClone(toRaw(entry)));
-      },
-    );
-  }
-
-  async function mutateComponentStyles(
-    id_model: string,
-    id_components: string[],
-    values: StyleValues,
-  ): Promise<void> {
-    dataStyleState.bulkUpdateComponentStylesCache(id_model, id_components, values);
-    // oxlint-disable-next-line no-unsafe-type-assertion -- the shared database proxy types every table as Dexie; see comment above.
-    await (database as unknown as Dexie).transaction(
-      "rw",
-      model_component_datastyle_db,
-      async () => {
-        const keys: [string, string][] = id_components.map((id_component) => [
-          id_model,
-          id_component,
-        ]);
-        const existing = await model_component_datastyle_db.bulkGet(keys);
-        const updates = id_components.map((id_component, index) => {
-          const style: ModelComponentStyle = existing[index] ?? { id_model, id_component };
-          merge(style, values);
-          return toRaw(style);
-        });
-
-        return model_component_datastyle_db.bulkPut(structuredClone(updates));
-      },
-    );
-  }
-
-  async function bulkMutateComponentStylesPerComponent(
-    id_model: string,
-    component_updates: ComponentStyleUpdate[],
-  ): Promise<void> {
-    dataStyleState.bulkUpdateComponentStyleCache(id_model, component_updates);
-    // oxlint-disable-next-line no-unsafe-type-assertion -- the shared database proxy types every table as Dexie; see comment above.
-    await (database as unknown as Dexie).transaction(
-      "rw",
-      model_component_datastyle_db,
-      async () => {
-        const keys: [string, string][] = component_updates.map((update) => [
-          id_model,
-          update.id_component,
-        ]);
-        const existing = await model_component_datastyle_db.bulkGet(keys);
-        const updates = component_updates.map(({ id_component, values }, index) => {
-          const style: ModelComponentStyle = existing[index] ?? { id_model, id_component };
-          merge(style, values);
-          return toRaw(style);
-        });
-        return model_component_datastyle_db.bulkPut(structuredClone(updates));
-      },
-    );
-  }
-
+  const { mutateComponentStyle, mutateModelComponentTypeStyle } = useModelComponentStyleMutations();
+  const { mutateComponentStyles } = useModelComponentsStyleMutation();
+  const { bulkMutateComponentStylesPerComponent } = useModelComponentsPerComponentStyleMutation();
   async function setModelTypeColor(
     id: string,
     component_ids: string[],
diff --git a/internal/stores/data_style/model/common_mutations.ts b/internal/stores/data_style/model/common_mutations.ts
new file mode 100644
index 000000000..82c7b9db2
--- /dev/null
+++ b/internal/stores/data_style/model/common_mutations.ts
@@ -0,0 +1,184 @@
+import type { Dexie, Table } from "dexie";
+import type {
+  ModelComponentStyle,
+  ModelComponentTypeStyle,
+  StyleValues,
+} from "@ogw_internal/stores/data_style/types.js";
+import { database } from "@ogw_internal/database/database";
+import merge from "lodash/merge";
+import { useDataStyleState } from "@ogw_internal/stores/data_style/state";
+
+// The underlying dexie tables use compound array keys ([id_model, id_component] /
+// [id_model, type]) but the shared `database` proxy types every table as
+// Table<Record<string, unknown>, string>. Cast locally to the real key shape.
+type ComponentTable = Table<ModelComponentStyle, [string, string]>;
+type ComponentTypeTable = Table<ModelComponentTypeStyle, [string, string]>;
+
+interface ComponentStyleUpdate {
+  id_component: string;
+  values: StyleValues;
+}
+
+function componentDatastyleTable(): ComponentTable {
+  // oxlint-disable-next-line no-unsafe-type-assertion -- compound-key table cast; see comment above.
+  return database.model_component_datastyle as unknown as ComponentTable;
+}
+
+function componentTypeDatastyleTable(): ComponentTypeTable {
+  // oxlint-disable-next-line no-unsafe-type-assertion -- compound-key table cast; see comment above.
+  return database.model_component_type_datastyle as unknown as ComponentTypeTable;
+}
+
+interface UseModelComponentStyleMutationsReturn {
+  mutateComponentStyle: (
+    id_model: string,
+    id_component: string,
+    values: StyleValues,
+  ) => Promise<unknown>;
+  mutateModelComponentTypeStyle: (
+    id_model: string,
+    type: string,
+    values: StyleValues,
+  ) => Promise<void>;
+}
+
+interface UseModelComponentsStyleMutationReturn {
+  mutateComponentStyles: (
+    id_model: string,
+    id_components: string[],
+    values: StyleValues,
+  ) => Promise<void>;
+}
+
+interface UseModelComponentsPerComponentStyleMutationReturn {
+  bulkMutateComponentStylesPerComponent: (
+    id_model: string,
+    component_updates: ComponentStyleUpdate[],
+  ) => Promise<void>;
+}
+
+function useModelComponentStyleMutations(): UseModelComponentStyleMutationsReturn {
+  const dataStyleState = useDataStyleState();
+  const model_component_datastyle_db = componentDatastyleTable();
+  const model_component_type_datastyle_db = componentTypeDatastyleTable();
+
+  async function mutateComponentStyle(
+    id_model: string,
+    id_component: string,
+    values: StyleValues,
+  ): Promise<unknown> {
+    dataStyleState.updateComponentStyleCache(id_model, id_component, values);
+    const key: [string, string] = [id_model, id_component];
+    const entry: ModelComponentStyle = (await model_component_datastyle_db.get(key)) ?? {
+      id_model,
+      id_component,
+    };
+    merge(entry, values);
+    return model_component_datastyle_db.put(structuredClone(toRaw(entry)));
+  }
+
+  async function mutateModelComponentTypeStyle(
+    id_model: string,
+    type: string,
+    values: StyleValues,
+  ): Promise<void> {
+    dataStyleState.updateModelComponentTypeStyleCache(id_model, type, values);
+    // oxlint-disable-next-line no-unsafe-type-assertion -- the shared database proxy types every table as Dexie; see comment above.
+    await (database as unknown as Dexie).transaction(
+      "rw",
+      model_component_type_datastyle_db,
+      async () => {
+        const key: [string, string] = [id_model, type];
+        const entry: ModelComponentTypeStyle = (await model_component_type_datastyle_db.get(
+          key,
+        )) ?? {
+          id_model,
+          type,
+        };
+        merge(entry, values);
+        return model_component_type_datastyle_db.put(structuredClone(toRaw(entry)));
+      },
+    );
+  }
+
+  return {
+    mutateComponentStyle,
+    mutateModelComponentTypeStyle,
+  };
+}
+
+function useModelComponentsStyleMutation(): UseModelComponentsStyleMutationReturn {
+  const dataStyleState = useDataStyleState();
+  const model_component_datastyle_db = componentDatastyleTable();
+
+  async function mutateComponentStyles(
+    id_model: string,
+    id_components: string[],
+    values: StyleValues,
+  ): Promise<void> {
+    dataStyleState.bulkUpdateComponentStylesCache(id_model, id_components, values);
+    // oxlint-disable-next-line no-unsafe-type-assertion -- the shared database proxy types every table as Dexie; see comment above.
+    await (database as unknown as Dexie).transaction(
+      "rw",
+      model_component_datastyle_db,
+      async () => {
+        const keys: [string, string][] = id_components.map((id_component) => [
+          id_model,
+          id_component,
+        ]);
+        const existing = await model_component_datastyle_db.bulkGet(keys);
+        const updates = id_components.map((id_component, index) => {
+          const style: ModelComponentStyle = existing[index] ?? { id_model, id_component };
+          merge(style, values);
+          return toRaw(style);
+        });
+
+        return model_component_datastyle_db.bulkPut(structuredClone(updates));
+      },
+    );
+  }
+
+  return {
+    mutateComponentStyles,
+  };
+}
+
+function useModelComponentsPerComponentStyleMutation(): UseModelComponentsPerComponentStyleMutationReturn {
+  const dataStyleState = useDataStyleState();
+  const model_component_datastyle_db = componentDatastyleTable();
+
+  async function bulkMutateComponentStylesPerComponent(
+    id_model: string,
+    component_updates: ComponentStyleUpdate[],
+  ): Promise<void> {
+    dataStyleState.bulkUpdateComponentStyleCache(id_model, component_updates);
+    // oxlint-disable-next-line no-unsafe-type-assertion -- the shared database proxy types every table as Dexie; see comment above.
+    await (database as unknown as Dexie).transaction(
+      "rw",
+      model_component_datastyle_db,
+      async () => {
+        const keys: [string, string][] = component_updates.map((update) => [
+          id_model,
+          update.id_component,
+        ]);
+        const existing = await model_component_datastyle_db.bulkGet(keys);
+        const updates = component_updates.map(({ id_component, values }, index) => {
+          const style: ModelComponentStyle = existing[index] ?? { id_model, id_component };
+          merge(style, values);
+          return toRaw(style);
+        });
+        return model_component_datastyle_db.bulkPut(structuredClone(updates));
+      },
+    );
+  }
+
+  return {
+    bulkMutateComponentStylesPerComponent,
+  };
+}
+export {
+  useModelComponentStyleMutations,
+  useModelComponentsStyleMutation,
+  useModelComponentsPerComponentStyleMutation,
+};
+export type { ComponentStyleUpdate };
diff --git a/internal/stores/data_style/model/lines/apply_coloring.ts b/internal/stores/data_style/model/lines/apply_coloring.ts
new file mode 100644
index 000000000..ca569c90b
--- /dev/null
+++ b/internal/stores/data_style/model/lines/apply_coloring.ts
@@ -0,0 +1,154 @@
+import type { AttributeGroup, ColorGroup } from "./coloring_groups";
+import { isModelLinesEdgeAttributeValid, type useModelLinesEdgeAttribute } from "./edge";
+import { isModelLinesVertexAttributeValid, type useModelLinesVertexAttribute } from "./vertex";
+import type { useModelLinesColor } from "./color";
+
+type ColorStyle = ReturnType<typeof useModelLinesColor>;
+type VertexAttributeStyle = ReturnType<typeof useModelLinesVertexAttribute>;
+type EdgeAttributeStyle = ReturnType<typeof useModelLinesEdgeAttribute>;
+
+function applyModelLinesConstantColoring(
+  modelId: string,
+  type_lines_ids: string[],
+  modelColorStyle: ColorStyle,
+): Promise<unknown>[] {
+  const colorGroups: Record<string, ColorGroup> = {};
+  for (const line_id of type_lines_ids) {
+    const color = modelColorStyle.modelLineColor(modelId, line_id);
+    const color_key = JSON.stringify(color);
+    colorGroups[color_key] ??= { color, lines_ids: [] };
+    colorGroups[color_key].lines_ids.push(line_id);
+  }
+  return Object.values(colorGroups).map(async ({ color, lines_ids: ids }) => {
+    const result = await modelColorStyle.setModelLinesColor(modelId, ids, color, "constant");
+    return result;
+  });
+}
+
+function groupModelLinesVertexAttributes(
+  modelId: string,
+  type_lines_ids: string[],
+  modelLinesVertexAttribute: VertexAttributeStyle,
+): Record<string, AttributeGroup> {
+  const vertexGroups: Record<string, AttributeGroup> = {};
+  for (const line_id of type_lines_ids) {
+    const name = modelLinesVertexAttribute.modelLinesVertexAttributeName(modelId, line_id);
+    const item = modelLinesVertexAttribute.modelLinesVertexAttributeItem(modelId, line_id);
+    const [minimum, maximum] = modelLinesVertexAttribute.modelLinesVertexAttributeRange(
+      modelId,
+      line_id,
+    );
+    const colorMap = modelLinesVertexAttribute.modelLinesVertexAttributeColorMap(modelId, line_id);
+    const no_data_color = modelLinesVertexAttribute.modelLinesVertexAttributeNoDataColor(
+      modelId,
+      line_id,
+    );
+    const attribute = {
+      name,
+      item,
+      minimum,
+      maximum,
+      colorMap,
+      no_data_color,
+    };
+    if (!isModelLinesVertexAttributeValid(attribute)) {
+      continue;
+    }
+    const key = [name, item, colorMap, minimum, maximum, JSON.stringify(no_data_color)].join("_");
+    vertexGroups[key] ??= { ...attribute, lines_ids: [] };
+    vertexGroups[key].lines_ids.push(line_id);
+  }
+  return vertexGroups;
+}
+
+function applyModelLinesVertexColoring(
+  modelId: string,
+  type_lines_ids: string[],
+  modelLinesVertexAttribute: VertexAttributeStyle,
+): Promise<unknown>[] {
+  const vertexGroups = groupModelLinesVertexAttributes(
+    modelId,
+    type_lines_ids,
+    modelLinesVertexAttribute,
+  );
+  return Object.values(vertexGroups).map(
+    async ({ name, item, minimum, maximum, colorMap, no_data_color, lines_ids: ids }) => {
+      const result = await modelLinesVertexAttribute.setModelLinesVertexAttribute(modelId, ids, {
+        name,
+        item,
+        minimum,
+        maximum,
+        colorMap,
+        no_data_color,
+      });
+      return result;
+    },
+  );
+}
+
+function groupModelLinesEdgeAttributes(
+  modelId: string,
+  type_lines_ids: string[],
+  modelLinesEdgeAttribute: EdgeAttributeStyle,
+): Record<string, AttributeGroup> {
+  const edgeGroups: Record<string, AttributeGroup> = {};
+  for (const line_id of type_lines_ids) {
+    const name = modelLinesEdgeAttribute.modelLinesEdgeAttributeName(modelId, line_id);
+    const item = modelLinesEdgeAttribute.modelLinesEdgeAttributeItem(modelId, line_id);
+    const [minimum, maximum] = modelLinesEdgeAttribute.modelLinesEdgeAttributeRange(
+      modelId,
+      line_id,
+    );
+    const colorMap = modelLinesEdgeAttribute.modelLinesEdgeAttributeColorMap(modelId, line_id);
+    const no_data_color = modelLinesEdgeAttribute.modelLinesEdgeAttributeNoDataColor(
+      modelId,
+      line_id,
+    );
+    const attribute = {
+      name,
+      item,
+      minimum,
+      maximum,
+      colorMap,
+      no_data_color,
+    };
+    if (!isModelLinesEdgeAttributeValid(attribute)) {
+      continue;
+    }
+    const key = [name, item, colorMap, minimum, maximum, JSON.stringify(no_data_color)].join("_");
+    edgeGroups[key] ??= { ...attribute, lines_ids: [] };
+    edgeGroups[key].lines_ids.push(line_id);
+  }
+  return edgeGroups;
+}
+
+function applyModelLinesEdgeColoring(
+  modelId: string,
+  type_lines_ids: string[],
+  modelLinesEdgeAttribute: EdgeAttributeStyle,
+): Promise<unknown>[] {
+  const edgeGroups = groupModelLinesEdgeAttributes(
+    modelId,
+    type_lines_ids,
+    modelLinesEdgeAttribute,
+  );
+  return Object.values(edgeGroups).map(
+    async ({ name, item, minimum, maximum, colorMap, no_data_color, lines_ids: ids }) => {
+      const result = await modelLinesEdgeAttribute.setModelLinesEdgeAttribute(modelId, ids, {
+        name,
+        item,
+        minimum,
+        maximum,
+        colorMap,
+        no_data_color,
+      });
+      return result;
+    },
+  );
+}
+
+export {
+  applyModelLinesConstantColoring,
+  applyModelLinesVertexColoring,
+  applyModelLinesEdgeColoring,
+};
diff --git a/internal/stores/data_style/model/lines/coloring_groups.ts b/internal/stores/data_style/model/lines/coloring_groups.ts
new file mode 100644
index 000000000..9162e7833
--- /dev/null
+++ b/internal/stores/data_style/model/lines/coloring_groups.ts
@@ -0,0 +1,18 @@
+import type { RGBAColor } from "@ogw_front/utils/default_styles/constants";
+
+interface ColorGroup {
+  color: RGBAColor | undefined;
+  lines_ids: string[];
+}
+
+interface AttributeGroup {
+  name: string;
+  item: number;
+  minimum: number;
+  maximum: number;
+  colorMap: string;
+  no_data_color?: RGBAColor;
+  lines_ids: string[];
+}
+
+export type { AttributeGroup, ColorGroup };
diff --git a/internal/stores/data_style/model/lines/index.ts b/internal/stores/data_style/model/lines/index.ts
index cdc27fa88..d14eb5ae3 100644
--- a/internal/stores/data_style/model/lines/index.ts
+++ b/internal/stores/data_style/model/lines/index.ts
@@ -1,27 +1,16 @@
-import { isModelLinesEdgeAttributeValid, useModelLinesEdgeAttribute } from "./edge";
-import { isModelLinesVertexAttributeValid, useModelLinesVertexAttribute } from "./vertex";
-import type { RGBAColor } from "@ogw_front/utils/default_styles/constants";
+import {
+  applyModelLinesConstantColoring,
+  applyModelLinesEdgeColoring,
+  applyModelLinesVertexColoring,
+} from "./apply_coloring";
 import { useDataStore } from "@ogw_front/stores/data";
 import { useModelLinesColor } from "./color";
 import { useModelLinesCommonStyle } from "./common";
+import { useModelLinesEdgeAttribute } from "./edge";
 import { useModelLinesPointsStyle } from "./points";
+import { useModelLinesVertexAttribute } from "./vertex";
 import { useModelLinesVisibility } from "./visibility";
 
-interface ColorGroup {
-  color: RGBAColor | undefined;
-  lines_ids: string[];
-}
-
-interface AttributeGroup {
-  name: string;
-  item: number;
-  minimum: number;
-  maximum: number;
-  colorMap: string;
-  no_data_color?: RGBAColor;
-  lines_ids: string[];
-}
-
 async function setModelLinesDefaultStyle(_id: string): Promise<void> {
   // Placeholder
 }
@@ -82,133 +71,20 @@ export function useModelLinesStyle(): ReturnType<typeof useModelLinesCommonStyle
 
     for (const [type, type_lines_ids] of Object.entries(activeColoringGroups)) {
       if (type === "constant") {
-        const colorGroups: Record<string, ColorGroup> = {};
-        for (const line_id of type_lines_ids) {
-          const color = modelColorStyle.modelLineColor(modelId, line_id);
-          const color_key = JSON.stringify(color);
-          colorGroups[color_key] ??= { color, lines_ids: [] };
-          colorGroups[color_key].lines_ids.push(line_id);
-        }
         coloringPromises.push(
-          ...Object.values(colorGroups).map(async ({ color, lines_ids: ids }) => {
-            const result = await modelColorStyle.setModelLinesColor(
-              modelId,
-              ids,
-              color,
-              "constant",
-            );
-            return result;
-          }),
+          ...applyModelLinesConstantColoring(modelId, type_lines_ids, modelColorStyle),
         );
       } else if (type === "random") {
         coloringPromises.push(
           modelColorStyle.setModelLinesColor(modelId, type_lines_ids, undefined, "random"),
         );
       } else if (type === "vertex") {
-        const vertexGroups: Record<string, AttributeGroup> = {};
-        for (const line_id of type_lines_ids) {
-          const name = modelLinesVertexAttribute.modelLinesVertexAttributeName(modelId, line_id);
-          const item = modelLinesVertexAttribute.modelLinesVertexAttributeItem(modelId, line_id);
-          const [minimum, maximum] = modelLinesVertexAttribute.modelLinesVertexAttributeRange(
-            modelId,
-            line_id,
-          );
-          const colorMap = modelLinesVertexAttribute.modelLinesVertexAttributeColorMap(
-            modelId,
-            line_id,
-          );
-          const no_data_color = modelLinesVertexAttribute.modelLinesVertexAttributeNoDataColor(
-            modelId,
-            line_id,
-          );
-          const attribute = {
-            name,
-            item,
-            minimum,
-            maximum,
-            colorMap,
-            no_data_color,
-          };
-          if (!isModelLinesVertexAttributeValid(attribute)) {
-            continue;
-          }
-          const key = [name, item, colorMap, minimum, maximum, JSON.stringify(no_data_color)].join(
-            "_",
-          );
-          vertexGroups[key] ??= { ...attribute, lines_ids: [] };
-          vertexGroups[key].lines_ids.push(line_id);
-        }
         coloringPromises.push(
-          ...Object.values(vertexGroups).map(
-            async ({ name, item, minimum, maximum, colorMap, no_data_color, lines_ids: ids }) => {
-              const result = await modelLinesVertexAttribute.setModelLinesVertexAttribute(
-                modelId,
-                ids,
-                {
-                  name,
-                  item,
-                  minimum,
-                  maximum,
-                  colorMap,
-                  no_data_color,
-                },
-              );
-              return result;
-            },
-          ),
+          ...applyModelLinesVertexColoring(modelId, type_lines_ids, modelLinesVertexAttribute),
         );
       } else if (type === "edge") {
-        const edgeGroups: Record<string, AttributeGroup> = {};
-        for (const line_id of type_lines_ids) {
-          const name = modelLinesEdgeAttribute.modelLinesEdgeAttributeName(modelId, line_id);
-          const item = modelLinesEdgeAttribute.modelLinesEdgeAttributeItem(modelId, line_id);
-          const [minimum, maximum] = modelLinesEdgeAttribute.modelLinesEdgeAttributeRange(
-            modelId,
-            line_id,
-          );
-          const colorMap = modelLinesEdgeAttribute.modelLinesEdgeAttributeColorMap(
-            modelId,
-            line_id,
-          );
-          const no_data_color = modelLinesEdgeAttribute.modelLinesEdgeAttributeNoDataColor(
-            modelId,
-            line_id,
-          );
-          const attribute = {
-            name,
-            item,
-            minimum,
-            maximum,
-            colorMap,
-            no_data_color,
-          };
-          if (!isModelLinesEdgeAttributeValid(attribute)) {
-            continue;
-          }
-          const key = [name, item, colorMap, minimum, maximum, JSON.stringify(no_data_color)].join(
-            "_",
-          );
-          edgeGroups[key] ??= { ...attribute, lines_ids: [] };
-          edgeGroups[key].lines_ids.push(line_id);
-        }
         coloringPromises.push(
-          ...Object.values(edgeGroups).map(
-            async ({ name, item, minimum, maximum, colorMap, no_data_color, lines_ids: ids }) => {
-              const result = await modelLinesEdgeAttribute.setModelLinesEdgeAttribute(
-                modelId,
-                ids,
-                {
-                  name,
-                  item,
-                  minimum,
-                  maximum,
-                  colorMap,
-                  no_data_color,
-                },
-              );
-              return result;
-            },
-          ),
+          ...applyModelLinesEdgeColoring(modelId, type_lines_ids, modelLinesEdgeAttribute),
         );
       }
     }
diff --git a/internal/stores/data_style/model/surfaces/apply_coloring.ts b/internal/stores/data_style/model/surfaces/apply_coloring.ts
new file mode 100644
index 000000000..fa6552b1b
--- /dev/null
+++ b/internal/stores/data_style/model/surfaces/apply_coloring.ts
@@ -0,0 +1,186 @@
+import type { AttributeGroup, ColorGroup } from "./coloring_groups";
+import {
+  isModelSurfacesPolygonAttributeValid,
+  type useModelSurfacesPolygonAttribute,
+} from "./polygon";
+import {
+  isModelSurfacesVertexAttributeValid,
+  type useModelSurfacesVertexAttribute,
+} from "./vertex";
+import type { useModelSurfacesColor } from "./color";
+
+type ColorStyle = ReturnType<typeof useModelSurfacesColor>;
+type VertexAttributeStyle = ReturnType<typeof useModelSurfacesVertexAttribute>;
+type PolygonAttributeStyle = ReturnType<typeof useModelSurfacesPolygonAttribute>;
+
+function applyModelSurfacesConstantColoring(
+  modelId: string,
+  type_surfaces_ids: string[],
+  modelColorStyle: ColorStyle,
+): Promise<unknown>[] {
+  const colorGroups: Record<string, ColorGroup> = {};
+  for (const surfaces_id of type_surfaces_ids) {
+    const color = modelColorStyle.modelSurfaceColor(modelId, surfaces_id);
+    const color_key = JSON.stringify(color);
+    colorGroups[color_key] ??= { color, surfaces_ids: [] };
+    colorGroups[color_key].surfaces_ids.push(surfaces_id);
+  }
+  return Object.values(colorGroups).map(async ({ color, surfaces_ids: ids }) => {
+    const result = await modelColorStyle.setModelSurfacesColor(modelId, ids, color, "constant");
+    return result;
+  });
+}
+
+function groupModelSurfacesVertexAttributes(
+  modelId: string,
+  type_surfaces_ids: string[],
+  modelSurfacesVertexAttribute: VertexAttributeStyle,
+): Record<string, AttributeGroup> {
+  const vertexGroups: Record<string, AttributeGroup> = {};
+  for (const surfaces_id of type_surfaces_ids) {
+    const name = modelSurfacesVertexAttribute.modelSurfacesVertexAttributeName(
+      modelId,
+      surfaces_id,
+    );
+    const item = modelSurfacesVertexAttribute.modelSurfacesVertexAttributeItem(
+      modelId,
+      surfaces_id,
+    );
+    const [minimum, maximum] = modelSurfacesVertexAttribute.modelSurfacesVertexAttributeRange(
+      modelId,
+      surfaces_id,
+    );
+    const colorMap = modelSurfacesVertexAttribute.modelSurfacesVertexAttributeColorMap(
+      modelId,
+      surfaces_id,
+    );
+    const no_data_color = modelSurfacesVertexAttribute.modelSurfacesVertexAttributeNoDataColor(
+      modelId,
+      surfaces_id,
+    );
+    const attribute = {
+      name,
+      item,
+      minimum,
+      maximum,
+      colorMap,
+      no_data_color,
+    };
+    if (!isModelSurfacesVertexAttributeValid(attribute)) {
+      continue;
+    }
+    const key = [name, item, colorMap, minimum, maximum, JSON.stringify(no_data_color)].join("_");
+    vertexGroups[key] ??= { ...attribute, surfaces_ids: [] };
+    vertexGroups[key].surfaces_ids.push(surfaces_id);
+  }
+  return vertexGroups;
+}
+
+function applyModelSurfacesVertexColoring(
+  modelId: string,
+  type_surfaces_ids: string[],
+  modelSurfacesVertexAttribute: VertexAttributeStyle,
+): Promise<unknown>[] {
+  const vertexGroups = groupModelSurfacesVertexAttributes(
+    modelId,
+    type_surfaces_ids,
+    modelSurfacesVertexAttribute,
+  );
+  return Object.values(vertexGroups).map(
+    async ({ name, item, minimum, maximum, colorMap, no_data_color, surfaces_ids: ids }) => {
+      const result = await modelSurfacesVertexAttribute.setModelSurfacesVertexAttribute(
+        modelId,
+        ids,
+        {
+          name,
+          item,
+          minimum,
+          maximum,
+          colorMap,
+          no_data_color,
+        },
+      );
+      return result;
+    },
+  );
+}
+
+function groupModelSurfacesPolygonAttributes(
+  modelId: string,
+  type_surfaces_ids: string[],
+  modelSurfacesPolygonAttribute: PolygonAttributeStyle,
+): Record<string, AttributeGroup> {
+  const polygonGroups: Record<string, AttributeGroup> = {};
+  for (const surfaces_id of type_surfaces_ids) {
+    const name = modelSurfacesPolygonAttribute.modelSurfacesPolygonAttributeName(
+      modelId,
+      surfaces_id,
+    );
+    const item = modelSurfacesPolygonAttribute.modelSurfacesPolygonAttributeItem(
+      modelId,
+      surfaces_id,
+    );
+    const [minimum, maximum] = modelSurfacesPolygonAttribute.modelSurfacesPolygonAttributeRange(
+      modelId,
+      surfaces_id,
+    );
+    const colorMap = modelSurfacesPolygonAttribute.modelSurfacesPolygonAttributeColorMap(
+      modelId,
+      surfaces_id,
+    );
+    const no_data_color = modelSurfacesPolygonAttribute.modelSurfacesPolygonAttributeNoDataColor(
+      modelId,
+      surfaces_id,
+    );
+    const attribute = {
+      name,
+      item,
+      minimum,
+      maximum,
+      colorMap,
+      no_data_color,
+    };
+    if (!isModelSurfacesPolygonAttributeValid(attribute)) {
+      continue;
+    }
+    const key = [name, item, colorMap, minimum, maximum, JSON.stringify(no_data_color)].join("_");
+    polygonGroups[key] ??= { ...attribute, surfaces_ids: [] };
+    polygonGroups[key].surfaces_ids.push(surfaces_id);
+  }
+  return polygonGroups;
+}
+
+function applyModelSurfacesPolygonColoring(
+  modelId: string,
+  type_surfaces_ids: string[],
+  modelSurfacesPolygonAttribute: PolygonAttributeStyle,
+): Promise<unknown>[] {
+  const polygonGroups = groupModelSurfacesPolygonAttributes(
+    modelId,
+    type_surfaces_ids,
+    modelSurfacesPolygonAttribute,
+  );
+  return Object.values(polygonGroups).map(
+    async ({ name, item, minimum, maximum, colorMap, no_data_color, surfaces_ids: ids }) => {
+      const result = await modelSurfacesPolygonAttribute.setModelSurfacesPolygonAttribute(
+        modelId,
+        ids,
+        {
+          name,
+          item,
+          minimum,
+          maximum,
+          colorMap,
+          no_data_color,
+        },
+      );
+      return result;
+    },
+  );
+}
+
+export {
+  applyModelSurfacesConstantColoring,
+  applyModelSurfacesVertexColoring,
+  applyModelSurfacesPolygonColoring,
+};
diff --git a/internal/stores/data_style/model/surfaces/coloring_groups.ts b/internal/stores/data_style/model/surfaces/coloring_groups.ts
new file mode 100644
index 000000000..1d4e89057
--- /dev/null
+++ b/internal/stores/data_style/model/surfaces/coloring_groups.ts
@@ -0,0 +1,18 @@
+import type { RGBAColor } from "@ogw_front/utils/default_styles/constants";
+
+interface ColorGroup {
+  color: RGBAColor | undefined;
+  surfaces_ids: string[];
+}
+
+interface AttributeGroup {
+  name: string;
+  item: number;
+  minimum: number;
+  maximum: number;
+  colorMap: string;
+  no_data_color?: RGBAColor;
+  surfaces_ids: string[];
+}
+
+export type { AttributeGroup, ColorGroup };
diff --git a/internal/stores/data_style/model/surfaces/index.ts b/internal/stores/data_style/model/surfaces/index.ts
index b9ae7e593..a17ffdada 100644
--- a/internal/stores/data_style/model/surfaces/index.ts
+++ b/internal/stores/data_style/model/surfaces/index.ts
@@ -1,28 +1,17 @@
-import { isModelSurfacesPolygonAttributeValid, useModelSurfacesPolygonAttribute } from "./polygon";
-import { isModelSurfacesVertexAttributeValid, useModelSurfacesVertexAttribute } from "./vertex";
-import type { RGBAColor } from "@ogw_front/utils/default_styles/constants";
+import {
+  applyModelSurfacesConstantColoring,
+  applyModelSurfacesPolygonColoring,
+  applyModelSurfacesVertexColoring,
+} from "./apply_coloring";
 import { useDataStore } from "@ogw_front/stores/data";
 import { useModelSurfacesColor } from "./color";
 import { useModelSurfacesCommonStyle } from "./common";
 import { useModelSurfacesEdgesStyle } from "./edges";
 import { useModelSurfacesPointsStyle } from "./points";
+import { useModelSurfacesPolygonAttribute } from "./polygon";
+import { useModelSurfacesVertexAttribute } from "./vertex";
 import { useModelSurfacesVisibility } from "./visibility";
 
-interface ColorGroup {
-  color: RGBAColor | undefined;
-  surfaces_ids: string[];
-}
-
-interface AttributeGroup {
-  name: string;
-  item: number;
-  minimum: number;
-  maximum: number;
-  colorMap: string;
-  no_data_color?: RGBAColor;
-  surfaces_ids: string[];
-}
-
 async function setModelSurfacesDefaultStyle(_id: string): Promise<void> {
   // Placeholder
 }
@@ -89,160 +78,27 @@ export function useModelSurfacesStyle(): UseModelSurfacesStyleReturn {
 
     for (const [type, type_surfaces_ids] of Object.entries(activeColoringGroups)) {
       if (type === "constant") {
-        const colorGroups: Record<string, ColorGroup> = {};
-        for (const surfaces_id of type_surfaces_ids) {
-          const color = modelColorStyle.modelSurfaceColor(modelId, surfaces_id);
-          const color_key = JSON.stringify(color);
-          colorGroups[color_key] ??= { color, surfaces_ids: [] };
-          colorGroups[color_key].surfaces_ids.push(surfaces_id);
-        }
         coloringPromises.push(
-          ...Object.values(colorGroups).map(async ({ color, surfaces_ids: ids }) => {
-            const result = await modelColorStyle.setModelSurfacesColor(
-              modelId,
-              ids,
-              color,
-              "constant",
-            );
-            return result;
-          }),
+          ...applyModelSurfacesConstantColoring(modelId, type_surfaces_ids, modelColorStyle),
         );
       } else if (type === "random") {
         coloringPromises.push(
           modelColorStyle.setModelSurfacesColor(modelId, type_surfaces_ids, undefined, "random"),
         );
       } else if (type === "vertex") {
-        const vertexGroups: Record<string, AttributeGroup> = {};
-        for (const surfaces_id of type_surfaces_ids) {
-          const name = modelSurfacesVertexAttribute.modelSurfacesVertexAttributeName(
-            modelId,
-            surfaces_id,
-          );
-          const item = modelSurfacesVertexAttribute.modelSurfacesVertexAttributeItem(
-            modelId,
-            surfaces_id,
-          );
-          const [minimum, maximum] = modelSurfacesVertexAttribute.modelSurfacesVertexAttributeRange(
-            modelId,
-            surfaces_id,
-          );
-          const colorMap = modelSurfacesVertexAttribute.modelSurfacesVertexAttributeColorMap(
-            modelId,
-            surfaces_id,
-          );
-          const no_data_color =
-            modelSurfacesVertexAttribute.modelSurfacesVertexAttributeNoDataColor(
-              modelId,
-              surfaces_id,
-            );
-          const attribute = {
-            name,
-            item,
-            minimum,
-            maximum,
-            colorMap,
-            no_data_color,
-          };
-          if (!isModelSurfacesVertexAttributeValid(attribute)) {
-            continue;
-          }
-          const key = [name, item, colorMap, minimum, maximum, JSON.stringify(no_data_color)].join(
-            "_",
-          );
-          vertexGroups[key] ??= { ...attribute, surfaces_ids: [] };
-          vertexGroups[key].surfaces_ids.push(surfaces_id);
-        }
         coloringPromises.push(
-          ...Object.values(vertexGroups).map(
-            async ({
-              name,
-              item,
-              minimum,
-              maximum,
-              colorMap,
-              no_data_color,
-              surfaces_ids: ids,
-            }) => {
-              const result = await modelSurfacesVertexAttribute.setModelSurfacesVertexAttribute(
-                modelId,
-                ids,
-                {
-                  name,
-                  item,
-                  minimum,
-                  maximum,
-                  colorMap,
-                  no_data_color,
-                },
-              );
-              return result;
-            },
+          ...applyModelSurfacesVertexColoring(
+            modelId,
+            type_surfaces_ids,
+            modelSurfacesVertexAttribute,
           ),
         );
       } else if (type === "polygon") {
-        const polygonGroups: Record<string, AttributeGroup> = {};
-        for (const surfaces_id of type_surfaces_ids) {
-          const name = modelSurfacesPolygonAttribute.modelSurfacesPolygonAttributeName(
-            modelId,
-            surfaces_id,
-          );
-          const item = modelSurfacesPolygonAttribute.modelSurfacesPolygonAttributeItem(
-            modelId,
-            surfaces_id,
-          );
-          const [minimum, maximum] =
-            modelSurfacesPolygonAttribute.modelSurfacesPolygonAttributeRange(modelId, surfaces_id);
-          const colorMap = modelSurfacesPolygonAttribute.modelSurfacesPolygonAttributeColorMap(
-            modelId,
-            surfaces_id,
-          );
-          const no_data_color =
-            modelSurfacesPolygonAttribute.modelSurfacesPolygonAttributeNoDataColor(
-              modelId,
-              surfaces_id,
-            );
-          const attribute = {
-            name,
-            item,
-            minimum,
-            maximum,
-            colorMap,
-            no_data_color,
-          };
-          if (!isModelSurfacesPolygonAttributeValid(attribute)) {
-            continue;
-          }
-          const key = [name, item, colorMap, minimum, maximum, JSON.stringify(no_data_color)].join(
-            "_",
-          );
-          polygonGroups[key] ??= { ...attribute, surfaces_ids: [] };
-          polygonGroups[key].surfaces_ids.push(surfaces_id);
-        }
         coloringPromises.push(
-          ...Object.values(polygonGroups).map(
-            async ({
-              name,
-              item,
-              minimum,
-              maximum,
-              colorMap,
-              no_data_color,
-              surfaces_ids: ids,
-            }) => {
-              const result = await modelSurfacesPolygonAttribute.setModelSurfacesPolygonAttribute(
-                modelId,
-                ids,
-                {
-                  name,
-                  item,
-                  minimum,
-                  maximum,
-                  colorMap,
-                  no_data_color,
-                },
-              );
-              return result;
-            },
+          ...applyModelSurfacesPolygonColoring(
+            modelId,
+            type_surfaces_ids,
+            modelSurfacesPolygonAttribute,
           ),
         );
       }
diff --git a/internal/stores/data_style/model/visibility.ts b/internal/stores/data_style/model/visibility.ts
index fcd6e7e99..0bd42a41b 100644
--- a/internal/stores/data_style/model/visibility.ts
+++ b/internal/stores/data_style/model/visibility.ts
@@ -1,3 +1,4 @@
+import { type ComponentStyleFunctions, dispatchToComponentTypes } from "./visibility_dispatch";
 import { MESH_COMPONENT_TYPES } from "@ogw_front/utils/default_styles";
 import { useDataStore } from "@ogw_front/stores/data";
 import { useDataStyleState } from "@ogw_internal/stores/data_style/state";
@@ -7,162 +8,7 @@ import { useModelSelection } from "./selection";
 import { useViewerStore } from "@ogw_front/stores/viewer";
 import viewer_schemas from "@geode/opengeodeweb-viewer/opengeodeweb_viewer_typed_schemas.js";
 
-// The four per-component-type style composables (Surface/Line/Block/Corner) each expose a different, large set of methods (color, visibility, per-attribute-kind getters/setters...). This module only cares about looking a handful of them up dynamically by name, so a precise structural type for componentStyleFunctions isn't worth modelling here; `any` keeps the dynamic dispatch table honest about that.
-// oxlint-disable-next-line no-explicit-any
-type ComponentStyleFunctions = Record<"Surface" | "Line" | "Block" | "Corner", any>;
-
-interface ModelComponent {
-  geode_id: string;
-  type: string;
-}
-
-async function callComponentStyleFunction(
-  // oxlint-disable-next-line no-explicit-any
-  target: any,
-  method: string,
-  ...args: unknown[]
-): Promise<unknown> {
-  // oxlint-disable-next-line no-unsafe-call, no-unsafe-member-access, no-unsafe-argument, no-unsafe-assignment -- ComponentStyleFunctions is deliberately dynamically typed; see comment above.
-  const result = await target[method](...args);
-  return result;
-}
-
 const model_schemas = viewer_schemas.opengeodeweb_viewer.model;
-async function getModelComponentsMap(
-  modelId: string,
-): Promise<{ allComponents: ModelComponent[]; componentsMap: Record<string, ModelComponent> }> {
-  const dataStore = useDataStore();
-  const results = await Promise.all(
-    MESH_COMPONENT_TYPES.map(async (type) => {
-      const geodeIds = await dataStore.getMeshComponentGeodeIds(modelId, type);
-      return geodeIds.map((geode_id): ModelComponent => ({
-        geode_id,
-        type,
-      }));
-    }),
-  );
-  const allComponents = results.flat();
-  return {
-    allComponents,
-    componentsMap: Object.fromEntries(
-      allComponents.map((component): [string, ModelComponent] => [component.geode_id, component]),
-    ),
-  };
-}
-async function dispatchToComponentTypes(
-  modelId: string,
-  componentIds: string[],
-  action: string,
-  { componentStyleFunctions }: { componentStyleFunctions: ComponentStyleFunctions },
-  ...args: unknown[]
-): Promise<unknown[]> {
-  const { componentsMap } = await getModelComponentsMap(modelId);
-  const idsByComponent: { Block: string[]; Surface: string[]; Line: string[]; Corner: string[] } = {
-    Block: [],
-    Surface: [],
-    Line: [],
-    Corner: [],
-  };
-  for (const id of componentIds) {
-    const type = componentsMap[id]?.type;
-    if (type !== undefined && type in idsByComponent) {
-      (idsByComponent as Record<string, string[]>)[type]?.push(id);
-    }
-  }
-  const promises: Promise<unknown>[] = [];
-  if (action === "Visibility") {
-    if (idsByComponent.Block.length > 0) {
-      promises.push(
-        callComponentStyleFunction(
-          componentStyleFunctions.Block,
-          "setModelBlocksVisibility",
-          modelId,
-          idsByComponent.Block,
-          ...args,
-        ),
-      );
-    }
-    if (idsByComponent.Surface.length > 0) {
-      promises.push(
-        callComponentStyleFunction(
-          componentStyleFunctions.Surface,
-          "setModelSurfacesVisibility",
-          modelId,
-          idsByComponent.Surface,
-          ...args,
-        ),
-      );
-    }
-    if (idsByComponent.Line.length > 0) {
-      promises.push(
-        callComponentStyleFunction(
-          componentStyleFunctions.Line,
-          "setModelLinesVisibility",
-          modelId,
-          idsByComponent.Line,
-          ...args,
-        ),
-      );
-    }
-    if (idsByComponent.Corner.length > 0) {
-      promises.push(
-        callComponentStyleFunction(
-          componentStyleFunctions.Corner,
-          "setModelCornersVisibility",
-          modelId,
-          idsByComponent.Corner,
-          ...args,
-        ),
-      );
-    }
-  } else if (action === "Color") {
-    if (idsByComponent.Block.length > 0) {
-      promises.push(
-        callComponentStyleFunction(
-          componentStyleFunctions.Block,
-          "setModelBlocksColor",
-          modelId,
-          idsByComponent.Block,
-          ...args,
-        ),
-      );
-    }
-    if (idsByComponent.Surface.length > 0) {
-      promises.push(
-        callComponentStyleFunction(
-          componentStyleFunctions.Surface,
-          "setModelSurfacesColor",
-          modelId,
-          idsByComponent.Surface,
-          ...args,
-        ),
-      );
-    }
-    if (idsByComponent.Line.length > 0) {
-      promises.push(
-        callComponentStyleFunction(
-          componentStyleFunctions.Line,
-          "setModelLinesColor",
-          modelId,
-          idsByComponent.Line,
-          ...args,
-        ),
-      );
-    }
-    if (idsByComponent.Corner.length > 0) {
-      promises.push(
-        callComponentStyleFunction(
-          componentStyleFunctions.Corner,
-          "setModelCornersColor",
-          modelId,
-          idsByComponent.Corner,
-          ...args,
-        ),
-      );
-    }
-  }
-  return Promise.all(promises);
-}
 interface UseModelVisibilityStyleReturn {
   modelVisibility: (modelId: string) => boolean | undefined;
   setModelVisibility: (modelId: string, visibility: boolean) => Promise<unknown>;
@@ -284,4 +130,5 @@ function useModelVisibilityStyle(
     modelComponentTypeVisibility,
   };
 }
-export { getModelComponentsMap, dispatchToComponentTypes, useModelVisibilityStyle };
+export { useModelVisibilityStyle };
+export { getModelComponentsMap, dispatchToComponentTypes } from "./visibility_dispatch";
diff --git a/internal/stores/data_style/model/visibility_dispatch.ts b/internal/stores/data_style/model/visibility_dispatch.ts
new file mode 100644
index 000000000..cd55e1664
--- /dev/null
+++ b/internal/stores/data_style/model/visibility_dispatch.ts
@@ -0,0 +1,160 @@
+import { MESH_COMPONENT_TYPES } from "@ogw_front/utils/default_styles";
+import { useDataStore } from "@ogw_front/stores/data";
+
+// The four per-component-type style composables (Surface/Line/Block/Corner) each expose a different, large set of methods (color, visibility, per-attribute-kind getters/setters...). This module only cares about looking a handful of them up dynamically by name, so a precise structural type for componentStyleFunctions isn't worth modelling here; `any` keeps the dynamic dispatch table honest about that.
+// oxlint-disable-next-line no-explicit-any
+type ComponentStyleFunctions = Record<"Surface" | "Line" | "Block" | "Corner", any>;
+
+interface ModelComponent {
+  geode_id: string;
+  type: string;
+}
+
+async function callComponentStyleFunction(
+  // oxlint-disable-next-line no-explicit-any
+  target: any,
+  method: string,
+  ...args: unknown[]
+): Promise<unknown> {
+  // oxlint-disable-next-line no-unsafe-call, no-unsafe-member-access, no-unsafe-argument, no-unsafe-assignment -- ComponentStyleFunctions is deliberately dynamically typed; see comment above.
+  const result = await target[method](...args);
+  return result;
+}
+
+async function getModelComponentsMap(
+  modelId: string,
+): Promise<{ allComponents: ModelComponent[]; componentsMap: Record<string, ModelComponent> }> {
+  const dataStore = useDataStore();
+  const results = await Promise.all(
+    MESH_COMPONENT_TYPES.map(async (type) => {
+      const geodeIds = await dataStore.getMeshComponentGeodeIds(modelId, type);
+      return geodeIds.map((geode_id): ModelComponent => ({
+        geode_id,
+        type,
+      }));
+    }),
+  );
+  const allComponents = results.flat();
+  return {
+    allComponents,
+    componentsMap: Object.fromEntries(
+      allComponents.map((component): [string, ModelComponent] => [component.geode_id, component]),
+    ),
+  };
+}
+async function dispatchToComponentTypes(
+  modelId: string,
+  componentIds: string[],
+  action: string,
+  { componentStyleFunctions }: { componentStyleFunctions: ComponentStyleFunctions },
+  ...args: unknown[]
+): Promise<unknown[]> {
+  const { componentsMap } = await getModelComponentsMap(modelId);
+  const idsByComponent: { Block: string[]; Surface: string[]; Line: string[]; Corner: string[] } = {
+    Block: [],
+    Surface: [],
+    Line: [],
+    Corner: [],
+  };
+  for (const id of componentIds) {
+    const type = componentsMap[id]?.type;
+    if (type !== undefined && type in idsByComponent) {
+      (idsByComponent as Record<string, string[]>)[type]?.push(id);
+    }
+  }
+  const promises: Promise<unknown>[] = [];
+  if (action === "Visibility") {
+    if (idsByComponent.Block.length > 0) {
+      promises.push(
+        callComponentStyleFunction(
+          componentStyleFunctions.Block,
+          "setModelBlocksVisibility",
+          modelId,
+          idsByComponent.Block,
+          ...args,
+        ),
+      );
+    }
+    if (idsByComponent.Surface.length > 0) {
+      promises.push(
+        callComponentStyleFunction(
+          componentStyleFunctions.Surface,
+          "setModelSurfacesVisibility",
+          modelId,
+          idsByComponent.Surface,
+          ...args,
+        ),
+      );
+    }
+    if (idsByComponent.Line.length > 0) {
+      promises.push(
+        callComponentStyleFunction(
+          componentStyleFunctions.Line,
+          "setModelLinesVisibility",
+          modelId,
+          idsByComponent.Line,
+          ...args,
+        ),
+      );
+    }
+    if (idsByComponent.Corner.length > 0) {
+      promises.push(
+        callComponentStyleFunction(
+          componentStyleFunctions.Corner,
+          "setModelCornersVisibility",
+          modelId,
+          idsByComponent.Corner,
+          ...args,
+        ),
+      );
+    }
+  } else if (action === "Color") {
+    if (idsByComponent.Block.length > 0) {
+      promises.push(
+        callComponentStyleFunction(
+          componentStyleFunctions.Block,
+          "setModelBlocksColor",
+          modelId,
+          idsByComponent.Block,
+          ...args,
+        ),
+      );
+    }
+    if (idsByComponent.Surface.length > 0) {
+      promises.push(
+        callComponentStyleFunction(
+          componentStyleFunctions.Surface,
+          "setModelSurfacesColor",
+          modelId,
+          idsByComponent.Surface,
+          ...args,
+        ),
+      );
+    }
+    if (idsByComponent.Line.length > 0) {
+      promises.push(
+        callComponentStyleFunction(
+          componentStyleFunctions.Line,
+          "setModelLinesColor",
+          modelId,
+          idsByComponent.Line,
+          ...args,
+        ),
+      );
+    }
+    if (idsByComponent.Corner.length > 0) {
+      promises.push(
+        callComponentStyleFunction(
+          componentStyleFunctions.Corner,
+          "setModelCornersColor",
+          modelId,
+          idsByComponent.Corner,
+          ...args,
+        ),
+      );
+    }
+  }
+  return Promise.all(promises);
+}
+export { getModelComponentsMap, dispatchToComponentTypes };
+export type { ComponentStyleFunctions };
diff --git a/internal/stores/data_style/state.ts b/internal/stores/data_style/state.ts
index 8261aa98b..89c4cccb8 100644
--- a/internal/stores/data_style/state.ts
+++ b/internal/stores/data_style/state.ts
@@ -4,189 +4,9 @@ import type {
   ObjectStyle,
   StyleValues,
 } from "./types";
-import type { Observable as RxObservable } from "rxjs";
+import { type SharedState, getSharedState } from "./state_shared";
 import { getTable } from "@ogw_internal/database/database";
-import { liveQuery } from "dexie";
 import merge from "lodash/merge";
-import { useObservable } from "@vueuse/rxjs";
-
-interface SharedState {
-  styles: Ref<Record<string, ObjectStyle>>;
-  modelComponentTypeStyles: Ref<Record<string, ModelComponentTypeStyle>>;
-  componentStyles: Ref<Record<string, ModelComponentStyle>>;
-  loadFromDatabase: () => Promise<void>;
-  updateComponentStyleCache: (
-    modelId: string,
-    componentId: string,
-    styleValues: StyleValues,
-  ) => void;
-  bulkUpdateComponentStyleCache: (
-    modelId: string,
-    componentStyleUpdates: readonly {
-      readonly id_component: string;
-      readonly values: StyleValues;
-    }[],
-  ) => void;
-  bulkUpdateComponentStylesCache: (
-    modelId: string,
-    componentIds: readonly string[],
-    styleValues: StyleValues,
-  ) => void;
-  updateModelComponentTypeStyleCache: (
-    modelId: string,
-    componentType: string,
-    styleValues: StyleValues,
-  ) => void;
-  updateStyleCache: (objectId: string, styleValues: StyleValues) => void;
-}
-
-let sharedState: SharedState | undefined = undefined;
-
-// oxlint-disable-next-line max-lines-per-function
-function getSharedState(): SharedState {
-  if (sharedState) {
-    return sharedState;
-  }
-
-  const dataStyleTable = getTable<ObjectStyle>("data_style");
-  const modelComponentDataStyleTable = getTable<ModelComponentStyle>("model_component_datastyle");
-  const modelComponentTypeDataStyleTable = getTable<ModelComponentTypeStyle>(
-    "model_component_type_datastyle",
-  );
-
-  // Dexie's `liveQuery` returns Dexie's own `Observable` type, structurally distinct
-  // From rxjs's `Observable` that `useObservable` (from @vueuse/rxjs) expects, even
-  // Though they're interoperable at runtime (both are plain subscribe-based streams).
-  const dataStyleLiveQuery = liveQuery(async () => {
-    const objectStyles = await dataStyleTable.toArray();
-    const stylesByObjectId: Record<string, ObjectStyle> = {};
-    for (const objectStyle of objectStyles) {
-      stylesByObjectId[objectStyle.id] = objectStyle;
-    }
-    return stylesByObjectId;
-  });
-
-  const styles = useObservable<Record<string, ObjectStyle>, Record<string, ObjectStyle>>(
-    // oxlint-disable-next-line no-unsafe-type-assertion
-    dataStyleLiveQuery as unknown as RxObservable<Record<string, ObjectStyle>>,
-    { initialValue: {} },
-  ) as Ref<Record<string, ObjectStyle>>;
-
-  const modelComponentTypeStyles = ref<Record<string, ModelComponentTypeStyle>>({});
-  const componentStyles = ref<Record<string, ModelComponentStyle>>({});
-
-  async function loadFromDatabase(): Promise<void> {
-    const [fetchedTypeStyles, fetchedComponentStyles] = await Promise.all([
-      modelComponentTypeDataStyleTable.toArray(),
-      modelComponentDataStyleTable.toArray(),
-    ]);
-    const typeStylesMap: Record<string, ModelComponentTypeStyle> = {};
-    for (const typeStyle of fetchedTypeStyles) {
-      const cacheKey = `${typeStyle.id_model}_${typeStyle.type}`;
-      typeStylesMap[cacheKey] = typeStyle;
-    }
-    modelComponentTypeStyles.value = typeStylesMap;
-
-    const componentStylesMap: Record<string, ModelComponentStyle> = {};
-    for (const componentStyle of fetchedComponentStyles) {
-      const cacheKey = `${componentStyle.id_model}_${componentStyle.id_component}`;
-      componentStylesMap[cacheKey] = componentStyle;
-    }
-    componentStyles.value = componentStylesMap;
-  }
-
-  void loadFromDatabase();
-
-  function updateComponentStyleCache(
-    modelId: string,
-    componentId: string,
-    styleValues: StyleValues,
-  ): void {
-    const cacheKey = `${modelId}_${componentId}`;
-    const existingStyle = componentStyles.value[cacheKey];
-    if (existingStyle === undefined) {
-      componentStyles.value[cacheKey] = merge(
-        { id_model: modelId, id_component: componentId },
-        styleValues,
-      );
-    } else {
-      merge(existingStyle, styleValues);
-    }
-  }
-
-  function bulkUpdateComponentStyleCache(
-    modelId: string,
-    componentStyleUpdates: readonly {
-      readonly id_component: string;
-      readonly values: StyleValues;
-    }[],
-  ): void {
-    const updatedComponentStyles = { ...componentStyles.value };
-    for (const { id_component: componentId, values: styleValues } of componentStyleUpdates) {
-      const cacheKey = `${modelId}_${componentId}`;
-      const existingStyle = updatedComponentStyles[cacheKey];
-      if (existingStyle === undefined) {
-        updatedComponentStyles[cacheKey] = merge(
-          { id_model: modelId, id_component: componentId },
-          styleValues,
-        );
-      } else {
-        updatedComponentStyles[cacheKey] = merge({}, existingStyle, styleValues);
-      }
-    }
-    componentStyles.value = updatedComponentStyles;
-  }
-
-  function bulkUpdateComponentStylesCache(
-    modelId: string,
-    componentIds: readonly string[],
-    styleValues: StyleValues,
-  ): void {
-    const updatedComponentStyles = { ...componentStyles.value };
-    for (const componentId of componentIds) {
-      const cacheKey = `${modelId}_${componentId}`;
-      const existingStyle = updatedComponentStyles[cacheKey];
-      if (existingStyle === undefined) {
-        updatedComponentStyles[cacheKey] = merge(
-          { id_model: modelId, id_component: componentId },
-          styleValues,
-        );
-      } else {
-        updatedComponentStyles[cacheKey] = merge({}, existingStyle, styleValues);
-      }
-    }
-    componentStyles.value = updatedComponentStyles;
-  }
-
-  function updateModelComponentTypeStyleCache(
-    modelId: string,
-    componentType: string,
-    styleValues: StyleValues,
-  ): void {
-    const cacheKey = `${modelId}_${componentType}`;
-    modelComponentTypeStyles.value[cacheKey] ??= { id_model: modelId, type: componentType };
-    merge(modelComponentTypeStyles.value[cacheKey], styleValues);
-  }
-
-  function updateStyleCache(objectId: string, styleValues: StyleValues): void {
-    styles.value[objectId] ??= { id: objectId };
-    merge(styles.value[objectId], styleValues);
-  }
-
-  sharedState = {
-    styles,
-    modelComponentTypeStyles,
-    componentStyles,
-    loadFromDatabase,
-    updateComponentStyleCache,
-    bulkUpdateComponentStyleCache,
-    bulkUpdateComponentStylesCache,
-    updateModelComponentTypeStyleCache,
-    updateStyleCache,
-  };
-
-  return sharedState;
-}
 
 interface DataStyleStateApi extends SharedState {
   getStyle: (objectId: string) => ObjectStyle;
diff --git a/internal/stores/data_style/state_shared.ts b/internal/stores/data_style/state_shared.ts
new file mode 100644
index 000000000..c60076c2c
--- /dev/null
+++ b/internal/stores/data_style/state_shared.ts
@@ -0,0 +1,191 @@
+import type {
+  ModelComponentStyle,
+  ModelComponentTypeStyle,
+  ObjectStyle,
+  StyleValues,
+} from "./types";
+import type { Observable as RxObservable } from "rxjs";
+import { getTable } from "@ogw_internal/database/database";
+import { liveQuery } from "dexie";
+import merge from "lodash/merge";
+import { useObservable } from "@vueuse/rxjs";
+
+interface SharedState {
+  styles: Ref<Record<string, ObjectStyle>>;
+  modelComponentTypeStyles: Ref<Record<string, ModelComponentTypeStyle>>;
+  componentStyles: Ref<Record<string, ModelComponentStyle>>;
+  loadFromDatabase: () => Promise<void>;
+  updateComponentStyleCache: (
+    modelId: string,
+    componentId: string,
+    styleValues: StyleValues,
+  ) => void;
+  bulkUpdateComponentStyleCache: (
+    modelId: string,
+    componentStyleUpdates: readonly {
+      readonly id_component: string;
+      readonly values: StyleValues;
+    }[],
+  ) => void;
+  bulkUpdateComponentStylesCache: (
+    modelId: string,
+    componentIds: readonly string[],
+    styleValues: StyleValues,
+  ) => void;
+  updateModelComponentTypeStyleCache: (
+    modelId: string,
+    componentType: string,
+    styleValues: StyleValues,
+  ) => void;
+  updateStyleCache: (objectId: string, styleValues: StyleValues) => void;
+}
+
+let sharedState: SharedState | undefined = undefined;
+
+// oxlint-disable-next-line max-lines-per-function
+function getSharedState(): SharedState {
+  if (sharedState) {
+    return sharedState;
+  }
+
+  const dataStyleTable = getTable<ObjectStyle>("data_style");
+  const modelComponentDataStyleTable = getTable<ModelComponentStyle>("model_component_datastyle");
+  const modelComponentTypeDataStyleTable = getTable<ModelComponentTypeStyle>(
+    "model_component_type_datastyle",
+  );
+
+  // Dexie's `liveQuery` returns Dexie's own `Observable` type, structurally distinct
+  // From rxjs's `Observable` that `useObservable` (from @vueuse/rxjs) expects, even
+  // Though they're interoperable at runtime (both are plain subscribe-based streams).
+  const dataStyleLiveQuery = liveQuery(async () => {
+    const objectStyles = await dataStyleTable.toArray();
+    const stylesByObjectId: Record<string, ObjectStyle> = {};
+    for (const objectStyle of objectStyles) {
+      stylesByObjectId[objectStyle.id] = objectStyle;
+    }
+    return stylesByObjectId;
+  });
+
+  const styles = useObservable<Record<string, ObjectStyle>, Record<string, ObjectStyle>>(
+    // oxlint-disable-next-line no-unsafe-type-assertion
+    dataStyleLiveQuery as unknown as RxObservable<Record<string, ObjectStyle>>,
+    { initialValue: {} },
+  ) as Ref<Record<string, ObjectStyle>>;
+
+  const modelComponentTypeStyles = ref<Record<string, ModelComponentTypeStyle>>({});
+  const componentStyles = ref<Record<string, ModelComponentStyle>>({});
+
+  async function loadFromDatabase(): Promise<void> {
+    const [fetchedTypeStyles, fetchedComponentStyles] = await Promise.all([
+      modelComponentTypeDataStyleTable.toArray(),
+      modelComponentDataStyleTable.toArray(),
+    ]);
+    const typeStylesMap: Record<string, ModelComponentTypeStyle> = {};
+    for (const typeStyle of fetchedTypeStyles) {
+      const cacheKey = `${typeStyle.id_model}_${typeStyle.type}`;
+      typeStylesMap[cacheKey] = typeStyle;
+    }
+    modelComponentTypeStyles.value = typeStylesMap;
+
+    const componentStylesMap: Record<string, ModelComponentStyle> = {};
+    for (const componentStyle of fetchedComponentStyles) {
+      const cacheKey = `${componentStyle.id_model}_${componentStyle.id_component}`;
+      componentStylesMap[cacheKey] = componentStyle;
+    }
+    componentStyles.value = componentStylesMap;
+  }
+
+  void loadFromDatabase();
+
+  function updateComponentStyleCache(
+    modelId: string,
+    componentId: string,
+    styleValues: StyleValues,
+  ): void {
+    const cacheKey = `${modelId}_${componentId}`;
+    const existingStyle = componentStyles.value[cacheKey];
+    if (existingStyle === undefined) {
+      componentStyles.value[cacheKey] = merge(
+        { id_model: modelId, id_component: componentId },
+        styleValues,
+      );
+    } else {
+      merge(existingStyle, styleValues);
+    }
+  }
+
+  function bulkUpdateComponentStyleCache(
+    modelId: string,
+    componentStyleUpdates: readonly {
+      readonly id_component: string;
+      readonly values: StyleValues;
+    }[],
+  ): void {
+    const updatedComponentStyles = { ...componentStyles.value };
+    for (const { id_component: componentId, values: styleValues } of componentStyleUpdates) {
+      const cacheKey = `${modelId}_${componentId}`;
+      const existingStyle = updatedComponentStyles[cacheKey];
+      if (existingStyle === undefined) {
+        updatedComponentStyles[cacheKey] = merge(
+          { id_model: modelId, id_component: componentId },
+          styleValues,
+        );
+      } else {
+        updatedComponentStyles[cacheKey] = merge({}, existingStyle, styleValues);
+      }
+    }
+    componentStyles.value = updatedComponentStyles;
+  }
+
+  function bulkUpdateComponentStylesCache(
+    modelId: string,
+    componentIds: readonly string[],
+    styleValues: StyleValues,
+  ): void {
+    const updatedComponentStyles = { ...componentStyles.value };
+    for (const componentId of componentIds) {
+      const cacheKey = `${modelId}_${componentId}`;
+      const existingStyle = updatedComponentStyles[cacheKey];
+      if (existingStyle === undefined) {
+        updatedComponentStyles[cacheKey] = merge(
+          { id_model: modelId, id_component: componentId },
+          styleValues,
+        );
+      } else {
+        updatedComponentStyles[cacheKey] = merge({}, existingStyle, styleValues);
+      }
+    }
+    componentStyles.value = updatedComponentStyles;
+  }
+
+  function updateModelComponentTypeStyleCache(
+    modelId: string,
+    componentType: string,
+    styleValues: StyleValues,
+  ): void {
+    const cacheKey = `${modelId}_${componentType}`;
+    modelComponentTypeStyles.value[cacheKey] ??= { id_model: modelId, type: componentType };
+    merge(modelComponentTypeStyles.value[cacheKey], styleValues);
+  }
+
+  function updateStyleCache(objectId: string, styleValues: StyleValues): void {
+    styles.value[objectId] ??= { id: objectId };
+    merge(styles.value[objectId], styleValues);
+  }
+
+  sharedState = {
+    styles,
+    modelComponentTypeStyles,
+    componentStyles,
+    loadFromDatabase,
+    updateComponentStyleCache,
+    bulkUpdateComponentStyleCache,
+    bulkUpdateComponentStylesCache,
+    updateModelComponentTypeStyleCache,
+    updateStyleCache,
+  };
+
+  return sharedState;
+}
+export { getSharedState };
+export type { SharedState };
diff --git a/internal/stores/hybrid_viewer/camera.ts b/internal/stores/hybrid_viewer/camera.ts
index 4ec01c808..40463fcc6 100644
--- a/internal/stores/hybrid_viewer/camera.ts
+++ b/internal/stores/hybrid_viewer/camera.ts
@@ -1,123 +1,12 @@
-import type { CameraOptions, Vector3, vtkCamera, vtkOpenGLRenderWindow } from "./vtk_types";
-import {
-  LONG_ANIMATION_DURATION,
-  SHORT_ANIMATION_DURATION,
-  animateCamera,
-  computeAnimationDuration,
-  getCameraOptions,
-} from "./camera_animation";
+import { EASE_EXPONENT, applyCameraOptions, getImageStyle, toBounds } from "./camera_helpers";
+import { animateCamera, computeAnimationDuration, getCameraOptions } from "./camera_animation";
 import { requireRenderWindow, useHybridViewerCore } from "./core";
-import { dot } from "@kitware/vtk.js/Common/Core/Math";
+import type { CameraOptions } from "./vtk_types";
+import { animateCameraOrientation } from "./camera_orientation";
 import { useHybridViewerScene } from "./scene";
 import { useViewerStore } from "@ogw_front/stores/viewer";
 import viewer_schemas from "@geode/opengeodeweb-viewer/opengeodeweb_viewer_typed_schemas.js";
 
-const BUMP_MULTIPLIER = 0.2;
-const ALIGNMENT_THRESHOLD = 0.9;
-const EASE_EXPONENT = 1.1;
-
-interface OrientationConfig {
-  position: Vector3;
-  view_up: Vector3;
-}
-
-const ORIENTATIONS: Record<string, OrientationConfig> = {
-  zplus: {
-    position: [0, 0, 1],
-    view_up: [0, 1, 0],
-  },
-  zminus: {
-    position: [0, 0, -1],
-    view_up: [0, 1, 0],
-  },
-  yplus: {
-    position: [0, 1, 0],
-    view_up: [0, 0, 1],
-  },
-  yminus: {
-    position: [0, -1, 0],
-    view_up: [0, 0, 1],
-  },
-  xplus: {
-    position: [1, 0, 0],
-    view_up: [0, 0, 1],
-  },
-  xminus: {
-    position: [-1, 0, 0],
-    view_up: [0, 0, 1],
-  },
-};
-
-function getImageStyle(): CSSStyleDeclaration | undefined {
-  const { genericRenderWindow } = useHybridViewerCore();
-  if (!genericRenderWindow.value) {
-    return undefined;
-  }
-  // oxlint-disable-next-line no-unsafe-assignment -- vtk.js has no types for getApiSpecificRenderWindow(); narrowed below.
-  const apiSpecificRenderWindow = genericRenderWindow.value.getApiSpecificRenderWindow();
-  // oxlint-disable-next-line no-unsafe-type-assertion -- trusted vtk.js OpenGL render window API boundary.
-  const webGLRenderWindow = apiSpecificRenderWindow as unknown as vtkOpenGLRenderWindow;
-  const bgImage: unknown = webGLRenderWindow.getReferenceByName("bgImage");
-  return bgImage instanceof HTMLImageElement ? bgImage.style : undefined;
-}
-
-function applyCameraOptions(
-  camera: vtkCamera | undefined,
-  options: Partial<CameraOptions> | undefined,
-): void {
-  if (camera && options) {
-    camera.set({
-      focalPoint: options.focal_point,
-      viewUp: options.view_up,
-      position: options.position,
-      viewAngle: options.view_angle,
-      clippingRange: options.clipping_range,
-    });
-  }
-}
-
-const BOUNDS_LENGTH = 6;
-
-function isBounds(value: unknown): value is [number, number, number, number, number, number] {
-  return (
-    Array.isArray(value) &&
-    value.length === BOUNDS_LENGTH &&
-    value.every((item): item is number => typeof item === "number")
-  );
-}
-
-function toBounds(value: unknown): [number, number, number, number, number, number] {
-  if (!isBounds(value)) {
-    throw new Error("Expected a six-element numeric bounds array");
-  }
-  return value;
-}
-
-function centerCameraOnPosition(
-  camera: vtkCamera | undefined,
-  pickedPosition: Vector3 | undefined,
-): void {
-  if (!camera || !pickedPosition) {
-    return;
-  }
-  const position = camera.getPosition();
-  const directionOfProjection = camera.getDirectionOfProjection();
-  const distance = dot(
-    [
-      pickedPosition[0] - position[0],
-      pickedPosition[1] - position[1],
-      pickedPosition[2] - position[2],
-    ],
-    directionOfProjection,
-  );
-  camera.setFocalPoint(...pickedPosition);
-  camera.setPosition(
-    pickedPosition[0] - distance * directionOfProjection[0],
-    pickedPosition[1] - distance * directionOfProjection[1],
-    pickedPosition[2] - distance * directionOfProjection[2],
-  );
-}
-
 // Shared via createSharedComposable (rather than merged into the parent hybridViewer store) so sibling slices, e.g. viewport.ts and ruler.ts, can read camera_options/setCamera/syncRemoteCamera directly without importing the parent store and creating a cycle. A Pinia store would work too but its $id/$patch/... properties would leak into the composed store's spread and collapse its inferred type.
 const useHybridViewerCamera = createSharedComposable(() => {
   const camera_options = reactive<Record<string, unknown>>({});
@@ -231,50 +120,8 @@ const useHybridViewerCamera = createSharedComposable(() => {
     await performFocusCameraOnObject(id, block_ids);
   }
 
-  function performCameraOrientation(orientation: string): void {
-    const config = ORIENTATIONS[orientation.toLowerCase()];
-    if (!config) {
-      return;
-    }
-    const { genericRenderWindow, is_moving } = useHybridViewerCore();
-    const imageStyle = getImageStyle();
-    const renderer = requireRenderWindow(genericRenderWindow).getRenderer();
-    const camera = renderer.getActiveCamera();
-    const startState = getCameraOptions(camera);
-    applyCameraOptions(camera, {
-      ...config,
-      focal_point: [0, 0, 0],
-    });
-    renderer.resetCamera();
-    const targetState = getCameraOptions(camera);
-    applyCameraOptions(camera, startState);
-    const alignment = dot(camera.getDirectionOfProjection(), config.position);
-    const duration =
-      alignment > ALIGNMENT_THRESHOLD ? LONG_ANIMATION_DURATION : SHORT_ANIMATION_DURATION;
-    is_moving.value = true;
-    if (imageStyle) {
-      imageStyle.opacity = "0";
-    }
-    animateCamera({
-      camera,
-      startState,
-      targetState,
-      duration,
-      bumpMultiplier: BUMP_MULTIPLIER,
-      easeExponent: EASE_EXPONENT,
-      onUpdate: () => {
-        const renderWindow = requireRenderWindow(genericRenderWindow).getRenderWindow();
-        renderWindow.render();
-      },
-      onEnd: () => {
-        is_moving.value = false;
-        performSyncRemoteCamera();
-      },
-    });
-  }
-
   function setCameraOrientation(orientation: string): void {
-    performCameraOrientation(orientation);
+    animateCameraOrientation(orientation, performSyncRemoteCamera);
   }
 
   return {
@@ -309,8 +156,7 @@ export {
   EASE_EXPONENT,
   ORIENTATIONS,
   applyCameraOptions,
-  applySnapshot,
   centerCameraOnPosition,
-  useHybridViewerCamera,
-};
+} from "./camera_helpers";
+export { applySnapshot, useHybridViewerCamera };
 export type { CameraSnapshot };
diff --git a/internal/stores/hybrid_viewer/camera_helpers.ts b/internal/stores/hybrid_viewer/camera_helpers.ts
new file mode 100644
index 000000000..bb6756c1c
--- /dev/null
+++ b/internal/stores/hybrid_viewer/camera_helpers.ts
@@ -0,0 +1,120 @@
+import type { CameraOptions, Vector3, vtkCamera, vtkOpenGLRenderWindow } from "./vtk_types";
+import { dot } from "@kitware/vtk.js/Common/Core/Math";
+import { useHybridViewerCore } from "./core";
+
+const BUMP_MULTIPLIER = 0.2;
+const ALIGNMENT_THRESHOLD = 0.9;
+const EASE_EXPONENT = 1.1;
+
+interface OrientationConfig {
+  position: Vector3;
+  view_up: Vector3;
+}
+
+const ORIENTATIONS: Record<string, OrientationConfig> = {
+  zplus: {
+    position: [0, 0, 1],
+    view_up: [0, 1, 0],
+  },
+  zminus: {
+    position: [0, 0, -1],
+    view_up: [0, 1, 0],
+  },
+  yplus: {
+    position: [0, 1, 0],
+    view_up: [0, 0, 1],
+  },
+  yminus: {
+    position: [0, -1, 0],
+    view_up: [0, 0, 1],
+  },
+  xplus: {
+    position: [1, 0, 0],
+    view_up: [0, 0, 1],
+  },
+  xminus: {
+    position: [-1, 0, 0],
+    view_up: [0, 0, 1],
+  },
+};
+
+function getImageStyle(): CSSStyleDeclaration | undefined {
+  const { genericRenderWindow } = useHybridViewerCore();
+  if (!genericRenderWindow.value) {
+    return undefined;
+  }
+  // oxlint-disable-next-line no-unsafe-assignment -- vtk.js has no types for getApiSpecificRenderWindow(); narrowed below.
+  const apiSpecificRenderWindow = genericRenderWindow.value.getApiSpecificRenderWindow();
+  // oxlint-disable-next-line no-unsafe-type-assertion -- trusted vtk.js OpenGL render window API boundary.
+  const webGLRenderWindow = apiSpecificRenderWindow as unknown as vtkOpenGLRenderWindow;
+  const bgImage: unknown = webGLRenderWindow.getReferenceByName("bgImage");
+  return bgImage instanceof HTMLImageElement ? bgImage.style : undefined;
+}
+
+function applyCameraOptions(
+  camera: vtkCamera | undefined,
+  options: Partial<CameraOptions> | undefined,
+): void {
+  if (camera && options) {
+    camera.set({
+      focalPoint: options.focal_point,
+      viewUp: options.view_up,
+      position: options.position,
+      viewAngle: options.view_angle,
+      clippingRange: options.clipping_range,
+    });
+  }
+}
+
+const BOUNDS_LENGTH = 6;
+
+function isBounds(value: unknown): value is [number, number, number, number, number, number] {
+  return (
+    Array.isArray(value) &&
+    value.length === BOUNDS_LENGTH &&
+    value.every((item): item is number => typeof item === "number")
+  );
+}
+
+function toBounds(value: unknown): [number, number, number, number, number, number] {
+  if (!isBounds(value)) {
+    throw new Error("Expected a six-element numeric bounds array");
+  }
+  return value;
+}
+
+function centerCameraOnPosition(
+  camera: vtkCamera | undefined,
+  pickedPosition: Vector3 | undefined,
+): void {
+  if (!camera || !pickedPosition) {
+    return;
+  }
+  const position = camera.getPosition();
+  const directionOfProjection = camera.getDirectionOfProjection();
+  const distance = dot(
+    [
+      pickedPosition[0] - position[0],
+      pickedPosition[1] - position[1],
+      pickedPosition[2] - position[2],
+    ],
+    directionOfProjection,
+  );
+  camera.setFocalPoint(...pickedPosition);
+  camera.setPosition(
+    pickedPosition[0] - distance * directionOfProjection[0],
+    pickedPosition[1] - distance * directionOfProjection[1],
+    pickedPosition[2] - distance * directionOfProjection[2],
+  );
+}
+
+export {
+  ALIGNMENT_THRESHOLD,
+  BUMP_MULTIPLIER,
+  EASE_EXPONENT,
+  ORIENTATIONS,
+  applyCameraOptions,
+  centerCameraOnPosition,
+  getImageStyle,
+  toBounds,
+};
diff --git a/internal/stores/hybrid_viewer/camera_orientation.ts b/internal/stores/hybrid_viewer/camera_orientation.ts
new file mode 100644
index 000000000..670cb2c54
--- /dev/null
+++ b/internal/stores/hybrid_viewer/camera_orientation.ts
@@ -0,0 +1,60 @@
+import {
+  ALIGNMENT_THRESHOLD,
+  BUMP_MULTIPLIER,
+  EASE_EXPONENT,
+  ORIENTATIONS,
+  applyCameraOptions,
+  getImageStyle,
+} from "./camera_helpers";
+import {
+  LONG_ANIMATION_DURATION,
+  SHORT_ANIMATION_DURATION,
+  animateCamera,
+  getCameraOptions,
+} from "./camera_animation";
+import { requireRenderWindow, useHybridViewerCore } from "./core";
+import { dot } from "@kitware/vtk.js/Common/Core/Math";
+
+function animateCameraOrientation(orientation: string, syncRemoteCamera: () => void): void {
+  const config = ORIENTATIONS[orientation.toLowerCase()];
+  if (!config) {
+    return;
+  }
+  const { genericRenderWindow, is_moving } = useHybridViewerCore();
+  const imageStyle = getImageStyle();
+  const renderer = requireRenderWindow(genericRenderWindow).getRenderer();
+  const camera = renderer.getActiveCamera();
+  const startState = getCameraOptions(camera);
+  applyCameraOptions(camera, {
+    ...config,
+    focal_point: [0, 0, 0],
+  });
+  renderer.resetCamera();
+  const targetState = getCameraOptions(camera);
+  applyCameraOptions(camera, startState);
+  const alignment = dot(camera.getDirectionOfProjection(), config.position);
+  const duration =
+    alignment > ALIGNMENT_THRESHOLD ? LONG_ANIMATION_DURATION : SHORT_ANIMATION_DURATION;
+  is_moving.value = true;
+  if (imageStyle) {
+    imageStyle.opacity = "0";
+  }
+  animateCamera({
+    camera,
+    startState,
+    targetState,
+    duration,
+    bumpMultiplier: BUMP_MULTIPLIER,
+    easeExponent: EASE_EXPONENT,
+    onUpdate: () => {
+      const renderWindow = requireRenderWindow(genericRenderWindow).getRenderWindow();
+      renderWindow.render();
+    },
+    onEnd: () => {
+      is_moving.value = false;
+      syncRemoteCamera();
+    },
+  });
+}
+
+export { animateCameraOrientation };
diff --git a/server/utils/microservices.ts b/server/utils/microservices.ts
index 12f07510b..a4822100b 100644
--- a/server/utils/microservices.ts
+++ b/server/utils/microservices.ts
@@ -1,94 +1,25 @@
 // Node imports
 import child_process from "node:child_process";
 import fs from "node:fs";
-import path from "node:path";
 
 // Third party imports
 import back_schemas from "@geode/opengeodeweb-back/opengeodeweb_back_schemas.json" with { type: "json" };
 import { consola } from "consola";
 
 // Local imports
+import {
+  DEFAULT_RUN_ARGS,
+  MAX_PORT_RETRIES,
+  type RunArgs,
+  backArgs,
+  isPortInUseError,
+  runScript,
+  waitUntilListening,
+} from "./microservices_process.js";
 import { type Microservice, microservicesMetadatasPath, projectMicroservices } from "./cleanup.js";
-import { type NamedChildProcess, getAvailablePort, waitForReady } from "./scripts.js";
 import { addNginxLocation, addSupervisorProgram } from "./cloud.js";
 import { executablePath } from "./path.js";
-
-interface RunArgs {
-  projectFolderPath: string;
-  uploadFolderPath?: string;
-  [key: string]: unknown;
-}
-
-const MILLISECONDS_PER_SECOND = 1000;
-const DEFAULT_TIMEOUT_SECONDS = 120;
-const MAX_PORT_RETRIES = 1;
-const DEFAULT_RUN_ARGS: RunArgs = { projectFolderPath: "" };
-const LISTENING_LOG_PATTERN = /^Listening on https?:\/\/.+:\d+\/?\s*$/mu;
-
-async function runScript(
-  execPath: string,
-  execName: string,
-  args: readonly string[],
-  expectedResponse: string,
-  timeoutSeconds = DEFAULT_TIMEOUT_SECONDS,
-): Promise<NamedChildProcess> {
-  const command = executablePath(execPath, execName);
-  consola.debug("runScript", command, args);
-  const child = child_process.spawn(command, args, {
-    stdio: ["ignore", "pipe", "pipe"],
-  }) as NamedChildProcess;
-  child.name = command.replace(/^.*[\\/]/u, "");
-  child.on("spawn", () => {
-    consola.info(`[${child.name}] spawned, pid=${child.pid}`);
-  });
-  const controller = new AbortController();
-  const timer = setTimeout(() => {
-    controller.abort();
-  }, timeoutSeconds * MILLISECONDS_PER_SECOND);
-  if (typeof timer.unref === "function") {
-    timer.unref();
-  }
-  try {
-    const result = await waitForReady(child, expectedResponse, controller.signal);
-    clearTimeout(timer);
-    return result;
-  } catch (error) {
-    clearTimeout(timer);
-    child.kill();
-    throw error;
-  }
-}
-
-function isPortInUseError(error: unknown): boolean {
-  return /EADDRINUSE|address already in use|port already in use/iu.test(String(error));
-}
-
-function backArgs(args: RunArgs, port: number): string[] {
-  const { projectFolderPath } = args;
-  if (!projectFolderPath) {
-    throw new Error("projectFolderPath is required");
-  }
-  const uploadFolderPath =
-    args.uploadFolderPath !== undefined && args.uploadFolderPath !== ""
-      ? args.uploadFolderPath
-      : path.join(projectFolderPath, "uploads");
-  const executableArgs = [
-    "--port",
-    String(port),
-    "--project_folder_path",
-    projectFolderPath,
-    "--upload_folder_path",
-    uploadFolderPath,
-    "--allowed_origins",
-    "http://localhost:*",
-    "--timeout",
-    "0",
-  ];
-  if (process.env.NODE_ENV === undefined || process.env.NODE_ENV === "development") {
-    executableArgs.push("--debug");
-  }
-  return executableArgs;
-}
+import { getAvailablePort } from "./scripts.js";
 
 async function runBack(
   execName: string,
@@ -184,29 +115,6 @@ async function runExtension(
   }
   throw new Error(`runExtension failed to run ${extensionId}`);
 }
-async function waitUntilListening(
-  child: child_process.ChildProcessWithoutNullStreams,
-): Promise<void> {
-  child.stderr.on("data", (data: Buffer) => {
-    consola.info(`[${child.spawnfile}] STDERR:`, data.toString().trim());
-  });
-  child.on("close", (code) => {
-    consola.info(`[${child.spawnfile}] exited with code ${code}`);
-  });
-  // oxlint-disable-next-line typescript/no-unnecessary-condition
-  for await (const chunk of child.stdout) {
-    const output = String(chunk);
-    consola.info(`[${child.spawnfile}] STDOUT:`, output.trim());
-    if (LISTENING_LOG_PATTERN.test(output)) {
-      child.stdout.on("data", (data: Buffer) => {
-        consola.info(`[${child.spawnfile}] STDOUT:`, data.toString().trim());
-      });
-      return;
-    }
-  }
-  throw new Error(`${child.spawnfile} exited before becoming ready`);
-}
-
 async function runExtensionServer(entryPath: string, attempts = 0): Promise<number> {
   let port: number | undefined = undefined;
   try {
diff --git a/server/utils/microservices_process.ts b/server/utils/microservices_process.ts
new file mode 100644
index 000000000..b0a6667fb
--- /dev/null
+++ b/server/utils/microservices_process.ts
@@ -0,0 +1,120 @@
+// Node imports
+import child_process from "node:child_process";
+import path from "node:path";
+
+// Third party imports
+import { consola } from "consola";
+
+// Local imports
+import { type NamedChildProcess, waitForReady } from "./scripts.js";
+import { executablePath } from "./path.js";
+
+interface RunArgs {
+  projectFolderPath: string;
+  uploadFolderPath?: string;
+  [key: string]: unknown;
+}
+
+const MILLISECONDS_PER_SECOND = 1000;
+const DEFAULT_TIMEOUT_SECONDS = 120;
+const MAX_PORT_RETRIES = 1;
+const DEFAULT_RUN_ARGS: RunArgs = { projectFolderPath: "" };
+const LISTENING_LOG_PATTERN = /^Listening on https?:\/\/.+:\d+\/?\s*$/mu;
+
+async function runScript(
+  execPath: string,
+  execName: string,
+  args: readonly string[],
+  expectedResponse: string,
+  timeoutSeconds = DEFAULT_TIMEOUT_SECONDS,
+): Promise<NamedChildProcess> {
+  const command = executablePath(execPath, execName);
+  consola.debug("runScript", command, args);
+  const child = child_process.spawn(command, args, {
+    stdio: ["ignore", "pipe", "pipe"],
+  }) as NamedChildProcess;
+  child.name = command.replace(/^.*[\\/]/u, "");
+  child.on("spawn", () => {
+    consola.info(`[${child.name}] spawned, pid=${child.pid}`);
+  });
+  const controller = new AbortController();
+  const timer = setTimeout(() => {
+    controller.abort();
+  }, timeoutSeconds * MILLISECONDS_PER_SECOND);
+  if (typeof timer.unref === "function") {
+    timer.unref();
+  }
+  try {
+    const result = await waitForReady(child, expectedResponse, controller.signal);
+    clearTimeout(timer);
+    return result;
+  } catch (error) {
+    clearTimeout(timer);
+    child.kill();
+    throw error;
+  }
+}
+
+function isPortInUseError(error: unknown): boolean {
+  return /EADDRINUSE|address already in use|port already in use/iu.test(String(error));
+}
+
+function backArgs(args: RunArgs, port: number): string[] {
+  const { projectFolderPath } = args;
+  if (!projectFolderPath) {
+    throw new Error("projectFolderPath is required");
+  }
+  const uploadFolderPath =
+    args.uploadFolderPath !== undefined && args.uploadFolderPath !== ""
+      ? args.uploadFolderPath
+      : path.join(projectFolderPath, "uploads");
+  const executableArgs = [
+    "--port",
+    String(port),
+    "--project_folder_path",
+    projectFolderPath,
+    "--upload_folder_path",
+    uploadFolderPath,
+    "--allowed_origins",
+    "http://localhost:*",
+    "--timeout",
+    "0",
+  ];
+  if (process.env.NODE_ENV === undefined || process.env.NODE_ENV === "development") {
+    executableArgs.push("--debug");
+  }
+  return executableArgs;
+}
+
+async function waitUntilListening(
+  child: child_process.ChildProcessWithoutNullStreams,
+): Promise<void> {
+  child.stderr.on("data", (data: Buffer) => {
+    consola.info(`[${child.spawnfile}] STDERR:`, data.toString().trim());
+  });
+  child.on("close", (code) => {
+    consola.info(`[${child.spawnfile}] exited with code ${code}`);
+  });
+  // oxlint-disable-next-line typescript/no-unnecessary-condition
+  for await (const chunk of child.stdout) {
+    const output = String(chunk);
+    consola.info(`[${child.spawnfile}] STDOUT:`, output.trim());
+    if (LISTENING_LOG_PATTERN.test(output)) {
+      child.stdout.on("data", (data: Buffer) => {
+        consola.info(`[${child.spawnfile}] STDOUT:`, data.toString().trim());
+      });
+      return;
+    }
+  }
+  throw new Error(`${child.spawnfile} exited before becoming ready`);
+}
+
+export {
+  DEFAULT_RUN_ARGS,
+  MAX_PORT_RETRIES,
+  backArgs,
+  isPortInUseError,
+  runScript,
+  waitUntilListening,
+};
+export type { RunArgs };
diff --git a/tests/integration/stores/data_style/mesh/edges.nuxt.test.ts b/tests/integration/stores/data_style/mesh/edges.nuxt.test.ts
index 5c78ab0df..cbf169003 100644
--- a/tests/integration/stores/data_style/mesh/edges.nuxt.test.ts
+++ b/tests/integration/stores/data_style/mesh/edges.nuxt.test.ts
@@ -1,9 +1,15 @@
 // Third party imports
 import { afterAll, beforeAll, describe, expect, test, vi } from "vitest";
-import viewer_schemas from "@geode/opengeodeweb-viewer/opengeodeweb_viewer_typed_schemas.js";
 
 // Local imports
 import { beforeAllTimeout, setupIntegrationTests } from "@ogw_tests/integration/setup";
+import {
+  default_vertex_attribute,
+  file_name,
+  geode_object,
+  mesh_edges_schemas,
+  range,
+} from "@ogw_tests/integration/stores/data_style/mesh/edges_helpers";
 import { DEFAULT_NO_DATA_COLOR } from "@ogw_front/utils/default_styles/constants";
 import { Status } from "@ogw_front/utils/status";
 import { cleanupBackend } from "@ogw_server/utils/cleanup";
@@ -11,16 +17,6 @@ import { getRGBPointsFromPreset } from "@ogw_front/utils/colormap";
 import { useDataStyleStore } from "@ogw_front/stores/data_style";
 import { useViewerStore } from "@ogw_front/stores/viewer";
 
-// Local constants
-const mesh_edges_schemas = viewer_schemas.opengeodeweb_viewer.mesh.edges;
-const file_name = "test.og_edc3d";
-const geode_object = "EdgedCurve3D";
-const MINIMUM_RANGE = 10;
-const MAXIMUM_RANGE = 20;
-const range: [number, number] = [MINIMUM_RANGE, MAXIMUM_RANGE];
-const default_vertex_attribute = { name: "vertex_attribute", item: 0, range };
-const default_edge_attribute = { name: "edge_attribute", item: 0, range };
-
 let id = "";
 let projectFolderPath = "";
 
@@ -141,115 +137,5 @@ describe("mesh edges", () => {
         expect(dataStyleStore.meshEdgesVertexAttributeColorMap(id)).toBe("budaS");
       });
     });
-
-    describe("edges edge attribute", () => {
-      test("coloring edge attribute", async () => {
-        const dataStyleStore = useDataStyleStore();
-        const viewerStore = useViewerStore();
-
-        const spy = vi.spyOn(viewerStore, "request");
-        const edge_attribute = {
-          name: default_edge_attribute.name,
-          item: default_edge_attribute.item,
-          minimum: range[0],
-          maximum: range[1],
-          colorMap: "batlow",
-        };
-        await dataStyleStore.setMeshEdgesEdgeAttribute(id, edge_attribute);
-        const schema = mesh_edges_schemas.attribute.edge.attribute;
-        const points = getRGBPointsFromPreset(edge_attribute.colorMap);
-        const params = {
-          id,
-          name: edge_attribute.name,
-          item: edge_attribute.item,
-          points,
-          minimum: edge_attribute.minimum,
-          maximum: edge_attribute.maximum,
-          no_data_color: DEFAULT_NO_DATA_COLOR,
-        };
-        expect(spy).toHaveBeenCalledWith({ schema, params });
-        expect(dataStyleStore.meshEdgesEdgeAttributeName(id)).toBe(edge_attribute.name);
-        expect(viewerStore.status).toBe(Status.CONNECTED);
-      });
-
-      test("stored configs 1 - select attribute edges and item 2", async () => {
-        const dataStyleStore = useDataStyleStore();
-        const edge_attribute = { name: "edges", item: 2 };
-        await dataStyleStore.setMeshEdgesEdgeAttributeName(id, edge_attribute.name);
-        await dataStyleStore.setMeshEdgesEdgeAttributeItem(id, edge_attribute.item);
-        expect(dataStyleStore.meshEdgesEdgeAttributeName(id)).toBe(edge_attribute.name);
-        expect(dataStyleStore.meshEdgesEdgeAttributeItem(id)).toBe(edge_attribute.item);
-      });
-
-      test("stored configs 2 - set range and colormap", async () => {
-        const dataStyleStore = useDataStyleStore();
-        await dataStyleStore.setMeshEdgesEdgeAttributeRange(id, range[0], range[1]);
-        await dataStyleStore.setMeshEdgesEdgeAttributeColorMap(id, "budaS");
-        expect(dataStyleStore.meshEdgesEdgeAttributeRange(id)).toStrictEqual(range);
-        expect(dataStyleStore.meshEdgesEdgeAttributeColorMap(id)).toBe("budaS");
-      });
-
-      test("stored configs 3 - select cycle_id", async () => {
-        const dataStyleStore = useDataStyleStore();
-        await dataStyleStore.setMeshEdgesEdgeAttributeName(id, "cycle_id");
-        await dataStyleStore.setMeshEdgesEdgeAttributeItem(id, 0);
-        expect(dataStyleStore.meshEdgesEdgeAttributeName(id)).toBe("cycle_id");
-        expect(dataStyleStore.meshEdgesEdgeAttributeItem(id)).toBe(0);
-      });
-
-      test("stored configs 4 - switch back to edges and verify restoration", async () => {
-        const dataStyleStore = useDataStyleStore();
-        const edge_attribute = { name: "edges", item: 2 };
-        await dataStyleStore.setMeshEdgesEdgeAttributeName(id, edge_attribute.name);
-        expect(dataStyleStore.meshEdgesEdgeAttributeName(id)).toBe(edge_attribute.name);
-        expect(dataStyleStore.meshEdgesEdgeAttributeItem(id)).toBe(edge_attribute.item);
-        expect(dataStyleStore.meshEdgesEdgeAttributeRange(id)).toStrictEqual(range);
-        expect(dataStyleStore.meshEdgesEdgeAttributeColorMap(id)).toBe("budaS");
-      });
-    });
-
-    test("coloring color", async () => {
-      const dataStyleStore = useDataStyleStore();
-      const viewerStore = useViewerStore();
-      const coloringName = "constant";
-      const result = dataStyleStore.setMeshEdgesActiveColoring(id, coloringName);
-      expect(result).toBeInstanceOf(Promise);
-      await result;
-      expect(dataStyleStore.meshEdgesActiveColoring(id)).toBe(coloringName);
-      expect(viewerStore.status).toBe(Status.CONNECTED);
-    });
-
-    test("coloring vertex", async () => {
-      const dataStyleStore = useDataStyleStore();
-      const viewerStore = useViewerStore();
-      await dataStyleStore.setMeshEdgesVertexAttributeName(id, default_vertex_attribute.name);
-      const coloringName = "vertex";
-      const result = dataStyleStore.setMeshEdgesActiveColoring(id, coloringName);
-      expect(result).toBeInstanceOf(Promise);
-      await result;
-      expect(dataStyleStore.meshEdgesActiveColoring(id)).toBe(coloringName);
-      expect(viewerStore.status).toBe(Status.CONNECTED);
-    });
-
-    test("coloring edge", async () => {
-      const dataStyleStore = useDataStyleStore();
-      const viewerStore = useViewerStore();
-      await dataStyleStore.setMeshEdgesEdgeAttributeName(id, default_edge_attribute.name);
-      const coloringName = "edge";
-      const result = dataStyleStore.setMeshEdgesActiveColoring(id, coloringName);
-      expect(result).toBeInstanceOf(Promise);
-      await result;
-      expect(dataStyleStore.meshEdgesActiveColoring(id)).toBe(coloringName);
-      expect(viewerStore.status).toBe(Status.CONNECTED);
-    });
-
-    test("edges apply style", async () => {
-      const dataStyleStore = useDataStyleStore();
-      const viewerStore = useViewerStore();
-      const result = dataStyleStore.applyMeshEdgesStyle(id);
-      expect(result).toBeInstanceOf(Promise);
-      await result;
-      expect(viewerStore.status).toBe(Status.CONNECTED);
-    });
   });
 });
diff --git a/tests/integration/stores/data_style/mesh/edges_edge_attribute.nuxt.test.ts b/tests/integration/stores/data_style/mesh/edges_edge_attribute.nuxt.test.ts
new file mode 100644
index 000000000..6f0f5d0e5
--- /dev/null
+++ b/tests/integration/stores/data_style/mesh/edges_edge_attribute.nuxt.test.ts
@@ -0,0 +1,144 @@
+// Third party imports
+import { afterAll, beforeAll, describe, expect, test, vi } from "vitest";
+
+// Local imports
+import { beforeAllTimeout, setupIntegrationTests } from "@ogw_tests/integration/setup";
+import {
+  default_edge_attribute,
+  default_vertex_attribute,
+  file_name,
+  geode_object,
+  mesh_edges_schemas,
+  range,
+} from "@ogw_tests/integration/stores/data_style/mesh/edges_helpers";
+import { DEFAULT_NO_DATA_COLOR } from "@ogw_front/utils/default_styles/constants";
+import { Status } from "@ogw_front/utils/status";
+import { cleanupBackend } from "@ogw_server/utils/cleanup";
+import { getRGBPointsFromPreset } from "@ogw_front/utils/colormap";
+import { useDataStyleStore } from "@ogw_front/stores/data_style";
+import { useViewerStore } from "@ogw_front/stores/viewer";
+
+let id = "";
+let projectFolderPath = "";
+
+describe("mesh edges", () => {
+  beforeAll(async () => {
+    ({ id, projectFolderPath } = await setupIntegrationTests(file_name, geode_object));
+  }, beforeAllTimeout);
+
+  afterAll(async () => {
+    await cleanupBackend(projectFolderPath);
+  });
+
+  describe("edges", () => {
+    describe("edges edge attribute", () => {
+      test("coloring edge attribute", async () => {
+        const dataStyleStore = useDataStyleStore();
+        const viewerStore = useViewerStore();
+
+        const spy = vi.spyOn(viewerStore, "request");
+        const edge_attribute = {
+          name: default_edge_attribute.name,
+          item: default_edge_attribute.item,
+          minimum: range[0],
+          maximum: range[1],
+          colorMap: "batlow",
+        };
+        await dataStyleStore.setMeshEdgesEdgeAttribute(id, edge_attribute);
+        const schema = mesh_edges_schemas.attribute.edge.attribute;
+        const points = getRGBPointsFromPreset(edge_attribute.colorMap);
+        const params = {
+          id,
+          name: edge_attribute.name,
+          item: edge_attribute.item,
+          points,
+          minimum: edge_attribute.minimum,
+          maximum: edge_attribute.maximum,
+          no_data_color: DEFAULT_NO_DATA_COLOR,
+        };
+        expect(spy).toHaveBeenCalledWith({ schema, params });
+        expect(dataStyleStore.meshEdgesEdgeAttributeName(id)).toBe(edge_attribute.name);
+        expect(viewerStore.status).toBe(Status.CONNECTED);
+      });
+
+      test("stored configs 1 - select attribute edges and item 2", async () => {
+        const dataStyleStore = useDataStyleStore();
+        const edge_attribute = { name: "edges", item: 2 };
+        await dataStyleStore.setMeshEdgesEdgeAttributeName(id, edge_attribute.name);
+        await dataStyleStore.setMeshEdgesEdgeAttributeItem(id, edge_attribute.item);
+        expect(dataStyleStore.meshEdgesEdgeAttributeName(id)).toBe(edge_attribute.name);
+        expect(dataStyleStore.meshEdgesEdgeAttributeItem(id)).toBe(edge_attribute.item);
+      });
+
+      test("stored configs 2 - set range and colormap", async () => {
+        const dataStyleStore = useDataStyleStore();
+        await dataStyleStore.setMeshEdgesEdgeAttributeRange(id, range[0], range[1]);
+        await dataStyleStore.setMeshEdgesEdgeAttributeColorMap(id, "budaS");
+        expect(dataStyleStore.meshEdgesEdgeAttributeRange(id)).toStrictEqual(range);
+        expect(dataStyleStore.meshEdgesEdgeAttributeColorMap(id)).toBe("budaS");
+      });
+
+      test("stored configs 3 - select cycle_id", async () => {
+        const dataStyleStore = useDataStyleStore();
+        await dataStyleStore.setMeshEdgesEdgeAttributeName(id, "cycle_id");
+        await dataStyleStore.setMeshEdgesEdgeAttributeItem(id, 0);
+        expect(dataStyleStore.meshEdgesEdgeAttributeName(id)).toBe("cycle_id");
+        expect(dataStyleStore.meshEdgesEdgeAttributeItem(id)).toBe(0);
+      });
+
+      test("stored configs 4 - switch back to edges and verify restoration", async () => {
+        const dataStyleStore = useDataStyleStore();
+        const edge_attribute = { name: "edges", item: 2 };
+        await dataStyleStore.setMeshEdgesEdgeAttributeName(id, edge_attribute.name);
+        expect(dataStyleStore.meshEdgesEdgeAttributeName(id)).toBe(edge_attribute.name);
+        expect(dataStyleStore.meshEdgesEdgeAttributeItem(id)).toBe(edge_attribute.item);
+        expect(dataStyleStore.meshEdgesEdgeAttributeRange(id)).toStrictEqual(range);
+        expect(dataStyleStore.meshEdgesEdgeAttributeColorMap(id)).toBe("budaS");
+      });
+    });
+
+    test("coloring color", async () => {
+      const dataStyleStore = useDataStyleStore();
+      const viewerStore = useViewerStore();
+      const coloringName = "constant";
+      const result = dataStyleStore.setMeshEdgesActiveColoring(id, coloringName);
+      expect(result).toBeInstanceOf(Promise);
+      await result;
+      expect(dataStyleStore.meshEdgesActiveColoring(id)).toBe(coloringName);
+      expect(viewerStore.status).toBe(Status.CONNECTED);
+    });
+
+    test("coloring vertex", async () => {
+      const dataStyleStore = useDataStyleStore();
+      const viewerStore = useViewerStore();
+      await dataStyleStore.setMeshEdgesVertexAttributeName(id, default_vertex_attribute.name);
+      const coloringName = "vertex";
+      const result = dataStyleStore.setMeshEdgesActiveColoring(id, coloringName);
+      expect(result).toBeInstanceOf(Promise);
+      await result;
+      expect(dataStyleStore.meshEdgesActiveColoring(id)).toBe(coloringName);
+      expect(viewerStore.status).toBe(Status.CONNECTED);
+    });
+
+    test("coloring edge", async () => {
+      const dataStyleStore = useDataStyleStore();
+      const viewerStore = useViewerStore();
+      await dataStyleStore.setMeshEdgesEdgeAttributeName(id, default_edge_attribute.name);
+      const coloringName = "edge";
+      const result = dataStyleStore.setMeshEdgesActiveColoring(id, coloringName);
+      expect(result).toBeInstanceOf(Promise);
+      await result;
+      expect(dataStyleStore.meshEdgesActiveColoring(id)).toBe(coloringName);
+      expect(viewerStore.status).toBe(Status.CONNECTED);
+    });
+
+    test("edges apply style", async () => {
+      const dataStyleStore = useDataStyleStore();
+      const viewerStore = useViewerStore();
+      const result = dataStyleStore.applyMeshEdgesStyle(id);
+      expect(result).toBeInstanceOf(Promise);
+      await result;
+      expect(viewerStore.status).toBe(Status.CONNECTED);
+    });
+  });
+});
diff --git a/tests/integration/stores/data_style/mesh/edges_helpers.ts b/tests/integration/stores/data_style/mesh/edges_helpers.ts
new file mode 100644
index 000000000..a13c96b7f
--- /dev/null
+++ b/tests/integration/stores/data_style/mesh/edges_helpers.ts
@@ -0,0 +1,21 @@
+// Third party imports
+import viewer_schemas from "@geode/opengeodeweb-viewer/opengeodeweb_viewer_typed_schemas.js";
+
+// Local constants
+const mesh_edges_schemas = viewer_schemas.opengeodeweb_viewer.mesh.edges;
+const file_name = "test.og_edc3d";
+const geode_object = "EdgedCurve3D";
+const MINIMUM_RANGE = 10;
+const MAXIMUM_RANGE = 20;
+const range: [number, number] = [MINIMUM_RANGE, MAXIMUM_RANGE];
+const default_vertex_attribute = { name: "vertex_attribute", item: 0, range };
+const default_edge_attribute = { name: "edge_attribute", item: 0, range };
+
+export {
+  default_edge_attribute,
+  default_vertex_attribute,
+  file_name,
+  geode_object,
+  mesh_edges_schemas,
+  range,
+};
diff --git a/tests/integration/stores/data_style/mesh/polygons.nuxt.test.ts b/tests/integration/stores/data_style/mesh/polygons.nuxt.test.ts
index 8aebae06d..93c1256da 100644
--- a/tests/integration/stores/data_style/mesh/polygons.nuxt.test.ts
+++ b/tests/integration/stores/data_style/mesh/polygons.nuxt.test.ts
@@ -1,9 +1,16 @@
 // Third party imports
 import { afterAll, beforeAll, describe, expect, test, vi } from "vitest";
-import viewer_schemas from "@geode/opengeodeweb-viewer/opengeodeweb_viewer_typed_schemas.js";
 
 // Local imports
 import { beforeAllTimeout, setupIntegrationTests } from "@ogw_tests/integration/setup";
+import {
+  default_vertex_attribute,
+  file_name,
+  geode_object,
+  mesh_points_schemas,
+  mesh_polygons_schemas,
+  range,
+} from "@ogw_tests/integration/stores/data_style/mesh/polygons_helpers";
 import { DEFAULT_NO_DATA_COLOR } from "@ogw_front/utils/default_styles/constants";
 import { Status } from "@ogw_front/utils/status";
 import { cleanupBackend } from "@ogw_server/utils/cleanup";
@@ -11,17 +18,6 @@ import { getRGBPointsFromPreset } from "@ogw_front/utils/colormap";
 import { useDataStyleStore } from "@ogw_front/stores/data_style";
 import { useViewerStore } from "@ogw_front/stores/viewer";
 
-// Local constants
-const mesh_polygons_schemas = viewer_schemas.opengeodeweb_viewer.mesh.polygons;
-const mesh_points_schemas = viewer_schemas.opengeodeweb_viewer.mesh.points;
-const file_name = "test.og_psf3d";
-const geode_object = "PolygonalSurface3D";
-const MINIMUM_RANGE = 10;
-const MAXIMUM_RANGE = 20;
-const range: [number, number] = [MINIMUM_RANGE, MAXIMUM_RANGE];
-const default_vertex_attribute = { name: "points", item: 0, range };
-const default_polygon_attribute = { name: "test_attribute", item: 0, range };
-
 let id = "";
 let projectFolderPath = "";
 
@@ -147,137 +143,6 @@ describe("mesh polygons", () => {
     });
   });
 
-  describe("polygons polygon attribute", () => {
-    test("coloring polygon attribute", async () => {
-      const dataStyleStore = useDataStyleStore();
-      const viewerStore = useViewerStore();
-      const spy = vi.spyOn(viewerStore, "request");
-      const polygon_attribute = {
-        name: default_polygon_attribute.name,
-        item: default_polygon_attribute.item,
-        minimum: range[0],
-        maximum: range[1],
-        colorMap: "batlow",
-      };
-      const result = dataStyleStore.setMeshPolygonsPolygonAttribute(id, polygon_attribute);
-      expect(result).toBeInstanceOf(Promise);
-      await result;
-      const schema = mesh_polygons_schemas.attribute.polygon.attribute;
-      const points = getRGBPointsFromPreset(polygon_attribute.colorMap);
-      const params = {
-        id,
-        name: polygon_attribute.name,
-        item: polygon_attribute.item,
-        points,
-        minimum: polygon_attribute.minimum,
-        maximum: polygon_attribute.maximum,
-        no_data_color: DEFAULT_NO_DATA_COLOR,
-      };
-      expect(spy).toHaveBeenCalledWith({ schema, params });
-      expect(dataStyleStore.meshPolygonsPolygonAttributeName(id)).toBe(polygon_attribute.name);
-      expect(viewerStore.status).toBe(Status.CONNECTED);
-    });
-
-    test("stored configs 1 - select attribute test_attribute and item 2", async () => {
-      const dataStyleStore = useDataStyleStore();
-      const polygon_attribute = { name: "test_attribute", item: 2 };
-      await dataStyleStore.setMeshPolygonsPolygonAttributeName(id, polygon_attribute.name);
-      await dataStyleStore.setMeshPolygonsPolygonAttributeItem(id, polygon_attribute.item);
-      expect(dataStyleStore.meshPolygonsPolygonAttributeName(id)).toBe(polygon_attribute.name);
-      expect(dataStyleStore.meshPolygonsPolygonAttributeItem(id)).toBe(polygon_attribute.item);
-    });
-
-    test("stored configs 2 - set range and colormap", async () => {
-      const dataStyleStore = useDataStyleStore();
-      await dataStyleStore.setMeshPolygonsPolygonAttributeRange(id, range[0], range[1]);
-      await dataStyleStore.setMeshPolygonsPolygonAttributeColorMap(id, "budaS");
-      expect(dataStyleStore.meshPolygonsPolygonAttributeRange(id)).toStrictEqual(range);
-      expect(dataStyleStore.meshPolygonsPolygonAttributeColorMap(id)).toBe("budaS");
-    });
-
-    test("stored configs 3 - select dummy_attribute", async () => {
-      const dataStyleStore = useDataStyleStore();
-      await dataStyleStore.setMeshPolygonsPolygonAttributeName(id, "dummy_attribute");
-      await dataStyleStore.setMeshPolygonsPolygonAttributeItem(id, 0);
-      expect(dataStyleStore.meshPolygonsPolygonAttributeName(id)).toBe("dummy_attribute");
-      expect(dataStyleStore.meshPolygonsPolygonAttributeItem(id)).toBe(0);
-    });
-
-    test("stored configs 4 - switch back to test_attribute and verify restoration", async () => {
-      const dataStyleStore = useDataStyleStore();
-      const polygon_attribute = { name: "test_attribute", item: 2 };
-      await dataStyleStore.setMeshPolygonsPolygonAttributeName(id, polygon_attribute.name);
-      expect(dataStyleStore.meshPolygonsPolygonAttributeName(id)).toBe(polygon_attribute.name);
-      expect(dataStyleStore.meshPolygonsPolygonAttributeItem(id)).toBe(polygon_attribute.item);
-      expect(dataStyleStore.meshPolygonsPolygonAttributeRange(id)).toStrictEqual(range);
-      expect(dataStyleStore.meshPolygonsPolygonAttributeColorMap(id)).toBe("budaS");
-    });
-  });
-
-  describe("polygons active coloring", () => {
-    test("coloring color", async () => {
-      const dataStyleStore = useDataStyleStore();
-      const viewerStore = useViewerStore();
-      const coloringName = "constant";
-      const result = dataStyleStore.setMeshPolygonsActiveColoring(id, coloringName);
-      expect(result).toBeInstanceOf(Promise);
-      await result;
-      expect(dataStyleStore.meshPolygonsActiveColoring(id)).toBe(coloringName);
-      expect(viewerStore.status).toBe(Status.CONNECTED);
-    });
-
-    test("coloring vertex", async () => {
-      const dataStyleStore = useDataStyleStore();
-      const viewerStore = useViewerStore();
-      await dataStyleStore.setMeshPolygonsVertexAttributeName(id, default_vertex_attribute.name);
-      const coloringName = "vertex";
-      const result = dataStyleStore.setMeshPolygonsActiveColoring(id, coloringName);
-      expect(result).toBeInstanceOf(Promise);
-      await result;
-      expect(dataStyleStore.meshPolygonsActiveColoring(id)).toBe(coloringName);
-      expect(viewerStore.status).toBe(Status.CONNECTED);
-    });
-
-    test("coloring polygon", async () => {
-      const dataStyleStore = useDataStyleStore();
-      const viewerStore = useViewerStore();
-      await dataStyleStore.setMeshPolygonsPolygonAttributeName(id, default_polygon_attribute.name);
-      const coloringName = "polygon";
-      const result = dataStyleStore.setMeshPolygonsActiveColoring(id, coloringName);
-      expect(result).toBeInstanceOf(Promise);
-      await result;
-      expect(dataStyleStore.meshPolygonsActiveColoring(id)).toBe(coloringName);
-      expect(viewerStore.status).toBe(Status.CONNECTED);
-    });
-
-    test("coloring textures without textures", async () => {
-      const dataStyleStore = useDataStyleStore();
-      const viewerStore = useViewerStore();
-      const spy = vi.spyOn(viewerStore, "request");
-      const coloringName = "textures";
-      const result = dataStyleStore.setMeshPolygonsActiveColoring(id, coloringName);
-      expect(result).toBeInstanceOf(Promise);
-      await result;
-      expect(spy).not.toHaveBeenCalledWith(
-        // oxlint-disable-next-line no-unsafe-assignment -- expect.objectContaining is untyped by design, this is a vitest matcher.
-        expect.objectContaining({ schema: viewer_schemas.opengeodeweb_viewer.mesh.apply_textures }),
-        // oxlint-disable-next-line no-unsafe-assignment -- expect.anything is untyped by design, this is a vitest matcher.
-        expect.anything(),
-      );
-      expect(dataStyleStore.meshPolygonsActiveColoring(id)).toBe(coloringName);
-      expect(viewerStore.status).toBe(Status.CONNECTED);
-    });
-  });
-
-  test("polygons apply default style", async () => {
-    const dataStyleStore = useDataStyleStore();
-    const viewerStore = useViewerStore();
-    const result = dataStyleStore.applyMeshPolygonsStyle(id);
-    expect(result).toBeInstanceOf(Promise);
-    await result;
-    expect(viewerStore.status).toBe(Status.CONNECTED);
-  });
-
   describe("points vertex attribute", () => {
     test("points vertex attribute", async () => {
       const dataStyleStore = useDataStyleStore();
diff --git a/tests/integration/stores/data_style/mesh/polygons_helpers.ts b/tests/integration/stores/data_style/mesh/polygons_helpers.ts
new file mode 100644
index 000000000..a97d385f6
--- /dev/null
+++ b/tests/integration/stores/data_style/mesh/polygons_helpers.ts
@@ -0,0 +1,23 @@
+// Third party imports
+import viewer_schemas from "@geode/opengeodeweb-viewer/opengeodeweb_viewer_typed_schemas.js";
+
+// Local constants
+const mesh_polygons_schemas = viewer_schemas.opengeodeweb_viewer.mesh.polygons;
+const mesh_points_schemas = viewer_schemas.opengeodeweb_viewer.mesh.points;
+const file_name = "test.og_psf3d";
+const geode_object = "PolygonalSurface3D";
+const MINIMUM_RANGE = 10;
+const MAXIMUM_RANGE = 20;
+const range: [number, number] = [MINIMUM_RANGE, MAXIMUM_RANGE];
+const default_vertex_attribute = { name: "points", item: 0, range };
+const default_polygon_attribute = { name: "test_attribute", item: 0, range };
+
+export {
+  default_polygon_attribute,
+  default_vertex_attribute,
+  file_name,
+  geode_object,
+  mesh_points_schemas,
+  mesh_polygons_schemas,
+  range,
+};
diff --git a/tests/integration/stores/data_style/mesh/polygons_polygon_attribute.nuxt.test.ts b/tests/integration/stores/data_style/mesh/polygons_polygon_attribute.nuxt.test.ts
new file mode 100644
index 000000000..8ca79c6a2
--- /dev/null
+++ b/tests/integration/stores/data_style/mesh/polygons_polygon_attribute.nuxt.test.ts
@@ -0,0 +1,164 @@
+// Third party imports
+import { afterAll, beforeAll, describe, expect, test, vi } from "vitest";
+import viewer_schemas from "@geode/opengeodeweb-viewer/opengeodeweb_viewer_typed_schemas.js";
+
+// Local imports
+import { beforeAllTimeout, setupIntegrationTests } from "@ogw_tests/integration/setup";
+import {
+  default_polygon_attribute,
+  default_vertex_attribute,
+  file_name,
+  geode_object,
+  mesh_polygons_schemas,
+  range,
+} from "@ogw_tests/integration/stores/data_style/mesh/polygons_helpers";
+import { DEFAULT_NO_DATA_COLOR } from "@ogw_front/utils/default_styles/constants";
+import { Status } from "@ogw_front/utils/status";
+import { cleanupBackend } from "@ogw_server/utils/cleanup";
+import { getRGBPointsFromPreset } from "@ogw_front/utils/colormap";
+import { useDataStyleStore } from "@ogw_front/stores/data_style";
+import { useViewerStore } from "@ogw_front/stores/viewer";
+
+let id = "";
+let projectFolderPath = "";
+
+describe("mesh polygons", () => {
+  beforeAll(async () => {
+    ({ id, projectFolderPath } = await setupIntegrationTests(file_name, geode_object));
+  }, beforeAllTimeout);
+
+  afterAll(async () => {
+    await cleanupBackend(projectFolderPath);
+  });
+
+  describe("polygons polygon attribute", () => {
+    test("coloring polygon attribute", async () => {
+      const dataStyleStore = useDataStyleStore();
+      const viewerStore = useViewerStore();
+      const spy = vi.spyOn(viewerStore, "request");
+      const polygon_attribute = {
+        name: default_polygon_attribute.name,
+        item: default_polygon_attribute.item,
+        minimum: range[0],
+        maximum: range[1],
+        colorMap: "batlow",
+      };
+      const result = dataStyleStore.setMeshPolygonsPolygonAttribute(id, polygon_attribute);
+      expect(result).toBeInstanceOf(Promise);
+      await result;
+      const schema = mesh_polygons_schemas.attribute.polygon.attribute;
+      const points = getRGBPointsFromPreset(polygon_attribute.colorMap);
+      const params = {
+        id,
+        name: polygon_attribute.name,
+        item: polygon_attribute.item,
+        points,
+        minimum: polygon_attribute.minimum,
+        maximum: polygon_attribute.maximum,
+        no_data_color: DEFAULT_NO_DATA_COLOR,
+      };
+      expect(spy).toHaveBeenCalledWith({ schema, params });
+      expect(dataStyleStore.meshPolygonsPolygonAttributeName(id)).toBe(polygon_attribute.name);
+      expect(viewerStore.status).toBe(Status.CONNECTED);
+    });
+
+    test("stored configs 1 - select attribute test_attribute and item 2", async () => {
+      const dataStyleStore = useDataStyleStore();
+      const polygon_attribute = { name: "test_attribute", item: 2 };
+      await dataStyleStore.setMeshPolygonsPolygonAttributeName(id, polygon_attribute.name);
+      await dataStyleStore.setMeshPolygonsPolygonAttributeItem(id, polygon_attribute.item);
+      expect(dataStyleStore.meshPolygonsPolygonAttributeName(id)).toBe(polygon_attribute.name);
+      expect(dataStyleStore.meshPolygonsPolygonAttributeItem(id)).toBe(polygon_attribute.item);
+    });
+
+    test("stored configs 2 - set range and colormap", async () => {
+      const dataStyleStore = useDataStyleStore();
+      await dataStyleStore.setMeshPolygonsPolygonAttributeRange(id, range[0], range[1]);
+      await dataStyleStore.setMeshPolygonsPolygonAttributeColorMap(id, "budaS");
+      expect(dataStyleStore.meshPolygonsPolygonAttributeRange(id)).toStrictEqual(range);
+      expect(dataStyleStore.meshPolygonsPolygonAttributeColorMap(id)).toBe("budaS");
+    });
+
+    test("stored configs 3 - select dummy_attribute", async () => {
+      const dataStyleStore = useDataStyleStore();
+      await dataStyleStore.setMeshPolygonsPolygonAttributeName(id, "dummy_attribute");
+      await dataStyleStore.setMeshPolygonsPolygonAttributeItem(id, 0);
+      expect(dataStyleStore.meshPolygonsPolygonAttributeName(id)).toBe("dummy_attribute");
+      expect(dataStyleStore.meshPolygonsPolygonAttributeItem(id)).toBe(0);
+    });
+
+    test("stored configs 4 - switch back to test_attribute and verify restoration", async () => {
+      const dataStyleStore = useDataStyleStore();
+      const polygon_attribute = { name: "test_attribute", item: 2 };
+      await dataStyleStore.setMeshPolygonsPolygonAttributeName(id, polygon_attribute.name);
+      expect(dataStyleStore.meshPolygonsPolygonAttributeName(id)).toBe(polygon_attribute.name);
+      expect(dataStyleStore.meshPolygonsPolygonAttributeItem(id)).toBe(polygon_attribute.item);
+      expect(dataStyleStore.meshPolygonsPolygonAttributeRange(id)).toStrictEqual(range);
+      expect(dataStyleStore.meshPolygonsPolygonAttributeColorMap(id)).toBe("budaS");
+    });
+  });
+
+  describe("polygons active coloring", () => {
+    test("coloring color", async () => {
+      const dataStyleStore = useDataStyleStore();
+      const viewerStore = useViewerStore();
+      const coloringName = "constant";
+      const result = dataStyleStore.setMeshPolygonsActiveColoring(id, coloringName);
+      expect(result).toBeInstanceOf(Promise);
+      await result;
+      expect(dataStyleStore.meshPolygonsActiveColoring(id)).toBe(coloringName);
+      expect(viewerStore.status).toBe(Status.CONNECTED);
+    });
+
+    test("coloring vertex", async () => {
+      const dataStyleStore = useDataStyleStore();
+      const viewerStore = useViewerStore();
+      await dataStyleStore.setMeshPolygonsVertexAttributeName(id, default_vertex_attribute.name);
+      const coloringName = "vertex";
+      const result = dataStyleStore.setMeshPolygonsActiveColoring(id, coloringName);
+      expect(result).toBeInstanceOf(Promise);
+      await result;
+      expect(dataStyleStore.meshPolygonsActiveColoring(id)).toBe(coloringName);
+      expect(viewerStore.status).toBe(Status.CONNECTED);
+    });
+
+    test("coloring polygon", async () => {
+      const dataStyleStore = useDataStyleStore();
+      const viewerStore = useViewerStore();
+      await dataStyleStore.setMeshPolygonsPolygonAttributeName(id, default_polygon_attribute.name);
+      const coloringName = "polygon";
+      const result = dataStyleStore.setMeshPolygonsActiveColoring(id, coloringName);
+      expect(result).toBeInstanceOf(Promise);
+      await result;
+      expect(dataStyleStore.meshPolygonsActiveColoring(id)).toBe(coloringName);
+      expect(viewerStore.status).toBe(Status.CONNECTED);
+    });
+
+    test("coloring textures without textures", async () => {
+      const dataStyleStore = useDataStyleStore();
+      const viewerStore = useViewerStore();
+      const spy = vi.spyOn(viewerStore, "request");
+      const coloringName = "textures";
+      const result = dataStyleStore.setMeshPolygonsActiveColoring(id, coloringName);
+      expect(result).toBeInstanceOf(Promise);
+      await result;
+      expect(spy).not.toHaveBeenCalledWith(
+        // oxlint-disable-next-line no-unsafe-assignment -- expect.objectContaining is untyped by design, this is a vitest matcher.
+        expect.objectContaining({ schema: viewer_schemas.opengeodeweb_viewer.mesh.apply_textures }),
+        // oxlint-disable-next-line no-unsafe-assignment -- expect.anything is untyped by design, this is a vitest matcher.
+        expect.anything(),
+      );
+      expect(dataStyleStore.meshPolygonsActiveColoring(id)).toBe(coloringName);
+      expect(viewerStore.status).toBe(Status.CONNECTED);
+    });
+  });
+
+  test("polygons apply default style", async () => {
+    const dataStyleStore = useDataStyleStore();
+    const viewerStore = useViewerStore();
+    const result = dataStyleStore.applyMeshPolygonsStyle(id);
+    expect(result).toBeInstanceOf(Promise);
+    await result;
+    expect(viewerStore.status).toBe(Status.CONNECTED);
+  });
+});
diff --git a/tests/integration/stores/data_style/mesh/polyhedra.nuxt.test.ts b/tests/integration/stores/data_style/mesh/polyhedra.nuxt.test.ts
index 66664c6e1..29211b485 100644
--- a/tests/integration/stores/data_style/mesh/polyhedra.nuxt.test.ts
+++ b/tests/integration/stores/data_style/mesh/polyhedra.nuxt.test.ts
@@ -1,9 +1,17 @@
 // Third party imports
 import { afterAll, beforeAll, describe, expect, test, vi } from "vitest";
-import viewer_schemas from "@geode/opengeodeweb-viewer/opengeodeweb_viewer_typed_schemas.js";
 
 // Local imports
 import { beforeAllTimeout, setupIntegrationTests } from "@ogw_tests/integration/setup";
+import {
+  default_polyhedron_attribute,
+  default_vertex_attribute,
+  file_name,
+  geode_object,
+  mesh_points_schemas,
+  mesh_polyhedra_schemas,
+  range,
+} from "@ogw_tests/integration/stores/data_style/mesh/polyhedra_helpers";
 import { DEFAULT_NO_DATA_COLOR } from "@ogw_front/utils/default_styles/constants";
 import { Status } from "@ogw_front/utils/status";
 import { cleanupBackend } from "@ogw_server/utils/cleanup";
@@ -11,17 +19,6 @@ import { getRGBPointsFromPreset } from "@ogw_front/utils/colormap";
 import { useDataStyleStore } from "@ogw_front/stores/data_style";
 import { useViewerStore } from "@ogw_front/stores/viewer";
 
-// Local constants
-const mesh_polyhedra_schemas = viewer_schemas.opengeodeweb_viewer.mesh.polyhedra;
-const mesh_points_schemas = viewer_schemas.opengeodeweb_viewer.mesh.points;
-const file_name = "test.vtu";
-const geode_object = "HybridSolid3D";
-const MINIMUM_RANGE = 10;
-const MAXIMUM_RANGE = 20;
-const range: [number, number] = [MINIMUM_RANGE, MAXIMUM_RANGE];
-const default_vertex_attribute = { name: "toto_on_vertices", item: 0, range };
-const default_polyhedron_attribute = { name: "toto_on_polyhedra", item: 0, range };
-
 let id = "";
 let projectFolderPath = "";
 
@@ -116,148 +113,6 @@ describe("mesh polyhedra", () => {
     });
   });
 
-  describe("polyhedra vertex attribute", () => {
-    test("coloring vertex attribute", async () => {
-      const dataStyleStore = useDataStyleStore();
-      const viewerStore = useViewerStore();
-
-      const spy = vi.spyOn(viewerStore, "request");
-      const vertex_attribute = {
-        name: default_vertex_attribute.name,
-        item: default_vertex_attribute.item,
-        minimum: range[0],
-        maximum: range[1],
-        colorMap: "batlow",
-      };
-      await dataStyleStore.setMeshPolyhedraVertexAttribute(id, vertex_attribute);
-      const schema = mesh_polyhedra_schemas.attribute.vertex.attribute;
-      const points = getRGBPointsFromPreset(vertex_attribute.colorMap);
-      const params = {
-        id,
-        name: vertex_attribute.name,
-        item: vertex_attribute.item,
-        points,
-        minimum: vertex_attribute.minimum,
-        maximum: vertex_attribute.maximum,
-        no_data_color: DEFAULT_NO_DATA_COLOR,
-      };
-      expect(spy).toHaveBeenCalledWith({ schema, params });
-      expect(dataStyleStore.meshPolyhedraVertexAttributeName(id)).toBe(vertex_attribute.name);
-      expect(viewerStore.status).toBe(Status.CONNECTED);
-    });
-
-    test("stored configs 1 - select attribute points and item 2", async () => {
-      const dataStyleStore = useDataStyleStore();
-      const vertex_attribute = { name: "points", item: 2 };
-      await dataStyleStore.setMeshPolyhedraVertexAttributeName(id, vertex_attribute.name);
-      await dataStyleStore.setMeshPolyhedraVertexAttributeItem(id, vertex_attribute.item);
-      expect(dataStyleStore.meshPolyhedraVertexAttributeName(id)).toBe(vertex_attribute.name);
-      expect(dataStyleStore.meshPolyhedraVertexAttributeItem(id)).toBe(vertex_attribute.item);
-    });
-
-    test("stored configs 2 - set range and colormap", async () => {
-      const dataStyleStore = useDataStyleStore();
-      await dataStyleStore.setMeshPolyhedraVertexAttributeRange(id, range[0], range[1]);
-      await dataStyleStore.setMeshPolyhedraVertexAttributeColorMap(id, "budaS");
-      expect(dataStyleStore.meshPolyhedraVertexAttributeRange(id)).toStrictEqual(range);
-      expect(dataStyleStore.meshPolyhedraVertexAttributeColorMap(id)).toBe("budaS");
-    });
-
-    test("stored configs 3 - select polyhedra_around_vertex", async () => {
-      const dataStyleStore = useDataStyleStore();
-      await dataStyleStore.setMeshPolyhedraVertexAttributeName(id, "polyhedra_around_vertex");
-      await dataStyleStore.setMeshPolyhedraVertexAttributeItem(id, 0);
-      expect(dataStyleStore.meshPolyhedraVertexAttributeName(id)).toBe("polyhedra_around_vertex");
-      expect(dataStyleStore.meshPolyhedraVertexAttributeItem(id)).toBe(0);
-    });
-
-    test("stored configs 4 - switch back to points and verify restoration", async () => {
-      const dataStyleStore = useDataStyleStore();
-      const vertex_attribute = { name: "points", item: 2 };
-      await dataStyleStore.setMeshPolyhedraVertexAttributeName(id, vertex_attribute.name);
-      expect(dataStyleStore.meshPolyhedraVertexAttributeName(id)).toBe(vertex_attribute.name);
-      expect(dataStyleStore.meshPolyhedraVertexAttributeItem(id)).toBe(vertex_attribute.item);
-      expect(dataStyleStore.meshPolyhedraVertexAttributeRange(id)).toStrictEqual(range);
-      expect(dataStyleStore.meshPolyhedraVertexAttributeColorMap(id)).toBe("budaS");
-    });
-  });
-
-  describe("polyhedra polyhedron attribute", () => {
-    test("polyhedra polyhedron attribute", async () => {
-      const dataStyleStore = useDataStyleStore();
-      const viewerStore = useViewerStore();
-
-      const spy = vi.spyOn(viewerStore, "request");
-      const polyhedron_attribute = {
-        name: default_polyhedron_attribute.name,
-        item: default_polyhedron_attribute.item,
-        minimum: range[0],
-        maximum: range[1],
-        colorMap: "batlow",
-      };
-      await dataStyleStore.setMeshPolyhedraPolyhedronAttribute(id, polyhedron_attribute);
-      const schema = mesh_polyhedra_schemas.attribute.polyhedron.attribute;
-      const points = getRGBPointsFromPreset(polyhedron_attribute.colorMap);
-      const params = {
-        id,
-        name: polyhedron_attribute.name,
-        item: polyhedron_attribute.item,
-        points,
-        minimum: polyhedron_attribute.minimum,
-        maximum: polyhedron_attribute.maximum,
-        no_data_color: DEFAULT_NO_DATA_COLOR,
-      };
-      expect(spy).toHaveBeenCalledWith({ schema, params });
-      expect(dataStyleStore.meshPolyhedraPolyhedronAttributeName(id)).toBe(
-        polyhedron_attribute.name,
-      );
-      expect(viewerStore.status).toBe(Status.CONNECTED);
-    });
-
-    test("stored configs 1 - select attribute tetrahedron_vertices and item 2", async () => {
-      const dataStyleStore = useDataStyleStore();
-      const polyhedron_attribute = { name: "tetrahedron_vertices", item: 2 };
-      await dataStyleStore.setMeshPolyhedraPolyhedronAttributeName(id, polyhedron_attribute.name);
-      await dataStyleStore.setMeshPolyhedraPolyhedronAttributeItem(id, polyhedron_attribute.item);
-      expect(dataStyleStore.meshPolyhedraPolyhedronAttributeName(id)).toBe(
-        polyhedron_attribute.name,
-      );
-      expect(dataStyleStore.meshPolyhedraPolyhedronAttributeItem(id)).toBe(
-        polyhedron_attribute.item,
-      );
-    });
-
-    test("stored configs 2 - set range and colormap", async () => {
-      const dataStyleStore = useDataStyleStore();
-      await dataStyleStore.setMeshPolyhedraPolyhedronAttributeRange(id, range[0], range[1]);
-      await dataStyleStore.setMeshPolyhedraPolyhedronAttributeColorMap(id, "budaS");
-      expect(dataStyleStore.meshPolyhedraPolyhedronAttributeRange(id)).toStrictEqual(range);
-      expect(dataStyleStore.meshPolyhedraPolyhedronAttributeColorMap(id)).toBe("budaS");
-    });
-
-    test("stored configs 3 - select tetrahedron_adjacents", async () => {
-      const dataStyleStore = useDataStyleStore();
-      await dataStyleStore.setMeshPolyhedraPolyhedronAttributeName(id, "tetrahedron_adjacents");
-      await dataStyleStore.setMeshPolyhedraPolyhedronAttributeItem(id, 0);
-      expect(dataStyleStore.meshPolyhedraPolyhedronAttributeName(id)).toBe("tetrahedron_adjacents");
-      expect(dataStyleStore.meshPolyhedraPolyhedronAttributeItem(id)).toBe(0);
-    });
-
-    test("stored configs 4 - switch back to tetrahedron_vertices and verify restoration", async () => {
-      const dataStyleStore = useDataStyleStore();
-      const polyhedron_attribute = { name: "tetrahedron_vertices", item: 2 };
-      await dataStyleStore.setMeshPolyhedraPolyhedronAttributeName(id, polyhedron_attribute.name);
-      expect(dataStyleStore.meshPolyhedraPolyhedronAttributeName(id)).toBe(
-        polyhedron_attribute.name,
-      );
-      expect(dataStyleStore.meshPolyhedraPolyhedronAttributeItem(id)).toBe(
-        polyhedron_attribute.item,
-      );
-      expect(dataStyleStore.meshPolyhedraPolyhedronAttributeRange(id)).toStrictEqual(range);
-      expect(dataStyleStore.meshPolyhedraPolyhedronAttributeColorMap(id)).toBe("budaS");
-    });
-  });
-
   test("polyhedra apply default style", async () => {
     const dataStyleStore = useDataStyleStore();
     const viewerStore = useViewerStore();
diff --git a/tests/integration/stores/data_style/mesh/polyhedra_attributes.nuxt.test.ts b/tests/integration/stores/data_style/mesh/polyhedra_attributes.nuxt.test.ts
new file mode 100644
index 000000000..0b3ad655e
--- /dev/null
+++ b/tests/integration/stores/data_style/mesh/polyhedra_attributes.nuxt.test.ts
@@ -0,0 +1,174 @@
+// Third party imports
+import { afterAll, beforeAll, describe, expect, test, vi } from "vitest";
+
+// Local imports
+import { beforeAllTimeout, setupIntegrationTests } from "@ogw_tests/integration/setup";
+import {
+  default_polyhedron_attribute,
+  default_vertex_attribute,
+  file_name,
+  geode_object,
+  mesh_polyhedra_schemas,
+  range,
+} from "@ogw_tests/integration/stores/data_style/mesh/polyhedra_helpers";
+import { DEFAULT_NO_DATA_COLOR } from "@ogw_front/utils/default_styles/constants";
+import { Status } from "@ogw_front/utils/status";
+import { cleanupBackend } from "@ogw_server/utils/cleanup";
+import { getRGBPointsFromPreset } from "@ogw_front/utils/colormap";
+import { useDataStyleStore } from "@ogw_front/stores/data_style";
+import { useViewerStore } from "@ogw_front/stores/viewer";
+
+let id = "";
+let projectFolderPath = "";
+
+describe("mesh polyhedra", () => {
+  beforeAll(async () => {
+    ({ id, projectFolderPath } = await setupIntegrationTests(file_name, geode_object));
+  }, beforeAllTimeout);
+
+  afterAll(async () => {
+    await cleanupBackend(projectFolderPath);
+  });
+
+  describe("polyhedra vertex attribute", () => {
+    test("coloring vertex attribute", async () => {
+      const dataStyleStore = useDataStyleStore();
+      const viewerStore = useViewerStore();
+
+      const spy = vi.spyOn(viewerStore, "request");
+      const vertex_attribute = {
+        name: default_vertex_attribute.name,
+        item: default_vertex_attribute.item,
+        minimum: range[0],
+        maximum: range[1],
+        colorMap: "batlow",
+      };
+      await dataStyleStore.setMeshPolyhedraVertexAttribute(id, vertex_attribute);
+      const schema = mesh_polyhedra_schemas.attribute.vertex.attribute;
+      const points = getRGBPointsFromPreset(vertex_attribute.colorMap);
+      const params = {
+        id,
+        name: vertex_attribute.name,
+        item: vertex_attribute.item,
+        points,
+        minimum: vertex_attribute.minimum,
+        maximum: vertex_attribute.maximum,
+        no_data_color: DEFAULT_NO_DATA_COLOR,
+      };
+      expect(spy).toHaveBeenCalledWith({ schema, params });
+      expect(dataStyleStore.meshPolyhedraVertexAttributeName(id)).toBe(vertex_attribute.name);
+      expect(viewerStore.status).toBe(Status.CONNECTED);
+    });
+
+    test("stored configs 1 - select attribute points and item 2", async () => {
+      const dataStyleStore = useDataStyleStore();
+      const vertex_attribute = { name: "points", item: 2 };
+      await dataStyleStore.setMeshPolyhedraVertexAttributeName(id, vertex_attribute.name);
+      await dataStyleStore.setMeshPolyhedraVertexAttributeItem(id, vertex_attribute.item);
+      expect(dataStyleStore.meshPolyhedraVertexAttributeName(id)).toBe(vertex_attribute.name);
+      expect(dataStyleStore.meshPolyhedraVertexAttributeItem(id)).toBe(vertex_attribute.item);
+    });
+
+    test("stored configs 2 - set range and colormap", async () => {
+      const dataStyleStore = useDataStyleStore();
+      await dataStyleStore.setMeshPolyhedraVertexAttributeRange(id, range[0], range[1]);
+      await dataStyleStore.setMeshPolyhedraVertexAttributeColorMap(id, "budaS");
+      expect(dataStyleStore.meshPolyhedraVertexAttributeRange(id)).toStrictEqual(range);
+      expect(dataStyleStore.meshPolyhedraVertexAttributeColorMap(id)).toBe("budaS");
+    });
+
+    test("stored configs 3 - select polyhedra_around_vertex", async () => {
+      const dataStyleStore = useDataStyleStore();
+      await dataStyleStore.setMeshPolyhedraVertexAttributeName(id, "polyhedra_around_vertex");
+      await dataStyleStore.setMeshPolyhedraVertexAttributeItem(id, 0);
+      expect(dataStyleStore.meshPolyhedraVertexAttributeName(id)).toBe("polyhedra_around_vertex");
+      expect(dataStyleStore.meshPolyhedraVertexAttributeItem(id)).toBe(0);
+    });
+
+    test("stored configs 4 - switch back to points and verify restoration", async () => {
+      const dataStyleStore = useDataStyleStore();
+      const vertex_attribute = { name: "points", item: 2 };
+      await dataStyleStore.setMeshPolyhedraVertexAttributeName(id, vertex_attribute.name);
+      expect(dataStyleStore.meshPolyhedraVertexAttributeName(id)).toBe(vertex_attribute.name);
+      expect(dataStyleStore.meshPolyhedraVertexAttributeItem(id)).toBe(vertex_attribute.item);
+      expect(dataStyleStore.meshPolyhedraVertexAttributeRange(id)).toStrictEqual(range);
+      expect(dataStyleStore.meshPolyhedraVertexAttributeColorMap(id)).toBe("budaS");
+    });
+  });
+
+  describe("polyhedra polyhedron attribute", () => {
+    test("polyhedra polyhedron attribute", async () => {
+      const dataStyleStore = useDataStyleStore();
+      const viewerStore = useViewerStore();
+
+      const spy = vi.spyOn(viewerStore, "request");
+      const polyhedron_attribute = {
+        name: default_polyhedron_attribute.name,
+        item: default_polyhedron_attribute.item,
+        minimum: range[0],
+        maximum: range[1],
+        colorMap: "batlow",
+      };
+      await dataStyleStore.setMeshPolyhedraPolyhedronAttribute(id, polyhedron_attribute);
+      const schema = mesh_polyhedra_schemas.attribute.polyhedron.attribute;
+      const points = getRGBPointsFromPreset(polyhedron_attribute.colorMap);
+      const params = {
+        id,
+        name: polyhedron_attribute.name,
+        item: polyhedron_attribute.item,
+        points,
+        minimum: polyhedron_attribute.minimum,
+        maximum: polyhedron_attribute.maximum,
+        no_data_color: DEFAULT_NO_DATA_COLOR,
+      };
+      expect(spy).toHaveBeenCalledWith({ schema, params });
+      expect(dataStyleStore.meshPolyhedraPolyhedronAttributeName(id)).toBe(
+        polyhedron_attribute.name,
+      );
+      expect(viewerStore.status).toBe(Status.CONNECTED);
+    });
+
+    test("stored configs 1 - select attribute tetrahedron_vertices and item 2", async () => {
+      const dataStyleStore = useDataStyleStore();
+      const polyhedron_attribute = { name: "tetrahedron_vertices", item: 2 };
+      await dataStyleStore.setMeshPolyhedraPolyhedronAttributeName(id, polyhedron_attribute.name);
+      await dataStyleStore.setMeshPolyhedraPolyhedronAttributeItem(id, polyhedron_attribute.item);
+      expect(dataStyleStore.meshPolyhedraPolyhedronAttributeName(id)).toBe(
+        polyhedron_attribute.name,
+      );
+      expect(dataStyleStore.meshPolyhedraPolyhedronAttributeItem(id)).toBe(
+        polyhedron_attribute.item,
+      );
+    });
+
+    test("stored configs 2 - set range and colormap", async () => {
+      const dataStyleStore = useDataStyleStore();
+      await dataStyleStore.setMeshPolyhedraPolyhedronAttributeRange(id, range[0], range[1]);
+      await dataStyleStore.setMeshPolyhedraPolyhedronAttributeColorMap(id, "budaS");
+      expect(dataStyleStore.meshPolyhedraPolyhedronAttributeRange(id)).toStrictEqual(range);
+      expect(dataStyleStore.meshPolyhedraPolyhedronAttributeColorMap(id)).toBe("budaS");
+    });
+
+    test("stored configs 3 - select tetrahedron_adjacents", async () => {
+      const dataStyleStore = useDataStyleStore();
+      await dataStyleStore.setMeshPolyhedraPolyhedronAttributeName(id, "tetrahedron_adjacents");
+      await dataStyleStore.setMeshPolyhedraPolyhedronAttributeItem(id, 0);
+      expect(dataStyleStore.meshPolyhedraPolyhedronAttributeName(id)).toBe("tetrahedron_adjacents");
+      expect(dataStyleStore.meshPolyhedraPolyhedronAttributeItem(id)).toBe(0);
+    });
+
+    test("stored configs 4 - switch back to tetrahedron_vertices and verify restoration", async () => {
+      const dataStyleStore = useDataStyleStore();
+      const polyhedron_attribute = { name: "tetrahedron_vertices", item: 2 };
+      await dataStyleStore.setMeshPolyhedraPolyhedronAttributeName(id, polyhedron_attribute.name);
+      expect(dataStyleStore.meshPolyhedraPolyhedronAttributeName(id)).toBe(
+        polyhedron_attribute.name,
+      );
+      expect(dataStyleStore.meshPolyhedraPolyhedronAttributeItem(id)).toBe(
+        polyhedron_attribute.item,
+      );
+      expect(dataStyleStore.meshPolyhedraPolyhedronAttributeRange(id)).toStrictEqual(range);
+      expect(dataStyleStore.meshPolyhedraPolyhedronAttributeColorMap(id)).toBe("budaS");
+    });
+  });
+});
diff --git a/tests/integration/stores/data_style/mesh/polyhedra_helpers.ts b/tests/integration/stores/data_style/mesh/polyhedra_helpers.ts
new file mode 100644
index 000000000..70a2539cc
--- /dev/null
+++ b/tests/integration/stores/data_style/mesh/polyhedra_helpers.ts
@@ -0,0 +1,23 @@
+// Third party imports
+import viewer_schemas from "@geode/opengeodeweb-viewer/opengeodeweb_viewer_typed_schemas.js";
+
+// Local constants
+const mesh_polyhedra_schemas = viewer_schemas.opengeodeweb_viewer.mesh.polyhedra;
+const mesh_points_schemas = viewer_schemas.opengeodeweb_viewer.mesh.points;
+const file_name = "test.vtu";
+const geode_object = "HybridSolid3D";
+const MINIMUM_RANGE = 10;
+const MAXIMUM_RANGE = 20;
+const range: [number, number] = [MINIMUM_RANGE, MAXIMUM_RANGE];
+const default_vertex_attribute = { name: "toto_on_vertices", item: 0, range };
+const default_polyhedron_attribute = { name: "toto_on_polyhedra", item: 0, range };
+
+export {
+  default_polyhedron_attribute,
+  default_vertex_attribute,
+  file_name,
+  geode_object,
+  mesh_points_schemas,
+  mesh_polyhedra_schemas,
+  range,
+};
diff --git a/tests/integration/stores/data_style/model/corners.nuxt.test.ts b/tests/integration/stores/data_style/model/corners.nuxt.test.ts
index d6fa73ada..8df3d3d9f 100644
--- a/tests/integration/stores/data_style/model/corners.nuxt.test.ts
+++ b/tests/integration/stores/data_style/model/corners.nuxt.test.ts
@@ -1,8 +1,16 @@
 // Third party imports
 import { afterAll, beforeAll, describe, expect, test, vi } from "vitest";
-import viewer_schemas from "@geode/opengeodeweb-viewer/opengeodeweb_viewer_typed_schemas.js";
 
 // Local imports
+import {
+  MAXIMUM_RANGE,
+  MINIMUM_RANGE,
+  SLEEP_MS,
+  file_name,
+  geode_object,
+  model_corners_schemas,
+  sleep,
+} from "@ogw_tests/integration/stores/data_style/model/corners_helpers";
 import { beforeAllTimeout, setupIntegrationTests } from "@ogw_tests/integration/setup";
 import { DEFAULT_NO_DATA_COLOR } from "@ogw_front/utils/default_styles/constants";
 import { Status } from "@ogw_front/utils/status";
@@ -13,21 +21,6 @@ import { useDataStore } from "@ogw_front/stores/data";
 import { useDataStyleStore } from "@ogw_front/stores/data_style";
 import { useViewerStore } from "@ogw_front/stores/viewer";
 
-// Local constants
-const model_corners_schemas = viewer_schemas.opengeodeweb_viewer.model.corners;
-const file_name = "test.og_brep";
-const geode_object = "BRep";
-const SLEEP_MS = 200;
-const MINIMUM_RANGE = 10;
-const MAXIMUM_RANGE = 20;
-
-async function sleep(milliseconds: number): Promise<void> {
-  // oxlint-disable-next-line promise/avoid-new
-  await new Promise<void>((resolve) => {
-    setTimeout(resolve, milliseconds);
-  });
-}
-
 let id = "";
 let projectFolderPath = "";
 
@@ -40,66 +33,6 @@ describe("model corners", () => {
     await cleanupBackend(projectFolderPath);
   });
 
-  describe("corners visibility", () => {
-    test("visibility false", async () => {
-      const dataStyleStore = useDataStyleStore();
-      const viewerStore = useViewerStore();
-      const dataStore = useDataStore();
-      const corner_ids = await dataStore.getCornersGeodeIds(id);
-      const corner_viewer_ids = await dataStore.getMeshComponentsViewerIds(id, corner_ids);
-      const visibility = false;
-      const spy = vi.spyOn(viewerStore, "request");
-      spy.mockClear();
-      const result = dataStyleStore.setModelCornersVisibility(id, corner_ids, visibility);
-      expect(result).toBeInstanceOf(Promise);
-      await result;
-      await sleep(SLEEP_MS);
-      const schema = model_corners_schemas.visibility;
-      const params = { id, block_ids: corner_viewer_ids, visibility };
-      expect(spy).toHaveBeenCalledWith(
-        { schema, params },
-        {
-          // oxlint-disable-next-line no-unsafe-assignment -- expect.any(Function) is untyped by design, this is a vitest matcher not a real callback.
-          response_function: expect.any(Function),
-        },
-      );
-      for (const corner_id of corner_ids) {
-        expect(dataStyleStore.modelCornerVisibility(id, corner_id)).toBe(visibility);
-      }
-      expect(viewerStore.status).toBe(Status.CONNECTED);
-    });
-  });
-
-  describe("corner color", () => {
-    test("color red", async () => {
-      const dataStyleStore = useDataStyleStore();
-      const viewerStore = useViewerStore();
-      const dataStore = useDataStore();
-      const corner_ids = await dataStore.getCornersGeodeIds(id);
-      const corner_viewer_ids = await dataStore.getMeshComponentsViewerIds(id, corner_ids);
-      const color = { red: 255, green: 0, blue: 0, alpha: 1 };
-      const spy = vi.spyOn(viewerStore, "request");
-      spy.mockClear();
-      const result = dataStyleStore.setModelCornersColor(id, corner_ids, color);
-      expect(result).toBeInstanceOf(Promise);
-      await result;
-      await sleep(SLEEP_MS);
-      const schema = model_corners_schemas.color;
-      const params = { id, block_ids: corner_viewer_ids, color, color_mode: "constant" };
-      expect(spy).toHaveBeenCalledWith(
-        { schema, params },
-        {
-          // oxlint-disable-next-line no-unsafe-assignment -- expect.any(Function) is untyped by design, this is a vitest matcher not a real callback.
-          response_function: expect.any(Function),
-        },
-      );
-      for (const corner_id of corner_ids) {
-        expect(dataStyleStore.modelCornerColor(id, corner_id)).toStrictEqual(color);
-      }
-      expect(viewerStore.status).toBe(Status.CONNECTED);
-    });
-  });
-
   describe("corners vertex attribute", () => {
     test("coloring vertex attribute", () => {
       const attribute = {
diff --git a/tests/integration/stores/data_style/model/corners_helpers.ts b/tests/integration/stores/data_style/model/corners_helpers.ts
new file mode 100644
index 000000000..b3fc2fe41
--- /dev/null
+++ b/tests/integration/stores/data_style/model/corners_helpers.ts
@@ -0,0 +1,27 @@
+// Third party imports
+import viewer_schemas from "@geode/opengeodeweb-viewer/opengeodeweb_viewer_typed_schemas.js";
+
+// Local constants
+const model_corners_schemas = viewer_schemas.opengeodeweb_viewer.model.corners;
+const file_name = "test.og_brep";
+const geode_object = "BRep";
+const SLEEP_MS = 200;
+const MINIMUM_RANGE = 10;
+const MAXIMUM_RANGE = 20;
+
+async function sleep(milliseconds: number): Promise<void> {
+  // oxlint-disable-next-line promise/avoid-new
+  await new Promise<void>((resolve) => {
+    setTimeout(resolve, milliseconds);
+  });
+}
+
+export {
+  MAXIMUM_RANGE,
+  MINIMUM_RANGE,
+  SLEEP_MS,
+  file_name,
+  geode_object,
+  model_corners_schemas,
+  sleep,
+};
diff --git a/tests/integration/stores/data_style/model/corners_visibility_color.nuxt.test.ts b/tests/integration/stores/data_style/model/corners_visibility_color.nuxt.test.ts
new file mode 100644
index 000000000..51ef4b187
--- /dev/null
+++ b/tests/integration/stores/data_style/model/corners_visibility_color.nuxt.test.ts
@@ -0,0 +1,90 @@
+// Third party imports
+import { afterAll, beforeAll, describe, expect, test, vi } from "vitest";
+
+// Local imports
+import {
+  SLEEP_MS,
+  file_name,
+  geode_object,
+  model_corners_schemas,
+  sleep,
+} from "@ogw_tests/integration/stores/data_style/model/corners_helpers";
+import { beforeAllTimeout, setupIntegrationTests } from "@ogw_tests/integration/setup";
+import { Status } from "@ogw_front/utils/status";
+import { cleanupBackend } from "@ogw_server/utils/cleanup";
+import { useDataStore } from "@ogw_front/stores/data";
+import { useDataStyleStore } from "@ogw_front/stores/data_style";
+import { useViewerStore } from "@ogw_front/stores/viewer";
+
+let id = "";
+let projectFolderPath = "";
+
+describe("model corners", () => {
+  beforeAll(async () => {
+    ({ id, projectFolderPath } = await setupIntegrationTests(file_name, geode_object));
+  }, beforeAllTimeout);
+
+  afterAll(async () => {
+    await cleanupBackend(projectFolderPath);
+  });
+
+  describe("corners visibility", () => {
+    test("visibility false", async () => {
+      const dataStyleStore = useDataStyleStore();
+      const viewerStore = useViewerStore();
+      const dataStore = useDataStore();
+      const corner_ids = await dataStore.getCornersGeodeIds(id);
+      const corner_viewer_ids = await dataStore.getMeshComponentsViewerIds(id, corner_ids);
+      const visibility = false;
+      const spy = vi.spyOn(viewerStore, "request");
+      spy.mockClear();
+      const result = dataStyleStore.setModelCornersVisibility(id, corner_ids, visibility);
+      expect(result).toBeInstanceOf(Promise);
+      await result;
+      await sleep(SLEEP_MS);
+      const schema = model_corners_schemas.visibility;
+      const params = { id, block_ids: corner_viewer_ids, visibility };
+      expect(spy).toHaveBeenCalledWith(
+        { schema, params },
+        {
+          // oxlint-disable-next-line no-unsafe-assignment -- expect.any(Function) is untyped by design, this is a vitest matcher not a real callback.
+          response_function: expect.any(Function),
+        },
+      );
+      for (const corner_id of corner_ids) {
+        expect(dataStyleStore.modelCornerVisibility(id, corner_id)).toBe(visibility);
+      }
+      expect(viewerStore.status).toBe(Status.CONNECTED);
+    });
+  });
+
+  describe("corner color", () => {
+    test("color red", async () => {
+      const dataStyleStore = useDataStyleStore();
+      const viewerStore = useViewerStore();
+      const dataStore = useDataStore();
+      const corner_ids = await dataStore.getCornersGeodeIds(id);
+      const corner_viewer_ids = await dataStore.getMeshComponentsViewerIds(id, corner_ids);
+      const color = { red: 255, green: 0, blue: 0, alpha: 1 };
+      const spy = vi.spyOn(viewerStore, "request");
+      spy.mockClear();
+      const result = dataStyleStore.setModelCornersColor(id, corner_ids, color);
+      expect(result).toBeInstanceOf(Promise);
+      await result;
+      await sleep(SLEEP_MS);
+      const schema = model_corners_schemas.color;
+      const params = { id, block_ids: corner_viewer_ids, color, color_mode: "constant" };
+      expect(spy).toHaveBeenCalledWith(
+        { schema, params },
+        {
+          // oxlint-disable-next-line no-unsafe-assignment -- expect.any(Function) is untyped by design, this is a vitest matcher not a real callback.
+          response_function: expect.any(Function),
+        },
+      );
+      for (const corner_id of corner_ids) {
+        expect(dataStyleStore.modelCornerColor(id, corner_id)).toStrictEqual(color);
+      }
+      expect(viewerStore.status).toBe(Status.CONNECTED);
+    });
+  });
+});
diff --git a/tests/unit/components/ObjectSelector.nuxt.test.ts b/tests/unit/components/ObjectSelector.nuxt.test.ts
index f836e139f..50025d4ca 100644
--- a/tests/unit/components/ObjectSelector.nuxt.test.ts
+++ b/tests/unit/components/ObjectSelector.nuxt.test.ts
@@ -1,29 +1,25 @@
 // Not auto-fixable (eslint's sort-imports core rule has no autofixer) and this file's import order doesn't match its syntax-kind-then-alphabetical requirement - left as-is rather than manually reordered across the codebase for a purely cosmetic rule.
 // oxlint-disable eslint/sort-imports
 import * as components from "vuetify/components";
-import { describe, expect, test, vi } from "vitest";
+import { describe, expect, test } from "vitest";
 import { mountSuspended, registerEndpoint } from "@nuxt/test-utils/runtime";
 import { flushPromises } from "@vue/test-utils";
 
-import { mockAs, setupActivePinia, toHTTPMethod, vuetify } from "@ogw_tests/utils";
+import { setupActivePinia, toHTTPMethod, vuetify } from "@ogw_tests/utils";
 import ObjectSelector from "@ogw_front/components/ObjectSelector.vue";
 import schemas from "@geode/opengeodeweb-back/opengeodeweb_back_typed_schemas.js";
 import { useBackStore } from "@ogw_front/stores/back";
 
-const EXPECTED_LENGTH = 1;
-const FIRST_INDEX = 0;
-const LOADABLE_SCORE = 1;
+import {
+  EXPECTED_LENGTH,
+  FIRST_INDEX,
+  LOADABLE_SCORE,
+  type AllowedObjectsResponse,
+} from "@ogw_tests/unit/components/ObjectSelectorHelpers";
+
 const PRIORITY_1 = 1;
 const PRIORITY_2 = 2;
 
-interface AllowedObjectInfo {
-  is_loadable: boolean | number;
-  object_priority?: number;
-}
-interface AllowedObjectsResponse {
-  allowed_objects: Record<string, AllowedObjectInfo>;
-}
-
 const { allowed_objects } = schemas.opengeodeweb_back;
 
 describe("object selector", () => {
@@ -31,17 +27,6 @@ describe("object selector", () => {
   const backStore = useBackStore();
   (backStore as { base_url: string }).base_url = "/";
 
-  function mockAllowedObjects(
-    byFile: Record<string, AllowedObjectsResponse["allowed_objects"]>,
-  ): void {
-    backStore.request = mockAs<typeof backStore.request>(
-      vi.fn(async ({ params }: { params: { filename: string } }) => {
-        await Promise.resolve();
-        return { allowed_objects: byFile[params.filename] ?? {} };
-      }),
-    );
-  }
-
   test("loadable with one class is selected automatically", async () => {
     const response: AllowedObjectsResponse = {
       allowed_objects: {},
@@ -134,91 +119,4 @@ describe("object selector", () => {
       geode_object_types: { "test.toto": geode_object_1 },
     });
   });
-
-  describe("several files", () => {
-    test("files with different types are resolved without user input", async () => {
-      mockAllowedObjects({
-        "mesh.vtu": { SolidMesh3D: { is_loadable: LOADABLE_SCORE } },
-        "model.og_brep": { BRep: { is_loadable: LOADABLE_SCORE } },
-      });
-      const wrapper = await mountSuspended(ObjectSelector, {
-        global: { plugins: [vuetify, pinia] },
-        props: { filenames: ["mesh.vtu", "model.og_brep"] },
-      });
-      await flushPromises();
-      const emitted = wrapper.emitted<unknown[]>();
-      wrapper.unmount();
-      expect(emitted.update_values?.[FIRST_INDEX]?.[FIRST_INDEX]).toStrictEqual({
-        geode_object_types: { "mesh.vtu": "SolidMesh3D", "model.og_brep": "BRep" },
-      });
-      expect(emitted.increment_step).toHaveLength(EXPECTED_LENGTH);
-    });
-
-    test("ambiguous files sharing types keep the single choice cards", async () => {
-      const ambiguous = {
-        BRep: { is_loadable: LOADABLE_SCORE },
-        StructuralModel: { is_loadable: LOADABLE_SCORE },
-      };
-      mockAllowedObjects({
-        "a.og_brep": ambiguous,
-        "b.og_brep": ambiguous,
-        "mesh.vtu": { SolidMesh3D: { is_loadable: LOADABLE_SCORE } },
-      });
-      const wrapper = await mountSuspended(ObjectSelector, {
-        global: { plugins: [vuetify, pinia] },
-        props: { filenames: ["a.og_brep", "b.og_brep", "mesh.vtu"] },
-      });
-      await flushPromises();
-      expect(wrapper.find('[data-testid="perFileObjectSelector"]').exists()).toBe(false);
-      expect(wrapper.text()).toContain("Choose the data type for: a.og_brep, b.og_brep");
-      await wrapper.findComponent(components.VCard).trigger("click");
-      const emitted = wrapper.emitted<unknown[]>();
-      wrapper.unmount();
-      expect(emitted.update_values?.[FIRST_INDEX]?.[FIRST_INDEX]).toStrictEqual({
-        geode_object_types: { "a.og_brep": "BRep", "b.og_brep": "BRep", "mesh.vtu": "SolidMesh3D" },
-      });
-    });
-
-    test("unsupported files are skipped and the others can still be imported", async () => {
-      mockAllowedObjects({ "mesh.vtu": { SolidMesh3D: { is_loadable: LOADABLE_SCORE } } });
-      const wrapper = await mountSuspended(ObjectSelector, {
-        global: { plugins: [vuetify, pinia] },
-        props: { filenames: ["mesh.vtu", "file.toto"] },
-      });
-      await flushPromises();
-      expect(wrapper.text()).toContain("Not supported, will be skipped:");
-      expect(wrapper.emitted().update_values).toBeUndefined();
-      await wrapper.find('[data-testid="confirmDataTypesButton"]').trigger("click");
-      const emitted = wrapper.emitted<unknown[]>();
-      wrapper.unmount();
-      expect(emitted.update_values?.[FIRST_INDEX]?.[FIRST_INDEX]).toStrictEqual({
-        geode_object_types: { "mesh.vtu": "SolidMesh3D" },
-      });
-    });
-
-    test("ambiguous files without a common type get one choice per group", async () => {
-      mockAllowedObjects({
-        "a.vtp": {
-          PolygonalSurface3D: { is_loadable: LOADABLE_SCORE },
-          TriangulatedSurface3D: { is_loadable: LOADABLE_SCORE },
-        },
-        "b.vtu": {
-          SolidMesh3D: { is_loadable: LOADABLE_SCORE },
-          HybridSolid3D: { is_loadable: LOADABLE_SCORE },
-        },
-      });
-      const wrapper = await mountSuspended(ObjectSelector, {
-        global: { plugins: [vuetify, pinia] },
-        props: { filenames: ["a.vtp", "b.vtu"] },
-      });
-      await flushPromises();
-      expect(wrapper.findAllComponents(components.VSelect)).toHaveLength(2);
-      await wrapper.find('[data-testid="confirmDataTypesButton"]').trigger("click");
-      const emitted = wrapper.emitted<unknown[]>();
-      wrapper.unmount();
-      expect(emitted.update_values?.[FIRST_INDEX]?.[FIRST_INDEX]).toStrictEqual({
-        geode_object_types: { "a.vtp": "PolygonalSurface3D", "b.vtu": "SolidMesh3D" },
-      });
-    });
-  });
 });
diff --git a/tests/unit/components/ObjectSelectorHelpers.ts b/tests/unit/components/ObjectSelectorHelpers.ts
new file mode 100644
index 000000000..309a7a5bd
--- /dev/null
+++ b/tests/unit/components/ObjectSelectorHelpers.ts
@@ -0,0 +1,14 @@
+const EXPECTED_LENGTH = 1;
+const FIRST_INDEX = 0;
+const LOADABLE_SCORE = 1;
+
+interface AllowedObjectInfo {
+  is_loadable: boolean | number;
+  object_priority?: number;
+}
+interface AllowedObjectsResponse {
+  allowed_objects: Record<string, AllowedObjectInfo>;
+}
+
+export type { AllowedObjectInfo, AllowedObjectsResponse };
+export { EXPECTED_LENGTH, FIRST_INDEX, LOADABLE_SCORE };
diff --git a/tests/unit/components/ObjectSelectorSeveralFiles.nuxt.test.ts b/tests/unit/components/ObjectSelectorSeveralFiles.nuxt.test.ts
new file mode 100644
index 000000000..2f636888c
--- /dev/null
+++ b/tests/unit/components/ObjectSelectorSeveralFiles.nuxt.test.ts
@@ -0,0 +1,120 @@
+// Not auto-fixable (eslint's sort-imports core rule has no autofixer) and this file's import order doesn't match its syntax-kind-then-alphabetical requirement - left as-is rather than manually reordered across the codebase for a purely cosmetic rule.
+// oxlint-disable eslint/sort-imports
+import * as components from "vuetify/components";
+import { describe, expect, test, vi } from "vitest";
+import { mountSuspended } from "@nuxt/test-utils/runtime";
+import { flushPromises } from "@vue/test-utils";
+
+import { mockAs, setupActivePinia, vuetify } from "@ogw_tests/utils";
+import ObjectSelector from "@ogw_front/components/ObjectSelector.vue";
+import { useBackStore } from "@ogw_front/stores/back";
+import {
+  EXPECTED_LENGTH,
+  FIRST_INDEX,
+  LOADABLE_SCORE,
+  type AllowedObjectsResponse,
+} from "@ogw_tests/unit/components/ObjectSelectorHelpers";
+
+describe("object selector", () => {
+  const pinia = setupActivePinia();
+  const backStore = useBackStore();
+  (backStore as { base_url: string }).base_url = "/";
+
+  function mockAllowedObjects(
+    byFile: Record<string, AllowedObjectsResponse["allowed_objects"]>,
+  ): void {
+    backStore.request = mockAs<typeof backStore.request>(
+      vi.fn(async ({ params }: { params: { filename: string } }) => {
+        await Promise.resolve();
+        return { allowed_objects: byFile[params.filename] ?? {} };
+      }),
+    );
+  }
+
+  describe("several files", () => {
+    test("files with different types are resolved without user input", async () => {
+      mockAllowedObjects({
+        "mesh.vtu": { SolidMesh3D: { is_loadable: LOADABLE_SCORE } },
+        "model.og_brep": { BRep: { is_loadable: LOADABLE_SCORE } },
+      });
+      const wrapper = await mountSuspended(ObjectSelector, {
+        global: { plugins: [vuetify, pinia] },
+        props: { filenames: ["mesh.vtu", "model.og_brep"] },
+      });
+      await flushPromises();
+      const emitted = wrapper.emitted<unknown[]>();
+      wrapper.unmount();
+      expect(emitted.update_values?.[FIRST_INDEX]?.[FIRST_INDEX]).toStrictEqual({
+        geode_object_types: { "mesh.vtu": "SolidMesh3D", "model.og_brep": "BRep" },
+      });
+      expect(emitted.increment_step).toHaveLength(EXPECTED_LENGTH);
+    });
+
+    test("ambiguous files sharing types keep the single choice cards", async () => {
+      const ambiguous = {
+        BRep: { is_loadable: LOADABLE_SCORE },
+        StructuralModel: { is_loadable: LOADABLE_SCORE },
+      };
+      mockAllowedObjects({
+        "a.og_brep": ambiguous,
+        "b.og_brep": ambiguous,
+        "mesh.vtu": { SolidMesh3D: { is_loadable: LOADABLE_SCORE } },
+      });
+      const wrapper = await mountSuspended(ObjectSelector, {
+        global: { plugins: [vuetify, pinia] },
+        props: { filenames: ["a.og_brep", "b.og_brep", "mesh.vtu"] },
+      });
+      await flushPromises();
+      expect(wrapper.find('[data-testid="perFileObjectSelector"]').exists()).toBe(false);
+      expect(wrapper.text()).toContain("Choose the data type for: a.og_brep, b.og_brep");
+      await wrapper.findComponent(components.VCard).trigger("click");
+      const emitted = wrapper.emitted<unknown[]>();
+      wrapper.unmount();
+      expect(emitted.update_values?.[FIRST_INDEX]?.[FIRST_INDEX]).toStrictEqual({
+        geode_object_types: { "a.og_brep": "BRep", "b.og_brep": "BRep", "mesh.vtu": "SolidMesh3D" },
+      });
+    });
+
+    test("unsupported files are skipped and the others can still be imported", async () => {
+      mockAllowedObjects({ "mesh.vtu": { SolidMesh3D: { is_loadable: LOADABLE_SCORE } } });
+      const wrapper = await mountSuspended(ObjectSelector, {
+        global: { plugins: [vuetify, pinia] },
+        props: { filenames: ["mesh.vtu", "file.toto"] },
+      });
+      await flushPromises();
+      expect(wrapper.text()).toContain("Not supported, will be skipped:");
+      expect(wrapper.emitted().update_values).toBeUndefined();
+      await wrapper.find('[data-testid="confirmDataTypesButton"]').trigger("click");
+      const emitted = wrapper.emitted<unknown[]>();
+      wrapper.unmount();
+      expect(emitted.update_values?.[FIRST_INDEX]?.[FIRST_INDEX]).toStrictEqual({
+        geode_object_types: { "mesh.vtu": "SolidMesh3D" },
+      });
+    });
+
+    test("ambiguous files without a common type get one choice per group", async () => {
+      mockAllowedObjects({
+        "a.vtp": {
+          PolygonalSurface3D: { is_loadable: LOADABLE_SCORE },
+          TriangulatedSurface3D: { is_loadable: LOADABLE_SCORE },
+        },
+        "b.vtu": {
+          SolidMesh3D: { is_loadable: LOADABLE_SCORE },
+          HybridSolid3D: { is_loadable: LOADABLE_SCORE },
+        },
+      });
+      const wrapper = await mountSuspended(ObjectSelector, {
+        global: { plugins: [vuetify, pinia] },
+        props: { filenames: ["a.vtp", "b.vtu"] },
+      });
+      await flushPromises();
+      expect(wrapper.findAllComponents(components.VSelect)).toHaveLength(2);
+      await wrapper.find('[data-testid="confirmDataTypesButton"]').trigger("click");
+      const emitted = wrapper.emitted<unknown[]>();
+      wrapper.unmount();
+      expect(emitted.update_values?.[FIRST_INDEX]?.[FIRST_INDEX]).toStrictEqual({
+        geode_object_types: { "a.vtp": "PolygonalSurface3D", "b.vtu": "SolidMesh3D" },
+      });
+    });
+  });
+});
diff --git a/tests/unit/stores/cloud.nuxt.test.ts b/tests/unit/stores/cloud.nuxt.test.ts
index 1ae873996..5aa24f85a 100644
--- a/tests/unit/stores/cloud.nuxt.test.ts
+++ b/tests/unit/stores/cloud.nuxt.test.ts
@@ -1,12 +1,22 @@
 // Only ever fires now that tests are .ts; asks every bare `vi.fn()` mock to carry an explicit call-signature type parameter. Real value for a handful of mocks, but for the many plain mock objects across this test suite it would mean guessing a signature that's already implied by how the mock is used (risking a type that quietly doesn't match, which defeats the point) rather than deriving it from each real function - left off rather than doing that at scale.
 // oxlint-disable vitest/require-mock-type-parameters
 // Third party imports
-import { $fetch, type FetchContext, type FetchResponse } from "ofetch";
-import { afterEach, beforeEach, describe, expect, expectTypeOf, test, vi } from "vitest";
+import { beforeEach, describe, expect, expectTypeOf, test, vi } from "vitest";
+import { $fetch } from "ofetch";
 
 // Local imports
+import {
+  BRANCH,
+  CLOUD_API_URL,
+  PROJECT,
+  RESPONSE_ERROR_STATUS,
+  RESPONSE_OK_STATUS,
+  TOKEN,
+  buildFetchContext,
+  setupConfig,
+  toHookArray,
+} from "@ogw_tests/unit/stores/cloud_helpers";
 import { Status } from "@ogw_front/utils/status";
-import { appMode } from "@ogw_shared/app_mode";
 import { setupActivePinia } from "@ogw_tests/utils";
 import { useCloudStore } from "@ogw_front/stores/cloud";
 import { useFeedbackStore } from "@ogw_front/stores/feedback";
@@ -24,62 +34,6 @@ vi.mock(import("ofetch"), () => ({
 
 const mockedFetch = vi.mocked($fetch);
 
-// CONSTANTS
-const PROJECT = "project";
-const BRANCH = "branch";
-const CLOUD_API_URL = "https://api.example.com";
-const TOKEN = "token";
-const RESPONSE_OK_STATUS = 200;
-const RESPONSE_ERROR_STATUS = 500;
-const CLOUD_RUN_HOST = "vease-abc123.europe-west1.run.app";
-
-function setCloudUrlParam(value?: string): void {
-  const search = value === undefined ? "" : `?cloud_url=${encodeURIComponent(value)}`;
-  globalThis.history.replaceState(undefined, "", `/${search}`);
-}
-
-function setupConfig(): void {
-  const config = useRuntimeConfig();
-  config.public.PROJECT = PROJECT;
-  config.public.BRANCH = BRANCH;
-  config.public.CLOUD_API_URL = CLOUD_API_URL;
-}
-
-// Normalizes ofetch's `MaybeArray<Hook>` option fields (a single hook or an array of hooks)
-// Into a plain array, so tests can invoke every registered hook the same way.
-function toHookArray<Hook>(hooks: Hook | Hook[] | undefined): Hook[] {
-  if (Array.isArray(hooks)) {
-    return hooks;
-  }
-  return hooks === undefined ? [] : [hooks];
-}
-
-// Builds a minimal, real `FetchResponse` (a `Response` with an attached `_data`) so
-// Hook callbacks receive an object that genuinely satisfies ofetch's response type.
-function buildFetchResponse<ResponseData>(
-  responseData: ResponseData,
-  status: number,
-): FetchResponse<ResponseData> {
-  const response: FetchResponse<ResponseData> = Response.json(responseData, {
-    status,
-  });
-  response._data = responseData;
-  return response;
-}
-
-// Builds a minimal, real `FetchContext` (plus the response) to hand to `onResponse`/
-// `onResponseError` hooks, satisfying ofetch's hook signature without any unsafe cast.
-function buildFetchContext<ResponseData>(
-  responseData: ResponseData,
-  status: number,
-): FetchContext & { response: FetchResponse<ResponseData> } {
-  return {
-    request: "test.com",
-    options: { headers: new Headers() },
-    response: buildFetchResponse(responseData, status),
-  };
-}
-
 describe("cloud store", () => {
   beforeEach(() => {
     setupActivePinia();
@@ -160,138 +114,6 @@ describe("cloud store", () => {
       });
     });
 
-    describe("connect_existing", () => {
-      beforeEach(() => {
-        mockedFetch.mockReset();
-        useInfraStore().app_mode = appMode.CLOUD;
-      });
-
-      test("successful connect_existing", async () => {
-        const cloudStore = useCloudStore();
-        const feedbackStore = useFeedbackStore();
-
-        mockedFetch.mockImplementation(async (_route, options) => {
-          const data = {};
-          const onResponseHooks = toHookArray(options?.onResponse);
-          await Promise.all(
-            onResponseHooks.map(async (hook) => {
-              await hook(buildFetchContext(data, RESPONSE_OK_STATUS));
-            }),
-          );
-          return data;
-        });
-
-        await cloudStore.connect_existing(CLOUD_RUN_HOST);
-
-        expect(mockedFetch).toHaveBeenCalledWith(
-          "opengeodeweb_back/ping",
-          expect.objectContaining({
-            baseURL: `https://${CLOUD_RUN_HOST}:443/geode`,
-          }),
-        );
-        expect(mockedFetch).not.toHaveBeenCalledWith("cloud_api/cloud/run", expect.anything());
-        expect(cloudStore.status).toBe(Status.CONNECTED);
-        expect(feedbackStore.server_error).toBe(false);
-        expect(useInfraStore().domain_name).toBe(CLOUD_RUN_HOST);
-      });
-
-      test("failed connect_existing - unreachable service", async () => {
-        const cloudStore = useCloudStore();
-        const feedbackStore = useFeedbackStore();
-        const infraStore = useInfraStore();
-        const previous_domain_name = infraStore.domain_name;
-
-        const error = createError({
-          statusCode: 500,
-          statusMessage: "500 Internal Server Error",
-        });
-        mockedFetch.mockImplementation((_route, options) => {
-          const onResponseErrorHooks = toHookArray(options?.onResponseError);
-          for (const hook of onResponseErrorHooks) {
-            void hook(
-              buildFetchContext(
-                { name: "Error", description: "500 Internal Server Error" },
-                RESPONSE_ERROR_STATUS,
-              ),
-            );
-          }
-          throw error;
-        });
-
-        await expect(cloudStore.connect_existing(CLOUD_RUN_HOST)).rejects.toThrow(
-          "500 Internal Server Error",
-        );
-
-        expect(cloudStore.status).toBe(Status.NOT_CONNECTED);
-        expect(feedbackStore.server_error).toBe(true);
-        expect(infraStore.domain_name).toBe(previous_domain_name);
-      });
-    });
-
-    describe("start", () => {
-      beforeEach(() => {
-        mockedFetch.mockReset();
-        useInfraStore().app_mode = appMode.CLOUD;
-        mockedFetch.mockImplementation(async (_route, options) => {
-          const data = { url: "test.com" };
-          const onResponseHooks = toHookArray(options?.onResponse);
-          await Promise.all(
-            onResponseHooks.map(async (hook) => {
-              await hook(buildFetchContext(data, RESPONSE_OK_STATUS));
-            }),
-          );
-          return data;
-        });
-      });
-      afterEach(() => {
-        setCloudUrlParam();
-      });
-
-      test("without cloud_url launches a new service", async () => {
-        setupConfig();
-        setCloudUrlParam();
-        await useCloudStore().start(TOKEN);
-
-        expect(mockedFetch).toHaveBeenCalledWith("cloud_api/cloud/run", expect.anything());
-        expect(useInfraStore().domain_name).toBe("test.com");
-      });
-
-      test("without cloud_url nor auth token getter rejects", async () => {
-        setupConfig();
-        setCloudUrlParam();
-        await expect(useCloudStore().start()).rejects.toThrow("requires an authenticated user");
-
-        expect(mockedFetch).not.toHaveBeenCalledWith("cloud_api/cloud/run", expect.anything());
-      });
-
-      test("with cloud_url connects to the existing service", async () => {
-        setupConfig();
-        setCloudUrlParam(CLOUD_RUN_HOST);
-        await useCloudStore().start(TOKEN);
-
-        expect(mockedFetch).not.toHaveBeenCalledWith("cloud_api/cloud/run", expect.anything());
-        expect(mockedFetch).toHaveBeenCalledWith("opengeodeweb_back/ping", expect.anything());
-        expect(useInfraStore().domain_name).toBe(CLOUD_RUN_HOST);
-        expect(globalThis.location.search).toBe("");
-      });
-
-      test("failed cloud_url is cleared so a retry launches a new service", async () => {
-        setupConfig();
-        setCloudUrlParam(CLOUD_RUN_HOST);
-        const cloudStore = useCloudStore();
-        mockedFetch.mockRejectedValueOnce(new Error("unreachable"));
-
-        await expect(cloudStore.start(TOKEN)).rejects.toThrow("unreachable");
-        expect(globalThis.location.search).toBe("");
-
-        mockedFetch.mockClear();
-        await cloudStore.start(TOKEN);
-        expect(mockedFetch).toHaveBeenCalledWith("cloud_api/cloud/run", expect.anything());
-        expect(mockedFetch).not.toHaveBeenCalledWith("opengeodeweb_back/ping", expect.anything());
-        expect(useInfraStore().domain_name).toBe("test.com");
-      });
-    });
-
     describe("connect", () => {
       test("successful connect", () => {
         const cloudStore = useCloudStore();
diff --git a/tests/unit/stores/cloud_connect_existing.nuxt.test.ts b/tests/unit/stores/cloud_connect_existing.nuxt.test.ts
new file mode 100644
index 000000000..8b569cc05
--- /dev/null
+++ b/tests/unit/stores/cloud_connect_existing.nuxt.test.ts
@@ -0,0 +1,108 @@
+// Only ever fires now that tests are .ts; asks every bare `vi.fn()` mock to carry an explicit call-signature type parameter. Real value for a handful of mocks, but for the many plain mock objects across this test suite it would mean guessing a signature that's already implied by how the mock is used (risking a type that quietly doesn't match, which defeats the point) rather than deriving it from each real function - left off rather than doing that at scale.
+// oxlint-disable vitest/require-mock-type-parameters
+// Third party imports
+import { beforeEach, describe, expect, test, vi } from "vitest";
+import { $fetch } from "ofetch";
+
+// Local imports
+import {
+  CLOUD_RUN_HOST,
+  RESPONSE_ERROR_STATUS,
+  RESPONSE_OK_STATUS,
+  buildFetchContext,
+  toHookArray,
+} from "@ogw_tests/unit/stores/cloud_helpers";
+import { Status } from "@ogw_front/utils/status";
+import { appMode } from "@ogw_shared/app_mode";
+import { setupActivePinia } from "@ogw_tests/utils";
+import { useCloudStore } from "@ogw_front/stores/cloud";
+import { useFeedbackStore } from "@ogw_front/stores/feedback";
+import { useInfraStore } from "@ogw_front/stores/infra";
+
+// A hand-built `$Fetch`: a mock function plus the `raw`/`native`/`create` members the real
+// `ofetch` export carries, so it satisfies the real type directly (no unsafe cast needed).
+vi.mock(import("ofetch"), () => ({
+  $fetch: Object.assign(vi.fn(), {
+    raw: vi.fn(),
+    native: vi.fn(),
+    create: vi.fn(),
+  }),
+}));
+
+const mockedFetch = vi.mocked($fetch);
+
+describe("cloud store", () => {
+  beforeEach(() => {
+    setupActivePinia();
+  });
+
+  describe("actions", () => {
+    describe("connect_existing", () => {
+      beforeEach(() => {
+        mockedFetch.mockReset();
+        useInfraStore().app_mode = appMode.CLOUD;
+      });
+
+      test("successful connect_existing", async () => {
+        const cloudStore = useCloudStore();
+        const feedbackStore = useFeedbackStore();
+
+        mockedFetch.mockImplementation(async (_route, options) => {
+          const data = {};
+          const onResponseHooks = toHookArray(options?.onResponse);
+          await Promise.all(
+            onResponseHooks.map(async (hook) => {
+              await hook(buildFetchContext(data, RESPONSE_OK_STATUS));
+            }),
+          );
+          return data;
+        });
+
+        await cloudStore.connect_existing(CLOUD_RUN_HOST);
+
+        expect(mockedFetch).toHaveBeenCalledWith(
+          "opengeodeweb_back/ping",
+          expect.objectContaining({
+            baseURL: `https://${CLOUD_RUN_HOST}:443/geode`,
+          }),
+        );
+        expect(mockedFetch).not.toHaveBeenCalledWith("cloud_api/cloud/run", expect.anything());
+        expect(cloudStore.status).toBe(Status.CONNECTED);
+        expect(feedbackStore.server_error).toBe(false);
+        expect(useInfraStore().domain_name).toBe(CLOUD_RUN_HOST);
+      });
+
+      test("failed connect_existing - unreachable service", async () => {
+        const cloudStore = useCloudStore();
+        const feedbackStore = useFeedbackStore();
+        const infraStore = useInfraStore();
+        const previous_domain_name = infraStore.domain_name;
+
+        const error = createError({
+          statusCode: 500,
+          statusMessage: "500 Internal Server Error",
+        });
+        mockedFetch.mockImplementation((_route, options) => {
+          const onResponseErrorHooks = toHookArray(options?.onResponseError);
+          for (const hook of onResponseErrorHooks) {
+            void hook(
+              buildFetchContext(
+                { name: "Error", description: "500 Internal Server Error" },
+                RESPONSE_ERROR_STATUS,
+              ),
+            );
+          }
+          throw error;
+        });
+
+        await expect(cloudStore.connect_existing(CLOUD_RUN_HOST)).rejects.toThrow(
+          "500 Internal Server Error",
+        );
+
+        expect(cloudStore.status).toBe(Status.NOT_CONNECTED);
+        expect(feedbackStore.server_error).toBe(true);
+        expect(infraStore.domain_name).toBe(previous_domain_name);
+      });
+    });
+  });
+});
diff --git a/tests/unit/stores/cloud_helpers.ts b/tests/unit/stores/cloud_helpers.ts
new file mode 100644
index 000000000..67b9ead49
--- /dev/null
+++ b/tests/unit/stores/cloud_helpers.ts
@@ -0,0 +1,72 @@
+// Third party imports
+import type { FetchContext, FetchResponse } from "ofetch";
+
+// CONSTANTS
+const PROJECT = "project";
+const BRANCH = "branch";
+const CLOUD_API_URL = "https://api.example.com";
+const TOKEN = "token";
+const RESPONSE_OK_STATUS = 200;
+const RESPONSE_ERROR_STATUS = 500;
+const CLOUD_RUN_HOST = "vease-abc123.europe-west1.run.app";
+
+function setCloudUrlParam(value?: string): void {
+  const search = value === undefined ? "" : `?cloud_url=${encodeURIComponent(value)}`;
+  globalThis.history.replaceState(undefined, "", `/${search}`);
+}
+
+function setupConfig(): void {
+  const config = useRuntimeConfig();
+  config.public.PROJECT = PROJECT;
+  config.public.BRANCH = BRANCH;
+  config.public.CLOUD_API_URL = CLOUD_API_URL;
+}
+
+// Normalizes ofetch's `MaybeArray<Hook>` option fields (a single hook or an array of hooks)
+// Into a plain array, so tests can invoke every registered hook the same way.
+function toHookArray<Hook>(hooks: Hook | Hook[] | undefined): Hook[] {
+  if (Array.isArray(hooks)) {
+    return hooks;
+  }
+  return hooks === undefined ? [] : [hooks];
+}
+
+// Builds a minimal, real `FetchResponse` (a `Response` with an attached `_data`) so
+// Hook callbacks receive an object that genuinely satisfies ofetch's response type.
+function buildFetchResponse<ResponseData>(
+  responseData: ResponseData,
+  status: number,
+): FetchResponse<ResponseData> {
+  const response: FetchResponse<ResponseData> = Response.json(responseData, {
+    status,
+  });
+  response._data = responseData;
+  return response;
+}
+
+// Builds a minimal, real `FetchContext` (plus the response) to hand to `onResponse`/
+// `onResponseError` hooks, satisfying ofetch's hook signature without any unsafe cast.
+function buildFetchContext<ResponseData>(
+  responseData: ResponseData,
+  status: number,
+): FetchContext & { response: FetchResponse<ResponseData> } {
+  return {
+    request: "test.com",
+    options: { headers: new Headers() },
+    response: buildFetchResponse(responseData, status),
+  };
+}
+
+export {
+  PROJECT,
+  BRANCH,
+  CLOUD_API_URL,
+  TOKEN,
+  RESPONSE_OK_STATUS,
+  RESPONSE_ERROR_STATUS,
+  CLOUD_RUN_HOST,
+  setCloudUrlParam,
+  setupConfig,
+  toHookArray,
+  buildFetchContext,
+};
diff --git a/tests/unit/stores/cloud_start.nuxt.test.ts b/tests/unit/stores/cloud_start.nuxt.test.ts
new file mode 100644
index 000000000..167a76385
--- /dev/null
+++ b/tests/unit/stores/cloud_start.nuxt.test.ts
@@ -0,0 +1,104 @@
+// Only ever fires now that tests are .ts; asks every bare `vi.fn()` mock to carry an explicit call-signature type parameter. Real value for a handful of mocks, but for the many plain mock objects across this test suite it would mean guessing a signature that's already implied by how the mock is used (risking a type that quietly doesn't match, which defeats the point) rather than deriving it from each real function - left off rather than doing that at scale.
+// oxlint-disable vitest/require-mock-type-parameters
+// Third party imports
+import { afterEach, beforeEach, describe, expect, test, vi } from "vitest";
+import { $fetch } from "ofetch";
+
+// Local imports
+import {
+  CLOUD_RUN_HOST,
+  RESPONSE_OK_STATUS,
+  TOKEN,
+  buildFetchContext,
+  setCloudUrlParam,
+  setupConfig,
+  toHookArray,
+} from "@ogw_tests/unit/stores/cloud_helpers";
+import { appMode } from "@ogw_shared/app_mode";
+import { setupActivePinia } from "@ogw_tests/utils";
+import { useCloudStore } from "@ogw_front/stores/cloud";
+import { useInfraStore } from "@ogw_front/stores/infra";
+
+// A hand-built `$Fetch`: a mock function plus the `raw`/`native`/`create` members the real
+// `ofetch` export carries, so it satisfies the real type directly (no unsafe cast needed).
+vi.mock(import("ofetch"), () => ({
+  $fetch: Object.assign(vi.fn(), {
+    raw: vi.fn(),
+    native: vi.fn(),
+    create: vi.fn(),
+  }),
+}));
+
+const mockedFetch = vi.mocked($fetch);
+
+describe("cloud store", () => {
+  beforeEach(() => {
+    setupActivePinia();
+  });
+
+  describe("actions", () => {
+    describe("start", () => {
+      beforeEach(() => {
+        mockedFetch.mockReset();
+        useInfraStore().app_mode = appMode.CLOUD;
+        mockedFetch.mockImplementation(async (_route, options) => {
+          const data = { url: "test.com" };
+          const onResponseHooks = toHookArray(options?.onResponse);
+          await Promise.all(
+            onResponseHooks.map(async (hook) => {
+              await hook(buildFetchContext(data, RESPONSE_OK_STATUS));
+            }),
+          );
+          return data;
+        });
+      });
+      afterEach(() => {
+        setCloudUrlParam();
+      });
+
+      test("without cloud_url launches a new service", async () => {
+        setupConfig();
+        setCloudUrlParam();
+        await useCloudStore().start(TOKEN);
+
+        expect(mockedFetch).toHaveBeenCalledWith("cloud_api/cloud/run", expect.anything());
+        expect(useInfraStore().domain_name).toBe("test.com");
+      });
+
+      test("without cloud_url nor auth token getter rejects", async () => {
+        setupConfig();
+        setCloudUrlParam();
+        await expect(useCloudStore().start()).rejects.toThrow("requires an authenticated user");
+
+        expect(mockedFetch).not.toHaveBeenCalledWith("cloud_api/cloud/run", expect.anything());
+      });
+
+      test("with cloud_url connects to the existing service", async () => {
+        setupConfig();
+        setCloudUrlParam(CLOUD_RUN_HOST);
+        await useCloudStore().start(TOKEN);
+
+        expect(mockedFetch).not.toHaveBeenCalledWith("cloud_api/cloud/run", expect.anything());
+        expect(mockedFetch).toHaveBeenCalledWith("opengeodeweb_back/ping", expect.anything());
+        expect(useInfraStore().domain_name).toBe(CLOUD_RUN_HOST);
+        expect(globalThis.location.search).toBe("");
+      });
+
+      test("failed cloud_url is cleared so a retry launches a new service", async () => {
+        setupConfig();
+        setCloudUrlParam(CLOUD_RUN_HOST);
+        const cloudStore = useCloudStore();
+        mockedFetch.mockRejectedValueOnce(new Error("unreachable"));
+
+        await expect(cloudStore.start(TOKEN)).rejects.toThrow("unreachable");
+        expect(globalThis.location.search).toBe("");
+
+        mockedFetch.mockClear();
+        await cloudStore.start(TOKEN);
+        expect(mockedFetch).toHaveBeenCalledWith("cloud_api/cloud/run", expect.anything());
+        expect(mockedFetch).not.toHaveBeenCalledWith("opengeodeweb_back/ping", expect.anything());
+        expect(useInfraStore().domain_name).toBe("test.com");
+      });
+    });
+  });
+});
diff --git a/tests/unit/stores/data.nuxt.test.ts b/tests/unit/stores/data.nuxt.test.ts
index 784a5e9bf..46d4494bf 100644
--- a/tests/unit/stores/data.nuxt.test.ts
+++ b/tests/unit/stores/data.nuxt.test.ts
@@ -3,8 +3,7 @@ import { beforeEach, describe, expect, test, vi } from "vitest";
 
 // Local imports
 import { type ModelComponentInput, useDataStore } from "@ogw_front/stores/data";
-import { mockAs, setupActivePinia } from "@ogw_tests/utils";
-import { useViewerStore } from "@ogw_front/stores/viewer";
+import { setupActivePinia } from "@ogw_tests/utils";
 
 const DATA_ID_LENGTH = 32;
 
@@ -14,24 +13,6 @@ function component(geode_id: string, type: string, viewer_id: number): ModelComp
   return { geode_id, name: geode_id, type, viewer_id, is_active: true };
 }
 
-async function addItems(ids: string[]): Promise<void> {
-  const dataStore = useDataStore();
-  for (const id of ids) {
-    // oxlint-disable-next-line no-await-in-loop
-    await dataStore.addItem({
-      id,
-      geode_id: id,
-      name: id,
-      viewer_type: "mesh",
-      geode_object_type: "PointSet3D",
-    });
-  }
-}
-
-function registeredIds(items: { id: string }[]): string[] {
-  return items.map((registeredItem) => registeredItem.id);
-}
-
 describe("useDataStore - collections", () => {
   setupActivePinia();
 
@@ -71,151 +52,6 @@ describe("useDataStore - collections", () => {
     expect(stored.crs).toStrictEqual(crs);
   });
 
-  test("correctly recognizes, formats, and pluralizes any collection component type not in MESH_COMPONENT_TYPES", async () => {
-    const dataStore = useDataStore();
-    const modelId = "test_model_id";
-
-    // 1. Add model item
-    await dataStore.addItem({
-      id: modelId,
-      geode_id: "00000000-0000-0000-0000-000000000001",
-      name: "Test Model",
-      viewer_type: "model",
-      geode_object_type: "BRep",
-    });
-
-    // 2. Add mesh components and collection components (including a custom type like "MyCustomCollection")
-    await dataStore.addComponents({
-      id: modelId,
-      geode_id: "00000000-0000-0000-0000-000000000001",
-      viewer_type: "model",
-      geode_object_type: "BRep",
-      mesh_components: [
-        {
-          geode_id: "mesh_corner",
-          name: "Corner 1",
-          type: "Corner",
-          viewer_id: 1,
-          is_active: true,
-        },
-        {
-          geode_id: "mesh_surface",
-          name: "Surface 1",
-          type: "Surface",
-          viewer_id: 2,
-          is_active: true,
-        },
-      ],
-      collection_components: [
-        // Standard collection type
-        { geode_id: "fault1", name: "Fault 1", type: "Fault", viewer_id: 3, is_active: true },
-        // Custom collection type (not previously hardcoded)
-        {
-          geode_id: "custom1",
-          name: "Custom 1",
-          type: "MyCustomCollection",
-          viewer_id: 4,
-          is_active: true,
-        },
-      ],
-    });
-
-    // Add component relations
-    await dataStore.addComponentRelations({
-      id: modelId,
-      geode_id: "00000000-0000-0000-0000-000000000001",
-      viewer_type: "model",
-      geode_object_type: "BRep",
-      collection_components: [
-        {
-          geode_id: "fault1",
-          name: "Fault 1",
-          type: "Fault",
-          viewer_id: 3,
-          is_active: true,
-          items: ["mesh_surface"],
-        },
-        {
-          geode_id: "custom1",
-          name: "Custom 1",
-          type: "MyCustomCollection",
-          viewer_id: 4,
-          is_active: true,
-          items: [],
-        },
-      ],
-    });
-
-    // 3. Verify hasCollectionComponents is true
-    const hasCollections = await dataStore.hasCollectionComponents(modelId);
-    expect(hasCollections).toBe(true);
-
-    // 4. Verify getAllCollectionComponents returns both Fault and MyCustomCollection
-    const allCollections = await dataStore.getAllCollectionComponents(modelId);
-    expect(allCollections).toStrictEqual([
-      {
-        id: "custom1",
-        geode_id: "custom1",
-        title: "Custom 1",
-        category: "MyCustomCollection",
-        viewer_id: 4,
-        is_active: true,
-      },
-      {
-        id: "fault1",
-        geode_id: "fault1",
-        title: "Fault 1",
-        category: "Fault",
-        viewer_id: 3,
-        is_active: true,
-      },
-    ]);
-
-    // 5. Verify formatedCollectionComponents groups them and pluralizes the titles
-    const formatted = await dataStore.formatedCollectionComponents(modelId);
-    expect(formatted).toStrictEqual([
-      {
-        id: "MyCustomCollection",
-        title: "MyCustomCollections",
-        children: [
-          {
-            id: "custom1",
-            geode_id: "custom1",
-            title: "Custom 1",
-            category: "MyCustomCollection",
-            viewer_id: 4,
-            is_active: true,
-            children: [],
-          },
-        ],
-      },
-      {
-        id: "Fault",
-        title: "Faults",
-        children: [
-          {
-            id: "fault1",
-            geode_id: "fault1",
-            title: "Fault 1",
-            category: "Fault",
-            viewer_id: 3,
-            is_active: true,
-            children: [
-              {
-                id: "mesh_surface",
-                geode_id: "mesh_surface",
-                title: "Surface 1",
-                category: "Surface",
-                viewer_id: 2,
-                is_active: true,
-              },
-            ],
-          },
-        ],
-      },
-    ]);
-  });
-
   test("getComponentRelations returns the boundaries and internals of a component", async () => {
     const dataStore = useDataStore();
     const modelId = "test_model_id";
@@ -303,46 +139,4 @@ describe("useDataStore - collections", () => {
       expect(dataStore.isItemViewable({ is_viewable: true })).toBe(true);
     });
   });
-
-  describe("refRegisteredItems", () => {
-    beforeEach(() => {
-      const viewerStore = useViewerStore();
-      viewerStore.request = mockAs<typeof viewerStore.request>(vi.fn().mockResolvedValue({}));
-    });
-
-    test("only lists the items registered in the viewer", async () => {
-      const dataStore = useDataStore();
-      const registeredItems = dataStore.refRegisteredItems();
-      await addItems(["registered", "pending"]);
-      await dataStore.registerObject("registered", "registered");
-
-      await vi.waitFor(() => {
-        expect(registeredIds(registeredItems.value)).toStrictEqual(["registered"]);
-      });
-      expect(dataStore.isRegistered("pending")).toBe(false);
-    });
-
-    test("updates when an item is registered or deregistered", async () => {
-      const dataStore = useDataStore();
-      const registeredItems = dataStore.refRegisteredItems();
-      await addItems(["first", "second"]);
-      await dataStore.registerObject("first", "first");
-      await dataStore.registerObject("second", "second");
-      await vi.waitFor(() => {
-        expect(registeredIds(registeredItems.value)).toStrictEqual(["first", "second"]);
-      });
-
-      await dataStore.deregisterObject("first");
-      expect(registeredIds(registeredItems.value)).toStrictEqual(["second"]);
-    });
-
-    test("is emptied by clear", async () => {
-      const dataStore = useDataStore();
-      await addItems(["registered"]);
-      await dataStore.registerObject("registered", "registered");
-
-      await dataStore.clear();
-      expect(dataStore.isRegistered("registered")).toBe(false);
-    });
-  });
 });
diff --git a/tests/unit/stores/data_collection_components.nuxt.test.ts b/tests/unit/stores/data_collection_components.nuxt.test.ts
new file mode 100644
index 000000000..5ca51d108
--- /dev/null
+++ b/tests/unit/stores/data_collection_components.nuxt.test.ts
@@ -0,0 +1,162 @@
+// Third party imports
+import { beforeEach, describe, expect, test, vi } from "vitest";
+
+// Local imports
+import { setupActivePinia } from "@ogw_tests/utils";
+import { useDataStore } from "@ogw_front/stores/data";
+
+vi.setConfig({ testTimeout: 10_000 });
+
+describe("useDataStore - collections", () => {
+  setupActivePinia();
+
+  beforeEach(async () => {
+    const dataStore = useDataStore();
+    await dataStore.clear();
+  });
+
+  test("correctly recognizes, formats, and pluralizes any collection component type not in MESH_COMPONENT_TYPES", async () => {
+    const dataStore = useDataStore();
+    const modelId = "test_model_id";
+
+    // 1. Add model item
+    await dataStore.addItem({
+      id: modelId,
+      geode_id: "00000000-0000-0000-0000-000000000001",
+      name: "Test Model",
+      viewer_type: "model",
+      geode_object_type: "BRep",
+    });
+
+    // 2. Add mesh components and collection components (including a custom type like "MyCustomCollection")
+    await dataStore.addComponents({
+      id: modelId,
+      geode_id: "00000000-0000-0000-0000-000000000001",
+      viewer_type: "model",
+      geode_object_type: "BRep",
+      mesh_components: [
+        {
+          geode_id: "mesh_corner",
+          name: "Corner 1",
+          type: "Corner",
+          viewer_id: 1,
+          is_active: true,
+        },
+        {
+          geode_id: "mesh_surface",
+          name: "Surface 1",
+          type: "Surface",
+          viewer_id: 2,
+          is_active: true,
+        },
+      ],
+      collection_components: [
+        // Standard collection type
+        { geode_id: "fault1", name: "Fault 1", type: "Fault", viewer_id: 3, is_active: true },
+        // Custom collection type (not previously hardcoded)
+        {
+          geode_id: "custom1",
+          name: "Custom 1",
+          type: "MyCustomCollection",
+          viewer_id: 4,
+          is_active: true,
+        },
+      ],
+    });
+
+    // Add component relations
+    await dataStore.addComponentRelations({
+      id: modelId,
+      geode_id: "00000000-0000-0000-0000-000000000001",
+      viewer_type: "model",
+      geode_object_type: "BRep",
+      collection_components: [
+        {
+          geode_id: "fault1",
+          name: "Fault 1",
+          type: "Fault",
+          viewer_id: 3,
+          is_active: true,
+          items: ["mesh_surface"],
+        },
+        {
+          geode_id: "custom1",
+          name: "Custom 1",
+          type: "MyCustomCollection",
+          viewer_id: 4,
+          is_active: true,
+          items: [],
+        },
+      ],
+    });
+
+    // 3. Verify hasCollectionComponents is true
+    const hasCollections = await dataStore.hasCollectionComponents(modelId);
+    expect(hasCollections).toBe(true);
+
+    // 4. Verify getAllCollectionComponents returns both Fault and MyCustomCollection
+    const allCollections = await dataStore.getAllCollectionComponents(modelId);
+    expect(allCollections).toStrictEqual([
+      {
+        id: "custom1",
+        geode_id: "custom1",
+        title: "Custom 1",
+        category: "MyCustomCollection",
+        viewer_id: 4,
+        is_active: true,
+      },
+      {
+        id: "fault1",
+        geode_id: "fault1",
+        title: "Fault 1",
+        category: "Fault",
+        viewer_id: 3,
+        is_active: true,
+      },
+    ]);
+
+    // 5. Verify formatedCollectionComponents groups them and pluralizes the titles
+    const formatted = await dataStore.formatedCollectionComponents(modelId);
+    expect(formatted).toStrictEqual([
+      {
+        id: "MyCustomCollection",
+        title: "MyCustomCollections",
+        children: [
+          {
+            id: "custom1",
+            geode_id: "custom1",
+            title: "Custom 1",
+            category: "MyCustomCollection",
+            viewer_id: 4,
+            is_active: true,
+            children: [],
+          },
+        ],
+      },
+      {
+        id: "Fault",
+        title: "Faults",
+        children: [
+          {
+            id: "fault1",
+            geode_id: "fault1",
+            title: "Fault 1",
+            category: "Fault",
+            viewer_id: 3,
+            is_active: true,
+            children: [
+              {
+                id: "mesh_surface",
+                geode_id: "mesh_surface",
+                title: "Surface 1",
+                category: "Surface",
+                viewer_id: 2,
+                is_active: true,
+              },
+            ],
+          },
+        ],
+      },
+    ]);
+  });
+});
diff --git a/tests/unit/stores/data_registered_items.nuxt.test.ts b/tests/unit/stores/data_registered_items.nuxt.test.ts
new file mode 100644
index 000000000..691c15705
--- /dev/null
+++ b/tests/unit/stores/data_registered_items.nuxt.test.ts
@@ -0,0 +1,78 @@
+// Third party imports
+import { beforeEach, describe, expect, test, vi } from "vitest";
+
+// Local imports
+import { mockAs, setupActivePinia } from "@ogw_tests/utils";
+import { useDataStore } from "@ogw_front/stores/data";
+import { useViewerStore } from "@ogw_front/stores/viewer";
+
+vi.setConfig({ testTimeout: 10_000 });
+
+async function addItems(ids: string[]): Promise<void> {
+  const dataStore = useDataStore();
+  for (const id of ids) {
+    // oxlint-disable-next-line no-await-in-loop
+    await dataStore.addItem({
+      id,
+      geode_id: id,
+      name: id,
+      viewer_type: "mesh",
+      geode_object_type: "PointSet3D",
+    });
+  }
+}
+
+function registeredIds(items: { id: string }[]): string[] {
+  return items.map((registeredItem) => registeredItem.id);
+}
+
+describe("useDataStore - collections", () => {
+  setupActivePinia();
+
+  beforeEach(async () => {
+    const dataStore = useDataStore();
+    await dataStore.clear();
+  });
+
+  describe("refRegisteredItems", () => {
+    beforeEach(() => {
+      const viewerStore = useViewerStore();
+      viewerStore.request = mockAs<typeof viewerStore.request>(vi.fn().mockResolvedValue({}));
+    });
+
+    test("only lists the items registered in the viewer", async () => {
+      const dataStore = useDataStore();
+      const registeredItems = dataStore.refRegisteredItems();
+      await addItems(["registered", "pending"]);
+      await dataStore.registerObject("registered", "registered");
+
+      await vi.waitFor(() => {
+        expect(registeredIds(registeredItems.value)).toStrictEqual(["registered"]);
+      });
+      expect(dataStore.isRegistered("pending")).toBe(false);
+    });
+
+    test("updates when an item is registered or deregistered", async () => {
+      const dataStore = useDataStore();
+      const registeredItems = dataStore.refRegisteredItems();
+      await addItems(["first", "second"]);
+      await dataStore.registerObject("first", "first");
+      await dataStore.registerObject("second", "second");
+      await vi.waitFor(() => {
+        expect(registeredIds(registeredItems.value)).toStrictEqual(["first", "second"]);
+      });
+
+      await dataStore.deregisterObject("first");
+      expect(registeredIds(registeredItems.value)).toStrictEqual(["second"]);
+    });
+
+    test("is emptied by clear", async () => {
+      const dataStore = useDataStore();
+      await addItems(["registered"]);
+      await dataStore.registerObject("registered", "registered");
+
+      await dataStore.clear();
+      expect(dataStore.isRegistered("registered")).toBe(false);
+    });
+  });
+});
diff --git a/tests/unit/stores/infra.nuxt.test.ts b/tests/unit/stores/infra.nuxt.test.ts
index e45a17e53..30e72531f 100644
--- a/tests/unit/stores/infra.nuxt.test.ts
+++ b/tests/unit/stores/infra.nuxt.test.ts
@@ -1,14 +1,5 @@
-// Only ever fires now that tests are .ts; asks every bare `vi.fn()` mock to carry an explicit call-signature type parameter. Real value for a handful of mocks, but for the many plain mock objects across this test suite it would mean guessing a signature that's already implied by how the mock is used (risking a type that quietly doesn't match, which defeats the point) rather than deriving it from each real function - left off rather than doing that at scale.
-// oxlint-disable vitest/require-mock-type-parameters
 // Third party imports
-import {
-  $fetch,
-  type FetchOptions,
-  type FetchRequest,
-  type FetchResponse,
-  type ResolvedFetchOptions,
-} from "ofetch";
-import { beforeEach, describe, expect, expectTypeOf, test, vi } from "vitest";
+import { beforeEach, describe, expect, expectTypeOf, test } from "vitest";
 
 // Local imports
 import { Status } from "@ogw_front/utils/status";
@@ -18,53 +9,6 @@ import { useBackStore } from "@ogw_front/stores/back";
 import { useInfraStore } from "@ogw_front/stores/infra";
 import { useViewerStore } from "@ogw_front/stores/viewer";
 
-vi.mock(import("ofetch"), () => ({
-  $fetch: Object.assign(vi.fn(), {
-    raw: vi.fn(),
-    native: vi.fn(),
-    create: vi.fn(),
-  }),
-}));
-
-// Mock navigator.locks API
-const mockLockRequest = vi
-  .fn()
-  .mockImplementation(
-    async (name: string, handler: (lock: { name: string }) => unknown) => await handler({ name }),
-  );
-
-// A Proxy is used instead of `{ ...navigator }` so navigator's other getters keep their original `this` (cloning a `Navigator` class instance would lose access to its private fields).
-vi.stubGlobal(
-  "navigator",
-  new Proxy(navigator, {
-    get(target, property, _receiver): unknown {
-      if (property === "locks") {
-        return { request: mockLockRequest };
-      }
-      return Reflect.get(target, property, target) as unknown;
-    },
-  }),
-);
-
-// Resolves a mocked `$fetch` call's `onResponse` hook with a successful response.
-// Kept outside the test bodies so no branching logic lives inside `test()` blocks.
-async function respondWithSuccess(
-  options: FetchOptions | undefined,
-  request: FetchRequest,
-  data: { url: string },
-): Promise<void> {
-  const onResponse = options?.onResponse;
-  if (typeof onResponse !== "function") {
-    return;
-  }
-  const response: FetchResponse<typeof data> = Object.assign(
-    new Response(undefined, { status: 200 }),
-    { _data: data },
-  );
-  const resolvedOptions: ResolvedFetchOptions = { headers: new Headers() };
-  await onResponse({ request, options: resolvedOptions, response });
-}
-
 describe("infra store", () => {
   beforeEach(() => {
     setupActivePinia();
@@ -249,37 +193,4 @@ describe("infra store", () => {
       });
     });
   });
-
-  describe("create_backend", () => {
-    test("with end-point", async () => {
-      const infraStore = useInfraStore();
-      const backStore = useBackStore();
-      const viewerStore = useViewerStore();
-
-      infraStore.app_mode = appMode.CLOUD;
-      const url = "test.com";
-      vi.mocked($fetch).mockImplementation(async (_route, options) => {
-        const data = { url };
-        await respondWithSuccess(options, _route, data);
-        return data;
-      });
-
-      await infraStore.create_backend("token");
-      expect(infraStore.status).toBe(Status.CREATED);
-      expect(infraStore.domain_name).toBe(url);
-
-      expect(backStore.status).toBe(Status.NOT_CONNECTED);
-      expect(viewerStore.status).toBe(Status.NOT_CONNECTED);
-    });
-
-    test("cloud start failure resets status", async () => {
-      const infraStore = useInfraStore();
-
-      infraStore.app_mode = appMode.CLOUD;
-      vi.mocked($fetch).mockRejectedValue(new Error("unreachable"));
-
-      await expect(infraStore.create_backend("token")).rejects.toThrow("unreachable");
-      expect(infraStore.status).toBe(Status.NOT_CREATED);
-    });
-  });
 });
diff --git a/tests/unit/stores/infra_create_backend.nuxt.test.ts b/tests/unit/stores/infra_create_backend.nuxt.test.ts
new file mode 100644
index 000000000..d1f7833c0
--- /dev/null
+++ b/tests/unit/stores/infra_create_backend.nuxt.test.ts
@@ -0,0 +1,105 @@
+// Only ever fires now that tests are .ts; asks every bare `vi.fn()` mock to carry an explicit call-signature type parameter. Real value for a handful of mocks, but for the many plain mock objects across this test suite it would mean guessing a signature that's already implied by how the mock is used (risking a type that quietly doesn't match, which defeats the point) rather than deriving it from each real function - left off rather than doing that at scale.
+// oxlint-disable vitest/require-mock-type-parameters
+// Third party imports
+import {
+  $fetch,
+  type FetchOptions,
+  type FetchRequest,
+  type FetchResponse,
+  type ResolvedFetchOptions,
+} from "ofetch";
+import { beforeEach, describe, expect, test, vi } from "vitest";
+
+// Local imports
+import { Status } from "@ogw_front/utils/status";
+import { appMode } from "@ogw_shared/app_mode";
+import { setupActivePinia } from "@ogw_tests/utils";
+import { useBackStore } from "@ogw_front/stores/back";
+import { useInfraStore } from "@ogw_front/stores/infra";
+import { useViewerStore } from "@ogw_front/stores/viewer";
+
+vi.mock(import("ofetch"), () => ({
+  $fetch: Object.assign(vi.fn(), {
+    raw: vi.fn(),
+    native: vi.fn(),
+    create: vi.fn(),
+  }),
+}));
+
+// Mock navigator.locks API
+const mockLockRequest = vi
+  .fn()
+  .mockImplementation(
+    async (name: string, handler: (lock: { name: string }) => unknown) => await handler({ name }),
+  );
+
+// A Proxy is used instead of `{ ...navigator }` so navigator's other getters keep their original `this` (cloning a `Navigator` class instance would lose access to its private fields).
+vi.stubGlobal(
+  "navigator",
+  new Proxy(navigator, {
+    get(target, property, _receiver): unknown {
+      if (property === "locks") {
+        return { request: mockLockRequest };
+      }
+      return Reflect.get(target, property, target) as unknown;
+    },
+  }),
+);
+
+// Resolves a mocked `$fetch` call's `onResponse` hook with a successful response.
+// Kept outside the test bodies so no branching logic lives inside `test()` blocks.
+async function respondWithSuccess(
+  options: FetchOptions | undefined,
+  request: FetchRequest,
+  data: { url: string },
+): Promise<void> {
+  const onResponse = options?.onResponse;
+  if (typeof onResponse !== "function") {
+    return;
+  }
+  const response: FetchResponse<typeof data> = Object.assign(
+    new Response(undefined, { status: 200 }),
+    { _data: data },
+  );
+  const resolvedOptions: ResolvedFetchOptions = { headers: new Headers() };
+  await onResponse({ request, options: resolvedOptions, response });
+}
+
+describe("infra store", () => {
+  beforeEach(() => {
+    setupActivePinia();
+  });
+
+  describe("create_backend", () => {
+    test("with end-point", async () => {
+      const infraStore = useInfraStore();
+      const backStore = useBackStore();
+      const viewerStore = useViewerStore();
+
+      infraStore.app_mode = appMode.CLOUD;
+      const url = "test.com";
+      vi.mocked($fetch).mockImplementation(async (_route, options) => {
+        const data = { url };
+        await respondWithSuccess(options, _route, data);
+        return data;
+      });
+
+      await infraStore.create_backend("token");
+      expect(infraStore.status).toBe(Status.CREATED);
+      expect(infraStore.domain_name).toBe(url);
+
+      expect(backStore.status).toBe(Status.NOT_CONNECTED);
+      expect(viewerStore.status).toBe(Status.NOT_CONNECTED);
+    });
+
+    test("cloud start failure resets status", async () => {
+      const infraStore = useInfraStore();
+
+      infraStore.app_mode = appMode.CLOUD;
+      vi.mocked($fetch).mockRejectedValue(new Error("unreachable"));
+
+      await expect(infraStore.create_backend("token")).rejects.toThrow("unreachable");
+      expect(infraStore.status).toBe(Status.NOT_CREATED);
+    });
+  });
+});
diff --git a/tests/unit/stores/viewer.nuxt.test.ts b/tests/unit/stores/viewer.nuxt.test.ts
index 0143f5641..481b69929 100644
--- a/tests/unit/stores/viewer.nuxt.test.ts
+++ b/tests/unit/stores/viewer.nuxt.test.ts
@@ -1,53 +1,20 @@
-// Only ever fires now that tests are .ts; asks every bare `vi.fn()` mock to carry an explicit call-signature type parameter. Real value for a handful of mocks, but for the many plain mock objects across this test suite it would mean guessing a signature that's already implied by how the mock is used (risking a type that quietly doesn't match, which defeats the point) rather than deriving it from each real function - left off rather than doing that at scale.
-// oxlint-disable vitest/require-mock-type-parameters
 // Third party imports
-import { afterAll, beforeAll, beforeEach, describe, expect, expectTypeOf, test, vi } from "vitest";
+import { describe, expect, expectTypeOf, test } from "vitest";
 
-import { WebSocket } from "ws";
 // Local imports
+import {
+  TIMEOUT,
+  setupViewerEnvironment,
+  stubNavigatorLocks,
+} from "@ogw_tests/unit/stores/viewer_helpers";
 import { appMode } from "@ogw_shared/app_mode";
-import { setupActivePinia } from "@ogw_tests/utils";
 import { useInfraStore } from "@ogw_front/stores/infra";
 import { useViewerStore } from "@ogw_front/stores/viewer";
 
-interface MockLock {
-  name: string;
-}
-
-// Mock navigator.locks API
-const mockLockRequest = vi
-  .fn()
-  .mockImplementation((name: string, handler: (lock: MockLock) => unknown) => handler({ name }));
-
-// The store only ever calls `navigator.locks.request`, and `vi.stubGlobal`
-// Accepts an `unknown` value, so a minimal stub (rather than spreading or
-// Mutating the real, getter-only `navigator` instance) is enough and needs
-// No type assertion.
-vi.stubGlobal("navigator", {
-  locks: {
-    request: mockLockRequest,
-  },
-});
-
-const TIMEOUT = 5000;
+stubNavigatorLocks();
 
 describe("viewer store", () => {
-  beforeAll(() => {
-    // The `ws` package's WebSocket class implements the same runtime behaviour
-    // The store relies on in a Node test environment, but TypeScript sees it as
-    // A structurally different class from the DOM lib's global WebSocket type,
-    // So it is stubbed through vitest's helper (typed to accept `unknown`)
-    // Instead of an unsafe type assertion.
-    vi.stubGlobal("WebSocket", WebSocket);
-  });
-
-  beforeEach(() => {
-    setupActivePinia();
-  });
-
-  afterAll(() => {
-    Reflect.deleteProperty(globalThis, "WebSocket");
-  });
+  setupViewerEnvironment();
 
   describe("state", () => {
     test(
@@ -176,63 +143,5 @@ describe("viewer store", () => {
         TIMEOUT,
       );
     });
-    describe("is_busy", () => {
-      test(
-        "is_busy",
-        () => {
-          const viewerStore = useViewerStore();
-          viewerStore.request_counter = 1;
-          expect(viewerStore.is_busy).toBe(true);
-        },
-        TIMEOUT,
-      );
-
-      test(
-        "not is_busy",
-        () => {
-          const viewerStore = useViewerStore();
-          viewerStore.request_counter = 0;
-          expect(viewerStore.is_busy).toBe(false);
-        },
-        TIMEOUT,
-      );
-    });
-  });
-  describe("actions", () => {
-    describe("toggle_picking_mode", () => {
-      test(
-        "true",
-        () => {
-          const viewerStore = useViewerStore();
-          viewerStore.toggle_picking_mode(true);
-          expect(viewerStore.picking_mode).toBe(true);
-        },
-        TIMEOUT,
-      );
-    });
-
-    describe("start_request", () => {
-      test(
-        "increment",
-        () => {
-          const viewerStore = useViewerStore();
-          viewerStore.start_request();
-          expect(viewerStore.request_counter).toBe(1);
-        },
-        TIMEOUT,
-      );
-    });
-
-    describe("stop_request", () => {
-      test(
-        "decrement",
-        () => {
-          const viewerStore = useViewerStore();
-          viewerStore.stop_request();
-          expect(viewerStore.request_counter).toBe(-1);
-        },
-        TIMEOUT,
-      );
-    });
   });
 });
diff --git a/tests/unit/stores/viewer_helpers.ts b/tests/unit/stores/viewer_helpers.ts
new file mode 100644
index 000000000..ac946845d
--- /dev/null
+++ b/tests/unit/stores/viewer_helpers.ts
@@ -0,0 +1,53 @@
+// Only ever fires now that tests are .ts; asks every bare `vi.fn()` mock to carry an explicit call-signature type parameter. Real value for a handful of mocks, but for the many plain mock objects across this test suite it would mean guessing a signature that's already implied by how the mock is used (risking a type that quietly doesn't match, which defeats the point) rather than deriving it from each real function - left off rather than doing that at scale.
+// oxlint-disable vitest/require-mock-type-parameters
+// Third party imports
+import { afterAll, beforeAll, beforeEach, vi } from "vitest";
+import { WebSocket } from "ws";
+
+// Local imports
+import { setupActivePinia } from "@ogw_tests/utils";
+
+interface MockLock {
+  name: string;
+}
+
+const TIMEOUT = 5000;
+
+function stubNavigatorLocks(): void {
+  // Mock navigator.locks API
+  const mockLockRequest = vi
+    .fn()
+    .mockImplementation((name: string, handler: (lock: MockLock) => unknown) => handler({ name }));
+
+  // The store only ever calls `navigator.locks.request`, and `vi.stubGlobal`
+  // Accepts an `unknown` value, so a minimal stub (rather than spreading or
+  // Mutating the real, getter-only `navigator` instance) is enough and needs
+  // No type assertion.
+  vi.stubGlobal("navigator", {
+    locks: {
+      request: mockLockRequest,
+    },
+  });
+}
+
+// Registers the hooks shared by every viewer store test file; call it inside the top-level describe.
+function setupViewerEnvironment(): void {
+  beforeAll(() => {
+    // The `ws` package's WebSocket class implements the same runtime behaviour
+    // The store relies on in a Node test environment, but TypeScript sees it as
+    // A structurally different class from the DOM lib's global WebSocket type,
+    // So it is stubbed through vitest's helper (typed to accept `unknown`)
+    // Instead of an unsafe type assertion.
+    vi.stubGlobal("WebSocket", WebSocket);
+  });
+
+  beforeEach(() => {
+    setupActivePinia();
+  });
+
+  afterAll(() => {
+    Reflect.deleteProperty(globalThis, "WebSocket");
+  });
+}
+
+export { TIMEOUT, setupViewerEnvironment, stubNavigatorLocks };
diff --git a/tests/unit/stores/viewer_requests.nuxt.test.ts b/tests/unit/stores/viewer_requests.nuxt.test.ts
new file mode 100644
index 000000000..10c742c1c
--- /dev/null
+++ b/tests/unit/stores/viewer_requests.nuxt.test.ts
@@ -0,0 +1,77 @@
+// Third party imports
+import { describe, expect, test } from "vitest";
+
+// Local imports
+import {
+  TIMEOUT,
+  setupViewerEnvironment,
+  stubNavigatorLocks,
+} from "@ogw_tests/unit/stores/viewer_helpers";
+import { useViewerStore } from "@ogw_front/stores/viewer";
+
+stubNavigatorLocks();
+
+describe("viewer store", () => {
+  setupViewerEnvironment();
+
+  describe("getters", () => {
+    describe("is_busy", () => {
+      test(
+        "is_busy",
+        () => {
+          const viewerStore = useViewerStore();
+          viewerStore.request_counter = 1;
+          expect(viewerStore.is_busy).toBe(true);
+        },
+        TIMEOUT,
+      );
+
+      test(
+        "not is_busy",
+        () => {
+          const viewerStore = useViewerStore();
+          viewerStore.request_counter = 0;
+          expect(viewerStore.is_busy).toBe(false);
+        },
+        TIMEOUT,
+      );
+    });
+  });
+  describe("actions", () => {
+    describe("toggle_picking_mode", () => {
+      test(
+        "true",
+        () => {
+          const viewerStore = useViewerStore();
+          viewerStore.toggle_picking_mode(true);
+          expect(viewerStore.picking_mode).toBe(true);
+        },
+        TIMEOUT,
+      );
+    });
+
+    describe("start_request", () => {
+      test(
+        "increment",
+        () => {
+          const viewerStore = useViewerStore();
+          viewerStore.start_request();
+          expect(viewerStore.request_counter).toBe(1);
+        },
+        TIMEOUT,
+      );
+    });
+
+    describe("stop_request", () => {
+      test(
+        "decrement",
+        () => {
+          const viewerStore = useViewerStore();
+          viewerStore.stop_request();
+          expect(viewerStore.request_counter).toBe(-1);
+        },
+        TIMEOUT,
+      );
+    });
+  });
+});

From de40bb1c43cd3675586a05710550b13d2a72f12d Mon Sep 17 00:00:00 2001
From: JulienChampagnol <julien.champagnol@geode-solutions.com>
Date: Tue, 3 Nov 2026 16:53:43 +0100
Subject: [PATCH 2/5] fix(lint): split files exceeding 200 lines

Co-Authored-By: Claude Sonnet 5.5 <noreply@anthropic.com>

From 8b2511e19843d59b8fc233538a76bcde594b89bf Mon Sep 17 00:00:00 2001
From: JulienChampagnol <91873154+JulienChampagnol@users.noreply.github.com>
Date: Wed, 4 Nov 2026 10:03:59 +0000
Subject: [PATCH 3/5] Apply prepare changes

---
 .oxlintrc.json | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/.oxlintrc.json b/.oxlintrc.json
index 088238721..6241c19c4 100644
--- a/.oxlintrc.json
+++ b/.oxlintrc.json
@@ -72,7 +72,7 @@
     "max-lines": [
       "error",
       {
-        "max": 350,
+        "max": 200,
         "skipBlankLines": true,
         "skipComments": true
       }

From 72a8e24b290050029c4bfb26796f2fa3197195f3 Mon Sep 17 00:00:00 2001
From: JulienChampagnol <julien.champagnol@geode-solutions.com>
Date: Wed, 4 Nov 2026 11:10:30 +0100
Subject: [PATCH 4/5] refactor(attribute_selector): move request params helper
 to composable to satisfy max-lines

---
 .../Viewer/Options/AttributeSelector.vue      | 21 ++++------------
 app/composables/attribute_selector.ts         | 25 ++++++++++++++++++-
 2 files changed, 29 insertions(+), 17 deletions(-)

diff --git a/app/components/Viewer/Options/AttributeSelector.vue b/app/components/Viewer/Options/AttributeSelector.vue
index efeb26a57..770f7eda3 100644
--- a/app/components/Viewer/Options/AttributeSelector.vue
+++ b/app/components/Viewer/Options/AttributeSelector.vue
@@ -1,8 +1,10 @@
 <script setup lang="ts">
 import {
   type AttributeInfo,
+  type AttributeRequestParams,
   attributeItemOptions,
   attributeRangesPerTarget,
+  attributeRequestParams,
   useAttributeRangeBounds,
   useSeriesTimeStepCommit,
 } from "@ogw_front/composables/attribute_selector";
@@ -81,24 +83,11 @@ const componentItems = computed<{ title: string; value: number }[]>(() => {
   return [];
 });
 
-function hasSelectedComponent(components: unknown): boolean {
-  return Array.isArray(components) && components.length > 0;
+function requestParams(): AttributeRequestParams | undefined {
+  return attributeRequestParams(schemas, id, componentIds);
 }
 
-function requestParams(): { id: string; component_ids?: string[] } | undefined {
-  const schemaProperties = schemas.names.properties as Record<string, unknown> | undefined;
-  if (schemaProperties?.component_ids === undefined) {
-    return { id };
-  }
-  if (!hasSelectedComponent(componentIds)) {
-    return undefined;
-  }
-  return { id, component_ids: componentIds };
-}
-
-function getRangeTargets(
-  name: string,
-): [string, { id: string; component_ids?: string[] } | undefined][] {
+function getRangeTargets(name: string): [string, AttributeRequestParams | undefined][] {
   if (groupTargetIds.value) {
     return [...attributesPerTarget]
       .filter(([, targetAttributes]) =>
diff --git a/app/composables/attribute_selector.ts b/app/composables/attribute_selector.ts
index 9f676a4e1..830c64d28 100644
--- a/app/composables/attribute_selector.ts
+++ b/app/composables/attribute_selector.ts
@@ -1,5 +1,5 @@
+import type { AttributeRangeInfo, AttributeSchemas } from "@ogw_front/utils/attribute_range";
 import type { AttributeRange } from "@ogw_front/composables/batch_style";
-import type { AttributeRangeInfo } from "@ogw_front/utils/attribute_range";
 import { getAttributeRange } from "@ogw_front/utils/attributes";
 
 interface AttributeInfo {
@@ -94,9 +94,32 @@ function useSeriesTimeStepCommit(
   };
 }
 
+interface AttributeRequestParams {
+  id: string;
+  component_ids?: string[];
+}
+
+// Params of the "names" request, or undefined when the schema needs components and none is selected
+function attributeRequestParams(
+  schemas: AttributeSchemas,
+  id: string,
+  componentIds: string[] | undefined,
+): AttributeRequestParams | undefined {
+  const { properties } = schemas.names;
+  if (typeof properties !== "object" || properties === null || !("component_ids" in properties)) {
+    return { id };
+  }
+  if (!Array.isArray(componentIds) || componentIds.length === 0) {
+    return undefined;
+  }
+  return { id, component_ids: componentIds };
+}
+
 export {
   type AttributeInfo,
+  type AttributeRequestParams,
   attributeItemOptions,
+  attributeRequestParams,
   attributeRangesPerTarget,
   useAttributeRangeBounds,
   useSeriesTimeStepCommit,

From d857cdf070aa2c57b5f52b3669a2802f0d8984c1 Mon Sep 17 00:00:00 2001
From: JulienChampagnol <julien.champagnol@geode-solutions.com>
Date: Wed, 4 Nov 2026 11:49:39 +0100
Subject: [PATCH 5/5] test