wip: trying to align react & angular edit modes

public/app/core/directives/dash_class.ts

@@ -5,7 +5,9 @@ coreModule.directive('dashClass', function($timeout) {
   return {
     link: function($scope, elem) {
       $scope.ctrl.dashboard.events.on('view-mode-changed', function(panel) {
-        elem.toggleClass('panel-in-fullscreen', panel.fullscreen === true);
+        $timeout(() => {
+          elem.toggleClass('panel-in-fullscreen', panel.fullscreen === true);
+        }, 10);
       });
 
       elem.toggleClass('panel-in-fullscreen', $scope.ctrl.dashboard.meta.fullscreen === true);

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

@@ -165,7 +165,7 @@ export class DashboardGrid extends React.Component<DashboardGridProps, any> {
 
   componentDidMount() {
     setTimeout(() => {
-      this.setState({ animated: true });
+      this.setState({ animated: false });
     });
   }
 

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

@@ -26,7 +26,7 @@ export class PanelHeader extends React.Component<PanelHeaderProps, any> {
       {
         panelId: this.props.panel.id,
         fullscreen: true,
-        edit: null,
+        edit: false,
       },
       false
     );

public/app/features/panel/panel_directive.ts

@@ -6,48 +6,53 @@ import baron from 'baron';
 var module = angular.module('grafana.directives');
 
 var panelTemplate = `
-  <div class="panel-container" ng-class="{'panel-container--is-editing': ctrl.panel.isEditing}">
-    <div class="panel-header" ng-class="{'grid-drag-handle': !ctrl.panel.fullscreen}">
-      <span class="panel-info-corner">
-        <i class="fa"></i>
-        <span class="panel-info-corner-inner"></span>
-      </span>
-
-      <span class="panel-loading" ng-show="ctrl.loading">
-        <i class="fa fa-spinner fa-spin"></i>
-      </span>
-
-      <panel-header class="panel-title-container" panel-ctrl="ctrl"></panel-header>
-    </div>
+  <div ng-class="{'panel-editor-container': ctrl.panel.isEditing, 'panel-height-helper': !ctrl.panel.isEditing}">
+    <div ng-class="{'panel-editor-container__panel': ctrl.panel.isEditing, 'panel-height-helper': !ctrl.panel.isEditing}">
+      <div class="panel-container">
+        <div class="panel-header" ng-class="{'grid-drag-handle': !ctrl.panel.fullscreen}">
+          <span class="panel-info-corner">
+            <i class="fa"></i>
+            <span class="panel-info-corner-inner"></span>
+          </span>
+
+          <span class="panel-loading" ng-show="ctrl.loading">
+            <i class="fa fa-spinner fa-spin"></i>
+          </span>
+
+          <panel-header class="panel-title-container" panel-ctrl="ctrl"></panel-header>
+        </div>
 
-    <div class="panel-content">
-      <ng-transclude class="panel-height-helper"></ng-transclude>
+        <div class="panel-content">
+          <ng-transclude class="panel-height-helper"></ng-transclude>
+        </div>
+      </div>
     </div>
-  </div>
 
-  <div class="panel-full-edit" ng-if="ctrl.panel.isEditing">
-    <div class="tabbed-view">
-      <div class="tabbed-view-header">
-        <h3 class="tabbed-view-panel-title">
-          {{ctrl.pluginName}}
-        </h3>
-
-        <ul class="gf-tabs">
-          <li class="gf-tabs-item" ng-repeat="tab in ::ctrl.editorTabs">
-            <a class="gf-tabs-link" ng-click="ctrl.changeTab($index)" ng-class="{active: ctrl.editorTabIndex === $index}">
-              {{::tab.title}}
-            </a>
-          </li>
-        </ul>
-
-        <button class="tabbed-view-close-btn" ng-click="ctrl.exitFullscreen();">
-          <i class="fa fa-remove"></i>
-        </button>
-      </div>
+    <div ng-if="ctrl.panel.isEditing" ng-class="{'panel-editor-container__editor': ctrl.panel.isEditing,
+                                                 'panel-height-helper': !ctrl.panel.isEditing}">
+      <div class="tabbed-view tabbed-view--new">
+        <div class="tabbed-view-header">
+          <h3 class="tabbed-view-panel-title">
+            {{ctrl.pluginName}}
+          </h3>
+
+          <ul class="gf-tabs">
+            <li class="gf-tabs-item" ng-repeat="tab in ::ctrl.editorTabs">
+              <a class="gf-tabs-link" ng-click="ctrl.changeTab($index)" ng-class="{active: ctrl.editorTabIndex === $index}">
+                {{::tab.title}}
+              </a>
+            </li>
+          </ul>
+
+          <button class="tabbed-view-close-btn" ng-click="ctrl.exitFullscreen();">
+            <i class="fa fa-remove"></i>
+          </button>
+        </div>
 
-      <div class="tabbed-view-body">
-        <div ng-repeat="tab in ctrl.editorTabs" ng-if="ctrl.editorTabIndex === $index">
-          <panel-editor-tab editor-tab="tab" ctrl="ctrl" index="$index"></panel-editor-tab>
+        <div class="tabbed-view-body">
+          <div ng-repeat="tab in ctrl.editorTabs" ng-if="ctrl.editorTabIndex === $index">
+            <panel-editor-tab editor-tab="tab" ctrl="ctrl" index="$index"></panel-editor-tab>
+          </div>
         </div>
       </div>
     </div>
@@ -86,7 +91,7 @@ module.directive('grafanaPanel', function($rootScope, $document, $timeout) {
       }
 
       function panelHeightUpdated() {
-        panelContent.css({ height: ctrl.height + 'px' });
+        // panelContent.css({ height: ctrl.height + 'px' });
       }
 
       function resizeScrollableContent() {
@@ -135,6 +140,7 @@ module.directive('grafanaPanel', function($rootScope, $document, $timeout) {
         ctrl.calculatePanelHeight();
         panelHeightUpdated();
         $timeout(() => {
+          console.log('panel directive panel size changed, render');
           resizeScrollableContent();
           ctrl.render();
         });

public/app/stores/ViewStore/ViewStore.ts

@@ -30,6 +30,8 @@ export const ViewStore = types
       for (let key of Object.keys(query)) {
         if (query[key]) {
           self.query.set(key, query[key]);
+        } else {
+          self.query.delete(key);
         }
       }
     }