mirror of https://github.com/apache/superset.git
Fixing the build (#3445)
* Bumping npm * Fixing the build This addresses long standing issues and hacks around react-map-gl that have been creating all sorts of build issues over time. It appears that recent changes broke things further. This PR upgrades to the latest `react-map-gl` and removes related hacks.
This commit is contained in:
parent
3dfdde130a
commit
147c12dddf
|
@ -19,7 +19,7 @@ env:
|
||||||
- TOX_ENV=py27-mysql
|
- TOX_ENV=py27-mysql
|
||||||
- TOX_ENV=py27-sqlite
|
- TOX_ENV=py27-sqlite
|
||||||
before_install:
|
before_install:
|
||||||
- npm install -g npm@'>=5.0.3'
|
- npm install -g npm@'>=5.4.1'
|
||||||
before_script:
|
before_script:
|
||||||
- mysql -e 'drop database if exists superset; create database superset DEFAULT CHARACTER SET utf8 COLLATE utf8_unicode_ci' -u root
|
- mysql -e 'drop database if exists superset; create database superset DEFAULT CHARACTER SET utf8 COLLATE utf8_unicode_ci' -u root
|
||||||
- mysql -u root -e "CREATE USER 'mysqluser'@'localhost' IDENTIFIED BY 'mysqluserpassword';"
|
- mysql -u root -e "CREATE USER 'mysqluser'@'localhost' IDENTIFIED BY 'mysqluserpassword';"
|
||||||
|
|
|
@ -178,8 +178,8 @@ class ChartContainer extends React.PureComponent {
|
||||||
this.props.actions.renderTriggered();
|
this.props.actions.renderTriggered();
|
||||||
const mockSlice = this.getMockedSliceObject();
|
const mockSlice = this.getMockedSliceObject();
|
||||||
this.setState({ mockSlice });
|
this.setState({ mockSlice });
|
||||||
try {
|
|
||||||
const viz = visMap[this.props.viz_type];
|
const viz = visMap[this.props.viz_type];
|
||||||
|
try {
|
||||||
viz(mockSlice, this.props.queryResponse, this.props.actions.setControlValue);
|
viz(mockSlice, this.props.queryResponse, this.props.actions.setControlValue);
|
||||||
} catch (e) {
|
} catch (e) {
|
||||||
this.props.actions.chartRenderingFailed(e);
|
this.props.actions.chartRenderingFailed(e);
|
||||||
|
|
|
@ -70,7 +70,7 @@
|
||||||
"react-dom": "^15.5.1",
|
"react-dom": "^15.5.1",
|
||||||
"react-gravatar": "^2.6.1",
|
"react-gravatar": "^2.6.1",
|
||||||
"react-grid-layout": "^0.14.4",
|
"react-grid-layout": "^0.14.4",
|
||||||
"react-map-gl": "^2.0.3",
|
"react-map-gl": "^3.0.4",
|
||||||
"react-redux": "^5.0.2",
|
"react-redux": "^5.0.2",
|
||||||
"react-resizable": "^1.3.3",
|
"react-resizable": "^1.3.3",
|
||||||
"react-select": "1.0.0-rc.3",
|
"react-select": "1.0.0-rc.3",
|
||||||
|
|
|
@ -1,10 +1,10 @@
|
||||||
/* eslint-disable no-param-reassign */
|
/* eslint-disable no-param-reassign */
|
||||||
|
/* eslint-disable react/no-multi-comp */
|
||||||
import d3 from 'd3';
|
import d3 from 'd3';
|
||||||
import React from 'react';
|
import React from 'react';
|
||||||
import PropTypes from 'prop-types';
|
import PropTypes from 'prop-types';
|
||||||
import ReactDOM from 'react-dom';
|
import ReactDOM from 'react-dom';
|
||||||
import MapGL from 'react-map-gl';
|
import MapGL from 'react-map-gl';
|
||||||
import ScatterPlotOverlay from 'react-map-gl/dist/overlays/scatterplot.react';
|
|
||||||
import Immutable from 'immutable';
|
import Immutable from 'immutable';
|
||||||
import supercluster from 'supercluster';
|
import supercluster from 'supercluster';
|
||||||
import ViewportMercator from 'viewport-mercator-project';
|
import ViewportMercator from 'viewport-mercator-project';
|
||||||
|
@ -22,7 +22,14 @@ import './mapbox.css';
|
||||||
|
|
||||||
const NOOP = () => {};
|
const NOOP = () => {};
|
||||||
|
|
||||||
class ScatterPlotGlowOverlay extends ScatterPlotOverlay {
|
class ScatterPlotGlowOverlay extends React.Component {
|
||||||
|
componentDidMount() {
|
||||||
|
this.redraw();
|
||||||
|
}
|
||||||
|
|
||||||
|
componentDidUpdate() {
|
||||||
|
this.redraw();
|
||||||
|
}
|
||||||
drawText(ctx, pixel, options = {}) {
|
drawText(ctx, pixel, options = {}) {
|
||||||
const IS_DARK_THRESHOLD = 110;
|
const IS_DARK_THRESHOLD = 110;
|
||||||
const { fontHeight = 0, label = '', radius = 0, rgb = [0, 0, 0], shadow = false } = options;
|
const { fontHeight = 0, label = '', radius = 0, rgb = [0, 0, 0], shadow = false } = options;
|
||||||
|
@ -52,7 +59,7 @@ class ScatterPlotGlowOverlay extends ScatterPlotOverlay {
|
||||||
}
|
}
|
||||||
|
|
||||||
// Modified: https://github.com/uber/react-map-gl/blob/master/src/overlays/scatterplot.react.js
|
// Modified: https://github.com/uber/react-map-gl/blob/master/src/overlays/scatterplot.react.js
|
||||||
_redraw() {
|
redraw() {
|
||||||
const props = this.props;
|
const props = this.props;
|
||||||
const pixelRatio = window.devicePixelRatio || 1;
|
const pixelRatio = window.devicePixelRatio || 1;
|
||||||
const canvas = this.refs.overlay;
|
const canvas = this.refs.overlay;
|
||||||
|
@ -181,12 +188,60 @@ class ScatterPlotGlowOverlay extends ScatterPlotOverlay {
|
||||||
|
|
||||||
ctx.restore();
|
ctx.restore();
|
||||||
}
|
}
|
||||||
|
render() {
|
||||||
|
let width = 0;
|
||||||
|
let height = 0;
|
||||||
|
if (this.context.viewport) {
|
||||||
|
width = this.context.viewport.width;
|
||||||
|
height = this.context.viewport.height;
|
||||||
|
}
|
||||||
|
const { globalOpacity } = this.props;
|
||||||
|
const pixelRatio = window.devicePixelRatio || 1;
|
||||||
|
return (
|
||||||
|
React.createElement('canvas', {
|
||||||
|
ref: 'overlay',
|
||||||
|
width: width * pixelRatio,
|
||||||
|
height: height * pixelRatio,
|
||||||
|
style: {
|
||||||
|
width: `${width}px`,
|
||||||
|
height: `${height}px`,
|
||||||
|
position: 'absolute',
|
||||||
|
pointerEvents: 'none',
|
||||||
|
opacity: globalOpacity,
|
||||||
|
left: 0,
|
||||||
|
top: 0,
|
||||||
|
},
|
||||||
|
})
|
||||||
|
);
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
ScatterPlotGlowOverlay.propTypes = {
|
||||||
|
locations: PropTypes.instanceOf(Immutable.List).isRequired,
|
||||||
|
lngLatAccessor: PropTypes.func,
|
||||||
|
renderWhileDragging: PropTypes.bool,
|
||||||
|
globalOpacity: PropTypes.number,
|
||||||
|
dotRadius: PropTypes.number,
|
||||||
|
dotFill: PropTypes.string,
|
||||||
|
compositeOperation: PropTypes.string,
|
||||||
|
};
|
||||||
|
|
||||||
|
ScatterPlotGlowOverlay.defaultProps = {
|
||||||
|
lngLatAccessor: location => [location.get(0), location.get(1)],
|
||||||
|
renderWhileDragging: true,
|
||||||
|
dotRadius: 4,
|
||||||
|
dotFill: '#1FBAD6',
|
||||||
|
globalOpacity: 1,
|
||||||
|
// Same as browser default.
|
||||||
|
compositeOperation: 'source-over',
|
||||||
|
};
|
||||||
|
ScatterPlotGlowOverlay.contextTypes = {
|
||||||
|
viewport: PropTypes.object,
|
||||||
|
isDragging: PropTypes.bool,
|
||||||
|
};
|
||||||
|
|
||||||
class MapboxViz extends React.Component {
|
class MapboxViz extends React.Component {
|
||||||
constructor(props) {
|
constructor(props) {
|
||||||
super(props);
|
super(props);
|
||||||
|
|
||||||
const longitude = this.props.viewportLongitude || DEFAULT_LONGITUDE;
|
const longitude = this.props.viewportLongitude || DEFAULT_LONGITUDE;
|
||||||
const latitude = this.props.viewportLatitude || DEFAULT_LATITUDE;
|
const latitude = this.props.viewportLatitude || DEFAULT_LATITUDE;
|
||||||
|
|
||||||
|
@ -198,11 +253,10 @@ class MapboxViz extends React.Component {
|
||||||
startDragLngLat: [longitude, latitude],
|
startDragLngLat: [longitude, latitude],
|
||||||
},
|
},
|
||||||
};
|
};
|
||||||
|
this.onViewportChange = this.onViewportChange.bind(this);
|
||||||
this.onChangeViewport = this.onChangeViewport.bind(this);
|
|
||||||
}
|
}
|
||||||
|
|
||||||
onChangeViewport(viewport) {
|
onViewportChange(viewport) {
|
||||||
this.setState({ viewport });
|
this.setState({ viewport });
|
||||||
this.props.setControlValue('viewport_longitude', viewport.longitude);
|
this.props.setControlValue('viewport_longitude', viewport.longitude);
|
||||||
this.props.setControlValue('viewport_latitude', viewport.latitude);
|
this.props.setControlValue('viewport_latitude', viewport.latitude);
|
||||||
|
@ -230,7 +284,7 @@ class MapboxViz extends React.Component {
|
||||||
width={this.props.sliceWidth}
|
width={this.props.sliceWidth}
|
||||||
height={this.props.sliceHeight}
|
height={this.props.sliceHeight}
|
||||||
mapboxApiAccessToken={this.props.mapboxApiKey}
|
mapboxApiAccessToken={this.props.mapboxApiKey}
|
||||||
onChangeViewport={this.onChangeViewport}
|
onViewportChange={this.onViewportChange}
|
||||||
>
|
>
|
||||||
<ScatterPlotGlowOverlay
|
<ScatterPlotGlowOverlay
|
||||||
{...this.state.viewport}
|
{...this.state.viewport}
|
||||||
|
|
|
@ -36,12 +36,10 @@ const config = {
|
||||||
],
|
],
|
||||||
alias: {
|
alias: {
|
||||||
webworkify: 'webworkify-webpack',
|
webworkify: 'webworkify-webpack',
|
||||||
'mapbox-gl$': path.join(__dirname, '/node_modules/mapbox-gl/dist/mapbox-gl.js'),
|
|
||||||
},
|
},
|
||||||
|
|
||||||
},
|
},
|
||||||
module: {
|
module: {
|
||||||
noParse: /mapbox-gl\/dist/,
|
|
||||||
loaders: [
|
loaders: [
|
||||||
{
|
{
|
||||||
test: /datatables\.net.*/,
|
test: /datatables\.net.*/,
|
||||||
|
@ -59,12 +57,6 @@ const config = {
|
||||||
],
|
],
|
||||||
},
|
},
|
||||||
},
|
},
|
||||||
/* for mapbox-gl/js/geo/transform */
|
|
||||||
{
|
|
||||||
test: /\.js$/,
|
|
||||||
include: APP_DIR + '/node_modules/mapbox-gl/js',
|
|
||||||
loader: 'babel-loader',
|
|
||||||
},
|
|
||||||
// Extract css files
|
// Extract css files
|
||||||
{
|
{
|
||||||
test: /\.css$/,
|
test: /\.css$/,
|
||||||
|
@ -106,16 +98,6 @@ const config = {
|
||||||
test: /\.(ttf|eot|svg)(\?v=[0-9]\.[0-9]\.[0-9])?$/,
|
test: /\.(ttf|eot|svg)(\?v=[0-9]\.[0-9]\.[0-9])?$/,
|
||||||
loader: 'file-loader',
|
loader: 'file-loader',
|
||||||
},
|
},
|
||||||
/* for mapbox */
|
|
||||||
{
|
|
||||||
test: /\.json$/,
|
|
||||||
loader: 'json-loader',
|
|
||||||
},
|
|
||||||
{
|
|
||||||
test: /\.js$/,
|
|
||||||
include: APP_DIR + '/node_modules/mapbox-gl/js/render/painter/use_program.js',
|
|
||||||
loader: 'transform/cacheable?brfs',
|
|
||||||
},
|
|
||||||
],
|
],
|
||||||
},
|
},
|
||||||
externals: {
|
externals: {
|
||||||
|
|
Loading…
Reference in New Issue