@geode/opengeodeweb-front 10.38.0 → 10.39.0

package/app/components/Viewer/Generic/Model/SurfacesOptions.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";
@@ -123,6 +124,21 @@ const surfacesVertexAttributeName = computed<string | undefined>({
   },
 });
 
+const surfacesVertexAttributeTimeStep = computed<number | undefined>({
+  get: () => dataStyleStore.modelSurfacesVertexAttributeTimeStep(modelId, referenceSurfaceId.value),
+  set: async (newValue) => {
+    if (newValue === undefined) {
+      return;
+    }
+    await dataStyleStore.setModelSurfacesVertexAttributeTimeStep(
+      modelId,
+      targetSurfaceIds,
+      newValue,
+    );
+    hybridViewerStore.remoteRender();
+  },
+});
+
 const surfacesVertexAttributeItem = computed<string | undefined>({
   get: () => dataStyleStore.modelSurfacesVertexAttributeItem(modelId, referenceSurfaceId.value),
   set: async (newValue) => {
@@ -184,6 +200,22 @@ const surfacesPolygonAttributeName = computed<string | undefined>({
   },
 });
 
+const surfacesPolygonAttributeTimeStep = computed<number | undefined>({
+  get: () =>
+    dataStyleStore.modelSurfacesPolygonAttributeTimeStep(modelId, referenceSurfaceId.value),
+  set: async (newValue) => {
+    if (newValue === undefined) {
+      return;
+    }
+    await dataStyleStore.setModelSurfacesPolygonAttributeTimeStep(
+      modelId,
+      targetSurfaceIds,
+      newValue,
+    );
+    hybridViewerStore.remoteRender();
+  },
+});
+
 const surfacesPolygonAttributeItem = computed<string | undefined>({
   get: () => dataStyleStore.modelSurfacesPolygonAttributeItem(modelId, referenceSurfaceId.value),
   set: async (newValue) => {
@@ -247,6 +279,17 @@ const vertexAttributeName = computed<string | undefined>({
   },
 });
 
+const vertexAttributeTimeStep = computed<number | undefined>({
+  get: () => dataStyleStore.modelSurfacesVertexAttributeTimeStep(modelId, surfaceId),
+  set: async (newValue) => {
+    if (surfaceId === undefined || newValue === undefined) {
+      return;
+    }
+    await dataStyleStore.setModelSurfacesVertexAttributeTimeStep(modelId, [surfaceId], newValue);
+    hybridViewerStore.remoteRender();
+  },
+});
+
 const vertexAttributeItem = computed<string | undefined>({
   get: () => dataStyleStore.modelSurfacesVertexAttributeItem(modelId, surfaceId),
   set: async (newValue) => {
@@ -308,6 +351,17 @@ const polygonAttributeName = computed<string | undefined>({
   },
 });
 
+const polygonAttributeTimeStep = computed<number | undefined>({
+  get: () => dataStyleStore.modelSurfacesPolygonAttributeTimeStep(modelId, surfaceId),
+  set: async (newValue) => {
+    if (surfaceId === undefined || newValue === undefined) {
+      return;
+    }
+    await dataStyleStore.setModelSurfacesPolygonAttributeTimeStep(modelId, [surfaceId], newValue);
+    hybridViewerStore.remoteRender();
+  },
+});
+
 const polygonAttributeItem = computed<string | undefined>({
   get: () => dataStyleStore.modelSurfacesPolygonAttributeItem(modelId, surfaceId),
   set: async (newValue) => {
@@ -389,11 +443,13 @@ const polygonSchema = back_schemas.opengeodeweb_back.model_component_polygon_att
       v-model:vertex_attribute_range="surfacesVertexAttributeRange"
       v-model:vertex_attribute_color_map="surfacesVertexAttributeColorMap"
       v-model:vertex_attribute_no_data_color="surfacesVertexAttributeNoDataColor"
+      v-model:vertex_attribute_time_step="surfacesVertexAttributeTimeStep"
       v-model:polygon_attribute_name="surfacesPolygonAttributeName"
       v-model:polygon_attribute_item="surfacesPolygonAttributeItem"
       v-model:polygon_attribute_range="surfacesPolygonAttributeRange"
       v-model:polygon_attribute_color_map="surfacesPolygonAttributeColorMap"
       v-model:polygon_attribute_no_data_color="surfacesPolygonAttributeNoDataColor"
+      v-model:polygon_attribute_time_step="surfacesPolygonAttributeTimeStep"
       :capabilities="capabilities"
       :schemas="{ vertex: vertexSchema, polygon: polygonSchema }"
       :allowRandom="true"
@@ -417,11 +473,13 @@ const polygonSchema = back_schemas.opengeodeweb_back.model_component_polygon_att
       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:polygon_attribute_name="polygonAttributeName"
       v-model:polygon_attribute_item="polygonAttributeItem"
       v-model:polygon_attribute_range="polygonAttributeRange"
       v-model:polygon_attribute_color_map="polygonAttributeColorMap"
       v-model:polygon_attribute_no_data_color="polygonAttributeNoDataColor"
+      v-model:polygon_attribute_time_step="polygonAttributeTimeStep"
       :capabilities="capabilities"
       :schemas="{ vertex: vertexSchema, polygon: polygonSchema }"
       :allowRandom="true"

package/app/components/Viewer/Options/AttributeSelector.vue

@@ -9,6 +9,7 @@ import { DEFAULT_NO_DATA_COLOR } from "@ogw_front/utils/default_styles/constants
 import type { JsonRpcSchema } from "@ogw_shared/utils/types.js";
 import ViewerOptionsAttributeColorBar from "@ogw_front/components/Viewer/Options/AttributeColorBar.vue";
 import ViewerOptionsColorPicker from "@ogw_front/components/Viewer/Options/ColorPicker.vue";
+import ViewerOptionsTimeStepSlider from "@ogw_front/components/Viewer/Options/TimeStepSlider.vue";
 import { requestForTargets } from "@ogw_front/utils/request_for_targets";
 import { useBackStore } from "@ogw_front/stores/back";
 
@@ -21,6 +22,7 @@ const attributeRange = defineModel<(number | undefined)[]>("attributeRange", {
 });
 const attributeColorMap = defineModel<string>("attributeColorMap");
 const attributeNoDataColor = defineModel<typeof DEFAULT_NO_DATA_COLOR>("attributeNoDataColor");
+const attributeTimeStep = defineModel<number>("attributeTimeStep");
 
 interface Props {
   id: string;
@@ -32,6 +34,7 @@ const { id, componentIds = undefined, schema } = defineProps<Props>();
 
 interface Emits {
   "update:attributeColorMap": [colorMap: string];
+  "update:attributeTimeStep": [timeStep: number];
   ranges_per_data: [ranges: RangesPerData];
 }
 
@@ -41,6 +44,7 @@ interface AttributeInfo {
   attribute_name: string;
   nb_items: number;
   no_data?: boolean;
+  time_steps?: number[];
   [key: string]: unknown;
 }
 
@@ -52,6 +56,25 @@ const groupTargetIds = useBatchGroup(() => id);
 const currentAttribute = computed<AttributeInfo | undefined>(() =>
   attributes.value.find((attr) => attr.attribute_name === attributeName.value),
 );
+const timeSteps = computed<number[]>(() => currentAttribute.value?.time_steps ?? []);
+
+let committedSeries: string | undefined = undefined;
+
+function commitSeriesTimeStep(): void {
+  if (timeSteps.value.length === 0) {
+    committedSeries = undefined;
+    return;
+  }
+  const name = currentAttribute.value?.attribute_name;
+  if (name === committedSeries) {
+    return;
+  }
+  committedSeries = name;
+  const current = attributeTimeStep.value;
+  const valid = current !== undefined && current >= 0 && current < timeSteps.value.length;
+  emit("update:attributeTimeStep", valid ? current : 0);
+}
+
 const cssNoDataColor = computed<string>(() => {
   const { red, green, blue, alpha } = attributeNoDataColor.value ?? DEFAULT_NO_DATA_COLOR;
   return `rgba(${red}, ${green}, ${blue}, ${alpha})`;
@@ -183,6 +206,7 @@ watch([attributeName, attributeItem], ([name, item]) => {
 });
 
 watch([attributeName, attributeItem, currentAttribute], () => {
+  commitSeriesTimeStep();
   if (groupTargetIds.value) {
     return;
   }
@@ -221,6 +245,7 @@ watch([attributeName, attributeItem, currentAttribute], () => {
     class="mt-3"
     hide-details
   />
+  <ViewerOptionsTimeStepSlider v-model="attributeTimeStep" :time-steps="timeSteps" />
   <div
     v-if="currentAttribute && currentAttribute.no_data"
     class="text-caption text-high-emphasis mt-1 d-flex align-center ga-1"

package/app/components/Viewer/Options/ColoringTypeSelector.vue

@@ -45,24 +45,28 @@ const vertex_attribute_item = defineModel<number>("vertex_attribute_item");
 const vertex_attribute_range = defineModel<(number | undefined)[]>("vertex_attribute_range");
 const vertex_attribute_color_map = defineModel<string>("vertex_attribute_color_map");
 const vertex_attribute_no_data_color = defineModel<RGBAColor>("vertex_attribute_no_data_color");
+const vertex_attribute_time_step = defineModel<number>("vertex_attribute_time_step");
 
 const edge_attribute_name = defineModel<string>("edge_attribute_name");
 const edge_attribute_item = defineModel<number>("edge_attribute_item");
 const edge_attribute_range = defineModel<(number | undefined)[]>("edge_attribute_range");
 const edge_attribute_color_map = defineModel<string>("edge_attribute_color_map");
 const edge_attribute_no_data_color = defineModel<RGBAColor>("edge_attribute_no_data_color");
+const edge_attribute_time_step = defineModel<number>("edge_attribute_time_step");
 
 const cell_attribute_name = defineModel<string>("cell_attribute_name");
 const cell_attribute_item = defineModel<number>("cell_attribute_item");
 const cell_attribute_range = defineModel<(number | undefined)[]>("cell_attribute_range");
 const cell_attribute_color_map = defineModel<string>("cell_attribute_color_map");
 const cell_attribute_no_data_color = defineModel<RGBAColor>("cell_attribute_no_data_color");
+const cell_attribute_time_step = defineModel<number>("cell_attribute_time_step");
 
 const polygon_attribute_name = defineModel<string>("polygon_attribute_name");
 const polygon_attribute_item = defineModel<number>("polygon_attribute_item");
 const polygon_attribute_range = defineModel<(number | undefined)[]>("polygon_attribute_range");
 const polygon_attribute_color_map = defineModel<string>("polygon_attribute_color_map");
 const polygon_attribute_no_data_color = defineModel<RGBAColor>("polygon_attribute_no_data_color");
+const polygon_attribute_time_step = defineModel<number>("polygon_attribute_time_step");
 
 const polyhedron_attribute_name = defineModel<string>("polyhedron_attribute_name");
 const polyhedron_attribute_item = defineModel<number>("polyhedron_attribute_item");
@@ -73,6 +77,7 @@ const polyhedron_attribute_color_map = defineModel<string>("polyhedron_attribute
 const polyhedron_attribute_no_data_color = defineModel<RGBAColor>(
   "polyhedron_attribute_no_data_color",
 );
+const polyhedron_attribute_time_step = defineModel<number>("polyhedron_attribute_time_step");
 
 interface Props {
   id: string;
@@ -257,6 +262,7 @@ watch(
           v-model:attributeRange="vertex_attribute_range"
           v-model:attributeColorMap="vertex_attribute_color_map"
           v-model:attributeNoDataColor="vertex_attribute_no_data_color"
+          v-model:attributeTimeStep="vertex_attribute_time_step"
           @ranges_per_data="emit('vertex_attribute_ranges_per_data', $event)"
           :id="id"
           :componentIds="componentIds"
@@ -270,6 +276,7 @@ watch(
           v-model:attributeRange="edge_attribute_range"
           v-model:attributeColorMap="edge_attribute_color_map"
           v-model:attributeNoDataColor="edge_attribute_no_data_color"
+          v-model:attributeTimeStep="edge_attribute_time_step"
           @ranges_per_data="emit('edge_attribute_ranges_per_data', $event)"
           :id="id"
           :componentIds="componentIds"
@@ -283,6 +290,7 @@ watch(
           v-model:attributeRange="cell_attribute_range"
           v-model:attributeColorMap="cell_attribute_color_map"
           v-model:attributeNoDataColor="cell_attribute_no_data_color"
+          v-model:attributeTimeStep="cell_attribute_time_step"
           @ranges_per_data="emit('cell_attribute_ranges_per_data', $event)"
           :id="id"
           :componentIds="componentIds"
@@ -296,6 +304,7 @@ watch(
           v-model:attributeRange="polygon_attribute_range"
           v-model:attributeColorMap="polygon_attribute_color_map"
           v-model:attributeNoDataColor="polygon_attribute_no_data_color"
+          v-model:attributeTimeStep="polygon_attribute_time_step"
           @ranges_per_data="emit('polygon_attribute_ranges_per_data', $event)"
           :id="id"
           :componentIds="componentIds"
@@ -309,6 +318,7 @@ watch(
           v-model:attributeRange="polyhedron_attribute_range"
           v-model:attributeColorMap="polyhedron_attribute_color_map"
           v-model:attributeNoDataColor="polyhedron_attribute_no_data_color"
+          v-model:attributeTimeStep="polyhedron_attribute_time_step"
           @ranges_per_data="emit('polyhedron_attribute_ranges_per_data', $event)"
           :id="id"
           :componentIds="componentIds"

package/app/components/Viewer/Options/ColormapQuickPicker.vue

@@ -1,6 +1,7 @@
 <script setup lang="ts">
 import AttributeRangeSelector from "@ogw_front/components/Viewer/Options/AttributeRangeSelector.vue";
 import ColorMapList from "@ogw_front/components/Viewer/Options/ColorMapList.vue";
+import TimeStepSlider from "@ogw_front/components/Viewer/Options/TimeStepSlider.vue";
 
 import { getPresetsWithCurrentAtTop } from "@ogw_front/utils/colormap";
 import { useGlobalAttributeStyle } from "@ogw_front/composables/global_attribute_style";
@@ -16,8 +17,21 @@ const { dataId = undefined, x, y } = defineProps<Props>();
 const show = defineModel<boolean>("show", { default: false });
 
 const dataIdRef = computed<string>(() => dataId);
-const { currentColormap, currentRange, applyGlobalColormap, resetGlobalRange } =
-  useGlobalAttributeStyle(dataIdRef);
+const {
+  currentColormap,
+  currentRange,
+  applyGlobalColormap,
+  resetGlobalRange,
+  currentTimeSteps,
+  currentTimeStep,
+  loadTimeSteps,
+} = useGlobalAttributeStyle(dataIdRef);
+
+watch(show, async (isShown) => {
+  if (isShown) {
+    await loadTimeSteps();
+  }
+});
 
 const minimum = computed<number>({
   get: () => currentRange.value[0],
@@ -61,6 +75,7 @@ async function onQuickColormapSelect(preset: { Name: string }): Promise<void> {
         v-model:maximum="maximum"
         @reset="resetGlobalRange"
       />
+      <TimeStepSlider :time-steps="currentTimeSteps" v-model="currentTimeStep" />
     </ColorMapList>
   </v-menu>
 </template>

package/app/components/Viewer/Options/TimeStepSlider.vue

@@ -0,0 +1,120 @@
+<script setup lang="ts">
+const timeStep = defineModel<number>();
+
+interface Props {
+  timeSteps: number[];
+}
+
+const { timeSteps } = defineProps<Props>();
+
+const sliderTimeStep = ref<number>(0);
+
+watch(
+  timeStep,
+  (value) => {
+    sliderTimeStep.value = value ?? 0;
+  },
+  { immediate: true },
+);
+
+function commitTimeStep(value: number): void {
+  timeStep.value = value;
+}
+
+function formatTime(index: number): string {
+  const time = timeSteps[index];
+  return time === undefined ? "" : `t = ${time}`;
+}
+</script>
+
+<template>
+  <v-slider
+    v-if="timeSteps.length > 1"
+    data-testid="timeStepSlider"
+    v-model="sliderTimeStep"
+    :min="0"
+    :max="timeSteps.length - 1"
+    :step="1"
+    color="primary"
+    density="compact"
+    class="time-step-slider mt-3"
+    hide-details
+    show-ticks="always"
+    :tick-size="10"
+    thumb-label="hover"
+    @end="commitTimeStep"
+    @keyup="commitTimeStep(sliderTimeStep)"
+  >
+    <template #prepend>
+      <span data-testid="timeStepValue" class="time-step-value">
+        {{ formatTime(sliderTimeStep) }}
+      </span>
+    </template>
+    <template #thumb-label="{ modelValue }">{{ formatTime(modelValue) }}</template>
+    <template #tick-label="{ index }">
+      <span class="time-step-tick">
+        <span class="v-slider-thumb__label time-step-tick-label">
+          <span class="v-slider-thumb__label-wedge" />
+          {{ formatTime(index) }}
+        </span>
+      </span>
+    </template>
+  </v-slider>
+</template>
+
+<style scoped>
+.time-step-value {
+  min-width: 32px;
+  white-space: nowrap;
+  font-size: 0.8125rem;
+}
+
+.time-step-slider.v-slider.v-input--horizontal :deep(.v-input__prepend) {
+  margin-inline-end: 4px;
+}
+
+.time-step-slider :deep(.v-slider-thumb__label) {
+  width: auto;
+  white-space: nowrap;
+  padding: 0 6px;
+}
+
+/* Since v-tooltip is a bit different from the slider tick label */
+.time-step-slider :deep(.v-slider-track__tick-label) {
+  inset: 0;
+  transform: none !important;
+  margin: 0 !important;
+}
+
+.time-step-tick {
+  position: relative;
+  display: block;
+  width: 100%;
+  height: 100%;
+}
+
+.time-step-slider .time-step-tick-label {
+  display: none;
+  bottom: calc(100% + 8px) !important;
+  left: 50%;
+  pointer-events: none;
+}
+
+.time-step-tick:hover .time-step-tick-label {
+  display: flex;
+}
+
+.time-step-slider :deep(.v-slider-track__tick) {
+  border-radius: 50%;
+  background-color: rgb(var(--v-theme-primary));
+}
+
+/* Vuetify insets the first and last ticks, which only suits tiny ticks */
+.time-step-slider.v-slider.v-input--horizontal :deep(.v-slider-track__tick--first) {
+  margin-inline-start: 0;
+}
+
+.time-step-slider.v-slider.v-input--horizontal :deep(.v-slider-track__tick--last) {
+  margin-inline-start: 100%;
+}
+</style>

package/app/components/Viewer/PointSet/SpecificPointsOptions.vue

@@ -84,6 +84,19 @@ const vertex_attribute_name = computed({
     hybridViewerStore.remoteRender();
   },
 });
+
+const vertex_attribute_time_step = computed({
+  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({
   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"
           :vertex_has_colormap="true"
         />
       </template>

package/app/components/Viewer/Solid/SpecificPolyhedraOptions.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) => {
@@ -206,12 +234,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"
         />
       </template>
     </template>

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

@@ -86,6 +86,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) => {
@@ -140,6 +153,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) => {
@@ -223,12 +249,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"
         />
       </template>
     </template>

package/app/composables/global_attribute_style.ts

@@ -39,6 +39,7 @@ interface AttributeResponse {
     readonly max_values?: readonly number[];
     readonly min_value?: number;
     readonly max_value?: number;
+    readonly time_steps?: readonly number[];
   }[];
 }
 
@@ -75,6 +76,9 @@ export function useGlobalAttributeStyle(dataIdRef: Ref<string | undefined>): {
   currentRange: typeof currentRange;
   applyGlobalColormap: typeof applyGlobalColormap;
   resetGlobalRange: typeof resetGlobalRange;
+  currentTimeSteps: typeof currentTimeSteps;
+  currentTimeStep: typeof currentTimeStep;
+  loadTimeSteps: typeof loadTimeSteps;
 } {
   const dataStyleStore = useDataStyleStore();
   const hybridViewerStore = useHybridViewerStore();
@@ -294,10 +298,100 @@ export function useGlobalAttributeStyle(dataIdRef: Ref<string | undefined>): {
     await Promise.all(requestPromises);
   }
 
+  const currentTimeSteps = ref<number[]>([]);
+  const temporalComponent = shallowRef<ActiveComponent | undefined>(undefined);
+
+  async function requestTimeSteps(targetId: string, comp: ActiveComponent): Promise<number[]> {
+    const { activeColoring, attributeType, getterKey } = comp;
+    const nameGetter = getDynamicStoreMethod(dataStyleStore, `${getterKey}${attributeType}Name`);
+    const rawAttrName = nameGetter?.(targetId);
+    const schema = (back_schemas.opengeodeweb_back as Record<string, unknown>)[
+      `${activeColoring}_attribute_names`
+    ];
+    if (
+      !isStringOrUndefined(rawAttrName) ||
+      rawAttrName === undefined ||
+      rawAttrName === "" ||
+      !isJsonRpcSchema(schema)
+    ) {
+      return [];
+    }
+    let timeSteps: number[] = [];
+    await backStore.request(
+      { schema, params: { id: targetId } },
+      {
+        response_function: (response: unknown): void => {
+          if (!isAttributeResponse(response)) {
+            return;
+          }
+          const found = response.attributes?.find((attr) => attr.attribute_name === rawAttrName);
+          timeSteps = [...(found?.time_steps ?? [])];
+        },
+      },
+    );
+    return timeSteps;
+  }
+
+  async function loadTimeSteps(): Promise<void> {
+    const targetId = dataIdRef.value;
+    temporalComponent.value = undefined;
+    currentTimeSteps.value = [];
+    if (targetId === undefined || targetId === "") {
+      return;
+    }
+    for (const comp of getActiveComponents(targetId)) {
+      // oxlint-disable-next-line no-await-in-loop -- first temporal component wins, in order.
+      const timeSteps = await requestTimeSteps(targetId, comp);
+      if (timeSteps.length > 0) {
+        temporalComponent.value = comp;
+        currentTimeSteps.value = timeSteps;
+        return;
+      }
+    }
+  }
+
+  watch(dataIdRef, loadTimeSteps, { immediate: true });
+
+  async function applyCurrentTimeStep(step: number): Promise<void> {
+    const targetId = dataIdRef.value;
+    const comp = temporalComponent.value;
+    if (targetId === undefined || targetId === "" || !comp) {
+      return;
+    }
+    const { attributeType, setterKey } = comp;
+    const setter = getDynamicStoreMethod(dataStyleStore, `set${setterKey}${attributeType}TimeStep`);
+    if (setter) {
+      await setter(targetId, step);
+      await hybridViewerStore.remoteRender();
+    }
+  }
+
+  const currentTimeStep = computed<number>({
+    get(): number {
+      const targetId = dataIdRef.value;
+      const comp = temporalComponent.value;
+      if (targetId === undefined || targetId === "" || !comp) {
+        return 0;
+      }
+      const { attributeType, getterKey } = comp;
+      const getter = getDynamicStoreMethod(dataStyleStore, `${getterKey}${attributeType}TimeStep`);
+      const rawStep = getter?.(targetId);
+      return typeof rawStep === "number" ? rawStep : 0;
+    },
+    // Setter cannot be async (see `currentRange`), so the work is delegated to a helper.
+    set: (step: number): void => {
+      /* oxlint-disable-next-line promise/prefer-await-to-then -- setter cannot be async; see comment above. */
+      applyCurrentTimeStep(step).catch(() => undefined);
+    },
+  });
+
   return {
     currentColormap,
     currentRange,
     applyGlobalColormap,
     resetGlobalRange,
+    currentTimeSteps,
+    currentTimeStep,
+    loadTimeSteps,
   };
 }