things are working

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

@@ -7,6 +7,7 @@ import { getAngularLoader, AngularComponent } from 'app/core/services/AngularLoa
 // Components
 // Components
 import { EditorTabBody } from './EditorTabBody';
 import { EditorTabBody } from './EditorTabBody';
 import { VizTypePicker } from './VizTypePicker';
 import { VizTypePicker } from './VizTypePicker';
+import { FadeIn } from 'app/core/components/Animations/FadeIn';
 
 
 // Types
 // Types
 import { PanelModel } from '../panel_model';
 import { PanelModel } from '../panel_model';
@@ -105,7 +106,7 @@ export class VisualizationTab extends PureComponent<Props, State> {
       template +=
       template +=
         `
         `
       <div class="form-section" ng-cloak>` +
       <div class="form-section" ng-cloak>` +
-        (i > 0 ? `<div class="form-section__header">{{ctrl.editorTabs[${i}].title}}</div>` : '') +
+        (i > -1 ? `<div class="form-section__header">{{ctrl.editorTabs[${i}].title}}</div>` : '') +
         `<div class="form-section__body">
         `<div class="form-section__body">
           <panel-editor-tab editor-tab="ctrl.editorTabs[${i}]" ctrl="ctrl"></panel-editor-tab>
           <panel-editor-tab editor-tab="ctrl.editorTabs[${i}]" ctrl="ctrl"></panel-editor-tab>
         </div>
         </div>
@@ -139,6 +140,10 @@ export class VisualizationTab extends PureComponent<Props, State> {
     this.setState({ isVizPickerOpen: true });
     this.setState({ isVizPickerOpen: true });
   };
   };
 
 
+  onCloseVizPicker = () => {
+    this.setState({ isVizPickerOpen: false });
+  };
+
   onSearchQueryChange = evt => {
   onSearchQueryChange = evt => {
     const value = evt.target.value;
     const value = evt.target.value;
     this.setState({
     this.setState({
@@ -152,6 +157,7 @@ export class VisualizationTab extends PureComponent<Props, State> {
 
 
     if (this.state.isVizPickerOpen) {
     if (this.state.isVizPickerOpen) {
       return (
       return (
+        <>
           <label className="gf-form--has-input-icon">
           <label className="gf-form--has-input-icon">
             <input
             <input
               type="text"
               type="text"
@@ -163,6 +169,7 @@ export class VisualizationTab extends PureComponent<Props, State> {
             />
             />
             <i className="gf-form-input-icon fa fa-search" />
             <i className="gf-form-input-icon fa fa-search" />
           </label>
           </label>
+        </>
       );
       );
     } else {
     } else {
       return (
       return (
@@ -193,9 +200,14 @@ export class VisualizationTab extends PureComponent<Props, State> {
     return (
     return (
       <EditorTabBody heading="Visualization" renderToolbar={this.renderToolbar} toolbarItems={[panelHelp]}>
       <EditorTabBody heading="Visualization" renderToolbar={this.renderToolbar} toolbarItems={[panelHelp]}>
         <>
         <>
-          {isVizPickerOpen && (
-            <VizTypePicker current={plugin} onTypeChanged={this.onTypeChanged} searchQuery={searchQuery} />
-          )}
+          <FadeIn in={isVizPickerOpen} duration={200} unmountOnExit={true}>
+            <VizTypePicker
+              current={plugin}
+              onTypeChanged={this.onTypeChanged}
+              searchQuery={searchQuery}
+              onClose={this.onCloseVizPicker}
+            />
+          </FadeIn>
           {this.renderPanelOptions()}
           {this.renderPanelOptions()}
         </>
         </>
       </EditorTabBody>
       </EditorTabBody>

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

@@ -9,6 +9,7 @@ export interface Props {
   current: PanelPlugin;
   current: PanelPlugin;
   onTypeChanged: (newType: PanelPlugin) => void;
   onTypeChanged: (newType: PanelPlugin) => void;
   searchQuery: string;
   searchQuery: string;
+  onClose: () => void;
 }
 }
 
 
 export class VizTypePicker extends PureComponent<Props> {
 export class VizTypePicker extends PureComponent<Props> {
@@ -61,10 +62,23 @@ export class VizTypePicker extends PureComponent<Props> {
   };
   };
 
 
   render() {
   render() {
+    const { onClose } = this.props;
     const filteredPluginList = this.getFilteredPluginList();
     const filteredPluginList = this.getFilteredPluginList();
 
 
     return (
     return (
-      <div className="viz-picker">{filteredPluginList.map((plugin, index) => this.renderVizPlugin(plugin, index))}</div>
+      <div className="form-section">
+        <div className="form-section__header">
+          <span>Type selection</span>
+          <button className="btn btn-link" onClick={onClose}>
+            <i className="fa fa-remove" />
+          </button>
+        </div>
+        <div className="form-section__body">
+          <div className="viz-picker">
+            {filteredPluginList.map((plugin, index) => this.renderVizPlugin(plugin, index))}
+          </div>
+        </div>
+      </div>
     );
     );
   }
   }
 }
 }

public/sass/_variables.dark.scss

@@ -271,7 +271,7 @@ $menu-dropdown-shadow: 5px 5px 20px -5px $black;
 $tab-border-color: $dark-4;
 $tab-border-color: $dark-4;
 
 
 // Toolbar
 // Toolbar
-$toolbar-bg: $black;
+$toolbar-bg: $input-bg;
 
 
 // Pagination
 // Pagination
 // -------------------------
 // -------------------------
@@ -375,6 +375,7 @@ $checkbox-color: $dark-1;
 //Panel Edit
 //Panel Edit
 // -------------------------
 // -------------------------
 $panel-editor-shadow: 0 0 20px black;
 $panel-editor-shadow: 0 0 20px black;
+$panel-editor-border: 1px solid $dark-3;
 $panel-editor-side-menu-shadow: drop-shadow(0 0 10px $black);
 $panel-editor-side-menu-shadow: drop-shadow(0 0 10px $black);
 $panel-editor-toolbar-view-bg: $black;
 $panel-editor-toolbar-view-bg: $black;
 $panel-editor-viz-item-shadow: 0 0 8px $dark-5;
 $panel-editor-viz-item-shadow: 0 0 8px $dark-5;

public/sass/_variables.light.scss

@@ -384,6 +384,7 @@ $checkbox-color: $gray-7;
 //Panel Edit
 //Panel Edit
 // -------------------------
 // -------------------------
 $panel-editor-shadow: 2px 2px 8px $gray-3;
 $panel-editor-shadow: 2px 2px 8px $gray-3;
+$panel-editor-border: 1px solid $dark-4;
 $panel-editor-side-menu-shadow: drop-shadow(0 0 2px $gray-3);
 $panel-editor-side-menu-shadow: drop-shadow(0 0 2px $gray-3);
 $panel-editor-toolbar-view-bg: $white;
 $panel-editor-toolbar-view-bg: $white;
 $panel-editor-viz-item-shadow: 0 0 4px $gray-3;
 $panel-editor-viz-item-shadow: 0 0 4px $gray-3;

public/sass/components/_buttons.scss

@@ -78,6 +78,7 @@
 
 
 .btn-link {
 .btn-link {
   color: $btn-link-color;
   color: $btn-link-color;
+  background: transparent;
 }
 }
 
 
 // Set the backgrounds
 // Set the backgrounds

public/sass/components/_panel_editor.scss

@@ -34,8 +34,8 @@
   flex-grow: 1;
   flex-grow: 1;
   background: $page-bg;
   background: $page-bg;
   margin: 0 20px 0 84px;
   margin: 0 20px 0 84px;
-  border-left: 2px solid $orange;
   border-radius: 3px;
   border-radius: 3px;
+  border: $panel-editor-border;
   box-shadow: $panel-editor-shadow;
   box-shadow: $panel-editor-shadow;
 }
 }
 
 
@@ -133,17 +133,14 @@
 }
 }
 
 
 .viz-picker {
 .viz-picker {
-  background: $panel-editor-toolbar-view-bg;
   display: flex;
   display: flex;
   flex-wrap: wrap;
   flex-wrap: wrap;
-  margin: -40px -20px;
-  margin-bottom: 13px;
-  padding: 20px;
+  margin-bottom: 40px;
 }
 }
 
 
 .viz-picker__item {
 .viz-picker__item {
-  background: $panel-editor-viz-item-bg;
-  border: $panel-editor-viz-item-border;
+  background: $panel-bg;
+  border: $panel-border;
   border-radius: 3px;
   border-radius: 3px;
   height: 100px;
   height: 100px;
   width: 150px;
   width: 150px;
@@ -323,6 +320,13 @@
   margin-bottom: 20px;
   margin-bottom: 20px;
   background: $input-label-bg;
   background: $input-label-bg;
   border-radius: 3px;
   border-radius: 3px;
+  position: relative;
+
+  .btn {
+    position: absolute;
+    right: 0;
+    top: 2px;
+  }
 }
 }
 
 
 .form-section__body {
 .form-section__body {