Merge pull request #2374 from eurodatacube/gtif_fix_slider_year_marks

Fix inaccurate year marks in `SliderTicks` component

app/src/components/map/SliderTicks.vue

@@ -6,7 +6,7 @@
       :viewBox="`-1 0 ${width + 2} ${height}`"
     >
       <line
-        v-for="(line, index) in lines"
+        v-for="(line, index) in displayedLines"
         :key="index"
         :x1="line"
         :y1="0"
@@ -50,6 +50,12 @@ export default {
   },
   computed: {
     lines() {
+      const spacing = this.width / (this.numLines - 1);
+      return Array.from({ length: this.numLines }, (_, i) => i * spacing);
+    },
+
+    /** Lines with limited tick frequency for display purposes only */
+    displayedLines() {
       const num = this.numLines > (this.width / 2)
         ? (this.width / 2)
         : this.numLines;
@@ -63,67 +69,30 @@ export default {
     },
 
     yearMarks() {
-      const yearIndices = [];
-      let lastDecade = null;
-      let lastYear = null;
-
-      // Calculate first and last dates as fractions of a year
-      const firstTime = DateTime.fromISO(this.times[0].value);
-      const firstYear = firstTime.year + (firstTime.ordinal / 365);
-      const lastTime = DateTime.fromISO(this.times[this.times.length - 1].value);
-      const lastTimeYear = lastTime.year + (lastTime.ordinal / 365);
-
-      // Calculate the total range in fractions of a year
-      const totalYears = lastTimeYear - firstYear;
-
-      // If the total range of years crosses a certain threshold (e.g., 10 years),
-      // we will show marks for every decade.
-      const showDecades = totalYears > 10;
-
-      this.times.forEach((time) => {
-        const currentTime = DateTime.fromISO(time.value);
-        const currentTimeYear = currentTime.year + (currentTime.ordinal / 365);
-
-        if (showDecades) {
-          // If we are in a new decade, place a mark
-          const currentDecade = Math.floor(currentTimeYear / 10) * 10;
-          if (currentDecade !== lastDecade) {
-            yearIndices.push({
-              label: currentDecade,
-              position: ((currentTimeYear - firstYear) / totalYears) * this.width,
-            });
-            lastDecade = currentDecade;
-          }
-        } else {
-          // If we are in a new year, place a mark
-          const currentYear = Math.floor(currentTimeYear);
-          if (currentYear !== lastYear) {
-            yearIndices.push({
-              label: currentYear,
-              position: ((currentTimeYear - firstYear) / totalYears) * this.width,
-            });
-            lastYear = currentYear;
-          }
+      const yearMarks = [];
+      let previousYear = null;
+
+      this.lines.forEach((line, index) => {
+        const currentTime = DateTime.fromISO(this.times[index].value);
+        const currentYear = currentTime.year;
+
+        // If it's the first tick or if the year has changed, add a year mark
+        if (index === 0 || currentYear !== previousYear) {
+          yearMarks.push({
+            label: currentYear,
+            position: line,
+          });
         }
-      });
-
-      // Create a new array with removed overlapping labels
-      const nonOverlappingYearIndices = yearIndices.filter((yearMark, index, array) => {
-        // If it's the last item in the array, it can't overlap with a next item
-        if (index === array.length - 1) return true;
 
-        // Get the next item in the array
-        const nextYearMark = array[index + 1];
-
-        // Determine the distance between the current and next labels
-        const distance = nextYearMark.position - yearMark.position;
-
-        // Only keep this label if it's more than a certain distance from the next one
-        const minDistance = 50; // set this to the minimum acceptable distance
-        return distance > minDistance;
+        // Update previousYear for the next iteration
+        previousYear = currentYear;
       });
 
-      return nonOverlappingYearIndices;
+      // Filter out year marks that are too close together, in favor of the second one.
+      return yearMarks.filter((current, i) => {
+        const next = yearMarks[i + 1];
+        return !(next && next.position - current.position < 20);
+      });
     },
   },
   mounted() {