[ML] Explain Log Rate Spikes: allow sticky histogram (#159412)

## Summary Related issue: https://github.com/elastic/kibana/issues/156605 This PR adds some ELRS style updates: - adds options prop to allow 'stickyHistogram' - defaults to false for now - until page restructure work is done to allow for smooth interaction - Moves the 'Clear' functionality to 'Reset' button in line with the progress controls <img width="1273" alt="image" src="50bd3512-cad6-498e-b7a2-740a01151004"> ### Checklist Delete any items that are not applicable to this PR. - [ ] Any text added follows [EUI's writing guidelines](https://elastic.github.io/eui/#/guidelines/writing), uses sentence case text and includes [i18n support](https://github.com/elastic/kibana/blob/main/packages/kbn-i18n/README.md) - [ ] [Documentation](https://www.elastic.co/guide/en/kibana/master/development-documentation.html) was added for features that require explanation or tutorials - [ ] [Unit or functional tests](https://www.elastic.co/guide/en/kibana/master/development-tests.html) were updated or added to match the most common scenarios - [ ] Any UI touched in this PR is usable by keyboard only (learn more about [keyboard accessibility](https://webaim.org/techniques/keyboard/)) - [ ] Any UI touched in this PR does not create any new axe failures (run axe in browser: [FF](https://addons.mozilla.org/en-US/firefox/addon/axe-devtools/), [Chrome](https://chrome.google.com/webstore/detail/axe-web-accessibility-tes/lhdoppojpmngadmnindnejefpokejbdd?hl=en-US)) - [ ] If a plugin configuration key changed, check if it needs to be allowlisted in the cloud and added to the [docker list](https://github.com/elastic/kibana/blob/main/src/dev/build/tasks/os_packages/docker_generator/resources/base/bin/kibana-docker) - [ ] This renders correctly on smaller devices using a responsive layout. (You can test this [in your browser](https://www.browserstack.com/guide/responsive-testing-on-local-server)) - [ ] This was checked for [cross-browser compatibility](https://www.elastic.co/support/matrix#matrix_browsers) --------- Co-authored-by: kibanamachine <42973632+kibanamachine@users.noreply.github.com>
2025-04-23 17:28:26 -04:00 · 2023-06-15 07:26:33 -06:00 · 2023-06-15 07:26:33 -06:00 · 5751f29f58
commit 5751f29f58
parent e4349cd52a
11 changed files with 195 additions and 190 deletions
--- a/x-pack/packages/ml/aiops_components/src/progress_controls/progress_controls.tsx
+++ b/x-pack/packages/ml/aiops_components/src/progress_controls/progress_controls.tsx
@ -27,20 +27,24 @@ import { useAnimatedProgressBarBackground } from './use_animated_progress_bar_ba
 // `x-pack/plugins/apm/public/components/app/correlations/progress_controls.tsx`

 interface ProgressControlProps {
+  isBrushCleared: boolean;
  progress: number;
  progressMessage: string;
  onRefresh: () => void;
  onCancel: () => void;
+  onReset: () => void;
  isRunning: boolean;
  shouldRerunAnalysis: boolean;
 }

 export const ProgressControls: FC<ProgressControlProps> = ({
  children,
+  isBrushCleared,
  progress,
  progressMessage,
  onRefresh,
  onCancel,
+  onReset,
  isRunning,
  shouldRerunAnalysis,
 }) => {
@ -49,7 +53,7 @@ export const ProgressControls: FC<ProgressControlProps> = ({
  const analysisCompleteStyle = { display: 'none' };

  return (
-    <EuiFlexGroup alignItems="center">
+    <EuiFlexGroup alignItems="center" gutterSize="s">
      <EuiFlexItem grow={false}>
        {!isRunning && (
          <EuiButton
@ -89,9 +93,21 @@ export const ProgressControls: FC<ProgressControlProps> = ({
          </EuiButton>
        )}
      </EuiFlexItem>
+      {(progress === 1 || isRunning === false) && !isBrushCleared ? (
+        <EuiFlexItem grow={false}>
+          <EuiButton
+            data-test-subj="aiopsClearSelectionBadge"
+            size="s"
+            onClick={onReset}
+            color="text"
+          >
+            <FormattedMessage id="xpack.aiops.resetLabel" defaultMessage="Reset" />
+          </EuiButton>
+        </EuiFlexItem>
+      ) : null}
      <EuiFlexItem>
        {progress === 1 ? (
-          <EuiFlexGroup gutterSize="s" alignItems="center" responsive={false}>
+          <EuiFlexGroup gutterSize="xs" alignItems="center" responsive={false}>
            <EuiFlexItem grow={false}>
              <EuiIcon type="checkInCircleFilled" color={euiTheme.colors.success} />
            </EuiFlexItem>
--- a/x-pack/plugins/aiops/public/components/document_count_content/document_count_content/document_count_content.tsx
+++ b/x-pack/plugins/aiops/public/components/document_count_content/document_count_content/document_count_content.tsx
@ -5,11 +5,10 @@
 * 2.0.
 */

-import React, { useEffect, useState, type FC } from 'react';
+import React, { type FC } from 'react';

-import { EuiButtonEmpty, EuiFlexGroup, EuiFlexItem } from '@elastic/eui';
+import { EuiFlexGroup, EuiFlexItem } from '@elastic/eui';

-import { i18n } from '@kbn/i18n';
 import type { WindowParameters } from '@kbn/aiops-utils';

 import { DocumentCountStats } from '../../../get_document_stats';
@ -17,23 +16,15 @@ import { DocumentCountStats } from '../../../get_document_stats';
 import { DocumentCountChart, DocumentCountChartPoint } from '../document_count_chart';
 import { TotalCountHeader } from '../total_count_header';

-const clearSelectionLabel = i18n.translate(
-  'xpack.aiops.documentCountContent.clearSelectionAriaLabel',
-  {
-    defaultMessage: 'Clear selection',
-  }
-);
-
 export interface DocumentCountContentProps {
-  brushSelectionUpdateHandler: (d: WindowParameters) => void;
-  clearSelectionHandler: () => void;
+  brushSelectionUpdateHandler: (d: WindowParameters, force: boolean) => void;
  documentCountStats?: DocumentCountStats;
  documentCountStatsSplit?: DocumentCountStats;
  documentCountStatsSplitLabel?: string;
+  isBrushCleared: boolean;
  totalCount: number;
  sampleProbability: number;
-  windowParameters?: WindowParameters;
-  incomingInitialAnalysisStart?: number | WindowParameters;
+  initialAnalysisStart?: number | WindowParameters;
  /** Optional color override for the default bar color for charts */
  barColorOverride?: string;
  /** Optional color override for the highlighted bar color for charts */
@ -42,26 +33,16 @@ export interface DocumentCountContentProps {

 export const DocumentCountContent: FC<DocumentCountContentProps> = ({
  brushSelectionUpdateHandler,
-  clearSelectionHandler,
  documentCountStats,
  documentCountStatsSplit,
  documentCountStatsSplitLabel = '',
+  isBrushCleared,
  totalCount,
  sampleProbability,
-  windowParameters,
-  incomingInitialAnalysisStart,
+  initialAnalysisStart,
  barColorOverride,
  barHighlightColorOverride,
 }) => {
-  const [isBrushCleared, setIsBrushCleared] = useState(true);
-  const [initialAnalysisStart, setInitialAnalysisStart] = useState<
-    number | WindowParameters | undefined
-  >(incomingInitialAnalysisStart);
-
-  useEffect(() => {
-    setIsBrushCleared(windowParameters === undefined);
-  }, [windowParameters]);
-
  const bucketTimestamps = Object.keys(documentCountStats?.buckets ?? {}).map((time) => +time);
  const splitBucketTimestamps = Object.keys(documentCountStatsSplit?.buckets ?? {}).map(
    (time) => +time
@ -95,54 +76,28 @@ export const DocumentCountContent: FC<DocumentCountContentProps> = ({
    }));
  }

-  function brushSelectionUpdate(d: WindowParameters, force: boolean) {
-    if (!isBrushCleared || force) {
-      brushSelectionUpdateHandler(d);
-    }
-    if (force) {
-      setIsBrushCleared(false);
-    }
-  }
-
-  function clearSelection() {
-    setIsBrushCleared(true);
-    setInitialAnalysisStart(undefined);
-    clearSelectionHandler();
-  }
-
  return (
-    <>
-      <EuiFlexGroup gutterSize="xs">
-        <EuiFlexItem>
-          <TotalCountHeader totalCount={totalCount} sampleProbability={sampleProbability} />
-        </EuiFlexItem>
-        {!isBrushCleared && (
-          <EuiFlexItem grow={false}>
-            <EuiButtonEmpty
-              onClick={clearSelection}
-              size="xs"
-              data-test-subj="aiopsClearSelectionBadge"
-            >
-              {clearSelectionLabel}
-            </EuiButtonEmpty>
-          </EuiFlexItem>
-        )}
-      </EuiFlexGroup>
+    <EuiFlexGroup gutterSize="m" direction="column">
+      <EuiFlexItem>
+        <TotalCountHeader totalCount={totalCount} sampleProbability={sampleProbability} />
+      </EuiFlexItem>
      {documentCountStats.interval !== undefined && (
-        <DocumentCountChart
-          brushSelectionUpdateHandler={brushSelectionUpdate}
-          chartPoints={chartPoints}
-          chartPointsSplit={chartPointsSplit}
-          timeRangeEarliest={timeRangeEarliest}
-          timeRangeLatest={timeRangeLatest}
-          interval={documentCountStats.interval}
-          chartPointsSplitLabel={documentCountStatsSplitLabel}
-          isBrushCleared={isBrushCleared}
-          autoAnalysisStart={initialAnalysisStart}
-          barColorOverride={barColorOverride}
-          barHighlightColorOverride={barHighlightColorOverride}
-        />
+        <EuiFlexItem>
+          <DocumentCountChart
+            brushSelectionUpdateHandler={brushSelectionUpdateHandler}
+            chartPoints={chartPoints}
+            chartPointsSplit={chartPointsSplit}
+            timeRangeEarliest={timeRangeEarliest}
+            timeRangeLatest={timeRangeLatest}
+            interval={documentCountStats.interval}
+            chartPointsSplitLabel={documentCountStatsSplitLabel}
+            isBrushCleared={isBrushCleared}
+            autoAnalysisStart={initialAnalysisStart}
+            barColorOverride={barColorOverride}
+            barHighlightColorOverride={barHighlightColorOverride}
+          />
+        </EuiFlexItem>
      )}
-    </>
+    </EuiFlexGroup>
  );
 };
--- a/x-pack/plugins/aiops/public/components/explain_log_rate_spikes/explain_log_rate_spikes_analysis.tsx
+++ b/x-pack/plugins/aiops/public/components/explain_log_rate_spikes/explain_log_rate_spikes_analysis.tsx
@ -32,7 +32,6 @@ import type { SignificantTerm, SignificantTermGroup } from '@kbn/ml-agg-utils';
 import { useAiopsAppContext } from '../../hooks/use_aiops_app_context';
 import { initialState, streamReducer } from '../../../common/api/stream_reducer';
 import type { ApiExplainLogRateSpikes } from '../../../common/api';
-
 import {
  getGroupTableItems,
  SpikeAnalysisTable,
@ -85,6 +84,11 @@ interface ExplainLogRateSpikesAnalysisProps {
  earliest: number;
  /** End timestamp filter */
  latest: number;
+  isBrushCleared: boolean;
+  /** Option to make main histogram sticky */
+  stickyHistogram?: boolean;
+  /** Callback for resetting the analysis */
+  onReset: () => void;
  /** Window parameters for the analysis */
  windowParameters: WindowParameters;
  /** The search query to be applied to the analysis as a filter */
@ -102,7 +106,10 @@ interface ExplainLogRateSpikesAnalysisProps {
 export const ExplainLogRateSpikesAnalysis: FC<ExplainLogRateSpikesAnalysisProps> = ({
  dataView,
  earliest,
+  isBrushCleared,
  latest,
+  stickyHistogram,
+  onReset,
  windowParameters,
  searchQuery,
  sampleProbability,
@ -277,11 +284,13 @@ export const ExplainLogRateSpikesAnalysis: FC<ExplainLogRateSpikesAnalysisProps>
  return (
    <div data-test-subj="aiopsExplainLogRateSpikesAnalysis">
      <ProgressControls
+        isBrushCleared={isBrushCleared}
        progress={data.loaded}
        progressMessage={data.loadingState ?? ''}
        isRunning={isRunning}
        onRefresh={() => startHandler(false)}
        onCancel={cancel}
+        onReset={onReset}
        shouldRerunAnalysis={shouldRerunAnalysis}
      >
        <EuiFlexItem grow={false}>
@ -382,29 +391,43 @@ export const ExplainLogRateSpikesAnalysis: FC<ExplainLogRateSpikesAnalysisProps>
          }
        />
      )}
-      {showSpikeAnalysisTable && groupResults ? (
-        <SpikeAnalysisGroupsTable
-          significantTerms={data.significantTerms}
-          groupTableItems={groupTableItems}
-          loading={isRunning}
-          dataView={dataView}
-          timeRangeMs={timeRangeMs}
-          searchQuery={searchQuery}
-          barColorOverride={barColorOverride}
-          barHighlightColorOverride={barHighlightColorOverride}
-        />
-      ) : null}
-      {showSpikeAnalysisTable && !groupResults ? (
-        <SpikeAnalysisTable
-          significantTerms={data.significantTerms}
-          loading={isRunning}
-          dataView={dataView}
-          timeRangeMs={timeRangeMs}
-          searchQuery={searchQuery}
-          barColorOverride={barColorOverride}
-          barHighlightColorOverride={barHighlightColorOverride}
-        />
-      ) : null}
+      {/* Using inline style as Eui Table overwrites overflow settings  */}
+      <div
+        style={
+          stickyHistogram
+            ? {
+                height: '500px',
+                overflowX: 'hidden',
+                overflowY: 'auto',
+                paddingTop: '20px',
+              }
+            : undefined
+        }
+      >
+        {showSpikeAnalysisTable && groupResults ? (
+          <SpikeAnalysisGroupsTable
+            significantTerms={data.significantTerms}
+            groupTableItems={groupTableItems}
+            loading={isRunning}
+            dataView={dataView}
+            timeRangeMs={timeRangeMs}
+            searchQuery={searchQuery}
+            barColorOverride={barColorOverride}
+            barHighlightColorOverride={barHighlightColorOverride}
+          />
+        ) : null}
+        {showSpikeAnalysisTable && !groupResults ? (
+          <SpikeAnalysisTable
+            significantTerms={data.significantTerms}
+            loading={isRunning}
+            dataView={dataView}
+            timeRangeMs={timeRangeMs}
+            searchQuery={searchQuery}
+            barColorOverride={barColorOverride}
+            barHighlightColorOverride={barHighlightColorOverride}
+          />
+        ) : null}
+      </div>
    </div>
  );
 };
--- a/x-pack/plugins/aiops/public/components/explain_log_rate_spikes/explain_log_rate_spikes_app_state.tsx
+++ b/x-pack/plugins/aiops/public/components/explain_log_rate_spikes/explain_log_rate_spikes_app_state.tsx
@ -38,12 +38,15 @@ export interface ExplainLogRateSpikesAppStateProps {
  savedSearch: SavedSearch | null;
  /** App dependencies */
  appDependencies: AiopsAppDependencies;
+  /** Option to make main histogram sticky */
+  stickyHistogram?: boolean;
 }

 export const ExplainLogRateSpikesAppState: FC<ExplainLogRateSpikesAppStateProps> = ({
  dataView,
  savedSearch,
  appDependencies,
+  stickyHistogram,
 }) => {
  if (!dataView) return null;

@ -80,7 +83,7 @@ export const ExplainLogRateSpikesAppState: FC<ExplainLogRateSpikesAppStateProps>
          <SpikeAnalysisTableRowStateProvider>
            <StorageContextProvider storage={localStorage} storageKeys={AIOPS_STORAGE_KEYS}>
              <DatePickerContextProvider {...datePickerDeps}>
-                <ExplainLogRateSpikesPage />
+                <ExplainLogRateSpikesPage stickyHistogram={stickyHistogram} />
              </DatePickerContextProvider>
            </StorageContextProvider>
          </SpikeAnalysisTableRowStateProvider>
--- a/x-pack/plugins/aiops/public/components/explain_log_rate_spikes/explain_log_rate_spikes_content/explain_log_rate_spikes_content.tsx
+++ b/x-pack/plugins/aiops/public/components/explain_log_rate_spikes/explain_log_rate_spikes_content/explain_log_rate_spikes_content.tsx
@ -5,11 +5,11 @@
 * 2.0.
 */

-import React, { useState, type FC } from 'react';
+import React, { useEffect, useState, type FC } from 'react';
+import { EuiEmptyPrompt, EuiHorizontalRule, EuiPanel } from '@elastic/eui';
 import type { Moment } from 'moment';

 import type * as estypes from '@elastic/elasticsearch/lib/api/typesWithBodyKey';
-import { EuiEmptyPrompt, EuiHorizontalRule, EuiResizableContainer } from '@elastic/eui';

 import { i18n } from '@kbn/i18n';
 import { FormattedMessage } from '@kbn/i18n-react';
@ -52,6 +52,8 @@ export interface ExplainLogRateSpikesContentProps {
  timeRange?: { min: Moment; max: Moment };
  /** Elasticsearch query to pass to analysis endpoint */
  esSearchQuery?: estypes.QueryDslQueryContainer;
+  /** Option to make the main histogram sticky */
+  stickyHistogram?: boolean;
  /** Optional color override for the default bar color for charts */
  barColorOverride?: string;
  /** Optional color override for the highlighted bar color for charts */
@ -63,14 +65,23 @@ export interface ExplainLogRateSpikesContentProps {
 export const ExplainLogRateSpikesContent: FC<ExplainLogRateSpikesContentProps> = ({
  dataView,
  setGlobalState,
-  initialAnalysisStart,
+  initialAnalysisStart: incomingInitialAnalysisStart,
  timeRange,
  esSearchQuery = DEFAULT_SEARCH_QUERY,
+  stickyHistogram,
  barColorOverride,
  barHighlightColorOverride,
  onAnalysisCompleted,
 }) => {
  const [windowParameters, setWindowParameters] = useState<WindowParameters | undefined>();
+  const [initialAnalysisStart, setInitialAnalysisStart] = useState<
+    number | WindowParameters | undefined
+  >(incomingInitialAnalysisStart);
+  const [isBrushCleared, setIsBrushCleared] = useState(true);
+
+  useEffect(() => {
+    setIsBrushCleared(windowParameters === undefined);
+  }, [windowParameters]);

  const {
    currentSelectedSignificantTerm,
@ -95,95 +106,87 @@ export const ExplainLogRateSpikesContent: FC<ExplainLogRateSpikesContentProps> =
  const { sampleProbability, totalCount, documentCountStats, documentCountStatsCompare } =
    documentStats;

+  function brushSelectionUpdate(d: WindowParameters, force: boolean) {
+    if (!isBrushCleared || force) {
+      setWindowParameters(d);
+    }
+    if (force) {
+      setIsBrushCleared(false);
+    }
+  }
+
  function clearSelection() {
    setWindowParameters(undefined);
    setPinnedSignificantTerm(null);
    setPinnedGroup(null);
    setSelectedSignificantTerm(null);
    setSelectedGroup(null);
+    setIsBrushCleared(true);
+    setInitialAnalysisStart(undefined);
  }
-  // Note: Temporarily removed height and disabled sticky histogram until we can fix the scrolling issue in a follow up
+
  return (
-    <EuiResizableContainer direction="vertical">
-      {(EuiResizablePanel, EuiResizableButton) => (
-        <>
-          <EuiResizablePanel
-            mode={'collapsible'}
-            initialSize={40}
-            minSize={'20%'}
-            tabIndex={0}
-            paddingSize="s"
-          >
-            {documentCountStats !== undefined && (
-              <DocumentCountContent
-                brushSelectionUpdateHandler={setWindowParameters}
-                clearSelectionHandler={clearSelection}
-                documentCountStats={documentCountStats}
-                documentCountStatsSplit={documentCountStatsCompare}
-                documentCountStatsSplitLabel={getDocumentCountStatsSplitLabel(
-                  currentSelectedSignificantTerm,
-                  currentSelectedGroup
-                )}
-                totalCount={totalCount}
-                sampleProbability={sampleProbability}
-                windowParameters={windowParameters}
-                incomingInitialAnalysisStart={initialAnalysisStart}
-                barColorOverride={barColorOverride}
-                barHighlightColorOverride={barHighlightColorOverride}
-              />
-            )}
-            <EuiHorizontalRule />
-          </EuiResizablePanel>
-          {/* <EuiResizableButton /> */}
-          <EuiResizablePanel
-            paddingSize="s"
-            mode={'main'}
-            initialSize={60}
-            minSize={'40%'}
-            tabIndex={0}
-          >
-            {earliest !== undefined && latest !== undefined && windowParameters !== undefined && (
-              <ExplainLogRateSpikesAnalysis
-                dataView={dataView}
-                earliest={earliest}
-                latest={latest}
-                windowParameters={windowParameters}
-                searchQuery={esSearchQuery}
-                sampleProbability={sampleProbability}
-                barColorOverride={barColorOverride}
-                barHighlightColorOverride={barHighlightColorOverride}
-                onAnalysisCompleted={onAnalysisCompleted}
-              />
-            )}
-            {windowParameters === undefined && (
-              <EuiEmptyPrompt
-                color="subdued"
-                hasShadow={false}
-                hasBorder={false}
-                css={{ minWidth: '100%' }}
-                title={
-                  <h2>
-                    <FormattedMessage
-                      id="xpack.aiops.explainLogRateSpikesPage.emptyPromptTitle"
-                      defaultMessage="Click a spike in the histogram chart to start the analysis."
-                    />
-                  </h2>
-                }
-                titleSize="xs"
-                body={
-                  <p>
-                    <FormattedMessage
-                      id="xpack.aiops.explainLogRateSpikesPage.emptyPromptBody"
-                      defaultMessage="The explain log rate spikes feature identifies statistically significant field/value combinations that contribute to a log rate spike."
-                    />
-                  </p>
-                }
-                data-test-subj="aiopsNoWindowParametersEmptyPrompt"
-              />
-            )}
-          </EuiResizablePanel>
-        </>
+    <EuiPanel hasBorder={false} hasShadow={false}>
+      {documentCountStats !== undefined && (
+        <DocumentCountContent
+          brushSelectionUpdateHandler={brushSelectionUpdate}
+          documentCountStats={documentCountStats}
+          documentCountStatsSplit={documentCountStatsCompare}
+          documentCountStatsSplitLabel={getDocumentCountStatsSplitLabel(
+            currentSelectedSignificantTerm,
+            currentSelectedGroup
+          )}
+          isBrushCleared={isBrushCleared}
+          totalCount={totalCount}
+          sampleProbability={sampleProbability}
+          initialAnalysisStart={initialAnalysisStart}
+          barColorOverride={barColorOverride}
+          barHighlightColorOverride={barHighlightColorOverride}
+        />
      )}
-    </EuiResizableContainer>
+      <EuiHorizontalRule />
+      {earliest !== undefined && latest !== undefined && windowParameters !== undefined && (
+        <ExplainLogRateSpikesAnalysis
+          dataView={dataView}
+          earliest={earliest}
+          isBrushCleared={isBrushCleared}
+          latest={latest}
+          stickyHistogram={stickyHistogram}
+          onReset={clearSelection}
+          sampleProbability={sampleProbability}
+          searchQuery={esSearchQuery}
+          windowParameters={windowParameters}
+          barColorOverride={barColorOverride}
+          barHighlightColorOverride={barHighlightColorOverride}
+          onAnalysisCompleted={onAnalysisCompleted}
+        />
+      )}
+      {windowParameters === undefined && (
+        <EuiEmptyPrompt
+          color="subdued"
+          hasShadow={false}
+          hasBorder={false}
+          css={{ minWidth: '100%' }}
+          title={
+            <h2>
+              <FormattedMessage
+                id="xpack.aiops.explainLogRateSpikesPage.emptyPromptTitle"
+                defaultMessage="Click a spike in the histogram chart to start the analysis."
+              />
+            </h2>
+          }
+          titleSize="xs"
+          body={
+            <p>
+              <FormattedMessage
+                id="xpack.aiops.explainLogRateSpikesPage.emptyPromptBody"
+                defaultMessage="The explain log rate spikes feature identifies statistically significant field/value combinations that contribute to a log rate spike."
+              />
+            </p>
+          }
+          data-test-subj="aiopsNoWindowParametersEmptyPrompt"
+        />
+      )}
+    </EuiPanel>
  );
 };
--- a/x-pack/plugins/aiops/public/components/explain_log_rate_spikes/explain_log_rate_spikes_content/explain_log_rate_spikes_content_wrapper.tsx
+++ b/x-pack/plugins/aiops/public/components/explain_log_rate_spikes/explain_log_rate_spikes_content/explain_log_rate_spikes_content_wrapper.tsx
@ -27,16 +27,16 @@ import { DataSourceContext } from '../../../hooks/use_data_source';
 import { AIOPS_STORAGE_KEYS } from '../../../types/storage';

 import { SpikeAnalysisTableRowStateProvider } from '../../spike_analysis_table/spike_analysis_table_row_provider';
-
-import type { ExplainLogRateSpikesAnalysisResults } from '../explain_log_rate_spikes_analysis';
-
 import { ExplainLogRateSpikesContent } from './explain_log_rate_spikes_content';
+import type { ExplainLogRateSpikesAnalysisResults } from '../explain_log_rate_spikes_analysis';

 const localStorage = new Storage(window.localStorage);

 export interface ExplainLogRateSpikesContentWrapperProps {
  /** The data view to analyze. */
  dataView: DataView;
+  /** Option to make main histogram sticky */
+  stickyHistogram?: boolean;
  /** App dependencies */
  appDependencies: AiopsAppDependencies;
  /** On global timefilter update */
@ -61,6 +61,7 @@ export const ExplainLogRateSpikesContentWrapper: FC<ExplainLogRateSpikesContentW
  initialAnalysisStart,
  timeRange,
  esSearchQuery,
+  stickyHistogram,
  barColorOverride,
  barHighlightColorOverride,
  onAnalysisCompleted,
@ -106,6 +107,7 @@ export const ExplainLogRateSpikesContentWrapper: FC<ExplainLogRateSpikesContentW
                  initialAnalysisStart={initialAnalysisStart}
                  timeRange={timeRange}
                  esSearchQuery={esSearchQuery}
+                  stickyHistogram={stickyHistogram}
                  barColorOverride={barColorOverride}
                  barHighlightColorOverride={barHighlightColorOverride}
                  onAnalysisCompleted={onAnalysisCompleted}
--- a/x-pack/plugins/aiops/public/components/explain_log_rate_spikes/explain_log_rate_spikes_page.tsx
+++ b/x-pack/plugins/aiops/public/components/explain_log_rate_spikes/explain_log_rate_spikes_page.tsx
@ -28,8 +28,11 @@ import { useSpikeAnalysisTableRowContext } from '../spike_analysis_table/spike_a
 import { PageHeader } from '../page_header';

 import { ExplainLogRateSpikesContent } from './explain_log_rate_spikes_content/explain_log_rate_spikes_content';
+interface Props {
+  stickyHistogram?: boolean;
+}

-export const ExplainLogRateSpikesPage: FC = () => {
+export const ExplainLogRateSpikesPage: FC<Props> = ({ stickyHistogram }) => {
  const { data: dataService } = useAiopsAppContext();
  const { dataView, savedSearch } = useDataSource();

@ -147,6 +150,7 @@ export const ExplainLogRateSpikesPage: FC = () => {
            dataView={dataView}
            setGlobalState={setGlobalState}
            esSearchQuery={searchQuery}
+            stickyHistogram={stickyHistogram}
          />
        </EuiFlexGroup>
      </EuiPageSection>
--- a/x-pack/plugins/ml/public/application/aiops/explain_log_rate_spikes.tsx
+++ b/x-pack/plugins/ml/public/application/aiops/explain_log_rate_spikes.tsx
@ -39,6 +39,8 @@ export const ExplainLogRateSpikesPage: FC = () => {
      </MlPageHeader>
      {dataView && (
        <ExplainLogRateSpikes
+          // Default to false for now, until page restructure work to enable smooth sticky histogram is done
+          stickyHistogram={false}
          dataView={dataView}
          savedSearch={savedSearch}
          appDependencies={pick(services, [
--- a/x-pack/plugins/translations/translations/fr-FR.json
+++ b/x-pack/plugins/translations/translations/fr-FR.json
@ -7156,7 +7156,6 @@
    "xpack.aiops.dataGrid.field.documentCountChartSplit.seriesLabel": "Autre compte du document",
    "xpack.aiops.documentCountChart.baselineBadgeLabel": "Référence de base",
    "xpack.aiops.documentCountChart.deviationBadgeLabel": "général",
-    "xpack.aiops.documentCountContent.clearSelectionAriaLabel": "Effacer la sélection",
    "xpack.aiops.explainLogRateSpikes.loadingState.doneMessage": "Terminé.",
    "xpack.aiops.explainLogRateSpikes.loadingState.groupingResults": "Transformation de paires champ/valeur significatives en groupes.",
    "xpack.aiops.explainLogRateSpikes.loadingState.loadingHistogramData": "Chargement des données d’histogramme.",
--- a/x-pack/plugins/translations/translations/ja-JP.json
+++ b/x-pack/plugins/translations/translations/ja-JP.json
@ -7157,7 +7157,6 @@
    "xpack.aiops.dataGrid.field.documentCountChartSplit.seriesLabel": "他のドキュメントカウント",
    "xpack.aiops.documentCountChart.baselineBadgeLabel": "ベースライン",
    "xpack.aiops.documentCountChart.deviationBadgeLabel": "偏差",
-    "xpack.aiops.documentCountContent.clearSelectionAriaLabel": "選択した項目をクリア",
    "xpack.aiops.explainLogRateSpikes.loadingState.doneMessage": "完了しました。",
    "xpack.aiops.explainLogRateSpikes.loadingState.groupingResults": "重要なフィールドと値のペアをグループに変換しています。",
    "xpack.aiops.explainLogRateSpikes.loadingState.loadingHistogramData": "ヒストグラムデータを読み込んでいます。",
--- a/x-pack/plugins/translations/translations/zh-CN.json
+++ b/x-pack/plugins/translations/translations/zh-CN.json
@ -7156,7 +7156,6 @@
    "xpack.aiops.dataGrid.field.documentCountChartSplit.seriesLabel": "其他文档计数",
    "xpack.aiops.documentCountChart.baselineBadgeLabel": "基线",
    "xpack.aiops.documentCountChart.deviationBadgeLabel": "偏差",
-    "xpack.aiops.documentCountContent.clearSelectionAriaLabel": "清除所选内容",
    "xpack.aiops.explainLogRateSpikes.loadingState.doneMessage": "完成。",
    "xpack.aiops.explainLogRateSpikes.loadingState.groupingResults": "正在将重要的字段/值对转换到组中。",
    "xpack.aiops.explainLogRateSpikes.loadingState.loadingHistogramData": "正在加载直方图数据。",