Revert "[webpack] setup lazy loading for all visualizations" (#5219)

* Revert "[explore] fix autocomplete on verbose names (#5204)"

This reverts commit d5ebc430c2.

* Revert "[webpack] setup lazy loading for all visualizations (#4727)"

This reverts commit de0aaf42ed.

superset/__init__.py

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

superset/assets/.babelrc

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

superset/assets/.eslintrc

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

superset/assets/package.json

@@ -10,9 +10,11 @@
   "scripts": {
     "test": "mocha --require ignore-styles --compilers js:babel-core/register --require spec/helpers/browser.js --recursive spec/**/*_spec.*",
     "cover": "babel-node node_modules/.bin/babel-istanbul cover _mocha -- --require ignore-styles spec/helpers/browser.js --recursive 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",
+    "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",
     "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"
@@ -37,9 +39,6 @@
   "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": {
     "//": "known issues with react-bootstrap>=0.32",
@@ -117,21 +116,19 @@
     "supercluster": "https://github.com/georgeke/supercluster/tarball/ac3492737e7ce98e07af679623aad452373bbc40",
     "underscore": "^1.8.3",
     "urijs": "^1.18.10",
-    "viewport-mercator-project": "^5.0.0"
+    "viewport-mercator-project": "^5.0.0",
+    "webpack-cli": "^2.1.4"
   },
   "devDependencies": {
     "babel-cli": "^6.14.0",
     "babel-core": "^6.10.4",
-    "babel-eslint": "^8.2.2",
     "babel-istanbul": "^0.12.2",
-    "babel-loader": "^7.1.4",
+    "babel-loader": "^7.0.0",
     "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.19",
+    "clean-webpack-plugin": "^0.1.16",
     "css-loader": "^0.28.0",
     "enzyme": "^2.0.0",
     "eslint": "^4.19.0",
@@ -140,7 +137,8 @@
     "eslint-plugin-jsx-a11y": "^5.1.1",
     "eslint-plugin-react": "^7.0.1",
     "exports-loader": "^0.7.0",
-    "file-loader": "^1.1.11",
+    "extract-text-webpack-plugin": "3.0.2",
+    "file-loader": "^0.11.1",
     "github-changes": "^1.0.4",
     "ignore-styles": "^5.0.1",
     "imports-loader": "^0.7.1",
@@ -148,8 +146,7 @@
     "jsdom": "9.12.0",
     "json-loader": "^0.5.4",
     "less": "^2.6.1",
-    "less-loader": "^4.1.0",
-    "mini-css-extract-plugin": "^0.4.0",
+    "less-loader": "^4.0.3",
     "mocha": "^3.2.0",
     "npm-check-updates": "^2.14.0",
     "react-addons-test-utils": "^15.6.2",
@@ -160,10 +157,10 @@
     "style-loader": "^0.21.0",
     "transform-loader": "^0.2.3",
     "uglifyjs-webpack-plugin": "^1.1.0",
-    "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"
+    "url-loader": "^0.6.2",
+    "//": "Known issues with >=4",
+    "webpack": "^3.10.0",
+    "webpack-manifest-plugin": "2.0.3",
+    "webworkify-webpack": "2.1.2"
   }
 }

superset/assets/spec/helpers/browser.js

@@ -3,12 +3,7 @@ import 'babel-polyfill';
 import chai from 'chai';
 import jsdom from 'jsdom';
 
-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'],
-});
+require('babel-register')();
 
 const exposedProperties = ['window', 'navigator', 'document'];
 

superset/assets/spec/javascripts/chart/Chart_spec.jsx

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

superset/assets/src/chart/Chart.jsx

@@ -10,7 +10,7 @@ import Loading from '../components/Loading';
 import { Logger, LOG_ACTIONS_RENDER_EVENT } from '../logger';
 import StackTraceMessage from '../components/StackTraceMessage';
 import RefreshChartOverlay from '../components/RefreshChartOverlay';
-import visPromiseLookup from '../visualizations';
+import visMap from '../visualizations';
 import sandboxedEval from '../modules/sandbox';
 import './chart.css';
 
@@ -58,11 +58,7 @@ const defaultProps = {
 class Chart extends React.PureComponent {
   constructor(props) {
     super(props);
-    // visualizations are lazy-loaded with promises that resolve to a renderVis function
-    this.state = {
-      renderVis: null,
-    };
-
+    this.state = {};
     // these properties are used by visualizations
     this.annotationData = props.annotationData;
     this.containerId = props.containerId;
@@ -76,20 +72,15 @@ 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) {
-      this.props.actions.runQuery(
-        this.props.formData,
-        false,
+      this.props.actions.runQuery(this.props.formData, false,
         this.props.timeout,
         this.props.chartKey,
       );
     }
-
-    this.loadAsyncVis(this.props.vizType);
   }
 
   componentWillReceiveProps(nextProps) {
@@ -98,31 +89,23 @@ 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) {
     if (
-      this.props.queryResponse &&
-      ['success', 'rendered'].indexOf(this.props.chartStatus) > -1 &&
-      !this.props.queryResponse.error &&
-      (prevProps.annotationData !== this.props.annotationData ||
+        this.props.queryResponse &&
+        ['success', 'rendered'].indexOf(this.props.chartStatus) > -1 &&
+        !this.props.queryResponse.error && (
+        prevProps.annotationData !== this.props.annotationData ||
         prevProps.queryResponse !== this.props.queryResponse ||
         prevProps.height !== this.props.height ||
         prevProps.width !== this.props.width ||
         prevProps.lastRendered !== this.props.lastRendered)
     ) {
-      this.renderVis();
+      this.renderViz();
     }
   }
 
-  componentWillUnmount() {
-    this.visPromise = null;
-  }
-
   getFilters() {
     return this.props.getFilters();
   }
@@ -131,22 +114,6 @@ 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.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);
   }
@@ -218,77 +185,69 @@ class Chart extends React.PureComponent {
     return null;
   }
 
-  renderVis() {
-    // check that we have the render function and data
-    if (this.state.renderVis && ['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_EVENT, {
-          label: this.props.chartKey,
-          vis_type: this.props.vizType,
-          start_offset: renderStart,
-          duration: Logger.getTimestamp() - renderStart,
-        });
-
-        this.props.actions.chartRenderingSucceeded(this.props.chartKey);
-      } catch (e) {
-        console.error(e); // eslint-disable-line
-        this.props.actions.chartRenderingFailed(e, this.props.chartKey);
+  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);
       }
+      // [re]rendering the visualization
+      viz(this, qr, this.props.setControlValue);
+      Logger.append(LOG_ACTIONS_RENDER_EVENT, {
+        label: this.props.chartKey,
+        vis_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' || !this.state.renderVis;
+    const isLoading = this.props.chartStatus === 'loading';
     return (
       <div className={`token col-md-12 ${isLoading ? 'is-loading' : ''}`}>
         {this.renderTooltip()}
-
-        {isLoading && <Loading size={25} />}
-
-        {this.props.chartAlert && (
-          <StackTraceMessage
-            message={this.props.chartAlert}
-            queryResponse={this.props.queryResponse}
-          />
-        )}
+        {isLoading &&
+          <Loading size={25} />
+        }
+        {this.props.chartAlert &&
+        <StackTraceMessage
+          message={this.props.chartAlert}
+          queryResponse={this.props.queryResponse}
+        />
+        }
 
         {!isLoading &&
           !this.props.chartAlert &&
           this.props.refreshOverlayVisible &&
           !this.props.errorMessage &&
-          this.container && (
-            <RefreshChartOverlay
-              height={this.height()}
-              width={this.width()}
-              onQuery={this.props.onQuery}
-              onDismiss={this.props.onDismissRefreshOverlay}
-            />
-          )}
-
-        {!isLoading &&
-          !this.props.chartAlert && (
-            <ChartBody
-              containerId={this.containerId}
-              vizType={this.props.vizType}
-              height={this.height}
-              width={this.width}
-              faded={this.props.refreshOverlayVisible && !this.props.errorMessage}
-              ref={(inner) => {
-                this.container = inner;
-              }}
-            />
-          )}
+          this.container &&
+          <RefreshChartOverlay
+            height={this.height()}
+            width={this.width()}
+            onQuery={this.props.onQuery}
+            onDismiss={this.props.onDismissRefreshOverlay}
+          />
+        }
+        {!isLoading && !this.props.chartAlert &&
+          <ChartBody
+            containerId={this.containerId}
+            vizType={this.props.vizType}
+            height={this.height}
+            width={this.width}
+            faded={this.props.refreshOverlayVisible && !this.props.errorMessage}
+            ref={(inner) => {
+              this.container = inner;
+            }}
+          />
+        }
       </div>
     );
   }

superset/assets/src/components/Loading.jsx

@@ -8,15 +8,15 @@ const defaultProps = {
   size: 25,
 };
 
-export default function Loading({ size }) {
+export default function Loading(props) {
   return (
     <img
       className="loading"
       alt="Loading..."
       src="/static/assets/images/loading.gif"
       style={{
-        width: size,
-        height: size,
+        width: props.size,
+        height: props.size,
         padding: 0,
         margin: 0,
         position: 'absolute',

superset/assets/src/dashboard/components/SliceHeader.jsx

@@ -131,7 +131,7 @@ class SliceHeader extends React.PureComponent {
               </a>
               }
               {this.props.sliceCanEdit &&
-                <a href={slice.edit_url} target="_blank" rel="noopener noreferrer">
+                <a href={slice.edit_url} target="_blank">
                   <TooltipWrapper
                     placement="top"
                     label="edit"

superset/assets/src/visualizations/deckgl/layers/scatter.jsx

@@ -94,8 +94,8 @@ const propTypes = {
 };
 
 class DeckGLScatter extends React.PureComponent {
-  /* eslint-disable-next-line react/sort-comp */
-  static getDerivedStateFromProps(nextProps) {
+  /* eslint-disable no-unused-vars */
+  static getDerivedStateFromProps(nextProps, prevState) {
     const fd = nextProps.slice.formData;
 
     const timeGrain = fd.time_grain_sqla || fd.granularity || 'PT1M';

superset/assets/src/visualizations/deckgl/layers/screengrid.jsx

@@ -59,8 +59,8 @@ const propTypes = {
 };
 
 class DeckGLScreenGrid extends React.PureComponent {
-  /* eslint-disable-next-line react/sort-comp */
-  static getDerivedStateFromProps(nextProps) {
+  /* eslint-disable no-unused-vars */
+  static getDerivedStateFromProps(nextProps, prevState) {
     const fd = nextProps.slice.formData;
 
     const timeGrain = fd.time_grain_sqla || fd.granularity || 'PT1M';

superset/assets/src/visualizations/index.js

@@ -1,4 +1,6 @@
 /* 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 = {
@@ -52,91 +54,54 @@ 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]: 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')),
+  [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'),
 };
-
 export default vizMap;

superset/assets/src/visualizations/markup.js

@@ -17,13 +17,10 @@ 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>
-        ${stylesheets}
+        <link rel="stylesheet" type="text/css" href="${payload.data.theme_css}" />
       </head>
       <body style="background-color: transparent;">
         ${payload.data.html}

superset/assets/src/visualizations/time_table.jsx

@@ -71,9 +71,7 @@ function viz(slice, payload) {
         <MetricOption metric={metricData} url={url} showFormula={false} openInNewWindow />
       );
     } else {
-      leftCell = url ?
-        <a href={url} target="_blank" rel="noopener noreferrer">{metricLabel}</a>
-        : metric;
+      leftCell = url ? <a href={url} target="_blank">{metricLabel}</a> : metric;
     }
     const row = { metric: leftCell };
     fd.column_collection.forEach((column) => {

superset/assets/webpack.config.js

@@ -1,7 +1,8 @@
+const webpack = require('webpack');
 const path = require('path');
+const ManifestPlugin = require('webpack-manifest-plugin');
 const CleanWebpackPlugin = require('clean-webpack-plugin');
-const MiniCssExtractPlugin = require('mini-css-extract-plugin');
-const WebpackAssetsManifest = require('webpack-assets-manifest');
+const ExtractTextPlugin = require('extract-text-webpack-plugin');
 
 // input dir
 const APP_DIR = path.resolve(__dirname, './');
@@ -9,8 +10,6 @@ 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,23 +26,20 @@ const config = {
   },
   output: {
     path: BUILD_DIR,
-    publicPath: '/static/assets/dist/', // necessary for lazy-loaded chunks
     filename: '[name].[chunkhash].entry.js',
-    chunkFilename: '[name].[chunkhash].chunk.js',
-  },
-  optimization: {
-    splitChunks: {
-      chunks: 'all',
-      automaticNameDelimiter: '-',
-    },
+    chunkFilename: '[name].[chunkhash].entry.js',
   },
   resolve: {
-    extensions: ['.js', '.jsx'],
+    extensions: [
+      '.js',
+      '.jsx',
+    ],
+    alias: {
+      webworkify: 'webworkify-webpack',
+    },
+
   },
   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.*/,
@@ -53,20 +49,32 @@ const config = {
         test: /\.jsx?$/,
         exclude: /node_modules/,
         loader: 'babel-loader',
+        query: {
+          presets: [
+            'airbnb',
+            'env',
+            'react',
+          ],
+        },
       },
+      // Extract css files
       {
         test: /\.css$/,
         include: APP_DIR,
-        use: [isDevMode ? MiniCssExtractPlugin.loader : 'style-loader', 'css-loader'],
+        loader: ExtractTextPlugin.extract({
+          use: ['css-loader'],
+          fallback: 'style-loader',
+        }),
       },
+      // Optionally extract less files
+      // or any other compile-to-css language
       {
         test: /\.less$/,
         include: APP_DIR,
-        use: [
-          isDevMode ? MiniCssExtractPlugin.loader : 'style-loader',
-          'css-loader',
-          'less-loader',
-        ],
+        loader: ExtractTextPlugin.extract({
+          use: ['css-loader', 'less-loader'],
+          fallback: 'style-loader',
+        }),
       },
       /* for css linking images */
       {
@@ -98,21 +106,27 @@ const config = {
     'react/lib/ReactContext': true,
   },
   plugins: [
-    // 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 ManifestPlugin(),
     new CleanWebpackPlugin(['dist']),
-
-    // text loading (webpack 4+)
-    new MiniCssExtractPlugin({
-      filename: '[name].[chunkhash].entry.css',
-      chunkFilename: '[name].[chunkhash].chunk.css',
+    new webpack.DefinePlugin({
+      'process.env': {
+        NODE_ENV: JSON.stringify(process.env.NODE_ENV),
+      },
     }),
+    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;

superset/templates/superset/base.html

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

superset/templates/superset/basic.html

@@ -14,25 +14,15 @@
     {% 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 %}
-        {% set entry_files = css_manifest(entry) %}
-        {% for entry in entry_files %}
-          <link rel="stylesheet" type="text/css" href="{{ entry }}" />
-        {% endfor %}
+        <link rel="stylesheet" type="text/css" href="{{ js_manifest(entry + '.css') }}" />
       {% endif %}
-
     {% endblock %}
-
-    {% for entry in js_manifest('common') %}
-      <script src="{{ entry }}"></script>
-    {% endfor %}
-
+    {% block head_js %}
+      <script src="{{ js_manifest('common.js') }}"></script>
+    {% endblock %}
     <input
       type="hidden"
       name="csrf_token"
@@ -76,10 +66,7 @@
     </div>
     {% block tail_js %}
       {% if entry %}
-        {% set entry_files = js_manifest(entry) %}
-        {% for entry in entry_files %}
-          <script src="{{ entry }}"></script>
-        {% endfor %}
+        <script src="{{ js_manifest(entry + '.js') }}"></script>
       {% endif %}
     {% endblock %}
   </body>

superset/templates/superset/partials/_script_tag.html

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

superset/viz.py

@@ -36,7 +36,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_css_manifest_files, utils
+from superset import app, cache, get_manifest_file, utils
 from superset.utils import DTTM_ALIAS, JS_MAX_INTEGER, merge_extra_filters
 
 
@@ -696,7 +696,7 @@ class MarkupViz(BaseViz):
         code = self.form_data.get('code', '')
         if markup_type == 'markdown':
             code = markdown(code)
-        return dict(html=code, theme_css=get_css_manifest_files('theme'))
+        return dict(html=code, theme_css=get_manifest_file('theme.css'))
 
 
 class SeparatorViz(MarkupViz):