[ml] Relocate constant, reduce page load async chunks by 59%

x-pack/plugins/ml/public/application/explorer/alerts/chart.tsx

@@ -11,9 +11,9 @@ import type { TypedLensByValueInput } from '@kbn/lens-plugin/public';
 import useObservable from 'react-use/lib/useObservable';
 import { css } from '@emotion/react';
 import { i18n } from '@kbn/i18n';
-import { Y_AXIS_LABEL_WIDTH } from '../swimlane_annotation_container';
 import { useAnomalyExplorerContext } from '../anomaly_explorer_context';
 import { useMlKibana } from '../../contexts/kibana';
+import { Y_AXIS_LABEL_WIDTH } from '../constants';
 
 export interface AnomalyDetectionAlertsOverviewChart {
   seriesType?: 'bar_stacked' | 'line';

x-pack/plugins/ml/public/application/explorer/alerts/swim_lane_wrapper.tsx

@@ -44,9 +44,9 @@ import {
 import { useMlKibana } from '../../contexts/kibana';
 import { useAnomalyExplorerContext } from '../anomaly_explorer_context';
 import type { AppStateSelectedCells, SwimlaneData } from '../explorer_utils';
-import { Y_AXIS_LABEL_WIDTH } from '../swimlane_annotation_container';
 import { CELL_HEIGHT } from '../swimlane_container';
 import { statusNameMap } from './const';
+import { Y_AXIS_LABEL_WIDTH } from '../constants';
 
 export interface SwimLaneWrapperProps {
   selection?: AppStateSelectedCells | null;

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

@@ -10,6 +10,7 @@ import d3 from 'd3';
 import { scaleTime } from 'd3-scale';
 import { type ChartTooltipService, type TooltipData } from '../components/chart_tooltip';
 import { useCurrentThemeVars } from '../contexts/kibana';
+import { Y_AXIS_LABEL_PADDING, Y_AXIS_LABEL_WIDTH } from './constants';
 
 export interface AnnotationTimelineProps<T extends { timestamp: number; end_timestamp?: number }> {
   label: string;
@@ -23,8 +24,6 @@ export interface AnnotationTimelineProps<T extends { timestamp: number; end_time
   chartWidth: number;
 }
 
-export const Y_AXIS_LABEL_WIDTH = 170;
-export const Y_AXIS_LABEL_PADDING = 8;
 const ANNOTATION_CONTAINER_HEIGHT = 12;
 const ANNOTATION_MIN_WIDTH = 8;
 

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

@@ -61,11 +61,12 @@ import { NoOverallData } from './components/no_overall_data';
 import { SeverityControl } from '../components/severity_control';
 import { AnomalyTimelineHelpPopover } from './anomaly_timeline_help_popover';
 import { MlTooltipComponent } from '../components/chart_tooltip';
-import { SwimlaneAnnotationContainer, Y_AXIS_LABEL_WIDTH } from './swimlane_annotation_container';
+import { SwimlaneAnnotationContainer } from './swimlane_annotation_container';
 import { AnomalyTimelineService } from '../services/anomaly_timeline_service';
 import { useAnomalyExplorerContext } from './anomaly_explorer_context';
 import { getTimeBoundsFromSelection } from './hooks/use_selected_cells';
 import { SwimLaneWrapper } from './alerts';
+import { Y_AXIS_LABEL_WIDTH } from './constants';
 
 function mapSwimlaneOptionsToEuiOptions(options: string[]) {
   return options.map((option) => ({

x-pack/plugins/ml/public/application/explorer/constants.ts

@@ -0,0 +1,10 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License
+ * 2.0; you may not use this file except in compliance with the Elastic License
+ * 2.0.
+ */
+
+export const Y_AXIS_LABEL_WIDTH = 170;
+export const Y_AXIS_LABEL_PADDING = 8;
+export const SWIM_LANE_LABEL_WIDTH = Y_AXIS_LABEL_WIDTH + 2 * Y_AXIS_LABEL_PADDING;

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

@@ -14,9 +14,8 @@ import moment from 'moment';
 import { useCurrentThemeVars } from '../contexts/kibana';
 import type { Annotation, AnnotationsTable } from '../../../common/types/annotations';
 import type { ChartTooltipService } from '../components/chart_tooltip';
+import { Y_AXIS_LABEL_PADDING, Y_AXIS_LABEL_WIDTH } from './constants';
 
-export const Y_AXIS_LABEL_WIDTH = 170;
-export const Y_AXIS_LABEL_PADDING = 8;
 const ANNOTATION_CONTAINER_HEIGHT = 12;
 const ANNOTATION_MIN_WIDTH = 8;
 

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

@@ -61,7 +61,7 @@ import { mlEscape } from '../util/string_utils';
 import { FormattedTooltip } from '../components/chart_tooltip/chart_tooltip';
 import './_explorer.scss';
 import { EMPTY_FIELD_VALUE_LABEL } from '../timeseriesexplorer/components/entity_control/entity_control';
-import { Y_AXIS_LABEL_PADDING, Y_AXIS_LABEL_WIDTH } from './swimlane_annotation_container';
+import { SWIM_LANE_LABEL_WIDTH, Y_AXIS_LABEL_PADDING } from './constants';
 import { useCurrentThemeVars, useMlKibana } from '../contexts/kibana';
 
 declare global {
@@ -82,8 +82,6 @@ export const CELL_HEIGHT = 30;
 const LEGEND_HEIGHT = 34;
 const X_AXIS_HEIGHT = 24;
 
-export const SWIM_LANE_LABEL_WIDTH = Y_AXIS_LABEL_WIDTH + 2 * Y_AXIS_LABEL_PADDING;
-
 export function isViewBySwimLaneData(arg: any): arg is ViewBySwimLaneData {
   return arg && arg.hasOwnProperty('cardinality');
 }

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

@@ -23,7 +23,7 @@ import type { SeriesConfigWithMetadata } from '../../../common/types/results';
 
 import type { ExplorerChartsData } from '../explorer/explorer_charts/explorer_charts_container_service';
 import type { AppStateSelectedCells } from '../explorer/explorer_utils';
-import { SWIM_LANE_LABEL_WIDTH } from '../explorer/swimlane_container';
+import { SWIM_LANE_LABEL_WIDTH } from '../explorer/constants';
 
 import type { MlApiServices } from './ml_api_service';
 import type { MlResultsService } from './results_service';

x-pack/plugins/ml/public/embeddables/anomaly_swimlane/embeddable_swim_lane_container.tsx

@@ -13,7 +13,6 @@ import type { Observable } from 'rxjs';
 import type { CoreStart } from '@kbn/core/public';
 import { FormattedMessage } from '@kbn/i18n-react';
 import { css } from '@emotion/react';
-import { Y_AXIS_LABEL_WIDTH } from '../../application/explorer/swimlane_annotation_container';
 import { useEmbeddableExecutionContext } from '../common/use_embeddable_execution_context';
 import type { IAnomalySwimlaneEmbeddable } from './anomaly_swimlane_embeddable';
 import { useSwimlaneInputResolver } from './swimlane_input_resolver';
@@ -31,6 +30,7 @@ import type {
   AnomalySwimlaneServices,
 } from '..';
 import { ANOMALY_SWIMLANE_EMBEDDABLE_TYPE } from '..';
+import { Y_AXIS_LABEL_WIDTH } from '../../application/explorer/constants';
 
 export interface ExplorerSwimlaneContainerProps {
   id: string;