Add UX support for HC detector

package.json

@@ -51,8 +51,10 @@
     "@types/node": "^12.6.8",
     "@types/react": "^16.8.23",
     "@types/react-dom": "^16.8.4",
+    "@types/react-plotly.js": "^2.2.4",
     "@types/react-redux": "^7.1.1",
     "@types/react-router-dom": "^4.3.4",
+    "@types/react-vis": "^1.11.3",
     "@types/redux-mock-store": "^1.0.1",
     "babel-eslint": "^9.0.0",
     "babel-jest": "^24.8.0",
@@ -82,8 +84,11 @@
     "eslint-plugin-cypress": "^2.11.1",
     "formik": "^1.5.8",
     "lodash": "^4.17.19",
+    "plotly.js": "^1.55.2",
     "query-string": "^6.8.2",
+    "react-plotly.js": "^2.4.0",
     "react-redux": "^7.1.0",
+    "react-vis": "^1.11.7",
     "reselect": "^4.0.0"
   }
 }

public/models/interfaces.ts

@@ -127,6 +127,11 @@ export type DetectorListItem = {
   enabledTime?: number;
 };
 
+export type EntityData = {
+  name: string;
+  value: string;
+};
+
 export type AnomalyData = {
   anomalyGrade: number;
   anomalyScore?: number;
@@ -135,6 +140,8 @@ export type AnomalyData = {
   endTime: number;
   startTime: number;
   plotTime?: number;
+  entity?: EntityData[];
+  features?: { [key: string]: FeatureAggregationData };
 };
 
 export type FeatureAggregationData = {

public/pages/AnomalyCharts/components/FeatureChart/FeatureChart.tsx

@@ -40,9 +40,11 @@ import { darkModeEnabled } from '../../../../utils/kibanaUtils';
 import {
   prepareDataForChart,
   getFeatureMissingDataAnnotations,
+  filterWithDateRange,
 } from '../../../utils/anomalyResultUtils';
 import { CodeModal } from '../../../DetectorConfig/components/CodeModal/CodeModal';
 import { CHART_FIELDS, FEATURE_CHART_THEME } from '../../utils/constants';
+import { isEmpty } from 'lodash';
 
 interface FeatureChartProps {
   feature: FeatureAttributes;
@@ -61,6 +63,7 @@ interface FeatureChartProps {
   showFeatureMissingDataPointAnnotation?: boolean;
   detectorEnabledTime?: number;
   rawFeatureData: FeatureAggregationData[];
+  titlePrefix?: string;
 }
 const getDisabledChartBackground = () =>
   darkModeEnabled() ? '#25262E' : '#F0F0F0';
@@ -137,12 +140,23 @@ export const FeatureChart = (props: FeatureChartProps) => {
     return undefined;
   };
 
+  const getFeatureAnnotations = () => {
+    if (isEmpty(props.annotations)) {
+      return [];
+    }
+    return filterWithDateRange(
+      props.annotations,
+      props.dateRange,
+      'coordinates.x0'
+    );
+  };
   return (
     <ContentPanel
       title={
-        props.feature.featureEnabled
+        (props.titlePrefix ? props.titlePrefix + ' - ' : '') +
+        (props.feature.featureEnabled
           ? props.feature.featureName
-          : `${props.feature.featureName} (disabled)`
+          : `${props.feature.featureName} (disabled)`)
       }
       bodyStyles={
         !props.feature.featureEnabled
@@ -172,7 +186,7 @@ export const FeatureChart = (props: FeatureChartProps) => {
           />
           {props.feature.featureEnabled ? (
             <RectAnnotation
-              dataValues={props.annotations || []}
+              dataValues={getFeatureAnnotations()}
               id="annotations"
               style={{
                 stroke: darkModeEnabled() ? 'red' : '#D5DBDB',