[ML] Fix "View by" swim lane with applied filter and sorting by score (#105217)

* [ML] fix top influencers fetch with filter selection

* [ML] add relative position to the chart container

* [ML] fix ts

* [ML] fix updating search input from influencer filter

Author: darnautov

x-pack/plugins/ml/common/types/anomalies.ts

@@ -12,6 +12,8 @@ export interface Influencer {
   influencer_field_values: string[];
 }
 
+export type MLAnomalyDoc = AnomalyRecordDoc;
+
 export interface AnomalyRecordDoc {
   [key: string]: any;
   job_id: string;

x-pack/plugins/ml/public/application/explorer/actions/load_explorer_data.ts

@@ -223,7 +223,9 @@ const loadExplorerDataProvider = (
               swimlaneLimit,
               viewByPerPage,
               viewByFromPage,
-              swimlaneContainerWidth
+              swimlaneContainerWidth,
+              selectionInfluencers,
+              influencersFilterQuery
             )
           : Promise.resolve([]),
     }).pipe(

x-pack/plugins/ml/public/application/explorer/components/explorer_query_bar/explorer_query_bar.tsx

@@ -95,7 +95,6 @@ function getInitSearchInputState({
 
 interface ExplorerQueryBarProps {
   filterActive: boolean;
-  filterIconTriggeredQuery: string;
   filterPlaceHolder: string;
   indexPattern: IIndexPattern;
   queryString?: string;
@@ -104,7 +103,6 @@ interface ExplorerQueryBarProps {
 
 export const ExplorerQueryBar: FC<ExplorerQueryBarProps> = ({
   filterActive,
-  filterIconTriggeredQuery,
   filterPlaceHolder,
   indexPattern,
   queryString,
@@ -116,21 +114,20 @@ export const ExplorerQueryBar: FC<ExplorerQueryBarProps> = ({
   );
   const [errorMessage, setErrorMessage] = useState<ErrorMessage | undefined>(undefined);
 
-  useEffect(() => {
-    if (filterIconTriggeredQuery !== undefined) {
-      setSearchInput({
-        language: searchInput.language,
-        query: filterIconTriggeredQuery,
-      });
-    }
-  }, [filterIconTriggeredQuery]);
+  useEffect(
+    function updateSearchInputFromFilter() {
+      setSearchInput(getInitSearchInputState({ filterActive, queryString }));
+    },
+    [filterActive, queryString]
+  );
 
   const searchChangeHandler = (query: Query) => {
     if (searchInput.language !== query.language) {
       updateLanguage(query.language);
     }
     setSearchInput(query);
   };
+
   const applyInfluencersFilterQuery = (query: Query) => {
     try {
       const { clearSettings, settings } = getKqlQueryValues({

x-pack/plugins/ml/public/application/explorer/explorer.js

@@ -86,7 +86,6 @@ const ExplorerPage = ({
   filterPlaceHolder,
   indexPattern,
   queryString,
-  filterIconTriggeredQuery,
   updateLanguage,
 }) => (
   <div data-test-subj="mlPageAnomalyExplorer">
@@ -121,7 +120,6 @@ const ExplorerPage = ({
                       filterPlaceHolder={filterPlaceHolder}
                       indexPattern={indexPattern}
                       queryString={queryString}
-                      filterIconTriggeredQuery={filterIconTriggeredQuery}
                       updateLanguage={updateLanguage}
                     />
                   </div>
@@ -151,7 +149,7 @@ export class ExplorerUI extends React.Component {
     selectedJobsRunning: PropTypes.bool.isRequired,
   };
 
-  state = { filterIconTriggeredQuery: undefined, language: DEFAULT_QUERY_LANG };
+  state = { language: DEFAULT_QUERY_LANG };
   htmlIdGen = htmlIdGenerator();
 
   componentDidMount() {
@@ -200,8 +198,6 @@ export class ExplorerUI extends React.Component {
       }
     }
 
-    this.setState({ filterIconTriggeredQuery: `${newQueryString}` });
-
     try {
       const { clearSettings, settings } = getKqlQueryValues({
         inputString: `${newQueryString}`,
@@ -327,7 +323,6 @@ export class ExplorerUI extends React.Component {
         influencers={influencers}
         filterActive={filterActive}
         filterPlaceHolder={filterPlaceHolder}
-        filterIconTriggeredQuery={this.state.filterIconTriggeredQuery}
         indexPattern={indexPattern}
         queryString={queryString}
         updateLanguage={this.updateLanguage}

x-pack/plugins/ml/public/application/explorer/explorer_utils.d.ts

@@ -181,15 +181,6 @@ declare interface LoadOverallDataResponse {
   overallSwimlaneData: OverallSwimlaneData;
 }
 
-export declare const loadViewByTopFieldValuesForSelectedTime: (
-  earliestMs: number,
-  latestMs: number,
-  selectedJobs: ExplorerJob[],
-  viewBySwimlaneFieldName: string,
-  swimlaneLimit: number,
-  noInfluencersConfigured: boolean
-) => Promise<any>;
-
 export declare interface FilterData {
   influencersFilterQuery: InfluencersFilterQuery;
   filterActive: boolean;

x-pack/plugins/ml/public/application/explorer/swimlane_container.tsx

@@ -411,7 +411,7 @@ export const SwimlaneContainer: FC<SwimlaneProps> = ({
           >
             <>
               <div>
-                <div style={{ height: `${containerHeight}px` }}>
+                <div style={{ height: `${containerHeight}px`, position: 'relative' }}>
                   {showSwimlane && !isLoading && (
                     <Chart className={'mlSwimLaneContainer'}>
                       <Settings

x-pack/plugins/ml/public/application/jobs/new_job/common/results_loader/searches.ts

@@ -74,6 +74,7 @@ export function getScoresByRecord(
                             timestamp: {
                               gte: earliestMs,
                               lte: latestMs,
+                              // @ts-ignore
                               format: 'epoch_millis',
                             },
                           },

x-pack/plugins/ml/public/application/services/anomaly_timeline_service.ts

@@ -25,6 +25,8 @@ import {
 } from '../explorer/explorer_utils';
 import { OVERALL_LABEL, VIEW_BY_JOB_LABEL } from '../explorer/explorer_constants';
 import { MlResultsService } from './results_service';
+import { EntityField } from '../../../common/util/anomaly_utils';
+import { InfluencersFilterQuery } from '../../../common/types/es_client';
 
 /**
  * Service for retrieving anomaly swim lanes data.
@@ -241,7 +243,9 @@ export class AnomalyTimelineService {
     swimlaneLimit: number,
     perPage: number,
     fromPage: number,
-    swimlaneContainerWidth: number
+    swimlaneContainerWidth: number,
+    selectionInfluencers: EntityField[],
+    influencersFilterQuery: InfluencersFilterQuery
   ) {
     const selectedJobIds = selectedJobs.map((d) => d.id);
 
@@ -254,7 +258,9 @@ export class AnomalyTimelineService {
         latestMs,
         swimlaneLimit,
         perPage,
-        fromPage
+        fromPage,
+        selectionInfluencers,
+        influencersFilterQuery
       );
       if (resp.influencers[viewBySwimlaneFieldName] === undefined) {
         return [];
@@ -276,6 +282,8 @@ export class AnomalyTimelineService {
         earliestMs,
         latestMs,
         this.getSwimlaneBucketInterval(selectedJobs, swimlaneContainerWidth).asMilliseconds(),
+        perPage,
+        fromPage,
         swimlaneLimit
       );
       return Object.keys(resp.results);

x-pack/plugins/ml/public/application/services/ml_api_service/results.ts

@@ -16,6 +16,11 @@ import { JobId } from '../../../../common/types/anomaly_detection_jobs';
 import { JOB_ID, PARTITION_FIELD_VALUE } from '../../../../common/constants/anomalies';
 import { PartitionFieldsDefinition } from '../results_service/result_service_rx';
 import { PartitionFieldsConfig } from '../../../../common/types/storage';
+import {
+  ESSearchRequest,
+  ESSearchResponse,
+} from '../../../../../../../src/core/types/elasticsearch';
+import { MLAnomalyDoc } from '../../../../common/types/anomalies';
 
 export const resultsApiProvider = (httpService: HttpService) => ({
   getAnomaliesTableData(
@@ -112,18 +117,18 @@ export const resultsApiProvider = (httpService: HttpService) => ({
     });
   },
 
-  anomalySearch(query: any, jobIds: string[]) {
+  anomalySearch(query: ESSearchRequest, jobIds: string[]) {
     const body = JSON.stringify({ query, jobIds });
-    return httpService.http<any>({
+    return httpService.http<ESSearchResponse<MLAnomalyDoc>>({
       path: `${basePath()}/results/anomaly_search`,
       method: 'POST',
       body,
     });
   },
 
-  anomalySearch$(query: any, jobIds: string[]) {
+  anomalySearch$(query: ESSearchRequest, jobIds: string[]) {
     const body = JSON.stringify({ query, jobIds });
-    return httpService.http$<any>({
+    return httpService.http$<ESSearchResponse<MLAnomalyDoc>>({
       path: `${basePath()}/results/anomaly_search`,
       method: 'POST',
       body,

x-pack/plugins/ml/public/application/services/results_service/results_service.d.ts

@@ -23,7 +23,8 @@ export function resultsServiceProvider(
     intervalMs: number,
     perPage?: number,
     fromPage?: number,
-    swimLaneSeverity?: number
+    swimLaneSeverity?: number,
+    influencersFilterQuery?: InfluencersFilterQuery
   ): Promise<any>;
   getTopInfluencers(
     selectedJobIds: string[],
@@ -32,7 +33,7 @@ export function resultsServiceProvider(
     maxFieldValues: number,
     perPage?: number,
     fromPage?: number,
-    influencers?: any[],
+    influencers?: EntityField[],
     influencersFilterQuery?: InfluencersFilterQuery
   ): Promise<any>;
   getTopInfluencerValues(): Promise<any>;