fix: remove double rendering

.playground/playground.tsx

@@ -17,7 +17,7 @@
  * under the License. */
 
 import React from 'react';
-import { Example } from '../stories/treemap/6_custom_style';
+import { Example } from '../stories/annotations/lines/3_x_time';
 
 export class Playground extends React.Component {
   render() {

src/chart_types/partition_chart/layout/viewmodel/viewmodel.ts

@@ -69,9 +69,9 @@ function topGrooveAccessor(topGroovePx: Pixels) {
 }
 
 export const VerticalAlignments = Object.freeze({
-  top: 'top' as 'top',
-  middle: 'middle' as 'middle',
-  bottom: 'bottom' as 'bottom',
+  top: 'top' as const,
+  middle: 'middle' as const,
+  bottom: 'bottom' as const,
 });
 
 // we might add more in the future; also, the intent is to still be of CanvasTextBaseline
@@ -207,7 +207,6 @@ export function shapeViewModel(
     partitionLayout,
     sectorLineWidth,
   } = config;
-
   const innerWidth = width * (1 - Math.min(1, margin.left + margin.right));
   const innerHeight = height * (1 - Math.min(1, margin.top + margin.bottom));
 

src/chart_types/partition_chart/state/chart_state.tsx

@@ -47,7 +47,7 @@ export class PartitionState implements InternalChartState {
   }
   chartType = ChartTypes.Partition;
   isInitialized(globalState: GlobalChartState) {
-    return globalState.specsInitialized && getPieSpec(globalState) !== null;
+    return getPieSpec(globalState) !== null;
   }
   isBrushAvailable() {
     return false;

src/chart_types/xy_chart/renderer/canvas/xy_chart.tsx

@@ -137,19 +137,12 @@ class XYChartComponent extends React.Component<XYChartProps> {
       isChartEmpty,
       chartContainerDimensions: { width, height },
     } = this.props;
-    if (!initialized || width === 0 || height === 0) {
+
+    if (!initialized || isChartEmpty) {
       this.ctx = null;
       return null;
     }
 
-    if (isChartEmpty) {
-      this.ctx = null;
-      return (
-        <div className="echReactiveChart_unavailable">
-          <p>No data to display</p>
-        </div>
-      );
-    }
     return (
       <canvas
         ref={forwardStageRef}
@@ -192,7 +185,7 @@ const DEFAULT_PROPS: ReactiveChartStateProps = {
     left: 0,
     top: 0,
   },
-  chartRotation: 0 as 0,
+  chartRotation: 0 as const,
   chartDimensions: {
     width: 0,
     height: 0,

src/chart_types/xy_chart/renderer/dom/annotations/annotations.tsx

@@ -55,6 +55,32 @@ interface AnnotationsOwnProps {
 
 type AnnotationsProps = AnnotationsDispatchProps & AnnotationsStateProps & AnnotationsOwnProps;
 
+function renderAnnotationLineMarkers(
+  chartDimensions: Dimensions,
+  annotationLines: AnnotationLineProps[],
+  id: AnnotationId,
+) {
+  return annotationLines.reduce<JSX.Element[]>((markers, { marker }: AnnotationLineProps, index: number) => {
+    if (!marker) {
+      return markers;
+    }
+
+    const { icon, color, position } = marker;
+    const style = {
+      color,
+      top: chartDimensions.top + position.top,
+      left: chartDimensions.left + position.left,
+    };
+
+    markers.push(
+      <div className="echAnnotation" style={{ ...style }} key={`annotation-${id}-${index}`}>
+        {icon}
+      </div>,
+    );
+
+    return markers;
+  }, []);
+}
 const AnnotationsComponent = ({
   tooltipState,
   isChartEmpty,
@@ -65,31 +91,6 @@ const AnnotationsComponent = ({
   chartId,
   onPointerMove,
 }: AnnotationsProps) => {
-  const renderAnnotationLineMarkers = useCallback(
-    (annotationLines: AnnotationLineProps[], id: AnnotationId) =>
-      annotationLines.reduce<JSX.Element[]>((markers, { marker }: AnnotationLineProps, index: number) => {
-        if (!marker) {
-          return markers;
-        }
-
-        const { icon, color, position } = marker;
-        const style = {
-          color,
-          top: chartDimensions.top + position.top,
-          left: chartDimensions.left + position.left,
-        };
-
-        markers.push(
-          <div className="echAnnotation" style={{ ...style }} key={`annotation-${id}-${index}`}>
-            {icon}
-          </div>,
-        );
-
-        return markers;
-      }, []),
-    [], // eslint-disable-line react-hooks/exhaustive-deps
-  );
-
   const renderAnnotationMarkers = useCallback((): JSX.Element[] => {
     const markers: JSX.Element[] = [];
 
@@ -101,13 +102,13 @@ const AnnotationsComponent = ({
 
       if (isLineAnnotation(annotationSpec)) {
         const annotationLines = dimensions as AnnotationLineProps[];
-        const lineMarkers = renderAnnotationLineMarkers(annotationLines, id);
+        const lineMarkers = renderAnnotationLineMarkers(chartDimensions, annotationLines, id);
         markers.push(...lineMarkers);
       }
     });
 
     return markers;
-  }, [annotationDimensions, annotationSpecs, renderAnnotationLineMarkers]);
+  }, [chartDimensions, annotationDimensions, annotationSpecs]);
 
   const onScroll = useCallback(() => {
     onPointerMove({ x: -1, y: -1 }, new Date().getTime());

src/chart_types/xy_chart/state/chart_state.tsx

@@ -65,7 +65,7 @@ export class XYAxisChartState implements InternalChartState {
     this.legendId = htmlIdGenerator()('legend');
   }
   isInitialized(globalState: GlobalChartState) {
-    return globalState.specsInitialized && getSeriesSpecsSelector(globalState).length > 0;
+    return getSeriesSpecsSelector(globalState).length > 0;
   }
 
   isBrushAvailable(globalState: GlobalChartState) {

src/components/chart_container.tsx

@@ -137,14 +137,19 @@ class ChartContainerComponent extends React.Component<ReactiveChartProps> {
   };
 
   render() {
-    const { initialized } = this.props;
+    const { initialized, isChartEmpty } = this.props;
     if (!initialized) {
+      return null;
+    }
+
+    if (isChartEmpty) {
       return (
         <div className="echReactiveChart_unavailable">
           <p>No data to display</p>
         </div>
       );
     }
+
     const { pointerCursor, internalChartRenderer, getChartContainerRef, forwardStageRef } = this.props;
     return (
       <div

src/components/chart_resizer.tsx

@@ -25,6 +25,7 @@ import { Dispatch, bindActionCreators } from 'redux';
 import { connect } from 'react-redux';
 import { getSettingsSpecSelector } from '../state/selectors/get_settings_specs';
 import { GlobalChartState } from '../state/chart_state';
+import { isDefined } from '../chart_types/xy_chart/state/utils';
 
 interface ResizerStateProps {
   resizeDebounce: number;
@@ -36,6 +37,8 @@ interface ResizerDispatchProps {
 
 type ResizerProps = ResizerStateProps & ResizerDispatchProps;
 
+const DEFAULT_RESIZE_DEBOUNCE = 200;
+
 class Resizer extends React.Component<ResizerProps> {
   private initialResizeComplete = false;
   private containerRef: RefObject<HTMLDivElement>;
@@ -53,10 +56,8 @@ class Resizer extends React.Component<ResizerProps> {
   componentDidMount() {
     this.onResizeDebounced = debounce(this.onResize, this.props.resizeDebounce);
     if (this.containerRef.current) {
-      const { clientWidth, clientHeight } = this.containerRef.current;
-      this.props.updateParentDimensions({ width: clientWidth, height: clientHeight, top: 0, left: 0 });
+      this.ro.observe(this.containerRef.current as Element);
     }
-    this.ro.observe(this.containerRef.current as Element);
   }
 
   componentWillUnmount() {
@@ -102,11 +103,10 @@ const mapDispatchToProps = (dispatch: Dispatch): ResizerDispatchProps =>
   );
 
 const mapStateToProps = (state: GlobalChartState): ResizerStateProps => {
-  const settings = getSettingsSpecSelector(state);
-  const resizeDebounce =
-    settings.resizeDebounce === undefined || settings.resizeDebounce === null ? 200 : settings.resizeDebounce;
+  const { resizeDebounce } = getSettingsSpecSelector(state);
   return {
-    resizeDebounce,
+    resizeDebounce:
+      !isDefined(resizeDebounce) || Number.isNaN(resizeDebounce) ? DEFAULT_RESIZE_DEBOUNCE : resizeDebounce,
   };
 };
 

src/state/selectors/get_internal_is_intialized.ts

@@ -20,9 +20,16 @@ import { GlobalChartState } from '../chart_state';
 
 /** @internal */
 export const getInternalIsInitializedSelector = (state: GlobalChartState): boolean => {
+  const {
+    parentDimensions: { width, height },
+    specsInitialized,
+  } = state;
+
+  if (width <= 0 || height <= 0 || !specsInitialized) {
+    return false;
+  }
   if (state.internalChartState) {
     return state.internalChartState.isInitialized(state);
-  } else {
-    return false;
   }
+  return false;
 };