[Feature] Collapsible layer group

examples/demo-app/src/app.js

@@ -43,10 +43,11 @@ const KeplerGl = require('kepler.gl/components').injectComponents([
 // Sample data
 /* eslint-disable no-unused-vars */
 import sampleTripData from './data/sample-trip-data';
-import sampleGeojson from './data/sample-geojson.json';
+import sampleGeojson from './data/sample-small-geojson.json';
+import sampleGeojsonPoints from './data/sample-geojson-points.json';
 import sampleH3Data from './data/sample-hex-id-csv';
 import sampleIconCsv, {config as savedMapConfig} from './data/sample-icon-csv';
-import {updateVisData, addDataToMap, addNotification} from 'kepler.gl/actions';
+import {addDataToMap, addNotification} from 'kepler.gl/actions';
 import Processors from 'kepler.gl/processors';
 /* eslint-enable no-unused-vars */
 
@@ -173,36 +174,44 @@ class App extends Component {
  }
 
  _loadSampleData() {
+ // this._loadTripData();
+ // this._loadGeojsonData();
+ this._loadIconData();
+ this._loadH3HexagonData();
+ }
+
+ _loadTripData() {
  this.props.dispatch(
- updateVisData(
- // datasets
- {
+ addDataToMap({
+ datasets: {
  info: {
  label: 'Sample Taxi Trips in New York City',
  id: 'test_trip_data'
  },
  data: sampleTripData
  },
- // option
- {
+ option: {
  centerMap: true,
  readOnly: false
  },
- // config
- {
- filters: [
- {
- id: 'me',
- dataId: 'test_trip_data',
- name: 'tpep_pickup_datetime',
- type: 'timeRange',
- enlarged: true
- }
- ]
+ config: {
+ visState: {
+ filters: [
+ {
+ id: 'me',
+ dataId: 'test_trip_data',
+ name: 'tpep_pickup_datetime',
+ type: 'timeRange',
+ enlarged: true
+ }
+ ]
+ }
  }
- )
+ })
  );
+ }
 
+ _loadIconData() {
  // load icon data and config and process csv file
  this.props.dispatch(
  addDataToMap({
@@ -221,15 +230,24 @@ class App extends Component {
  config: savedMapConfig
  })
  );
+ }
 
+ _loadGeojsonData() {
  // load geojson
  this.props.dispatch(
- updateVisData({
- info: {label: 'SF Zip Geo'},
- data: Processors.processGeojson(sampleGeojson)
+ addDataToMap({
+ datasets: [{
+ info: {label: 'Bart Stops Geo'},
+ data: Processors.processGeojson(sampleGeojsonPoints)
+ }, {
+ info: {label: 'SF Zip Geo'},
+ data: Processors.processGeojson(sampleGeojson)
+ }]
  })
  );
+ }
 
+ _loadH3HexagonData() {
  // load h3 hexagon
  this.props.dispatch(
  addDataToMap({

examples/demo-app/src/data/sample-geojson-points.json

@@ -0,0 +1 @@
+{"type":"FeatureCollection","features":[{"type":"Feature","properties":{"name":"Lafayette (LAFY)","code":"LF","address":"3601 Deer Hill Road, Lafayette CA 94549","entries":"3481","exits":"3616","latitude":37.893394,"longitude":-122.123801},"geometry":{"type":"Point","coordinates":[-122.123801,37.893394]}},{"type":"Feature","properties":{"name":"12th St. Oakland City Center (12TH)","code":"12","address":"1245 Broadway, Oakland CA 94612","entries":"13418","exits":"13547","latitude":37.803664,"longitude":-122.271604},"geometry":{"type":"Point","coordinates":[-122.271604,37.803664]}},{"type":"Feature","properties":{"name":"16th St. Mission (16TH)","code":"16","address":"2000 Mission Street, San Francisco CA 94110","entries":"12409","exits":"12351","latitude":37.765062,"longitude":-122.419694},"geometry":{"type":"Point","coordinates":[-122.419694,37.765062]}},{"type":"Feature","properties":{"name":"19th St. Oakland (19TH)","code":"19","address":"1900 Broadway, Oakland CA 94612","entries":"13108","exits":"13090","latitude":37.80787,"longitude":-122.269029},"geometry":{"type":"Point","coordinates":[-122.269029,37.80787]}},{"type":"Feature","properties":{"name":"24th St. Mission (24TH)","code":"24","address":"2800 Mission Street, San Francisco CA 94110","entries":"12817","exits":"12529","latitude":37.752254,"longitude":-122.418466},"geometry":{"type":"Point","coordinates":[-122.418466,37.752254]}},{"type":"Feature","properties":{"name":"Ashby (ASHB)","code":"AS","address":"3100 Adeline Street, Berkeley CA 94703","entries":"5452","exits":"5341","latitude":37.853024,"longitude":-122.26978},"geometry":{"type":"Point","coordinates":[-122.26978,37.853024]}},{"type":"Feature","properties":{"name":"Balboa Park (BALB)","code":"BP","address":"401 Geneva Avenue, San Francisco CA 94112","entries":"11170","exits":"9817","latitude":37.721981,"longitude":-122.447414},"geometry":{"type":"Point","coordinates":[-122.447414,37.721981]}},{"type":"Feature","properties":{"name":"Bay Fair (BAYF)","code":"BF","address":"15242 Hesperian Blvd., San Leandro CA 94578","entries":"5564","exits":"5516","latitude":37.697185,"longitude":-122.126871},"geometry":{"type":"Point","coordinates":[-122.126871,37.697185]}},{"type":"Feature","properties":{"name":"Castro Valley (CAST)","code":"CV","address":"3301 Norbridge Dr., Castro Valley CA 94546","entries":"2781","exits":"2735","latitude":37.690754,"longitude":-122.075567},"geometry":{"type":"Point","coordinates":[-122.075567,37.690754]}},{"type":"Feature","properties":{"name":"Civic Center/UN Plaza (CIVC)","code":"CC","address":"1150 Market Street, San Francisco CA 94102","entries":"24798","exits":"22626","latitude":37.779528,"longitude":-122.413756},"geometry":{"type":"Point","coordinates":[-122.413756,37.779528]}},{"type":"Feature","properties":{"name":"Colma (COLM)","code":"CM","address":"365 D Street, Colma CA 94014","entries":"4397","exits":"4214","latitude":37.684638,"longitude":-122.466233},"geometry":{"type":"Point","coordinates":[-122.466233,37.684638]}},{"type":"Feature","properties":{"name":"Coliseum/Oakland Airport (COLS)","code":"CL","address":"7200 San Leandro St., Oakland CA 94621","entries":"5837","exits":"5902","latitude":37.754006,"longitude":-122.197273},"geometry":{"type":"Point","coordinates":[-122.197273,37.754006]}},{"type":"Feature","properties":{"name":"Concord (CONC)","code":"CN","address":"1451 Oakland Avenue, Concord CA 94520","entries":"6035","exits":"6008","latitude":37.973737,"longitude":-122.029095},"geometry":{"type":"Point","coordinates":[-122.029095,37.973737]}},{"type":"Feature","properties":{"name":"Daly City (DALY)","code":"DC","address":"500 John Daly Blvd., Daly City CA 94014","entries":"8681","exits":"8502","latitude":37.706121,"longitude":-122.469081},"geometry":{"type":"Point","coordinates":[-122.469081,37.706121]}},{"type":"Feature","properties":{"name":"Downtown Berkeley (DBRK)","code":"BK","address":"2160 Shattuck Avenue, Berkeley CA 94704","entries":"11043","exits":"11762","latitude":37.869867,"longitude":-122.268045},"geometry":{"type":"Point","coordinates":[-122.268045,37.869867]}},{"type":"Feature","properties":{"name":"El Cerrito del Norte (DELN)","code":"EN","address":"6400 Cutting Blvd., El Cerrito CA 94530","entries":"8176","exits":"8668","latitude":37.925655,"longitude":-122.317269},"geometry":{"type":"Point","coordinates":[-122.317269,37.925655]}},{"type":"Feature","properties":{"name":"Dublin/Pleasanton (DUBL)","code":"ED","address":"5801 Owens Dr., Pleasanton CA 94588","entries":"7702","exits":"7554","latitude":37.701695,"longitude":-121.900367},"geometry":{"type":"Point","coordinates":[-121.900367,37.701695]}},{"type":"Feature","properties":{"name":"Embarcadero (EMBR)","code":"EM","address":"298 Market Street, San Francisco CA 94111","entries":"40376","exits":"46951","latitude":37.792976,"longitude":-122.396742},"geometry":{"type":"Point","coordinates":[-122.396742,37.792976]}},{"type":"Feature","properties":{"name":"Fremont (FRMT)","code":"FM","address":"2000 BART Way, Fremont CA 94536","entries":"8748","exits":"8673","latitude":37.557355,"longitude":-121.9764},"geometry":{"type":"Point","coordinates":[-121.9764,37.557355]}},{"type":"Feature","properties":{"name":"Fruitvale (FTVL)","code":"FV","address":"3401 East 12th Street, Oakland CA 94601","entries":"7701","exits":"8012","latitude":37.774963,"longitude":-122.224274},"geometry":{"type":"Point","coordinates":[-122.224274,37.774963]}},{"type":"Feature","properties":{"name":"Glen Park (GLEN)","code":"GP","address":"2901 Diamond Street, San Francisco CA 94131","entries":"7732","exits":"7072","latitude":37.732921,"longitude":-122.434092},"geometry":{"type":"Point","coordinates":[-122.434092,37.732921]}},{"type":"Feature","properties":{"name":"Hayward (HAYW)","code":"HY","address":"699 'B' Street, Hayward CA 94541","entries":"4958","exits":"5003","latitude":37.670399,"longitude":-122.087967},"geometry":{"type":"Point","coordinates":[-122.087967,37.670399]}},{"type":"Feature","properties":{"name":"Lake Merritt (LAKE)","code":"LM","address":"800 Madison Street, Oakland CA 94607","entries":"6539","exits":"6604","latitude":37.797484,"longitude":-122.265609},"geometry":{"type":"Point","coordinates":[-122.265609,37.797484]}},{"type":"Feature","properties":{"name":"MacArthur (MCAR)","code":"MA","address":"555 40th Street, Oakland CA 94609","entries":"9000","exits":"9228","latitude":37.828415,"longitude":-122.267227},"geometry":{"type":"Point","coordinates":[-122.267227,37.828415]}},{"type":"Feature","properties":{"name":"Millbrae (MLBR)","code":"MB","address":"200 North Rollins Road, Millbrae CA 94030","entries":"6570","exits":"6149","latitude":37.599787,"longitude":-122.38666},"geometry":{"type":"Point","coordinates":[-122.38666,37.599787]}},{"type":"Feature","properties":{"name":"Montgomery St. (MONT)","code":"MT","address":"598 Market Street, San Francisco CA 94104","entries":"43430","exits":"45128","latitude":37.789256,"longitude":-122.401407},"geometry":{"type":"Point","coordinates":[-122.401407,37.789256]}},{"type":"Feature","properties":{"name":"North Berkeley (NBRK)","code":"NB","address":"1750 Sacramento Street, Berkeley CA 94702","entries":"4363","exits":"4563","latitude":37.87404,"longitude":-122.283451},"geometry":{"type":"Point","coordinates":[-122.283451,37.87404]}},{"type":"Feature","properties":{"name":"North Concord/Martinez (NCON)","code":"NC","address":"3700 Port Chicago Highway, Concord CA 94520","entries":"2800","exits":"2652","latitude":38.003275,"longitude":-122.024597},"geometry":{"type":"Point","coordinates":[-122.024597,38.003275]}},{"type":"Feature","properties":{"name":"Orinda (ORIN)","code":"OR","address":"11 Camino Pablo, Orinda CA 94563","entries":"2896","exits":"2970","latitude":37.878361,"longitude":-122.183791},"geometry":{"type":"Point","coordinates":[-122.183791,37.878361]}},{"type":"Feature","properties":{"name":"Pleasant Hill/Contra Costa Centre (PHIL)","code":"PH","address":"1365 Treat Blvd., Walnut Creek CA 94597","entries":"7574","exits":"7442","latitude":37.928403,"longitude":-122.056013},"geometry":{"type":"Point","coordinates":[-122.056013,37.928403]}},{"type":"Feature","properties":{"name":"Pittsburg/Bay Point (PITT)","code":"WP","address":"1700 West Leland Road, Pittsburg CA 94565","entries":"6262","exits":"6343","latitude":38.018914,"longitude":-121.945154},"geometry":{"type":"Point","coordinates":[-121.945154,38.018914]}},{"type":"Feature","properties":{"name":"El Cerrito Plaza (PLZA)","code":"EP","address":"6699 Fairmount Avenue, El Cerrito CA 94530","entries":"4763","exits":"4952","latitude":37.903059,"longitude":-122.299272},"geometry":{"type":"Point","coordinates":[-122.299272,37.903059]}},{"type":"Feature","properties":{"name":"Powell St. (POWL)","code":"PL","address":"899 Market Street, San Francisco CA 94102","entries":"29460","exits":"25621","latitude":37.784991,"longitude":-122.406857},"geometry":{"type":"Point","coordinates":[-122.406857,37.784991]}},{"type":"Feature","properties":{"name":"Richmond (RICH)","code":"RM","address":"1700 Nevin Avenue, Richmond CA 94801","entries":"4184","exits":"4029","latitude":37.936887,"longitude":-122.353165},"geometry":{"type":"Point","coordinates":[-122.353165,37.936887]}},{"type":"Feature","properties":{"name":"Rockridge (ROCK)","code":"RR","address":"5660 College Avenue, Oakland CA 94618","entries":"5299","exits":"5775","latitude":37.844601,"longitude":-122.251793},"geometry":{"type":"Point","coordinates":[-122.251793,37.844601]}},{"type":"Feature","properties":{"name":"San Leandro (SANL)","code":"SL","address":"1401 San Leandro Blvd., San Leandro CA 94577","entries":"5836","exits":"5921","latitude":37.722619,"longitude":-122.161311},"geometry":{"type":"Point","coordinates":[-122.161311,37.722619]}},{"type":"Feature","properties":{"name":"San Bruno (SBRN)","code":"SB","address":"1151 Huntington Avenue, San Bruno CA 94066","entries":"3628","exits":"3634","latitude":37.637753,"longitude":-122.416038},"geometry":{"type":"Point","coordinates":[-122.416038,37.637753]}},{"type":"Feature","properties":{"name":"San Francisco Int'l Airport (SFIA)","code":"SO","address":"International Terminal, Level 3, San Francisco Int'l Airport CA 94128","entries":"5833","exits":"4904","latitude":37.616035,"longitude":-122.392612},"geometry":{"type":"Point","coordinates":[-122.392612,37.616035]}},{"type":"Feature","properties":{"name":"South Hayward (SHAY)","code":"SH","address":"28601 Dixon Street, Hayward CA 94544","entries":"3007","exits":"2829","latitude":37.6348,"longitude":-122.057551},"geometry":{"type":"Point","coordinates":[-122.057551,37.6348]}},{"type":"Feature","properties":{"name":"South San Francisco (SSAN)","code":"SS","address":"1333 Mission Road, South San Francisco CA 94080","entries":"3542","exits":"3441","latitude":37.664174,"longitude":-122.444116},"geometry":{"type":"Point","coordinates":[-122.444116,37.664174]}},{"type":"Feature","properties":{"name":"Union City (UCTY)","code":"UC","address":"10 Union Square, Union City CA 94587","entries":"4772","exits":"4770","latitude":37.591208,"longitude":-122.017867},"geometry":{"type":"Point","coordinates":[-122.017867,37.591208]}},{"type":"Feature","properties":{"name":"Walnut Creek (WCRK)","code":"WC","address":"200 Ygnacio Valley Road, Walnut Creek CA 94596","entries":"6719","exits":"6917","latitude":37.905628,"longitude":-122.067423},"geometry":{"type":"Point","coordinates":[-122.067423,37.905628]}},{"type":"Feature","properties":{"name":"West Dublin/Pleasanton (WDUB)","code":"WD","address":"6501 Golden Gate Drive, Dublin CA 94568","entries":"3303","exits":"3447","latitude":37.699759,"longitude":-121.928099},"geometry":{"type":"Point","coordinates":[-121.928099,37.699759]}},{"type":"Feature","properties":{"name":"West Oakland (WOAK)","code":"OW","address":"1451 7th Street, Oakland CA 94607","entries":"7312","exits":"6838","latitude":37.804675,"longitude":-122.294582},"geometry":{"type":"Point","coordinates":[-122.294582,37.804675]}}]}

src/components/common/icons/index.js

@@ -64,6 +64,7 @@ export {default as Table} from './table';
 export {default as Trash} from './trash';
 export {default as Upload} from './upload';
 export {default as VertDots} from './vert-dots';
+export {default as VertThreeDots} from './vert-three-dots';
 export {default as IconWrapper} from './base';
 export {default as CodeAlt} from './code-alt';
 export {default as Warning} from './warning';

src/components/common/icons/vert-three-dots.js

@@ -0,0 +1,45 @@
+// Copyright (c) 2019 Uber Technologies, Inc.
+//
+// Permission is hereby granted, free of charge, to any person obtaining a copy
+// of this software and associated documentation files (the "Software"), to deal
+// in the Software without restriction, including without limitation the rights
+// to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+// copies of the Software, and to permit persons to whom the Software is
+// furnished to do so, subject to the following conditions:
+//
+// The above copyright notice and this permission notice shall be included in
+// all copies or substantial portions of the Software.
+//
+// THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+// IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+// FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+// AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+// LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+// OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
+// THE SOFTWARE.
+
+import React, {Component} from 'react';
+import PropTypes from 'prop-types';
+import Base from './base';
+
+export default class VertThreeDots extends Component {
+ static propTypes = {
+ /** Set the height of the icon, ex. '16px' */
+ height: PropTypes.string
+ };
+
+ static defaultProps = {
+ height: '16px',
+ predefinedClassName: 'data-ex-icons-vert-three-dots'
+ };
+
+ render() {
+ return (
+ <Base {...this.props}>
+ <rect x="28" y="44" width="8" height="8"/>
+ <rect x="28" y="28" width="8" height="8"/>
+ <rect x="28" y="12" width="8" height="8"/>
+ </Base>
+ );
+ }
+}

src/components/common/range-slider.js

@@ -29,8 +29,8 @@ import {Input} from 'components/common/styled-components';
 import {roundValToStep} from 'utils/data-utils';
 
 const SliderInput = Input.extend`
- height: 24px;
- width: 40px;
+ height: ${props => props.theme.sliderInputHeight}px;
+ width: ${props => props.theme.sliderInputWidth}px;
  padding: 4px 6px;
  margin-left: ${props => props.flush ? 0 : 24}px;
 `;
@@ -188,7 +188,7 @@ export default class RangeSlider extends Component {
  sliderHandleWidth
  } = this.props;
 
- const height = this.props.xAxis ? '24px' : '16px';
+ const height = isRanged && showInput ? '16px' : '24px';
  const {width} = this.state;
  const plotWidth = width - sliderHandleWidth;
 

src/components/common/styled-components.js

@@ -274,6 +274,8 @@ export const StyledPanelDropdown = styled.div`
  border-radius: ${props => props.theme.panelBorderRadius};
  margin-top: 2px;
  max-height: 500px;
+ position: relative;
+ z-index: 999;
 `;
 
 export const ButtonGroup = styled.div`

src/components/side-panel/layer-panel/color-selector.js

@@ -25,10 +25,7 @@ import {rgbToHex} from 'utils/color-utils';
 import SingleColorPalette from 'components/side-panel/layer-panel/single-color-palette';
 import ColorRangeSelector from 'components/side-panel/layer-panel/color-range-selector';
 import ColorPalette from 'components/side-panel/layer-panel/color-palette';
-import {
- PanelLabel,
- StyledPanelDropdown
-} from 'components/common/styled-components';
+import {StyledPanelDropdown} from 'components/common/styled-components';
 import onClickOutside from 'react-onclickoutside';
 
 const ColorBlock = styled.div`
@@ -44,6 +41,13 @@ const ColorSelectorInput = styled.div`
  ? props.theme.secondaryInput
  : props.theme.input};
  height: ${props => props.theme.inputBoxHeight};
+
+ .color-selector__selector__label {
+ text-transform: capitalize;
+ font-size: 12px;
+ text-align: center;
+ color: ${props => props.theme.inputPlaceholderColor};
+ }
 `;
 
 const InputBoxContainer = styled.div`
@@ -110,7 +114,7 @@ class ColorSelector extends Component {
  <InputBoxContainer>
  {colorSets.map((cSet, i) => (
  <div className="color-select__input-group" key={i}>
- {cSet.label ? <PanelLabel>{cSet.label}</PanelLabel> : null}
+
  <ColorSelectorInput
  className="color-selector__selector"
  active={editing === i}
@@ -126,6 +130,7 @@ class ColorSelector extends Component {
  color={cSet.selectedColor}
  />
  )}
+ {cSet.label ? <div className="color-selector__selector__label">{cSet.label}</div> : null}
  </ColorSelectorInput>
  </div>
  ))}