From 3c28ed5c317b0ae64a9227c5a5f15d380ed910a2 Mon Sep 17 00:00:00 2001 From: Phillip Kelley-Dotson Date: Thu, 10 Dec 2020 14:59:53 -0800 Subject: [PATCH 01/43] update to datsource tab --- .../components/ControlPanelsContainer.jsx | 7 +- .../explore/components/DatasourceMetrics.tsx | 119 ++++++++++++++++++ .../components/ExploreViewContainer.jsx | 82 +++++++++++- .../components/controls/DatasourceControl.jsx | 76 ++++------- 4 files changed, 225 insertions(+), 59 deletions(-) create mode 100644 superset-frontend/src/explore/components/DatasourceMetrics.tsx diff --git a/superset-frontend/src/explore/components/ControlPanelsContainer.jsx b/superset-frontend/src/explore/components/ControlPanelsContainer.jsx index 0624e0a1d07ac..01a06c945d040 100644 --- a/superset-frontend/src/explore/components/ControlPanelsContainer.jsx +++ b/superset-frontend/src/explore/components/ControlPanelsContainer.jsx @@ -159,7 +159,11 @@ class ControlPanelsContainer extends React.Component { // When the item is a React element return controlItem; } - if (controlItem.name && controlItem.config) { + if ( + controlItem.name && + controlItem.config && + controlItem.name !== 'datasource' + ) { return this.renderControl(controlItem); } return null; @@ -204,7 +208,6 @@ class ControlPanelsContainer extends React.Component { displaySectionsToRender.push(section); } }); - const showCustomizeTab = displaySectionsToRender.length > 0; return ( diff --git a/superset-frontend/src/explore/components/DatasourceMetrics.tsx b/superset-frontend/src/explore/components/DatasourceMetrics.tsx new file mode 100644 index 0000000000000..b8d56d2c058fb --- /dev/null +++ b/superset-frontend/src/explore/components/DatasourceMetrics.tsx @@ -0,0 +1,119 @@ +/** + * Licensed to the Apache Software Foundation (ASF) under one + * or more contributor license agreements. See the NOTICE file + * distributed with this work for additional information + * regarding copyright ownership. The ASF licenses this file + * to you under the Apache License, Version 2.0 (the + * "License"); you may not use this file except in compliance + * with the License. You may obtain a copy of the License at + * + * http://www.apache.org/licenses/LICENSE-2.0 + * + * Unless required by applicable law or agreed to in writing, + * software distributed under the License is distributed on an + * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY + * KIND, either express or implied. See the License for the + * specific language governing permissions and limitations + * under the License. + */ +import React from 'react'; +import { styled, t } from '@superset-ui/core'; +import { Collapse } from 'src/common/components'; +import { ColumnOption, MetricOption } from '@superset-ui/chart-controls'; +import Control from './Control'; + +type DatasourceControl = { + validationErrors: any; + mapStateToProps: () => void; +} + +interface Props { + datasource: { + columns: Array; + metrics: Array; + }; + controls: { + datasource: DatasourceControl; + }; + actions: any; +} + +const DatasourceContainer = styled.div` + background-color: ${({ theme }) => theme.colors.grayscale.light4}; + .ant-collapse + > .ant-collapse-item + > .ant-collapse-header + .ant-collapse-arrow { + right: ${({ theme }) => theme.gridUnit * -50}px; + } + .ant-collapse > .ant-collapse-item > .ant-collapse-header { + padding-left: 10px; + } + .form-control.input-sm { + margin-bottom: ${({ theme }) => theme.gridUnit * 3}px; + } + .ant-collapse-item { + background-color: ${({ theme }) => theme.colors.grayscale.light4}; + } + .ant-collapse-item.ant-collapse-item-active { + .anticon.anticon-right.ant-collapse-arrow > svg { + transform: rotate(-90deg) !important; + } + } +`; + +const maxNumColumns = 50; + +const DataSourceMetrics = ({ + datasource, + controls: { datasource: datasourceControl }, + actions, +}: Props) => { + console.log('datasource', datasource); + return ( + + + + + + {datasource.columns.slice(0, maxNumColumns).map(col => ( +
+ +
+ ))} + {datasource.columns.length > maxNumColumns && ( +
...
+ )} + + + + + {datasource.metrics.slice(0, maxNumColumns).map(m => ( +
+ +
+ ))} + {datasource.columns.length > maxNumColumns && ( +
...
+ )} + + + + ); +}; + +export default DataSourceMetrics; diff --git a/superset-frontend/src/explore/components/ExploreViewContainer.jsx b/superset-frontend/src/explore/components/ExploreViewContainer.jsx index fd6d1e00b3815..3940d7b3ec576 100644 --- a/superset-frontend/src/explore/components/ExploreViewContainer.jsx +++ b/superset-frontend/src/explore/components/ExploreViewContainer.jsx @@ -23,10 +23,12 @@ import { bindActionCreators } from 'redux'; import { connect } from 'react-redux'; import { styled, logging, t } from '@superset-ui/core'; +import Icon from 'src/components/Icon'; import ExploreChartPanel from './ExploreChartPanel'; import ConnectedControlPanelsContainer from './ControlPanelsContainer'; import SaveModal from './SaveModal'; import QueryAndSaveBtns from './QueryAndSaveBtns'; +import DataSourceMetrics from './DatasourceMetrics'; import { getExploreLongUrl } from '../exploreUtils'; import { areObjectsEqual } from '../../reduxUtils'; import { getFormDataFromControls } from '../controlUtils'; @@ -72,6 +74,35 @@ const Styles = styled.div` padding: 0 ${({ theme }) => 2 * theme.gridUnit}px; max-height: 100%; } + .title-container { + position: relative; + display: flex; + flex-direction: row; + margin-bottom: 20px; + .action-button { + position: absolute; + top: -5px; + right: 10px; + } + .horizontal-text { + top: -5px; + position: absolute; + text-transform: uppercase; + color: #879399; + font-size: 12px; + } + } + .no-show { + display: none; + } + .vertical-text { + writing-mode: vertical-rl; + text-orientation: mixed; + } + .sidebar { + width: 30px; + height: 100%; + } `; class ExploreViewContainer extends React.Component { @@ -84,6 +115,7 @@ class ExploreViewContainer extends React.Component { showModal: false, chartIsStale: false, refreshOverlayVisible: false, + collapse: true, }; this.addHistory = this.addHistory.bind(this); @@ -93,6 +125,7 @@ class ExploreViewContainer extends React.Component { this.onQuery = this.onQuery.bind(this); this.toggleModal = this.toggleModal.bind(this); this.handleKeydown = this.handleKeydown.bind(this); + this.handleCollapse = this.handleCollapse.bind(this); } componentDidMount() { @@ -259,6 +292,10 @@ class ExploreViewContainer extends React.Component { } } + handleCollapse() { + this.setState(prevState => ({ collapse: !prevState.collapse })); + } + handleResize() { clearTimeout(this.resizeTimer); this.resizeTimer = setTimeout(() => { @@ -326,10 +363,10 @@ class ExploreViewContainer extends React.Component { } render() { + const { collapse } = this.state; if (this.props.standalone) { return this.renderChartContainer(); } - return ( {this.state.showModal && ( @@ -340,7 +377,43 @@ class ExploreViewContainer extends React.Component { sliceName={this.props.sliceName} /> )} -
+ +
+
+ Datasource + + + +
+ +
+ {collapse ? ( +
+ + + + Datasource +
+ ) : null} +
-
{this.renderChartContainer()}
+
+ {this.renderChartContainer()} +
); } @@ -372,7 +447,6 @@ function mapStateToProps(state) { const form_data = getFormDataFromControls(explore.controls); const chartKey = Object.keys(charts)[0]; const chart = charts[chartKey]; - return { isDatasourceMetaLoading: explore.isDatasourceMetaLoading, datasource: explore.datasource, diff --git a/superset-frontend/src/explore/components/controls/DatasourceControl.jsx b/superset-frontend/src/explore/components/controls/DatasourceControl.jsx index f8f79d36499ff..15b0c7142b547 100644 --- a/superset-frontend/src/explore/components/controls/DatasourceControl.jsx +++ b/superset-frontend/src/explore/components/controls/DatasourceControl.jsx @@ -22,6 +22,7 @@ import { Col, Collapse, Row, Well } from 'react-bootstrap'; import { t, styled, supersetTheme } from '@superset-ui/core'; import { ColumnOption, MetricOption } from '@superset-ui/chart-controls'; +import Select from 'src/components/Select'; import { Dropdown, Menu } from 'src/common/components'; import { Tooltip } from 'src/common/components/Tooltip'; import Icon from 'src/components/Icon'; @@ -77,6 +78,27 @@ const Styles = styled.div` .datasource-controls { display: flex; } + .title-select { + position: absolute; + left: 32px; + right: 32px; + width: ${({ theme }) => theme.gridUnit * 65}px; + display: inline-block; + .Select__control { + background-color: #f0f0f0; + } + } + .dataset-svg { + position: absolute; + let: 0; + top: 1px; + vertical-align: -9px; + margin-right: 10px; + } + .container { + position: relative; + height: 30px; + } `; /** @@ -107,7 +129,6 @@ class DatasourceControl extends React.PureComponent { ); this.toggleEditDatasourceModal = this.toggleEditDatasourceModal.bind(this); this.toggleShowDatasource = this.toggleShowDatasource.bind(this); - this.renderDatasource = this.renderDatasource.bind(this); this.handleMenuItemClick = this.handleMenuItemClick.bind(this); } @@ -153,56 +174,8 @@ class DatasourceControl extends React.PureComponent { } } - renderDatasource() { - const { datasource } = this.props; - const { showDatasource } = this.state; - const maxNumColumns = 50; - return ( -
- -
- - {` ${datasource.database.name} `} -
- {showDatasource && ( - - - Columns - {datasource.columns.slice(0, maxNumColumns).map(col => ( -
- -
- ))} - {datasource.columns.length > maxNumColumns && ( -
...
- )} - - - Metrics - {datasource.metrics.slice(0, maxNumColumns).map(m => ( -
- -
- ))} - {datasource.columns.length > maxNumColumns && ( -
...
- )} - - - )} - -
- ); - } - render() { - const { - showChangeDatasourceModal, - showEditDatasourceModal, - showDatasource, - } = this.state; + const { showChangeDatasourceModal, showEditDatasourceModal } = this.state; const { datasource, onChange } = this.props; const datasourceMenu = ( @@ -259,9 +232,6 @@ class DatasourceControl extends React.PureComponent {
- - {this.renderDatasource()} - {showEditDatasourceModal && ( Date: Fri, 11 Dec 2020 00:22:53 -0800 Subject: [PATCH 02/43] second update --- .../explore/components/DatasourceMetrics.tsx | 49 ++++++++++++++----- .../components/ExploreViewContainer.jsx | 20 +++++--- .../components/controls/DatasourceControl.jsx | 14 ++---- 3 files changed, 55 insertions(+), 28 deletions(-) diff --git a/superset-frontend/src/explore/components/DatasourceMetrics.tsx b/superset-frontend/src/explore/components/DatasourceMetrics.tsx index b8d56d2c058fb..36725369180a2 100644 --- a/superset-frontend/src/explore/components/DatasourceMetrics.tsx +++ b/superset-frontend/src/explore/components/DatasourceMetrics.tsx @@ -16,7 +16,7 @@ * specific language governing permissions and limitations * under the License. */ -import React from 'react'; +import React, { useState } from 'react'; import { styled, t } from '@superset-ui/core'; import { Collapse } from 'src/common/components'; import { ColumnOption, MetricOption } from '@superset-ui/chart-controls'; @@ -25,7 +25,7 @@ import Control from './Control'; type DatasourceControl = { validationErrors: any; mapStateToProps: () => void; -} +}; interface Props { datasource: { @@ -60,6 +60,9 @@ const DatasourceContainer = styled.div` transform: rotate(-90deg) !important; } } + .header { + font-size: ${({ theme }) => theme.typography.sizes.l}px; + } `; const maxNumColumns = 50; @@ -69,7 +72,22 @@ const DataSourceMetrics = ({ controls: { datasource: datasourceControl }, actions, }: Props) => { - console.log('datasource', datasource); + const [lists, setColList] = useState({ + columns: datasource.columns, + metrics: datasource.metrics, + }); + const search = (e: string) => { + const columns = datasource.columns.filter( + obj => obj.column_name.indexOf(e.target.value) !== -1, + ); + const metrics = lists.metrics.filter( + objs => objs.metric_name.indexOf(e.target.value) !== -1, + ); + if (e.target.value === '') { + setColList({ columns: datasource.columns, metrics: datasource.metrics }); + } else setColList({ columns, metrics }); + }; + return ( - - - {datasource.columns.slice(0, maxNumColumns).map(col => ( + + Columns} + key="column" + > + {lists.columns.slice(0, maxNumColumns).map(col => (
@@ -101,8 +125,11 @@ const DataSourceMetrics = ({ - - {datasource.metrics.slice(0, maxNumColumns).map(m => ( + Metrics} + key="metrics" + > + {lists.metrics.slice(0, maxNumColumns).map(m => (
diff --git a/superset-frontend/src/explore/components/ExploreViewContainer.jsx b/superset-frontend/src/explore/components/ExploreViewContainer.jsx index 3940d7b3ec576..dce13505f4276 100644 --- a/superset-frontend/src/explore/components/ExploreViewContainer.jsx +++ b/superset-frontend/src/explore/components/ExploreViewContainer.jsx @@ -21,7 +21,7 @@ import React from 'react'; import PropTypes from 'prop-types'; import { bindActionCreators } from 'redux'; import { connect } from 'react-redux'; -import { styled, logging, t } from '@superset-ui/core'; +import { styled, logging, t, supersetTheme } from '@superset-ui/core'; import Icon from 'src/components/Icon'; import ExploreChartPanel from './ExploreChartPanel'; @@ -81,11 +81,11 @@ const Styles = styled.div` margin-bottom: 20px; .action-button { position: absolute; - top: -5px; + top: ${({ theme }) => theme.gridUnit * 0}px; right: 10px; } .horizontal-text { - top: -5px; + top: ${({ theme }) => theme.gridUnit * -2}px; position: absolute; text-transform: uppercase; color: #879399; @@ -103,6 +103,12 @@ const Styles = styled.div` width: 30px; height: 100%; } + .data-tab { + width: 280px; + } + .callpase-icon { + color: ${({ theme }) => theme.colors.primary.base}; + } `; class ExploreViewContainer extends React.Component { @@ -378,7 +384,7 @@ class ExploreViewContainer extends React.Component { /> )} -
+
Datasource - +
- + Datasource
@@ -432,7 +438,7 @@ class ExploreViewContainer extends React.Component { isDatasourceMetaLoading={this.props.isDatasourceMetaLoading} />
-
+
{this.renderChartContainer()}
diff --git a/superset-frontend/src/explore/components/controls/DatasourceControl.jsx b/superset-frontend/src/explore/components/controls/DatasourceControl.jsx index 15b0c7142b547..77dec8c930452 100644 --- a/superset-frontend/src/explore/components/controls/DatasourceControl.jsx +++ b/superset-frontend/src/explore/components/controls/DatasourceControl.jsx @@ -79,25 +79,19 @@ const Styles = styled.div` display: flex; } .title-select { - position: absolute; - left: 32px; - right: 32px; - width: ${({ theme }) => theme.gridUnit * 65}px; + width: ${({ theme }) => theme.gridUnit * 50}px; display: inline-block; .Select__control { background-color: #f0f0f0; } } .dataset-svg { - position: absolute; - let: 0; - top: 1px; vertical-align: -9px; margin-right: 10px; } - .container { - position: relative; - height: 30px; + .data-container { + } + .datasource-modal-trigger.ant-dropdown-trigger { } `; From cb6efe7dea86275cf4810e78a9bd0776f8009871 Mon Sep 17 00:00:00 2001 From: Phillip Kelley-Dotson Date: Fri, 11 Dec 2020 13:14:55 -0800 Subject: [PATCH 03/43] style updates --- .../components/ExploreViewContainer.jsx | 18 ++++++--- .../components/controls/DatasourceControl.jsx | 39 ++++++------------- 2 files changed, 24 insertions(+), 33 deletions(-) diff --git a/superset-frontend/src/explore/components/ExploreViewContainer.jsx b/superset-frontend/src/explore/components/ExploreViewContainer.jsx index dce13505f4276..77da7ae0f7c61 100644 --- a/superset-frontend/src/explore/components/ExploreViewContainer.jsx +++ b/superset-frontend/src/explore/components/ExploreViewContainer.jsx @@ -81,7 +81,7 @@ const Styles = styled.div` margin-bottom: 20px; .action-button { position: absolute; - top: ${({ theme }) => theme.gridUnit * 0}px; + top: ${({ theme }) => theme.gridUnit * -3}px; right: 10px; } .horizontal-text { @@ -106,7 +106,7 @@ const Styles = styled.div` .data-tab { width: 280px; } - .callpase-icon { + .callpase-icon > svg { color: ${({ theme }) => theme.colors.primary.base}; } `; @@ -393,7 +393,11 @@ class ExploreViewContainer extends React.Component { className="action-button" onClick={this.handleCollapse} > - +
- + - Datasource + ) : null}
theme.colors.primary.base}; - vertical-align: middle; + vertical-align: ${({ theme }) => theme.gridUnit + 2}px; cursor: pointer; } @@ -79,31 +73,20 @@ const Styles = styled.div` display: flex; } .title-select { - width: ${({ theme }) => theme.gridUnit * 50}px; + width: ${({ theme }) => theme.gridUnit * 43}px; display: inline-block; - .Select__control { - background-color: #f0f0f0; - } + background-color: #f0f0f0; + padding: ${({ theme }) => theme.gridUnit * 2}px; + border-radius: 3px; + text-align: center; + text-overflow: ellipsis; + white-space: nowrap; + overflow: hidden; } .dataset-svg { - vertical-align: -9px; + vertical-align: ${({ theme }) => theme.gridUnit + 2}px; margin-right: 10px; } - .data-container { - } - .datasource-modal-trigger.ant-dropdown-trigger { - } -`; - -/** - * used in column details. - */ -const ColumnsCol = styled(Col)` - overflow: auto; /* for very very long columns names */ - white-space: nowrap; /* make sure tooltip trigger is on the same line as the metric */ - .and-more { - padding-left: 38px; - } `; const CHANGE_DATASET = 'change_dataset'; From cd120061720bf90226cf18a894cb1407e865b107 Mon Sep 17 00:00:00 2001 From: Phillip Kelley-Dotson Date: Fri, 11 Dec 2020 15:35:16 -0800 Subject: [PATCH 04/43] update style and fix metrics bug --- .../explore/components/DatasourceMetrics.tsx | 33 ++++++++++++------- .../components/controls/DatasourceControl.jsx | 2 +- 2 files changed, 22 insertions(+), 13 deletions(-) diff --git a/superset-frontend/src/explore/components/DatasourceMetrics.tsx b/superset-frontend/src/explore/components/DatasourceMetrics.tsx index 36725369180a2..9870b5a0287e7 100644 --- a/superset-frontend/src/explore/components/DatasourceMetrics.tsx +++ b/superset-frontend/src/explore/components/DatasourceMetrics.tsx @@ -16,15 +16,21 @@ * specific language governing permissions and limitations * under the License. */ -import React, { useState } from 'react'; -import { styled, t } from '@superset-ui/core'; +import React, { useEffect, useState } from 'react'; +import { styled, t, QueryFormData } from '@superset-ui/core'; import { Collapse } from 'src/common/components'; -import { ColumnOption, MetricOption } from '@superset-ui/chart-controls'; +import { + ColumnOption, + MetricOption, + ControlType, +} from '@superset-ui/chart-controls'; import Control from './Control'; type DatasourceControl = { validationErrors: any; - mapStateToProps: () => void; + mapStateToProps: QueryFormData; + type: ControlType; + label: string; }; interface Props { @@ -76,28 +82,31 @@ const DataSourceMetrics = ({ columns: datasource.columns, metrics: datasource.metrics, }); - const search = (e: string) => { + const search = ({ target: { value } }: { target: { value: string } }) => { const columns = datasource.columns.filter( - obj => obj.column_name.indexOf(e.target.value) !== -1, + obj => obj.column_name.indexOf(value) !== -1, ); const metrics = lists.metrics.filter( - objs => objs.metric_name.indexOf(e.target.value) !== -1, + objs => objs.metric_name.indexOf(value) !== -1, ); - if (e.target.value === '') { + if (value === '') { setColList({ columns: datasource.columns, metrics: datasource.metrics }); } else setColList({ columns, metrics }); }; - + useEffect(() => { + setColList({ + columns: datasource.columns, + metrics: datasource.metrics, + }); + }, [datasource]); return ( theme.gridUnit * 43}px; + width: ${({ theme }) => theme.gridUnit * 46}px; display: inline-block; background-color: #f0f0f0; padding: ${({ theme }) => theme.gridUnit * 2}px; From 87eb348af24d8f324d142f8ae18fd9cd6e08d871 Mon Sep 17 00:00:00 2001 From: Phillip Kelley-Dotson Date: Mon, 14 Dec 2020 15:05:33 -0800 Subject: [PATCH 05/43] updates to datsource panel --- .../explore/components/DatasourcePanel_spec.tsx | 0 .../{DatasourceMetrics.tsx => DatasourcePanel.tsx} | 14 ++++++++++++-- .../explore/components/ExploreViewContainer.jsx | 10 +++++----- 3 files changed, 17 insertions(+), 7 deletions(-) create mode 100644 superset-frontend/spec/javascripts/explore/components/DatasourcePanel_spec.tsx rename superset-frontend/src/explore/components/{DatasourceMetrics.tsx => DatasourcePanel.tsx} (94%) diff --git a/superset-frontend/spec/javascripts/explore/components/DatasourcePanel_spec.tsx b/superset-frontend/spec/javascripts/explore/components/DatasourcePanel_spec.tsx new file mode 100644 index 0000000000000..e69de29bb2d1d diff --git a/superset-frontend/src/explore/components/DatasourceMetrics.tsx b/superset-frontend/src/explore/components/DatasourcePanel.tsx similarity index 94% rename from superset-frontend/src/explore/components/DatasourceMetrics.tsx rename to superset-frontend/src/explore/components/DatasourcePanel.tsx index 9870b5a0287e7..766e2de00025e 100644 --- a/superset-frontend/src/explore/components/DatasourceMetrics.tsx +++ b/superset-frontend/src/explore/components/DatasourcePanel.tsx @@ -68,12 +68,22 @@ const DatasourceContainer = styled.div` } .header { font-size: ${({ theme }) => theme.typography.sizes.l}px; + margin-left: -10px; + } + .type-label { + // margin- + } + .ant-collapse-content-box > div > span { + margin-left: -14px; + } + .ant-collapse-contnet-box > div > div { + margin-left -25px; } `; const maxNumColumns = 50; -const DataSourceMetrics = ({ +const DataSourcePanel = ({ datasource, controls: { datasource: datasourceControl }, actions, @@ -152,4 +162,4 @@ const DataSourceMetrics = ({ ); }; -export default DataSourceMetrics; +export default DataSourcePanel; diff --git a/superset-frontend/src/explore/components/ExploreViewContainer.jsx b/superset-frontend/src/explore/components/ExploreViewContainer.jsx index 77da7ae0f7c61..dbaf5c7e797c5 100644 --- a/superset-frontend/src/explore/components/ExploreViewContainer.jsx +++ b/superset-frontend/src/explore/components/ExploreViewContainer.jsx @@ -28,7 +28,7 @@ import ExploreChartPanel from './ExploreChartPanel'; import ConnectedControlPanelsContainer from './ControlPanelsContainer'; import SaveModal from './SaveModal'; import QueryAndSaveBtns from './QueryAndSaveBtns'; -import DataSourceMetrics from './DatasourceMetrics'; +import DataSourcePanel from './DatasourcePanel'; import { getExploreLongUrl } from '../exploreUtils'; import { areObjectsEqual } from '../../reduxUtils'; import { getFormDataFromControls } from '../controlUtils'; @@ -104,7 +104,7 @@ const Styles = styled.div` height: 100%; } .data-tab { - width: 280px; + min-width: 280px; } .callpase-icon > svg { color: ${({ theme }) => theme.colors.primary.base}; @@ -400,7 +400,7 @@ class ExploreViewContainer extends React.Component { />
- -
+
{this.renderChartContainer()}
From 620889446aa788c0a4848b8dbd84da978dcc75a5 Mon Sep 17 00:00:00 2001 From: Evan Rusackas Date: Mon, 14 Dec 2020 15:01:58 -0800 Subject: [PATCH 06/43] backgrounds and borders --- .../explore/components/ExploreViewContainer.jsx | 15 ++++++++++++--- .../src/explore/components/QueryAndSaveBtns.jsx | 2 +- 2 files changed, 13 insertions(+), 4 deletions(-) diff --git a/superset-frontend/src/explore/components/ExploreViewContainer.jsx b/superset-frontend/src/explore/components/ExploreViewContainer.jsx index dbaf5c7e797c5..b268ba150811b 100644 --- a/superset-frontend/src/explore/components/ExploreViewContainer.jsx +++ b/superset-frontend/src/explore/components/ExploreViewContainer.jsx @@ -59,6 +59,9 @@ const propTypes = { }; const Styles = styled.div` + /* &.light { */ + background: ${({ theme }) => theme.colors.grayscale.light5}; + /* } */ height: ${({ height }) => height}; min-height: ${({ height }) => height}; text-align: left; @@ -68,11 +71,16 @@ const Styles = styled.div` flex-direction: row; flex-wrap: nowrap; align-items: stretch; + border-top: 1px solid ${({ theme }) => theme.colors.grayscale.light2}; .control-pane { + border-right: 1px solid ${({ theme }) => theme.colors.grayscale.light2}; display: flex; flex-direction: column; padding: 0 ${({ theme }) => 2 * theme.gridUnit}px; max-height: 100%; + &.bg { + background-color: ${({ theme }) => theme.colors.grayscale.light4}; + } } .title-container { position: relative; @@ -81,11 +89,9 @@ const Styles = styled.div` margin-bottom: 20px; .action-button { position: absolute; - top: ${({ theme }) => theme.gridUnit * -3}px; right: 10px; } .horizontal-text { - top: ${({ theme }) => theme.gridUnit * -2}px; position: absolute; text-transform: uppercase; color: #879399; @@ -102,6 +108,9 @@ const Styles = styled.div` .sidebar { width: 30px; height: 100%; + background-color: ${({ theme }) => theme.colors.grayscale.light4}; + text-align: center; + padding: 0 ${({ theme }) => 2 * theme.gridUnit}px; } .data-tab { min-width: 280px; @@ -384,7 +393,7 @@ class ExploreViewContainer extends React.Component { /> )} -
+
Datasource 2 * theme.gridUnit}px; + padding-top: ${({ theme }) => 2 * theme.gridUnit}px; .btn { /* just to make sure buttons don't jiggle */ From 6f3d07ee86b87210a714d7c4b4082125a2f7a7cd Mon Sep 17 00:00:00 2001 From: Phillip Kelley-Dotson Date: Mon, 14 Dec 2020 15:37:27 -0800 Subject: [PATCH 07/43] more updates --- .../src/explore/components/DatasourcePanel.tsx | 11 ++++------- .../src/explore/components/ExploreViewContainer.jsx | 4 +++- .../explore/components/controls/DatasourceControl.jsx | 2 +- 3 files changed, 8 insertions(+), 9 deletions(-) diff --git a/superset-frontend/src/explore/components/DatasourcePanel.tsx b/superset-frontend/src/explore/components/DatasourcePanel.tsx index 766e2de00025e..5891a586986ee 100644 --- a/superset-frontend/src/explore/components/DatasourcePanel.tsx +++ b/superset-frontend/src/explore/components/DatasourcePanel.tsx @@ -68,16 +68,13 @@ const DatasourceContainer = styled.div` } .header { font-size: ${({ theme }) => theme.typography.sizes.l}px; - margin-left: -10px; - } - .type-label { - // margin- + margin-left: ${({ theme }) => theme.gridUnit * -2}px; } .ant-collapse-content-box > div > span { - margin-left: -14px; + margin-left: ${({ theme }) => theme.gridUnit * -3}px; } - .ant-collapse-contnet-box > div > div { - margin-left -25px; + .ant-collapse-content-box > div > div { + margin-left ${({ theme }) => theme.gridUnit * -6}px; } `; diff --git a/superset-frontend/src/explore/components/ExploreViewContainer.jsx b/superset-frontend/src/explore/components/ExploreViewContainer.jsx index b268ba150811b..68281ba47be30 100644 --- a/superset-frontend/src/explore/components/ExploreViewContainer.jsx +++ b/superset-frontend/src/explore/components/ExploreViewContainer.jsx @@ -406,6 +406,7 @@ class ExploreViewContainer extends React.Component { name="expand" color={supersetTheme.colors.primary.base} className="collapse-icon" + width={16} />
@@ -427,9 +428,10 @@ class ExploreViewContainer extends React.Component { name="collapse" color={supersetTheme.colors.primary.base} className="collapse-icon" + width={16} /> - +
) : null}
theme.gridUnit * 46}px; + width: ${({ theme }) => theme.gridUnit * 49}px; display: inline-block; background-color: #f0f0f0; padding: ${({ theme }) => theme.gridUnit * 2}px; From 2c44f0ac46625064cad3a2ef14981dc6e27be7a5 Mon Sep 17 00:00:00 2001 From: Evan Rusackas Date: Mon, 14 Dec 2020 15:27:37 -0800 Subject: [PATCH 08/43] shuffling some paddings around --- .../components/ExploreViewContainer.jsx | 21 +++++++------------ .../explore/components/QueryAndSaveBtns.jsx | 2 -- 2 files changed, 8 insertions(+), 15 deletions(-) diff --git a/superset-frontend/src/explore/components/ExploreViewContainer.jsx b/superset-frontend/src/explore/components/ExploreViewContainer.jsx index 68281ba47be30..da8267d06f209 100644 --- a/superset-frontend/src/explore/components/ExploreViewContainer.jsx +++ b/superset-frontend/src/explore/components/ExploreViewContainer.jsx @@ -76,7 +76,7 @@ const Styles = styled.div` border-right: 1px solid ${({ theme }) => theme.colors.grayscale.light2}; display: flex; flex-direction: column; - padding: 0 ${({ theme }) => 2 * theme.gridUnit}px; + padding: ${({ theme }) => 2 * theme.gridUnit}px; max-height: 100%; &.bg { background-color: ${({ theme }) => theme.colors.grayscale.light4}; @@ -86,16 +86,12 @@ const Styles = styled.div` position: relative; display: flex; flex-direction: row; - margin-bottom: 20px; - .action-button { - position: absolute; - right: 10px; - } + margin-bottom: ${({ theme }) => 2 * theme.gridUnit}px; + justify-content: space-between; .horizontal-text { - position: absolute; text-transform: uppercase; - color: #879399; - font-size: 12px; + color: ${({ theme }) => theme.colors.grayscale.light1}; + font-size: ${({ theme }) => 4 * theme.typography.sizes.s}; } } .no-show { @@ -106,14 +102,13 @@ const Styles = styled.div` text-orientation: mixed; } .sidebar { - width: 30px; height: 100%; background-color: ${({ theme }) => theme.colors.grayscale.light4}; - text-align: center; - padding: 0 ${({ theme }) => 2 * theme.gridUnit}px; + padding: ${({ theme }) => 2 * theme.gridUnit}px; + width: ${({ theme }) => 10 * theme.gridUnit}px; } .data-tab { - min-width: 280px; + min-width: 288px; } .callpase-icon > svg { color: ${({ theme }) => theme.colors.primary.base}; diff --git a/superset-frontend/src/explore/components/QueryAndSaveBtns.jsx b/superset-frontend/src/explore/components/QueryAndSaveBtns.jsx index 049efac1df8bb..36c4b4e80fb70 100644 --- a/superset-frontend/src/explore/components/QueryAndSaveBtns.jsx +++ b/superset-frontend/src/explore/components/QueryAndSaveBtns.jsx @@ -58,8 +58,6 @@ const Styles = styled.div` flex-shrink: 0; flex-direction: row; align-items: center; - padding-top: ${({ theme }) => 2 * theme.gridUnit}px; - .btn { /* just to make sure buttons don't jiggle */ width: 100px; From 1fbf5e12ac02438e9d7784242045336852c715fa Mon Sep 17 00:00:00 2001 From: Phillip Kelley-Dotson Date: Mon, 14 Dec 2020 16:00:41 -0800 Subject: [PATCH 09/43] more updates --- superset-frontend/src/explore/components/DatasourcePanel.tsx | 3 +++ .../src/explore/components/controls/DatasourceControl.jsx | 2 +- 2 files changed, 4 insertions(+), 1 deletion(-) diff --git a/superset-frontend/src/explore/components/DatasourcePanel.tsx b/superset-frontend/src/explore/components/DatasourcePanel.tsx index 5891a586986ee..91be5cafad5df 100644 --- a/superset-frontend/src/explore/components/DatasourcePanel.tsx +++ b/superset-frontend/src/explore/components/DatasourcePanel.tsx @@ -60,6 +60,9 @@ const DatasourceContainer = styled.div` } .ant-collapse-item { background-color: ${({ theme }) => theme.colors.grayscale.light4}; + .anticon.anticon-right.ant-collapse-arrow > svg { + transform: rotate(90deg) !important; + } } .ant-collapse-item.ant-collapse-item-active { .anticon.anticon-right.ant-collapse-arrow > svg { diff --git a/superset-frontend/src/explore/components/controls/DatasourceControl.jsx b/superset-frontend/src/explore/components/controls/DatasourceControl.jsx index 0116506492cb1..234cf102cb45e 100644 --- a/superset-frontend/src/explore/components/controls/DatasourceControl.jsx +++ b/superset-frontend/src/explore/components/controls/DatasourceControl.jsx @@ -73,7 +73,7 @@ const Styles = styled.div` display: flex; } .title-select { - width: ${({ theme }) => theme.gridUnit * 49}px; + width: ${({ theme }) => theme.gridUnit * 52}px; display: inline-block; background-color: #f0f0f0; padding: ${({ theme }) => theme.gridUnit * 2}px; From 0b84909b77e9f5047833bebc6cea9ef0cd8c3b8f Mon Sep 17 00:00:00 2001 From: Evan Rusackas Date: Mon, 14 Dec 2020 16:14:11 -0800 Subject: [PATCH 10/43] moving some more paddings around! --- .../explore/components/DatasourcePanel.tsx | 84 ++++++++++--------- .../components/ExploreViewContainer.jsx | 20 ++--- .../explore/components/QueryAndSaveBtns.jsx | 1 + .../components/controls/DatasourceControl.jsx | 9 ++ 4 files changed, 62 insertions(+), 52 deletions(-) diff --git a/superset-frontend/src/explore/components/DatasourcePanel.tsx b/superset-frontend/src/explore/components/DatasourcePanel.tsx index 91be5cafad5df..e7badbb41fe6d 100644 --- a/superset-frontend/src/explore/components/DatasourcePanel.tsx +++ b/superset-frontend/src/explore/components/DatasourcePanel.tsx @@ -46,6 +46,9 @@ interface Props { const DatasourceContainer = styled.div` background-color: ${({ theme }) => theme.colors.grayscale.light4}; + .field-selections { + padding: 0 ${({ theme }) => 2 * theme.gridUnit}px; + } .ant-collapse > .ant-collapse-item > .ant-collapse-header @@ -72,7 +75,6 @@ const DatasourceContainer = styled.div` .header { font-size: ${({ theme }) => theme.typography.sizes.l}px; margin-left: ${({ theme }) => theme.gridUnit * -2}px; - } .ant-collapse-content-box > div > span { margin-left: ${({ theme }) => theme.gridUnit * -3}px; } @@ -118,46 +120,48 @@ const DataSourcePanel = ({ actions={actions} formData={datasourceControl.mapStateToProps} /> - - - Columns} - key="column" - > - {lists.columns.slice(0, maxNumColumns).map(col => ( -
- -
- ))} - {datasource.columns.length > maxNumColumns && ( -
...
- )} - - - - Metrics} - key="metrics" +
+ + - {lists.metrics.slice(0, maxNumColumns).map(m => ( -
- -
- ))} - {datasource.columns.length > maxNumColumns && ( -
...
- )} - - + Columns} + key="column" + > + {lists.columns.slice(0, maxNumColumns).map(col => ( +
+ +
+ ))} + {datasource.columns.length > maxNumColumns && ( +
...
+ )} + + + + Metrics} + key="metrics" + > + {lists.metrics.slice(0, maxNumColumns).map(m => ( +
+ +
+ ))} + {datasource.columns.length > maxNumColumns && ( +
...
+ )} + + +
); }; diff --git a/superset-frontend/src/explore/components/ExploreViewContainer.jsx b/superset-frontend/src/explore/components/ExploreViewContainer.jsx index da8267d06f209..cb0c4f9d155ef 100644 --- a/superset-frontend/src/explore/components/ExploreViewContainer.jsx +++ b/superset-frontend/src/explore/components/ExploreViewContainer.jsx @@ -72,21 +72,21 @@ const Styles = styled.div` flex-wrap: nowrap; align-items: stretch; border-top: 1px solid ${({ theme }) => theme.colors.grayscale.light2}; - .control-pane { + .control-pane, .data-source-selection { border-right: 1px solid ${({ theme }) => theme.colors.grayscale.light2}; display: flex; flex-direction: column; - padding: ${({ theme }) => 2 * theme.gridUnit}px; + padding: ${({ theme }) => 2 * theme.gridUnit}px 0; max-height: 100%; - &.bg { - background-color: ${({ theme }) => theme.colors.grayscale.light4}; - } + } + .control-pane { + background-color: ${({ theme }) => theme.colors.grayscale.light4}; } .title-container { position: relative; display: flex; flex-direction: row; - margin-bottom: ${({ theme }) => 2 * theme.gridUnit}px; + padding: 0 ${({ theme }) => 2 * theme.gridUnit}px; justify-content: space-between; .horizontal-text { text-transform: uppercase; @@ -388,7 +388,7 @@ class ExploreViewContainer extends React.Component { /> )} -
+
Datasource
) : null} -
+
2 * theme.gridUnit}px; .btn { /* just to make sure buttons don't jiggle */ width: 100px; diff --git a/superset-frontend/src/explore/components/controls/DatasourceControl.jsx b/superset-frontend/src/explore/components/controls/DatasourceControl.jsx index 234cf102cb45e..bad44a8afe370 100644 --- a/superset-frontend/src/explore/components/controls/DatasourceControl.jsx +++ b/superset-frontend/src/explore/components/controls/DatasourceControl.jsx @@ -44,6 +44,15 @@ const defaultProps = { }; const Styles = styled.div` + + .data-container { + display: flex; + justify-content: space-between; + align-items: center; + border-bottom: 1px solid ${({ theme }) => theme.colors.grayscale.light2}; + padding: ${({ theme }) => 2 * theme.gridUnit}px; + margin-bottom: ${({ theme }) => 2 * theme.gridUnit}px; + } .ant-dropdown-trigger { margin-left: ${({ theme }) => theme.gridUnit}px; box-shadow: none; From 3a342607843e8f702fe0bbda984343469a50f112 Mon Sep 17 00:00:00 2001 From: Evan Rusackas Date: Mon, 14 Dec 2020 21:01:43 -0800 Subject: [PATCH 11/43] Fixing sidebar width --- .../src/explore/components/ExploreViewContainer.jsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/superset-frontend/src/explore/components/ExploreViewContainer.jsx b/superset-frontend/src/explore/components/ExploreViewContainer.jsx index cb0c4f9d155ef..6be60b8e393ef 100644 --- a/superset-frontend/src/explore/components/ExploreViewContainer.jsx +++ b/superset-frontend/src/explore/components/ExploreViewContainer.jsx @@ -105,7 +105,7 @@ const Styles = styled.div` height: 100%; background-color: ${({ theme }) => theme.colors.grayscale.light4}; padding: ${({ theme }) => 2 * theme.gridUnit}px; - width: ${({ theme }) => 10 * theme.gridUnit}px; + width: ${({ theme }) => 8 * theme.gridUnit}px; } .data-tab { min-width: 288px; From 723db2280f22b9a4d5c64cc746fdb7a9f956d690 Mon Sep 17 00:00:00 2001 From: Evan Rusackas Date: Mon, 14 Dec 2020 21:02:06 -0800 Subject: [PATCH 12/43] using Global to adjust body layout --- .../components/ExploreViewContainer.jsx | 27 +++++++++++++------ 1 file changed, 19 insertions(+), 8 deletions(-) diff --git a/superset-frontend/src/explore/components/ExploreViewContainer.jsx b/superset-frontend/src/explore/components/ExploreViewContainer.jsx index 6be60b8e393ef..a2823ed3ad18e 100644 --- a/superset-frontend/src/explore/components/ExploreViewContainer.jsx +++ b/superset-frontend/src/explore/components/ExploreViewContainer.jsx @@ -21,8 +21,8 @@ import React from 'react'; import PropTypes from 'prop-types'; import { bindActionCreators } from 'redux'; import { connect } from 'react-redux'; -import { styled, logging, t, supersetTheme } from '@superset-ui/core'; - +import { styled, logging, t, supersetTheme, css } from '@superset-ui/core'; +import { Global } from '@emotion/core'; import Icon from 'src/components/Icon'; import ExploreChartPanel from './ExploreChartPanel'; import ConnectedControlPanelsContainer from './ControlPanelsContainer'; @@ -59,14 +59,11 @@ const propTypes = { }; const Styles = styled.div` - /* &.light { */ background: ${({ theme }) => theme.colors.grayscale.light5}; - /* } */ - height: ${({ height }) => height}; - min-height: ${({ height }) => height}; text-align: left; position: relative; width: 100%; + height: 100%; display: flex; flex-direction: row; flex-wrap: nowrap; @@ -378,7 +375,22 @@ class ExploreViewContainer extends React.Component { return this.renderChartContainer(); } return ( - + + div { + flex: 1 1 auto; + overflow: hidden; + } + `} + /> {this.state.showModal && ( )} -
Datasource From 195b40716c09b520d87883ff18684b1e37f3d5c5 Mon Sep 17 00:00:00 2001 From: Phillip Kelley-Dotson Date: Tue, 15 Dec 2020 05:38:16 -0800 Subject: [PATCH 13/43] update test and fix bug --- .../integration/explore/control.test.ts | 1 + .../components/DatasourcePanel_spec.tsx | 80 +++++++++++++++++++ .../explore/components/DatasourcePanel.tsx | 3 +- .../components/ExploreViewContainer.jsx | 2 +- .../components/controls/DatasourceControl.jsx | 4 +- 5 files changed, 85 insertions(+), 5 deletions(-) diff --git a/superset-frontend/cypress-base/cypress/integration/explore/control.test.ts b/superset-frontend/cypress-base/cypress/integration/explore/control.test.ts index 2bf19b2082beb..1f9269988e959 100644 --- a/superset-frontend/cypress-base/cypress/integration/explore/control.test.ts +++ b/superset-frontend/cypress-base/cypress/integration/explore/control.test.ts @@ -34,6 +34,7 @@ describe('Datasource control', () => { cy.visitChartByName('Num Births Trend'); cy.verifySliceSuccess({ waitAlias: '@postJson' }); + cy.get('[data-test="open-datasource-tab').click({ force: true }); cy.get('[data-test="datasource-menu-trigger"]').click(); cy.get('script').then(nodes => { diff --git a/superset-frontend/spec/javascripts/explore/components/DatasourcePanel_spec.tsx b/superset-frontend/spec/javascripts/explore/components/DatasourcePanel_spec.tsx index e69de29bb2d1d..ce94d5f9eeb1c 100644 --- a/superset-frontend/spec/javascripts/explore/components/DatasourcePanel_spec.tsx +++ b/superset-frontend/spec/javascripts/explore/components/DatasourcePanel_spec.tsx @@ -0,0 +1,80 @@ +/** + * Licensed to the Apache Software Foundation (ASF) under one + * or more contributor license agreements. See the NOTICE file + * distributed with this work for additional information + * regarding copyright ownership. The ASF licenses this file + * to you under the Apache License, Version 2.0 (the + * "License"); you may not use this file except in compliance + * with the License. You may obtain a copy of the License at + * + * http://www.apache.org/licenses/LICENSE-2.0 + * + * Unless required by applicable law or agreed to in writing, + * software distributed under the License is distributed on an + * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY + * KIND, either express or implied. See the License for the + * specific language governing permissions and limitations + * under the License. + */ +import React from 'react'; +import { render, screen } from '@testing-library/react'; +import { supersetTheme, ThemeProvider, QueryFormData } from '@superset-ui/core'; +import DatasourcePanel from 'src/explore/components/DatasourcePanel'; +import { ControlType } from '@superset-ui/chart-controls'; + +describe('datasourcepanel', () => { + const props = { + datasource: { + name: 'birth_names', + type: 'table', + uid: '1__table', + id: 1, + columns: [], + metrics: [], + database: { + backend: 'mysql', + name: 'main', + }, + }, + controls: { + datasource: { + validationErrors: null, + mapStateToProps: QueryFormData, + type: 'DatasourceControl', + label: 'hello', + datasource: { + name: 'birth_names', + type: 'table', + uid: '1__table', + id: 1, + columns: [], + metrics: [], + database: { + backend: 'mysql', + name: 'main', + }, + }, + }, + }, + actions: null, + }; + it('should render', () => { + const { container } = render( + + + , + ); + expect(container).toBeVisible(); + }); + + it('should display items in controls', () => { + render( + + + , + ); + expect(screen.getByText('birth_names')).toBeTruthy(); + expect(screen.getByText('Columns')).toBeTruthy(); + expect(screen.getByText('Metrics')).toBeTruthy(); + }); +}); diff --git a/superset-frontend/src/explore/components/DatasourcePanel.tsx b/superset-frontend/src/explore/components/DatasourcePanel.tsx index e7badbb41fe6d..9aa6ebabcbcca 100644 --- a/superset-frontend/src/explore/components/DatasourcePanel.tsx +++ b/superset-frontend/src/explore/components/DatasourcePanel.tsx @@ -26,11 +26,12 @@ import { } from '@superset-ui/chart-controls'; import Control from './Control'; -type DatasourceControl = { +interface DatasourceControl { validationErrors: any; mapStateToProps: QueryFormData; type: ControlType; label: string; + datasource?: any; }; interface Props { diff --git a/superset-frontend/src/explore/components/ExploreViewContainer.jsx b/superset-frontend/src/explore/components/ExploreViewContainer.jsx index a2823ed3ad18e..d764cb66721a1 100644 --- a/superset-frontend/src/explore/components/ExploreViewContainer.jsx +++ b/superset-frontend/src/explore/components/ExploreViewContainer.jsx @@ -387,7 +387,6 @@ class ExploreViewContainer extends React.Component { } body > div { flex: 1 1 auto; - overflow: hidden; } `} /> @@ -429,6 +428,7 @@ class ExploreViewContainer extends React.Component { tabIndex={0} className="action-button" onClick={this.handleCollapse} + data-test="open-datasource-tab" > {this.props.isEditable && ( @@ -206,7 +204,7 @@ class DatasourceControl extends React.PureComponent { )} From cf68d078941265fdf44b3f726cf9e34cbf6e4a22 Mon Sep 17 00:00:00 2001 From: Evan Rusackas Date: Mon, 14 Dec 2020 21:51:56 -0800 Subject: [PATCH 14/43] removing hotkeys --- .../explore/components/QueryAndSaveBtns.jsx | 21 ------------------- 1 file changed, 21 deletions(-) diff --git a/superset-frontend/src/explore/components/QueryAndSaveBtns.jsx b/superset-frontend/src/explore/components/QueryAndSaveBtns.jsx index b2479d864fb76..4613497f4a1ea 100644 --- a/superset-frontend/src/explore/components/QueryAndSaveBtns.jsx +++ b/superset-frontend/src/explore/components/QueryAndSaveBtns.jsx @@ -23,7 +23,6 @@ import { t, styled } from '@superset-ui/core'; import { Tooltip } from 'src/common/components/Tooltip'; import Button from 'src/components/Button'; -import Hotkeys from '../../components/Hotkeys'; const propTypes = { canAdd: PropTypes.bool.isRequired, @@ -40,19 +39,6 @@ const defaultProps = { onSave: () => {}, }; -// Prolly need to move this to a global context -const keymap = { - RUN: 'ctrl + r, ctrl + enter', - SAVE: 'ctrl + s', -}; - -const getHotKeys = () => - Object.keys(keymap).map(k => ({ - name: k, - descr: keymap[k], - key: k, - })); - const Styles = styled.div` display: flex; flex-shrink: 0; @@ -133,13 +119,6 @@ export default function QueryAndSaveBtns({ )}
-
- -
); } From 89c31d4bc4d8b4f35dcd4932b47ce90a8384ab70 Mon Sep 17 00:00:00 2001 From: Evan Rusackas Date: Mon, 14 Dec 2020 22:21:43 -0800 Subject: [PATCH 15/43] layout fixes for short content, simplifying some class names --- .../components/ExploreViewContainer.jsx | 23 ++++++++++++++----- .../explore/components/QueryAndSaveBtns.jsx | 3 ++- 2 files changed, 19 insertions(+), 7 deletions(-) diff --git a/superset-frontend/src/explore/components/ExploreViewContainer.jsx b/superset-frontend/src/explore/components/ExploreViewContainer.jsx index d764cb66721a1..c1793f0c7cb83 100644 --- a/superset-frontend/src/explore/components/ExploreViewContainer.jsx +++ b/superset-frontend/src/explore/components/ExploreViewContainer.jsx @@ -69,15 +69,23 @@ const Styles = styled.div` flex-wrap: nowrap; align-items: stretch; border-top: 1px solid ${({ theme }) => theme.colors.grayscale.light2}; - .control-pane, .data-source-selection { - border-right: 1px solid ${({ theme }) => theme.colors.grayscale.light2}; + .explore-column { display: flex; flex-direction: column; padding: ${({ theme }) => 2 * theme.gridUnit}px 0; max-height: 100%; } - .control-pane { + .data-source-selection { background-color: ${({ theme }) => theme.colors.grayscale.light4}; + padding: ${({ theme }) => 2 * theme.gridUnit}px 0; + border-right: 1px solid ${({ theme }) => theme.colors.grayscale.light2}; + } + .main-explore-content { + border-left: 1px solid ${({ theme }) => theme.colors.grayscale.light2}; + } + .controls-column { + align-self: flex-start; + padding: 0; } .title-container { position: relative; @@ -385,6 +393,9 @@ class ExploreViewContainer extends React.Component { max-height: 100vh; overflow: hidden; } + #app { + flex-basis: 100%; + } body > div { flex: 1 1 auto; } @@ -398,7 +409,7 @@ class ExploreViewContainer extends React.Component { sliceName={this.props.sliceName} /> )} -
+
Datasource
) : null} -
+
-
+
{this.renderChartContainer()}
diff --git a/superset-frontend/src/explore/components/QueryAndSaveBtns.jsx b/superset-frontend/src/explore/components/QueryAndSaveBtns.jsx index 4613497f4a1ea..cfa5952cbfb62 100644 --- a/superset-frontend/src/explore/components/QueryAndSaveBtns.jsx +++ b/superset-frontend/src/explore/components/QueryAndSaveBtns.jsx @@ -44,7 +44,8 @@ const Styles = styled.div` flex-shrink: 0; flex-direction: row; align-items: center; - padding: 0px ${({ theme }) => 2 * theme.gridUnit}px; + padding: ${({ theme }) => 2 * theme.gridUnit}px; + padding-bottom: 0; .btn { /* just to make sure buttons don't jiggle */ width: 100px; From 6106e77f6606a053ba30e83c47e047a853c2137e Mon Sep 17 00:00:00 2001 From: Phillip Kelley-Dotson Date: Tue, 15 Dec 2020 10:25:51 -0800 Subject: [PATCH 16/43] more styles --- .../src/explore/components/DatasourcePanel.tsx | 13 +++++++------ .../src/explore/components/ExploreViewContainer.jsx | 6 ++++++ 2 files changed, 13 insertions(+), 6 deletions(-) diff --git a/superset-frontend/src/explore/components/DatasourcePanel.tsx b/superset-frontend/src/explore/components/DatasourcePanel.tsx index 9aa6ebabcbcca..6e24d177daed0 100644 --- a/superset-frontend/src/explore/components/DatasourcePanel.tsx +++ b/superset-frontend/src/explore/components/DatasourcePanel.tsx @@ -32,7 +32,7 @@ interface DatasourceControl { type: ControlType; label: string; datasource?: any; -}; +} interface Props { datasource: { @@ -76,10 +76,11 @@ const DatasourceContainer = styled.div` .header { font-size: ${({ theme }) => theme.typography.sizes.l}px; margin-left: ${({ theme }) => theme.gridUnit * -2}px; - .ant-collapse-content-box > div > span { - margin-left: ${({ theme }) => theme.gridUnit * -3}px; } - .ant-collapse-content-box > div > div { + .column { + margin-left: ${({ theme }) => theme.gridUnit * -3}px !important; + } + .metric { margin-left ${({ theme }) => theme.gridUnit * -6}px; } `; @@ -138,7 +139,7 @@ const DataSourcePanel = ({ key="column" > {lists.columns.slice(0, maxNumColumns).map(col => ( -
+
))} @@ -153,7 +154,7 @@ const DataSourcePanel = ({ key="metrics" > {lists.metrics.slice(0, maxNumColumns).map(m => ( -
+
))} diff --git a/superset-frontend/src/explore/components/ExploreViewContainer.jsx b/superset-frontend/src/explore/components/ExploreViewContainer.jsx index c1793f0c7cb83..7f1a9fd66a0d8 100644 --- a/superset-frontend/src/explore/components/ExploreViewContainer.jsx +++ b/superset-frontend/src/explore/components/ExploreViewContainer.jsx @@ -398,6 +398,12 @@ class ExploreViewContainer extends React.Component { } body > div { flex: 1 1 auto; + &#app-menu { + flex-shrink: 0; + } + &.controls-column { + flex-basis: 100%; + } } `} /> From d019125493293c90b9c405d22383606fd7cd3c50 Mon Sep 17 00:00:00 2001 From: Phillip Kelley-Dotson Date: Tue, 15 Dec 2020 10:45:10 -0800 Subject: [PATCH 17/43] add tooltip to collapse and div clickable --- .../components/ExploreViewContainer.jsx | 31 ++++++++++--------- 1 file changed, 17 insertions(+), 14 deletions(-) diff --git a/superset-frontend/src/explore/components/ExploreViewContainer.jsx b/superset-frontend/src/explore/components/ExploreViewContainer.jsx index 7f1a9fd66a0d8..a204cf0a83a90 100644 --- a/superset-frontend/src/explore/components/ExploreViewContainer.jsx +++ b/superset-frontend/src/explore/components/ExploreViewContainer.jsx @@ -23,6 +23,7 @@ import { bindActionCreators } from 'redux'; import { connect } from 'react-redux'; import { styled, logging, t, supersetTheme, css } from '@superset-ui/core'; import { Global } from '@emotion/core'; +import { Tooltip } from 'src/common/components/Tooltip'; import Icon from 'src/components/Icon'; import ExploreChartPanel from './ExploreChartPanel'; import ConnectedControlPanelsContainer from './ControlPanelsContainer'; @@ -439,20 +440,22 @@ class ExploreViewContainer extends React.Component { />
{collapse ? ( -
- - +
+ + + +
From 55b02269d22081e619e61ee3ff14d38206f13cf8 Mon Sep 17 00:00:00 2001 From: Phillip Kelley-Dotson Date: Tue, 15 Dec 2020 10:53:50 -0800 Subject: [PATCH 18/43] more updates --- .../{DatasourcePanel_spec.tsx => DatasourcePanel_spec.jsx} | 5 ++--- 1 file changed, 2 insertions(+), 3 deletions(-) rename superset-frontend/spec/javascripts/explore/components/{DatasourcePanel_spec.tsx => DatasourcePanel_spec.jsx} (92%) diff --git a/superset-frontend/spec/javascripts/explore/components/DatasourcePanel_spec.tsx b/superset-frontend/spec/javascripts/explore/components/DatasourcePanel_spec.jsx similarity index 92% rename from superset-frontend/spec/javascripts/explore/components/DatasourcePanel_spec.tsx rename to superset-frontend/spec/javascripts/explore/components/DatasourcePanel_spec.jsx index ce94d5f9eeb1c..3e35cc069a596 100644 --- a/superset-frontend/spec/javascripts/explore/components/DatasourcePanel_spec.tsx +++ b/superset-frontend/spec/javascripts/explore/components/DatasourcePanel_spec.jsx @@ -18,9 +18,8 @@ */ import React from 'react'; import { render, screen } from '@testing-library/react'; -import { supersetTheme, ThemeProvider, QueryFormData } from '@superset-ui/core'; +import { supersetTheme, ThemeProvider } from '@superset-ui/core'; import DatasourcePanel from 'src/explore/components/DatasourcePanel'; -import { ControlType } from '@superset-ui/chart-controls'; describe('datasourcepanel', () => { const props = { @@ -39,7 +38,7 @@ describe('datasourcepanel', () => { controls: { datasource: { validationErrors: null, - mapStateToProps: QueryFormData, + mapStateToProps: () => null, type: 'DatasourceControl', label: 'hello', datasource: { From ea47f82fb4dea2a9e9bbda202384fc4021eb13f9 Mon Sep 17 00:00:00 2001 From: Phillip Kelley-Dotson Date: Tue, 15 Dec 2020 16:44:35 -0800 Subject: [PATCH 19/43] more updates for styles and add list component --- .../explore/components/DatasourcePanel.tsx | 68 ++++++++++++------- .../components/controls/DatasourceControl.jsx | 2 +- 2 files changed, 44 insertions(+), 26 deletions(-) diff --git a/superset-frontend/src/explore/components/DatasourcePanel.tsx b/superset-frontend/src/explore/components/DatasourcePanel.tsx index 6e24d177daed0..b4219b6881c91 100644 --- a/superset-frontend/src/explore/components/DatasourcePanel.tsx +++ b/superset-frontend/src/explore/components/DatasourcePanel.tsx @@ -19,6 +19,7 @@ import React, { useEffect, useState } from 'react'; import { styled, t, QueryFormData } from '@superset-ui/core'; import { Collapse } from 'src/common/components'; +import { FixedSizeList as List } from 'react-window'; import { ColumnOption, MetricOption, @@ -64,9 +65,9 @@ const DatasourceContainer = styled.div` } .ant-collapse-item { background-color: ${({ theme }) => theme.colors.grayscale.light4}; - .anticon.anticon-right.ant-collapse-arrow > svg { - transform: rotate(90deg) !important; - } + .anticon.anticon-right.ant-collapse-arrow > svg { + transform: rotate(90deg) !important; + } } .ant-collapse-item.ant-collapse-item-active { .anticon.anticon-right.ant-collapse-arrow > svg { @@ -77,16 +78,17 @@ const DatasourceContainer = styled.div` font-size: ${({ theme }) => theme.typography.sizes.l}px; margin-left: ${({ theme }) => theme.gridUnit * -2}px; } - .column { - margin-left: ${({ theme }) => theme.gridUnit * -3}px !important; + .ant-collapse-content-box > div { + margin-left: -14px; + } + .type-label { + text-align: left; } - .metric { - margin-left ${({ theme }) => theme.gridUnit * -6}px; + .metric-option .option-label { + margin-left: -20px; } `; -const maxNumColumns = 50; - const DataSourcePanel = ({ datasource, controls: { datasource: datasourceControl }, @@ -113,6 +115,22 @@ const DataSourcePanel = ({ metrics: datasource.metrics, }); }, [datasource]); + + const Metrics = ({ index }: number) => { + return ( +
+ +
+ ); + }; + + const Columns = ({ index }: number) => { + return ( +
+ +
+ ); + }; return ( Columns} key="column" > - {lists.columns.slice(0, maxNumColumns).map(col => ( -
- -
- ))} - {datasource.columns.length > maxNumColumns && ( -
...
- )} + + {Columns} + @@ -153,14 +171,14 @@ const DataSourcePanel = ({ header={Metrics} key="metrics" > - {lists.metrics.slice(0, maxNumColumns).map(m => ( -
- -
- ))} - {datasource.columns.length > maxNumColumns && ( -
...
- )} + + {Metrics} +
diff --git a/superset-frontend/src/explore/components/controls/DatasourceControl.jsx b/superset-frontend/src/explore/components/controls/DatasourceControl.jsx index 65df13318b8a3..fa449f97d4ca4 100644 --- a/superset-frontend/src/explore/components/controls/DatasourceControl.jsx +++ b/superset-frontend/src/explore/components/controls/DatasourceControl.jsx @@ -204,7 +204,7 @@ class DatasourceControl extends React.PureComponent { )} From ba580d2bee46cbc4f8715435decfa59968d9a503 Mon Sep 17 00:00:00 2001 From: Phillip Kelley-Dotson Date: Wed, 16 Dec 2020 10:07:28 -0800 Subject: [PATCH 20/43] update from comments --- .../components/DatasourcePanel_spec.jsx | 38 +++++++------------ .../explore/components/DatasourcePanel.tsx | 35 ++++++++++------- 2 files changed, 36 insertions(+), 37 deletions(-) diff --git a/superset-frontend/spec/javascripts/explore/components/DatasourcePanel_spec.jsx b/superset-frontend/spec/javascripts/explore/components/DatasourcePanel_spec.jsx index 3e35cc069a596..1bfd67ad2682e 100644 --- a/superset-frontend/spec/javascripts/explore/components/DatasourcePanel_spec.jsx +++ b/superset-frontend/spec/javascripts/explore/components/DatasourcePanel_spec.jsx @@ -22,37 +22,27 @@ import { supersetTheme, ThemeProvider } from '@superset-ui/core'; import DatasourcePanel from 'src/explore/components/DatasourcePanel'; describe('datasourcepanel', () => { - const props = { - datasource: { - name: 'birth_names', - type: 'table', - uid: '1__table', - id: 1, - columns: [], - metrics: [], - database: { - backend: 'mysql', - name: 'main', - }, + const datasource = { + name: 'birth_names', + type: 'table', + uid: '1__table', + id: 1, + columns: [], + metrics: [], + database: { + backend: 'mysql', + name: 'main', }, + }; + const props = { + datasource, controls: { datasource: { validationErrors: null, mapStateToProps: () => null, type: 'DatasourceControl', label: 'hello', - datasource: { - name: 'birth_names', - type: 'table', - uid: '1__table', - id: 1, - columns: [], - metrics: [], - database: { - backend: 'mysql', - name: 'main', - }, - }, + datasource, }, }, actions: null, diff --git a/superset-frontend/src/explore/components/DatasourcePanel.tsx b/superset-frontend/src/explore/components/DatasourcePanel.tsx index b4219b6881c91..8e73b0a3ea627 100644 --- a/superset-frontend/src/explore/components/DatasourcePanel.tsx +++ b/superset-frontend/src/explore/components/DatasourcePanel.tsx @@ -19,7 +19,7 @@ import React, { useEffect, useState } from 'react'; import { styled, t, QueryFormData } from '@superset-ui/core'; import { Collapse } from 'src/common/components'; -import { FixedSizeList as List } from 'react-window'; +import { FixedSizeList as List, ListChildComponentProps } from 'react-window'; import { ColumnOption, MetricOption, @@ -94,39 +94,48 @@ const DataSourcePanel = ({ controls: { datasource: datasourceControl }, actions, }: Props) => { + const { columns, metrics } = datasource; const [lists, setColList] = useState({ - columns: datasource.columns, - metrics: datasource.metrics, + columns, + metrics, }); const search = ({ target: { value } }: { target: { value: string } }) => { - const columns = datasource.columns.filter( + const filteredColumns = lists.columns.filter( obj => obj.column_name.indexOf(value) !== -1, ); - const metrics = lists.metrics.filter( + const filteredMetrics = lists.metrics.filter( objs => objs.metric_name.indexOf(value) !== -1, ); if (value === '') { - setColList({ columns: datasource.columns, metrics: datasource.metrics }); - } else setColList({ columns, metrics }); + setColList({ columns, metrics }); + } else setColList({ columns: filteredColumns, metrics: filteredMetrics }); }; useEffect(() => { setColList({ - columns: datasource.columns, - metrics: datasource.metrics, + columns, + metrics, }); }, [datasource]); - const Metrics = ({ index }: number) => { + const Metrics = ({ index, style }: ListChildComponentProps) => { return ( -
+
); }; - const Columns = ({ index }: number) => { + const Columns = ({ index, style }: ListChildComponentProps) => { return ( -
+
); From 507586c491285d667d860f2235c448a3d0b1c4e6 Mon Sep 17 00:00:00 2001 From: Evan Rusackas Date: Tue, 15 Dec 2020 21:09:42 -0800 Subject: [PATCH 21/43] vising cosmetic issue with line-wrapping drop down caret on controls sections --- .../src/explore/components/ControlPanelSection.jsx | 11 ++++++++++- 1 file changed, 10 insertions(+), 1 deletion(-) diff --git a/superset-frontend/src/explore/components/ControlPanelSection.jsx b/superset-frontend/src/explore/components/ControlPanelSection.jsx index c49f92c97c5ed..43af950745ae7 100644 --- a/superset-frontend/src/explore/components/ControlPanelSection.jsx +++ b/superset-frontend/src/explore/components/ControlPanelSection.jsx @@ -20,6 +20,7 @@ import React from 'react'; import PropTypes from 'prop-types'; import { Panel } from 'react-bootstrap'; import { InfoTooltipWithTrigger } from '@superset-ui/chart-controls'; +import { styled } from '@superset-ui/core'; const propTypes = { label: PropTypes.string, @@ -36,6 +37,14 @@ const defaultProps = { hasErrors: false, }; +const StyledPanelTitle = styled(Panel.Title)` + & > div { + display: flex; + align-items: center; + justify-content: space-between; + } +`; + export default class ControlPanelSection extends React.Component { constructor(props) { super(props); @@ -94,7 +103,7 @@ export default class ControlPanelSection extends React.Component { onToggle={this.toggleExpand} > - {this.renderHeader()} + {this.renderHeader()} {this.props.children} From 513285316601adda11633f8643221f2e4b4886a9 Mon Sep 17 00:00:00 2001 From: Evan Rusackas Date: Tue, 15 Dec 2020 21:10:04 -0800 Subject: [PATCH 22/43] controls area scrolling properly again. --- .../explore/components/ExploreViewContainer.jsx | 14 ++++++-------- 1 file changed, 6 insertions(+), 8 deletions(-) diff --git a/superset-frontend/src/explore/components/ExploreViewContainer.jsx b/superset-frontend/src/explore/components/ExploreViewContainer.jsx index a204cf0a83a90..b17f6df8685ae 100644 --- a/superset-frontend/src/explore/components/ExploreViewContainer.jsx +++ b/superset-frontend/src/explore/components/ExploreViewContainer.jsx @@ -394,17 +394,15 @@ class ExploreViewContainer extends React.Component { max-height: 100vh; overflow: hidden; } + #app-menu, #app { + flex: 1 1 auto; + overflow: hidden; + } #app { flex-basis: 100%; } - body > div { - flex: 1 1 auto; - &#app-menu { - flex-shrink: 0; - } - &.controls-column { - flex-basis: 100%; - } + #app-menu { + flex-shrink: 0; } `} /> From c17abcfcbec5fac3e4020cd5266c3e86e78ae440 Mon Sep 17 00:00:00 2001 From: Phillip Kelley-Dotson Date: Wed, 16 Dec 2020 17:25:33 -0800 Subject: [PATCH 23/43] change lists to old list and updates from comments --- .../explore/components/DatasourcePanel.tsx | 70 +++++++------------ .../components/ExploreViewContainer.jsx | 2 +- 2 files changed, 26 insertions(+), 46 deletions(-) diff --git a/superset-frontend/src/explore/components/DatasourcePanel.tsx b/superset-frontend/src/explore/components/DatasourcePanel.tsx index 8e73b0a3ea627..85f56dac9f3c5 100644 --- a/superset-frontend/src/explore/components/DatasourcePanel.tsx +++ b/superset-frontend/src/explore/components/DatasourcePanel.tsx @@ -19,7 +19,6 @@ import React, { useEffect, useState } from 'react'; import { styled, t, QueryFormData } from '@superset-ui/core'; import { Collapse } from 'src/common/components'; -import { FixedSizeList as List, ListChildComponentProps } from 'react-window'; import { ColumnOption, MetricOption, @@ -32,7 +31,7 @@ interface DatasourceControl { mapStateToProps: QueryFormData; type: ControlType; label: string; - datasource?: any; + datasource?: DatasourceControl; } interface Props { @@ -48,6 +47,8 @@ interface Props { const DatasourceContainer = styled.div` background-color: ${({ theme }) => theme.colors.grayscale.light4}; + position: relative; + height: 100%; .field-selections { padding: 0 ${({ theme }) => 2 * theme.gridUnit}px; } @@ -87,6 +88,14 @@ const DatasourceContainer = styled.div` .metric-option .option-label { margin-left: -20px; } + .field-selections { + position: absolute; + top: ${({ theme }) => theme.gridUnit * 15}px; + bottom: 0; + left: 0; + right: 0; + overflow: auto; + } `; const DataSourcePanel = ({ @@ -101,10 +110,10 @@ const DataSourcePanel = ({ }); const search = ({ target: { value } }: { target: { value: string } }) => { const filteredColumns = lists.columns.filter( - obj => obj.column_name.indexOf(value) !== -1, + column => column.column_name.indexOf(value) !== -1, ); const filteredMetrics = lists.metrics.filter( - objs => objs.metric_name.indexOf(value) !== -1, + metric => metric.metric_name.indexOf(value) !== -1, ); if (value === '') { setColList({ columns, metrics }); @@ -117,29 +126,6 @@ const DataSourcePanel = ({ }); }, [datasource]); - const Metrics = ({ index, style }: ListChildComponentProps) => { - return ( -
- -
- ); - }; - - const Columns = ({ index, style }: ListChildComponentProps) => { - return ( -
- -
- ); - }; return ( Columns} + header={{t('Columns')}} key="column" > - - {Columns} - + {lists.columns.slice(0, 50).map(col => ( +
+ +
+ ))} Metrics} + header={{t('Metrics')}} key="metrics" > - - {Metrics} - + {lists.metrics.slice(0, 50).map(m => ( +
+ +
+ ))}
diff --git a/superset-frontend/src/explore/components/ExploreViewContainer.jsx b/superset-frontend/src/explore/components/ExploreViewContainer.jsx index b17f6df8685ae..7e855c98d1cbc 100644 --- a/superset-frontend/src/explore/components/ExploreViewContainer.jsx +++ b/superset-frontend/src/explore/components/ExploreViewContainer.jsx @@ -446,7 +446,7 @@ class ExploreViewContainer extends React.Component { tabIndex={0} > - + Date: Wed, 16 Dec 2020 16:48:49 -0800 Subject: [PATCH 24/43] border radius from theme --- .../src/explore/components/controls/DatasourceControl.jsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/superset-frontend/src/explore/components/controls/DatasourceControl.jsx b/superset-frontend/src/explore/components/controls/DatasourceControl.jsx index fa449f97d4ca4..a15174ca65d4b 100644 --- a/superset-frontend/src/explore/components/controls/DatasourceControl.jsx +++ b/superset-frontend/src/explore/components/controls/DatasourceControl.jsx @@ -85,7 +85,7 @@ const Styles = styled.div` display: inline-block; background-color: #f0f0f0; padding: ${({ theme }) => theme.gridUnit * 2}px; - border-radius: 3px; + border-radius: ${({ theme }) => theme.borderRadius}px; text-align: center; text-overflow: ellipsis; white-space: nowrap; From 24193d12596cf817d3391eee9fa626876e0df069 Mon Sep 17 00:00:00 2001 From: Phillip Kelley-Dotson Date: Wed, 16 Dec 2020 19:40:51 -0800 Subject: [PATCH 25/43] add length field and updates from comments --- .../explore/components/DatasourcePanel.tsx | 34 ++++++++++++++----- .../components/controls/DatasourceControl.jsx | 2 +- 2 files changed, 27 insertions(+), 9 deletions(-) diff --git a/superset-frontend/src/explore/components/DatasourcePanel.tsx b/superset-frontend/src/explore/components/DatasourcePanel.tsx index 85f56dac9f3c5..a7ae5e2a9bb38 100644 --- a/superset-frontend/src/explore/components/DatasourcePanel.tsx +++ b/superset-frontend/src/explore/components/DatasourcePanel.tsx @@ -60,6 +60,7 @@ const DatasourceContainer = styled.div` } .ant-collapse > .ant-collapse-item > .ant-collapse-header { padding-left: 10px; + padding-bottom: 0px; } .form-control.input-sm { margin-bottom: ${({ theme }) => theme.gridUnit * 3}px; @@ -86,7 +87,7 @@ const DatasourceContainer = styled.div` text-align: left; } .metric-option .option-label { - margin-left: -20px; + margin-left: ${({ theme }) => theme.gridUnit * -5}px; } .field-selections { position: absolute; @@ -96,6 +97,12 @@ const DatasourceContainer = styled.div` right: 0; overflow: auto; } + .field-length { + margin-top: -3px; + margin-bottom: ${({ theme }) => theme.gridUnit * 2}px; + font-size: ${({ theme }) => theme.typography.sizes.s}px; + color: ${({ theme }) => theme.colors.grayscale.light1}; + } `; const DataSourcePanel = ({ @@ -104,28 +111,33 @@ const DataSourcePanel = ({ actions, }: Props) => { const { columns, metrics } = datasource; - const [lists, setColList] = useState({ + const [lists, setList] = useState({ columns, metrics, }); const search = ({ target: { value } }: { target: { value: string } }) => { + if (value === '') { + setList({ columns, metrics }); + return; + } const filteredColumns = lists.columns.filter( column => column.column_name.indexOf(value) !== -1, ); const filteredMetrics = lists.metrics.filter( metric => metric.metric_name.indexOf(value) !== -1, ); - if (value === '') { - setColList({ columns, metrics }); - } else setColList({ columns: filteredColumns, metrics: filteredMetrics }); + setList({ columns: filteredColumns, metrics: filteredMetrics }); }; useEffect(() => { - setColList({ + setList({ columns, metrics, }); }, [datasource]); + const metricSlice = lists.metrics.slice(0, 50); + const columnSlice = lists.columns.slice(0, 50); + return ( {t('Columns')}} key="column" > - {lists.columns.slice(0, 50).map(col => ( +
+ {`Showing ${columnSlice.length} of ${columns.length}`} +
+ {columnSlice.map(col => (
@@ -163,7 +178,10 @@ const DataSourcePanel = ({ header={{t('Metrics')}} key="metrics" > - {lists.metrics.slice(0, 50).map(m => ( +
+ {`Showing ${metricSlice.length} of ${metrics.length}`} +
+ {metricSlice.map(m => (
diff --git a/superset-frontend/src/explore/components/controls/DatasourceControl.jsx b/superset-frontend/src/explore/components/controls/DatasourceControl.jsx index a15174ca65d4b..6e8e248945e47 100644 --- a/superset-frontend/src/explore/components/controls/DatasourceControl.jsx +++ b/superset-frontend/src/explore/components/controls/DatasourceControl.jsx @@ -83,7 +83,7 @@ const Styles = styled.div` .title-select { width: ${({ theme }) => theme.gridUnit * 52}px; display: inline-block; - background-color: #f0f0f0; + background-color: ${({ theme }) => theme.colors.grayscale.light3}; padding: ${({ theme }) => theme.gridUnit * 2}px; border-radius: ${({ theme }) => theme.borderRadius}px; text-align: center; From c191dfb5f75a479c5c6188b17b88c6afd9543c32 Mon Sep 17 00:00:00 2001 From: Phillip Kelley-Dotson Date: Wed, 16 Dec 2020 20:55:36 -0800 Subject: [PATCH 26/43] more changes from comments --- .../src/explore/components/DatasourcePanel.tsx | 3 ++- .../src/explore/components/ExploreViewContainer.jsx | 11 ++++++----- 2 files changed, 8 insertions(+), 6 deletions(-) diff --git a/superset-frontend/src/explore/components/DatasourcePanel.tsx b/superset-frontend/src/explore/components/DatasourcePanel.tsx index a7ae5e2a9bb38..a9f1708d479fd 100644 --- a/superset-frontend/src/explore/components/DatasourcePanel.tsx +++ b/superset-frontend/src/explore/components/DatasourcePanel.tsx @@ -24,6 +24,7 @@ import { MetricOption, ControlType, } from '@superset-ui/chart-controls'; +import { ExploreActions } from '../actions/exploreActions'; import Control from './Control'; interface DatasourceControl { @@ -42,7 +43,7 @@ interface Props { controls: { datasource: DatasourceControl; }; - actions: any; + actions: Partial & Pick; } const DatasourceContainer = styled.div` diff --git a/superset-frontend/src/explore/components/ExploreViewContainer.jsx b/superset-frontend/src/explore/components/ExploreViewContainer.jsx index 7e855c98d1cbc..78d5dc44796f4 100644 --- a/superset-frontend/src/explore/components/ExploreViewContainer.jsx +++ b/superset-frontend/src/explore/components/ExploreViewContainer.jsx @@ -141,7 +141,7 @@ class ExploreViewContainer extends React.Component { this.onQuery = this.onQuery.bind(this); this.toggleModal = this.toggleModal.bind(this); this.handleKeydown = this.handleKeydown.bind(this); - this.handleCollapse = this.handleCollapse.bind(this); + this.toggleCollapse = this.toggleCollapse.bind(this); } componentDidMount() { @@ -308,7 +308,7 @@ class ExploreViewContainer extends React.Component { } } - handleCollapse() { + toggleCollapse() { this.setState(prevState => ({ collapse: !prevState.collapse })); } @@ -394,7 +394,8 @@ class ExploreViewContainer extends React.Component { max-height: 100vh; overflow: hidden; } - #app-menu, #app { + #app-menu, + #app { flex: 1 1 auto; overflow: hidden; } @@ -421,7 +422,7 @@ class ExploreViewContainer extends React.Component { role="button" tabIndex={0} className="action-button" - onClick={this.handleCollapse} + onClick={this.toggleCollapse} > Date: Wed, 16 Dec 2020 23:32:47 -0800 Subject: [PATCH 27/43] integrate health with new control --- .../explore/components/DatasourcePanel.tsx | 10 +++---- .../components/controls/DatasourceControl.jsx | 27 ++++--------------- 2 files changed, 9 insertions(+), 28 deletions(-) diff --git a/superset-frontend/src/explore/components/DatasourcePanel.tsx b/superset-frontend/src/explore/components/DatasourcePanel.tsx index a9f1708d479fd..2fb51c31ea42d 100644 --- a/superset-frontend/src/explore/components/DatasourcePanel.tsx +++ b/superset-frontend/src/explore/components/DatasourcePanel.tsx @@ -53,11 +53,8 @@ const DatasourceContainer = styled.div` .field-selections { padding: 0 ${({ theme }) => 2 * theme.gridUnit}px; } - .ant-collapse - > .ant-collapse-item - > .ant-collapse-header - .ant-collapse-arrow { - right: ${({ theme }) => theme.gridUnit * -50}px; + .ant-collapse { + height: auto; } .ant-collapse > .ant-collapse-item > .ant-collapse-header { padding-left: 10px; @@ -159,6 +156,7 @@ const DataSourcePanel = ({ accordion bordered={false} defaultActiveKey={['column', 'metrics']} + expandIconPosition="right" > {t('Columns')}} @@ -174,7 +172,7 @@ const DataSourcePanel = ({ ))} - + {t('Metrics')}} key="metrics" diff --git a/superset-frontend/src/explore/components/controls/DatasourceControl.jsx b/superset-frontend/src/explore/components/controls/DatasourceControl.jsx index 6e8e248945e47..222da63962e42 100644 --- a/superset-frontend/src/explore/components/controls/DatasourceControl.jsx +++ b/superset-frontend/src/explore/components/controls/DatasourceControl.jsx @@ -18,7 +18,7 @@ */ import React from 'react'; import PropTypes from 'prop-types'; -import { t, styled } from '@superset-ui/core'; +import { t, styled, supersetTheme } from '@superset-ui/core'; import { Dropdown, Menu } from 'src/common/components'; import { Tooltip } from 'src/common/components/Tooltip'; @@ -59,27 +59,20 @@ const Styles = styled.div` box-shadow: none; } } - .btn-group .open .dropdown-toggle { box-shadow: none; &.button-default { background: none; } } - i.angle { color: ${({ theme }) => theme.colors.primary.base}; } - svg.datasource-modal-trigger { color: ${({ theme }) => theme.colors.primary.base}; vertical-align: ${({ theme }) => theme.gridUnit + 2}px; cursor: pointer; } - - .datasource-controls { - display: flex; - } .title-select { width: ${({ theme }) => theme.gridUnit * 52}px; display: inline-block; @@ -179,20 +172,10 @@ class DatasourceControl extends React.PureComponent { return ( - -
- - +
+ + + {datasource.name} {healthCheckMessage && ( From 7777b4bf536a143129821b56886840f626a3f501 Mon Sep 17 00:00:00 2001 From: Phillip Kelley-Dotson Date: Thu, 17 Dec 2020 13:11:47 -0800 Subject: [PATCH 28/43] change callapse back from stylsheet more udpates --- .../explore/components/DatasourcePanel.tsx | 18 +++++++++++---- .../components/ExploreViewContainer.jsx | 22 ++++++++++++++----- .../explore/components/QueryAndSaveBtns.jsx | 5 +++-- 3 files changed, 33 insertions(+), 12 deletions(-) diff --git a/superset-frontend/src/explore/components/DatasourcePanel.tsx b/superset-frontend/src/explore/components/DatasourcePanel.tsx index 2fb51c31ea42d..dde0406da64f1 100644 --- a/superset-frontend/src/explore/components/DatasourcePanel.tsx +++ b/superset-frontend/src/explore/components/DatasourcePanel.tsx @@ -55,6 +55,9 @@ const DatasourceContainer = styled.div` } .ant-collapse { height: auto; + border-bottom: 1px solid #cfd8dc; + padding-bottom: 8px; + background-color: ${({ theme }) => theme.colors.grayscale.light4}; } .ant-collapse > .ant-collapse-item > .ant-collapse-header { padding-left: 10px; @@ -67,19 +70,26 @@ const DatasourceContainer = styled.div` background-color: ${({ theme }) => theme.colors.grayscale.light4}; .anticon.anticon-right.ant-collapse-arrow > svg { transform: rotate(90deg) !important; + margin-right: ${({ theme }) => theme.gridUnit * -2}px; } } .ant-collapse-item.ant-collapse-item-active { .anticon.anticon-right.ant-collapse-arrow > svg { transform: rotate(-90deg) !important; } + .ant-collapse-header { + border: 0; + } } .header { font-size: ${({ theme }) => theme.typography.sizes.l}px; margin-left: ${({ theme }) => theme.gridUnit * -2}px; } - .ant-collapse-content-box > div { - margin-left: -14px; + .ant-collapse-content-box { + padding-bottom: 0px; + & > div { + margin-left: -14px; + } } .type-label { text-align: left; @@ -163,7 +173,7 @@ const DataSourcePanel = ({ key="column" >
- {`Showing ${columnSlice.length} of ${columns.length}`} + {t(`Showing ${columnSlice.length} of ${columns.length}`)}
{columnSlice.map(col => (
@@ -178,7 +188,7 @@ const DataSourcePanel = ({ key="metrics" >
- {`Showing ${metricSlice.length} of ${metrics.length}`} + {t(`Showing ${metricSlice.length} of ${metrics.length}`)}
{metricSlice.map(m => (
diff --git a/superset-frontend/src/explore/components/ExploreViewContainer.jsx b/superset-frontend/src/explore/components/ExploreViewContainer.jsx index 78d5dc44796f4..69cffd4950a20 100644 --- a/superset-frontend/src/explore/components/ExploreViewContainer.jsx +++ b/superset-frontend/src/explore/components/ExploreViewContainer.jsx @@ -81,7 +81,7 @@ const Styles = styled.div` padding: ${({ theme }) => 2 * theme.gridUnit}px 0; border-right: 1px solid ${({ theme }) => theme.colors.grayscale.light2}; } - .main-explore-content { + .main-explore-content { border-left: 1px solid ${({ theme }) => theme.colors.grayscale.light2}; } .controls-column { @@ -397,10 +397,10 @@ class ExploreViewContainer extends React.Component { #app-menu, #app { flex: 1 1 auto; - overflow: hidden; } #app { flex-basis: 100%; + overflow: hidden; } #app-menu { flex-shrink: 0; @@ -415,9 +415,15 @@ class ExploreViewContainer extends React.Component { sliceName={this.props.sliceName} /> )} -
+
- Datasource + {t('Datasource')}
) : null} -
+
-
+
{this.renderChartContainer()}
diff --git a/superset-frontend/src/explore/components/QueryAndSaveBtns.jsx b/superset-frontend/src/explore/components/QueryAndSaveBtns.jsx index cfa5952cbfb62..2327deea92721 100644 --- a/superset-frontend/src/explore/components/QueryAndSaveBtns.jsx +++ b/superset-frontend/src/explore/components/QueryAndSaveBtns.jsx @@ -44,8 +44,9 @@ const Styles = styled.div` flex-shrink: 0; flex-direction: row; align-items: center; - padding: ${({ theme }) => 2 * theme.gridUnit}px; - padding-bottom: 0; + padding: ${({ theme }) => 2 * theme.gridUnit}px + ${({ theme }) => 2 * theme.gridUnit}px 0 + ${({ theme }) => 4 * theme.gridUnit}px; .btn { /* just to make sure buttons don't jiggle */ width: 100px; From 99a1fe5856317f2984606bb64988549961a3812f Mon Sep 17 00:00:00 2001 From: Evan Rusackas Date: Thu, 17 Dec 2020 13:28:56 -0800 Subject: [PATCH 29/43] substitution string --- superset-frontend/src/explore/components/DatasourcePanel.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/superset-frontend/src/explore/components/DatasourcePanel.tsx b/superset-frontend/src/explore/components/DatasourcePanel.tsx index dde0406da64f1..ca92268ba748f 100644 --- a/superset-frontend/src/explore/components/DatasourcePanel.tsx +++ b/superset-frontend/src/explore/components/DatasourcePanel.tsx @@ -173,7 +173,7 @@ const DataSourcePanel = ({ key="column" >
- {t(`Showing ${columnSlice.length} of ${columns.length}`)} + {t(`Showing %s of %s`,columnSlice.length, columns.length)}
{columnSlice.map(col => (
From fb4b175f3e92d82535c2c5a471727e3e1811e88e Mon Sep 17 00:00:00 2001 From: Evan Rusackas Date: Thu, 17 Dec 2020 13:30:21 -0800 Subject: [PATCH 30/43] more substitution strings --- superset-frontend/src/explore/components/DatasourcePanel.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/superset-frontend/src/explore/components/DatasourcePanel.tsx b/superset-frontend/src/explore/components/DatasourcePanel.tsx index ca92268ba748f..07ec1bbaee735 100644 --- a/superset-frontend/src/explore/components/DatasourcePanel.tsx +++ b/superset-frontend/src/explore/components/DatasourcePanel.tsx @@ -188,7 +188,7 @@ const DataSourcePanel = ({ key="metrics" >
- {t(`Showing ${metricSlice.length} of ${metrics.length}`)} + {t(`Showing %s of %s`,metricSlice.length, metrics.length)}
{metricSlice.map(m => (
From 360dd6dd656b8d3fb1d5b0a61b46178d805baaf8 Mon Sep 17 00:00:00 2001 From: Phillip Kelley-Dotson Date: Thu, 17 Dec 2020 14:56:11 -0800 Subject: [PATCH 31/43] fix tests --- .../explore/components/ControlPanelSection_spec.jsx | 6 +++++- .../explore/components/DatasourceControl_spec.jsx | 4 ++-- 2 files changed, 7 insertions(+), 3 deletions(-) diff --git a/superset-frontend/spec/javascripts/explore/components/ControlPanelSection_spec.jsx b/superset-frontend/spec/javascripts/explore/components/ControlPanelSection_spec.jsx index 83e5512b1a040..521a5532efaa2 100644 --- a/superset-frontend/spec/javascripts/explore/components/ControlPanelSection_spec.jsx +++ b/superset-frontend/spec/javascripts/explore/components/ControlPanelSection_spec.jsx @@ -53,7 +53,11 @@ describe('ControlPanelSection', () => { }); it('renders a label if present', () => { - expect(wrapper.find(Panel.Title).dive().text()).toContain('my label'); + expect( + wrapper + .find('[data-test="clickable-control-panel-section-title"]') + .text(), + ).toContain('my label'); }); it('renders a InfoTooltipWithTrigger if label and tooltip is present', () => { diff --git a/superset-frontend/spec/javascripts/explore/components/DatasourceControl_spec.jsx b/superset-frontend/spec/javascripts/explore/components/DatasourceControl_spec.jsx index 1c91c1cd25256..2996dcd1111a5 100644 --- a/superset-frontend/spec/javascripts/explore/components/DatasourceControl_spec.jsx +++ b/superset-frontend/spec/javascripts/explore/components/DatasourceControl_spec.jsx @@ -97,8 +97,8 @@ describe('DatasourceControl', () => { it('should render health check message', () => { const wrapper = setup(); - const alert = wrapper.find(Icon).first(); - expect(alert.prop('name')).toBe('alert-solid'); + const alert = wrapper.find(Icon); + expect(alert.at(1).prop('name')).toBe('alert-solid'); const tooltip = wrapper.find(Tooltip).at(1); expect(tooltip.prop('title')).toBe( defaultProps.datasource.health_check_message, From 9bdf748e6d86881598f924d8eb3d29da1583ebf6 Mon Sep 17 00:00:00 2001 From: Phillip Kelley-Dotson Date: Thu, 17 Dec 2020 15:26:56 -0800 Subject: [PATCH 32/43] datasource alignment --- .../src/explore/components/controls/DatasourceControl.jsx | 6 ++---- 1 file changed, 2 insertions(+), 4 deletions(-) diff --git a/superset-frontend/src/explore/components/controls/DatasourceControl.jsx b/superset-frontend/src/explore/components/controls/DatasourceControl.jsx index 222da63962e42..167629e93f8af 100644 --- a/superset-frontend/src/explore/components/controls/DatasourceControl.jsx +++ b/superset-frontend/src/explore/components/controls/DatasourceControl.jsx @@ -53,7 +53,7 @@ const Styles = styled.div` margin-bottom: ${({ theme }) => 2 * theme.gridUnit}px; } .ant-dropdown-trigger { - margin-left: ${({ theme }) => theme.gridUnit}px; + margin-left: ${({ theme }) => 2 * theme.gridUnit}px; box-shadow: none; &:active { box-shadow: none; @@ -70,7 +70,6 @@ const Styles = styled.div` } svg.datasource-modal-trigger { color: ${({ theme }) => theme.colors.primary.base}; - vertical-align: ${({ theme }) => theme.gridUnit + 2}px; cursor: pointer; } .title-select { @@ -85,8 +84,7 @@ const Styles = styled.div` overflow: hidden; } .dataset-svg { - vertical-align: ${({ theme }) => theme.gridUnit + 2}px; - margin-right: 10px; + margin-right: ${({ theme }) => 2 * theme.gridUnit}px; } `; From 0a0e04522eb9693730d281590623988a0b514d80 Mon Sep 17 00:00:00 2001 From: Evan Rusackas Date: Thu, 17 Dec 2020 15:42:48 -0800 Subject: [PATCH 33/43] taking margin off the search input --- superset-frontend/src/explore/components/DatasourcePanel.tsx | 3 +++ 1 file changed, 3 insertions(+) diff --git a/superset-frontend/src/explore/components/DatasourcePanel.tsx b/superset-frontend/src/explore/components/DatasourcePanel.tsx index 07ec1bbaee735..f6cdc8d21b121 100644 --- a/superset-frontend/src/explore/components/DatasourcePanel.tsx +++ b/superset-frontend/src/explore/components/DatasourcePanel.tsx @@ -111,6 +111,9 @@ const DatasourceContainer = styled.div` font-size: ${({ theme }) => theme.typography.sizes.s}px; color: ${({ theme }) => theme.colors.grayscale.light1}; } + .form-control.input-sm { + margin-bottom: 0; + } `; const DataSourcePanel = ({ From 4c430c057ada61a1f1082f1b11aeb6a682ff34c8 Mon Sep 17 00:00:00 2001 From: Phillip Kelley-Dotson Date: Thu, 17 Dec 2020 15:44:28 -0800 Subject: [PATCH 34/43] update input to flex --- .../src/explore/components/controls/DatasourceControl.jsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/superset-frontend/src/explore/components/controls/DatasourceControl.jsx b/superset-frontend/src/explore/components/controls/DatasourceControl.jsx index 167629e93f8af..a3543ee697d75 100644 --- a/superset-frontend/src/explore/components/controls/DatasourceControl.jsx +++ b/superset-frontend/src/explore/components/controls/DatasourceControl.jsx @@ -73,7 +73,7 @@ const Styles = styled.div` cursor: pointer; } .title-select { - width: ${({ theme }) => theme.gridUnit * 52}px; + flex: 1 1 100%; display: inline-block; background-color: ${({ theme }) => theme.colors.grayscale.light3}; padding: ${({ theme }) => theme.gridUnit * 2}px; From f73fc007abcc4ebb3a931cdfdd66d29e54fc38f6 Mon Sep 17 00:00:00 2001 From: Phillip Kelley-Dotson Date: Thu, 17 Dec 2020 15:48:07 -0800 Subject: [PATCH 35/43] fix lint --- superset-frontend/src/explore/components/DatasourcePanel.tsx | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/superset-frontend/src/explore/components/DatasourcePanel.tsx b/superset-frontend/src/explore/components/DatasourcePanel.tsx index 07ec1bbaee735..b3f17fc6cbdd6 100644 --- a/superset-frontend/src/explore/components/DatasourcePanel.tsx +++ b/superset-frontend/src/explore/components/DatasourcePanel.tsx @@ -173,7 +173,7 @@ const DataSourcePanel = ({ key="column" >
- {t(`Showing %s of %s`,columnSlice.length, columns.length)} + {t(`Showing %s of %s`, columnSlice.length, columns.length)}
{columnSlice.map(col => (
@@ -188,7 +188,7 @@ const DataSourcePanel = ({ key="metrics" >
- {t(`Showing %s of %s`,metricSlice.length, metrics.length)} + {t(`Showing %s of %s`, metricSlice.length, metrics.length)}
{metricSlice.map(m => (
From 72369fda9d36ecd7035e23a93a7ab902ee958221 Mon Sep 17 00:00:00 2001 From: Evan Rusackas Date: Thu, 17 Dec 2020 15:59:35 -0800 Subject: [PATCH 36/43] adjusting column/metric label stylng --- .../src/explore/components/DatasourcePanel.tsx | 8 +++++--- 1 file changed, 5 insertions(+), 3 deletions(-) diff --git a/superset-frontend/src/explore/components/DatasourcePanel.tsx b/superset-frontend/src/explore/components/DatasourcePanel.tsx index f6cdc8d21b121..e9a88f34cd1c8 100644 --- a/superset-frontend/src/explore/components/DatasourcePanel.tsx +++ b/superset-frontend/src/explore/components/DatasourcePanel.tsx @@ -91,9 +91,6 @@ const DatasourceContainer = styled.div` margin-left: -14px; } } - .type-label { - text-align: left; - } .metric-option .option-label { margin-left: ${({ theme }) => theme.gridUnit * -5}px; } @@ -114,6 +111,11 @@ const DatasourceContainer = styled.div` .form-control.input-sm { margin-bottom: 0; } + .type-label { + font-weight: ${({ theme }) => theme.typography.weights.light}; + font-size: ${({ theme }) => theme.typography.sizes.s}px; + color: ${({ theme }) => theme.colors.grayscale.base}; + } `; const DataSourcePanel = ({ From 549412400c893de49d8f30f596bfec9f22008daa Mon Sep 17 00:00:00 2001 From: Evan Rusackas Date: Thu, 17 Dec 2020 16:32:07 -0800 Subject: [PATCH 37/43] fixing scrollable area layout, one more color variable --- .../src/explore/components/DatasourcePanel.tsx | 17 ++++++++--------- .../components/controls/DatasourceControl.jsx | 1 - 2 files changed, 8 insertions(+), 10 deletions(-) diff --git a/superset-frontend/src/explore/components/DatasourcePanel.tsx b/superset-frontend/src/explore/components/DatasourcePanel.tsx index 161864974dacf..ea907a987f965 100644 --- a/superset-frontend/src/explore/components/DatasourcePanel.tsx +++ b/superset-frontend/src/explore/components/DatasourcePanel.tsx @@ -50,12 +50,12 @@ const DatasourceContainer = styled.div` background-color: ${({ theme }) => theme.colors.grayscale.light4}; position: relative; height: 100%; - .field-selections { - padding: 0 ${({ theme }) => 2 * theme.gridUnit}px; - } + display: flex; + flex-direction: column; + max-height: 100%; .ant-collapse { height: auto; - border-bottom: 1px solid #cfd8dc; + border-bottom: 1px solid ${({ theme }) => theme.colors.grayscale.light2}; padding-bottom: 8px; background-color: ${({ theme }) => theme.colors.grayscale.light4}; } @@ -95,11 +95,7 @@ const DatasourceContainer = styled.div` margin-left: ${({ theme }) => theme.gridUnit * -5}px; } .field-selections { - position: absolute; - top: ${({ theme }) => theme.gridUnit * 15}px; - bottom: 0; - left: 0; - right: 0; + padding: ${({ theme }) => 2 * theme.gridUnit}px; overflow: auto; } .field-length { @@ -116,6 +112,9 @@ const DatasourceContainer = styled.div` font-size: ${({ theme }) => theme.typography.sizes.s}px; color: ${({ theme }) => theme.colors.grayscale.base}; } + .Control { + padding-bottom: 0; + } `; const DataSourcePanel = ({ diff --git a/superset-frontend/src/explore/components/controls/DatasourceControl.jsx b/superset-frontend/src/explore/components/controls/DatasourceControl.jsx index a3543ee697d75..e30aebe8763cf 100644 --- a/superset-frontend/src/explore/components/controls/DatasourceControl.jsx +++ b/superset-frontend/src/explore/components/controls/DatasourceControl.jsx @@ -50,7 +50,6 @@ const Styles = styled.div` align-items: center; border-bottom: 1px solid ${({ theme }) => theme.colors.grayscale.light2}; padding: ${({ theme }) => 2 * theme.gridUnit}px; - margin-bottom: ${({ theme }) => 2 * theme.gridUnit}px; } .ant-dropdown-trigger { margin-left: ${({ theme }) => 2 * theme.gridUnit}px; From 369aded942ebe6ba153164ad18adfce9f7737e46 Mon Sep 17 00:00:00 2001 From: Evan Rusackas Date: Thu, 17 Dec 2020 16:59:32 -0800 Subject: [PATCH 38/43] simplifying some styles --- superset-frontend/src/explore/components/DatasourcePanel.tsx | 5 +---- 1 file changed, 1 insertion(+), 4 deletions(-) diff --git a/superset-frontend/src/explore/components/DatasourcePanel.tsx b/superset-frontend/src/explore/components/DatasourcePanel.tsx index ea907a987f965..cae83ae89797e 100644 --- a/superset-frontend/src/explore/components/DatasourcePanel.tsx +++ b/superset-frontend/src/explore/components/DatasourcePanel.tsx @@ -86,10 +86,7 @@ const DatasourceContainer = styled.div` margin-left: ${({ theme }) => theme.gridUnit * -2}px; } .ant-collapse-content-box { - padding-bottom: 0px; - & > div { - margin-left: -14px; - } + padding: 0px; } .metric-option .option-label { margin-left: ${({ theme }) => theme.gridUnit * -5}px; From ab77687297d55b73b99ed1767b220156aa6d8184 Mon Sep 17 00:00:00 2001 From: Evan Rusackas Date: Thu, 17 Dec 2020 17:02:39 -0800 Subject: [PATCH 39/43] nixing a bad left margin --- superset-frontend/src/explore/components/DatasourcePanel.tsx | 3 --- 1 file changed, 3 deletions(-) diff --git a/superset-frontend/src/explore/components/DatasourcePanel.tsx b/superset-frontend/src/explore/components/DatasourcePanel.tsx index cae83ae89797e..042fcaf17713b 100644 --- a/superset-frontend/src/explore/components/DatasourcePanel.tsx +++ b/superset-frontend/src/explore/components/DatasourcePanel.tsx @@ -88,9 +88,6 @@ const DatasourceContainer = styled.div` .ant-collapse-content-box { padding: 0px; } - .metric-option .option-label { - margin-left: ${({ theme }) => theme.gridUnit * -5}px; - } .field-selections { padding: ${({ theme }) => 2 * theme.gridUnit}px; overflow: auto; From 1f1b2a8eaf9f67c7e803ff84012b60845755349b Mon Sep 17 00:00:00 2001 From: Evan Rusackas Date: Thu, 17 Dec 2020 17:13:04 -0800 Subject: [PATCH 40/43] Using gridunit for padding --- superset-frontend/src/explore/components/DatasourcePanel.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/superset-frontend/src/explore/components/DatasourcePanel.tsx b/superset-frontend/src/explore/components/DatasourcePanel.tsx index 042fcaf17713b..72df2195acb03 100644 --- a/superset-frontend/src/explore/components/DatasourcePanel.tsx +++ b/superset-frontend/src/explore/components/DatasourcePanel.tsx @@ -56,7 +56,7 @@ const DatasourceContainer = styled.div` .ant-collapse { height: auto; border-bottom: 1px solid ${({ theme }) => theme.colors.grayscale.light2}; - padding-bottom: 8px; + padding-bottom: ${({ theme }) => theme.gridUnit * 2}px; background-color: ${({ theme }) => theme.colors.grayscale.light4}; } .ant-collapse > .ant-collapse-item > .ant-collapse-header { From c11aa526036cacfe065d3d7cbcffed6abd9294d4 Mon Sep 17 00:00:00 2001 From: Evan Rusackas Date: Thu, 17 Dec 2020 17:13:26 -0800 Subject: [PATCH 41/43] using gridUnit for padding --- superset-frontend/src/explore/components/DatasourcePanel.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/superset-frontend/src/explore/components/DatasourcePanel.tsx b/superset-frontend/src/explore/components/DatasourcePanel.tsx index 72df2195acb03..461c5160a27dd 100644 --- a/superset-frontend/src/explore/components/DatasourcePanel.tsx +++ b/superset-frontend/src/explore/components/DatasourcePanel.tsx @@ -60,7 +60,7 @@ const DatasourceContainer = styled.div` background-color: ${({ theme }) => theme.colors.grayscale.light4}; } .ant-collapse > .ant-collapse-item > .ant-collapse-header { - padding-left: 10px; + padding-left: ${({ theme }) => theme.gridUnit * 2}px; padding-bottom: 0px; } .form-control.input-sm { From 81a04f3996513785ea633e2aa51fcc6d1864d574 Mon Sep 17 00:00:00 2001 From: Phillip Kelley-Dotson Date: Thu, 17 Dec 2020 17:31:43 -0800 Subject: [PATCH 42/43] define types for datsource panel --- .../explore/components/DatasourcePanel.tsx | 34 ++++++++++++++++--- 1 file changed, 30 insertions(+), 4 deletions(-) diff --git a/superset-frontend/src/explore/components/DatasourcePanel.tsx b/superset-frontend/src/explore/components/DatasourcePanel.tsx index ea907a987f965..10afcbaaa23f3 100644 --- a/superset-frontend/src/explore/components/DatasourcePanel.tsx +++ b/superset-frontend/src/explore/components/DatasourcePanel.tsx @@ -28,17 +28,43 @@ import { ExploreActions } from '../actions/exploreActions'; import Control from './Control'; interface DatasourceControl { - validationErrors: any; + validationErrors: Array; mapStateToProps: QueryFormData; type: ControlType; label: string; datasource?: DatasourceControl; } +type Columns = { + column_name: string; + description: string | undefined; + expression: string | undefined; + filterable: boolean; + groupby: string | undefined; + id: number; + is_dttm: boolean; + python_date_format: string; + type: string; + verbose_name: string; +}; + +type Metrics = { + certification_details: string | undefined; + certified_by: string | undefined; + d3format: string | undefined; + description: string | undefined; + expression: string; + id: number; + is_certified: boolean; + metric_name: string; + verbose_name: string; + warning_text: string; +}; + interface Props { datasource: { - columns: Array; - metrics: Array; + columns: Array; + metrics: Array; }; controls: { datasource: DatasourceControl; @@ -195,7 +221,7 @@ const DataSourcePanel = ({ {t(`Showing %s of %s`, metricSlice.length, metrics.length)}
{metricSlice.map(m => ( -
+
))} From 070ab285a0866212d4cd0a51c7d70e77420497e7 Mon Sep 17 00:00:00 2001 From: Evan Rusackas Date: Thu, 17 Dec 2020 17:35:03 -0800 Subject: [PATCH 43/43] fixing a padding issue --- .../src/explore/components/DatasourcePanel.tsx | 6 ++++-- 1 file changed, 4 insertions(+), 2 deletions(-) diff --git a/superset-frontend/src/explore/components/DatasourcePanel.tsx b/superset-frontend/src/explore/components/DatasourcePanel.tsx index 042fcaf17713b..65343103ff17c 100644 --- a/superset-frontend/src/explore/components/DatasourcePanel.tsx +++ b/superset-frontend/src/explore/components/DatasourcePanel.tsx @@ -85,7 +85,10 @@ const DatasourceContainer = styled.div` font-size: ${({ theme }) => theme.typography.sizes.l}px; margin-left: ${({ theme }) => theme.gridUnit * -2}px; } - .ant-collapse-content-box { + .ant-collapse-borderless + > .ant-collapse-item + > .ant-collapse-content + > .ant-collapse-content-box { padding: 0px; } .field-selections { @@ -93,7 +96,6 @@ const DatasourceContainer = styled.div` overflow: auto; } .field-length { - margin-top: -3px; margin-bottom: ${({ theme }) => theme.gridUnit * 2}px; font-size: ${({ theme }) => theme.typography.sizes.s}px; color: ${({ theme }) => theme.colors.grayscale.light1};