[ML] adjust cell selection according to the time range

x-pack/plugins/ml/public/application/explorer/hooks/use_selected_cells.ts

@@ -4,14 +4,17 @@
  * you may not use this file except in compliance with the Elastic License.
  */
 
-import { useCallback, useMemo } from 'react';
+import { useCallback, useEffect, useMemo } from 'react';
+import { Duration } from 'moment';
 import { SWIMLANE_TYPE } from '../explorer_constants';
-import { AppStateSelectedCells } from '../explorer_utils';
+import { AppStateSelectedCells, TimeRangeBounds } from '../explorer_utils';
 import { ExplorerAppState } from '../../../../common/types/ml_url_generator';
 
 export const useSelectedCells = (
   appState: ExplorerAppState,
-  setAppState: (update: Partial<ExplorerAppState>) => void
+  setAppState: (update: Partial<ExplorerAppState>) => void,
+  timeBounds: TimeRangeBounds | undefined,
+  bucketInterval: Duration | undefined
 ): [AppStateSelectedCells | undefined, (swimlaneSelectedCells: AppStateSelectedCells) => void] => {
   // keep swimlane selection, restore selectedCells from AppState
   const selectedCells = useMemo(() => {
@@ -28,7 +31,7 @@ export const useSelectedCells = (
   }, [JSON.stringify(appState?.mlExplorerSwimlane)]);
 
   const setSelectedCells = useCallback(
-    (swimlaneSelectedCells: AppStateSelectedCells) => {
+    (swimlaneSelectedCells?: AppStateSelectedCells) => {
       const mlExplorerSwimlane = {
         ...appState.mlExplorerSwimlane,
       } as ExplorerAppState['mlExplorerSwimlane'];
@@ -65,5 +68,47 @@ export const useSelectedCells = (
     [appState?.mlExplorerSwimlane, selectedCells, setAppState]
   );
 
+  /**
+   * Adjust cell selection with respect to the time boundaries.
+   * Reset it entirely when it out of range.
+   */
+  useEffect(() => {
+    if (
+      timeBounds === undefined ||
+      selectedCells?.times === undefined ||
+      bucketInterval === undefined
+    )
+      return;
+
+    let [selectedFrom, selectedTo] = selectedCells.times;
+
+    const rangeFrom = timeBounds.min!.unix();
+    /**
+     * Because each cell on the swim lane represent the fixed bucket interval,
+     * the selection range could be outside of the time boundaries with
+     * correction within the bucket interval.
+     */
+    const rangeTo = timeBounds.max!.unix() + bucketInterval.asSeconds();
+
+    selectedFrom = Math.max(selectedFrom, rangeFrom);
+
+    selectedTo = Math.min(selectedTo, rangeTo);
+
+    const isSelectionOutOfRange = rangeFrom > selectedTo || rangeTo < selectedFrom;
+
+    if (isSelectionOutOfRange) {
+      // reset selection
+      setSelectedCells();
+      return;
+    }
+
+    if (selectedFrom !== rangeFrom || selectedTo !== rangeTo) {
+      setSelectedCells({
+        ...selectedCells,
+        times: [selectedFrom, selectedTo],
+      });
+    }
+  }, [timeBounds, selectedCells, bucketInterval]);
+
   return [selectedCells, setSelectedCells];
 };

x-pack/plugins/ml/public/application/explorer/reducers/explorer_reducer/state.ts

@@ -4,6 +4,7 @@
  * you may not use this file except in compliance with the Elastic License.
  */
 
+import { Duration } from 'moment';
 import { ML_RESULTS_INDEX_PATTERN } from '../../../../../common/constants/index_patterns';
 import { Dictionary } from '../../../../../common/types/common';
 
@@ -43,7 +44,7 @@ export interface ExplorerState {
   queryString: string;
   selectedCells: AppStateSelectedCells | undefined;
   selectedJobs: ExplorerJob[] | null;
-  swimlaneBucketInterval: any;
+  swimlaneBucketInterval: Duration | undefined;
   swimlaneContainerWidth: number;
   tableData: AnomaliesTableData;
   tableQueryString: string;

x-pack/plugins/ml/public/application/routing/routes/explorer.tsx

@@ -205,7 +205,12 @@ const ExplorerUrlStateManager: FC<ExplorerUrlStateManagerProps> = ({ jobsWithTim
   const [tableInterval] = useTableInterval();
   const [tableSeverity] = useTableSeverity();
 
-  const [selectedCells, setSelectedCells] = useSelectedCells(explorerUrlState, setExplorerUrlState);
+  const [selectedCells, setSelectedCells] = useSelectedCells(
+    explorerUrlState,
+    setExplorerUrlState,
+    explorerState?.bounds,
+    explorerState?.swimlaneBucketInterval
+  );
 
   useEffect(() => {
     explorerService.setSelectedCells(selectedCells);