[Enhancement] load svg icons from aws, add bundle analyzer, reduce bu…

…ndle size -1mb (keplergl#479)

* load icon from aws
* add script to analyze bundle size
* load icons inside icon layer
* remove inline-json-import from babel

.babelrc

@@ -11,7 +11,6 @@
     ["@babel/transform-runtime", {
       "regenerator": true
     }],
-    ["inline-json-import", {}],
     [
       "module-resolver",
       {

.gitignore

@@ -3,6 +3,7 @@ node_modules/
 coverage/
 .nyc_output/
 dist/
+build/
 umd/
 */**/dist/
 

examples/custom-reducer/.babelrc

@@ -28,7 +28,6 @@
     "@babel/plugin-proposal-nullish-coalescing-operator",
     "@babel/plugin-proposal-do-expressions",
     "@babel/plugin-proposal-function-bind",
-    "@babel/plugin-transform-modules-commonjs",
-    ["inline-json-import", {}]
+    "@babel/plugin-transform-modules-commonjs"
   ]
 }

examples/custom-reducer/package.json

@@ -38,7 +38,6 @@
     "@babel/preset-env": "^7.0.0",
     "@babel/preset-react": "^7.0.0",
     "babel-loader": "^8.0.0",
-    "babel-plugin-inline-json-import": "^0.2.1",
     "babel-plugin-module-resolver": "^3.0.0",
     "babel-plugin-transform-builtin-extend": "^1.1.0",
     "webpack": "^4.29.0",

examples/custom-theme/.babelrc

@@ -28,7 +28,6 @@
     "@babel/plugin-proposal-nullish-coalescing-operator",
     "@babel/plugin-proposal-do-expressions",
     "@babel/plugin-proposal-function-bind",
-    "@babel/plugin-transform-modules-commonjs",
-    ["inline-json-import", {}]
+    "@babel/plugin-transform-modules-commonjs"
   ]
 }

examples/custom-theme/package.json

@@ -38,7 +38,6 @@
     "@babel/preset-env": "^7.0.0",
     "@babel/preset-react": "^7.0.0",
     "babel-loader": "^8.0.0",
-    "babel-plugin-inline-json-import": "^0.2.1",
     "babel-plugin-module-resolver": "^3.0.0",
     "babel-plugin-transform-builtin-extend": "^1.1.0",
     "webpack": "^4.29.0",

examples/demo-app/src/app.js

@@ -162,7 +162,7 @@ class App extends Component {
     // this._loadTripData();
     this._loadGeojsonData();
     // this._loadIconData();
-    this._loadH3HexagonData();
+    // this._loadH3HexagonData();
   }
 
   _loadTripData() {
@@ -208,11 +208,7 @@ class App extends Component {
             },
             data: processCsvData(sampleIconCsv)
           }
-        ],
-        options: {
-          centerMap: false
-        },
-        config: savedMapConfig
+        ]
       })
     );
   }

examples/open-modal/.babelrc

@@ -28,7 +28,6 @@
     "@babel/plugin-proposal-nullish-coalescing-operator",
     "@babel/plugin-proposal-do-expressions",
     "@babel/plugin-proposal-function-bind",
-    "@babel/plugin-transform-modules-commonjs",
-    ["inline-json-import", {}]
+    "@babel/plugin-transform-modules-commonjs"
   ]
 }

examples/open-modal/package.json

@@ -39,7 +39,6 @@
     "@babel/preset-env": "^7.0.0",
     "@babel/preset-react": "^7.0.0",
     "babel-loader": "^8.0.0",
-    "babel-plugin-inline-json-import": "^0.2.1",
     "babel-plugin-module-resolver": "^3.0.0",
     "babel-plugin-transform-builtin-extend": "^1.1.0",
     "webpack": "^4.29.0",

examples/webpack.config.local.js

@@ -116,7 +116,6 @@ const BABEL_RULE = {
             '@babel/plugin-proposal-do-expressions',
             '@babel/plugin-proposal-function-bind',
             '@babel/plugin-transform-modules-commonjs',
-            ['inline-json-import', {}],
             [
               'module-resolver',
               {

package.json

@@ -38,12 +38,14 @@
     "start:custom-theme": "npm run install-and-start -- examples/custom-theme start-local",
     "start:web": "npm run install-and-start -- website start",
     "build": "rm -fr dist && uber-licence && babel src --out-dir dist --source-maps inline",
-    "build:umd": "webpack --progress --env.prod",
+    "build:umd": "webpack --config ./webpack/umd.js --progress --env.prod",
+    "analyze": "npm run analyze:bundle",
+    "analyze:bundle": "webpack --config ./webpack/bundle.js --progress --env.prod",
     "check-licence": "uber-licence --dry",
     "add-licence": "uber-licence",
     "prepublish": "uber-licence && yarn build && yarn build:umd",
     "docs": "babel-node ./scripts/documentation.js",
-    "lint": "eslint src webpack.*.js examples/*.js examples/**/src examples/**/*.js website/*.js website/src --fix",
+    "lint": "eslint src webpack/*.js examples/*.js examples/**/src examples/**/*.js website/*.js website/src --fix",
     "web": "(yarn && yarn install:web && yarn start:web)",
     "deploy": "yarn clean && yarn --ignore-engines && yarn install:web && (cd website && yarn build && git checkout gh-pages && cp dist/* .. && git add .. && git commit -m 'Update website' && git push origin gh-pages && git checkout master)",
     "deploy:test": "yarn clean && yarn --ignore-engines && yarn install:web && (cd website && yarn build && git checkout -B gh-pages-test gh-pages && cp dist/* .. && git add .. && git commit -m 'Update website' && git push -f test gh-pages-test:master && git checkout master)",
@@ -152,7 +154,6 @@
     "@babel/traverse": "^7.2.3",
     "babel-eslint": "^9.0.0",
     "babel-loader": "^8.0.0",
-    "babel-plugin-inline-json-import": "^0.2.1",
     "babel-plugin-istanbul": "^5.1.1",
     "babel-plugin-module-resolver": "^3.0.0",
     "babel-plugin-transform-builtin-extend": "^1.1.0",
@@ -186,6 +187,7 @@
     "url-loader": "^0.5.7",
     "watchify": "^3.6.1",
     "webpack": "^4.29.0",
+    "webpack-bundle-analyzer": "^3.3.2",
     "webpack-cli": "^3.2.1",
     "webpack-dev-middleware": "^3.5.1",
     "webpack-dev-server": "^3.1.14",

src/layers/icon-layer/icon-info-modal.js

@@ -21,7 +21,6 @@
 import React from 'react';
 import styled from 'styled-components';
 import {line} from 'd3-shape'
-import {svgIcons as SvgIcons} from 'layers/icon-layer/svg-icons.json';
 import {Table, CenterFlexbox} from 'components/common/styled-components';
 
 const lineFunction = line()
@@ -45,7 +44,7 @@ const StyledIconItem = styled(CenterFlexbox)`
   width: 180px;
   height: 48px;
   margin-right: 12px;
-  
+
   .icon-table_item__name {
     margin-left: 12px;
   }
@@ -117,31 +116,34 @@ const IconTable = styled.div`
   flex-wrap: wrap;
 `;
 
-export const IconInfoModal = () => (
-  <div className="icon-info-modal">
-    <div className="icon-info-modal__description">
-      <span>
-        In your csv, create a column, put the name of the icon you want to
-        draw in it. You can leave the cell empty if you do not want the icon
-        to show for some points. When the column is named{' '}
-      </span>
-      <code>icon</code>
-      <span> Voyager will automatically create a icon layer for you.</span>
-    </div>
-    <div className="icon-info-modal__example">
-      <StyledTitle>Example:</StyledTitle>
-      <ExampleTable/>
-    </div>
-    <div className="icon-info-modal__icons">
-      <StyledTitle>Icons</StyledTitle>
-      <IconTable className="icon-info-modal__icons__table">
-        {SvgIcons.map(icon => (
-          <IconItem key={icon.id} icon={icon}/>
-        ))}
-      </IconTable>
+const IconInfoModalFactory = (svgIcons = []) => {
+  const IconInfoModal = () => (
+    <div className="icon-info-modal">
+      <div className="icon-info-modal__description">
+        <span>
+          In your csv, create a column, put the name of the icon you want to
+          draw in it. You can leave the cell empty if you do not want the icon
+          to show for some points. When the column is named{' '}
+        </span>
+        <code>icon</code>
+        <span> kepler.gl will automatically create a icon layer for you.</span>
+      </div>
+      <div className="icon-info-modal__example">
+        <StyledTitle>Example:</StyledTitle>
+        <ExampleTable/>
+      </div>
+      <div className="icon-info-modal__icons">
+        <StyledTitle>Icons</StyledTitle>
+        <IconTable className="icon-info-modal__icons__table">
+          {svgIcons.map(icon => (
+            <IconItem key={icon.id} icon={icon}/>
+          ))}
+        </IconTable>
+      </div>
     </div>
-  </div>
-);
+  );
+
+  return IconInfoModal;
+}
 
-const IconInfoModalFactory = () => IconInfoModal;
 export default IconInfoModalFactory;

src/layers/icon-layer/icon-layer.js

@@ -20,27 +20,15 @@
 
 import Layer from '../base-layer';
 import memoize from 'lodash.memoize';
+import window from 'global/window';
+
 import {hexToRgb} from 'utils/color-utils';
-import {svgIcons as SvgIcons} from './svg-icons.json';
 import SvgIconLayer from 'deckgl-layers/svg-icon-layer/svg-icon-layer';
 import IconLayerIcon from './icon-layer-icon';
-import {ICON_FIELDS} from 'constants/default-settings';
+import {ICON_FIELDS, CLOUDFRONT} from 'constants/default-settings';
 import IconInfoModalFactory from './icon-info-modal';
 
-const IconInfoModal = IconInfoModalFactory();
-const IconIds = SvgIcons.map(d => d.id);
-const SvgIconGeometry = SvgIcons.reduce(
-  (accu, curr) => ({
-    ...accu,
-    [curr.id]: curr.mesh.cells.reduce((prev, cell) => {
-      cell.forEach(p => {
-        Array.prototype.push.apply(prev, curr.mesh.positions[p]);
-      });
-      return prev;
-    }, [])
-  }),
-  {}
-);
+export const SVG_ICON_URL = `${CLOUDFRONT}/icons/svg-icons.json`;
 
 export const iconPosAccessor = ({lat, lng}) => d => [
   d.data[lng.fieldIdx],
@@ -71,6 +59,10 @@ export default class IconLayer extends Layer {
     this.registerVisConfig(pointVisConfigs);
     this.getPosition = memoize(iconPosAccessor, iconPosResolver);
     this.getIcon = memoize(iconAccessor, iconResolver);
+
+    // prepare layer info modal
+    this._layerInfoModal = IconInfoModalFactory();
+    this.getSvgIcons();
   }
 
   get type() {
@@ -104,13 +96,40 @@ export default class IconLayer extends Layer {
   get layerInfoModal() {
     return {
       id: 'iconInfo',
-      template: IconInfoModal,
+      template: this._layerInfoModal,
       modalProps: {
         title: 'How to draw icons'
       }
     };
   }
 
+  async getSvgIcons() {
+    const fetchConfig = {
+      method: 'GET',
+      mode: 'cors',
+      cache: 'no-cache'
+    };
+
+    if (window.fetch) {
+      const response = await window.fetch(SVG_ICON_URL, fetchConfig);
+      const {svgIcons} = await response.json();
+
+      this.iconGeometry = svgIcons.reduce(
+        (accu, curr) => ({
+          ...accu,
+          [curr.id]: curr.mesh.cells.reduce((prev, cell) => {
+            cell.forEach(p => {
+              Array.prototype.push.apply(prev, curr.mesh.positions[p]);
+            });
+            return prev;
+          }, [])
+        }),
+        {}
+      );
+      this._layerInfoModal = IconInfoModalFactory(svgIcons);
+    }
+  }
+
   static findDefaultLayerProps({fieldPairs, fields}) {
     if (!fieldPairs.length) {
       return [];
@@ -198,7 +217,7 @@ export default class IconLayer extends Layer {
 
         // if doesn't have point lat or lng, do not add the point
         // deck.gl can't handle position = null
-        if (!pos.every(Number.isFinite) || !icon || !IconIds.includes(icon)) {
+        if (!pos.every(Number.isFinite) || typeof icon !== 'string') {
           return accu;
         }
 
@@ -212,11 +231,13 @@ export default class IconLayer extends Layer {
       }, []);
     }
 
-    const getRadius = rScale ? d =>
-      this.getEncodedChannelValue(rScale, d.data, sizeField) : 1;
+    const getRadius = rScale
+      ? d => this.getEncodedChannelValue(rScale, d.data, sizeField)
+      : 1;
 
-    const getColor = cScale ? d =>
-      this.getEncodedChannelValue(cScale, d.data, colorField) : color;
+    const getColor = cScale
+      ? d => this.getEncodedChannelValue(cScale, d.data, colorField)
+      : color;
 
     return {
       data,
@@ -256,7 +277,7 @@ export default class IconLayer extends Layer {
         id: this.id,
         idx,
         opacity: this.config.visConfig.opacity,
-        getIconGeometry: id => SvgIconGeometry[id],
+        getIconGeometry: id => this.iconGeometry[id],
 
         // picking
         autoHighlight: true,