This is an automated email from the ASF dual-hosted git repository.
maximebeauchemin pushed a commit to branch master
in repository https://gitbox.apache.org/repos/asf/incubator-superset.git
The following commit(s) were added to refs/heads/master by this push:
new b7b517a [fix] bug on FixedOrMetricControl component causing issues
with deck.gl polygon height + deck.gl scatter radius controls (#7924)
b7b517a is described below
commit b7b517a102882c074fc332d415b123cbac537993
Author: Tom Hunter <[email protected]>
AuthorDate: Mon Jul 29 19:53:52 2019 -0400
[fix] bug on FixedOrMetricControl component causing issues with deck.gl
polygon height + deck.gl scatter radius controls (#7924)
* [WIP] bug fix for FixedOrMetricControl not rendering
* Updated value preview and type selection
* fix metric control not on setting polygon elevation data
* Updated layout of FoM comp
* linting fixes
* linting fix pt. 2
* linting fix pt. 3
* fix scatter tooltip to work with metric control
* Fixed tests
---
.../components/FixedOrMetricControl_spec.jsx | 17 +--
.../components/controls/FixedOrMetricControl.jsx | 116 +++++++++++----------
.../explore/components/controls/MetricsControl.jsx | 2 +-
superset/assets/src/explore/main.css | 11 ++
.../deckgl/layers/Scatter/Scatter.jsx | 2 +-
superset/viz.py | 2 +-
6 files changed, 79 insertions(+), 71 deletions(-)
diff --git
a/superset/assets/spec/javascripts/explore/components/FixedOrMetricControl_spec.jsx
b/superset/assets/spec/javascripts/explore/components/FixedOrMetricControl_spec.jsx
index 4b6d073..0a6fc13 100644
---
a/superset/assets/spec/javascripts/explore/components/FixedOrMetricControl_spec.jsx
+++
b/superset/assets/spec/javascripts/explore/components/FixedOrMetricControl_spec.jsx
@@ -19,7 +19,6 @@
/* eslint-disable no-unused-expressions */
import React from 'react';
import { shallow } from 'enzyme';
-import { OverlayTrigger } from 'react-bootstrap';
import FixedOrMetricControl from
'../../../../src/explore/components/controls/FixedOrMetricControl';
@@ -27,29 +26,21 @@ import TextControl from
'../../../../src/explore/components/controls/TextControl';
import MetricsControl from
'../../../../src/explore/components/controls/MetricsControl';
-import ControlHeader from '../../../../src/explore/components/ControlHeader';
const defaultProps = {
value: { },
+ datasource: { },
};
describe('FixedOrMetricControl', () => {
let wrapper;
- let inst;
+
beforeEach(() => {
wrapper = shallow(<FixedOrMetricControl {...defaultProps} />);
- inst = wrapper.instance();
- });
-
- it('renders a OverlayTrigger', () => {
- const controlHeader = wrapper.find(ControlHeader);
- expect(controlHeader).toHaveLength(1);
- expect(wrapper.find(OverlayTrigger)).toHaveLength(1);
});
it('renders a TextControl and a SelectControl', () => {
- const popOver = shallow(inst.renderPopover());
- expect(popOver.find(TextControl)).toHaveLength(1);
- expect(popOver.find(MetricsControl)).toHaveLength(1);
+ expect(wrapper.find(TextControl)).toHaveLength(1);
+ expect(wrapper.find(MetricsControl)).toHaveLength(1);
});
});
diff --git
a/superset/assets/src/explore/components/controls/FixedOrMetricControl.jsx
b/superset/assets/src/explore/components/controls/FixedOrMetricControl.jsx
index 9c7bb1d..79560e7 100644
--- a/superset/assets/src/explore/components/controls/FixedOrMetricControl.jsx
+++ b/superset/assets/src/explore/components/controls/FixedOrMetricControl.jsx
@@ -18,7 +18,7 @@
*/
import React from 'react';
import PropTypes from 'prop-types';
-import { Label, Popover, OverlayTrigger } from 'react-bootstrap';
+import { Label, Panel } from 'react-bootstrap';
import TextControl from './TextControl';
import MetricsControl from './MetricsControl';
@@ -53,6 +53,7 @@ export default class FixedOrMetricControl extends
React.Component {
this.setType = this.setType.bind(this);
this.setFixedValue = this.setFixedValue.bind(this);
this.setMetric = this.setMetric.bind(this);
+ this.toggle = this.toggle.bind(this);
const type = (props.value ? props.value.type : props.default.type) ||
controlTypes.fixed;
const value = (props.value ? props.value.value : props.default.value) ||
'100';
this.state = {
@@ -77,66 +78,71 @@ export default class FixedOrMetricControl extends
React.Component {
setMetric(metricValue) {
this.setState({ metricValue }, this.onChange);
}
- renderPopover() {
- const value = this.props.value || this.props.default;
- const type = value.type || controlTypes.fixed;
- return (
- <Popover id="filter-popover">
- <div style={{ width: '240px' }}>
- <PopoverSection
- title="Fixed"
- isSelected={type === controlTypes.fixed}
- onSelect={() => { this.onChange(controlTypes.fixed); }}
- >
- <TextControl
- isFloat
- onChange={this.setFixedValue}
- onFocus={() => { this.setType(controlTypes.fixed); }}
- value={this.state.fixedValue}
- />
- </PopoverSection>
- <PopoverSection
- title="Based on a metric"
- isSelected={type === controlTypes.metric}
- onSelect={() => { this.onChange(controlTypes.metric); }}
- >
- <MetricsControl
- name="metric"
- datasource={this.state.datasource}
- multi={false}
- onFocus={() => { this.setType(controlTypes.metric); }}
- onChange={this.setMetric}
- value={this.state.metricValue}
- />
- </PopoverSection>
- </div>
- </Popover>
- );
+
+ toggle() {
+ const expanded = !this.state.expanded;
+ this.setState({
+ expanded,
+ });
}
+
render() {
+ const value = this.props.value || this.props.default;
+ const type = value.type || controlTypes.fixed;
+ const columns = this.props.datasource ? this.props.datasource.columns :
null;
return (
<div>
<ControlHeader {...this.props} />
- <OverlayTrigger
- container={document.body}
- trigger="click"
- rootClose
- ref="trigger"
- placement="right"
- overlay={this.renderPopover()}
+ <Label
+ style={{ cursor: 'pointer' }}
+ onClick={this.toggle}
+ >
+ {this.state.type === controlTypes.fixed &&
+ <span>{this.state.fixedValue}</span>
+ }
+ {this.state.type === controlTypes.metric &&
+ <span>
+ <span style={{ fontWeight: 'normal' }}>metric: </span>
+ <strong>{this.state.metricValue ? this.state.metricValue.label :
null }</strong>
+ </span>
+ }
+ </Label>
+ <Panel
+ className="panel-spreaded"
+ collapsible
+ expanded={this.state.expanded}
>
- <Label style={{ cursor: 'pointer' }}>
- {this.state.type === controlTypes.fixed &&
- <span>{this.state.fixedValue}</span>
- }
- {this.state.type === controlTypes.metric &&
- <span>
- <span style={{ fontWeight: 'normal' }}>metric: </span>
- <strong>{this.state.metricValue}</strong>
- </span>
- }
- </Label>
- </OverlayTrigger>
+ <div
+ className="well"
+ >
+ <PopoverSection
+ title="Fixed"
+ isSelected={type === controlTypes.fixed}
+ onSelect={() => { this.setType(controlTypes.fixed); }}
+ >
+ <TextControl
+ isFloat
+ onChange={this.setFixedValue}
+ onFocus={() => { this.setType(controlTypes.fixed); }}
+ value={this.state.fixedValue}
+ />
+ </PopoverSection>
+ <PopoverSection
+ title="Based on a metric"
+ isSelected={type === controlTypes.metric}
+ onSelect={() => { this.setType(controlTypes.metric); }}
+ >
+ <MetricsControl
+ name="metric"
+ columns={columns}
+ multi={false}
+ onFocus={() => { this.setType(controlTypes.metric); }}
+ onChange={this.setMetric}
+ value={this.state.metricValue}
+ />
+ </PopoverSection>
+ </div>
+ </Panel>
</div>
);
}
diff --git a/superset/assets/src/explore/components/controls/MetricsControl.jsx
b/superset/assets/src/explore/components/controls/MetricsControl.jsx
index b079d21..9498b08 100644
--- a/superset/assets/src/explore/components/controls/MetricsControl.jsx
+++ b/superset/assets/src/explore/components/controls/MetricsControl.jsx
@@ -245,7 +245,7 @@ export default class MetricsControl extends
React.PureComponent {
const options = [
...columns,
...aggregates,
- ...savedMetrics,
+ ...(savedMetrics || []),
];
return options.reduce((results, option) => {
diff --git a/superset/assets/src/explore/main.css
b/superset/assets/src/explore/main.css
index daf93d8..3688e85 100644
--- a/superset/assets/src/explore/main.css
+++ b/superset/assets/src/explore/main.css
@@ -259,3 +259,14 @@ h2.section-header {
padding-bottom: 5px;
}
+.panel-spreaded,
+.panel-spreaded .panel-body {
+ padding: 0;
+ margin: 0;
+}
+
+.panel-spreaded .well {
+ margin-top: 8px;
+ margin-bottom: 0;
+ padding: 8px;
+}
diff --git
a/superset/assets/src/visualizations/deckgl/layers/Scatter/Scatter.jsx
b/superset/assets/src/visualizations/deckgl/layers/Scatter/Scatter.jsx
index add107d..42dd7c8 100644
--- a/superset/assets/src/visualizations/deckgl/layers/Scatter/Scatter.jsx
+++ b/superset/assets/src/visualizations/deckgl/layers/Scatter/Scatter.jsx
@@ -36,7 +36,7 @@ function setTooltipContent(formData) {
o.object.cat_color && <TooltipRow label={`${t('Category')}: `}
value={`${o.object.cat_color}`} />
}
{
- o.object.metric && <TooltipRow
label={`${formData.point_radius_fixed.value}: `} value={`${o.object.metric}`} />
+ o.object.metric && <TooltipRow
label={`${formData.point_radius_fixed.value.label}: `}
value={`${o.object.metric}`} />
}
</div>
);
diff --git a/superset/viz.py b/superset/viz.py
index b804ec9..65e5288 100644
--- a/superset/viz.py
+++ b/superset/viz.py
@@ -2425,7 +2425,7 @@ class DeckPolygon(DeckPathViz):
fd = self.form_data
elevation = fd["point_radius_fixed"]["value"]
type_ = fd["point_radius_fixed"]["type"]
- d["elevation"] = d.get(elevation) if type_ == "metric" else elevation
+ d["elevation"] = d.get(elevation["label"]) if type_ == "metric" else
elevation
return d
