update layer selector types; get length for dc;

Signed-off-by: Ihor Dykhta <dikhta.igor@gmail.com>
keplergl · Aug 25, 2022 · d978bd0 · d978bd0
1 parent 5e20ac6
commit d978bd0
Show file tree

Hide file tree

Showing 10 changed files with 67 additions and 54 deletions.
diff --git a/src/components/common/item-selector/item-selector.tsx b/src/components/common/item-selector/item-selector.tsx
@@ -155,6 +155,7 @@ export type ItemSelectorProps = {
   DropDownLineItemRenderComponent?: ComponentType<any>;
   CustomChickletComponent?: ComponentType<any>;
   intl: IntlShape;
+  showDropdownOnMount?: boolean;
 };
 
 class ItemSelector extends Component<ItemSelectorProps> {
@@ -171,6 +172,12 @@ class ItemSelector extends Component<ItemSelectorProps> {
     showTypeahead: false
   };
 
+  componentDidMount() {
+    if (this.props.showDropdownOnMount) {
+      this.setState({showTypeahead: true});
+    }
+  }
+
   handleClickOutside = () => {
     this._hideTypeahead();
   };

diff --git a/src/components/side-panel/common/types.ts b/src/components/side-panel/common/types.ts
@@ -2,6 +2,7 @@ import React, {MouseEvent} from 'react';
 import {openDeleteModal} from '@kepler.gl/actions';
 import {VisStateActions} from '@kepler.gl/actions';
 import {ActionHandler} from '@kepler.gl/actions';
+import {RGBColor} from '@kepler.gl/types';
 import KeplerTable, {Datasets} from 'reducers/table-utils/kepler-table';
 
 export type DatasetInfoProps = {
@@ -57,9 +58,15 @@ export type DatasetItemProps = {
   value: KeplerTable;
 };
 
+export type SelectableDataset = {
+  label?: string;
+  id: string;
+  color: RGBColor;
+};
+
 export type SourceDataSelectorProps = {
   dataId: string | string[] | null;
-  datasets: Datasets;
+  datasets: {[id: string]: SelectableDataset};
   disabled?: boolean;
   defaultValue?: string;
   inputTheme?: string;

diff --git a/src/components/side-panel/layer-panel/layer-configurator.tsx b/src/components/side-panel/layer-panel/layer-configurator.tsx
@@ -1026,9 +1026,8 @@ export default function LayerConfiguratorFactory(
           ) : null}
           <LayerConfigGroup label={'layer.basic'} collapsible expanded={!layer.hasAllColumns()}>
             <LayerTypeSelector
-              datasets={datasets}
-              layer={layer}
-              layerTypeOptions={layerTypeOptions}
+              selected={layer.type}
+              options={layerTypeOptions}
               // @ts-ignore
               onSelect={updateLayerType}
             />

diff --git a/src/components/side-panel/layer-panel/layer-type-dropdown-list.tsx b/src/components/side-panel/layer-panel/layer-type-dropdown-list.tsx
@@ -18,22 +18,30 @@
 // OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
 // THE SOFTWARE.
 
-import React, {ComponentType, useCallback, MouseEvent} from 'react';
+import React, {useCallback, MouseEvent} from 'react';
 import styled from 'styled-components';
 import classNames from 'classnames';
 import {classList} from '../../common/item-selector/dropdown-list';
 
-type ListItem = {
+export type LayerTypeOption = {
+  disabled?: boolean;
   id: string;
-  disabled: boolean;
+  label: string;
+  icon: React.ElementType;
 };
 
 type LayerTypeDropdownListProps = {
-  options: ListItem[];
-  selectedItems: ListItem[];
+  onOptionSelected: (
+    value: {
+      icon: React.ElementType;
+      label: string;
+    },
+    e: MouseEvent
+  ) => void;
+  options: LayerTypeOption[];
+  selectedItems: LayerTypeOption[];
   selectionIndex: number | null;
-  onOptionSelected: (opt: string, e: Event) => void;
-  customListItemComponent: ComponentType<{value: ListItem; isTile: boolean}>;
+  customListItemComponent: React.FC<{value: LayerTypeOption; isTile?: boolean}>;
 };
 
 const DropdownListWrapper = styled.div`
@@ -90,7 +98,7 @@ export function LayerTypeDropdownListFactory() {
       [onOptionSelected]
     );
 
-    const Component = customListItemComponent;
+    const ListItemComponent = customListItemComponent;
 
     return (
       <DropdownListWrapper className={classList.list}>
@@ -105,7 +113,7 @@ export function LayerTypeDropdownListFactory() {
             onMouseDown={(e: MouseEvent) => onSelectOption(e, value)}
             onClick={(e: MouseEvent) => onSelectOption(e, value)}
           >
-            <Component value={value} isTile />
+            <ListItemComponent value={value} isTile />
           </StyledDropdownListItem>
         ))}
       </DropdownListWrapper>

diff --git a/src/components/side-panel/layer-panel/layer-type-list-item.tsx b/src/components/side-panel/layer-panel/layer-type-list-item.tsx
@@ -19,7 +19,7 @@
 // THE SOFTWARE.
 
 import React, {ComponentType} from 'react';
-import styled from 'styled-components';
+import styled, {withTheme} from 'styled-components';
 import {CLOUDFRONT} from '@kepler.gl/constants';
 import classNames from 'classnames';
 import {FormattedMessage} from '@kepler.gl/localization';
@@ -31,11 +31,7 @@ type LayerTypeListItemProps = {
     label: string;
   };
   isTile: boolean;
-};
-
-const ITEM_SIZE = {
-  large: 50,
-  small: 28
+  theme: any;
 };
 
 const StyledListItem = styled.div`
@@ -68,14 +64,14 @@ const StyledListItem = styled.div`
 `;
 
 export function LayerTypeListItemFactory() {
-  const LayerTypeListItem: React.FC<LayerTypeListItemProps> = ({value, isTile}) => (
+  const LayerTypeListItem: React.FC<LayerTypeListItemProps> = ({value, isTile, theme}) => (
     <StyledListItem
       className={classNames('layer-type-selector__item__inner', {
         list: !isTile
       })}
     >
       <div className="layer-type-selector__item__icon">
-        <value.icon height={`${isTile ? ITEM_SIZE.large : ITEM_SIZE.small}px`} />
+        <value.icon height={`${isTile ? theme.layerTypeIconSizeL : theme.layerTypeIconSizeSM}px`} />
       </div>
       <div className="layer-type-selector__item__label">
         <FormattedMessage
@@ -86,7 +82,7 @@ export function LayerTypeListItemFactory() {
     </StyledListItem>
   );
 
-  return LayerTypeListItem;
+  return withTheme(LayerTypeListItem);
 }
 
 export default LayerTypeListItemFactory;
diff --git a/src/components/side-panel/layer-panel/layer-type-selector.tsx b/src/components/side-panel/layer-panel/layer-type-selector.tsx
@@ -21,13 +21,11 @@
 import React, {useMemo} from 'react';
 import styled, {withTheme} from 'styled-components';
 
-import LayerTypeDropdownListFactory from './layer-type-dropdown-list';
+import LayerTypeDropdownListFactory, {LayerTypeOption} from './layer-type-dropdown-list';
 import LayerTypeListItemFactory from './layer-type-list-item';
 import ItemSelector from 'components/common/item-selector/item-selector';
 
 import {SidePanelSection} from 'components/common/styled-components';
-import {Layer} from '@kepler.gl/layers';
-import {Datasets} from 'reducers/table-utils/kepler-table';
 
 type Option = {
   id: string;
@@ -36,10 +34,8 @@ type Option = {
   requireData: any; //
 };
 
-type LayerTypeSelectorProps = {
-  layer: Layer;
-  datasets: Datasets;
-  layerTypeOptions: Option[];
+export type LayerTypeSelectorProps = {
+  selected: string | null;
   onSelect: (
     items:
       | readonly (string | number | boolean | object)[]
@@ -49,13 +45,14 @@ type LayerTypeSelectorProps = {
       | object
       | null
   ) => void;
+  options: LayerTypeOption[];
   // TODO add correct type after Theme typing
   theme: Record<string, string>;
 };
 
 const StyledLayerTypeSelector = styled.div`
   .item-selector .item-selector__dropdown {
-    padding: 4px 10px 4px 2px;
+    padding: 4px 10px 4px 10px;
   }
 `;
 
@@ -68,33 +65,18 @@ function LayerTypeSelectorFactory(
   LayerTypeListItem: ReturnType<typeof LayerTypeListItemFactory>,
   LayerTypeDropdownList: ReturnType<typeof LayerTypeDropdownListFactory>
 ) {
-  const LayerTypeSelector: React.FC<LayerTypeSelectorProps> = ({
-    layer,
-    layerTypeOptions,
-    onSelect,
-    datasets
-  }) => {
-    const hasData = useMemo(() => Boolean(Object.keys(datasets).length), [datasets]);
-    const typeOptions = useMemo(
-      () =>
-        layerTypeOptions.map(op => ({
-          ...op,
-          disabled: !hasData && op.requireData !== false
-        })),
-      [hasData, layerTypeOptions]
-    );
-
-    const selectedItems = useMemo(() => typeOptions.find(op => op.id === layer.type), [
-      typeOptions,
-      layer.type
+  const LayerTypeSelector: React.FC<LayerTypeSelectorProps> = ({selected, options, onSelect}) => {
+    const selectedItems = useMemo(() => options.find(op => op.id === selected), [
+      options,
+      selected
     ]);
 
     return (
       <SidePanelSection>
         <StyledLayerTypeSelector className="layer-config__type">
           <ItemSelector
             selectedItems={selectedItems}
-            options={typeOptions}
+            options={options}
             multiSelect={false}
             placeholder="placeholder.selectType"
             onChange={onSelect}

diff --git a/src/constants/src/tooltip.ts b/src/constants/src/tooltip.ts
@@ -18,6 +18,8 @@
 // OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
 // THE SOFTWARE.
 
+import {ValueOf} from '@kepler.gl/types';
+
 export const TOOLTIP_FORMAT_TYPES = {
   NONE: 'none',
   DATE: 'date',
@@ -29,6 +31,13 @@ export const TOOLTIP_FORMAT_TYPES = {
 
 export const TOOLTIP_KEY = 'format';
 
+export type TooltipFormat = {
+  id: string;
+  label: string;
+  format: null | string;
+  type: ValueOf<typeof TOOLTIP_FORMAT_TYPES>;
+};
+
 export const TOOLTIP_FORMATS = {
   NONE: {
     id: 'NONE',

diff --git a/src/reducers/interaction-utils.ts b/src/reducers/interaction-utils.ts
@@ -137,7 +137,7 @@ export function getTooltipDisplayDeltaValue({
       displayDeltaValue = getFormatter(deltaFormat)(deltaValue);
 
       // safely cast string
-      displayDeltaValue = defaultFormatter(displayDeltaValue);
+      displayDeltaValue = defaultFormatter(displayDeltaValue) as string;
       const deltaFirstChar = displayDeltaValue.charAt(0);
       if (deltaFirstChar !== '+' && deltaFirstChar !== TOOLTIP_MINUS_SIGN) {
         displayDeltaValue = `+${displayDeltaValue}`;

diff --git a/src/reducers/table-utils/kepler-table.ts b/src/reducers/table-utils/kepler-table.ts
@@ -195,6 +195,10 @@ class KeplerTable {
     this.disableDataOperation = disableDataOperation;
   }
 
+  get length() {
+    return this.dataContainer.numRows();
+  }
+
   /**
    * Get field
    * @param columnName

diff --git a/src/utils/src/data-utils.ts b/src/utils/src/data-utils.ts
@@ -23,7 +23,8 @@ import {
   ALL_FIELD_TYPES,
   TOOLTIP_FORMATS,
   TOOLTIP_FORMAT_TYPES,
-  TOOLTIP_KEY
+  TOOLTIP_KEY,
+  TooltipFormat
 } from '@kepler.gl/constants';
 import {format as d3Format} from 'd3-format';
 import {bisectLeft} from 'd3-array';
@@ -315,15 +316,15 @@ export function getFormatter(
   const tooltipFormat = Object.values(TOOLTIP_FORMATS).find(f => f[TOOLTIP_KEY] === format);
 
   if (tooltipFormat) {
-    return applyDefaultFormat(tooltipFormat);
+    return applyDefaultFormat(tooltipFormat as TooltipFormat);
   } else if (typeof format === 'string' && field) {
     return applyCustomFormat(format, field);
   }
 
   return defaultFormatter;
 }
 
-export function applyDefaultFormat(tooltipFormat) {
+export function applyDefaultFormat(tooltipFormat: TooltipFormat): (v: any) => string {
   if (!tooltipFormat || !tooltipFormat.format) {
     return defaultFormatter;
   }