NewPanelEditor: Making angular panels reuse data and render on edit mode enter (#22229)

* First stab at angular panels load in new edit

* Things are working

public/app/features/dashboard/dashgrid/PanelChromeAngular.tsx

@@ -110,10 +110,20 @@ export class PanelChromeAngular extends PureComponent<Props, State> {
   }
 
   componentDidUpdate(prevProps: Props, prevState: State) {
-    if (prevProps.plugin !== this.props.plugin) {
+    const { plugin, height, width, panel } = this.props;
+
+    if (prevProps.plugin !== plugin) {
       this.cleanUpAngularPanel();
       this.loadAngularPanel();
     }
+
+    if (prevProps.width !== width || prevProps.height !== height) {
+      if (this.scopeProps) {
+        this.scopeProps.size.height = height;
+        this.scopeProps.size.width = width;
+        panel.events.emit(PanelEvents.panelSizeChanged);
+      }
+    }
   }
 
   loadAngularPanel() {
@@ -121,8 +131,6 @@ export class PanelChromeAngular extends PureComponent<Props, State> {
 
     // if we have no element or already have loaded the panel return
     if (!this.element || panel.angularPanel) {
-      this.scopeProps.size.height = height;
-      this.scopeProps.size.width = width;
       return;
     }
 

public/app/features/dashboard/dashgrid/PanelResizer.tsx

@@ -23,16 +23,12 @@ export class PanelResizer extends PureComponent<Props, State> {
 
   constructor(props: Props) {
     super(props);
-    const { panel } = this.props;
 
     this.state = {
       editorHeight: this.initialHeight,
     };
 
     this.throttledChangeHeight = throttle(this.changeHeight, 20, { trailing: true });
-    this.throttledResizeDone = throttle(() => {
-      panel.resizeDone();
-    }, 50);
   }
 
   get largestHeight() {
@@ -57,7 +53,6 @@ export class PanelResizer extends PureComponent<Props, State> {
   onDrag: DraggableEventHandler = (evt, data) => {
     const newHeight = this.state.editorHeight + data.y;
     this.throttledChangeHeight(newHeight);
-    this.throttledResizeDone();
   };
 
   render() {

public/app/features/panel/metrics_panel_ctrl.ts

@@ -48,6 +48,12 @@ class MetricsPanelCtrl extends PanelCtrl {
 
     this.events.on(PanelEvents.refresh, this.onMetricsPanelRefresh.bind(this));
     this.events.on(PanelEvents.panelTeardown, this.onPanelTearDown.bind(this));
+    this.events.on(PanelEvents.componentDidMount, this.onMetricsPanelMounted.bind(this));
+  }
+
+  private onMetricsPanelMounted() {
+    const queryRunner = this.panel.getQueryRunner();
+    this.querySubscription = queryRunner.getData().subscribe(this.panelDataObserver);
   }
 
   private onPanelTearDown() {
@@ -174,10 +180,6 @@ class MetricsPanelCtrl extends PanelCtrl {
     const panel = this.panel as PanelModel;
     const queryRunner = panel.getQueryRunner();
 
-    if (!this.querySubscription) {
-      this.querySubscription = queryRunner.getData().subscribe(this.panelDataObserver);
-    }
-
     return queryRunner.run({
       datasource: panel.datasource,
       queries: panel.targets,

public/app/plugins/panel/graph/module.ts

@@ -164,6 +164,7 @@ class GraphCtrl extends MetricsPanelCtrl {
     this.events.on(PanelEvents.initPanelActions, this.onInitPanelActions.bind(this));
 
     this.onDataLinksChange = this.onDataLinksChange.bind(this);
+    this.annotationsPromise = Promise.resolve({ annotations: [] });
   }
 
   onInitEditMode() {