From dec62d73401ddce4ecda6b3162018220ca87a7f8 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Torkel=20=C3=96degaard?= <torkel@grafana.com>
Date: Fri, 6 Jul 2018 04:42:59 -0700
Subject: [PATCH] another baby step

---
 .../dashboard/dashgrid/DashboardGrid.tsx      |  2 +-
 .../dashboard/dashgrid/PanelEditor.tsx        | 12 ++++-
 .../features/dashboard/dashgrid/VizPicker.tsx | 46 +++++++++++++++++++
 3 files changed, 58 insertions(+), 2 deletions(-)
 create mode 100644 public/app/features/dashboard/dashgrid/VizPicker.tsx

diff --git a/public/app/features/dashboard/dashgrid/DashboardGrid.tsx b/public/app/features/dashboard/dashgrid/DashboardGrid.tsx
index 9ee6cdbe1f8..30d97898900 100644
--- a/public/app/features/dashboard/dashgrid/DashboardGrid.tsx
+++ b/public/app/features/dashboard/dashgrid/DashboardGrid.tsx
@@ -139,7 +139,7 @@ export class DashboardGrid extends React.Component<DashboardGridProps, any> {
   }
 
   onViewModeChanged(payload) {
-    this.setState({ animated: payload.fullscreen });
+    this.setState({ animated: !payload.fullscreen });
   }
 
   updateGridPos(item, layout) {
diff --git a/public/app/features/dashboard/dashgrid/PanelEditor.tsx b/public/app/features/dashboard/dashgrid/PanelEditor.tsx
index ebcde802b7f..1b92127c1d3 100644
--- a/public/app/features/dashboard/dashgrid/PanelEditor.tsx
+++ b/public/app/features/dashboard/dashgrid/PanelEditor.tsx
@@ -5,6 +5,7 @@ import { store } from 'app/stores/store';
 import { observer } from 'mobx-react';
 import { QueriesTab } from './QueriesTab';
 import classNames from 'classnames';
+import { VizPicker } from './VizPicker';
 
 interface PanelEditorProps {
   panel: PanelModel;
@@ -35,7 +36,16 @@ export class PanelEditor extends React.Component<PanelEditorProps, any> {
   }
 
   renderVizTab() {
-    return <h2>Visualizations</h2>;
+    return (
+      <div className="viz-editor">
+        <div className="viz-editor-list">
+          <VizPicker />
+        </div>
+        <div className="viz-editor-options">
+          <h5 className="section-heading">Options</h5>
+        </div>
+      </div>
+    );
   }
 
   onChangeTab = (tab: PanelEditorTab) => {
diff --git a/public/app/features/dashboard/dashgrid/VizPicker.tsx b/public/app/features/dashboard/dashgrid/VizPicker.tsx
new file mode 100644
index 00000000000..2d879ef94d4
--- /dev/null
+++ b/public/app/features/dashboard/dashgrid/VizPicker.tsx
@@ -0,0 +1,46 @@
+import React, { PureComponent } from 'react';
+import config from 'app/core/config';
+import _ from 'lodash';
+
+interface Props {}
+
+interface State {
+  pluginList: any[];
+}
+
+export class VizPicker extends PureComponent<Props, State> {
+  constructor(props) {
+    super(props);
+
+    this.state = {
+      pluginList: this.getPanelPlugins(''),
+    };
+  }
+
+  getPanelPlugins(filter) {
+    let panels = _.chain(config.panels)
+      .filter({ hideFromList: false })
+      .map(item => item)
+      .value();
+
+    // add sort by sort property
+    return _.sortBy(panels, 'sort');
+  }
+
+  onChangeVizPlugin = plugin => {
+    console.log('set viz');
+  };
+
+  renderVizPlugin(plugin, index) {
+    return (
+      <div key={index} className="viz-picker__item" onClick={() => this.onChangeVizPlugin(plugin)} title={plugin.name}>
+        <img className="viz-picker__item__img" src={plugin.info.logos.small} />
+        <div className="viz-pikcer__item__name">{plugin.name}</div>
+      </div>
+    );
+  }
+
+  render() {
+    return <div className="viz-picker">{this.state.pluginList.map(this.renderVizPlugin)}</div>;
+  }
+}