[ML] Fix swim lane for top influencers (#84258)

* [ML] fix swim lane with page size for top influencers, fix swim lane sorting * [ML] fix typo
elastic · Nov 24, 2020 · 63d8a82 · 63d8a82
1 parent ad2c600
commit 63d8a82
Show file tree

Hide file tree

Showing 2 changed files with 23 additions and 5 deletions.
diff --git a/x-pack/plugins/ml/public/application/explorer/swimlane_container.tsx b/x-pack/plugins/ml/public/application/explorer/swimlane_container.tsx
@@ -184,6 +184,8 @@ export const SwimlaneContainer: FC<SwimlaneProps> = ({
       return [];
     }
 
+    const sortedLaneValues = swimlaneData.laneLabels;
+
     return swimlaneData.points
       .map((v) => {
         const formatted = { ...v, time: v.time * 1000 };
@@ -195,8 +197,15 @@ export const SwimlaneContainer: FC<SwimlaneProps> = ({
         }
         return formatted;
       })
+      .sort((a, b) => {
+        let aIndex = sortedLaneValues.indexOf(a.laneLabel);
+        let bIndex = sortedLaneValues.indexOf(b.laneLabel);
+        aIndex = aIndex > -1 ? aIndex : sortedLaneValues.length;
+        bIndex = bIndex > -1 ? bIndex : sortedLaneValues.length;
+        return aIndex - bIndex;
+      })
       .filter((v) => v.value > 0);
-  }, [swimlaneData?.points, filterActive, swimlaneType]);
+  }, [swimlaneData?.points, filterActive, swimlaneType, swimlaneData?.laneLabels]);
 
   const showSwimlane = swimlaneData?.laneLabels?.length > 0 && swimLanePoints.length > 0;
 

diff --git a/x-pack/plugins/ml/public/application/routing/routes/explorer.tsx b/x-pack/plugins/ml/public/application/routing/routes/explorer.tsx
@@ -219,15 +219,24 @@ const ExplorerUrlStateManager: FC<ExplorerUrlStateManagerProps> = ({ jobsWithTim
     undefined;
 
   useEffect(() => {
+    /**
+     * For the "View by" swim lane the limit is the cardinality of the influencer values,
+     * which is known after the initial fetch.
+     * When looking up for top influencers for selected range in Overall swim lane
+     * the result is filtered by top influencers values, hence there is no need to set the limit.
+     */
+    const swimlaneLimit =
+      isViewBySwimLaneData(explorerState?.viewBySwimlaneData) && !selectedCells?.showTopFieldValues
+        ? explorerState?.viewBySwimlaneData.cardinality
+        : undefined;
+
     if (explorerState && explorerState.swimlaneContainerWidth > 0) {
       loadExplorerData({
         ...loadExplorerDataConfig,
-        swimlaneLimit: isViewBySwimLaneData(explorerState?.viewBySwimlaneData)
-          ? explorerState?.viewBySwimlaneData.cardinality
-          : undefined,
+        swimlaneLimit,
       });
     }
-  }, [JSON.stringify(loadExplorerDataConfig)]);
+  }, [JSON.stringify(loadExplorerDataConfig), selectedCells?.showTopFieldValues]);
 
   if (explorerState === undefined || refresh === undefined || showCharts === undefined) {
     return null;