Fix: Exact time based selection for slider and navigation based timecontrol element (#2122)

* fix: timebased timecontrol element return data with exact time if avaiable

* fix: repeated update in slider

* fix: reomve startOf from initDate function

Author: srijitcoder

elements/timecontrol/src/components/timecontrol-date.js

@@ -89,34 +89,78 @@ export class EOxTimeControlDate extends LitElement {
   }
 
   /**
-   * Updates the selected date by stepping forward or backward through available dates.
+   * Gets the current index and item values for the given key.
    *
-   * @param {number} [step=1] - Number of steps to move (positive for forward, negative for backward).
+   * @param {string} key - The key to get the current index and item values from.
+   * @returns {Object} An object containing the current index and item values.
    */
-  updateStep(step = 1) {
+  #getCurrIndexAndValues(key) {
     const EOxTimeControl = this.getEOxTimeControl();
     const itemValues = Object.keys(
-      groupBy(EOxTimeControl.items.get(), "date"),
+      groupBy(EOxTimeControl.items.get(), key),
     ).sort((a, b) => new Date(a).getTime() - new Date(b).getTime());
     const index = findIndex(itemValues, (date) => {
-      return (
-        date ===
-        dayjs(EOxTimeControl.selectedDateRange[0]).format(
-          TIME_CONTROL_DATE_FORMAT,
-        )
-      );
+      if (key === "utc") {
+        return dayjs(date).isSame(EOxTimeControl.selectedDateRange[0]);
+      } else {
+        return (
+          date ===
+          dayjs(EOxTimeControl.selectedDateRange[0]).format(
+            TIME_CONTROL_DATE_FORMAT,
+          )
+        );
+      }
     });
+    return { index, itemValues };
+  }
+
+  /**
+   * Gets the new index for the given item values, step, and index.
+   *
+   * @param {Array<string>} itemValues - The item values to get the new index from.
+   * @param {number} step - The step to move the index by.
+   * @param {number} index - The current index.
+   * @returns {number} The new index.
+   */
+  #getNewIndex(itemValues, step, index) {
     let newIndex = index + step;
-    if (newIndex > itemValues.length - 1) {
-      newIndex = 0;
-    }
-    if (newIndex < 0) {
-      newIndex = itemValues.length - 1;
+    if (newIndex > itemValues.length - 1) newIndex = 0;
+    if (newIndex < 0) newIndex = itemValues.length - 1;
+    return newIndex;
+  }
+
+  /**
+   * Updates the selected date by stepping forward or backward through available dates.
+   *
+   * @param {number} [step=1] - Number of steps to move (positive for forward, negative for backward).
+   */
+  updateStep(step = 1) {
+    const EOxTimeControl = this.getEOxTimeControl();
+    let newIndex, index, itemValues;
+    const currIndex = this.#getCurrIndexAndValues("utc");
+    index = currIndex.index;
+    itemValues = currIndex.itemValues;
+
+    // When exact value is matched based on date and time, use the index from the utc key
+    if (index >= 0) {
+      newIndex = this.#getNewIndex(itemValues, step, index);
+    } else {
+      // When exact value is not matched based on date and time, use the index from the date key
+      const currIndex = this.#getCurrIndexAndValues("date");
+      index = currIndex.index;
+      itemValues = currIndex.itemValues;
+      newIndex = this.#getNewIndex(itemValues, step, index);
     }
 
     const nextDate = itemValues[newIndex];
+    const isSameDay = dayjs(nextDate).isSame(
+      EOxTimeControl.selectedDateRange[0],
+      "day",
+    );
     const nextDateRange = [
-      dayjs(nextDate).startOf("day").utc().format(),
+      isSameDay
+        ? dayjs(nextDate).utc().format()
+        : dayjs(nextDate).startOf("day").utc().format(),
       dayjs(nextDate).endOf("day").utc().format(),
     ];
     EOxTimeControl.dateChange(nextDateRange, EOxTimeControl);

elements/timecontrol/src/components/timecontrol-slider.js

@@ -210,6 +210,7 @@ export class EOxTimeControlSlider extends LitElement {
    */
   setDateRange(dateRange, data) {
     this.#selectedDateRange = dateRange;
+    let exactMatch = null;
     const slider = this.getSliderInstance();
     if (data && data.length) {
       this.#items = Object.keys(groupBy(data, "utc")).sort((a, b) =>
@@ -221,6 +222,7 @@ export class EOxTimeControlSlider extends LitElement {
       const end = dayjs(this.#selectedDateRange[1]);
       const filteredItems = this.#items.filter((utc) => {
         const date = dayjs(utc);
+        if (date.isSame(start)) exactMatch = utc;
         return (
           (date.isAfter(start) || date.isSame(start, "day")) &&
           (date.isBefore(end) || date.isSame(end, "day"))
@@ -230,7 +232,7 @@ export class EOxTimeControlSlider extends LitElement {
     }
     if (slider) {
       slider.setAttribute("data", this.#items.join(","));
-      slider.setAttribute("value1", this.#filteredItems[0]);
+      slider.setAttribute("value1", exactMatch || this.#filteredItems[0]);
     }
 
     // Generate ticks after items are set
@@ -269,8 +271,14 @@ export class EOxTimeControlSlider extends LitElement {
 
   handleChange(evt) {
     const EOxTimeControl = this.getEOxTimeControl();
-    const start = dayjs(evt.detail.value1).format();
-    const end = dayjs(evt.detail.value1).endOf("day").format();
+    const start = dayjs(evt.detail.value1).utc().format();
+    const end = dayjs(evt.detail.value1).endOf("day").utc().format();
+
+    if (
+      start === EOxTimeControl.selectedDateRange[0] &&
+      end === EOxTimeControl.selectedDateRange[1]
+    )
+      return;
     EOxTimeControl.dateChange([start, end], EOxTimeControl);
   }
 

elements/timecontrol/src/helpers/get-init-date.js

@@ -26,7 +26,7 @@ export default function getInitDate(initDate) {
     [start, end] = initDate;
   }
 
-  start = dayjs(start).startOf("day").utc().format();
+  start = dayjs(start).utc().format();
   end = dayjs(end).endOf("day").utc().format();
 
   return [start, end];

elements/timecontrol/src/methods/timecontrol/first-updated.js

@@ -154,7 +154,7 @@ export default function firstUpdatedMethod(EOxTimeControl, emitUpdateEvent) {
             const dateRange =
               initDateRange ||
               /** @type {DateRange} */ ([
-                utc.startOf("day").utc().format(),
+                utc.utc().format(),
                 utc.endOf("day").utc().format(),
               ]);