From 7c72f8e0287f5884f6a1aff0ecc154f485b137fe Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Torkel=20=C3=96degaard?= <torkel@grafana.com>
Date: Fri, 16 Nov 2018 10:44:39 +0100
Subject: [PATCH] panel options now load even when changing type

---
 .../dashboard/dashgrid/VisualizationTab.tsx   | 66 +++++++++++--------
 1 file changed, 40 insertions(+), 26 deletions(-)

diff --git a/public/app/features/dashboard/dashgrid/VisualizationTab.tsx b/public/app/features/dashboard/dashgrid/VisualizationTab.tsx
index ddd2dc15842..350ad619ff1 100644
--- a/public/app/features/dashboard/dashgrid/VisualizationTab.tsx
+++ b/public/app/features/dashboard/dashgrid/VisualizationTab.tsx
@@ -45,49 +45,63 @@ export class VisualizationTab extends PureComponent<Props> {
   }
 
   componentDidMount() {
-    this.loadAngularOptions();
+    if (this.shouldLoadAngularOptions()) {
+      this.loadAngularOptions();
+    }
   }
 
-  componentDidUpdate() {
-    // in some cases we need to do this after mount because angularPanel was not available on mount
-    this.loadAngularOptions();
+  componentDidUpdate(prevProps: Props) {
+    console.log('VizTab component did update');
+
+    // if type changed
+    if (this.props.plugin !== prevProps.plugin) {
+      this.cleanUpAngularOptions();
+    }
+
+    if (this.shouldLoadAngularOptions()) {
+      this.loadAngularOptions();
+    }
+  }
+
+  shouldLoadAngularOptions() {
+    return this.props.angularPanel && this.element && !this.angularOptions;
   }
 
   loadAngularOptions() {
     const { angularPanel } = this.props;
+    console.log('loadAngularOptions angularPanel=' + angularPanel);
 
-    if (!angularPanel || !this.element || this.angularOptions) {
+    const scope = angularPanel.getScope();
+
+    // When full page reloading in edit mode the angular panel has on fully compiled & instantiated yet
+    if (!scope.$$childHead) {
+      setTimeout(() => {
+        this.forceUpdate();
+      });
       return;
     }
 
-    if (angularPanel) {
-      const scope = angularPanel.getScope();
+    const panelCtrl = scope.$$childHead.ctrl;
 
-      // When full page reloading in edit mode the angular panel has on fully compiled & instantiated yet
-      if (!scope.$$childHead) {
-        setTimeout(() => {
-          this.forceUpdate();
-        });
-        return;
-      }
-
-      const panelCtrl = scope.$$childHead.ctrl;
-
-      let template = '';
-      for (let i = 0; i < panelCtrl.editorTabs.length; i++) {
-        template += '<panel-editor-tab editor-tab="ctrl.editorTabs[' + i + ']" ctrl="ctrl"></panel-editor-tab>';
-      }
-
-      const loader = getAngularLoader();
-      const scopeProps = { ctrl: panelCtrl };
-
-      this.angularOptions = loader.load(this.element, scopeProps, template);
+    let template = '';
+    for (let i = 0; i < panelCtrl.editorTabs.length; i++) {
+      template += '<panel-editor-tab editor-tab="ctrl.editorTabs[' + i + ']" ctrl="ctrl"></panel-editor-tab>';
     }
+
+    const loader = getAngularLoader();
+    const scopeProps = { ctrl: panelCtrl };
+
+    this.angularOptions = loader.load(this.element, scopeProps, template);
   }
 
   componentWillUnmount() {
+    this.cleanUpAngularOptions();
+  }
+
+  cleanUpAngularOptions() {
     if (this.angularOptions) {
       this.angularOptions.destroy();
+      this.angularOptions = null;
     }
   }