[webpack 4] third time's the charm ;) (#5370)

* [perf] add webpack 4 + SplitChunks + lazy load visualizations (#5240)

* [webpack] setup lazy loading for all visualizations

* [lazy-load] push renderVis function to <Chart /> state

* no mapbox token

* [lazy loading] use native webpack import func to fix chunk names, add babel-plugin-syntax-dynamic-import, fix rebase bug.

* fix geojson import, undefined t, and fix async css bug

* [lazy load] actually add babel-plugin-syntax-dynamic-import

* [webpack] working dev version of webpack v4

* [webpack 4] fix url issues, use mini-css-extract-plugin and webpack-assets-manifest plugins

* [webpack 4] use splitchunks for all files, update templates to multi-file entrypoints

* [webpack 4] multiple theme entry files for markup vis css, don't uglify mapbox

* [webpack 4] lint python manifest changes, update yarn lock.

* [webpack 4] fix tests with babel-plugin-dynamic-import-node

* [webpack 4] only use 'dynamic-import-node' plugin in tests, update <Chart /> vis promise when vis type changes

* [webpack 4] clean up package.json and yarn.lock after rebase

* [webpack 4] lint?

* [webpack 4] lint for real

* [webpack 4][istanbul] ignore visualizations/index.js

* [webpack 4] fix rebase bug, update dashboard/deprecated/chart/Chart.jsx to use vis promises.

* [webpack 4] lint and test

* [webpack 4] yarn.lock
This commit is contained in:
Chris Williams 2018-07-17 13:55:03 -07:00 committed by GitHub
parent 75cf5e198f
commit 8b7aaec19d
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
19 changed files with 1929 additions and 466 deletions

View File

@ -47,23 +47,37 @@ def parse_manifest_json():
global manifest
try:
with open(MANIFEST_FILE, 'r') as f:
manifest = json.load(f)
# the manifest inclues non-entry files
# we only need entries in templates
full_manifest = json.load(f)
manifest = full_manifest.get('entrypoints', {})
except Exception:
pass
def get_manifest_file(filename):
def get_js_manifest_files(filename):
if app.debug:
parse_manifest_json()
return '/static/assets/dist/' + manifest.get(filename, '')
entry_files = manifest.get(filename, {})
return entry_files.get('js', [])
def get_css_manifest_files(filename):
if app.debug:
parse_manifest_json()
entry_files = manifest.get(filename, {})
return entry_files.get('css', [])
parse_manifest_json()
@app.context_processor
def get_js_manifest():
return dict(js_manifest=get_manifest_file)
def get_manifest():
return dict(
js_manifest=get_js_manifest_files,
css_manifest=get_css_manifest_files,
)
#################################################################

View File

@ -1,3 +1,4 @@
{
"presets" : ["airbnb"],
"presets" : ["airbnb", "react", "env"],
"plugins": ["syntax-dynamic-import"],
}

View File

@ -1,6 +1,7 @@
{
"extends": "airbnb",
"parserOptions":{
"parser": "babel-eslint",
"parserOptions": {
"ecmaFeatures": {
"experimentalObjectRestSpread": true
}

View File

@ -3,7 +3,8 @@ instrumentation:
root: './src'
extensions: ['.js', '.jsx']
excludes: [
'dist/**'
'dist/**',
'visualizations/index.js',
]
embed-source: false
variable: __coverage__

View File

@ -10,12 +10,10 @@
"scripts": {
"test": "mocha --require ignore-styles --compilers js:babel-core/register --require spec/helpers/browser.js 'spec/**/*_spec.*'",
"test:one": "mocha --require ignore-styles --compilers js:babel-core/register --require spec/helpers/browser.js",
"cover": "babel-node node_modules/.bin/babel-istanbul cover _mocha -- --require ignore-styles spec/helpers/browser.js 'spec/**/*_spec.*'",
"dev": "NODE_ENV=dev webpack --watch --colors --progress --debug --output-pathinfo --devtool eval-cheap-source-map",
"dev-slow": "NODE_ENV=dev webpack --watch --colors --progress --debug --output-pathinfo --devtool inline-source-map",
"dev-fast": "echo 'dev-fast in now replaced by dev'",
"prod": "NODE_ENV=production node --max_old_space_size=4096 ./node_modules/webpack/bin/webpack.js -p --colors --progress",
"build": "NODE_ENV=production webpack --colors --progress",
"cover": "babel-node node_modules/.bin/babel-istanbul cover _mocha -- --compilers babel-core/register --require spec/helpers/browser.js --require ignore-styles 'spec/**/*_spec.*'",
"dev": "webpack --mode=development --colors --progress --debug --watch",
"prod": "node --max_old_space_size=4096 webpack --mode=production --colors --progress",
"build": "webpack --mode=production --colors --progress",
"lint": "eslint --ignore-path=.eslintignore --ext .js,.jsx .",
"lint-fix": "eslint --fix --ignore-path=.eslintignore --ext .js,.jsx .",
"sync-backend": "babel-node --presets env src/syncBackend.js"
@ -40,6 +38,9 @@
"bugs": {
"url": "https://github.com/apache/incubator-superset/issues"
},
"engines": {
"node": ">= 6.11.5 <7.0.0 || >= 8.9.0"
},
"homepage": "http://superset.apache.org/",
"dependencies": {
"@data-ui/event-flow": "^0.0.54",
@ -131,13 +132,16 @@
"devDependencies": {
"babel-cli": "^6.14.0",
"babel-core": "^6.10.4",
"babel-eslint": "^8.2.2",
"babel-istanbul": "^0.12.2",
"babel-loader": "^7.0.0",
"babel-loader": "^7.1.4",
"babel-plugin-css-modules-transform": "^1.1.0",
"babel-plugin-dynamic-import-node": "^1.2.0",
"babel-plugin-syntax-dynamic-import": "^6.18.0",
"babel-polyfill": "^6.23.0",
"babel-preset-airbnb": "^2.1.1",
"chai": "^4.0.2",
"clean-webpack-plugin": "^0.1.16",
"clean-webpack-plugin": "^0.1.19",
"css-loader": "^0.28.0",
"enzyme": "^2.0.0",
"eslint": "^4.19.0",
@ -148,8 +152,7 @@
"eslint-plugin-prettier": "^2.6.0",
"eslint-plugin-react": "^7.0.1",
"exports-loader": "^0.7.0",
"extract-text-webpack-plugin": "3.0.2",
"file-loader": "^0.11.1",
"file-loader": "^1.1.11",
"github-changes": "^1.0.4",
"ignore-styles": "^5.0.1",
"imports-loader": "^0.7.1",
@ -157,7 +160,8 @@
"jsdom": "9.12.0",
"json-loader": "^0.5.4",
"less": "^2.6.1",
"less-loader": "^4.0.3",
"less-loader": "^4.1.0",
"mini-css-extract-plugin": "^0.4.0",
"mocha": "^3.2.0",
"npm-check-updates": "^2.14.0",
"prettier": "^1.12.1",
@ -169,10 +173,10 @@
"style-loader": "^0.21.0",
"transform-loader": "^0.2.3",
"uglifyjs-webpack-plugin": "^1.1.0",
"url-loader": "^0.6.2",
"//": "Known issues with >=4",
"webpack": "^3.10.0",
"webpack-manifest-plugin": "2.0.3",
"webworkify-webpack": "2.1.2"
"url-loader": "^1.0.1",
"webpack": "^4.6.0",
"webpack-assets-manifest": "^3.0.1",
"webpack-cli": "^2.0.10",
"webpack-sources": "^1.1.0"
}
}

View File

@ -3,7 +3,12 @@ import 'babel-polyfill';
import chai from 'chai';
import jsdom from 'jsdom';
require('babel-register')();
require('babel-register')({
// NOTE: If `dynamic-import-node` is in .babelrc alongside
// `syntax-dynamic-import` it breaks webpack's bundle splitting capability.
// So only load during runtime on the node-side (in tests)
plugins: ['dynamic-import-node'],
});
const exposedProperties = ['window', 'navigator', 'document'];

View File

@ -38,10 +38,10 @@ describe('Chart', () => {
<Chart {...mockedProps} />,
);
});
describe('renderViz', () => {
describe('renderVis', () => {
let stub;
beforeEach(() => {
stub = sinon.stub(wrapper.instance(), 'renderViz');
stub = sinon.stub(wrapper.instance(), 'renderVis');
});
afterEach(() => {
stub.restore();

View File

@ -1,4 +1,4 @@
/* eslint camelcase: 0 */
/* eslint no-undef: 2 */
import React from 'react';
import PropTypes from 'prop-types';
import Mustache from 'mustache';
@ -10,7 +10,7 @@ import Loading from '../components/Loading';
import { Logger, LOG_ACTIONS_RENDER_CHART } from '../logger';
import StackTraceMessage from '../components/StackTraceMessage';
import RefreshChartOverlay from '../components/RefreshChartOverlay';
import visMap from '../visualizations';
import visPromiseLookup from '../visualizations';
import sandboxedEval from '../modules/sandbox';
import './chart.css';
@ -54,7 +54,11 @@ const defaultProps = {
class Chart extends React.PureComponent {
constructor(props) {
super(props);
this.state = {};
// visualizations are lazy-loaded with promises that resolve to a renderVis function
this.state = {
renderVis: null,
};
// these properties are used by visualizations
this.annotationData = props.annotationData;
this.containerId = props.containerId;
@ -66,16 +70,23 @@ class Chart extends React.PureComponent {
this.headerHeight = this.headerHeight.bind(this);
this.height = this.height.bind(this);
this.width = this.width.bind(this);
this.visPromise = null;
}
componentDidMount() {
if (this.props.triggerQuery) {
const { formData } = this.props;
this.props.actions.runQuery(formData, false, this.props.timeout, this.props.chartId);
this.props.actions.runQuery(
this.props.formData,
false,
this.props.timeout,
this.props.chartId,
);
} else {
// when drag/dropping in a dashboard, a chart may be unmounted/remounted but still have data
this.renderViz();
this.renderVis();
}
this.loadAsyncVis(this.props.vizType);
}
componentWillReceiveProps(nextProps) {
@ -84,6 +95,10 @@ class Chart extends React.PureComponent {
this.selector = `#${this.containerId}`;
this.formData = nextProps.formData;
this.datasource = nextProps.datasource;
if (nextProps.vizType !== this.props.vizType) {
this.setState(() => ({ renderVis: null }));
this.loadAsyncVis(nextProps.vizType);
}
}
componentDidUpdate(prevProps) {
@ -97,10 +112,14 @@ class Chart extends React.PureComponent {
prevProps.width !== this.props.width ||
prevProps.lastRendered !== this.props.lastRendered)
) {
this.renderViz();
this.renderVis();
}
}
componentWillUnmount() {
this.visPromise = null;
}
getFilters() {
return this.props.getFilters();
}
@ -109,6 +128,22 @@ class Chart extends React.PureComponent {
this.setState({ tooltip });
}
loadAsyncVis(visType) {
this.visPromise = visPromiseLookup[visType];
this.visPromise()
.then((renderVis) => {
// ensure Component is still mounted
if (this.visPromise) {
this.setState({ renderVis }, this.renderVis);
}
})
.catch((error) => {
console.warn(error); // eslint-disable-line
this.props.actions.chartRenderingFailed(error, this.props.chartId);
});
}
addFilter(col, vals, merge = true, refresh = true) {
this.props.addFilter(col, vals, merge, refresh);
}
@ -148,6 +183,7 @@ class Chart extends React.PureComponent {
return this.props.datasource.verbose_map[metric] || metric;
}
// eslint-disable-next-line camelcase
render_template(s) {
const context = {
width: this.width(),
@ -176,41 +212,50 @@ class Chart extends React.PureComponent {
return null;
}
renderViz() {
const { vizType, formData, queryResponse, setControlValue, chartId, chartStatus } = this.props;
const visRenderer = visMap[vizType];
const renderStart = Logger.getTimestamp();
try {
// Executing user-defined data mutator function
if (formData.js_data) {
queryResponse.data = sandboxedEval(formData.js_data)(queryResponse.data);
renderVis() {
const { chartStatus } = this.props;
const hasVisPromise = !!this.state.renderVis;
// check that we have the render function and data
if (hasVisPromise && ['success', 'rendered'].indexOf(chartStatus) > -1) {
const { vizType, formData, queryResponse, setControlValue, chartId } = this.props;
const renderStart = Logger.getTimestamp();
try {
// Executing user-defined data mutator function
if (formData.js_data) {
queryResponse.data = sandboxedEval(formData.js_data)(queryResponse.data);
}
// [re]rendering the visualization
this.state.renderVis(this, queryResponse, setControlValue);
if (chartStatus !== 'rendered') {
this.props.actions.chartRenderingSucceeded(chartId);
}
Logger.append(LOG_ACTIONS_RENDER_CHART, {
slice_id: chartId,
viz_type: vizType,
start_offset: renderStart,
duration: Logger.getTimestamp() - renderStart,
});
} catch (e) {
console.warn(e); // eslint-disable-line
this.props.actions.chartRenderingFailed(e, chartId);
}
visRenderer(this, queryResponse, setControlValue);
if (chartStatus !== 'rendered') {
this.props.actions.chartRenderingSucceeded(chartId);
}
Logger.append(LOG_ACTIONS_RENDER_CHART, {
slice_id: chartId,
viz_type: vizType,
start_offset: renderStart,
duration: Logger.getTimestamp() - renderStart,
});
this.props.actions.chartRenderingSucceeded(chartId);
} catch (e) {
console.error(e); // eslint-disable-line no-console
this.props.actions.chartRenderingFailed(e, chartId);
}
}
render() {
const isLoading = this.props.chartStatus === 'loading';
const isLoading = this.props.chartStatus === 'loading' || !this.state.renderVis;
// this allows <Loading /> to be positioned in the middle of the chart
const containerStyles = isLoading ? { height: this.height(), width: this.width() } : null;
return (
<div className={`chart-container ${isLoading ? 'is-loading' : ''}`} style={containerStyles}>
{this.renderTooltip()}
{isLoading && <Loading size={75} />}
{isLoading && <Loading size={50} />}
{this.props.chartAlert && (
<StackTraceMessage
message={this.props.chartAlert}

View File

@ -8,14 +8,14 @@ const defaultProps = {
size: 50,
};
export default function Loading(props) {
export default function Loading({ size }) {
return (
<img
className="loading"
alt="Loading..."
src="/static/assets/images/loading.gif"
style={{
width: Math.min(props.size, 50),
width: Math.min(size, 50),
// height is auto
padding: 0,
margin: 0,

View File

@ -46,6 +46,9 @@ const defaultProps = {
sliceCanEdit: false,
};
const annoationsLoading = t('Annotation layers are still loading.');
const annoationsError = t('One ore more annotation layers failed loading.');
class SliceHeader extends React.PureComponent {
render() {
const {
@ -62,26 +65,27 @@ class SliceHeader extends React.PureComponent {
sliceName,
supersetCanExplore,
sliceCanEdit,
editMode,
updateSliceName,
annotationQuery,
annotationError,
} = this.props;
const annoationsLoading = t('Annotation layers are still loading.');
const annoationsError = t('One ore more annotation layers failed loading.');
return (
<div className="chart-header" ref={innerRef}>
<div className="header">
<EditableTitle
title={
sliceName ||
(this.props.editMode
(editMode
? '---' // this makes an empty title clickable
: '')
}
canEdit={this.props.editMode}
onSaveTitle={this.props.updateSliceName}
canEdit={editMode}
onSaveTitle={updateSliceName}
showTooltip={false}
/>
{!!Object.values(this.props.annotationQuery).length && (
{!!Object.values(annotationQuery).length && (
<TooltipWrapper
label="annotations-loading"
placement="top"
@ -90,7 +94,7 @@ class SliceHeader extends React.PureComponent {
<i className="fa fa-refresh warning" />
</TooltipWrapper>
)}
{!!Object.values(this.props.annotationError).length && (
{!!Object.values(annotationError).length && (
<TooltipWrapper
label="annoation-errors"
placement="top"
@ -99,7 +103,7 @@ class SliceHeader extends React.PureComponent {
<i className="fa fa-exclamation-circle danger" />
</TooltipWrapper>
)}
{!this.props.editMode && (
{!editMode && (
<SliceHeaderControls
slice={slice}
isCached={isCached}

View File

@ -10,7 +10,7 @@ import Loading from '../../../components/Loading';
import { Logger, LOG_ACTIONS_RENDER_CHART } from '../../../logger';
import StackTraceMessage from '../../../components/StackTraceMessage';
import RefreshChartOverlay from '../../../components/RefreshChartOverlay';
import visMap from '../../../visualizations';
import visPromiseLookup from '../../../visualizations';
import sandboxedEval from '../../../modules/sandbox';
import './chart.css';
@ -58,7 +58,10 @@ const defaultProps = {
class Chart extends React.PureComponent {
constructor(props) {
super(props);
this.state = {};
// visualizations are lazy-loaded with promises that resolve to a renderVis function
this.state = {
renderVis: null,
};
// these properties are used by visualizations
this.annotationData = props.annotationData;
this.containerId = props.containerId;
@ -72,6 +75,7 @@ class Chart extends React.PureComponent {
this.headerHeight = this.headerHeight.bind(this);
this.height = this.height.bind(this);
this.width = this.width.bind(this);
this.visPromise = null;
}
componentDidMount() {
@ -81,6 +85,7 @@ class Chart extends React.PureComponent {
this.props.chartKey,
);
}
this.loadAsyncVis(this.props.vizType);
}
componentWillReceiveProps(nextProps) {
@ -89,6 +94,10 @@ class Chart extends React.PureComponent {
this.selector = `#${this.containerId}`;
this.formData = nextProps.formData;
this.datasource = nextProps.datasource;
if (nextProps.vizType !== this.props.vizType) {
this.setState(() => ({ renderVis: null }));
this.loadAsyncVis(nextProps.vizType);
}
}
componentDidUpdate(prevProps) {
@ -106,6 +115,10 @@ class Chart extends React.PureComponent {
}
}
componentWillUnmount() {
this.visPromise = null;
}
getFilters() {
return this.props.getFilters();
}
@ -114,6 +127,22 @@ class Chart extends React.PureComponent {
this.setState({ tooltip });
}
loadAsyncVis(visType) {
this.visPromise = visPromiseLookup[visType];
this.visPromise()
.then((renderVis) => {
// ensure Component is still mounted
if (this.visPromise) {
this.setState({ renderVis }, this.renderViz);
}
})
.catch((error) => {
console.error(error); // eslint-disable-line
this.props.actions.chartRenderingFailed(error, this.props.chartKey);
});
}
addFilter(col, vals, merge = true, refresh = true) {
this.props.addFilter(col, vals, merge, refresh);
}
@ -186,31 +215,37 @@ class Chart extends React.PureComponent {
}
renderViz() {
const viz = visMap[this.props.vizType];
const fd = this.props.formData;
const qr = this.props.queryResponse;
const renderStart = Logger.getTimestamp();
try {
// Executing user-defined data mutator function
if (fd.js_data) {
qr.data = sandboxedEval(fd.js_data)(qr.data);
const hasVisPromise = !!this.state.renderVis;
if (hasVisPromise && ['success', 'rendered'].indexOf(this.props.chartStatus) > -1) {
const fd = this.props.formData;
const qr = this.props.queryResponse;
const renderStart = Logger.getTimestamp();
try {
// Executing user-defined data mutator function
if (fd.js_data) {
qr.data = sandboxedEval(fd.js_data)(qr.data);
}
// [re]rendering the visualization
this.state.renderVis(this, qr, this.props.setControlValue);
Logger.append(LOG_ACTIONS_RENDER_CHART, {
slice_id: this.props.chartKey,
viz_type: this.props.vizType,
start_offset: renderStart,
duration: Logger.getTimestamp() - renderStart,
});
if (this.props.chartStatus !== 'rendered') {
this.props.actions.chartRenderingSucceeded(this.props.chartKey);
}
} catch (e) {
this.props.actions.chartRenderingFailed(e, this.props.chartKey);
}
// [re]rendering the visualization
viz(this, qr, this.props.setControlValue);
Logger.append(LOG_ACTIONS_RENDER_CHART, {
slice_id: this.props.chartKey,
viz_type: this.props.vizType,
start_offset: renderStart,
duration: Logger.getTimestamp() - renderStart,
});
this.props.actions.chartRenderingSucceeded(this.props.chartKey);
} catch (e) {
this.props.actions.chartRenderingFailed(e, this.props.chartKey);
}
}
render() {
const isLoading = this.props.chartStatus === 'loading';
const isLoading = this.props.chartStatus === 'loading' || !this.state.renderVis;
return (
<div className={`token col-md-12 ${isLoading ? 'is-loading' : ''}`}>
{this.renderTooltip()}

View File

@ -1,6 +1,4 @@
/* eslint-disable global-require */
import nvd3Vis from './nvd3_vis';
import lineMulti from './line_multi';
// You ***should*** use these to reference viz_types in code
export const VIZ_TYPES = {
@ -54,54 +52,91 @@ export const VIZ_TYPES = {
rose: 'rose',
};
const loadVis = promise =>
promise.then((module) => {
const defaultExport = module.default || module;
// deckgl visualizations don't use esModules, fix it?
return defaultExport.default || defaultExport;
});
const loadNvd3 = () => loadVis(import(/* webpackChunkName: "nvd3_vis" */ './nvd3_vis.js'));
const vizMap = {
[VIZ_TYPES.area]: nvd3Vis,
[VIZ_TYPES.bar]: nvd3Vis,
[VIZ_TYPES.big_number]: require('./big_number.js'),
[VIZ_TYPES.big_number_total]: require('./big_number.js'),
[VIZ_TYPES.box_plot]: nvd3Vis,
[VIZ_TYPES.bubble]: nvd3Vis,
[VIZ_TYPES.bullet]: nvd3Vis,
[VIZ_TYPES.cal_heatmap]: require('./cal_heatmap.js'),
[VIZ_TYPES.compare]: nvd3Vis,
[VIZ_TYPES.directed_force]: require('./directed_force.js'),
[VIZ_TYPES.chord]: require('./chord.jsx'),
[VIZ_TYPES.dist_bar]: nvd3Vis,
[VIZ_TYPES.filter_box]: require('./filter_box.jsx'),
[VIZ_TYPES.heatmap]: require('./heatmap.js'),
[VIZ_TYPES.histogram]: require('./histogram.js'),
[VIZ_TYPES.horizon]: require('./horizon.js'),
[VIZ_TYPES.iframe]: require('./iframe.js'),
[VIZ_TYPES.line]: nvd3Vis,
[VIZ_TYPES.line_multi]: lineMulti,
[VIZ_TYPES.time_pivot]: nvd3Vis,
[VIZ_TYPES.mapbox]: require('./mapbox.jsx'),
[VIZ_TYPES.markup]: require('./markup.js'),
[VIZ_TYPES.para]: require('./parallel_coordinates.js'),
[VIZ_TYPES.pie]: nvd3Vis,
[VIZ_TYPES.pivot_table]: require('./pivot_table.js'),
[VIZ_TYPES.sankey]: require('./sankey.js'),
[VIZ_TYPES.separator]: require('./markup.js'),
[VIZ_TYPES.sunburst]: require('./sunburst.js'),
[VIZ_TYPES.table]: require('./table.js'),
[VIZ_TYPES.time_table]: require('./time_table.jsx'),
[VIZ_TYPES.treemap]: require('./treemap.js'),
[VIZ_TYPES.country_map]: require('./country_map.js'),
[VIZ_TYPES.word_cloud]: require('./word_cloud.js'),
[VIZ_TYPES.world_map]: require('./world_map.js'),
[VIZ_TYPES.dual_line]: nvd3Vis,
[VIZ_TYPES.event_flow]: require('./EventFlow.jsx'),
[VIZ_TYPES.paired_ttest]: require('./paired_ttest.jsx'),
[VIZ_TYPES.partition]: require('./partition.js'),
[VIZ_TYPES.deck_scatter]: require('./deckgl/layers/scatter.jsx').default,
[VIZ_TYPES.deck_screengrid]: require('./deckgl/layers/screengrid.jsx').default,
[VIZ_TYPES.deck_grid]: require('./deckgl/layers/grid.jsx').default,
[VIZ_TYPES.deck_hex]: require('./deckgl/layers/hex.jsx').default,
[VIZ_TYPES.deck_path]: require('./deckgl/layers/path.jsx').default,
[VIZ_TYPES.deck_geojson]: require('./deckgl/layers/geojson.jsx').default,
[VIZ_TYPES.deck_arc]: require('./deckgl/layers/arc.jsx').default,
[VIZ_TYPES.deck_polygon]: require('./deckgl/layers/polygon.jsx').default,
[VIZ_TYPES.deck_multi]: require('./deckgl/multi.jsx'),
[VIZ_TYPES.rose]: require('./rose.js'),
[VIZ_TYPES.area]: loadNvd3,
[VIZ_TYPES.bar]: loadNvd3,
[VIZ_TYPES.big_number]: () =>
loadVis(import(/* webpackChunkName: 'big_number' */ './big_number.js')),
[VIZ_TYPES.big_number_total]: () =>
loadVis(import(/* webpackChunkName: "big_number" */ './big_number.js')),
[VIZ_TYPES.box_plot]: loadNvd3,
[VIZ_TYPES.bubble]: loadNvd3,
[VIZ_TYPES.bullet]: loadNvd3,
[VIZ_TYPES.cal_heatmap]: () =>
loadVis(import(/* webpackChunkName: "cal_heatmap" */ './cal_heatmap.js')),
[VIZ_TYPES.compare]: loadNvd3,
[VIZ_TYPES.directed_force]: () =>
loadVis(import(/* webpackChunkName: "directed_force" */ './directed_force.js')),
[VIZ_TYPES.chord]: () => loadVis(import(/* webpackChunkName: "chord" */ './chord.jsx')),
[VIZ_TYPES.dist_bar]: loadNvd3,
[VIZ_TYPES.filter_box]: () =>
loadVis(import(/* webpackChunkName: "filter_box" */ './filter_box.jsx')),
[VIZ_TYPES.heatmap]: () => loadVis(import(/* webpackChunkName: "heatmap" */ './heatmap.js')),
[VIZ_TYPES.histogram]: () =>
loadVis(import(/* webpackChunkName: "histogram" */ './histogram.js')),
[VIZ_TYPES.horizon]: () => loadVis(import(/* webpackChunkName: "horizon" */ './horizon.js')),
[VIZ_TYPES.iframe]: () => loadVis(import(/* webpackChunkName: "iframe" */ './iframe.js')),
[VIZ_TYPES.line]: loadNvd3,
[VIZ_TYPES.line_multi]: () =>
loadVis(import(/* webpackChunkName: "line_multi" */ './line_multi.js')),
[VIZ_TYPES.time_pivot]: loadNvd3,
[VIZ_TYPES.mapbox]: () => loadVis(import(/* webpackChunkName: "mapbox" */ './mapbox.jsx')),
[VIZ_TYPES.markup]: () => loadVis(import(/* webpackChunkName: "markup" */ './markup.js')),
[VIZ_TYPES.para]: () =>
loadVis(import(/* webpackChunkName: "parallel_coordinates" */ './parallel_coordinates.js')),
[VIZ_TYPES.pie]: loadNvd3,
[VIZ_TYPES.pivot_table]: () =>
loadVis(import(/* webpackChunkName: "pivot_table" */ './pivot_table.js')),
[VIZ_TYPES.sankey]: () => loadVis(import(/* webpackChunkName: "sankey" */ './sankey.js')),
[VIZ_TYPES.separator]: () => loadVis(import(/* webpackChunkName: "markup" */ './markup.js')),
[VIZ_TYPES.sunburst]: () => loadVis(import(/* webpackChunkName: "sunburst" */ './sunburst.js')),
[VIZ_TYPES.table]: () => loadVis(import(/* webpackChunkName: "table" */ './table.js')),
[VIZ_TYPES.time_table]: () =>
loadVis(import(/* webpackChunkName: "time_table" */ './time_table.jsx')),
[VIZ_TYPES.treemap]: () => loadVis(import(/* webpackChunkName: "treemap" */ './treemap.js')),
[VIZ_TYPES.country_map]: () =>
loadVis(import(/* webpackChunkName: "country_map" */ './country_map.js')),
[VIZ_TYPES.word_cloud]: () =>
loadVis(import(/* webpackChunkName: "word_cloud" */ './word_cloud.js')),
[VIZ_TYPES.world_map]: () =>
loadVis(import(/* webpackChunkName: "world_map" */ './world_map.js')),
[VIZ_TYPES.dual_line]: loadNvd3,
[VIZ_TYPES.event_flow]: () =>
loadVis(import(/* webpackChunkName: "EventFlow" */ './EventFlow.jsx')),
[VIZ_TYPES.paired_ttest]: () =>
loadVis(import(/* webpackChunkName: "paired_ttest" */ './paired_ttest.jsx')),
[VIZ_TYPES.partition]: () =>
loadVis(import(/* webpackChunkName: "partition" */ './partition.js')),
[VIZ_TYPES.deck_scatter]: () =>
loadVis(import(/* webpackChunkName: "deckgl/layers/scatter" */ './deckgl/layers/scatter.jsx')),
[VIZ_TYPES.deck_screengrid]: () =>
loadVis(
import(/* webpackChunkName: "deckgl/layers/screengrid" */ './deckgl/layers/screengrid.jsx'),
),
[VIZ_TYPES.deck_grid]: () =>
loadVis(import(/* webpackChunkName: "deckgl/layers/grid" */ './deckgl/layers/grid.jsx')),
[VIZ_TYPES.deck_hex]: () =>
loadVis(import(/* webpackChunkName: "deckgl/layers/hex" */ './deckgl/layers/hex.jsx')),
[VIZ_TYPES.deck_path]: () =>
loadVis(import(/* webpackChunkName: "deckgl/layers/path" */ './deckgl/layers/path.jsx')),
[VIZ_TYPES.deck_geojson]: () =>
loadVis(import(/* webpackChunkName: "deckgl/layers/geojson" */ './deckgl/layers/geojson.jsx')),
[VIZ_TYPES.deck_arc]: () =>
loadVis(import(/* webpackChunkName: "deckgl/layers/arc" */ './deckgl/layers/arc.jsx')),
[VIZ_TYPES.deck_polygon]: () =>
loadVis(import(/* webpackChunkName: "deckgl/layers/polygon" */ './deckgl/layers/polygon.jsx')),
[VIZ_TYPES.deck_multi]: () =>
loadVis(import(/* webpackChunkName: "deckgl/multi" */ './deckgl/multi.jsx')),
[VIZ_TYPES.rose]: () => loadVis(import(/* webpackChunkName: "rose" */ './rose.js')),
};
export default vizMap;

View File

@ -17,10 +17,13 @@ function markupWidget(slice, payload) {
}
const iframeId = `if__${slice.containerId}`;
const stylesheets = payload.data.theme_css.map(
href => `<link rel="stylesheet" type="text/css" href="${href}" />`,
);
const html = `
<html>
<head>
<link rel="stylesheet" type="text/css" href="${payload.data.theme_css}" />
${stylesheets}
</head>
<body style="background-color: transparent;">
${payload.data.html}

View File

@ -1,8 +1,7 @@
const webpack = require('webpack');
const path = require('path');
const ManifestPlugin = require('webpack-manifest-plugin');
const CleanWebpackPlugin = require('clean-webpack-plugin');
const ExtractTextPlugin = require('extract-text-webpack-plugin');
const MiniCssExtractPlugin = require('mini-css-extract-plugin');
const WebpackAssetsManifest = require('webpack-assets-manifest');
// input dir
const APP_DIR = path.resolve(__dirname, './');
@ -10,6 +9,8 @@ const APP_DIR = path.resolve(__dirname, './');
// output dir
const BUILD_DIR = path.resolve(__dirname, './dist');
const isDevMode = process.env.NODE_ENV !== 'production';
const config = {
node: {
fs: 'empty',
@ -27,20 +28,23 @@ const config = {
},
output: {
path: BUILD_DIR,
publicPath: '/static/assets/dist/', // necessary for lazy-loaded chunks
filename: '[name].[chunkhash].entry.js',
chunkFilename: '[name].[chunkhash].entry.js',
chunkFilename: '[name].[chunkhash].chunk.js',
},
optimization: {
splitChunks: {
chunks: 'all',
automaticNameDelimiter: '-',
},
},
resolve: {
extensions: [
'.js',
'.jsx',
],
alias: {
webworkify: 'webworkify-webpack',
},
extensions: ['.js', '.jsx'],
},
module: {
// uglyfying mapbox-gl results in undefined errors, see
// https://github.com/mapbox/mapbox-gl-js/issues/4359#issuecomment-288001933
noParse: /(mapbox-gl)\.js$/,
rules: [
{
test: /datatables\.net.*/,
@ -50,32 +54,20 @@ const config = {
test: /\.jsx?$/,
exclude: /node_modules/,
loader: 'babel-loader',
query: {
presets: [
'airbnb',
'env',
'react',
],
},
},
// Extract css files
{
test: /\.css$/,
include: APP_DIR,
loader: ExtractTextPlugin.extract({
use: ['css-loader'],
fallback: 'style-loader',
}),
use: [isDevMode ? MiniCssExtractPlugin.loader : 'style-loader', 'css-loader'],
},
// Optionally extract less files
// or any other compile-to-css language
{
test: /\.less$/,
include: APP_DIR,
loader: ExtractTextPlugin.extract({
use: ['css-loader', 'less-loader'],
fallback: 'style-loader',
}),
use: [
isDevMode ? MiniCssExtractPlugin.loader : 'style-loader',
'css-loader',
'less-loader',
],
},
/* for css linking images */
{
@ -107,27 +99,21 @@ const config = {
'react/lib/ReactContext': true,
},
plugins: [
new ManifestPlugin(),
new CleanWebpackPlugin(['dist']),
new webpack.DefinePlugin({
'process.env': {
NODE_ENV: JSON.stringify(process.env.NODE_ENV),
},
// creates a manifest.json mapping of name to hashed output used in template files
new WebpackAssetsManifest({
publicPath: true,
entrypoints: true, // this enables us to include all relevant files for an entry
}),
// create fresh dist/ upon build
new CleanWebpackPlugin(['dist']),
// text loading (webpack 4+)
new MiniCssExtractPlugin({
filename: '[name].[chunkhash].entry.css',
chunkFilename: '[name].[chunkhash].chunk.css',
}),
new ExtractTextPlugin('[name].[chunkhash].css'),
],
};
if (process.env.NODE_ENV === 'production') {
// Using settings suggested in https://github.com/webpack/webpack/issues/537
const UJSplugin = new webpack.optimize.UglifyJsPlugin({
sourceMap: false,
minimize: true,
parallel: {
cache: true,
workers: 4,
},
compress: false,
});
config.plugins.push(UJSplugin);
}
module.exports = config;

File diff suppressed because it is too large Load Diff

View File

@ -3,10 +3,14 @@
{% block head_css %}
{{super()}}
<link rel="icon" type="image/png" href="/static/assets/images/favicon.png">
<link rel="stylesheet" type="text/css" href="{{ js_manifest('theme.css') }}" />
{% for entry in css_manifest('theme') %}
<link rel="stylesheet" type="text/css" href="{{ entry }}" />
{% endfor %}
{% endblock %}
{% block tail_js %}
{{super()}}
<script src="{{ js_manifest('common.js') }}"></script>
{% for entry in js_manifest('common') %}
<script src="{{ entry }}"></script>
{% endfor %}
{% endblock %}

View File

@ -14,15 +14,25 @@
{% block head_css %}
<link rel="icon" type="image/png" href="/static/assets/images/favicon.png">
<link rel="stylesheet" type="text/css" href="/static/appbuilder/css/flags/flags16.css" />
<link rel="stylesheet" type="text/css" href="{{ js_manifest('theme.css') }}" />
<link rel="stylesheet" type="text/css" href="/static/appbuilder/css/font-awesome.min.css">
{% for entry in css_manifest('theme') %}
<link rel="stylesheet" type="text/css" href="{{ entry }}" />
{% endfor %}
{% if entry %}
<link rel="stylesheet" type="text/css" href="{{ js_manifest(entry + '.css') }}" />
{% set entry_files = css_manifest(entry) %}
{% for entry in entry_files %}
<link rel="stylesheet" type="text/css" href="{{ entry }}" />
{% endfor %}
{% endif %}
{% endblock %}
{% block head_js %}
<script src="{{ js_manifest('common.js') }}"></script>
{% endblock %}
{% for entry in js_manifest('common') %}
<script src="{{ entry }}"></script>
{% endfor %}
<input
type="hidden"
name="csrf_token"
@ -66,7 +76,10 @@
</div>
{% block tail_js %}
{% if entry %}
<script src="{{ js_manifest(entry + '.js') }}"></script>
{% set entry_files = js_manifest(entry) %}
{% for entry in entry_files %}
<script src="{{ entry }}"></script>
{% endfor %}
{% endif %}
{% endblock %}
</body>

View File

@ -1,5 +1,5 @@
{% block tail_js %}
<script
src="{{ js_manifest(filename + '.js') }}">
</script>
{% for entry in js_manifest(filename) %}
<script src="{{ entry }}"></script>
{% endfor %}
{% endblock %}

View File

@ -37,7 +37,7 @@ import simplejson as json
from six import string_types, text_type
from six.moves import cPickle as pkl, reduce
from superset import app, cache, get_manifest_file, utils
from superset import app, cache, get_css_manifest_files, utils
from superset.exceptions import NullValueException, SpatialException
from superset.utils import DTTM_ALIAS, JS_MAX_INTEGER, merge_extra_filters
@ -690,7 +690,7 @@ class MarkupViz(BaseViz):
code = self.form_data.get('code', '')
if markup_type == 'markdown':
code = markdown(code)
return dict(html=code, theme_css=get_manifest_file('theme.css'))
return dict(html=code, theme_css=get_css_manifest_files('theme'))
class SeparatorViz(MarkupViz):