@carto/kepler.gl 0.0.12 → 0.0.16-alpha.0

package/src/components/side-panel/layer-panel/layer-config-group.js

@@ -144,7 +144,8 @@ function LayerConfigGroupFactory(LayerConfigGroupLabel) {
       expanded: false,
       onChange: () => {},
       description: null,
-      disabled: false
+      disabled: false,
+      CollapseButton: VertThreeDots
     };
 
     static getDerivedStateFromProps(props, state) {
@@ -153,6 +154,10 @@ function LayerConfigGroupFactory(LayerConfigGroupLabel) {
         return {collapsed: false};
       }
 
+      if (props.layer && !props.layer.config.visConfig[props.property] && !state.collapsed) {
+        return {collapsed: true};
+      }
+
       return null;
     }
 
@@ -169,17 +174,15 @@ function LayerConfigGroupFactory(LayerConfigGroupLabel) {
         onChange,
         collapsible,
         description,
-        disabled
+        disabled,
+        CollapseButton
       } = this.props;
 
       const {collapsed} = this.state;
 
       return (
         <StyledLayerConfigGroup className={classnames('layer-config-group', {collapsed, disabled})}>
-          <StyledConfigGroupHeader
-            className="layer-config-group__header"
-            onClick={() => this.setState({collapsed: !this.state.collapsed})}
-          >
+          <StyledConfigGroupHeader className="layer-config-group__header">
             <LayerConfigGroupLabel label={label} description={description} />
             <StyledLayerConfigGroupAction className="layer-config-group__action">
               {property ? (
@@ -189,7 +192,13 @@ function LayerConfigGroupFactory(LayerConfigGroupLabel) {
                   onChange={() => onChange({[property]: !layer.config.visConfig[property]})}
                 />
               ) : null}
-              {collapsible ? <VertThreeDots height="18px" /> : null}
+              {collapsible ? (
+                <CollapseButton
+                  onClick={() => this.setState({collapsed: !this.state.collapsed})}
+                  active={!this.state.collapsed}
+                  height="18px"
+                />
+              ) : null}
             </StyledLayerConfigGroupAction>
           </StyledConfigGroupHeader>
           <ConfigGroupContent

package/src/components/side-panel/layer-panel/layer-configurator.js

@@ -951,7 +951,11 @@ export default function LayerConfiguratorFactory(
           {layer.layerInfoModal ? (
             <HowToButton onClick={() => this.props.openModal(layer.layerInfoModal)} />
           ) : null}
-          <LayerConfigGroup label={'layer.basic'} collapsible expanded={!layer.hasAllColumns()}>
+          <LayerConfigGroup
+            label={'layer.basic'}
+            collapsible={Object.keys(layer.config.columns).length > 0}
+            expanded={!layer.hasAllColumns()}
+          >
             <LayerTypeSelector
               datasets={datasets}
               layer={layer}
@@ -966,17 +970,21 @@ export default function LayerConfiguratorFactory(
                 onSelect={value => updateLayerConfig({dataId: value})}
               />
             )}
-            <LayerColumnConfig
-              columnPairs={layer.columnPairs}
-              columns={layer.config.columns}
-              assignColumnPairs={layer.assignColumnPairs.bind(layer)}
-              assignColumn={layer.assignColumn.bind(layer)}
-              columnLabels={layer.columnLabels}
-              fields={fields}
-              fieldPairs={fieldPairs}
-              updateLayerConfig={updateLayerConfig}
-              updateLayerType={this.props.updateLayerType}
-            />
+            {Object.keys(layer.config.columns).length > 0 && (
+              <ConfigGroupCollapsibleContent>
+                <LayerColumnConfig
+                  columnPairs={layer.columnPairs}
+                  columns={layer.config.columns}
+                  assignColumnPairs={layer.assignColumnPairs.bind(layer)}
+                  assignColumn={layer.assignColumn.bind(layer)}
+                  columnLabels={layer.columnLabels}
+                  fields={fields}
+                  fieldPairs={fieldPairs}
+                  updateLayerConfig={updateLayerConfig}
+                  updateLayerType={this.props.updateLayerType}
+                />
+              </ConfigGroupCollapsibleContent>
+            )}
           </LayerConfigGroup>
           {this[renderTemplate] &&
             this[renderTemplate]({

package/src/components/side-panel/layer-panel/text-label-panel.js

@@ -50,8 +50,17 @@ function TextLabelPanelFactory(RangeSlider, LayerConfigGroup, FieldSelector) {
       updateLayerTextLabel: PropTypes.func.isRequired
     };
 
+    static defaultProps = {
+      AddButton: props => (
+        <Button {...props} link>
+          <Add height="12px" />
+          <FormattedMessage id="panel.text.addMoreLabel" />
+        </Button>
+      )
+    };
+
     render() {
-      const {updateLayerTextLabel, textLabel, fields} = this.props;
+      const {updateLayerTextLabel, textLabel, fields, AddButton} = this.props;
       const currentFields = textLabel.map(tl => tl.field && tl.field.name).filter(d => d);
       return (
         <LayerConfigGroup label={'panel.text.label'} collapsible>
@@ -65,7 +74,10 @@ function TextLabelPanelFactory(RangeSlider, LayerConfigGroup, FieldSelector) {
           </ConfigGroupCollapsibleHeader>
           <ConfigGroupCollapsibleContent>
             {textLabel.map((tl, idx) => (
-              <div key={tl.field ? tl.field.name : `null-${idx}`}>
+              <div
+                key={tl.field ? tl.field.name : `null-${idx}`}
+                className="side-panel-section-group"
+              >
                 <PanelLabel>
                   <FormattedMessage id={'panel.text.labelWithId'} values={{labelId: idx + 1}} />
                 </PanelLabel>
@@ -129,10 +141,7 @@ function TextLabelPanelFactory(RangeSlider, LayerConfigGroup, FieldSelector) {
               </div>
             ))}
             <SidePanelSection>
-              <Button link onClick={val => updateLayerTextLabel(textLabel.length)}>
-                <Add height="12px" />
-                <FormattedMessage id="panel.text.addMoreLabel" />
-              </Button>
+              <AddButton onClick={val => updateLayerTextLabel(textLabel.length)} />
             </SidePanelSection>
           </ConfigGroupCollapsibleContent>
         </LayerConfigGroup>

package/src/localization/en.js

@@ -439,6 +439,11 @@ export default {
     type: 'type',
     reversed: 'reversed'
   },
+  customPalette: {
+    apply: 'Apply',
+    cancel: 'Cancel',
+    addStep: '+ Add Step'
+  },
   scale: {
     colorScale: 'Color Scale',
     sizeScale: 'Size Scale',

package/src/processors/data-processor.d.ts

@@ -11,6 +11,7 @@ export function processGeojson(rawData: object): ProcessorResult;
 export function processCsvData(rawData: string | any[][], header?: string[]): ProcessorResult;
 export function processKeplerglJSON(rawData: SavedMap): ProcessorResult;
 export function processRowObject(rawData: object[]): ProcessorResult;
+export function parseRowsByFields(rows: any[][], fields: Field[]): any[][];
 export function processKeplerglDataset(
   rawData: object | object[]
 ): ParsedDataset | ParsedDataset[] | null;

package/src/processors/index.js

@@ -28,6 +28,7 @@ export {
   processKeplerglDataset,
   analyzerTypeToFieldType,
   getFieldsFromData,
+  parseRowsByFields,
   parseCsvRowsByFieldType
 } from './data-processor';