@geode/opengeodeweb-front 10.38.0 → 10.39.0

package/app/stores/data_style.ts

@@ -6,6 +6,7 @@ import type {
 import type { Table } from "dexie";
 import { database } from "@ogw_internal/database/database.js";
 import { getDefaultStyle } from "@ogw_front/utils/default_styles";
+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 { useMeshStyle } from "@ogw_internal/stores/data_style/mesh/index";
@@ -37,6 +38,7 @@ export const useDataStyleStore = defineStore("dataStyle", () => {
   const dataStyleState = useDataStyleState();
   const meshStyleStore = useMeshStyle();
   const modelStyleStore = useModelStyle();
+  const attributeTimeStepStyle = useAttributeTimeStepStyle();
   const dataStore = useDataStore();
   // oxlint-disable-next-line no-unsafe-type-assertion -- the database Proxy is typed as `{}` at its export site; this cast documents its real runtime shape.
   const typedDatabase = database as unknown as DatabaseTables;
@@ -160,6 +162,7 @@ export const useDataStyleStore = defineStore("dataStyle", () => {
     importStores,
     applyAllStylesFromState,
     ...dataStyleState,
+    ...attributeTimeStepStyle,
     ...meshStyleStore,
     ...modelStyleStore,
   };

package/app/utils/attributes.ts

@@ -1,3 +1,5 @@
+import viewer_schemas from "@geode/opengeodeweb-viewer/opengeodeweb_viewer_typed_schemas.js";
+
 interface AttributeRangeSource {
   min_values?: readonly number[];
   max_values?: readonly number[];
@@ -55,13 +57,29 @@ const MESH_ELEMENT_KINDS: Record<string, string> = {
   TetrahedralSolid3D: "polyhedron",
 };
 
-const MODEL_COMPONENT_KINDS: Record<string, string[]> = {
-  Corner: ["vertex"],
-  Line: ["vertex", "edge"],
-  Surface: ["vertex", "polygon"],
-  Block: ["vertex", "polyhedron"],
+const MODEL_COMPONENT_ATTRIBUTE_SCHEMAS: Record<string, Record<string, { $id: string }>> = {
+  Corner: { vertex: viewer_schemas.opengeodeweb_viewer.model.corners.attribute.vertex.attribute },
+  Line: {
+    vertex: viewer_schemas.opengeodeweb_viewer.model.lines.attribute.vertex.attribute,
+    edge: viewer_schemas.opengeodeweb_viewer.model.lines.attribute.edge.attribute,
+  },
+  Surface: {
+    vertex: viewer_schemas.opengeodeweb_viewer.model.surfaces.attribute.vertex.attribute,
+    polygon: viewer_schemas.opengeodeweb_viewer.model.surfaces.attribute.polygon.attribute,
+  },
+  Block: {
+    vertex: viewer_schemas.opengeodeweb_viewer.model.blocks.attribute.vertex.attribute,
+    polyhedron: viewer_schemas.opengeodeweb_viewer.model.blocks.attribute.polyhedron.attribute,
+  },
 };
 
+const MODEL_COMPONENT_KINDS: Record<string, string[]> = Object.fromEntries(
+  Object.entries(MODEL_COMPONENT_ATTRIBUTE_SCHEMAS).map(([type, schemas]) => [
+    type,
+    Object.keys(schemas),
+  ]),
+);
+
 function intersectBy<TItem>(
   lists: readonly (readonly TItem[])[],
   key: (item: TItem) => string,
@@ -75,6 +93,16 @@ function intersectBy<TItem>(
 interface NamedAttribute {
   attribute_name: string;
   nb_items: number;
+  time_steps?: readonly number[];
+}
+
+function sameTimeSteps(left: NamedAttribute, right: NamedAttribute): boolean {
+  const leftSteps = left.time_steps ?? [];
+  const rightSteps = right.time_steps ?? [];
+  return (
+    leftSteps.length === rightSteps.length &&
+    leftSteps.every((time, index) => time === rightSteps[index])
+  );
 }
 
 function intersectAttributes<TAttribute extends NamedAttribute>(
@@ -83,19 +111,28 @@ function intersectAttributes<TAttribute extends NamedAttribute>(
   const allAttributes = attributesPerData.flat();
   const common: TAttribute[] = [];
   for (const attribute of intersectBy(attributesPerData, (item) => item.attribute_name)) {
-    const nb_items = Math.min(
-      ...allAttributes
-        .filter((other) => other.attribute_name === attribute.attribute_name)
-        .map((other) => other.nb_items),
+    const sameName = allAttributes.filter(
+      (other) => other.attribute_name === attribute.attribute_name,
     );
+    if (!sameName.every((other) => sameTimeSteps(other, attribute))) {
+      continue;
+    }
+    const nb_items = Math.min(...sameName.map((other) => other.nb_items));
     common.push({ ...attribute, nb_items });
   }
   return common;
 }
 
+// OpenGeode-IO writes each step of a time series as the "<name>@<step>" VTK array
+function attributeArrayName(name: string, timeStep: number | undefined): string {
+  return timeStep === undefined ? name : `${name}@${timeStep}`;
+}
+
 export {
   MESH_ELEMENT_KINDS,
+  MODEL_COMPONENT_ATTRIBUTE_SCHEMAS,
   MODEL_COMPONENT_KINDS,
+  attributeArrayName,
   getAttributeRange,
   intersectAttributes,
   intersectBy,

package/internal/stores/data_style/mesh/cells/cell.ts

@@ -1,13 +1,16 @@
 import { DEFAULT_NO_DATA_COLOR, type RGBAColor } from "@ogw_front/utils/default_styles/constants";
 // Third party imports
+import back_schemas from "@geode/opengeodeweb-back/opengeodeweb_back_typed_schemas.js";
 import viewer_schemas from "@geode/opengeodeweb-viewer/opengeodeweb_viewer_typed_schemas.js";
 
 // Local imports
 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 {
@@ -56,6 +59,8 @@ 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,
@@ -74,6 +79,7 @@ function useMeshCellsCellAttributeStyle(): {
   meshCellsCellAttributeNoDataColor: (id: string) => RGBAColor;
   setMeshCellsCellAttributeNoDataColor: (id: string, no_data_color: RGBAColor) => Promise<unknown>;
 } {
+  const { attributeTimeStep, setAttributeTimeStep, seriesArrayName } = useAttributeTimeStepStyle();
   const viewerStore = useViewerStore();
   const meshCellsCommonStyle = useMeshCellsCommonStyle();
   function meshCellsCellAttribute(id: string): AttributeState {
@@ -140,6 +146,9 @@ function useMeshCellsCellAttributeStyle(): {
     const { item, name } = meshCellsCellAttribute(id);
     return item ?? meshCellsCellAttributeLastItem(id, name);
   }
+  function meshCellsCellAttributeTimeStep(id: string): number | undefined {
+    return attributeTimeStep(id, attributeNamesSchema.$id, meshCellsCellAttribute(id).name);
+  }
   async function setMeshCellsCellAttribute(
     id: string,
     {
@@ -165,7 +174,7 @@ function useMeshCellsCellAttributeStyle(): {
     const schema = meshCellsCellAttributeSchemas.attribute;
     const params = {
       id,
-      name,
+      name: seriesArrayName(id, attributeNamesSchema.$id, name),
       item,
       points,
       minimum,
@@ -215,6 +224,14 @@ function useMeshCellsCellAttributeStyle(): {
     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) {
+      return undefined;
+    }
+    await setAttributeTimeStep(id, attributeNamesSchema.$id, name, timeStep);
+    return applyCellAttribute(id);
+  }
   async function setMeshCellsCellAttributeRange(
     id: string,
     minimum: number,
@@ -266,6 +283,8 @@ function useMeshCellsCellAttributeStyle(): {
   }
   return {
     meshCellsCellAttributeName,
+    meshCellsCellAttributeTimeStep,
+    setMeshCellsCellAttributeTimeStep,
     meshCellsCellAttributeItem,
     meshCellsCellAttributeRange,
     meshCellsCellAttributeColorMap,

package/internal/stores/data_style/mesh/cells/index.ts

@@ -28,7 +28,8 @@ function handleMeshCellsVertexColoring(
   const item = vertexAttributeStyle.meshCellsVertexAttributeItem(id);
   const [minimum, maximum] = vertexAttributeStyle.meshCellsVertexAttributeRange(id);
   const colorMap = vertexAttributeStyle.meshCellsVertexAttributeColorMap(id);
-  const vertex_attribute = { name, item, minimum, maximum, colorMap };
+  const no_data_color = vertexAttributeStyle.meshCellsVertexAttributeNoDataColor(id);
+  const vertex_attribute = { name, item, minimum, maximum, colorMap, no_data_color };
   if (!isMeshCellsVertexAttributeValid(vertex_attribute)) {
     return undefined;
   }
@@ -43,7 +44,8 @@ function handleMeshCellsCellColoring(
   const item = cellAttributeStyle.meshCellsCellAttributeItem(id);
   const [minimum, maximum] = cellAttributeStyle.meshCellsCellAttributeRange(id);
   const colorMap = cellAttributeStyle.meshCellsCellAttributeColorMap(id);
-  const cell_attribute = { name, item, minimum, maximum, colorMap };
+  const no_data_color = cellAttributeStyle.meshCellsCellAttributeNoDataColor(id);
+  const cell_attribute = { name, item, minimum, maximum, colorMap, no_data_color };
   if (!isMeshCellsCellAttributeValid(cell_attribute)) {
     return undefined;
   }

package/internal/stores/data_style/mesh/cells/vertex.ts

@@ -1,13 +1,16 @@
 import { DEFAULT_NO_DATA_COLOR, type RGBAColor } from "@ogw_front/utils/default_styles/constants";
 // Third party imports
+import back_schemas from "@geode/opengeodeweb-back/opengeodeweb_back_typed_schemas.js";
 import viewer_schemas from "@geode/opengeodeweb-viewer/opengeodeweb_viewer_typed_schemas.js";
 
 // Local imports
 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.vertex_attribute_names;
 const meshCellsVertexAttributeSchemas =
   viewer_schemas.opengeodeweb_viewer.mesh.cells.attribute.vertex;
 
@@ -56,6 +59,8 @@ 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,
@@ -83,6 +88,7 @@ interface UseMeshCellsVertexAttributeStyleReturn {
 
 // 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 {
@@ -149,6 +155,9 @@ function useMeshCellsVertexAttributeStyle(): UseMeshCellsVertexAttributeStyleRet
     const { item, name } = meshCellsVertexAttribute(id);
     return item ?? meshCellsVertexAttributeLastItem(id, name);
   }
+  function meshCellsVertexAttributeTimeStep(id: string): number | undefined {
+    return attributeTimeStep(id, attributeNamesSchema.$id, meshCellsVertexAttribute(id).name);
+  }
   async function setMeshCellsVertexAttribute(
     id: string,
     {
@@ -174,7 +183,7 @@ function useMeshCellsVertexAttributeStyle(): UseMeshCellsVertexAttributeStyleRet
     const schema = meshCellsVertexAttributeSchemas.attribute;
     const params = {
       id,
-      name,
+      name: seriesArrayName(id, attributeNamesSchema.$id, name),
       item,
       points,
       minimum,
@@ -224,6 +233,17 @@ function useMeshCellsVertexAttributeStyle(): UseMeshCellsVertexAttributeStyleRet
     const storedConfig = meshCellsVertexAttributeStoredConfig(id, name, item);
     return [storedConfig.minimum, storedConfig.maximum];
   }
+  async function setMeshCellsVertexAttributeTimeStep(
+    id: string,
+    timeStep: number,
+  ): Promise<unknown> {
+    const name = meshCellsVertexAttributeName(id);
+    if (name === undefined) {
+      return undefined;
+    }
+    await setAttributeTimeStep(id, attributeNamesSchema.$id, name, timeStep);
+    return applyVertexAttribute(id);
+  }
   async function setMeshCellsVertexAttributeRange(
     id: string,
     minimum: number,
@@ -275,6 +295,8 @@ function useMeshCellsVertexAttributeStyle(): UseMeshCellsVertexAttributeStyleRet
   }
   return {
     meshCellsVertexAttributeName,
+    meshCellsVertexAttributeTimeStep,
+    setMeshCellsVertexAttributeTimeStep,
     meshCellsVertexAttributeItem,
     meshCellsVertexAttributeRange,
     meshCellsVertexAttributeColorMap,

package/internal/stores/data_style/mesh/edges/edge.ts

@@ -1,13 +1,16 @@
 import { DEFAULT_NO_DATA_COLOR, type RGBAColor } from "@ogw_front/utils/default_styles/constants";
 // Third party imports
+import back_schemas from "@geode/opengeodeweb-back/opengeodeweb_back_typed_schemas.js";
 import viewer_schemas from "@geode/opengeodeweb-viewer/opengeodeweb_viewer_typed_schemas.js";
 
 // Local imports
 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 {
@@ -56,6 +59,8 @@ 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,
@@ -74,6 +79,7 @@ function useMeshEdgesEdgeAttributeStyle(): {
   meshEdgesEdgeAttributeNoDataColor: (id: string) => RGBAColor;
   setMeshEdgesEdgeAttributeNoDataColor: (id: string, no_data_color: RGBAColor) => Promise<unknown>;
 } {
+  const { attributeTimeStep, setAttributeTimeStep, seriesArrayName } = useAttributeTimeStepStyle();
   const viewerStore = useViewerStore();
   const meshEdgesCommonStyle = useMeshEdgesCommonStyle();
   function meshEdgesEdgeAttribute(id: string): AttributeState {
@@ -140,6 +146,9 @@ function useMeshEdgesEdgeAttributeStyle(): {
     const { item, name } = meshEdgesEdgeAttribute(id);
     return item ?? meshEdgesEdgeAttributeLastItem(id, name);
   }
+  function meshEdgesEdgeAttributeTimeStep(id: string): number | undefined {
+    return attributeTimeStep(id, attributeNamesSchema.$id, meshEdgesEdgeAttribute(id).name);
+  }
   async function setMeshEdgesEdgeAttribute(
     id: string,
     {
@@ -165,7 +174,7 @@ function useMeshEdgesEdgeAttributeStyle(): {
     const schema = meshEdgesEdgeAttributeSchemas.attribute;
     const params = {
       id,
-      name,
+      name: seriesArrayName(id, attributeNamesSchema.$id, name),
       item,
       points,
       minimum,
@@ -215,6 +224,14 @@ function useMeshEdgesEdgeAttributeStyle(): {
     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) {
+      return undefined;
+    }
+    await setAttributeTimeStep(id, attributeNamesSchema.$id, name, timeStep);
+    return applyEdgeAttribute(id);
+  }
   async function setMeshEdgesEdgeAttributeRange(
     id: string,
     minimum: number,
@@ -266,6 +283,8 @@ function useMeshEdgesEdgeAttributeStyle(): {
   }
   return {
     meshEdgesEdgeAttributeName,
+    meshEdgesEdgeAttributeTimeStep,
+    setMeshEdgesEdgeAttributeTimeStep,
     meshEdgesEdgeAttributeItem,
     meshEdgesEdgeAttributeRange,
     meshEdgesEdgeAttributeColorMap,

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

@@ -27,7 +27,8 @@ function handleMeshEdgesVertexColoring(
   const item = vertexAttributeStyle.meshEdgesVertexAttributeItem(id);
   const [minimum, maximum] = vertexAttributeStyle.meshEdgesVertexAttributeRange(id);
   const colorMap = vertexAttributeStyle.meshEdgesVertexAttributeColorMap(id);
-  const vertex_attribute = { name, item, minimum, maximum, colorMap };
+  const no_data_color = vertexAttributeStyle.meshEdgesVertexAttributeNoDataColor(id);
+  const vertex_attribute = { name, item, minimum, maximum, colorMap, no_data_color };
   if (!isMeshEdgesVertexAttributeValid(vertex_attribute)) {
     return undefined;
   }
@@ -42,7 +43,8 @@ function handleMeshEdgesEdgeColoring(
   const item = edgeAttributeStyle.meshEdgesEdgeAttributeItem(id);
   const [minimum, maximum] = edgeAttributeStyle.meshEdgesEdgeAttributeRange(id);
   const colorMap = edgeAttributeStyle.meshEdgesEdgeAttributeColorMap(id);
-  const edge_attribute = { name, item, minimum, maximum, colorMap };
+  const no_data_color = edgeAttributeStyle.meshEdgesEdgeAttributeNoDataColor(id);
+  const edge_attribute = { name, item, minimum, maximum, colorMap, no_data_color };
   if (!isMeshEdgesEdgeAttributeValid(edge_attribute)) {
     return undefined;
   }

package/internal/stores/data_style/mesh/edges/vertex.ts

@@ -1,13 +1,16 @@
 import { DEFAULT_NO_DATA_COLOR, type RGBAColor } from "@ogw_front/utils/default_styles/constants";
 // Third party imports
+import back_schemas from "@geode/opengeodeweb-back/opengeodeweb_back_typed_schemas.js";
 import viewer_schemas from "@geode/opengeodeweb-viewer/opengeodeweb_viewer_typed_schemas.js";
 
 // Local imports
 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.vertex_attribute_names;
 const meshEdgesVertexAttributeSchemas =
   viewer_schemas.opengeodeweb_viewer.mesh.edges.attribute.vertex;
 
@@ -56,6 +59,8 @@ 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,
@@ -83,6 +88,7 @@ interface UseMeshEdgesVertexAttributeStyleReturn {
 
 // 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 {
@@ -149,6 +155,9 @@ function useMeshEdgesVertexAttributeStyle(): UseMeshEdgesVertexAttributeStyleRet
     const { item, name } = meshEdgesVertexAttribute(id);
     return item ?? meshEdgesVertexAttributeLastItem(id, name);
   }
+  function meshEdgesVertexAttributeTimeStep(id: string): number | undefined {
+    return attributeTimeStep(id, attributeNamesSchema.$id, meshEdgesVertexAttribute(id).name);
+  }
   async function setMeshEdgesVertexAttribute(
     id: string,
     {
@@ -174,7 +183,7 @@ function useMeshEdgesVertexAttributeStyle(): UseMeshEdgesVertexAttributeStyleRet
     const schema = meshEdgesVertexAttributeSchemas.attribute;
     const params = {
       id,
-      name,
+      name: seriesArrayName(id, attributeNamesSchema.$id, name),
       item,
       points,
       minimum,
@@ -224,6 +233,17 @@ function useMeshEdgesVertexAttributeStyle(): UseMeshEdgesVertexAttributeStyleRet
     const storedConfig = meshEdgesVertexAttributeStoredConfig(id, name, item);
     return [storedConfig.minimum, storedConfig.maximum];
   }
+  async function setMeshEdgesVertexAttributeTimeStep(
+    id: string,
+    timeStep: number,
+  ): Promise<unknown> {
+    const name = meshEdgesVertexAttributeName(id);
+    if (name === undefined) {
+      return undefined;
+    }
+    await setAttributeTimeStep(id, attributeNamesSchema.$id, name, timeStep);
+    return applyVertexAttribute(id);
+  }
   async function setMeshEdgesVertexAttributeRange(
     id: string,
     minimum: number,
@@ -275,6 +295,8 @@ function useMeshEdgesVertexAttributeStyle(): UseMeshEdgesVertexAttributeStyleRet
   }
   return {
     meshEdgesVertexAttributeName,
+    meshEdgesVertexAttributeTimeStep,
+    setMeshEdgesVertexAttributeTimeStep,
     meshEdgesVertexAttributeItem,
     meshEdgesVertexAttributeRange,
     meshEdgesVertexAttributeColorMap,

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

@@ -85,6 +85,69 @@ export function useMeshStyle(): {
     return result;
   }
 
+  const pointsCard = {
+    key: "points",
+    name: meshPointsStyle.meshPointsVertexAttributeName,
+    active: meshPointsStyle.meshPointsActiveColoring,
+    setActive: meshPointsStyle.setMeshPointsActiveColoring,
+    setTimeStep: meshPointsStyle.setMeshPointsVertexAttributeTimeStep,
+  };
+  const edgesCard = {
+    key: "edges",
+    name: meshEdgesStyle.meshEdgesVertexAttributeName,
+    active: meshEdgesStyle.meshEdgesActiveColoring,
+    setActive: meshEdgesStyle.setMeshEdgesActiveColoring,
+    setTimeStep: meshEdgesStyle.setMeshEdgesVertexAttributeTimeStep,
+  };
+  const cellsCard = {
+    key: "cells",
+    name: meshCellsStyle.meshCellsVertexAttributeName,
+    active: meshCellsStyle.meshCellsActiveColoring,
+    setActive: meshCellsStyle.setMeshCellsActiveColoring,
+    setTimeStep: meshCellsStyle.setMeshCellsVertexAttributeTimeStep,
+  };
+  const polygonsCard = {
+    key: "polygons",
+    name: meshPolygonsStyle.meshPolygonsVertexAttributeName,
+    active: meshPolygonsStyle.meshPolygonsActiveColoring,
+    setActive: meshPolygonsStyle.setMeshPolygonsActiveColoring,
+    setTimeStep: meshPolygonsStyle.setMeshPolygonsVertexAttributeTimeStep,
+  };
+  const polyhedraCard = {
+    key: "polyhedra",
+    name: meshPolyhedraStyle.meshPolyhedraVertexAttributeName,
+    active: meshPolyhedraStyle.meshPolyhedraActiveColoring,
+    setActive: meshPolyhedraStyle.setMeshPolyhedraActiveColoring,
+    setTimeStep: meshPolyhedraStyle.setMeshPolyhedraVertexAttributeTimeStep,
+  };
+  const vertexCards = [pointsCard, edgesCard, cellsCard, polygonsCard, polyhedraCard];
+
+  // The vertex series is shared by all the cards: re-render the other cards showing it
+  function sharedVertexTimeStep(
+    card: (typeof vertexCards)[number],
+  ): (id: string, timeStep: number) => Promise<unknown> {
+    return async (id, timeStep) => {
+      const result = await card.setTimeStep(id, timeStep);
+      const name = card.name(id);
+      const style = dataStyleState.getStyle(id);
+      const others = vertexCards.filter(
+        (other) =>
+          other !== card &&
+          style[other.key] !== undefined &&
+          other.active(id) === "vertex" &&
+          other.name(id) === name,
+      );
+      if (name !== undefined) {
+        await Promise.all(
+          others.map(async (other) => {
+            await other.setActive(id, "vertex");
+          }),
+        );
+      }
+      return result;
+    };
+  }
+
   async function applyMeshStyle(id: string): Promise<unknown[]> {
     const style = dataStyleState.getStyle(id);
     const promise_array: unknown[] = [];
@@ -142,5 +205,10 @@ export function useMeshStyle(): {
     ...meshCellsStyle,
     ...meshPolygonsStyle,
     ...meshPolyhedraStyle,
+    setMeshPointsVertexAttributeTimeStep: sharedVertexTimeStep(pointsCard),
+    setMeshEdgesVertexAttributeTimeStep: sharedVertexTimeStep(edgesCard),
+    setMeshCellsVertexAttributeTimeStep: sharedVertexTimeStep(cellsCard),
+    setMeshPolygonsVertexAttributeTimeStep: sharedVertexTimeStep(polygonsCard),
+    setMeshPolyhedraVertexAttributeTimeStep: sharedVertexTimeStep(polyhedraCard),
   };
 }

package/internal/stores/data_style/mesh/points/index.ts

@@ -25,7 +25,8 @@ function handleMeshPointsVertexColoring(
   const item = vertexAttributeStyle.meshPointsVertexAttributeItem(id);
   const [minimum, maximum] = vertexAttributeStyle.meshPointsVertexAttributeRange(id);
   const colorMap = vertexAttributeStyle.meshPointsVertexAttributeColorMap(id);
-  const vertex_attribute = { name, item, minimum, maximum, colorMap };
+  const no_data_color = vertexAttributeStyle.meshPointsVertexAttributeNoDataColor(id);
+  const vertex_attribute = { name, item, minimum, maximum, colorMap, no_data_color };
   if (!isMeshPointsVertexAttributeValid(vertex_attribute)) {
     return undefined;
   }

package/internal/stores/data_style/mesh/points/vertex.ts

@@ -1,13 +1,16 @@
 import { DEFAULT_NO_DATA_COLOR, type RGBAColor } from "@ogw_front/utils/default_styles/constants";
 // Third party imports
+import back_schemas from "@geode/opengeodeweb-back/opengeodeweb_back_typed_schemas.js";
 import viewer_schemas from "@geode/opengeodeweb-viewer/opengeodeweb_viewer_typed_schemas.js";
 
 // Local imports
 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
+const attributeNamesSchema = back_schemas.opengeodeweb_back.vertex_attribute_names;
 const meshPointsVertexAttributeSchemas =
   viewer_schemas.opengeodeweb_viewer.mesh.points.attribute.vertex;
 
@@ -56,6 +59,8 @@ 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,
@@ -83,6 +88,7 @@ interface UseMeshPointsVertexAttributeStyleReturn {
 
 // 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 {
@@ -149,6 +155,9 @@ function useMeshPointsVertexAttributeStyle(): UseMeshPointsVertexAttributeStyleR
     const { item, name } = meshPointsVertexAttribute(id);
     return item ?? meshPointsVertexAttributeLastItem(id, name);
   }
+  function meshPointsVertexAttributeTimeStep(id: string): number | undefined {
+    return attributeTimeStep(id, attributeNamesSchema.$id, meshPointsVertexAttribute(id).name);
+  }
   async function setMeshPointsVertexAttribute(
     id: string,
     {
@@ -174,7 +183,7 @@ function useMeshPointsVertexAttributeStyle(): UseMeshPointsVertexAttributeStyleR
     const schema = meshPointsVertexAttributeSchemas.attribute;
     const params = {
       id,
-      name,
+      name: seriesArrayName(id, attributeNamesSchema.$id, name),
       item,
       points,
       minimum,
@@ -224,6 +233,17 @@ function useMeshPointsVertexAttributeStyle(): UseMeshPointsVertexAttributeStyleR
     const storedConfig = meshPointsVertexAttributeStoredConfig(id, name, item);
     return [storedConfig.minimum, storedConfig.maximum];
   }
+  async function setMeshPointsVertexAttributeTimeStep(
+    id: string,
+    timeStep: number,
+  ): Promise<unknown> {
+    const name = meshPointsVertexAttributeName(id);
+    if (name === undefined) {
+      return undefined;
+    }
+    await setAttributeTimeStep(id, attributeNamesSchema.$id, name, timeStep);
+    return applyVertexAttribute(id);
+  }
   async function setMeshPointsVertexAttributeRange(
     id: string,
     minimum: number,
@@ -275,6 +295,8 @@ function useMeshPointsVertexAttributeStyle(): UseMeshPointsVertexAttributeStyleR
   }
   return {
     meshPointsVertexAttributeName,
+    meshPointsVertexAttributeTimeStep,
+    setMeshPointsVertexAttributeTimeStep,
     meshPointsVertexAttributeItem,
     meshPointsVertexAttributeRange,
     meshPointsVertexAttributeColorMap,

package/internal/stores/data_style/mesh/polygons/index.ts

@@ -31,7 +31,8 @@ function handleMeshPolygonsVertexColoring(
   const item = vertexAttributeStyle.meshPolygonsVertexAttributeItem(id);
   const [minimum, maximum] = vertexAttributeStyle.meshPolygonsVertexAttributeRange(id);
   const colorMap = vertexAttributeStyle.meshPolygonsVertexAttributeColorMap(id);
-  const vertex_attribute = { name, item, minimum, maximum, colorMap };
+  const no_data_color = vertexAttributeStyle.meshPolygonsVertexAttributeNoDataColor(id);
+  const vertex_attribute = { name, item, minimum, maximum, colorMap, no_data_color };
   if (!isMeshPolygonsVertexAttributeValid(vertex_attribute)) {
     return undefined;
   }
@@ -46,7 +47,15 @@ function handleMeshPolygonsPolygonColoring(
   const item = polygonAttributeStyle.meshPolygonsPolygonAttributeItem(id);
   const [minimum, maximum] = polygonAttributeStyle.meshPolygonsPolygonAttributeRange(id);
   const colorMap = polygonAttributeStyle.meshPolygonsPolygonAttributeColorMap(id);
-  const polygon_attribute = { name, item, minimum, maximum, colorMap };
+  const no_data_color = polygonAttributeStyle.meshPolygonsPolygonAttributeNoDataColor(id);
+  const polygon_attribute = {
+    name,
+    item,
+    minimum,
+    maximum,
+    colorMap,
+    no_data_color,
+  };
   if (!isMeshPolygonsPolygonAttributeValid(polygon_attribute)) {
     return undefined;
   }