You are viewing a plain text version of this content. The canonical link for it is here.
Posted to commits@superset.apache.org by cc...@apache.org on 2018/04/18 22:20:36 UTC
[incubator-superset] 02/02: [dashboard builder] use VIZ_TYPES,
move stricter .eslintrc to dashboard/, more css fixes
This is an automated email from the ASF dual-hosted git repository.
ccwilliams pushed a commit to branch chris--dashboard-perf
in repository https://gitbox.apache.org/repos/asf/incubator-superset.git
commit 317f58123ce5c49076160bdc3ee389da714f484b
Author: Chris Williams <ch...@airbnb.com>
AuthorDate: Wed Apr 18 15:18:32 2018 -0700
[dashboard builder] use VIZ_TYPES, move stricter .eslintrc to dashboard/, more css fixes
---
.../javascripts/dashboard/{v2 => }/.eslintrc | 0
.../javascripts/dashboard/components/Dashboard.jsx | 21 ++++++++-------
.../dashboard/components/DashboardContainer.jsx | 3 ++-
.../dashboard/v2/components/Dashboard.jsx | 30 ----------------------
.../v2/components/gridComponents/Chart.jsx | 17 +++++++-----
.../v2/components/gridComponents/ChartHolder.jsx | 11 +++++---
.../dashboard/v2/stylesheets/components/chart.less | 23 ++++++++---------
.../dashboard/v2/stylesheets/toast.less | 5 ++--
superset/assets/stylesheets/dashboard.less | 2 +-
9 files changed, 45 insertions(+), 67 deletions(-)
diff --git a/superset/assets/javascripts/dashboard/v2/.eslintrc b/superset/assets/javascripts/dashboard/.eslintrc
similarity index 100%
rename from superset/assets/javascripts/dashboard/v2/.eslintrc
rename to superset/assets/javascripts/dashboard/.eslintrc
diff --git a/superset/assets/javascripts/dashboard/components/Dashboard.jsx b/superset/assets/javascripts/dashboard/components/Dashboard.jsx
index 7ab9a9d..70bfa03 100644
--- a/superset/assets/javascripts/dashboard/components/Dashboard.jsx
+++ b/superset/assets/javascripts/dashboard/components/Dashboard.jsx
@@ -1,3 +1,4 @@
+/* global window */
import React from 'react';
import PropTypes from 'prop-types';
@@ -19,7 +20,12 @@ import '../../../stylesheets/dashboard.less';
import '../v2/stylesheets/index.less';
const propTypes = {
- actions: PropTypes.object,
+ actions: PropTypes.shape({
+ addSliceToDashboard: PropTypes.func.isRequired,
+ onChange: PropTypes.func.isRequired,
+ removeSliceFromDashboard: PropTypes.func.isRequired,
+ runQuery: PropTypes.func.isRequired,
+ }).isRequired,
initMessages: PropTypes.array,
dashboard: PropTypes.object.isRequired,
charts: PropTypes.object.isRequired,
@@ -34,7 +40,7 @@ const propTypes = {
showBuilderPane: PropTypes.bool,
hasUnsavedChanges: PropTypes.bool.isRequired,
editMode: PropTypes.bool,
- impressionId: PropTypes.string,
+ impressionId: PropTypes.string.isRequired,
};
const defaultProps = {
@@ -113,10 +119,6 @@ class Dashboard extends React.PureComponent {
}
}
- componentWillUnmount() {
- // window.removeEventListener('resize', this.rerenderCharts);
- }
-
onBeforeUnload(hasChanged) {
if (hasChanged) {
window.addEventListener('beforeunload', this.unload);
@@ -169,11 +171,8 @@ class Dashboard extends React.PureComponent {
render() {
return (
- <div id="dashboard-container">
- <div id="dashboard-header">
- <AlertsWrapper initMessages={this.props.initMessages} />
- </div>
-
+ <div>
+ <AlertsWrapper initMessages={this.props.initMessages} />
<DashboardBuilder />
</div>
);
diff --git a/superset/assets/javascripts/dashboard/components/DashboardContainer.jsx b/superset/assets/javascripts/dashboard/components/DashboardContainer.jsx
index 858fc27..5968da5 100644
--- a/superset/assets/javascripts/dashboard/components/DashboardContainer.jsx
+++ b/superset/assets/javascripts/dashboard/components/DashboardContainer.jsx
@@ -6,7 +6,7 @@ import { saveSliceName } from '../actions/allSlices';
import * as chartActions from '../../chart/chartAction';
import Dashboard from './Dashboard';
-// @TODO remove unneeded actionsn + props
+// @TODO remove unneeded props
function mapStateToProps({ datasources, allSlices, charts, dashboard, dashboardLayout, impressionId }) {
return {
initMessages: dashboard.common.flash_messages,
@@ -34,6 +34,7 @@ function mapDispatchToProps(dispatch) {
saveSliceName,
};
return {
+ // @TODO update to the 4 actions we actually need and remove actions object
actions: bindActionCreators(actions, dispatch),
};
}
diff --git a/superset/assets/javascripts/dashboard/v2/components/Dashboard.jsx b/superset/assets/javascripts/dashboard/v2/components/Dashboard.jsx
deleted file mode 100644
index ffd1280..0000000
--- a/superset/assets/javascripts/dashboard/v2/components/Dashboard.jsx
+++ /dev/null
@@ -1,30 +0,0 @@
-import React from 'react';
-import PropTypes from 'prop-types';
-
-import DashboardBuilder from '../containers/DashboardBuilder';
-
-import '../stylesheets/index.less';
-
-const propTypes = {
- actions: PropTypes.shape({
- updateDashboardTitle: PropTypes.func.isRequired,
- setEditMode: PropTypes.func.isRequired,
- }),
- editMode: PropTypes.bool,
-};
-
-const defaultProps = {
- editMode: true,
-};
-
-class Dashboard extends React.Component {
- render() {
- // @TODO delete this component?
- return <DashboardBuilder />;
- }
-}
-
-Dashboard.propTypes = propTypes;
-Dashboard.defaultProps = defaultProps;
-
-export default Dashboard;
diff --git a/superset/assets/javascripts/dashboard/v2/components/gridComponents/Chart.jsx b/superset/assets/javascripts/dashboard/v2/components/gridComponents/Chart.jsx
index bc872ef..5ad75a4 100644
--- a/superset/assets/javascripts/dashboard/v2/components/gridComponents/Chart.jsx
+++ b/superset/assets/javascripts/dashboard/v2/components/gridComponents/Chart.jsx
@@ -7,6 +7,7 @@ import SliceHeader from '../../../components/SliceHeader';
import ChartContainer from '../../../../chart/ChartContainer';
import { chartPropType } from '../../../../chart/chartReducer';
import { slicePropShape } from '../../../reducers/propShapes';
+import { VIZ_TYPES } from '../../../../../visualizations/main';
const propTypes = {
id: PropTypes.string.isRequired,
@@ -29,8 +30,12 @@ const propTypes = {
isExpanded: PropTypes.bool.isRequired,
};
-const updateOnPropChange = Object.keys(propTypes)
+// we use state + shouldComponentUpdate() logic to prevent perf-wrecking
+// resizing across all slices on a dashboard
+const RESIZE_TIMEOUT = 350;
+const SHOULD_UPDATE_ON_PROP_CHANGES = Object.keys(propTypes)
.filter(prop => prop !== 'width' && prop !== 'height');
+const OVERFLOWABLE_VIZ_TYPES = new Set([VIZ_TYPES.filter_box]);
class Chart extends React.Component {
constructor(props) {
@@ -59,8 +64,8 @@ class Chart extends React.Component {
return true;
}
- for (let i = 0; i < updateOnPropChange.length; i += 1) {
- const prop = updateOnPropChange[i];
+ for (let i = 0; i < SHOULD_UPDATE_ON_PROP_CHANGES.length; i += 1) {
+ const prop = SHOULD_UPDATE_ON_PROP_CHANGES[i];
if (nextProps[prop] !== this.props[prop]) {
return true;
}
@@ -68,7 +73,7 @@ class Chart extends React.Component {
if (nextProps.width !== this.props.width || nextProps.height !== this.props.height) {
clearTimeout(this.resizeTimeout);
- this.resizeTimeout = setTimeout(this.resize, 350);
+ this.resizeTimeout = setTimeout(this.resize, RESIZE_TIMEOUT);
}
return false;
@@ -144,10 +149,10 @@ class Chart extends React.Component {
const { queryResponse } = chart;
const isCached = queryResponse && queryResponse.is_cached;
const cachedDttm = queryResponse && queryResponse.cached_dttm;
- const overflowable = slice && slice.viz_type === 'filter_box';
+ const isOverflowable = OVERFLOWABLE_VIZ_TYPES.has(slice && slice.viz_type);
return (
- <div className={cx('dashboard-chart', overflowable && 'dashboard-chart--overflowable')}>
+ <div className={cx('dashboard-chart', isOverflowable && 'dashboard-chart--overflowable')}>
<SliceHeader
innerRef={this.setHeaderRef}
slice={slice}
diff --git a/superset/assets/javascripts/dashboard/v2/components/gridComponents/ChartHolder.jsx b/superset/assets/javascripts/dashboard/v2/components/gridComponents/ChartHolder.jsx
index 28ddad1..520f8b3 100644
--- a/superset/assets/javascripts/dashboard/v2/components/gridComponents/ChartHolder.jsx
+++ b/superset/assets/javascripts/dashboard/v2/components/gridComponents/ChartHolder.jsx
@@ -15,6 +15,8 @@ import {
GRID_BASE_UNIT,
} from '../../util/constants';
+const CHART_MARGIN = 32;
+
const propTypes = {
id: PropTypes.string.isRequired,
parentId: PropTypes.string.isRequired,
@@ -109,11 +111,14 @@ class ChartHolder extends React.Component {
onResizeStop={onResizeStop}
editMode={editMode}
>
- <div ref={dragSourceRef} className="dashboard-component dashboard-component-chart">
+ <div
+ ref={dragSourceRef}
+ className="dashboard-component dashboard-component-chart-holder"
+ >
<Chart
id={component.meta.chartKey}
- width={widthMultiple * columnWidth}
- height={component.meta.height * GRID_BASE_UNIT}
+ width={(widthMultiple * columnWidth) - CHART_MARGIN}
+ height={(component.meta.height * GRID_BASE_UNIT) - CHART_MARGIN}
/>
{editMode &&
<HoverMenu position="top">
diff --git a/superset/assets/javascripts/dashboard/v2/stylesheets/components/chart.less b/superset/assets/javascripts/dashboard/v2/stylesheets/components/chart.less
index 80204fd..c82c253 100644
--- a/superset/assets/javascripts/dashboard/v2/stylesheets/components/chart.less
+++ b/superset/assets/javascripts/dashboard/v2/stylesheets/components/chart.less
@@ -1,10 +1,10 @@
-.dashboard-component-chart {
+.dashboard-component-chart-holder {
width: 100%;
height: 100%;
color: @gray-dark;
background-color: white;
position: relative;
- overflow: hidden;
+ padding: 16px
}
.dashboard-chart {
@@ -15,11 +15,11 @@
overflow: visible;
}
-.dashboard-v2--editing .dashboard-component-chart {
+.dashboard-v2--editing .dashboard-component-chart-holder {
border: 1px solid transparent;
}
-.dashboard-v2--editing .dashboard-component-chart:after {
+.dashboard-v2--editing .dashboard-component-chart-holder:after {
content: "";
position: absolute;
width: 100%;
@@ -32,31 +32,30 @@
}
-.dashboard-v2--editing .resizable-container:hover > .dashboard-component-chart:after,
-.dashboard-v2--editing .dashboard-component-chart:hover:after {
+.dashboard-v2--editing .resizable-container:hover > .dashboard-component-chart-holder:after,
+.dashboard-v2--editing .dashboard-component-chart-holder:hover:after {
border: 1.4px solid @gray;
}
-.dashboard-v2--editing .resizable-container.resizable-container--resizing:hover > .dashboard-component-chart:after {
+.dashboard-v2--editing .resizable-container.resizable-container--resizing:hover > .dashboard-component-chart-holder:after {
border: 1.4px solid @indicator-color;
}
-.dashboard-v2--editing .dashboard-component-chart .dashboard-chart .chart-container {
+.dashboard-v2--editing .dashboard-component-chart-holder .dashboard-chart .chart-container {
cursor: move;
opacity: 0.7;
}
-.dashboard-v2--editing .dashboard-component-chart:hover .dashboard-chart .chart-container {
+.dashboard-v2--editing .dashboard-component-chart-holder:hover .dashboard-chart .chart-container {
opacity: 1;
}
-.dashboard-v2--editing .dashboard-component-chart .dashboard-chart .slice_container {
+.dashboard-v2--editing .dashboard-component-chart-holder .dashboard-chart .slice_container {
/* disable chart interactions in edit mode */
pointer-events: none;
}
-.chart-header {
+.dashboard-chart .chart-header {
font-size: 16px;
font-weight: bold;
- padding: 16px 0 0 16px;
}
diff --git a/superset/assets/javascripts/dashboard/v2/stylesheets/toast.less b/superset/assets/javascripts/dashboard/v2/stylesheets/toast.less
index a508637..1d1ebc5 100644
--- a/superset/assets/javascripts/dashboard/v2/stylesheets/toast.less
+++ b/superset/assets/javascripts/dashboard/v2/stylesheets/toast.less
@@ -13,8 +13,7 @@
opacity: 0;
position: relative;
white-space: pre-line;
- box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.15);
- border-radius: 2px;
+ box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.35);
will-change: transform, opacity;
transform: translateY(-100%);
transition: transform .3s, opacity .3s;
@@ -38,7 +37,7 @@
position: absolute;
top: 0;
left: 0;
- width: 4px;
+ width: 6px;
height: 100%;
}
diff --git a/superset/assets/stylesheets/dashboard.less b/superset/assets/stylesheets/dashboard.less
index ce69ac7..9e4584a 100644
--- a/superset/assets/stylesheets/dashboard.less
+++ b/superset/assets/stylesheets/dashboard.less
@@ -5,7 +5,7 @@
.dropdown.btn-group {
position: absolute;
- right: 16px;
+ right: 0;
}
.dropdown-menu.dropdown-menu-right {
--
To stop receiving notification emails like this one, please contact
ccwilliams@apache.org.