From e0502ab6a8266ae5a0776ec8b1f56e986a2203b0 Mon Sep 17 00:00:00 2001
From: Chris Cowan <chris@chriscowan.us>
Date: Wed, 12 Jul 2017 10:24:35 -0700
Subject: [PATCH 1/3] Fixes #12802 - Fix TSVB Visualizations to honor darkTheme

---
 .../metrics/public/components/vis_editor.js   | 23 ++++++++++++++++++-
 src/ui/public/vis/vis_types/react_vis_type.js |  4 ++--
 2 files changed, 24 insertions(+), 3 deletions(-)

diff --git a/src/core_plugins/metrics/public/components/vis_editor.js b/src/core_plugins/metrics/public/components/vis_editor.js
index 2f97143de85948..0a863b2e84a474 100644
--- a/src/core_plugins/metrics/public/components/vis_editor.js
+++ b/src/core_plugins/metrics/public/components/vis_editor.js
@@ -4,13 +4,32 @@ import Visualization from './visualization';
 import VisPicker from './vis_picker';
 import PanelConfig from './panel_config';
 import brushHandler from '../lib/create_brush_handler';
+import { get } from 'lodash';
 
 class VisEditor extends Component {
 
   constructor(props) {
     super(props);
-    this.state = { model: props.vis.params, dirty: false, autoApply: true };
+    const { appState } = props;
+    const reversed = get(appState, 'options.darkTheme', false);
+    this.state = { model: props.vis.params, dirty: false, autoApply: true, reversed };
     this.onBrush = brushHandler(props.vis.API.timeFilter);
+    this.handleAppStateChange = this.handleAppStateChange.bind(this);
+  }
+
+  componentWillMount() {
+    const { appState } = this.props;
+    this.appState = appState;
+    this.appState.on('save_with_changes', this.handleAppStateChange);
+  }
+
+  handleAppStateChange() {
+    const reversed = get(this.appState, 'options.darkTheme', false);
+    this.setState({ reversed });
+  }
+
+  componentWillUnmount() {
+    this.appState.off('save_with_changes', this.handleAppStateChange);
   }
 
   render() {
@@ -35,8 +54,10 @@ class VisEditor extends Component {
     };
 
     if (!this.props.vis.isEditorMode()) {
+      const reversed = this.state.reversed;
       return (
         <Visualization
+          reversed={reversed}
           onBrush={this.onBrush}
           fields={this.props.vis.fields}
           model={this.props.vis.params}
diff --git a/src/ui/public/vis/vis_types/react_vis_type.js b/src/ui/public/vis/vis_types/react_vis_type.js
index a2c32c2a641ccc..f9772813e87280 100644
--- a/src/ui/public/vis/vis_types/react_vis_type.js
+++ b/src/ui/public/vis/vis_types/react_vis_type.js
@@ -2,7 +2,7 @@ import React from 'react';
 import { render, unmountComponentAtNode } from 'react-dom';
 import { VisTypeProvider } from 'ui/vis/vis_types';
 
-export function ReactVisTypeProvider(Private) {
+export function ReactVisTypeProvider(Private, getAppState) {
   const VisType = Private(VisTypeProvider);
 
   class ReactVisController {
@@ -17,7 +17,7 @@ export function ReactVisTypeProvider(Private) {
       return new Promise((resolve, reject) => {
         if (!this.visData) return reject();
         const Component = this.vis.type.visConfig.component;
-        render(<Component vis={this.vis} visData={visData} renderComplete={resolve} />, this.el);
+        render(<Component vis={this.vis} appState={getAppState()} visData={visData} renderComplete={resolve} />, this.el);
       });
     }
 

From 1f149deb07f3182e7964289de907519514005800 Mon Sep 17 00:00:00 2001
From: Chris Cowan <chris@chriscowan.us>
Date: Wed, 12 Jul 2017 10:27:00 -0700
Subject: [PATCH 2/3] Sometimes appState doesn't exist

---
 .../metrics/public/components/vis_editor.js            | 10 +++++++---
 1 file changed, 7 insertions(+), 3 deletions(-)

diff --git a/src/core_plugins/metrics/public/components/vis_editor.js b/src/core_plugins/metrics/public/components/vis_editor.js
index 0a863b2e84a474..da7672c88097ef 100644
--- a/src/core_plugins/metrics/public/components/vis_editor.js
+++ b/src/core_plugins/metrics/public/components/vis_editor.js
@@ -19,8 +19,10 @@ class VisEditor extends Component {
 
   componentWillMount() {
     const { appState } = this.props;
-    this.appState = appState;
-    this.appState.on('save_with_changes', this.handleAppStateChange);
+    if (appState) {
+      this.appState = appState;
+      this.appState.on('save_with_changes', this.handleAppStateChange);
+    }
   }
 
   handleAppStateChange() {
@@ -29,7 +31,9 @@ class VisEditor extends Component {
   }
 
   componentWillUnmount() {
-    this.appState.off('save_with_changes', this.handleAppStateChange);
+    if (this.appState) {
+      this.appState.off('save_with_changes', this.handleAppStateChange);
+    }
   }
 
   render() {

From 4f6bebd4512e7372a18751f4934127c46fd62418 Mon Sep 17 00:00:00 2001
From: Chris Cowan <chris@chriscowan.us>
Date: Wed, 12 Jul 2017 10:29:21 -0700
Subject: [PATCH 3/3] Fixes #12762 - Fixing propTypes to match props being
 passed

---
 .../metrics/public/components/vis_editor.js           | 11 +++--------
 1 file changed, 3 insertions(+), 8 deletions(-)

diff --git a/src/core_plugins/metrics/public/components/vis_editor.js b/src/core_plugins/metrics/public/components/vis_editor.js
index da7672c88097ef..3757e961348b76 100644
--- a/src/core_plugins/metrics/public/components/vis_editor.js
+++ b/src/core_plugins/metrics/public/components/vis_editor.js
@@ -106,15 +106,10 @@ class VisEditor extends Component {
 }
 
 VisEditor.propTypes = {
-  fields: PropTypes.object,
-  model: PropTypes.object,
-  onBrush: PropTypes.func,
-  onChange: PropTypes.func,
-  onCommit: PropTypes.func,
-  onToggleAutoApply: PropTypes.func,
+  vis: PropTypes.object,
   visData: PropTypes.object,
-  dirty: PropTypes.bool,
-  autoApply: PropTypes.bool
+  appState: PropTypes.object,
+  renderComplete: PropTypes.func,
 };
 
 export default VisEditor;