wip: you can now change panel type in edit mode

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

@@ -6,7 +6,7 @@ import { getAngularLoader, AngularComponent } from 'app/core/services/angular_lo
 import { DashboardRow } from './DashboardRow';
 import { AddPanelPanel } from './AddPanelPanel';
 import { importPluginModule } from 'app/features/plugins/plugin_loader';
-import { PluginExports } from 'app/types/plugins';
+import { PluginExports, PanelPlugin } from 'app/types/plugins';
 import { PanelChrome } from './PanelChrome';
 import { PanelEditor } from './PanelEditor';
 
@@ -27,15 +27,13 @@ export class DashboardPanel extends React.Component<Props, State> {
 
   constructor(props) {
     super(props);
-    this.state = { pluginExports: null };
+
+    this.state = {
+      pluginExports: null,
+    };
 
     this.specialPanels['row'] = this.renderRow.bind(this);
     this.specialPanels['add-panel'] = this.renderAddPanel.bind(this);
-    this.props.panel.events.on('panel-size-changed', this.triggerForceUpdate.bind(this));
-  }
-
-  triggerForceUpdate() {
-    this.forceUpdate();
   }
 
   isSpecial() {
@@ -50,6 +48,11 @@ export class DashboardPanel extends React.Component<Props, State> {
     return <AddPanelPanel panel={this.props.panel} dashboard={this.props.dashboard} />;
   }
 
+  onPluginTypeChanged = (plugin: PanelPlugin) => {
+    this.props.panel.changeType(plugin.id);
+    this.loadPlugin();
+  };
+
   loadPlugin() {
     if (this.isSpecial()) {
       return;
@@ -63,6 +66,9 @@ export class DashboardPanel extends React.Component<Props, State> {
         this.setState({ pluginExports: this.pluginInfo.exports });
       } else {
         importPluginModule(this.pluginInfo.module).then(pluginExports => {
+          // cache plugin exports (saves a promise async cycle next time)
+          this.pluginInfo.exports = pluginExports;
+          // update panel state
           this.setState({ pluginExports: pluginExports });
         });
       }
@@ -74,6 +80,7 @@ export class DashboardPanel extends React.Component<Props, State> {
   }
 
   componentDidUpdate() {
+    console.log('componentDidUpdate');
     this.loadPlugin();
 
     // handle angular plugin loading
@@ -112,7 +119,12 @@ export class DashboardPanel extends React.Component<Props, State> {
         </div>
         {this.props.panel.isEditing && (
           <div className="panel-editor-container__editor">
-            <PanelEditor panel={this.props.panel} dashboard={this.props.dashboard} />
+            <PanelEditor
+              panel={this.props.panel}
+              panelType={this.props.panel.type}
+              dashboard={this.props.dashboard}
+              onTypeChanged={this.onPluginTypeChanged}
+            />
           </div>
         )}
       </div>

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

@@ -1,5 +1,4 @@
 import React, { ComponentClass } from 'react';
-import $ from 'jquery';
 import { PanelModel } from '../panel_model';
 import { DashboardModel } from '../dashboard_model';
 import { PanelHeader } from './PanelHeader';
@@ -13,21 +12,26 @@ export interface Props {
 
 interface State {}
 
+// cache DataPanel wrapper components
+const dataPanels: { [s: string]: DataPanel } = {};
+
 export class PanelChrome extends React.Component<Props, State> {
   panelComponent: DataPanel;
 
   constructor(props) {
     super(props);
-
-    this.panelComponent = DataPanelWrapper(this.props.component);
-  }
-
-  componentDidMount() {
-    console.log('panel chrome mounted');
   }
 
   render() {
-    let PanelComponent = this.panelComponent;
+    const { type } = this.props.panel;
+
+    let PanelComponent = dataPanels[type];
+
+    if (!PanelComponent) {
+      PanelComponent = dataPanels[type] = DataPanelWrapper(this.props.component);
+    }
+
+    console.log('PanelChrome render', PanelComponent);
 
     return (
       <div className="panel-container">

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

@@ -11,6 +11,8 @@ import { VizTypePicker } from './VizTypePicker';
 interface PanelEditorProps {
   panel: PanelModel;
   dashboard: DashboardModel;
+  panelType: string;
+  onTypeChanged: (newType: PanelPlugin) => void;
 }
 
 interface PanelEditorTab {
@@ -40,7 +42,7 @@ export class PanelEditor extends React.Component<PanelEditorProps, any> {
     return (
       <div className="viz-editor">
         <div className="viz-editor-col1">
-          <VizTypePicker currentType={this.props.panel.type} onTypeChanged={this.onVizTypeChanged} />
+          <VizTypePicker currentType={this.props.panel.type} onTypeChanged={this.props.onTypeChanged} />
         </div>
         <div className="viz-editor-col2">
           <h5 className="page-heading">Options</h5>
@@ -49,11 +51,6 @@ export class PanelEditor extends React.Component<PanelEditorProps, any> {
     );
   }
 
-  onVizTypeChanged = (plugin: PanelPlugin) => {
-    console.log('changing type to ', plugin.id);
-    this.props.panel.changeType(plugin.id);
-  };
-
   onChangeTab = (tab: PanelEditorTab) => {
     store.view.updateQuery({ tab: tab.id }, false);
   };