fix: LSDV-4881: Fix missed points in optimized timeseries (#1317)

* fix: LSDV-4881: Fix missed point in optimized timeseries

* test: LSDV-4881: Extend TimeSeries test to detect missed points

* Add --verbose temporally

* fix yarn command

* Fix flaky test

* Clean temporary changes

Author: Gondragos

e2e/fragments/AtTimeSeries.js

@@ -6,9 +6,14 @@ module.exports = {
   _overviewSelector: '.htx-timeseries-overview .overlay',
   _westHandleSelector: '.htx-timeseries-overview .handle--w',
   _eastHandleSelector: '.htx-timeseries-overview .handle--e',
+  _stickSelector: '[text-anchor="start"]',
+
   get _channelStageSelector() {
     return `${this._rootSelector} .htx-timeseries-channel .new_brush`;
   },
+  get _channelStickSelector() {
+    return `${this._rootSelector} .htx-timeseries-channel [text-anchor="start"]`;
+  },
   _stageBBox: { x: 0, y: 0, width: 0, height: 0 },
 
   WEST: 'west',
@@ -21,8 +26,25 @@ module.exports = {
     this._stageBBox = bbox;
   },
 
+  /**
+   * Retrieves timestamp value from a text element of timeseries' stick (cursor).
+   * **should be used inside async with `await`** operator.
+   *
+   * ```js
+   * let timestamp = await I.grabStickTime();
+   * ```
+   * @returns timestamp value
+   *
+   * {{ react }}
+   */
+  grabStickTime() {
+    // xPath cannot find `text` tag so we exchange it with `*`
+    return I.grabTextFrom(locate(this._channelStickSelector).find('*').at(2));
+  },
+
   /**
    * Select range on overview to zoom in
+   * **should be used inside async with `await`** operator.
    * @param {number} from - relative position of start between 0 and 1
    * @param {number} to - relative position of finish between 0 and 1
    * @returns {Promise<void>}
@@ -54,6 +76,7 @@ module.exports = {
 
   /**
    * Move overview handle by mouse drag
+   * **should be used inside async with `await`** operator.
    * @param {number} where - position between 0 and 1
    * @param {"west"|"east"} [which="west"] - handler name
    * @returns {Promise<void>}
@@ -74,6 +97,7 @@ module.exports = {
 
   /**
    *  Zoom by mouse wheel over the channel
+   *  **should be used inside async with `await`** operator.
    * @param {number} deltaY
    * @param {Object} [atPoint] - Point where will be called wheel action
    * @param {number} [atPoint.x=0.5] - relative X coordinate
@@ -93,7 +117,29 @@ module.exports = {
     const channelBBox = await I.grabElementBoundingRect(this._channelSelector);
 
     I.moveMouse(channelBBox.x + channelBBox.width * x, channelBBox.y + channelBBox.height * y);
+    I.pressKeyDown('Control');
     I.mouseWheel({ deltaY });
+    I.pressKeyUp('Control');
+  },
+
+  /**
+   * Move mouse over the channel
+   * **should be used inside async with `await`** operator.
+   * @param {Object} [atPoint] - Point where will be called wheel action
+   * @param {number} [atPoint.x=0.5] - relative X coordinate
+   * @param {number} [atPoint.y=0.5] - relative Y coordinate
+   * @returns {Promise<void>}
+   *
+   * @example
+   * await AtTimeSeries.moveMouseOverChannel({ x: .01 });
+   */
+  async moveMouseOverChannel(atPoint) {
+    const { x = 0.5, y = 0.5 } = atPoint;
+
+    I.scrollPageToTop();
+    const channelBBox = await I.grabElementBoundingRect(this._channelSelector);
+
+    I.moveMouse(channelBBox.x + channelBBox.width * x, channelBBox.y + channelBBox.height * y);
   },
 
   /**

e2e/setup/feature-flags.js

@@ -5,4 +5,5 @@
 module.exports = {
   fflag_feat_front_lsdv_4659_skipduplicates_060323_short: true,
   fflag_fix_font_lsdv_1148_hotkeys_namespaces_01022023_short: true,
+  fflag_fix_front_lsdv_4881_timeseries_points_missing_140423_short: true,
 };

e2e/tests/timeseries.test.js

@@ -268,4 +268,26 @@ Scenario('TimeSeries with optimized data', async ({ I, LabelStudio, AtTimeSeries
   await doNotSeeProblems();
   await AtTimeSeries.selectOverviewRange(.9, .8999);
   await doNotSeeProblems();
+
+  I.say('check that every timestamps from timeseries data is available to display');
+  await AtTimeSeries.selectOverviewRange(.001, .000);
+  for (let i = 0; i < 20; i++) {
+    await AtTimeSeries.zoomByMouse(-100, { x: .001 });
+  }
+
+  let lastTimestamp;
+
+  for (let i = 0; i < 15;i++) {
+    AtTimeSeries.moveMouseOverChannel({ x: .01 + .025 * i });
+    const timestamp = await AtTimeSeries.grabStickTime();
+
+    if (lastTimestamp !== undefined) {
+      I.say(`I see ${timestamp}`);
+    
+      assert(timestamp === lastTimestamp || timestamp - lastTimestamp === 1,
+        `Timestamps should not be skipped. Got ${lastTimestamp} and ${timestamp} but ${timestamp -  1} is missed`);
+    }
+    lastTimestamp = timestamp;
+  }
+
 });

src/tags/object/TimeSeries/Channel.js

@@ -10,7 +10,7 @@ import { checkD3EventLoop, getOptimalWidth, getRegionColor, sparseValues } from
 import { markerSymbol } from './symbols';
 import { errorBuilder } from '../../../core/DataValidator/ConfigValidator';
 import { TagParentMixin } from '../../../mixins/TagParentMixin';
-import { FF_DEV_3391, isFF } from '../../../utils/feature-flags';
+import { FF_DEV_3391, FF_LSDV_4881, isFF } from '../../../utils/feature-flags';
 import { fixMobxObserve } from '../../../utils/utilities';
 
 /**
@@ -543,6 +543,17 @@ class ChannelD3 extends React.Component {
 
     this.useOptimizedData = series.length > optimizedWidthWithZoom;
 
+    let originalSeries, originalTimes;
+
+    if (isFF(FF_LSDV_4881)) {
+      originalSeries = series.filter(x => {
+        return x[column] !== null;
+      });
+      originalTimes = originalSeries.map(x => {
+        return x[time];
+      });
+    }
+
     if (this.useOptimizedData) {
       this.optimizedSeries = sparseValues(series, optimizedWidthWithZoom);
       series = this.optimizedSeries;
@@ -607,10 +618,11 @@ class ChannelD3 extends React.Component {
 
     const stick = screenX => {
       const dataX = x.invert(screenX);
-      let i = d3.bisectRight(times, dataX, 0, times.length - 1);
+      const stickTimes = isFF(FF_LSDV_4881) ? originalTimes : times;
+      let i = d3.bisectRight(stickTimes, dataX, 0, stickTimes.length - 1);
 
-      if (times[i] - dataX > dataX - times[i - 1]) i--;
-      return [times[i], values[i]];
+      if (stickTimes[i] - dataX > dataX - stickTimes[i - 1]) i--;
+      return [stickTimes[i], isFF(FF_LSDV_4881) ? originalSeries[i][column] : values[i]];
     };
 
     this.x = x;

src/utils/feature-flags.ts

@@ -217,6 +217,13 @@ export const FF_LSDV_4659 = 'fflag_feat_front_lsdv_4659_skipduplicates_060323_sh
  */
 export const FF_LSDV_4832 = 'fflag_feat_front_lsdv_4832_new_ranker_tag_120423_short';
 
+/**
+ * Fixing issue with missed steps in timeseries with optimized data and zoom
+ *
+ * @link https://app.launchdarkly.com/default/production/features/fflag_fix_front_lsdv_4881_timeseties_points_missing_140423_short
+ */
+export const FF_LSDV_4881 = 'fflag_fix_front_lsdv_4881_timeseries_points_missing_140423_short';
+
 Object.assign(window, {
   APP_SETTINGS: {
     ...(window.APP_SETTINGS ?? {}),