Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Fix deck.gl form data #6953

Merged
merged 4 commits into from
Feb 27, 2019
Merged

Fix deck.gl form data #6953

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
cddeb45
Fix deck.gl viz
betodealmeida Feb 27, 2019
7cf3423
Fix more form data
betodealmeida Feb 27, 2019
bc0ea6a
Fix a few more places
betodealmeida Feb 27, 2019
2165c34
Fix unit tests
betodealmeida Feb 27, 2019
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
20 changes: 10 additions & 10 deletions superset/assets/spec/javascripts/visualizations/deckgl/utils_spec.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -30,7 +30,7 @@ describe('getBreakPoints', () => {
});

it('returns sorted break points', () => {
const fd = { break_points: ['0', '10', '100', '50', '1000'] };
const fd = { breakPoints: ['0', '10', '100', '50', '1000'] };
const result = getBreakPoints(fd, [], metricAccessor);
const expected = ['0', '10', '50', '100', '1000'];
expect(result).toEqual(expected);
Expand All @@ -45,15 +45,15 @@ describe('getBreakPoints', () => {
});

it('formats number with proper precision', () => {
const fd = { metric: 'count', num_buckets: 2 };
const fd = { metric: 'count', numBuckets: 2 };
const features = [0, 1 / 3, 2 / 3, 1].map(count => ({ count }));
const result = getBreakPoints(fd, features, metricAccessor);
const expected = ['0.0', '0.5', '1.0'];
expect(result).toEqual(expected);
});

it('works with a zero range', () => {
const fd = { metric: 'count', num_buckets: 1 };
const fd = { metric: 'count', numBuckets: 1 };
const features = [1, 1, 1].map(count => ({ count }));
const result = getBreakPoints(fd, features, metricAccessor);
const expected = ['1', '1'];
Expand All @@ -69,7 +69,7 @@ describe('getBreakPointColorScaler', () => {
it('returns linear color scaler if there are no break points', () => {
const fd = {
metric: 'count',
linear_color_scheme: ['#000000', '#ffffff'],
linearColorScheme: ['#000000', '#ffffff'],
opacity: 100,
};
const features = [10, 20, 30].map(count => ({ count }));
Expand All @@ -82,8 +82,8 @@ describe('getBreakPointColorScaler', () => {
it('returns bucketing scaler if there are break points', () => {
const fd = {
metric: 'count',
linear_color_scheme: ['#000000', '#ffffff'],
break_points: ['0', '1', '10'],
linearColorScheme: ['#000000', '#ffffff'],
breakPoints: ['0', '1', '10'],
opacity: 100,
};
const features = [];
Expand All @@ -97,8 +97,8 @@ describe('getBreakPointColorScaler', () => {
it('mask values outside the break points', () => {
const fd = {
metric: 'count',
linear_color_scheme: ['#000000', '#ffffff'],
break_points: ['0', '1', '10'],
linearColorScheme: ['#000000', '#ffffff'],
breakPoints: ['0', '1', '10'],
opacity: 100,
};
const features = [];
Expand All @@ -116,8 +116,8 @@ describe('getBuckets', () => {
it('computes buckets for break points', () => {
const fd = {
metric: 'count',
linear_color_scheme: ['#000000', '#ffffff'],
break_points: ['0', '1', '10'],
linearColorScheme: ['#000000', '#ffffff'],
breakPoints: ['0', '1', '10'],
opacity: 100,
};
const features = [];
Expand Down
18 changes: 9 additions & 9 deletions superset/assets/src/visualizations/deckgl/CategoricalDeckGLContainer.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -31,9 +31,9 @@ import { fitViewport } from './layers/common';
const { getScale } = CategoricalColorNamespace;

function getCategories(fd, data) {
const c = fd.color_picker || { r: 0, g: 0, b: 0, a: 1 };
const c = fd.colorPicker || { r: 0, g: 0, b: 0, a: 1 };
const fixedColor = [c.r, c.g, c.b, 255 * c.a];
const colorFn = getScale(fd.color_scheme);
const colorFn = getScale(fd.colorScheme);
const categories = {};
data.forEach((d) => {
if (d.cat_color != null && !categories.hasOwnProperty(d.cat_color)) {
Expand Down Expand Up @@ -108,7 +108,7 @@ export default class CategoricalDeckGLContainer extends React.PureComponent {
// the granularity has to be read from the payload form_data, not the
// props formData which comes from the instantaneous controls state
const granularity = (
props.payload.form_data.time_grain_sqla ||
props.payload.form_data.timeGrainSqla ||
props.payload.form_data.granularity ||
'P1D'
);
Expand Down Expand Up @@ -154,8 +154,8 @@ export default class CategoricalDeckGLContainer extends React.PureComponent {
features = this.addColor(features, fd);

// Apply user defined data mutator if defined
if (fd.js_data_mutator) {
const jsFnMutator = sandboxedEval(fd.js_data_mutator);
if (fd.jsDataMutator) {
const jsFnMutator = sandboxedEval(fd.jsDataMutator);
features = jsFnMutator(features);
}

Expand All @@ -180,8 +180,8 @@ export default class CategoricalDeckGLContainer extends React.PureComponent {
return [getLayer(fd, filteredPayload, onAddFilter, setTooltip)];
}
addColor(data, fd) {
const c = fd.color_picker || { r: 0, g: 0, b: 0, a: 1 };
const colorFn = getScale(fd.color_scheme);
const c = fd.colorPicker || { r: 0, g: 0, b: 0, a: 1 };
const colorFn = getScale(fd.colorScheme);
return data.map((d) => {
let color;
if (fd.dimension) {
Expand Down Expand Up @@ -229,14 +229,14 @@ export default class CategoricalDeckGLContainer extends React.PureComponent {
viewport={this.state.viewport}
onViewportChange={this.onViewportChange}
mapboxApiAccessToken={this.props.mapboxApiKey}
mapStyle={this.props.formData.mapbox_style}
mapStyle={this.props.formData.mapboxStyle}
setControlValue={this.props.setControlValue}
>
<Legend
categories={this.state.categories}
toggleCategory={this.toggleCategory}
showSingleCategory={this.showSingleCategory}
position={this.props.formData.legend_position}
position={this.props.formData.legendPosition}
/>
</AnimatableDeckGLContainer>
</div>
Expand Down
6 changes: 3 additions & 3 deletions superset/assets/src/visualizations/deckgl/Multi/Multi.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -56,7 +56,7 @@ class DeckMulti extends React.PureComponent {
const filters = [
...(subslice.form_data.filters || []),
...(formData.filters || []),
...(formData.extra_filters || []),
...(formData.extraFilters || []),
];
const subsliceCopy = {
...subslice,
Expand All @@ -70,7 +70,7 @@ class DeckMulti extends React.PureComponent {
endpoint: getExploreLongUrl(subsliceCopy.form_data, 'json'),
})
.then(({ json }) => {
const layer = layerGenerators[subsliceCopy.form_data.viz_type](
const layer = layerGenerators[subsliceCopy.form_data.vizType](
subsliceCopy.form_data,
json,
);
Expand All @@ -96,7 +96,7 @@ class DeckMulti extends React.PureComponent {
mapboxApiAccessToken={payload.data.mapboxApiKey}
viewport={viewport}
layers={layers}
mapStyle={formData.mapbox_style}
mapStyle={formData.mapboxStyle}
setControlValue={setControlValue}
/>
);
Expand Down
2 changes: 1 addition & 1 deletion superset/assets/src/visualizations/deckgl/factory.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -90,7 +90,7 @@ export function createDeckGLComponent(getLayer, getPoints) {
mapboxApiAccessToken={payload.data.mapboxApiKey}
viewport={viewport}
layers={[layer]}
mapStyle={formData.mapbox_style}
mapStyle={formData.mapboxStyle}
setControlValue={setControlValue}
onViewportChange={this.onViewportChange}
/>);
Expand Down
8 changes: 4 additions & 4 deletions superset/assets/src/visualizations/deckgl/layers/Arc/Arc.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -31,14 +31,14 @@ function getPoints(data) {

export function getLayer(fd, payload, onAddFilter, setTooltip) {
const data = payload.data.features;
const sc = fd.color_picker;
const tc = fd.target_color_picker;
const sc = fd.colorPicker;
const tc = fd.targetColorPicker;
return new ArcLayer({
id: `path-layer-${fd.slice_id}`,
id: `path-layer-${fd.sliceId}`,
data,
getSourceColor: d => d.sourceColor || d.color || [sc.r, sc.g, sc.b, 255 * sc.a],
getTargetColor: d => d.targetColor || d.color || [tc.r, tc.g, tc.b, 255 * tc.a],
strokeWidth: (fd.stroke_width) ? fd.stroke_width : 3,
strokeWidth: (fd.strokeWidth) ? fd.strokeWidth : 3,
...commonLayerProps(fd, setTooltip),
});
}
Expand Down
14 changes: 7 additions & 7 deletions superset/assets/src/visualizations/deckgl/layers/Geojson/Geojson.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -77,8 +77,8 @@ const recurseGeoJson = (node, propOverrides, extraProps) => {

export function getLayer(formData, payload, onAddFilter, setTooltip) {
const fd = formData;
const fc = fd.fill_color_picker;
const sc = fd.stroke_color_picker;
const fc = fd.fillColorPicker;
const sc = fd.strokeColorPicker;
const fillColor = [fc.r, fc.g, fc.b, 255 * fc.a];
const strokeColor = [sc.r, sc.g, sc.b, 255 * sc.a];
const propOverrides = {};
Expand All @@ -93,19 +93,19 @@ export function getLayer(formData, payload, onAddFilter, setTooltip) {
recurseGeoJson(payload.data, propOverrides);

let jsFnMutator;
if (fd.js_data_mutator) {
if (fd.jsDataMutator) {
// Applying user defined data mutator if defined
jsFnMutator = sandboxedEval(fd.js_data_mutator);
jsFnMutator = sandboxedEval(fd.jsDataMutator);
features = jsFnMutator(features);
}

return new GeoJsonLayer({
id: `geojson-layer-${fd.slice_id}`,
id: `geojson-layer-${fd.sliceId}`,
filled: fd.filled,
data: features,
stroked: fd.stroked,
extruded: fd.extruded,
pointRadiusScale: fd.point_radius_scale,
pointRadiusScale: fd.pointRadiusScale,
...commonLayerProps(fd, setTooltip),
});
}
Expand Down Expand Up @@ -145,7 +145,7 @@ function deckGeoJson(props) {
mapboxApiAccessToken={payload.data.mapboxApiKey}
viewport={viewport}
layers={[layer]}
mapStyle={formData.mapbox_style}
mapStyle={formData.mapboxStyle}
setControlValue={setControlValue}
/>
);
Expand Down
12 changes: 6 additions & 6 deletions superset/assets/src/visualizations/deckgl/layers/Grid/Grid.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -24,24 +24,24 @@ import { createDeckGLComponent } from '../../factory';

export function getLayer(formData, payload, onAddFilter, setTooltip) {
const fd = formData;
const c = fd.color_picker;
const c = fd.colorPicker;
let data = payload.data.features.map(d => ({
...d,
color: [c.r, c.g, c.b, 255 * c.a],
}));

if (fd.js_data_mutator) {
if (fd.jsDataMutator) {
// Applying user defined data mutator if defined
const jsFnMutator = sandboxedEval(fd.js_data_mutator);
const jsFnMutator = sandboxedEval(fd.jsDataMutator);
data = jsFnMutator(data);
}

const aggFunc = getAggFunc(fd.js_agg_function, p => p.weight);
const aggFunc = getAggFunc(fd.jsAggFunction, p => p.weight);
return new GridLayer({
id: `grid-layer-${fd.slice_id}`,
id: `grid-layer-${fd.sliceId}`,
data,
pickable: true,
cellSize: fd.grid_size,
cellSize: fd.gridSize,
minColor: [0, 0, 0, 0],
extruded: fd.extruded,
maxColor: [c.r, c.g, c.b, 255 * c.a],
Expand Down
12 changes: 6 additions & 6 deletions superset/assets/src/visualizations/deckgl/layers/Hex/Hex.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -24,23 +24,23 @@ import { createDeckGLComponent } from '../../factory';

export function getLayer(formData, payload, onAddFilter, setTooltip) {
const fd = formData;
const c = fd.color_picker;
const c = fd.colorPicker;
let data = payload.data.features.map(d => ({
...d,
color: [c.r, c.g, c.b, 255 * c.a],
}));

if (fd.js_data_mutator) {
if (fd.jsDataMutator) {
// Applying user defined data mutator if defined
const jsFnMutator = sandboxedEval(fd.js_data_mutator);
const jsFnMutator = sandboxedEval(fd.jsDataMutator);
data = jsFnMutator(data);
}
const aggFunc = getAggFunc(fd.js_agg_function, p => p.weight);
const aggFunc = getAggFunc(fd.jsAggFunction, p => p.weight);
return new HexagonLayer({
id: `hex-layer-${fd.slice_id}`,
id: `hex-layer-${fd.sliceId}`,
data,
pickable: true,
radius: fd.grid_size,
radius: fd.gridSize,
minColor: [0, 0, 0, 0],
extruded: fd.extruded,
maxColor: [c.r, c.g, c.b, 255 * c.a],
Expand Down
10 changes: 5 additions & 5 deletions superset/assets/src/visualizations/deckgl/layers/Path/Path.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -23,22 +23,22 @@ import { createDeckGLComponent } from '../../factory';

export function getLayer(formData, payload, onAddFilter, setTooltip) {
const fd = formData;
const c = fd.color_picker;
const c = fd.colorPicker;
const fixedColor = [c.r, c.g, c.b, 255 * c.a];
let data = payload.data.features.map(feature => ({
...feature,
path: feature.path,
width: fd.line_width,
width: fd.lineWidth,
color: fixedColor,
}));

if (fd.js_data_mutator) {
const jsFnMutator = sandboxedEval(fd.js_data_mutator);
if (fd.jsDataMutator) {
const jsFnMutator = sandboxedEval(fd.jsDataMutator);
data = jsFnMutator(data);
}

return new PathLayer({
id: `path-layer-${fd.slice_id}`,
id: `path-layer-${fd.sliceId}`,
data,
rounded: true,
widthScale: 1,
Expand Down
Loading