[ML] Fix charts grid on the Anomaly Explorer page (elastic#86904) (el…

…astic#86937) * [ML] fix AR charts grid items width * [ML] update test snapshot # Conflicts: # x-pack/plugins/ml/public/application/explorer/explorer_charts/explorer_charts_container_service.js
patrykkopycinski · Dec 24, 2020 · 2ceb34e · 2ceb34e
1 parent cca59ba
commit 2ceb34e
Show file tree

Hide file tree

Showing 3 changed files with 11 additions and 14 deletions.
diff --git a/...ion/explorer/explorer_charts/__snapshots__/explorer_charts_container_service.test.js.snap b/...ion/explorer/explorer_charts/__snapshots__/explorer_charts_container_service.test.js.snap
diff --git a/...ugins/ml/public/application/explorer/explorer_charts/explorer_charts_container_service.js b/...ugins/ml/public/application/explorer/explorer_charts/explorer_charts_container_service.js
@@ -28,6 +28,7 @@ import { mlJobService } from '../../services/job_service';
 import { explorerService } from '../explorer_dashboard_service';
 
 import { CHART_TYPE } from '../explorer_constants';
+import { SWIM_LANE_LABEL_WIDTH } from '../swimlane_container';
 
 export function getDefaultChartsData() {
   return {
@@ -57,15 +58,14 @@ export const anomalyDataChange = function (
 ) {
   const data = getDefaultChartsData();
 
+  const containerWith = chartsContainerWidth + SWIM_LANE_LABEL_WIDTH;
+
   const filteredRecords = anomalyRecords.filter((record) => {
     return Number(record.record_score) >= severity;
   });
   const allSeriesRecords = processRecordsForDisplay(filteredRecords);
   // Calculate the number of charts per row, depending on the width available, to a max of 4.
-  let chartsPerRow = Math.min(
-    Math.max(Math.floor(chartsContainerWidth / 550), 1),
-    MAX_CHARTS_PER_ROW
-  );
+  let chartsPerRow = Math.min(Math.max(Math.floor(containerWith / 550), 1), MAX_CHARTS_PER_ROW);
   if (allSeriesRecords.length === 1) {
     chartsPerRow = 1;
   }
@@ -81,7 +81,7 @@ export const anomalyDataChange = function (
 
   // Calculate the time range of the charts, which is a function of the chart width and max job bucket span.
   data.tooManyBuckets = false;
-  const chartWidth = Math.floor(chartsContainerWidth / chartsPerRow);
+  const chartWidth = Math.floor(containerWith / chartsPerRow);
   const { chartRange, tooManyBuckets } = calculateChartRange(
     seriesConfigs,
     selectedEarliestMs,

diff --git a/x-pack/plugins/ml/public/application/explorer/swimlane_container.tsx b/x-pack/plugins/ml/public/application/explorer/swimlane_container.tsx
@@ -46,11 +46,11 @@ import { useUiSettings } from '../contexts/kibana';
 /**
  * Ignore insignificant resize, e.g. browser scrollbar appearance.
  */
-const RESIZE_IGNORED_DIFF_PX = 20;
 const RESIZE_THROTTLE_TIME_MS = 500;
 const CELL_HEIGHT = 30;
 const LEGEND_HEIGHT = 34;
 const Y_AXIS_HEIGHT = 24;
+export const SWIM_LANE_LABEL_WIDTH = 200;
 
 export function isViewBySwimLaneData(arg: any): arg is ViewBySwimLaneData {
   return arg && arg.hasOwnProperty('cardinality');
@@ -167,12 +167,9 @@ export const SwimlaneContainer: FC<SwimlaneProps> = ({
 
   const resizeHandler = useCallback(
     throttle((e: { width: number; height: number }) => {
-      const labelWidth = 200;
-      const resultNewWidth = e.width - labelWidth;
-      if (Math.abs(resultNewWidth - chartWidth) > RESIZE_IGNORED_DIFF_PX) {
-        setChartWidth(resultNewWidth);
-        onResize(resultNewWidth);
-      }
+      const resultNewWidth = e.width - SWIM_LANE_LABEL_WIDTH;
+      setChartWidth(resultNewWidth);
+      onResize(resultNewWidth);
     }, RESIZE_THROTTLE_TIME_MS),
     [chartWidth]
   );