You are viewing a plain text version of this content. The canonical link for it is here.
Posted to commits@superset.apache.org by gr...@apache.org on 2018/02/28 22:19:08 UTC
[incubator-superset] branch master updated: [Explore] applying
refresh chart overlay when chart is stale (#4486)
This is an automated email from the ASF dual-hosted git repository.
graceguo pushed a commit to branch master
in repository https://gitbox.apache.org/repos/asf/incubator-superset.git
The following commit(s) were added to refs/heads/master by this push:
new 764a92c [Explore] applying refresh chart overlay when chart is stale (#4486)
764a92c is described below
commit 764a92cd1094d97aa746f69c51f1285c7034e659
Author: Gabe Lyons <ga...@airbnb.com>
AuthorDate: Wed Feb 28 14:19:06 2018 -0800
[Explore] applying refresh chart overlay when chart is stale (#4486)
* adding refresh chart overlay when chart is out of sync with control panel
* fading the visualization when stale
* addressing comments from team on layout of UI
---
superset/assets/javascripts/chart/Chart.jsx | 17 +++++++++
superset/assets/javascripts/chart/ChartBody.jsx | 3 +-
.../javascripts/components/RefreshChartOverlay.jsx | 42 ++++++++++++++++++++++
.../explore/components/ExploreChartPanel.jsx | 8 +++++
.../explore/components/ExploreViewContainer.jsx | 13 +++++--
superset/assets/stylesheets/superset.less | 25 +++++++++++++
6 files changed, 105 insertions(+), 3 deletions(-)
diff --git a/superset/assets/javascripts/chart/Chart.jsx b/superset/assets/javascripts/chart/Chart.jsx
index 0e06427..54736e5 100644
--- a/superset/assets/javascripts/chart/Chart.jsx
+++ b/superset/assets/javascripts/chart/Chart.jsx
@@ -9,6 +9,7 @@ import ChartBody from './ChartBody';
import Loading from '../components/Loading';
import { Logger, LOG_ACTIONS_RENDER_EVENT } from '../logger';
import StackTraceMessage from '../components/StackTraceMessage';
+import RefreshChartOverlay from '../components/RefreshChartOverlay';
import visMap from '../../visualizations/main';
import sandboxedEval from '../modules/sandbox';
import './chart.css';
@@ -36,11 +37,15 @@ const propTypes = {
queryResponse: PropTypes.object,
lastRendered: PropTypes.number,
triggerQuery: PropTypes.bool,
+ refreshOverlayVisible: PropTypes.bool,
+ errorMessage: PropTypes.node,
// dashboard callbacks
addFilter: PropTypes.func,
getFilters: PropTypes.func,
clearFilter: PropTypes.func,
removeFilter: PropTypes.func,
+ onQuery: PropTypes.func,
+ onDismissRefreshOverlay: PropTypes.func,
};
const defaultProps = {
@@ -214,12 +219,24 @@ class Chart extends React.PureComponent {
/>
}
+ {!isLoading &&
+ !this.props.chartAlert &&
+ this.props.refreshOverlayVisible &&
+ !this.props.errorMessage &&
+ <RefreshChartOverlay
+ height={this.height()}
+ width={this.width()}
+ onQuery={this.props.onQuery}
+ onDismiss={this.props.onDismissRefreshOverlay}
+ />
+ }
{!isLoading && !this.props.chartAlert &&
<ChartBody
containerId={this.containerId}
vizType={this.props.vizType}
height={this.height}
width={this.width}
+ faded={this.props.refreshOverlayVisible && !this.props.errorMessage}
ref={(inner) => {
this.container = inner;
}}
diff --git a/superset/assets/javascripts/chart/ChartBody.jsx b/superset/assets/javascripts/chart/ChartBody.jsx
index 89352f5..b459f44 100644
--- a/superset/assets/javascripts/chart/ChartBody.jsx
+++ b/superset/assets/javascripts/chart/ChartBody.jsx
@@ -7,6 +7,7 @@ const propTypes = {
vizType: PropTypes.string.isRequired,
height: PropTypes.func.isRequired,
width: PropTypes.func.isRequired,
+ faded: PropTypes.bool,
};
class ChartBody extends React.PureComponent {
@@ -42,7 +43,7 @@ class ChartBody extends React.PureComponent {
return (
<div
id={this.props.containerId}
- className={`slice_container ${this.props.vizType}`}
+ className={`slice_container ${this.props.vizType}${this.props.faded ? ' faded' : ''}`}
ref={(el) => { this.el = el; }}
/>
);
diff --git a/superset/assets/javascripts/components/RefreshChartOverlay.jsx b/superset/assets/javascripts/components/RefreshChartOverlay.jsx
new file mode 100644
index 0000000..9e3fced
--- /dev/null
+++ b/superset/assets/javascripts/components/RefreshChartOverlay.jsx
@@ -0,0 +1,42 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import Button from '../components/Button';
+import { t } from '../locales';
+
+const propTypes = {
+ height: PropTypes.number.isRequired,
+ width: PropTypes.number.isRequired,
+ onQuery: PropTypes.func,
+ onDismiss: PropTypes.func,
+};
+
+class RefreshChartOverlay extends React.PureComponent {
+ render() {
+ return (
+ <div
+ style={{ height: this.props.height, width: this.props.width }}
+ className="explore-chart-overlay"
+ >
+ <div>
+ <Button
+ className="refresh-overlay-btn"
+ onClick={this.props.onQuery}
+ bsStyle="primary"
+ >
+ {t('Run Query')}
+ </Button>
+ <Button
+ className="dismiss-overlay-btn"
+ onClick={this.props.onDismiss}
+ >
+ {t('Dismiss')}
+ </Button>
+ </div>
+ </div>
+ );
+ }
+}
+
+RefreshChartOverlay.propTypes = propTypes;
+
+export default RefreshChartOverlay;
diff --git a/superset/assets/javascripts/explore/components/ExploreChartPanel.jsx b/superset/assets/javascripts/explore/components/ExploreChartPanel.jsx
index 5e4926e..bfb24ff 100644
--- a/superset/assets/javascripts/explore/components/ExploreChartPanel.jsx
+++ b/superset/assets/javascripts/explore/components/ExploreChartPanel.jsx
@@ -10,6 +10,8 @@ import ExploreChartHeader from './ExploreChartHeader';
const propTypes = {
actions: PropTypes.object.isRequired,
addHistory: PropTypes.func,
+ onQuery: PropTypes.func,
+ onDismissRefreshOverlay: PropTypes.func,
can_overwrite: PropTypes.bool.isRequired,
can_download: PropTypes.bool.isRequired,
datasource: PropTypes.object,
@@ -24,7 +26,9 @@ const propTypes = {
form_data: PropTypes.object,
standalone: PropTypes.bool,
timeout: PropTypes.number,
+ refreshOverlayVisible: PropTypes.bool,
chart: PropTypes.shape(chartPropType),
+ errorMessage: PropTypes.node,
};
class ExploreChartPanel extends React.PureComponent {
@@ -45,6 +49,10 @@ class ExploreChartPanel extends React.PureComponent {
setControlValue={this.props.actions.setControlValue}
timeout={this.props.timeout}
vizType={this.props.vizType}
+ refreshOverlayVisible={this.props.refreshOverlayVisible}
+ errorMessage={this.props.errorMessage}
+ onQuery={this.props.onQuery}
+ onDismissRefreshOverlay={this.props.onDismissRefreshOverlay}
/>
);
}
diff --git a/superset/assets/javascripts/explore/components/ExploreViewContainer.jsx b/superset/assets/javascripts/explore/components/ExploreViewContainer.jsx
index c4b9fe5..e1b7acb 100644
--- a/superset/assets/javascripts/explore/components/ExploreViewContainer.jsx
+++ b/superset/assets/javascripts/explore/components/ExploreViewContainer.jsx
@@ -50,6 +50,7 @@ class ExploreViewContainer extends React.Component {
width: this.getWidth(),
showModal: false,
chartIsStale: false,
+ refreshOverlayVisible: false,
};
this.addHistory = this.addHistory.bind(this);
@@ -84,7 +85,7 @@ class ExploreViewContainer extends React.Component {
this.props.actions.renderTriggered(new Date().getTime(), this.props.chart.chartKey);
}
if (this.hasQueryControlChanged(changedControlKeys, np.controls)) {
- this.setState({ chartIsStale: true });
+ this.setState({ chartIsStale: true, refreshOverlayVisible: true });
}
}
@@ -108,10 +109,14 @@ class ExploreViewContainer extends React.Component {
this.props.actions.removeControlPanelAlert();
this.props.actions.triggerQuery(true, this.props.chart.chartKey);
- this.setState({ chartIsStale: false });
+ this.setState({ chartIsStale: false, refreshOverlayVisible: false });
this.addHistory({});
}
+ onDismissRefreshOverlay() {
+ this.setState({ refreshOverlayVisible: false });
+ }
+
onStop() {
return this.props.chart.queryRequest.abort();
}
@@ -227,7 +232,11 @@ class ExploreViewContainer extends React.Component {
width={this.state.width}
height={this.state.height}
{...this.props}
+ errorMessage={this.renderErrorMessage()}
+ refreshOverlayVisible={this.state.refreshOverlayVisible}
addHistory={this.addHistory}
+ onQuery={this.onQuery.bind(this)}
+ onDismissRefreshOverlay={this.onDismissRefreshOverlay.bind(this)}
/>);
}
diff --git a/superset/assets/stylesheets/superset.less b/superset/assets/stylesheets/superset.less
index 7013750..4ac5ba8 100644
--- a/superset/assets/stylesheets/superset.less
+++ b/superset/assets/stylesheets/superset.less
@@ -185,6 +185,10 @@ div.widget .chart-header a {
display: none;
}
+.slice_container.faded {
+ opacity: .2;
+}
+
div.widget {
.slice_container {
overflow: hidden;
@@ -424,3 +428,24 @@ g.annotation-container {
content: "\f0dd";
color: @brand-primary;
}
+
+.explore-chart-overlay {
+ position: absolute;
+ z-index: 100;
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ text-align: center;
+}
+
+.refresh-overlay-btn {
+ font-weight: bold;
+ margin-right: 10px;
+}
+
+.dismiss-overlay-btn {
+ font-weight: bold;
+ background: white;
+ color: @brand-primary;
+ border-color: @brand-primary;
+}
--
To stop receiving notification emails like this one, please contact
graceguo@apache.org.