[ML] Fix missing selected-interval styling for Explorer anomaly charts and mismatched scheduled markers styling (#100272) (#100479)

* [ML] Fix missing selected-interval sass

* [ML] Only show interval box in explorer page and not in dashboard

* [ML] Remove console

* [ML] Move showSelectedInterval up

* [ML] Update snapshot

* [ML] Update styling of scheduled events to match and to be visible

Co-authored-by: Kibana Machine <42973632+kibanamachine@users.noreply.github.com>

Co-authored-by: Kibana Machine <42973632+kibanamachine@users.noreply.github.com>

Author: qn895

x-pack/plugins/ml/public/application/explorer/explorer_charts/_explorer_chart.scss

@@ -12,10 +12,17 @@
         opacity: 1;
       }
 
+      rect.selected-interval {
+        fill: rgba(200, 200, 200, .1);
+        stroke: $euiColorDarkShade;
+        stroke-width: $euiSizeXS / 2;
+        stroke-opacity: .8;
+      }
+
       rect.scheduled-event-marker {
         stroke-width: 1px;
-        stroke: $euiColorLightShade;
-        fill: $euiColorLightestShade;
+        stroke: $euiColorDarkShade;
+        fill: $euiColorLightShade;
         pointer-events: none;
       }
     }

x-pack/plugins/ml/public/application/explorer/explorer_charts/explorer_anomalies_container.tsx

@@ -31,6 +31,7 @@ interface ExplorerAnomaliesContainerProps {
   timeBuckets: TimeBuckets;
   timefilter: TimefilterContract;
   onSelectEntity: (fieldName: string, fieldValue: string, operation: EntityFieldOperation) => void;
+  showSelectedInterval?: boolean;
 }
 
 const tooManyBucketsCalloutMsg = i18n.translate(
@@ -51,6 +52,7 @@ export const ExplorerAnomaliesContainer: FC<ExplorerAnomaliesContainerProps> = (
   timeBuckets,
   timefilter,
   onSelectEntity,
+  showSelectedInterval,
 }) => {
   return (
     <>
@@ -96,6 +98,7 @@ export const ExplorerAnomaliesContainer: FC<ExplorerAnomaliesContainerProps> = (
               timefilter,
               onSelectEntity,
               tooManyBucketsCalloutMsg,
+              showSelectedInterval,
             }}
           />
         )}

x-pack/plugins/ml/public/application/explorer/explorer_charts/explorer_chart_distribution.js

@@ -62,7 +62,7 @@ export class ExplorerChartDistribution extends React.Component {
   }
 
   renderChart() {
-    const { tooManyBuckets, tooltipService, timeBuckets } = this.props;
+    const { tooManyBuckets, tooltipService, timeBuckets, showSelectedInterval } = this.props;
 
     const element = this.rootNode;
     const config = this.props.seriesConfig;
@@ -357,6 +357,7 @@ export class ExplorerChartDistribution extends React.Component {
     }
 
     function drawRareChartHighlightedSpan() {
+      if (showSelectedInterval === false) return;
       // Draws a rectangle which highlights the time span that has been selected for view.
       // Note depending on the overall time range and the bucket span, the selected time
       // span may be longer than the range actually being plotted.

x-pack/plugins/ml/public/application/explorer/explorer_charts/explorer_chart_single_metric.js

@@ -61,7 +61,7 @@ export class ExplorerChartSingleMetric extends React.Component {
   }
 
   renderChart() {
-    const { tooManyBuckets, tooltipService, timeBuckets } = this.props;
+    const { tooManyBuckets, tooltipService, timeBuckets, showSelectedInterval } = this.props;
 
     const element = this.rootNode;
     const config = this.props.seriesConfig;
@@ -249,6 +249,8 @@ export class ExplorerChartSingleMetric extends React.Component {
     }
 
     function drawLineChartHighlightedSpan() {
+      if (showSelectedInterval === false) return;
+
       // Draws a rectangle which highlights the time span that has been selected for view.
       // Note depending on the overall time range and the bucket span, the selected time
       // span may be longer than the range actually being plotted.

x-pack/plugins/ml/public/application/explorer/explorer_charts/explorer_charts_container.js

@@ -72,6 +72,7 @@ function ExplorerChartContainer({
   onSelectEntity,
   recentlyAccessed,
   tooManyBucketsCalloutMsg,
+  showSelectedInterval,
 }) {
   const [explorerSeriesLink, setExplorerSeriesLink] = useState('');
 
@@ -199,6 +200,7 @@ function ExplorerChartContainer({
                   seriesConfig={series}
                   severity={severity}
                   tooltipService={tooltipService}
+                  showSelectedInterval={showSelectedInterval}
                 />
               )}
             </MlTooltipComponent>
@@ -214,6 +216,7 @@ function ExplorerChartContainer({
                   seriesConfig={series}
                   severity={severity}
                   tooltipService={tooltipService}
+                  showSelectedInterval={showSelectedInterval}
                 />
               )}
             </MlTooltipComponent>
@@ -237,6 +240,7 @@ export const ExplorerChartsContainerUI = ({
   timefilter,
   onSelectEntity,
   tooManyBucketsCalloutMsg,
+  showSelectedInterval,
 }) => {
   const {
     services: {
@@ -296,6 +300,7 @@ export const ExplorerChartsContainerUI = ({
                 onSelectEntity={onSelectEntity}
                 recentlyAccessed={recentlyAccessed}
                 tooManyBucketsCalloutMsg={tooManyBucketsCalloutMsg}
+                showSelectedInterval={showSelectedInterval}
               />
             </EuiFlexItem>
           ))}

x-pack/plugins/ml/public/application/timeseriesexplorer/_timeseriesexplorer.scss

@@ -133,7 +133,7 @@
 
     rect.scheduled-event-marker {
       stroke-width: 1px;
-      stroke: $euiColorMediumShade;
+      stroke: $euiColorDarkShade;
       fill: $euiColorLightShade;
       pointer-events: none;
     }

x-pack/plugins/ml/public/embeddables/anomaly_charts/__snapshots__/embeddable_anomaly_charts_container.test.tsx.snap

@@ -181,6 +181,7 @@ export const EmbeddableAnomalyChartsContainer: FC<EmbeddableAnomalyChartsContain
               timeBuckets={timeBuckets}
               timefilter={timefilter}
               onSelectEntity={addEntityFieldFilter}
+              showSelectedInterval={false}
             />
           )}
         </div>