Fixed issues introduced by changing to PureComponent

public/app/features/dashboard/dashboard_model.ts

@@ -232,11 +232,6 @@ export class DashboardModel {
     return this.meta.fullscreen && !panel.fullscreen;
   }
 
-  changePanelType(panel: PanelModel, pluginId: string) {
-    panel.changeType(pluginId);
-    this.events.emit('panel-type-changed', panel);
-  }
-
   private ensureListExist(data) {
     if (!data) {
       data = {};

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

@@ -83,7 +83,6 @@ export class DashboardGrid extends React.Component<DashboardGridProps, any> {
     dashboard.on('view-mode-changed', this.onViewModeChanged.bind(this));
     dashboard.on('row-collapsed', this.triggerForceUpdate.bind(this));
     dashboard.on('row-expanded', this.triggerForceUpdate.bind(this));
-    dashboard.on('panel-type-changed', this.triggerForceUpdate.bind(this));
   }
 
   buildLayout() {
@@ -176,7 +175,12 @@ export class DashboardGrid extends React.Component<DashboardGridProps, any> {
       const panelClasses = classNames({ panel: true, 'panel--fullscreen': panel.fullscreen });
       panelElements.push(
         <div key={panel.id.toString()} className={panelClasses} id={`panel-${panel.id}`}>
-          <DashboardPanel panel={panel} dashboard={this.props.dashboard} panelType={panel.type} />
+          <DashboardPanel
+            panel={panel}
+            dashboard={this.props.dashboard}
+            isEditing={panel.isEditing}
+            isFullscreen={panel.fullscreen}
+          />
         </div>
       );
     }

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

@@ -11,9 +11,10 @@ import { PanelChrome } from './PanelChrome';
 import { PanelEditor } from './PanelEditor';
 
 export interface Props {
-  panelType: string;
   panel: PanelModel;
   dashboard: DashboardModel;
+  isEditing: boolean;
+  isFullscreen: boolean;
 }
 
 export interface State {
@@ -113,8 +114,8 @@ export class DashboardPanel extends PureComponent<Props, State> {
 
   renderReactPanel() {
     const { pluginExports } = this.state;
-    const containerClass = this.props.panel.isEditing ? 'panel-editor-container' : 'panel-height-helper';
-    const panelWrapperClass = this.props.panel.isEditing ? 'panel-editor-container__panel' : 'panel-height-helper';
+    const containerClass = this.props.isEditing ? 'panel-editor-container' : 'panel-height-helper';
+    const panelWrapperClass = this.props.isEditing ? 'panel-editor-container__panel' : 'panel-height-helper';
     // this might look strange with these classes that change when edit, but
     // I want to try to keep markup (parents) for panel the same in edit mode to avoide unmount / new mount of panel
     return (

public/app/features/panel/viz_tab.ts

@@ -16,9 +16,7 @@ export class VizTabCtrl {
     $scope.ctrl = this;
   }
 
-  onTypeChanged = (plugin: PanelPlugin) => {
-    this.dashboard.changePanelType(this.panelCtrl.panel, plugin.id);
-  };
+  onTypeChanged = (plugin: PanelPlugin) => {};
 }
 
 const template = `