[ML] Plot zero scores on the Overall anomaly swim lane (#136951)

* replace inline styles

* fix overflow props

* map 0 to null

* update view by job id

* fix css string

* set max width for the severity control

* replace inline styles with css

* fix css

x-pack/plugins/ml/public/application/components/severity_control/severity_control.tsx

@@ -68,7 +68,7 @@ export const SeverityControl: FC<SeveritySelectorProps> = React.memo(({ value, o
 
   return (
     <EuiFormRow fullWidth>
-      <EuiFlexGroup>
+      <EuiFlexGroup gutterSize={'s'}>
         <EuiFlexItem grow={false}>
           <EuiFieldNumber
             id="severityControl"

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

@@ -215,7 +215,10 @@ export const AnomalyTimeline: FC<AnomalyTimelineProps> = React.memo(
             </EuiFlexItem>
 
             {menuItems.length > 0 && (
-              <EuiFlexItem grow={false} style={{ marginLeft: 'auto', alignSelf: 'baseline' }}>
+              <EuiFlexItem
+                grow={false}
+                css={{ 'margin-left': 'auto !important', 'align-self': 'baseline' }}
+              >
                 <EuiPopover
                   button={
                     <EuiButtonIcon
@@ -262,7 +265,7 @@ export const AnomalyTimeline: FC<AnomalyTimelineProps> = React.memo(
               </>
             )}
 
-            <EuiFlexItem grow={true}>
+            <EuiFlexItem grow={true} css={{ 'max-width': '500px' }}>
               <SeverityControl
                 value={severityUpdate ?? 0}
                 onChange={useCallback((update) => {
@@ -298,7 +301,7 @@ export const AnomalyTimeline: FC<AnomalyTimelineProps> = React.memo(
                 )}
               </EuiText>
             </EuiFlexItem>
-            <EuiFlexItem grow={false} style={{ visibility: selectedCells ? 'visible' : 'hidden' }}>
+            <EuiFlexItem grow={false} css={{ visibility: selectedCells ? 'visible' : 'hidden' }}>
               <EuiButtonEmpty
                 size="xs"
                 onClick={setSelectedCells.bind(anomalyTimelineStateService, undefined)}

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

@@ -35,6 +35,7 @@ import moment from 'moment';
 
 import { i18n } from '@kbn/i18n';
 import { ChartsPluginStart, useActiveCursor } from '@kbn/charts-plugin/public';
+import { css } from '@emotion/react';
 import { SwimLanePagination } from './swimlane_pagination';
 import { AppStateSelectedCells, OverallSwimlaneData, ViewBySwimLaneData } from './explorer_utils';
 import { ANOMALY_THRESHOLD, SEVERITY_COLORS } from '../../../common';
@@ -215,7 +216,7 @@ export const SwimlaneContainer: FC<SwimlaneProps> = ({
 
     return swimlaneData.points
       .map((v) => {
-        const formatted = { ...v, time: v.time * 1000 };
+        const formatted = { ...v, time: v.time * 1000, value: v.value === 0 ? null : v.value };
         if (showFilterContext) {
           formatted.laneLabel = i18n.translate('xpack.ml.explorer.overallSwimlaneUnfilteredLabel', {
             defaultMessage: '{label} (unfiltered)',
@@ -230,8 +231,7 @@ export const SwimlaneContainer: FC<SwimlaneProps> = ({
         aIndex = aIndex > -1 ? aIndex : sortedLaneValues.length;
         bIndex = bIndex > -1 ? bIndex : sortedLaneValues.length;
         return aIndex - bIndex;
-      })
-      .filter((v) => v.value > 0);
+      });
   }, [swimlaneData?.points, filterActive, swimlaneType, swimlaneData?.laneLabels]);
 
   const showSwimlane = swimlaneData?.laneLabels?.length > 0 && swimLanePoints.length > 0;
@@ -406,22 +406,29 @@ export const SwimlaneContainer: FC<SwimlaneProps> = ({
         <EuiFlexGroup
           gutterSize={'none'}
           direction={'column'}
-          style={{ width: '100%', height: '100%', overflow: 'hidden' }}
           ref={resizeRef}
           data-test-subj={dataTestSubj}
+          css={{
+            width: '100%',
+            height: '100%',
+            overflow: 'hidden',
+          }}
         >
           <EuiFlexItem
-            style={{
+            css={{
               width: '100%',
-              overflowY: 'auto',
-              overflowX: 'hidden',
+              'overflow-y': 'auto',
+              'overflow-x': 'hidden',
             }}
             grow={false}
           >
             <>
               <div>
                 <div
-                  style={{ height: `${containerHeight}px`, position: 'relative' }}
+                  style={{ height: `${containerHeight}px` }}
+                  css={css`
+                    position: relative;
+                  `}
                   hidden={noSwimLaneData}
                 >
                   {showSwimlane && !isLoading && (

x-pack/plugins/ml/public/application/services/results_service/results_service.js

@@ -61,7 +61,7 @@ export function resultsServiceProvider(mlApiServices) {
           {
             range: {
               anomaly_score: {
-                gt: swimLaneSeverity,
+                gte: swimLaneSeverity,
               },
             },
           },