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

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

@@ -18,13 +18,19 @@ const dataStyleStore = useDataStyleStore();
 const hybridViewerStore = useHybridViewerStore();
 const { applyBatchStyle } = useBatchStyle();
 
+interface CapabilityConfig {
+  available?: boolean;
+  hasColorMap?: boolean;
+}
+
 interface Props {
   itemProps: ItemProps & { index?: number };
   btnImage: string;
   tooltip?: string;
+  capabilities?: Record<string, CapabilityConfig>;
 }
 
-const { itemProps, btnImage, tooltip = "Edges options" } = defineProps<Props>();
+const { itemProps, btnImage, tooltip = "Edges options", capabilities = {} } = defineProps<Props>();
 
 const id = toRef(() => itemProps.id);
 
@@ -251,6 +257,7 @@ async function setEdgeAttributeRangesPerData(ranges: RangesPerData): Promise<voi
           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>
     </template>

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

@@ -0,0 +1,223 @@
+<script setup lang="ts">
+import type { RGBAColor } from "@ogw_front/utils/default_styles/constants";
+import ViewerOptionsColoringTypeSelector from "@ogw_front/components/Viewer/Options/ColoringTypeSelector.vue";
+import ViewerOptionsWidthSlider from "@ogw_front/components/Viewer/Options/Sliders/Width.vue";
+import VisibilitySwitch from "@ogw_front/components/Viewer/Options/VisibilitySwitch.vue";
+import back_schemas from "@geode/opengeodeweb-back/opengeodeweb_back_typed_schemas.js";
+import { useDataStyleStore } from "@ogw_front/stores/data_style";
+import { useHybridViewerStore } from "@ogw_front/stores/hybrid_viewer";
+
+interface EdgesTarget {
+  componentType: "Surface" | "Block";
+  componentIds: string[];
+}
+
+interface Props {
+  modelId: string;
+  targets: EdgesTarget[];
+  referenceComponentId?: string;
+}
+
+const { modelId, targets, referenceComponentId = undefined } = defineProps<Props>();
+
+const dataStyleStore = useDataStyleStore();
+const hybridViewerStore = useHybridViewerStore();
+
+// Each component type exposes its own edges functions in the data style store
+const EDGES_STYLES = {
+  Surface: {
+    visibility: dataStyleStore.modelSurfaceEdgesVisibility,
+    width: dataStyleStore.modelSurfaceEdgesWidth,
+    color: dataStyleStore.modelSurfaceEdgesColor,
+    activeColoring: dataStyleStore.modelSurfaceEdgesActiveColoring,
+    vertexAttributeName: dataStyleStore.modelSurfaceEdgesVertexAttributeName,
+    vertexAttributeItem: dataStyleStore.modelSurfaceEdgesVertexAttributeItem,
+    vertexAttributeRange: dataStyleStore.modelSurfaceEdgesVertexAttributeRange,
+    vertexAttributeColorMap: dataStyleStore.modelSurfaceEdgesVertexAttributeColorMap,
+    vertexAttributeNoDataColor: dataStyleStore.modelSurfaceEdgesVertexAttributeNoDataColor,
+    setVisibility: dataStyleStore.setModelSurfacesEdgesVisibility,
+    setWidth: dataStyleStore.setModelSurfacesEdgesWidth,
+    setColor: dataStyleStore.setModelSurfacesEdgesColor,
+    setActiveColoring: dataStyleStore.setModelSurfacesEdgesActiveColoring,
+    setVertexAttributeName: dataStyleStore.setModelSurfacesEdgesVertexAttributeName,
+    setVertexAttributeItem: dataStyleStore.setModelSurfacesEdgesVertexAttributeItem,
+    setVertexAttributeRange: dataStyleStore.setModelSurfacesEdgesVertexAttributeRange,
+    setVertexAttributeColorMap: dataStyleStore.setModelSurfacesEdgesVertexAttributeColorMap,
+    setVertexAttributeNoDataColor: dataStyleStore.setModelSurfacesEdgesVertexAttributeNoDataColor,
+  },
+  Block: {
+    visibility: dataStyleStore.modelBlockEdgesVisibility,
+    width: dataStyleStore.modelBlockEdgesWidth,
+    color: dataStyleStore.modelBlockEdgesColor,
+    activeColoring: dataStyleStore.modelBlockEdgesActiveColoring,
+    vertexAttributeName: dataStyleStore.modelBlockEdgesVertexAttributeName,
+    vertexAttributeItem: dataStyleStore.modelBlockEdgesVertexAttributeItem,
+    vertexAttributeRange: dataStyleStore.modelBlockEdgesVertexAttributeRange,
+    vertexAttributeColorMap: dataStyleStore.modelBlockEdgesVertexAttributeColorMap,
+    vertexAttributeNoDataColor: dataStyleStore.modelBlockEdgesVertexAttributeNoDataColor,
+    setVisibility: dataStyleStore.setModelBlocksEdgesVisibility,
+    setWidth: dataStyleStore.setModelBlocksEdgesWidth,
+    setColor: dataStyleStore.setModelBlocksEdgesColor,
+    setActiveColoring: dataStyleStore.setModelBlocksEdgesActiveColoring,
+    setVertexAttributeName: dataStyleStore.setModelBlocksEdgesVertexAttributeName,
+    setVertexAttributeItem: dataStyleStore.setModelBlocksEdgesVertexAttributeItem,
+    setVertexAttributeRange: dataStyleStore.setModelBlocksEdgesVertexAttributeRange,
+    setVertexAttributeColorMap: dataStyleStore.setModelBlocksEdgesVertexAttributeColorMap,
+    setVertexAttributeNoDataColor: dataStyleStore.setModelBlocksEdgesVertexAttributeNoDataColor,
+  },
+};
+type EdgesStyle = (typeof EDGES_STYLES)[EdgesTarget["componentType"]];
+
+// Values are read from the first target, changes are applied to every target
+const edgesStyle = computed<EdgesStyle | undefined>(() => {
+  const [reference] = targets;
+  return reference === undefined ? undefined : EDGES_STYLES[reference.componentType];
+});
+const allComponentIds = computed<string[]>(() => targets.flatMap((target) => target.componentIds));
+
+async function applyEdgesStyle(
+  setter: (style: EdgesStyle, componentIds: string[]) => Promise<unknown>,
+): Promise<void> {
+  await Promise.all(
+    targets.map(async (target) => {
+      await setter(EDGES_STYLES[target.componentType], target.componentIds);
+    }),
+  );
+  hybridViewerStore.remoteRender();
+}
+
+const visibility = computed<boolean | undefined>({
+  get: () => edgesStyle.value?.visibility(modelId, referenceComponentId),
+  set: async (newValue) => {
+    if (newValue === undefined) {
+      return;
+    }
+    await applyEdgesStyle((style, ids) => style.setVisibility(modelId, ids, newValue));
+  },
+});
+
+const width = computed<number | undefined>({
+  get: () => edgesStyle.value?.width(modelId, referenceComponentId),
+  set: async (newValue) => {
+    if (newValue === undefined) {
+      return;
+    }
+    await applyEdgesStyle((style, ids) => style.setWidth(modelId, ids, newValue));
+  },
+});
+
+const activeColoring = computed<string | undefined>({
+  get: () => edgesStyle.value?.activeColoring(modelId, referenceComponentId),
+  set: async (newValue) => {
+    if (newValue === undefined) {
+      return;
+    }
+    await applyEdgesStyle((style, ids) => style.setActiveColoring(modelId, ids, newValue));
+  },
+});
+
+const color = computed<RGBAColor | undefined>({
+  get: () => edgesStyle.value?.color(modelId, referenceComponentId),
+  set: async (newValue) => {
+    if (newValue === undefined) {
+      return;
+    }
+    await applyEdgesStyle((style, ids) => style.setColor(modelId, ids, newValue));
+  },
+});
+
+const vertexAttributeName = computed<string | undefined>({
+  get: () => edgesStyle.value?.vertexAttributeName(modelId, referenceComponentId),
+  set: async (newValue) => {
+    if (newValue === undefined) {
+      return;
+    }
+    await applyEdgesStyle((style, ids) => style.setVertexAttributeName(modelId, ids, newValue));
+  },
+});
+
+const vertexAttributeItem = computed<number | undefined>({
+  get: () => edgesStyle.value?.vertexAttributeItem(modelId, referenceComponentId),
+  set: async (newValue) => {
+    if (newValue === undefined) {
+      return;
+    }
+    await applyEdgesStyle((style, ids) => style.setVertexAttributeItem(modelId, ids, newValue));
+  },
+});
+
+const vertexAttributeRange = computed<(number | undefined)[] | undefined>({
+  get: () => edgesStyle.value?.vertexAttributeRange(modelId, referenceComponentId),
+  set: async (newValue) => {
+    if (newValue === undefined) {
+      return;
+    }
+    const [minimum, maximum] = newValue;
+    if (minimum === undefined || maximum === undefined) {
+      return;
+    }
+    await applyEdgesStyle((style, ids) =>
+      style.setVertexAttributeRange(modelId, ids, minimum, maximum),
+    );
+  },
+});
+
+const vertexAttributeColorMap = computed<string | undefined>({
+  get: () => edgesStyle.value?.vertexAttributeColorMap(modelId, referenceComponentId),
+  set: async (newValue) => {
+    await applyEdgesStyle((style, ids) => style.setVertexAttributeColorMap(modelId, ids, newValue));
+  },
+});
+
+const vertexAttributeNoDataColor = computed<RGBAColor | undefined>({
+  get: () => edgesStyle.value?.vertexAttributeNoDataColor(modelId, referenceComponentId),
+  set: async (newValue) => {
+    if (newValue === undefined) {
+      return;
+    }
+    await applyEdgesStyle((style, ids) =>
+      style.setVertexAttributeNoDataColor(modelId, ids, newValue),
+    );
+  },
+});
+
+const capabilities = {
+  color: { available: true },
+  textures: { available: false },
+  vertex: { available: true },
+  edge: { available: false },
+  cell: { available: false },
+  polygon: { available: false },
+  polyhedron: { available: false },
+};
+
+const backSchemas = back_schemas.opengeodeweb_back;
+const attributeSchemas = {
+  vertex: {
+    names: backSchemas.model_component_vertex_attribute_names,
+    range: backSchemas.model_component_vertex_attribute_range,
+  },
+};
+</script>
+
+<template>
+  <div class="mt-2" data-testid="modelComponentEdgesOptions">
+    <VisibilitySwitch data-testid="modelComponentEdgesVisibilitySwitch" v-model="visibility" />
+    <template v-if="visibility">
+      <ViewerOptionsWidthSlider data-testid="modelComponentEdgesWidthSlider" v-model="width" />
+      <ViewerOptionsColoringTypeSelector
+        :id="modelId"
+        :componentIds="allComponentIds"
+        v-model:coloring_style_key="activeColoring"
+        v-model:color="color"
+        v-model:vertex_attribute_name="vertexAttributeName"
+        v-model:vertex_attribute_item="vertexAttributeItem"
+        v-model:vertex_attribute_range="vertexAttributeRange"
+        v-model:vertex_attribute_color_map="vertexAttributeColorMap"
+        v-model:vertex_attribute_no_data_color="vertexAttributeNoDataColor"
+        :capabilities="capabilities"
+        :schemas="attributeSchemas"
+      />
+    </template>
+  </div>
+</template>

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

@@ -2,36 +2,14 @@
 import ViewerContextMenuItem, {
   type ItemProps,
 } from "@ogw_front/components/Viewer/ContextMenu/ContextMenuItem.vue";
+import ModelEdgesCard from "./ModelEdgesCard.vue";
 import SurfaceEdges from "@ogw_front/assets/viewer_svgs/surface_edges.svg";
-import ViewerOptionsVisibilitySwitch from "@ogw_front/components/Viewer/Options/VisibilitySwitch.vue";
-import { useBatchStyle } from "@ogw_front/composables/batch_style";
-import { useDataStyleStore } from "@ogw_front/stores/data_style";
-import { useHybridViewerStore } from "@ogw_front/stores/hybrid_viewer";
-
-const dataStyleStore = useDataStyleStore();
-const hybridViewerStore = useHybridViewerStore();
-const { applyBatchStyle } = useBatchStyle();
 
 interface Props {
   itemProps: ItemProps & { index: number };
 }
 
 const { itemProps } = defineProps<Props>();
-
-const id = computed(() => (itemProps.meta_data.modelId as string | undefined) || itemProps.id);
-
-const visibility = computed({
-  get: () => dataStyleStore.modelEdgesVisibility(id.value),
-  set: async (newValue) => {
-    if (newValue === undefined) {
-      return;
-    }
-    await applyBatchStyle(id.value, (targetId: string) =>
-      dataStyleStore.setModelEdgesVisibility(targetId, newValue),
-    );
-    hybridViewerStore.remoteRender();
-  },
-});
 </script>
 
 <template>
@@ -43,10 +21,7 @@ const visibility = computed({
     :btnImage="SurfaceEdges"
   >
     <template #options>
-      <ViewerOptionsVisibilitySwitch
-        data-testid="modelEdgesVisibilitySwitch"
-        v-model="visibility"
-      />
+      <ModelEdgesCard :itemProps="itemProps" />
     </template>
   </ViewerContextMenuItem>
 </template>

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

@@ -0,0 +1,159 @@
+<script setup lang="ts">
+import {
+  type ModelMenuItemProps,
+  useModelMenuContext,
+} from "@ogw_front/composables/model_menu_context";
+import OptionsSection from "@ogw_front/components/Viewer/Options/OptionsSection.vue";
+import ViewerGenericModelComponentEdgesOptions from "@ogw_front/components/Viewer/Generic/Model/ComponentEdgesOptions.vue";
+import ViewerOptionsWidthSlider from "@ogw_front/components/Viewer/Options/Sliders/Width.vue";
+import VisibilitySwitch from "@ogw_front/components/Viewer/Options/VisibilitySwitch.vue";
+import { useBatchStyle } from "@ogw_front/composables/batch_style";
+import { useDataStore } from "@ogw_front/stores/data";
+import { useDataStyleStore } from "@ogw_front/stores/data_style";
+import { useHybridViewerStore } from "@ogw_front/stores/hybrid_viewer";
+
+// Lines are edges themselves and corners have none: no edges options for them
+const EDGES_TYPE_TITLES = {
+  Surface: "Surfaces Edges Options",
+  Block: "Blocks Edges Options",
+} as const;
+type EdgesComponentType = keyof typeof EDGES_TYPE_TITLES;
+const EDGES_COMPONENT_TYPES: EdgesComponentType[] = ["Surface", "Block"];
+
+function isEdgesComponentType(type: string | undefined): type is EdgesComponentType {
+  return type !== undefined && type in EDGES_TYPE_TITLES;
+}
+
+interface Props {
+  itemProps: ModelMenuItemProps;
+}
+
+const { itemProps } = defineProps<Props>();
+
+const dataStore = useDataStore();
+const dataStyleStore = useDataStyleStore();
+const hybridViewerStore = useHybridViewerStore();
+const { applyBatchStyle } = useBatchStyle();
+
+const { modelId, componentId, componentType, collections, targetComponentIds } =
+  useModelMenuContext(() => itemProps);
+
+const modelEdgesVisibility = computed<boolean | undefined>({
+  get: () => dataStyleStore.modelEdgesVisibility(modelId.value),
+  set: async (newValue) => {
+    if (newValue === undefined) {
+      return;
+    }
+    await applyBatchStyle(modelId.value, (targetId: string) =>
+      dataStyleStore.setModelEdgesVisibility(targetId, newValue),
+    );
+    hybridViewerStore.remoteRender();
+  },
+});
+
+const modelEdgesWidth = computed<number | undefined>({
+  get: () => dataStyleStore.modelEdgesWidth(modelId.value),
+  set: async (newValue) => {
+    if (newValue === undefined) {
+      return;
+    }
+    await applyBatchStyle(modelId.value, (targetId: string) =>
+      dataStyleStore.setModelEdgesWidth(targetId, newValue),
+    );
+    hybridViewerStore.remoteRender();
+  },
+});
+
+const edgesComponentType = computed<EdgesComponentType | undefined>(() =>
+  isEdgesComponentType(componentType.value) ? componentType.value : undefined,
+);
+
+const allComponentsTargets = ref<{ componentType: EdgesComponentType; componentIds: string[] }[]>(
+  [],
+);
+watch(
+  modelId,
+  async (currentModelId) => {
+    const targets = await Promise.all(
+      EDGES_COMPONENT_TYPES.map(async (type) => ({
+        componentType: type,
+        componentIds: await dataStore.getMeshComponentGeodeIds(currentModelId, type),
+      })),
+    );
+    if (modelId.value === currentModelId) {
+      allComponentsTargets.value = targets.filter((target) => target.componentIds.length > 0);
+    }
+  },
+  { immediate: true },
+);
+
+const typeTargets = computed(() =>
+  edgesComponentType.value === undefined
+    ? []
+    : [{ componentType: edgesComponentType.value, componentIds: targetComponentIds.value }],
+);
+const typeReferenceId = computed<string | undefined>(() =>
+  collections.value ? targetComponentIds.value[0] : undefined,
+);
+
+const componentTargets = computed(() =>
+  edgesComponentType.value === undefined || componentId.value === undefined
+    ? []
+    : [{ componentType: edgesComponentType.value, componentIds: [componentId.value] }],
+);
+</script>
+
+<template>
+  <v-sheet class="model-edges-card" color="transparent">
+    <OptionsSection title="Model Edges Options">
+      <VisibilitySwitch data-testid="modelEdgesVisibilitySwitch" v-model="modelEdgesVisibility" />
+      <ViewerOptionsWidthSlider
+        v-if="modelEdgesVisibility"
+        data-testid="modelEdgesWidthSlider"
+        v-model="modelEdgesWidth"
+      />
+    </OptionsSection>
+
+    <OptionsSection
+      v-if="!componentType && !componentId && allComponentsTargets.length > 0"
+      title="Components Edges Options"
+      data-testid="modelEdgesComponentsOptions"
+      class="mt-4"
+    >
+      <ViewerGenericModelComponentEdgesOptions :modelId="modelId" :targets="allComponentsTargets" />
+    </OptionsSection>
+
+    <OptionsSection
+      v-if="edgesComponentType"
+      :title="EDGES_TYPE_TITLES[edgesComponentType]"
+      data-testid="modelEdgesComponentTypeOptions"
+      class="mt-4"
+    >
+      <ViewerGenericModelComponentEdgesOptions
+        :modelId="modelId"
+        :targets="typeTargets"
+        :referenceComponentId="typeReferenceId"
+      />
+    </OptionsSection>
+
+    <OptionsSection
+      v-if="edgesComponentType && componentId"
+      title="Component Edges Options"
+      data-testid="modelEdgesComponentOptions"
+      class="mt-4"
+    >
+      <ViewerGenericModelComponentEdgesOptions
+        :modelId="modelId"
+        :targets="componentTargets"
+        :referenceComponentId="componentId"
+      />
+    </OptionsSection>
+  </v-sheet>
+</template>
+
+<style scoped>
+.model-edges-card {
+  padding-top: 12px;
+  overflow-x: hidden;
+}
+</style>

package/app/components/Viewer/Grid/2D/EdgesOptions.vue

@@ -11,5 +11,9 @@ const { itemProps } = defineProps<Props>();
 </script>
 
 <template>
-  <ViewerGenericMeshEdgesOptions :itemProps="itemProps" :btnImage="Grid2D_Edges" />
+  <ViewerGenericMeshEdgesOptions
+    :itemProps="itemProps"
+    :btnImage="Grid2D_Edges"
+    :capabilities="{ edge: { available: false } }"
+  />
 </template>

package/app/components/Viewer/Grid/3D/EdgesOptions.vue

@@ -11,5 +11,9 @@ const { itemProps } = defineProps<Props>();
 </script>
 
 <template>
-  <ViewerGenericMeshEdgesOptions :itemProps="itemProps" :btnImage="Grid3D_Edges" />
+  <ViewerGenericMeshEdgesOptions
+    :itemProps="itemProps"
+    :btnImage="Grid3D_Edges"
+    :capabilities="{ edge: { available: false } }"
+  />
 </template>

package/app/components/Viewer/Solid/EdgesOptions.vue

@@ -11,5 +11,9 @@ const { itemProps } = defineProps<Props>();
 </script>
 
 <template>
-  <ViewerGenericMeshEdgesOptions :itemProps="itemProps" :btnImage="SolidEdges" />
+  <ViewerGenericMeshEdgesOptions
+    :itemProps="itemProps"
+    :btnImage="SolidEdges"
+    :capabilities="{ edge: { available: false } }"
+  />
 </template>

package/app/components/Viewer/Surface/EdgesOptions.vue

@@ -11,5 +11,9 @@ const { itemProps } = defineProps<Props>();
 </script>
 
 <template>
-  <ViewerGenericMeshEdgesOptions :itemProps="itemProps" :btnImage="SurfaceEdges" />
+  <ViewerGenericMeshEdgesOptions
+    :itemProps="itemProps"
+    :btnImage="SurfaceEdges"
+    :capabilities="{ edge: { available: false } }"
+  />
 </template>

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

@@ -0,0 +1,51 @@
+import {
+  type ModelComponentEdgesStyle,
+  useModelComponentEdgesStyle,
+} from "@ogw_internal/stores/data_style/model/edges/component";
+
+interface UseModelBlocksEdgesStyleReturn {
+  modelBlockEdgesVisibility: ModelComponentEdgesStyle["visibility"];
+  modelBlockEdgesWidth: ModelComponentEdgesStyle["width"];
+  modelBlockEdgesColor: ModelComponentEdgesStyle["color"];
+  modelBlockEdgesActiveColoring: ModelComponentEdgesStyle["activeColoring"];
+  modelBlockEdgesVertexAttributeName: ModelComponentEdgesStyle["vertexAttributeName"];
+  modelBlockEdgesVertexAttributeItem: ModelComponentEdgesStyle["vertexAttributeItem"];
+  modelBlockEdgesVertexAttributeRange: ModelComponentEdgesStyle["vertexAttributeRange"];
+  modelBlockEdgesVertexAttributeColorMap: ModelComponentEdgesStyle["vertexAttributeColorMap"];
+  modelBlockEdgesVertexAttributeNoDataColor: ModelComponentEdgesStyle["vertexAttributeNoDataColor"];
+  setModelBlocksEdgesVisibility: ModelComponentEdgesStyle["setVisibility"];
+  setModelBlocksEdgesWidth: ModelComponentEdgesStyle["setWidth"];
+  setModelBlocksEdgesColor: ModelComponentEdgesStyle["setColor"];
+  setModelBlocksEdgesActiveColoring: ModelComponentEdgesStyle["setActiveColoring"];
+  setModelBlocksEdgesVertexAttributeName: ModelComponentEdgesStyle["setVertexAttributeName"];
+  setModelBlocksEdgesVertexAttributeItem: ModelComponentEdgesStyle["setVertexAttributeItem"];
+  setModelBlocksEdgesVertexAttributeRange: ModelComponentEdgesStyle["setVertexAttributeRange"];
+  setModelBlocksEdgesVertexAttributeColorMap: ModelComponentEdgesStyle["setVertexAttributeColorMap"];
+  setModelBlocksEdgesVertexAttributeNoDataColor: ModelComponentEdgesStyle["setVertexAttributeNoDataColor"];
+  applyModelBlocksEdgesStyle: ModelComponentEdgesStyle["applyEdgesStyle"];
+}
+
+export function useModelBlocksEdgesStyle(): UseModelBlocksEdgesStyleReturn {
+  const edges = useModelComponentEdgesStyle("Block");
+  return {
+    modelBlockEdgesVisibility: edges.visibility,
+    modelBlockEdgesWidth: edges.width,
+    modelBlockEdgesColor: edges.color,
+    modelBlockEdgesActiveColoring: edges.activeColoring,
+    modelBlockEdgesVertexAttributeName: edges.vertexAttributeName,
+    modelBlockEdgesVertexAttributeItem: edges.vertexAttributeItem,
+    modelBlockEdgesVertexAttributeRange: edges.vertexAttributeRange,
+    modelBlockEdgesVertexAttributeColorMap: edges.vertexAttributeColorMap,
+    modelBlockEdgesVertexAttributeNoDataColor: edges.vertexAttributeNoDataColor,
+    setModelBlocksEdgesVisibility: edges.setVisibility,
+    setModelBlocksEdgesWidth: edges.setWidth,
+    setModelBlocksEdgesColor: edges.setColor,
+    setModelBlocksEdgesActiveColoring: edges.setActiveColoring,
+    setModelBlocksEdgesVertexAttributeName: edges.setVertexAttributeName,
+    setModelBlocksEdgesVertexAttributeItem: edges.setVertexAttributeItem,
+    setModelBlocksEdgesVertexAttributeRange: edges.setVertexAttributeRange,
+    setModelBlocksEdgesVertexAttributeColorMap: edges.setVertexAttributeColorMap,
+    setModelBlocksEdgesVertexAttributeNoDataColor: edges.setVertexAttributeNoDataColor,
+    applyModelBlocksEdgesStyle: edges.applyEdgesStyle,
+  };
+}

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

@@ -7,6 +7,7 @@ import type { RGBAColor } from "@ogw_front/utils/default_styles/constants";
 import { useDataStore } from "@ogw_front/stores/data";
 import { useModelBlocksColor } from "./color";
 import { useModelBlocksCommonStyle } from "./common";
+import { useModelBlocksEdgesStyle } from "./edges";
 import { useModelBlocksPointsStyle } from "./points";
 import { useModelBlocksVisibility } from "./visibility";
 
@@ -36,6 +37,7 @@ type UseModelBlocksStyleReturn = {
   ReturnType<typeof useModelBlocksVisibility> &
   ReturnType<typeof useModelBlocksColor> &
   ReturnType<typeof useModelBlocksPointsStyle> &
+  ReturnType<typeof useModelBlocksEdgesStyle> &
   ReturnType<typeof useModelBlocksVertexAttribute> &
   ReturnType<typeof useModelBlocksPolyhedronAttribute>;
 
@@ -48,6 +50,7 @@ export function useModelBlocksStyle(): UseModelBlocksStyleReturn {
   const modelBlocksVertexAttribute = useModelBlocksVertexAttribute();
   const modelBlocksPolyhedronAttribute = useModelBlocksPolyhedronAttribute();
   const modelBlocksPointsStyle = useModelBlocksPointsStyle();
+  const modelBlocksEdgesStyle = useModelBlocksEdgesStyle();
 
   async function applyModelBlocksVisibilityStyle(
     modelId: string,
@@ -249,5 +252,6 @@ export function useModelBlocksStyle(): UseModelBlocksStyleReturn {
     ...modelBlocksVertexAttribute,
     ...modelBlocksPolyhedronAttribute,
     ...modelBlocksPointsStyle,
+    ...modelBlocksEdgesStyle,
   };
 }

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

@@ -0,0 +1,27 @@
+import type { RGBAColor } from "@ogw_front/utils/default_styles/constants";
+
+function groupBy(componentIds: string[], key: (componentId: string) => string): string[][] {
+  const groups: Record<string, string[]> = {};
+  for (const componentId of componentIds) {
+    const groupKey = key(componentId);
+    groups[groupKey] ??= [];
+    groups[groupKey].push(componentId);
+  }
+  return Object.values(groups);
+}
+
+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>>;
+}
+
+export { groupBy };
+export type { AttributeState, AttributeStoredConfig };

package/internal/stores/data_style/model/edges/component.ts

@@ -0,0 +1,406 @@
+// oxlint-disable eslint/max-lines
+import {
+  type AttributeState,
+  type AttributeStoredConfig,
+  groupBy,
+} from "@ogw_internal/stores/data_style/model/component_style";
+import {
+  DEFAULT_NO_DATA_COLOR,
+  EDGES_DEFAULT_COLOR,
+  EDGES_DEFAULT_VISIBILITY,
+  EDGES_DEFAULT_WIDTH,
+  type RGBAColor,
+} from "@ogw_front/utils/default_styles/constants";
+import { getRGBPointsFromPreset } from "@ogw_front/utils/colormap";
+import merge from "lodash/merge";
+import { useAttributeTimeStepStyle } from "@ogw_internal/stores/data_style/time_step";
+import { useDataStore } from "@ogw_front/stores/data";
+import { useDataStyleState } from "@ogw_internal/stores/data_style/state";
+import { useModelCommonStyle } from "@ogw_internal/stores/data_style/model/common";
+import { useViewerStore } from "@ogw_front/stores/viewer";
+import viewer_schemas from "@geode/opengeodeweb-viewer/opengeodeweb_viewer_typed_schemas.js";
+
+// Lines are edges themselves and corners have none, so only these components get their own edges style
+const EDGES_COMPONENT_TYPES = ["Surface", "Block"] as const;
+type EdgesComponentType = (typeof EDGES_COMPONENT_TYPES)[number];
+
+const modelSchemas = viewer_schemas.opengeodeweb_viewer.model;
+const COMPONENT_TYPE_KEYS = {
+  Surface: "surfaces",
+  Block: "blocks",
+} as const;
+
+type EdgesSchemas =
+  (typeof modelSchemas)[(typeof COMPONENT_TYPE_KEYS)[EdgesComponentType]]["edges"];
+type EdgesRequestSchema =
+  | EdgesSchemas["visibility"]
+  | EdgesSchemas["width"]
+  | EdgesSchemas["color"]
+  | EdgesSchemas["attribute"]["vertex"]["attribute"];
+
+interface EdgesStyle {
+  visibility?: boolean;
+  width?: number;
+  coloring?: {
+    active?: string;
+    constant?: RGBAColor;
+    vertex?: AttributeState;
+  };
+}
+
+// Return type is inferred, see ModelComponentEdgesStyle: signatures live on the functions only
+// oxlint-disable-next-line max-lines-per-function, max-statements, typescript/explicit-function-return-type, typescript/explicit-module-boundary-types
+function useModelComponentEdgesStyle(type: EdgesComponentType) {
+  const dataStore = useDataStore();
+  const dataStyleState = useDataStyleState();
+  const modelCommonStyle = useModelCommonStyle();
+  const viewerStore = useViewerStore();
+  const { seriesArrayName } = useAttributeTimeStepStyle();
+  const schemas = modelSchemas[COMPONENT_TYPE_KEYS[type]].edges;
+
+  // Without an explicit edges style, components follow the model edges style
+  function edgesStyle(modelId: string, componentId?: string): EdgesStyle {
+    // oxlint-disable-next-line no-unsafe-type-assertion -- edges shape is defined by the data style schema.
+    const modelEdges = (dataStyleState.getStyle(modelId).edges ?? {}) as EdgesStyle;
+    // oxlint-disable-next-line no-unsafe-type-assertion -- edges shape is defined by the data style schema.
+    const typeEdges = dataStyleState.getModelComponentTypeStyle(modelId, type).edges as
+      | EdgesStyle
+      | undefined;
+    const componentEdges =
+      componentId === undefined
+        ? undefined
+        : // oxlint-disable-next-line no-unsafe-type-assertion -- edges shape is defined by the data style schema.
+          (dataStyleState.getComponentStyle(modelId, componentId).edges as EdgesStyle | undefined);
+    return merge(
+      {
+        visibility: modelEdges.visibility ?? EDGES_DEFAULT_VISIBILITY,
+        width: modelEdges.width ?? EDGES_DEFAULT_WIDTH,
+        coloring: { active: "constant", constant: EDGES_DEFAULT_COLOR },
+      },
+      typeEdges,
+      componentEdges,
+    );
+  }
+
+  function vertexAttribute(modelId: string, componentId?: string): AttributeState {
+    return edgesStyle(modelId, componentId).coloring?.vertex ?? {};
+  }
+
+  function edgesVisibility(modelId: string, componentId?: string): boolean {
+    return edgesStyle(modelId, componentId).visibility ?? EDGES_DEFAULT_VISIBILITY;
+  }
+
+  function edgesWidth(modelId: string, componentId?: string): number {
+    return edgesStyle(modelId, componentId).width ?? EDGES_DEFAULT_WIDTH;
+  }
+
+  function edgesColor(modelId: string, componentId?: string): RGBAColor {
+    return edgesStyle(modelId, componentId).coloring?.constant ?? EDGES_DEFAULT_COLOR;
+  }
+
+  function activeColoring(modelId: string, componentId?: string): string {
+    return edgesStyle(modelId, componentId).coloring?.active ?? "constant";
+  }
+
+  function vertexAttributeName(modelId: string, componentId?: string): string | undefined {
+    return vertexAttribute(modelId, componentId).name;
+  }
+
+  function lastItem(modelId: string, componentId: string | undefined, name?: string): number {
+    const { storedConfigs } = vertexAttribute(modelId, componentId);
+    return name === undefined ? 0 : (storedConfigs?.[name]?.lastItem ?? 0);
+  }
+
+  function vertexAttributeItem(modelId: string, componentId?: string): number {
+    const { name, item } = vertexAttribute(modelId, componentId);
+    return item ?? lastItem(modelId, componentId, name);
+  }
+
+  function storedConfig(modelId: string, componentId: string | undefined): AttributeStoredConfig {
+    const { name, storedConfigs } = vertexAttribute(modelId, componentId);
+    const item = vertexAttributeItem(modelId, componentId);
+    const config = name === undefined ? undefined : storedConfigs?.[name]?.[item];
+    // A stored config may be partial, missing fields fall back to the defaults
+    return {
+      minimum: undefined,
+      maximum: undefined,
+      colorMap: undefined,
+      no_data_color: DEFAULT_NO_DATA_COLOR,
+      ...config,
+    };
+  }
+
+  function vertexAttributeRange(
+    modelId: string,
+    componentId?: string,
+  ): [number | undefined, number | undefined] {
+    const { minimum, maximum } = storedConfig(modelId, componentId);
+    return [minimum, maximum];
+  }
+
+  function vertexAttributeColorMap(modelId: string, componentId?: string): string | undefined {
+    return storedConfig(modelId, componentId).colorMap;
+  }
+
+  function vertexAttributeNoDataColor(modelId: string, componentId?: string): RGBAColor {
+    return storedConfig(modelId, componentId).no_data_color;
+  }
+
+  // The type style is updated too when every component of the type is targeted
+  async function mutateEdges(
+    modelId: string,
+    componentIds: string[],
+    values: EdgesStyle,
+  ): Promise<void> {
+    const tasks = [
+      modelCommonStyle.mutateComponentStyles(modelId, componentIds, { edges: values }),
+    ];
+    const totalIds = await dataStore.getMeshComponentGeodeIds(modelId, type);
+    if (componentIds.length === totalIds.length) {
+      tasks.push(modelCommonStyle.mutateModelComponentTypeStyle(modelId, type, { edges: values }));
+    }
+    await Promise.all(tasks);
+  }
+
+  async function requestEdges(
+    modelId: string,
+    componentIds: string[],
+    schema: EdgesRequestSchema,
+    values: Record<string, unknown> & { style: EdgesStyle },
+  ): Promise<unknown> {
+    if (componentIds.length === 0) {
+      return undefined;
+    }
+    const block_ids = await dataStore.getMeshComponentsViewerIds(modelId, componentIds);
+    if (!block_ids?.length) {
+      return undefined;
+    }
+    const { style, ...params } = values;
+    const result = await viewerStore.request(
+      // oxlint-disable-next-line no-unsafe-type-assertion, no-unnecessary-type-assertion -- params match the edges schema of every component type.
+      { schema, params: { id: modelId, block_ids, ...params } } as Parameters<
+        typeof viewerStore.request
+      >[0],
+      {
+        response_function: async () => {
+          await mutateEdges(modelId, componentIds, style);
+        },
+      },
+    );
+    return result;
+  }
+
+  async function setVisibility(
+    modelId: string,
+    componentIds: string[],
+    visibility: boolean,
+  ): Promise<unknown> {
+    const result = await requestEdges(modelId, componentIds, schemas.visibility, {
+      visibility,
+      style: { visibility },
+    });
+    return result;
+  }
+
+  async function setWidth(
+    modelId: string,
+    componentIds: string[],
+    width: number,
+  ): Promise<unknown> {
+    const result = await requestEdges(modelId, componentIds, schemas.width, {
+      width,
+      style: { width },
+    });
+    return result;
+  }
+
+  async function setColor(
+    modelId: string,
+    componentIds: string[],
+    color: RGBAColor,
+  ): Promise<unknown> {
+    const result = await requestEdges(modelId, componentIds, schemas.color, {
+      color,
+      style: { coloring: { active: "constant", constant: color } },
+    });
+    return result;
+  }
+
+  async function applyVertexAttribute(modelId: string, componentIds: string[]): Promise<unknown> {
+    const [referenceId] = componentIds;
+    const name = vertexAttributeName(modelId, referenceId);
+    const item = vertexAttributeItem(modelId, referenceId);
+    const { minimum, maximum, colorMap, no_data_color } = storedConfig(modelId, referenceId);
+    if (
+      name === undefined ||
+      minimum === undefined ||
+      maximum === undefined ||
+      colorMap === undefined
+    ) {
+      return undefined;
+    }
+    const schema = schemas.attribute.vertex.attribute;
+    const result = await requestEdges(modelId, componentIds, schema, {
+      name: seriesArrayName(modelId, schema.$id, name),
+      item,
+      points: [...getRGBPointsFromPreset(colorMap)],
+      minimum,
+      maximum,
+      no_data_color,
+      style: { coloring: { active: "vertex" } },
+    });
+    return result;
+  }
+
+  async function mutateVertexAttribute(
+    modelId: string,
+    componentIds: string[],
+    values: AttributeState,
+  ): Promise<void> {
+    await mutateEdges(modelId, componentIds, { coloring: { vertex: values } });
+  }
+
+  async function mutateStoredConfig(
+    modelId: string,
+    componentIds: string[],
+    config: Partial<AttributeStoredConfig>,
+  ): Promise<void> {
+    const name = vertexAttributeName(modelId, componentIds[0]);
+    const item = vertexAttributeItem(modelId, componentIds[0]);
+    const itemConfigs = { lastItem: item, [item]: config };
+    // oxlint-disable-next-line no-unsafe-type-assertion -- partial stored config is merged into the existing one.
+    const storedConfigs = { [name ?? ""]: itemConfigs } as AttributeState["storedConfigs"];
+    await mutateVertexAttribute(modelId, componentIds, { storedConfigs });
+  }
+
+  async function setActiveColoring(
+    modelId: string,
+    componentIds: string[],
+    activeColoringType: string,
+  ): Promise<unknown> {
+    await mutateEdges(modelId, componentIds, { coloring: { active: activeColoringType } });
+    if (activeColoringType === "vertex") {
+      const result = await applyVertexAttribute(modelId, componentIds);
+      return result;
+    }
+    const result = await setColor(modelId, componentIds, edgesColor(modelId, componentIds[0]));
+    return result;
+  }
+
+  async function setVertexAttributeName(
+    modelId: string,
+    componentIds: string[],
+    name: string,
+  ): Promise<unknown> {
+    const item = lastItem(modelId, componentIds[0], name);
+    await mutateVertexAttribute(modelId, componentIds, { name, item });
+    const result = await applyVertexAttribute(modelId, componentIds);
+    return result;
+  }
+
+  async function setVertexAttributeItem(
+    modelId: string,
+    componentIds: string[],
+    item: number,
+  ): Promise<unknown> {
+    await mutateVertexAttribute(modelId, componentIds, { item });
+    const result = await applyVertexAttribute(modelId, componentIds);
+    return result;
+  }
+
+  async function setVertexAttributeRange(
+    modelId: string,
+    componentIds: string[],
+    minimum: number,
+    maximum: number,
+  ): Promise<unknown> {
+    await mutateStoredConfig(modelId, componentIds, { minimum, maximum });
+    const result = await applyVertexAttribute(modelId, componentIds);
+    return result;
+  }
+
+  async function setVertexAttributeColorMap(
+    modelId: string,
+    componentIds: string[],
+    colorMap: string | undefined,
+  ): Promise<unknown> {
+    await mutateStoredConfig(modelId, componentIds, { colorMap });
+    const result = await applyVertexAttribute(modelId, componentIds);
+    return result;
+  }
+
+  async function setVertexAttributeNoDataColor(
+    modelId: string,
+    componentIds: string[],
+    no_data_color: RGBAColor,
+  ): Promise<unknown> {
+    await mutateStoredConfig(modelId, componentIds, { no_data_color });
+    const result = await applyVertexAttribute(modelId, componentIds);
+    return result;
+  }
+
+  async function styledComponentIds(modelId: string): Promise<string[]> {
+    const componentIds = await dataStore.getMeshComponentGeodeIds(modelId, type);
+    if (dataStyleState.getModelComponentTypeStyle(modelId, type).edges !== undefined) {
+      return componentIds;
+    }
+    return componentIds.filter(
+      (componentId) => dataStyleState.getComponentStyle(modelId, componentId).edges !== undefined,
+    );
+  }
+
+  // The model edges routes override every component, so the explicit edges styles follow
+  async function mutateStyledEdges(modelId: string, values: EdgesStyle): Promise<void> {
+    const componentIds = await styledComponentIds(modelId);
+    if (componentIds.length > 0) {
+      await mutateEdges(modelId, componentIds, values);
+    }
+  }
+
+  // Only components with an explicit edges style are sent, the others follow the model edges
+  async function applyEdgesStyle(modelId: string): Promise<void> {
+    const componentIds = await styledComponentIds(modelId);
+    function style(componentId?: string): EdgesStyle {
+      return edgesStyle(modelId, componentId);
+    }
+    await Promise.all([
+      ...groupBy(componentIds, (id) => String(style(id).visibility)).map(async (ids) => {
+        await setVisibility(modelId, ids, edgesVisibility(modelId, ids[0]));
+      }),
+      ...groupBy(componentIds, (id) => String(style(id).width)).map(async (ids) => {
+        await setWidth(modelId, ids, edgesWidth(modelId, ids[0]));
+      }),
+      ...groupBy(componentIds, (id) => JSON.stringify(style(id).coloring)).map(async (ids) => {
+        await setActiveColoring(modelId, ids, activeColoring(modelId, ids[0]));
+      }),
+    ]);
+  }
+
+  return {
+    visibility: edgesVisibility,
+    width: edgesWidth,
+    color: edgesColor,
+    activeColoring,
+    vertexAttributeName,
+    vertexAttributeItem,
+    vertexAttributeRange,
+    vertexAttributeColorMap,
+    vertexAttributeNoDataColor,
+    setVisibility,
+    setWidth,
+    setColor,
+    setActiveColoring,
+    setVertexAttributeName,
+    setVertexAttributeItem,
+    setVertexAttributeRange,
+    setVertexAttributeColorMap,
+    setVertexAttributeNoDataColor,
+    mutateStyledEdges,
+    applyEdgesStyle,
+  };
+}
+
+type ModelComponentEdgesStyle = ReturnType<typeof useModelComponentEdgesStyle>;
+
+export { EDGES_COMPONENT_TYPES, useModelComponentEdgesStyle };
+export type { ModelComponentEdgesStyle };

package/internal/stores/data_style/model/edges/index.ts

@@ -1,13 +1,17 @@
 import { useModelEdgesCommonStyle } from "./common";
 import { useModelEdgesVisibilityStyle } from "./visibility";
+import { useModelEdgesWidthStyle } from "./width";
 
 export function useModelEdgesStyle(): ReturnType<typeof useModelEdgesCommonStyle> &
-  ReturnType<typeof useModelEdgesVisibilityStyle> {
+  ReturnType<typeof useModelEdgesVisibilityStyle> &
+  ReturnType<typeof useModelEdgesWidthStyle> {
   const modelEdgesCommonStyle = useModelEdgesCommonStyle();
   const modelEdgesVisibilityStyle = useModelEdgesVisibilityStyle();
+  const modelEdgesWidthStyle = useModelEdgesWidthStyle();
 
   return {
     ...modelEdgesCommonStyle,
     ...modelEdgesVisibilityStyle,
+    ...modelEdgesWidthStyle,
   };
 }

package/internal/stores/data_style/model/edges/visibility.ts

@@ -1,7 +1,12 @@
 // Third party imports
 import viewer_schemas from "@geode/opengeodeweb-viewer/opengeodeweb_viewer_typed_schemas.js";
 
+import {
+  EDGES_COMPONENT_TYPES,
+  useModelComponentEdgesStyle,
+} from "@ogw_internal/stores/data_style/model/edges/component";
 import { useModelEdgesCommonStyle } from "./common";
+import { useModelEdgesWidthStyle } from "./width";
 import { useViewerStore } from "@ogw_front/stores/viewer";
 import { whenDefined } from "@ogw_internal/stores/data_style/when_defined";
 
@@ -17,6 +22,10 @@ interface ModelEdgesVisibilityStyleApi {
 export function useModelEdgesVisibilityStyle(): ModelEdgesVisibilityStyleApi {
   const viewerStore = useViewerStore();
   const modelEdgesCommonStyle = useModelEdgesCommonStyle();
+  const modelEdgesWidthStyle = useModelEdgesWidthStyle();
+  const componentsEdgesStyles = EDGES_COMPONENT_TYPES.map((type) =>
+    useModelComponentEdgesStyle(type),
+  );
 
   function modelEdgesVisibility(id: string): boolean | undefined {
     const { visibility } = modelEdgesCommonStyle.modelEdgesStyle(id);
@@ -32,7 +41,12 @@ export function useModelEdgesVisibilityStyle(): ModelEdgesVisibilityStyleApi {
       { schema, params },
       {
         response_function: async () => {
-          await modelEdgesCommonStyle.mutateModelEdgesStyle(id, { visibility });
+          await Promise.all([
+            modelEdgesCommonStyle.mutateModelEdgesStyle(id, { visibility }),
+            ...componentsEdgesStyles.map(async (edgesStyle) => {
+              await edgesStyle.mutateStyledEdges(id, { visibility });
+            }),
+          ]);
         },
       },
     );
@@ -40,11 +54,18 @@ export function useModelEdgesVisibilityStyle(): ModelEdgesVisibilityStyleApi {
   }
 
   async function applyModelEdgesStyle(id: string): Promise<unknown[]> {
-    const result = await whenDefined(modelEdgesVisibility(id), async (visibility) => {
+    const visibilityResult = await whenDefined(modelEdgesVisibility(id), async (visibility) => {
       const applied = await setModelEdgesVisibility(id, visibility);
       return applied;
     });
-    return [result];
+    const widthResult = await whenDefined(
+      modelEdgesWidthStyle.modelEdgesWidth(id),
+      async (width) => {
+        const applied = await modelEdgesWidthStyle.setModelEdgesWidth(id, width);
+        return applied;
+      },
+    );
+    return [visibilityResult, widthResult];
   }
 
   return {

package/internal/stores/data_style/model/edges/width.ts

@@ -0,0 +1,56 @@
+// Third party imports
+import viewer_schemas from "@geode/opengeodeweb-viewer/opengeodeweb_viewer_typed_schemas.js";
+
+// Local imports
+import {
+  EDGES_COMPONENT_TYPES,
+  useModelComponentEdgesStyle,
+} from "@ogw_internal/stores/data_style/model/edges/component";
+import { useModelEdgesCommonStyle } from "./common";
+import { useViewerStore } from "@ogw_front/stores/viewer";
+
+// Local constants
+const schema = viewer_schemas.opengeodeweb_viewer.model.edges.width;
+
+export function useModelEdgesWidthStyle(): {
+  modelEdgesWidth: (id: string) => number | undefined;
+  setModelEdgesWidth: (id: string, width: number) => Promise<unknown>;
+} {
+  const viewerStore = useViewerStore();
+  const modelEdgesCommonStyle = useModelEdgesCommonStyle();
+  const componentsEdgesStyles = EDGES_COMPONENT_TYPES.map((type) =>
+    useModelComponentEdgesStyle(type),
+  );
+
+  function modelEdgesWidth(id: string): number | undefined {
+    // oxlint-disable-next-line no-unsafe-type-assertion -- edges style values are dynamically typed at runtime.
+    return modelEdgesCommonStyle.modelEdgesStyle(id).width as number | undefined;
+  }
+
+  async function setModelEdgesWidth(id: string, width: number): Promise<unknown> {
+    const params = { id, width };
+    const result = await viewerStore.request(
+      {
+        schema,
+        params,
+      },
+      {
+        response_function: async () => {
+          const [mutateResult] = await Promise.all([
+            modelEdgesCommonStyle.mutateModelEdgesStyle(id, { width }),
+            ...componentsEdgesStyles.map(async (edgesStyle) => {
+              await edgesStyle.mutateStyledEdges(id, { width });
+            }),
+          ]);
+          return mutateResult;
+        },
+      },
+    );
+    return result;
+  }
+
+  return {
+    modelEdgesWidth,
+    setModelEdgesWidth,
+  };
+}

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

@@ -61,11 +61,13 @@ function useModelStyle(): UseModelStyleReturn {
       modelPointsStyle.applyModelPointsStyle(modelId),
       modelEdgesStyle.applyModelEdgesStyle(modelId),
     ]);
-    // Components points come after the model points, which override every component
+    // Components points and edges come after the model ones, which override every component
     await Promise.all([
       modelSurfacesStyle.applyModelSurfacesPointsStyle(modelId),
       modelLinesStyle.applyModelLinesPointsStyle(modelId),
       modelBlocksStyle.applyModelBlocksPointsStyle(modelId),
+      modelSurfacesStyle.applyModelSurfacesEdgesStyle(modelId),
+      modelBlocksStyle.applyModelBlocksEdgesStyle(modelId),
     ]);
     return results;
   }

package/internal/stores/data_style/model/points/component.ts

@@ -1,4 +1,9 @@
 // oxlint-disable eslint/max-lines
+import {
+  type AttributeState,
+  type AttributeStoredConfig,
+  groupBy,
+} from "@ogw_internal/stores/data_style/model/component_style";
 import {
   DEFAULT_NO_DATA_COLOR,
   POINTS_DEFAULT_COLOR,
@@ -34,29 +39,6 @@ type PointsRequestSchema =
   | PointsSchemas["color"]
   | PointsSchemas["attribute"]["vertex"]["attribute"];
 
-function groupBy(componentIds: string[], key: (componentId: string) => string): string[][] {
-  const groups: Record<string, string[]> = {};
-  for (const componentId of componentIds) {
-    const groupKey = key(componentId);
-    groups[groupKey] ??= [];
-    groups[groupKey].push(componentId);
-  }
-  return Object.values(groups);
-}
-
-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 PointsStyle {
   visibility?: boolean;
   size?: number;

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

@@ -0,0 +1,51 @@
+import {
+  type ModelComponentEdgesStyle,
+  useModelComponentEdgesStyle,
+} from "@ogw_internal/stores/data_style/model/edges/component";
+
+interface UseModelSurfacesEdgesStyleReturn {
+  modelSurfaceEdgesVisibility: ModelComponentEdgesStyle["visibility"];
+  modelSurfaceEdgesWidth: ModelComponentEdgesStyle["width"];
+  modelSurfaceEdgesColor: ModelComponentEdgesStyle["color"];
+  modelSurfaceEdgesActiveColoring: ModelComponentEdgesStyle["activeColoring"];
+  modelSurfaceEdgesVertexAttributeName: ModelComponentEdgesStyle["vertexAttributeName"];
+  modelSurfaceEdgesVertexAttributeItem: ModelComponentEdgesStyle["vertexAttributeItem"];
+  modelSurfaceEdgesVertexAttributeRange: ModelComponentEdgesStyle["vertexAttributeRange"];
+  modelSurfaceEdgesVertexAttributeColorMap: ModelComponentEdgesStyle["vertexAttributeColorMap"];
+  modelSurfaceEdgesVertexAttributeNoDataColor: ModelComponentEdgesStyle["vertexAttributeNoDataColor"];
+  setModelSurfacesEdgesVisibility: ModelComponentEdgesStyle["setVisibility"];
+  setModelSurfacesEdgesWidth: ModelComponentEdgesStyle["setWidth"];
+  setModelSurfacesEdgesColor: ModelComponentEdgesStyle["setColor"];
+  setModelSurfacesEdgesActiveColoring: ModelComponentEdgesStyle["setActiveColoring"];
+  setModelSurfacesEdgesVertexAttributeName: ModelComponentEdgesStyle["setVertexAttributeName"];
+  setModelSurfacesEdgesVertexAttributeItem: ModelComponentEdgesStyle["setVertexAttributeItem"];
+  setModelSurfacesEdgesVertexAttributeRange: ModelComponentEdgesStyle["setVertexAttributeRange"];
+  setModelSurfacesEdgesVertexAttributeColorMap: ModelComponentEdgesStyle["setVertexAttributeColorMap"];
+  setModelSurfacesEdgesVertexAttributeNoDataColor: ModelComponentEdgesStyle["setVertexAttributeNoDataColor"];
+  applyModelSurfacesEdgesStyle: ModelComponentEdgesStyle["applyEdgesStyle"];
+}
+
+export function useModelSurfacesEdgesStyle(): UseModelSurfacesEdgesStyleReturn {
+  const edges = useModelComponentEdgesStyle("Surface");
+  return {
+    modelSurfaceEdgesVisibility: edges.visibility,
+    modelSurfaceEdgesWidth: edges.width,
+    modelSurfaceEdgesColor: edges.color,
+    modelSurfaceEdgesActiveColoring: edges.activeColoring,
+    modelSurfaceEdgesVertexAttributeName: edges.vertexAttributeName,
+    modelSurfaceEdgesVertexAttributeItem: edges.vertexAttributeItem,
+    modelSurfaceEdgesVertexAttributeRange: edges.vertexAttributeRange,
+    modelSurfaceEdgesVertexAttributeColorMap: edges.vertexAttributeColorMap,
+    modelSurfaceEdgesVertexAttributeNoDataColor: edges.vertexAttributeNoDataColor,
+    setModelSurfacesEdgesVisibility: edges.setVisibility,
+    setModelSurfacesEdgesWidth: edges.setWidth,
+    setModelSurfacesEdgesColor: edges.setColor,
+    setModelSurfacesEdgesActiveColoring: edges.setActiveColoring,
+    setModelSurfacesEdgesVertexAttributeName: edges.setVertexAttributeName,
+    setModelSurfacesEdgesVertexAttributeItem: edges.setVertexAttributeItem,
+    setModelSurfacesEdgesVertexAttributeRange: edges.setVertexAttributeRange,
+    setModelSurfacesEdgesVertexAttributeColorMap: edges.setVertexAttributeColorMap,
+    setModelSurfacesEdgesVertexAttributeNoDataColor: edges.setVertexAttributeNoDataColor,
+    applyModelSurfacesEdgesStyle: edges.applyEdgesStyle,
+  };
+}

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

@@ -4,6 +4,7 @@ import type { RGBAColor } from "@ogw_front/utils/default_styles/constants";
 import { useDataStore } from "@ogw_front/stores/data";
 import { useModelSurfacesColor } from "./color";
 import { useModelSurfacesCommonStyle } from "./common";
+import { useModelSurfacesEdgesStyle } from "./edges";
 import { useModelSurfacesPointsStyle } from "./points";
 import { useModelSurfacesVisibility } from "./visibility";
 
@@ -30,6 +31,7 @@ type UseModelSurfacesStyleReturn = ReturnType<typeof useModelSurfacesCommonStyle
   ReturnType<typeof useModelSurfacesVisibility> &
   ReturnType<typeof useModelSurfacesColor> &
   ReturnType<typeof useModelSurfacesPointsStyle> &
+  ReturnType<typeof useModelSurfacesEdgesStyle> &
   ReturnType<typeof useModelSurfacesVertexAttribute> &
   ReturnType<typeof useModelSurfacesPolygonAttribute> & {
     applyModelSurfacesStyle: (modelId: string) => Promise<void>;
@@ -45,6 +47,7 @@ export function useModelSurfacesStyle(): UseModelSurfacesStyleReturn {
   const modelSurfacesVertexAttribute = useModelSurfacesVertexAttribute();
   const modelSurfacesPolygonAttribute = useModelSurfacesPolygonAttribute();
   const modelSurfacesPointsStyle = useModelSurfacesPointsStyle();
+  const modelSurfacesEdgesStyle = useModelSurfacesEdgesStyle();
 
   async function applyModelSurfacesVisibilityStyle(
     modelId: string,
@@ -268,5 +271,6 @@ export function useModelSurfacesStyle(): UseModelSurfacesStyleReturn {
     ...modelSurfacesVertexAttribute,
     ...modelSurfacesPolygonAttribute,
     ...modelSurfacesPointsStyle,
+    ...modelSurfacesEdgesStyle,
   };
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@geode/opengeodeweb-front",
-  "version": "10.41.0",
+  "version": "10.41.1-rc.1",
   "description": "OpenSource Vue/Nuxt/Pinia/Vuetify framework for web applications",
   "homepage": "https://github.com/Geode-solutions/OpenGeodeWeb-Front",
   "bugs": {
@@ -64,9 +64,9 @@
     "prepublishOnly": "npm run build"
   },
   "dependencies": {
-    "@geode/cloud-api": "latest",
-    "@geode/opengeodeweb-back": "latest",
-    "@geode/opengeodeweb-viewer": "latest",
+    "@geode/cloud-api": "next",
+    "@geode/opengeodeweb-back": "next",
+    "@geode/opengeodeweb-viewer": "next",
     "@kitware/vtk.js": "33.3.0",
     "@mdi/font": "7.4.47",
     "@msgpack/msgpack": "2.8.0",