Merge kepler master

docs/api-reference/localization/README.md

@@ -41,7 +41,7 @@ const reducers = combineReducers({
 Let's say we want to add the Swedish language to kepler.gl. Easiest way to add translation of new language is to follow these 3 steps:
 
 - Find out the [language code][language-codes] for Swedish: `sv`
-- Add new translation file `src/localization/sv.js` by copying `src/localization/en.js` and translating the strings
+- Add new translation file `src/localization/translations/sv.js` by copying `src/localization/translations/en.js` and translating the strings
 
 - Update _LOCALES_ in `src/localization/locales.js` to include new language translation:
   ```javascript

examples/demo-app/src/cloud-providers/carto/carto-provider.js

@@ -23,7 +23,7 @@ import Console from 'global/console';
 import CartoIcon from './carto-icon';
 import {formatCsv} from 'kepler.gl/processors';
 import {Provider} from 'kepler.gl/cloud-providers';
-import {createDataContainer} from 'kepler.gl';
+import {createDataContainer} from 'kepler.gl/utils';
 
 const NAME = 'carto';
 const DISPLAY_NAME = 'CARTO';

examples/webpack.config.local.js

@@ -104,10 +104,7 @@ function makeLocalDevConfig(env, EXAMPLE_DIR = LIB_DIR, externals = {}) {
   return {
     // suppress warnings about bundle size
     devServer: {
-      historyApiFallback: true,
-      stats: {
-        warnings: false
-      }
+      historyApiFallback: true
     },
 
     devtool: 'source-map',

package.json

@@ -5,6 +5,7 @@
   "description": "kepler.gl is a webgl based application to visualize large scale location data in the browser",
   "license": "MIT",
   "main": "dist/index.js",
+  "types": "./types.d.ts",
   "keywords": [
     "babel",
     "es6",
@@ -43,11 +44,12 @@
     "start:e2e": "npm run install-and-start -- examples/demo-app start-local-e2e",
     "build": "rm -fr dist && babel src --out-dir dist --source-maps inline",
     "build:umd": "webpack --config ./webpack/umd.js --progress --env.prod",
+    "build:types": "webpack --config ./webpack/build_types.js --progress",
     "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",
+    "prepublish": "yarn build && yarn build:umd",
     "docs": "babel-node ./scripts/documentation.js",
     "typedoc": "typedoc --theme markdown --out typedoc --inputFiles ./src/reducers --inputFiles ./src/actions --excludeExternals --excludeNotExported --excludePrivate",
     "example-version": "babel-node ./scripts/edit-version.js",
@@ -196,6 +198,7 @@
     "babel-tape-runner": "^3.0.0",
     "babelify": "^10.0.0",
     "documentation": "^9.1.1",
+    "dts-bundle-webpack": "^1.0.2",
     "enzyme": "^3.9.0",
     "enzyme-adapter-react-16": "^1.10.0",
     "eslint": "^5.16.0",
@@ -283,6 +286,7 @@
     "Giuseppe Macri <gmacri@uber.com>"
   ],
   "volta": {
-    "node": "12.19.0"
+    "node": "12.19.0",
+    "yarn": "1.22.17"
   }
-}
+}

src/actions/ui-state-actions.d.ts

@@ -198,3 +198,11 @@ export type SetLocaleUpdaterAction = {
 export function setLocale(
   locale: string
 ): Merge<SetLocaleUpdaterAction, {type: ActionTypes.SET_LOCALE}>;
+
+/** TOGGLE_LAYER_PANEL_LIST_VIEW */
+export type ToggleLayerPanelListViewAction = {
+  payload: string;
+}
+export function toggleLayerPanelListView(
+  listView: string
+): Merge<ToggleLayerPanelListViewAction, {type: ActionTypes.TOGGLE_LAYER_PANEL_LIST_VIEW}>;

src/actions/ui-state-actions.js

@@ -270,3 +270,15 @@ export const setLocale = createAction(ActionTypes.SET_LOCALE, locale => ({
 // @ts-ignore
 const uiStateActions = null;
 /* eslint-enable no-unused-vars */
+
+/**
+ * Toggle layer panel list view
+ * @memberof uiStateActions
+ * @param listView layer panel listView value. Can be 'list' or 'sortByDataset'
+ * @type {typeof import('./ui-state-actions').toggleLayerPanelListView}
+ * @public
+ */
+export const toggleLayerPanelListView = createAction(
+  ActionTypes.TOGGLE_LAYER_PANEL_LIST_VIEW,
+  listView => listView
+);

src/actions/vis-state-actions.d.ts

@@ -157,9 +157,11 @@ export function addFilter(
 
 export type AddLayerUpdaterAction = {
   config: object;
+  datasetId?: string;
 };
 export function addLayer(
-  config: object
+  config: object,
+  datasetId?: string,
 ): Merge<AddLayerUpdaterAction, {type: ActionTypes.ADD_LAYER}>;
 
 export type ReorderLayerUpdaterAction = {

src/actions/vis-state-actions.js

@@ -232,14 +232,16 @@ export function addFilter(dataId) {
  * Add a new layer
  * @memberof visStateActions
  * @param config - new layer config
+ * @param datasetId - dataset id used for creating an empty layer
  * @returns action
  * @type {typeof import('./vis-state-actions').addLayer}
  * @public
  */
-export function addLayer(config) {
+export function addLayer(config, datasetId) {
   return {
     type: ActionTypes.ADD_LAYER,
-    config
+    config,
+    datasetId
   };
 }
 

src/components/common/action-panel.d.ts

@@ -1,9 +1,9 @@
-import {FunctionComponent, PropsWithChildren, ComponentType, CSSProperties} from 'react';
+import {FunctionComponent, PropsWithChildren, ElementType, CSSProperties} from 'react';
 
 export type ActionPanelItemProps = PropsWithChildren<{
   color?: string,
   className?: string,
-  Icon?: ComponentType<any>,
+  Icon?: ElementType,
   label: string,
   onClick?: () => void,
   isSelection?: boolean,

src/components/common/checkbox.d.ts

@@ -0,0 +1,3 @@
+export const Checkbox:  (...props: any[]) => JSX.Element;
+
+export default Checkbox;

src/components/common/file-uploader/file-drop.d.ts

@@ -15,5 +15,5 @@ export type FileDropProps = {
   onFrameDrop?: (event: any) => void;
 };
 
-const FileDrop: React.FunctionComponent<FileDropProps>;
+export const FileDrop: React.FunctionComponent<FileDropProps>;
 export default FileDrop;

src/components/common/file-uploader/upload-button.d.ts

@@ -0,0 +1,8 @@
+import React from 'react';
+
+export type UploadButtonProps = {
+  onUpload: (files: FileList, event: any) => void;
+};
+
+export const UploadButton: React.FC<UploadButtonProps>;
+export default UploadButton;

src/components/common/file-uploader/upload-button.js

@@ -18,15 +18,9 @@
 // OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
 // THE SOFTWARE.
 
-import React, {Component, createRef} from 'react';
+import React, {useCallback, useRef} from 'react';
 import styled from 'styled-components';
 
-/**
-@typedef {{
-  onUpload: (files: FileList, event: any) => void;
-}} UploadButtonProps
-*/
-
 const Wrapper = styled.div`
   display: inline-block;
   color: ${props => props.theme.textColorLT};
@@ -38,46 +32,53 @@ const Wrapper = styled.div`
     font-weight: 500;
   }
 `;
+const inputStyle = {display: 'none'};
+
 /*
 Inspired by https://github.com/okonet/react-dropzone/blob/master/src/index.js
 */
-/** @augments React.Component<UploadButtonProps> */
-export class UploadButton extends Component {
-  _fileInput = createRef();
+/** @type {typeof import('./upload-button').UploadButton} */
+const UploadButton = ({onUpload, children}) => {
+  const _fileInput = useRef(null);
 
-  _onClick = () => {
-    this._fileInput.current.value = null;
-    this._fileInput.current.click();
-  };
+  const _onClick = useCallback(() => {
+    if (_fileInput.current) {
+      // @ts-ignore create ref with useRef<HTMLInputElement>
+      _fileInput.current.value = null;
+      // @ts-ignore create ref with useRef<HTMLInputElement>
+      _fileInput.current.click();
+    }
+  }, [_fileInput]);
 
-  _onChange = event => {
-    const {
-      target: {files}
-    } = event;
+  const _onChange = useCallback(
+    event => {
+      const {
+        target: {files}
+      } = event;
 
-    if (!files) {
-      return;
-    }
+      if (!files) {
+        return;
+      }
 
-    this.props.onUpload(files, event);
-  };
+      onUpload(files, event);
+    },
+    [onUpload]
+  );
 
-  render() {
-    return (
-      <Wrapper className="upload-button">
-        <input
-          type="file"
-          ref={this._fileInput}
-          style={{display: 'none'}}
-          onChange={this._onChange}
-          className="upload-button-input"
-        />
-        <span className="file-upload__upload-button-span" onClick={this._onClick}>
-          {this.props.children}
-        </span>
-      </Wrapper>
-    );
-  }
-}
+  return (
+    <Wrapper className="upload-button">
+      <input
+        type="file"
+        ref={_fileInput}
+        style={inputStyle}
+        onChange={_onChange}
+        className="upload-button-input"
+      />
+      <span className="file-upload__upload-button-span" onClick={_onClick}>
+        {children}
+      </span>
+    </Wrapper>
+  );
+};
 
 export default UploadButton;

src/components/common/icons/index.d.ts

@@ -0,0 +1,76 @@
+import React from 'react';
+
+export const Add: React.ElementType;
+export const AnchorWindow: React.ElementType;
+export const ArrowDown: React.ElementType;
+export const ArrowDownAlt: React.ElementType;
+export const ArrowDownSolid: React.ElementType;
+export const ArrowLeft: React.ElementType;
+export const ArrowRight: React.ElementType;
+export const ArrowUpSolid: React.ElementType;
+export const ArrowUpAlt: React.ElementType;
+export const ArrowUp: React.ElementType;
+export const Base: React.ElementType;
+export const Bug: React.ElementType;
+export const Cancel: React.ElementType;
+export const Checkmark: React.ElementType;
+export const Clipboard: React.ElementType;
+export const Clock: React.ElementType;
+export const Close: React.ElementType;
+export const Copy: React.ElementType;
+export const Crosshairs: React.ElementType;
+export const Cube3d: React.ElementType;
+export const CursorClick: React.ElementType;
+export const DataTable: React.ElementType;
+export const Db: React.ElementType;
+export const Delete: React.ElementType;
+export const Docs: React.ElementType;
+export const DragNDrop: React.ElementType;
+export const Email: React.ElementType;
+export const Expand: React.ElementType;
+export const EyeSeen: React.ElementType;
+export const EyeUnseen: React.ElementType;
+export const File: React.ElementType;
+export const Files: React.ElementType;
+export const FileType: React.ElementType;
+export const FilterFunnel: React.ElementType;
+export const FreeWindow: React.ElementType;
+export const Gear: React.ElementType;
+export const Hash: React.ElementType;
+export const Histogram: React.ElementType;
+export const Info: React.ElementType;
+export const Layers: React.ElementType;
+export const LeftArrow: React.ElementType;
+export const Legend: React.ElementType;
+export const LineChart: React.ElementType;
+export const Logout: React.ElementType;
+export const Login: React.ElementType;
+export const Map: React.ElementType;
+export const MapIcon: React.ElementType;
+export const Minus: React.ElementType;
+export const Messages: React.ElementType;
+export const Pause: React.ElementType;
+export const Picture: React.ElementType;
+export const Pin: React.ElementType;
+export const Play: React.ElementType;
+export const Reduce: React.ElementType;
+export const Reset: React.ElementType;
+export const Rocket: React.ElementType;
+export const Save: React.ElementType;
+export const Save2: React.ElementType;
+export const Share: React.ElementType;
+export const SquareSelect: React.ElementType;
+export const Settings: React.ElementType;
+export const Search: React.ElementType;
+export const Split: React.ElementType;
+export const Table: React.ElementType;
+export const Trash: React.ElementType;
+export const Upload: React.ElementType;
+export const VertDots: React.ElementType;
+export const VertThreeDots: React.ElementType;
+export const IconWrapper: React.ElementType;
+export const CodeAlt: React.ElementType;
+export const Warning: React.ElementType;
+export const DrawPolygon: React.ElementType;
+export const Polygon: React.ElementType;
+export const Rectangle: React.ElementType;

src/components/common/icons/index.js

@@ -92,3 +92,5 @@ export {default as Warning} from './warning';
 export {default as DrawPolygon} from './draw-polygon';
 export {default as Polygon} from './polygon';
 export {default as Rectangle} from './rectangle';
+export {default as OrderByList} from './order-by-list';
+export {default as OrderByDataset} from './order-by-dataset';

src/components/common/icons/order-by-dataset.js

@@ -0,0 +1,35 @@
+import React from 'react';
+import Base from './base';
+import PropTypes from 'prop-types';
+
+const OrderByDataset = props => (
+  <Base {...props}>
+    <path
+      d="M14.7225 13.7778C14.7225 14.1294 14.6183 14.4731 14.4229 14.7655C14.2276 15.0578 13.9499 15.2857 13.6251 15.4202C13.3003 15.5548 12.9428 15.59 12.5979 15.5214C12.2531 15.4528 11.9363 15.2835 11.6877 15.0349C11.4391 14.7862 11.2697 14.4695 11.2012 14.1246C11.1326 13.7798 11.1678 13.4223 11.3023 13.0975C11.4369 12.7726 11.6647 12.495 11.9571 12.2996C12.2494 12.1043 12.5932 12 12.9448 12C13.4163 12 13.8685 12.1873 14.2018 12.5207C14.5352 12.8541 14.7225 13.3063 14.7225 13.7778ZM23.5003 13.7778C23.5003 13.542 23.4067 13.3159 23.24 13.1492C23.0733 12.9825 22.8472 12.8889 22.6114 12.8889H18.2781C18.0424 12.8889 17.8163 12.9825 17.6496 13.1492C17.4829 13.3159 17.3892 13.542 17.3892 13.7778C17.3892 14.0135 17.4829 14.2396 17.6496 14.4063C17.8163 14.573 18.0424 14.6667 18.2781 14.6667H22.6114C22.8472 14.6667 23.0733 14.573 23.24 14.4063C23.4067 14.2396 23.5003 14.0135 23.5003 13.7778ZM12.9448 18.2222C12.5932 18.2222 12.2494 18.3265 11.9571 18.5218C11.6647 18.7172 11.4369 18.9948 11.3023 19.3197C11.1678 19.6445 11.1326 20.002 11.2012 20.3468C11.2697 20.6917 11.4391 21.0085 11.6877 21.2571C11.9363 21.5057 12.2531 21.675 12.5979 21.7436C12.9428 21.8122 13.3003 21.777 13.6251 21.6425C13.9499 21.5079 14.2276 21.28 14.4229 20.9877C14.6183 20.6953 14.7225 20.3516 14.7225 20C14.7225 19.5285 14.5352 19.0763 14.2018 18.7429C13.8685 18.4095 13.4163 18.2222 12.9448 18.2222ZM23.5003 20C23.5003 19.7643 23.4067 19.5382 23.24 19.3715C23.0733 19.2048 22.8472 19.1111 22.6114 19.1111H18.2781C18.0424 19.1111 17.8163 19.2048 17.6496 19.3715C17.4829 19.5382 17.3892 19.7643 17.3892 20C17.3892 20.2357 17.4829 20.4618 17.6496 20.6285C17.8163 20.7952 18.0424 20.8889 18.2781 20.8889H22.6114C22.8472 20.8889 23.0733 20.7952 23.24 20.6285C23.4067 20.4618 23.5003 20.2357 23.5003 20Z"
+      fill={props.fill}
+    />
+    <path
+      d="M6.77778 6C6.42617 6 6.08245 6.10426 5.7901 6.29961C5.49774 6.49495 5.26988 6.7726 5.13533 7.09745C5.00077 7.4223 4.96556 7.77975 5.03416 8.1246C5.10276 8.46946 5.27207 8.78623 5.5207 9.03486C5.76933 9.28348 6.0861 9.4528 6.43095 9.5214C6.77581 9.58999 7.13326 9.55479 7.4581 9.42023C7.78295 9.28567 8.0606 9.05781 8.25595 8.76546C8.45129 8.4731 8.55556 8.12939 8.55556 7.77778C8.55556 7.30628 8.36826 6.8541 8.03486 6.5207C7.70146 6.1873 7.24927 6 6.77778 6ZM23.3333 7.77778C23.3333 7.54203 23.2397 7.31594 23.073 7.14924C22.9063 6.98254 22.6802 6.88889 22.4444 6.88889H12.1111C11.8754 6.88889 11.6493 6.98254 11.4826 7.14924C11.3159 7.31594 11.2222 7.54203 11.2222 7.77778C11.2222 8.01353 11.3159 8.23962 11.4826 8.40632C11.6493 8.57302 11.8754 8.66667 12.1111 8.66667H22.4444C22.6802 8.66667 22.9063 8.57302 23.073 8.40632C23.2397 8.23962 23.3333 8.01353 23.3333 7.77778Z"
+      fill={props.fill}
+    />
+    <path
+      fillRule="evenodd"
+      clipRule="evenodd"
+      d="M7.2998 9H6.2998V19.5V20V20.5H11.2998V19.5H7.2998V14.4H11.4004V13.4H7.2998V9Z"
+      fill={props.fill}
+    />
+  </Base>
+);
+OrderByDataset.propTypes = {
+  /** Set the height of the icon, ex. '16px' */
+  height: PropTypes.string,
+  fill: PropTypes.string
+};
+OrderByDataset.defaultProps = {
+  height: '20px',
+  fill: 'currentColor',
+  viewBox: '0 0 24 24',
+  predefinedClassName: 'data-ex-icons-order-by-dataset'
+};
+
+export default OrderByDataset;