[ML] Resizable/Collapsible Top Influencers section (#130018)

* resizable container

* mobile styles

* persisted panel state

* set isCollapsible on open

* use ref instead of state

* fix onToggleCollapsed

* fix layout when no influencers are configured

* remove negative margin

* add spacer

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

@@ -15,6 +15,8 @@ export const ML_GETTING_STARTED_CALLOUT_DISMISSED = 'ml.gettingStarted.isDismiss
 
 export const ML_FROZEN_TIER_PREFERENCE = 'ml.frozenDataTierPreference';
 
+export const ML_ANOMALY_EXPLORER_PANELS = 'ml.anomalyExplorerPanels';
+
 export type PartitionFieldConfig =
   | {
       /**
@@ -42,11 +44,22 @@ export type PartitionFieldsConfig =
 
 export type ApplyTimeRangeConfig = boolean | undefined;
 
+export interface PanelState {
+  size: number;
+  isCollapsed: boolean;
+}
+
+export interface AnomalyExplorerPanelsState {
+  topInfluencers: PanelState;
+  mainPage: { size: number };
+}
+
 export type MlStorage = Partial<{
   [ML_ENTITY_FIELDS_CONFIG]: PartitionFieldsConfig;
   [ML_APPLY_TIME_RANGE_CONFIG]: ApplyTimeRangeConfig;
   [ML_GETTING_STARTED_CALLOUT_DISMISSED]: boolean | undefined;
   [ML_FROZEN_TIER_PREFERENCE]: 'exclude_frozen' | 'include_frozen';
+  [ML_ANOMALY_EXPLORER_PANELS]: AnomalyExplorerPanelsState | undefined;
 }> | null;
 
 export type MlStorageKey = keyof Exclude<MlStorage, null>;

x-pack/plugins/ml/public/application/explorer/_explorer.scss

@@ -1,18 +1,7 @@
 $borderRadius: $euiBorderRadius / 2;
 
 .ml-explorer {
-  width: 100%;
-  display: inline-block;
-  color: $euiColorDarkShade;
-
   .results-container {
-    padding: 0 0 $euiSize 0;
-
-    // SASSTODO: Overwrite of bootstrap
-    .col-xs-12 {
-      width: calc(100% - #{$euiSizeXL});
-      padding-left: $euiSize;
-    }
 
     .no-influencers-warning {
       float: left;