@geode/opengeodeweb-front 10.38.0 → 10.39.0

package/app/components/ThresholdFilter.vue

@@ -1,7 +1,9 @@
 <script setup lang="ts">
 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";
@@ -10,6 +12,7 @@ import ViewerOptionsAttributeRangeSelector from "@ogw_front/components/Viewer/Op
 import back_schemas from "@geode/opengeodeweb-back/opengeodeweb_back_typed_schemas.js";
 import { useBackStore } from "@ogw_front/stores/back";
 import { useDataStore } from "@ogw_front/stores/data";
+import { useDataStyleStore } from "@ogw_front/stores/data_style";
 import { useDebounceFn } from "@vueuse/core";
 import { useHybridViewerStore } from "@ogw_front/stores/hybrid_viewer";
 
@@ -24,6 +27,7 @@ const { escapeFunction = undefined } = defineProps<Props>();
 interface AttributeSource {
   title: string;
   schema: JsonRpcSchema;
+  timeStepKey: string;
   params: Record<string, unknown>;
   location: "point" | "cell";
 }
@@ -31,12 +35,14 @@ interface AttributeSource {
 interface AttributeInfo {
   attribute_name: string;
   nb_items: number;
+  time_steps?: number[];
   [key: string]: unknown;
 }
 
 const show = defineModel<boolean>("show", { default: false });
 const backStore = useBackStore();
 const dataStore = useDataStore();
+const dataStyleStore = useDataStyleStore();
 const hybridViewerStore = useHybridViewerStore();
 const selectedDatasetId = ref<string>();
 const sources = ref<AttributeSource[]>([]);
@@ -60,6 +66,19 @@ const availableSources = computed<{ title: string; value: number }[]>(() =>
 const currentAttribute = computed<AttributeInfo | undefined>(() =>
   attributes.value.find((attribute) => attribute.attribute_name === attributeName.value),
 );
+const currentTimeStep = computed<number | undefined>(() => {
+  const source = sources.value[selectedSourceIndex.value ?? -1];
+  if (!selectedDatasetId.value || !source || !currentAttribute.value?.time_steps?.length) {
+    return undefined;
+  }
+  const step =
+    dataStyleStore.attributeTimeStep(
+      selectedDatasetId.value,
+      source.timeStepKey,
+      attributeName.value,
+    ) ?? 0;
+  return Math.min(step, currentAttribute.value.time_steps.length - 1);
+});
 const itemOptions = computed<{ title: string; value: number }[]>(() =>
   Array.from({ length: currentAttribute.value?.nb_items ?? 0 }, (_, index) => ({
     title: `Item ${index + 1}`,
@@ -78,11 +97,16 @@ function attributeSource(
   kind: string,
   title: string,
   params: Record<string, unknown>,
-  isModel: boolean,
+  modelType?: string,
 ): AttributeSource {
+  const schema = attributeSchema(kind, modelType !== undefined);
   return {
     title: `${title}${kind} attribute`,
-    schema: attributeSchema(kind, isModel),
+    schema,
+    timeStepKey:
+      modelType === undefined
+        ? schema.$id
+        : (MODEL_COMPONENT_ATTRIBUTE_SCHEMAS[modelType]?.[kind]?.$id ?? schema.$id),
     params,
     location: kind === "vertex" ? "point" : "cell",
   };
@@ -93,7 +117,7 @@ async function fetchSources(id: string): Promise<AttributeSource[]> {
   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 }, false));
+      .map((kind) => attributeSource(kind, "", { id }));
   }
   const modelSources = await Promise.all(
     Object.entries(MODEL_COMPONENT_KINDS).map(async ([type, kinds]) => {
@@ -101,7 +125,7 @@ async function fetchSources(id: string): Promise<AttributeSource[]> {
       if (component_ids.length === 0) {
         return [];
       }
-      return kinds.map((kind) => attributeSource(kind, `${type} `, { id, component_ids }, true));
+      return kinds.map((kind) => attributeSource(kind, `${type} `, { id, component_ids }, type));
     }),
   );
   return modelSources.flat();
@@ -120,7 +144,7 @@ async function applyThreshold(): Promise<void> {
     return;
   }
   await hybridViewerStore.setThreshold([selectedDatasetId.value], {
-    name: attributeName.value,
+    name: attributeArrayName(attributeName.value, currentTimeStep.value),
     location: source.location,
     item: attributeItem.value,
     minimum: minimum.value,
@@ -177,6 +201,10 @@ watch(attributeItem, () => {
   resetRange();
 });
 
+watch(currentTimeStep, () => {
+  debouncedApply();
+});
+
 watch([minimum, maximum], () => {
   debouncedApply();
 });

package/app/components/Viewer/EdgedCurve/SpecificEdgesOptions.vue

@@ -78,6 +78,19 @@ const vertex_attribute_name = computed<string | undefined>({
     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) => {
@@ -130,6 +143,19 @@ const edge_attribute_name = computed<string | undefined>({
     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) => {
@@ -209,12 +235,14 @@ async function setEdgeAttributeRangesPerData(ranges: RangesPerData): Promise<voi
           @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>
     </template>

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

@@ -87,6 +87,19 @@ const vertex_attribute_name = computed<string | undefined>({
     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) => {
@@ -139,6 +152,19 @@ const cell_attribute_name = computed<string | undefined>({
     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) => {
@@ -218,12 +244,14 @@ async function setCellAttributeRangesPerData(ranges: RangesPerData): Promise<voi
           @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>
     </template>

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

@@ -79,6 +79,19 @@ const vertex_attribute_name = computed<string | undefined>({
     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) => {
@@ -131,6 +144,19 @@ const edge_attribute_name = computed<string | undefined>({
     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) => {
@@ -217,12 +243,14 @@ async function setEdgeAttributeRangesPerData(ranges: RangesPerData): Promise<voi
           @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>
     </template>

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

@@ -79,6 +79,19 @@ const vertex_attribute_name = computed<string | undefined>({
     hybridViewerStore.remoteRender();
   },
 });
+
+const vertex_attribute_time_step = computed<number | undefined>({
+  get: () => dataStyleStore.meshPointsVertexAttributeTimeStep(id.value),
+  set: async (newValue) => {
+    if (newValue === undefined) {
+      return;
+    }
+    await applyBatchStyle(id.value, (targetId: string) =>
+      Promise.resolve(dataStyleStore.setMeshPointsVertexAttributeTimeStep(targetId, newValue)),
+    );
+    hybridViewerStore.remoteRender();
+  },
+});
 const vertex_attribute_item = computed<string | undefined>({
   get: () => dataStyleStore.meshPointsVertexAttributeItem(id.value),
   set: async (newValue) => {
@@ -158,6 +171,7 @@ async function setVertexAttributeRangesPerData(ranges: RangesPerData): Promise<v
           @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"
           :capabilities="{ vertex: { available: false } }"
         />
       </template>

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

@@ -98,6 +98,19 @@ const vertex_attribute_name = computed<string | undefined>({
     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) => {
@@ -152,6 +165,19 @@ const polygon_attribute_name = computed<string | undefined>({
     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) => {
@@ -236,12 +262,14 @@ async function setPolygonAttributeRangesPerData(ranges: RangesPerData): Promise<
           @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>

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

@@ -69,6 +69,19 @@ const vertex_attribute_name = computed<string | undefined>({
     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) => {
@@ -123,6 +136,21 @@ const polyhedron_attribute_name = computed<string | undefined>({
     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) => {
@@ -208,12 +236,14 @@ async function setPolyhedronAttributeRangesPerData(ranges: RangesPerData): Promi
           @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 },

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

@@ -1,4 +1,5 @@
 <script setup lang="ts">
+// oxlint-disable eslint/max-lines
 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";
@@ -121,6 +122,17 @@ const blocksVertexAttributeName = computed<string | undefined>({
   },
 });
 
+const blocksVertexAttributeTimeStep = computed<number | undefined>({
+  get: () => dataStyleStore.modelBlocksVertexAttributeTimeStep(modelId, referenceBlockId.value),
+  set: async (newValue) => {
+    if (newValue === undefined) {
+      return;
+    }
+    await dataStyleStore.setModelBlocksVertexAttributeTimeStep(modelId, targetBlockIds, newValue);
+    hybridViewerStore.remoteRender();
+  },
+});
+
 const blocksVertexAttributeItem = computed<string | undefined>({
   get: () => dataStyleStore.modelBlocksVertexAttributeItem(modelId, referenceBlockId.value),
   set: async (newValue) => {
@@ -177,6 +189,21 @@ const blocksPolyhedronAttributeName = computed<string | undefined>({
   },
 });
 
+const blocksPolyhedronAttributeTimeStep = computed<number | undefined>({
+  get: () => dataStyleStore.modelBlocksPolyhedronAttributeTimeStep(modelId, referenceBlockId.value),
+  set: async (newValue) => {
+    if (newValue === undefined) {
+      return;
+    }
+    await dataStyleStore.setModelBlocksPolyhedronAttributeTimeStep(
+      modelId,
+      targetBlockIds,
+      newValue,
+    );
+    hybridViewerStore.remoteRender();
+  },
+});
+
 const blocksPolyhedronAttributeItem = computed<string | undefined>({
   get: () => dataStyleStore.modelBlocksPolyhedronAttributeItem(modelId, referenceBlockId.value),
   set: async (newValue) => {
@@ -239,6 +266,17 @@ const vertexAttributeName = computed<string | undefined>({
   },
 });
 
+const vertexAttributeTimeStep = computed<number | undefined>({
+  get: () => dataStyleStore.modelBlocksVertexAttributeTimeStep(modelId, blockId),
+  set: async (newValue) => {
+    if (blockId === undefined || newValue === undefined) {
+      return;
+    }
+    await dataStyleStore.setModelBlocksVertexAttributeTimeStep(modelId, [blockId], newValue);
+    hybridViewerStore.remoteRender();
+  },
+});
+
 const vertexAttributeItem = computed<string | undefined>({
   get: () => dataStyleStore.modelBlocksVertexAttributeItem(modelId, blockId),
   set: async (newValue) => {
@@ -295,6 +333,17 @@ const polyhedronAttributeName = computed<string | undefined>({
   },
 });
 
+const polyhedronAttributeTimeStep = computed<number | undefined>({
+  get: () => dataStyleStore.modelBlocksPolyhedronAttributeTimeStep(modelId, blockId),
+  set: async (newValue) => {
+    if (blockId === undefined || newValue === undefined) {
+      return;
+    }
+    await dataStyleStore.setModelBlocksPolyhedronAttributeTimeStep(modelId, [blockId], newValue);
+    hybridViewerStore.remoteRender();
+  },
+});
+
 const polyhedronAttributeItem = computed<string | undefined>({
   get: () => dataStyleStore.modelBlocksPolyhedronAttributeItem(modelId, blockId),
   set: async (newValue) => {
@@ -372,11 +421,13 @@ const polyhedronSchema = back_schemas.opengeodeweb_back.model_component_polyhedr
       v-model:vertex_attribute_range="blocksVertexAttributeRange"
       v-model:vertex_attribute_color_map="blocksVertexAttributeColorMap"
       v-model:vertex_attribute_no_data_color="blocksVertexAttributeNoDataColor"
+      v-model:vertex_attribute_time_step="blocksVertexAttributeTimeStep"
       v-model:polyhedron_attribute_name="blocksPolyhedronAttributeName"
       v-model:polyhedron_attribute_item="blocksPolyhedronAttributeItem"
       v-model:polyhedron_attribute_range="blocksPolyhedronAttributeRange"
       v-model:polyhedron_attribute_color_map="blocksPolyhedronAttributeColorMap"
       v-model:polyhedron_attribute_no_data_color="blocksPolyhedronAttributeNoDataColor"
+      v-model:polyhedron_attribute_time_step="blocksPolyhedronAttributeTimeStep"
       :capabilities="capabilities"
       :schemas="{ vertex: vertexSchema, polyhedron: polyhedronSchema }"
       :allowRandom="true"
@@ -400,11 +451,13 @@ const polyhedronSchema = back_schemas.opengeodeweb_back.model_component_polyhedr
       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:polyhedron_attribute_name="polyhedronAttributeName"
       v-model:polyhedron_attribute_item="polyhedronAttributeItem"
       v-model:polyhedron_attribute_range="polyhedronAttributeRange"
       v-model:polyhedron_attribute_color_map="polyhedronAttributeColorMap"
       v-model:polyhedron_attribute_no_data_color="polyhedronAttributeNoDataColor"
+      v-model:polyhedron_attribute_time_step="polyhedronAttributeTimeStep"
       :capabilities="capabilities"
       :schemas="{ vertex: vertexSchema, polyhedron: polyhedronSchema }"
       :allowRandom="true"

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

@@ -123,6 +123,17 @@ const cornersVertexAttributeName = computed<string | undefined>({
   },
 });
 
+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) => {
@@ -181,6 +192,17 @@ const vertexAttributeName = computed<string | undefined>({
   },
 });
 
+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) => {
@@ -252,6 +274,7 @@ const vertexSchema = back_schemas.opengeodeweb_back.model_component_vertex_attri
       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="{ vertex: vertexSchema }"
       :allowRandom="true"
@@ -275,6 +298,7 @@ const vertexSchema = back_schemas.opengeodeweb_back.model_component_vertex_attri
       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="{ vertex: vertexSchema }"
       :allowRandom="true"

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

@@ -120,6 +120,17 @@ const linesVertexAttributeName = computed<string | undefined>({
   },
 });
 
+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) => {
@@ -172,6 +183,17 @@ const linesEdgeAttributeName = computed<string | undefined>({
   },
 });
 
+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) => {
@@ -220,6 +242,17 @@ const vertexAttributeName = computed<string | undefined>({
   },
 });
 
+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) => {
@@ -276,6 +309,17 @@ const edgeAttributeName = computed<string | undefined>({
   },
 });
 
+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) => {
@@ -348,11 +392,13 @@ const edgeSchema = back_schemas.opengeodeweb_back.model_component_edge_attribute
       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="{ vertex: vertexSchema, edge: edgeSchema }"
       :allowRandom="true"
@@ -376,11 +422,13 @@ const edgeSchema = back_schemas.opengeodeweb_back.model_component_edge_attribute
       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="{ vertex: vertexSchema, edge: edgeSchema }"
       :allowRandom="true"