wip: viz editor started

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

@@ -85,7 +85,6 @@ export class DashboardPanel extends React.Component<Props, State> {
     if (pluginExports.PanelComponent) {
       return (
         <PanelChrome
-          key="asd"
           component={pluginExports.PanelComponent}
           panel={this.props.panel}
           dashboard={this.props.dashboard}

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

@@ -38,10 +38,11 @@ export class PanelEditor extends React.Component<PanelEditorProps, any> {
   renderVizTab() {
     return (
       <div className="viz-editor">
-        <div className="viz-editor-list">
+        <div className="viz-editor-col1">
+          <h5 className="section-heading">Visualization Type</h5>
           <VizPicker />
         </div>
-        <div className="viz-editor-options">
+        <div className="viz-editor-col2">
           <h5 className="section-heading">Options</h5>
         </div>
       </div>

public/app/features/dashboard/dashnav/dashnav.ts

@@ -38,6 +38,8 @@ export class DashNavCtrl {
     } else if (search.fullscreen) {
       delete search.fullscreen;
       delete search.edit;
+      delete search.tab;
+      delete search.panelId;
     }
     this.$location.search(search);
   }

public/sass/_grafana.scss

@@ -92,6 +92,7 @@
 @import 'components/form_select_box';
 @import 'components/user-picker';
 @import 'components/description-picker';
+@import 'components/viz_editor';
 
 // PAGES
 @import 'pages/login';

public/sass/components/_viz_editor.scss

+.viz-editor {
+  display: flex;
+}
+
+.viz-editor-col1 {
+  width: 150px;
+  background: $panel-bg;
+}
+
+.viz-editor-col2 {
+  flex-grow: 1;
+}
+
+.viz-picker {
+  padding: 3px 8px;
+  display: flex;
+  flex-direction: row;
+  flex-wrap: wrap;
+  overflow: auto;
+  height: 100%;
+}
+
+.viz-picker__item {
+  background: $card-background;
+  box-shadow: $card-shadow;
+
+  border-radius: 3px;
+  padding: $spacer/3 $spacer;
+  width: 31%;
+  height: 60px;
+  text-align: center;
+  margin: $gf-form-margin;
+  cursor: pointer;
+
+  &.active,
+  &:hover {
+    background: $card-background-hover;
+  }
+}
+
+.viz-picker__item-name {
+  text-overflow: ellipsis;
+  overflow: hidden;
+  white-space: nowrap;
+  font-size: $font-size-sm;
+}
+
+.viz-picker__item-img {
+  height: calc(100% - 15px);
+}