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-sqlite
|
||||
before_install:
|
||||
- npm install -g npm@'>=5.0.3'
|
||||
- npm install -g npm@'>=5.4.1'
|
||||
before_script:
|
||||
- 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';"
|
||||
|
|
|
@ -178,8 +178,8 @@ class ChartContainer extends React.PureComponent {
|
|||
this.props.actions.renderTriggered();
|
||||
const mockSlice = this.getMockedSliceObject();
|
||||
this.setState({ mockSlice });
|
||||
const viz = visMap[this.props.viz_type];
|
||||
try {
|
||||
const viz = visMap[this.props.viz_type];
|
||||
viz(mockSlice, this.props.queryResponse, this.props.actions.setControlValue);
|
||||
} catch (e) {
|
||||
this.props.actions.chartRenderingFailed(e);
|
||||
|
|
|
@ -70,7 +70,7 @@
|
|||
"react-dom": "^15.5.1",
|
||||
"react-gravatar": "^2.6.1",
|
||||
"react-grid-layout": "^0.14.4",
|
||||
"react-map-gl": "^2.0.3",
|
||||
"react-map-gl": "^3.0.4",
|
||||
"react-redux": "^5.0.2",
|
||||
"react-resizable": "^1.3.3",
|
||||
"react-select": "1.0.0-rc.3",
|
||||
|
|
|
@ -1,10 +1,10 @@
|
|||
/* eslint-disable no-param-reassign */
|
||||
/* eslint-disable react/no-multi-comp */
|
||||
import d3 from 'd3';
|
||||
import React from 'react';
|
||||
import PropTypes from 'prop-types';
|
||||
import ReactDOM from 'react-dom';
|
||||
import MapGL from 'react-map-gl';
|
||||
import ScatterPlotOverlay from 'react-map-gl/dist/overlays/scatterplot.react';
|
||||
import Immutable from 'immutable';
|
||||
import supercluster from 'supercluster';
|
||||
import ViewportMercator from 'viewport-mercator-project';
|
||||
|
@ -22,7 +22,14 @@ import './mapbox.css';
|
|||
|
||||
const NOOP = () => {};
|
||||
|
||||
class ScatterPlotGlowOverlay extends ScatterPlotOverlay {
|
||||
class ScatterPlotGlowOverlay extends React.Component {
|
||||
componentDidMount() {
|
||||
this.redraw();
|
||||
}
|
||||
|
||||
componentDidUpdate() {
|
||||
this.redraw();
|
||||
}
|
||||
drawText(ctx, pixel, options = {}) {
|
||||
const IS_DARK_THRESHOLD = 110;
|
||||
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
|
||||
_redraw() {
|
||||
redraw() {
|
||||
const props = this.props;
|
||||
const pixelRatio = window.devicePixelRatio || 1;
|
||||
const canvas = this.refs.overlay;
|
||||
|
@ -181,12 +188,60 @@ class ScatterPlotGlowOverlay extends ScatterPlotOverlay {
|
|||
|
||||
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 {
|
||||
constructor(props) {
|
||||
super(props);
|
||||
|
||||
const longitude = this.props.viewportLongitude || DEFAULT_LONGITUDE;
|
||||
const latitude = this.props.viewportLatitude || DEFAULT_LATITUDE;
|
||||
|
||||
|
@ -198,11 +253,10 @@ class MapboxViz extends React.Component {
|
|||
startDragLngLat: [longitude, latitude],
|
||||
},
|
||||
};
|
||||
|
||||
this.onChangeViewport = this.onChangeViewport.bind(this);
|
||||
this.onViewportChange = this.onViewportChange.bind(this);
|
||||
}
|
||||
|
||||
onChangeViewport(viewport) {
|
||||
onViewportChange(viewport) {
|
||||
this.setState({ viewport });
|
||||
this.props.setControlValue('viewport_longitude', viewport.longitude);
|
||||
this.props.setControlValue('viewport_latitude', viewport.latitude);
|
||||
|
@ -230,7 +284,7 @@ class MapboxViz extends React.Component {
|
|||
width={this.props.sliceWidth}
|
||||
height={this.props.sliceHeight}
|
||||
mapboxApiAccessToken={this.props.mapboxApiKey}
|
||||
onChangeViewport={this.onChangeViewport}
|
||||
onViewportChange={this.onViewportChange}
|
||||
>
|
||||
<ScatterPlotGlowOverlay
|
||||
{...this.state.viewport}
|
||||
|
|
|
@ -36,12 +36,10 @@ const config = {
|
|||
],
|
||||
alias: {
|
||||
webworkify: 'webworkify-webpack',
|
||||
'mapbox-gl$': path.join(__dirname, '/node_modules/mapbox-gl/dist/mapbox-gl.js'),
|
||||
},
|
||||
|
||||
},
|
||||
module: {
|
||||
noParse: /mapbox-gl\/dist/,
|
||||
loaders: [
|
||||
{
|
||||
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
|
||||
{
|
||||
test: /\.css$/,
|
||||
|
@ -106,16 +98,6 @@ const config = {
|
|||
test: /\.(ttf|eot|svg)(\?v=[0-9]\.[0-9]\.[0-9])?$/,
|
||||
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: {
|
||||
|
|
Loading…
Reference in New Issue