Fix chart range bug of non-HC anomaly and feature charts (#122)

Signed-off-by: Tyler Ohlsen <ohltyler@amazon.com>

Author: ohltyler

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

@@ -90,9 +90,8 @@ export const FeatureChart = (props: FeatureChartProps) => {
   const getDisabledChartBackground = () =>
     darkModeEnabled() ? '#25262E' : '#F0F0F0';
 
-  const [showCustomExpression, setShowCustomExpression] = useState<boolean>(
-    false
-  );
+  const [showCustomExpression, setShowCustomExpression] =
+    useState<boolean>(false);
   const timeFormatter = niceTimeFormatter([
     props.dateRange.startDate,
     props.dateRange.endDate,
@@ -216,6 +215,10 @@ export const FeatureChart = (props: FeatureChartProps) => {
             showLegendDisplayValue={false}
             legendPosition={Position.Right}
             theme={FEATURE_CHART_THEME}
+            xDomain={{
+              min: props.dateRange.startDate,
+              max: props.dateRange.endDate,
+            }}
           />
           {props.feature.featureEnabled ? (
             <RectAnnotation

public/pages/AnomalyCharts/containers/AnomalyDetailsChart.tsx

@@ -304,11 +304,18 @@ export const AnomalyDetailsChart = React.memo(
     }, [props.anomalies, zoomRange, aggregatedAnomalies, selectedAggId]);
 
     const handleZoomRangeChange = (start: number, end: number) => {
-      setZoomRange({
-        startDate: start,
-        endDate: end,
-      });
-      props.onZoomRangeChange(start, end);
+      // In the HC scenario, we only want to change the local zoom range.
+      // We don't want to change the overall date range, since that would auto-de-select
+      // any selected heatmap cell, and re-fetch results based on the new date range
+      if (props.isHCDetector) {
+        setZoomRange({
+          startDate: start,
+          endDate: end,
+        });
+        props.onZoomRangeChange(start, end);
+      } else {
+        props.onDateRangeChange(start, end);
+      }
     };
 
     useEffect(() => {
@@ -505,14 +512,22 @@ export const AnomalyDetailsChart = React.memo(
                       const end = get(
                         brushArea,
                         'x.1',
-                        DEFAULT_DATE_PICKER_RANGE.start
+                        DEFAULT_DATE_PICKER_RANGE.end
                       );
                       handleZoomRangeChange(start, end);
                       if (props.onDatePickerRangeChange) {
                         props.onDatePickerRangeChange(start, end);
                       }
                     }}
                     theme={ANOMALY_CHART_THEME}
+                    xDomain={
+                      showAggregateResults
+                        ? undefined
+                        : {
+                            min: zoomRange.startDate,
+                            max: zoomRange.endDate,
+                          }
+                    }
                   />
                   {(props.isHCDetector && !props.selectedHeatmapCell) ||
                   props.isHistorical ? null : (