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

Jump to bottom

Migrating mapbox controls #9373

Merged
merged 1 commit into from
Mar 27, 2020
Merged

Migrating mapbox controls #9373

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
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
7 changes: 0 additions & 7 deletions CONTRIBUTING.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -1089,7 +1089,6 @@ Note the `y_axis_format` is defined under various section for some charts.
| `autozoom` | _N/A_ | |
| `bar_stacked` | _N/A_ | |
| `cache_timeout` | _N/A_ | |
| `clustering_radius` | _N/A_ | |
| `code` | _N/A_ | |
| `collapsed_fieldsets` | _N/A_ | |
| `column_collection` | _N/A_ | |
Expand Down Expand Up @@ -1135,7 +1134,6 @@ Note the `y_axis_format` is defined under various section for some charts.
| `line_width` | _N/A_ | |
| `linear_color_scheme` | _N/A_ | |
| `log_scale` | _N/A_ | |
| `mapbox_color` | _N/A_ | |
| `mapbox_label` | _N/A_ | |
| `mapbox_style` | _N/A_ | |
| `marker_labels` | _N/A_ | |
Expand All @@ -1159,9 +1157,7 @@ Note the `y_axis_format` is defined under various section for some charts.
| `partition_threshold` | _N/A_ | |
| `period_ratio_type` | _N/A_ | |
| `perm` | _N/A_ | |
| `point_radius` | _N/A_ | |
| `point_radius_fixed` | _N/A_ | |
| `point_radius_unit` | _N/A_ | |
| `point_unit` | _N/A_ | |
| `prefix_metric_with_slice_name` | _N/A_ | |
| `range_labels` | _N/A_ | |
Expand All @@ -1170,7 +1166,6 @@ Note the `y_axis_format` is defined under various section for some charts.
| `reduce_x_ticks` | _N/A_ | |
| `refresh_frequency` | _N/A_ | |
| `remote_id` | _N/A_ | |
| `render_while_dragging` | _N/A_ | |
| `resample_fillmethod` | _N/A_ | |
| `resample_how` | _N/A_ | |
| `resample_method` | _N/A_ | |
Expand Down Expand Up @@ -1211,6 +1206,4 @@ Note the `y_axis_format` is defined under various section for some charts.
| `url` | _N/A_ | |
| `userid` | _N/A_ | |
| `viewport` | _N/A_ | |
| `viewport_latitude` | _N/A_ | |
| `viewport_longitude` | _N/A_ | |
| `viewport_zoom` | _N/A_ | |
151 changes: 145 additions & 6 deletions superset-frontend/src/explore/controlPanels/Mapbox.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -17,6 +17,8 @@
* under the License.
*/
import { t } from '@superset-ui/translation';
import { formatSelectOptions } from '../../modules/utils';
import { columnChoices } from '../controls';

export default {
controlPanelSections: [
Expand All @@ -25,15 +27,76 @@ export default {
expanded: true,
controlSetRows: [
['all_columns_x', 'all_columns_y'],
['clustering_radius'],
[
{
name: 'clustering_radius',
config: {
type: 'SelectControl',
freeForm: true,
label: t('Clustering Radius'),
default: '60',
choices: formatSelectOptions([
'0',
'20',
'40',
'60',
'80',
'100',
'200',
'500',
'1000',
]),
description: t(
'The radius (in pixels) the algorithm uses to define a cluster. ' +
'Choose 0 to turn off clustering, but beware that a large ' +
'number of points (>1000) will cause lag.',
),
},
},
],
['row_limit'],
['adhoc_filters'],
['groupby'],
],
},
{
label: t('Points'),
controlSetRows: [['point_radius'], ['point_radius_unit']],
controlSetRows: [
[
{
name: 'point_radius',
config: {
type: 'SelectControl',
label: t('Point Radius'),
default: 'Auto',
description: t(
'The radius of individual points (ones that are not in a cluster). ' +
'Either a numerical column or `Auto`, which scales the point based ' +
'on the largest cluster',
),
mapStateToProps: state => ({
choices: formatSelectOptions(['Auto']).concat(
columnChoices(state.datasource),
),
}),
},
},
],
[
{
name: 'point_radius_unit',
config: {
type: 'SelectControl',
label: t('Point Radius Unit'),
default: 'Pixels',
choices: formatSelectOptions(['Pixels', 'Miles', 'Kilometers']),
description: t(
'The unit of measure for the specified point radius',
),
},
},
],
],
},
{
label: t('Labelling'),
Expand All @@ -42,18 +105,94 @@ export default {
{
label: t('Visual Tweaks'),
controlSetRows: [
['render_while_dragging'],
[
{
name: 'render_while_dragging',
config: {
type: 'CheckboxControl',
label: t('Live render'),
default: true,
description: t(
'Points and clusters will update as the viewport is being changed',
),
},
},
],
['mapbox_style'],
['global_opacity'],
['mapbox_color'],
[
{
name: 'mapbox_color',
config: {
type: 'SelectControl',
freeForm: true,
label: t('RGB Color'),
default: 'rgb(0, 122, 135)',
choices: [
['rgb(0, 139, 139)', 'Dark Cyan'],
['rgb(128, 0, 128)', 'Purple'],
['rgb(255, 215, 0)', 'Gold'],
['rgb(69, 69, 69)', 'Dim Gray'],
['rgb(220, 20, 60)', 'Crimson'],
['rgb(34, 139, 34)', 'Forest Green'],
],
description: t('The color for points and clusters in RGB'),
},
},
],
],
},
{
label: t('Viewport'),
expanded: true,
controlSetRows: [
['viewport_longitude', 'viewport_latitude'],
['viewport_zoom', null],
[
{
name: 'viewport_longitude',
config: {
type: 'TextControl',
label: t('Default longitude'),
renderTrigger: true,
default: -122.405293,
isFloat: true,
description: t('Longitude of default viewport'),
places: 8,
// Viewport longitude changes shouldn't prompt user to re-run query
dontRefreshOnChange: true,
},
},
{
name: 'viewport_latitude',
config: {
type: 'TextControl',
label: t('Default latitude'),
renderTrigger: true,
default: 37.772123,
isFloat: true,
description: t('Latitude of default viewport'),
places: 8,
// Viewport latitude changes shouldn't prompt user to re-run query
dontRefreshOnChange: true,
},
},
],
[
{
name: 'viewport_zoom',
config: {
type: 'TextControl',
label: t('Zoom'),
renderTrigger: true,
isFloat: true,
default: 11,
description: t('Zoom level of the map'),
places: 8,
// Viewport zoom shouldn't prompt user to re-run query
dontRefreshOnChange: true,
},
},
null,
],
],
},
],
Expand Down
98 changes: 1 addition & 97 deletions superset-frontend/src/explore/controls.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -191,7 +191,7 @@ const jsFunctionInfo = (
</div>
);

function columnChoices(datasource) {
export function columnChoices(datasource) {
Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

@kristw just pointing out this export/import... we may want to move this to utils or somewhere else that makes more sense.

Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Agree. We can separate this function into its own file starting in this PR too.

Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I'll make another PR moving this (and probably some other things) into separate files/modules. I'll track it in my internal documents for now.

if (datasource && datasource.columns) {
return datasource.columns
.map(col => [col.column_name, col.verbose_name || col.column_name])
Expand Down Expand Up @@ -1612,29 +1612,6 @@ export const controls = {
description: t('Base layer map style'),
},

clustering_radius: {
type: 'SelectControl',
freeForm: true,
label: t('Clustering Radius'),
default: '60',
choices: formatSelectOptions([
'0',
'20',
'40',
'60',
'80',
'100',
'200',
'500',
'1000',
]),
description: t(
'The radius (in pixels) the algorithm uses to define a cluster. ' +
'Choose 0 to turn off clustering, but beware that a large ' +
'number of points (>1000) will cause lag.',
),
},

point_radius_fixed: {
type: 'FixedOrMetricControl',
label: t('Point Size'),
Expand All @@ -1645,30 +1622,6 @@ export const controls = {
}),
},

point_radius: {
type: 'SelectControl',
label: t('Point Radius'),
default: 'Auto',
description: t(
'The radius of individual points (ones that are not in a cluster). ' +
'Either a numerical column or `Auto`, which scales the point based ' +
'on the largest cluster',
),
mapStateToProps: state => ({
choices: formatSelectOptions(['Auto']).concat(
columnChoices(state.datasource),
),
}),
},

point_radius_unit: {
type: 'SelectControl',
label: t('Point Radius Unit'),
default: 'Pixels',
choices: formatSelectOptions(['Pixels', 'Miles', 'Kilometers']),
description: t('The unit of measure for the specified point radius'),
},

point_unit: {
type: 'SelectControl',
label: t('Point Unit'),
Expand Down Expand Up @@ -1729,55 +1682,6 @@ export const controls = {
dontRefreshOnChange: true,
},

viewport_latitude: {
type: 'TextControl',
label: t('Default latitude'),
renderTrigger: true,
default: 37.772123,
isFloat: true,
description: t('Latitude of default viewport'),
places: 8,
// Viewport latitude changes shouldn't prompt user to re-run query
dontRefreshOnChange: true,
},

viewport_longitude: {
type: 'TextControl',
label: t('Default longitude'),
renderTrigger: true,
default: -122.405293,
isFloat: true,
description: t('Longitude of default viewport'),
places: 8,
// Viewport longitude changes shouldn't prompt user to re-run query
dontRefreshOnChange: true,
},

render_while_dragging: {
type: 'CheckboxControl',
label: t('Live render'),
default: true,
description: t(
'Points and clusters will update as the viewport is being changed',
),
},

mapbox_color: {
type: 'SelectControl',
freeForm: true,
label: t('RGB Color'),
default: 'rgb(0, 122, 135)',
choices: [
['rgb(0, 139, 139)', 'Dark Cyan'],
['rgb(128, 0, 128)', 'Purple'],
['rgb(255, 215, 0)', 'Gold'],
['rgb(69, 69, 69)', 'Dim Gray'],
['rgb(220, 20, 60)', 'Crimson'],
['rgb(34, 139, 34)', 'Forest Green'],
],
description: t('The color for points and clusters in RGB'),
},

color: {
type: 'ColorPickerControl',
label: t('Color'),
Expand Down