[chore] changes to order layers by datasets (#2114)

Signed-off-by: Ihor Dykhta <dikhta.igor@gmail.com>
Co-authored-by: Nikola Karaklic <nkaraklic@foursquare.com>

src/components/src/common/item-selector/typeahead.tsx

@@ -104,6 +104,30 @@ function searchOptionsOnInput(inputValue, props) {
   return searchOptions(inputValue, props.options);
 }
 
+function getOptionsForValue(value, props, state) {
+  const {options, showOptionsWhenEmpty} = props;
+
+  if (!props.searchable) {
+    // directly pass through options if can not be searched
+    return options;
+  }
+  if (shouldSkipSearch(value, state, showOptionsWhenEmpty)) {
+    return options;
+  }
+
+  const searchOptions = generateSearchFunction(props);
+  return searchOptions(value, options);
+}
+
+function shouldSkipSearch(input, state, showOptionsWhenEmpty) {
+  const emptyValue = !input || input.trim().length === 0;
+
+  // this.state must be checked because it may not be defined yet if this function
+  // is called from within getInitialState
+  const isFocused = state && state.isFocused;
+  return !(showOptionsWhenEmpty && isFocused) && emptyValue;
+}
+
 interface TypeaheadProps {
   name?: string;
   customClasses?: any;
@@ -191,6 +215,20 @@ class Typeahead extends Component<TypeaheadProps, TypeaheadState> {
     resultsTruncatedMessage: null
   };
 
+  static getDerivedStateFromProps(props, state) {
+    if (props.options === state.prevOptions) {
+      return {};
+    }
+
+    //  invoked after a component is instantiated as well as before it is re-rendered
+    const searchResults = getOptionsForValue(state.entryValue, props, state);
+
+    return {
+      searchResults,
+      prevOptions: props.options
+    };
+  }
+
   constructor(props) {
     super(props);
 

src/components/src/side-panel.tsx

@@ -224,7 +224,7 @@ export default function SidePanelFactory(
         <StyledSidePanelContent className="side-panel__content">
           <div className="side-panel__content__inner">
             {currentPanel?.id !== 'layer' ? (
-              <PanelTitle>
+              <PanelTitle className="side-panel__content__title">
                 <FormattedMessage id={currentPanel?.label} />
               </PanelTitle>
             ) : null}

src/components/src/side-panel/layer-manager.tsx

@@ -38,7 +38,6 @@ import {LAYER_BLENDINGS, OVERLAY_BLENDINGS} from '@kepler.gl/constants';
 import {Layer, LayerClassesType} from '@kepler.gl/layers';
 import {UIStateActions, VisStateActions, ActionHandler} from '@kepler.gl/actions';
 import {SidePanelItem} from '../types';
-import {LayerPanelListView} from '@kepler.gl/types';
 import {Datasets} from '@kepler.gl/table';
 
 type LayerBlendingSelectorProps = {
@@ -64,7 +63,7 @@ type LayerManagerProps = {
   removeDataset: ActionHandler<typeof UIStateActions.openDeleteModal>;
   showDatasetTable: ActionHandler<typeof VisStateActions.showDatasetTable>;
   updateTableColor: ActionHandler<typeof VisStateActions.updateTableColor>;
-  layerPanelListView: LayerPanelListView;
+  layerPanelListView: string;
   panelMetadata: SidePanelItem;
 } & WrappedComponentProps;
 
@@ -214,16 +213,13 @@ function LayerManagerFactory(
               <PanelTitle className="layer-manager-title">
                 <FormattedMessage id={panelMetadata.label} />
               </PanelTitle>
-              {defaultDataset ? (
-                // TODO replace ignore
-                // @ts-ignore
-                <AddLayerButton
-                  datasets={datasets}
-                  typeaheadPlaceholder="Search datasets"
-                  intl={intl}
-                  onOptionSelected={this._addEmptyNewLayer}
-                />
-              ) : null}
+              <AddLayerButton
+                datasets={datasets}
+                typeaheadPlaceholder="Search datasets"
+                intl={intl}
+                onOptionSelected={this._addEmptyNewLayer}
+                disabled={!defaultDataset}
+              />
             </LayerHeader>
           </SidePanelSection>
           <SidePanelSection>

src/components/src/side-panel/layer-panel/add-layer-button.tsx

@@ -36,6 +36,7 @@ type AddLayerButtonProps = {
   datasets: Datasets;
   onOptionSelected: (opt: string) => void;
   typeaheadPlaceholder?: string;
+  disabled?: boolean;
 } & WrappedComponentProps;
 
 const DropdownContainer = styled.div.attrs({
@@ -109,7 +110,7 @@ function AddLayerButtonFactory() {
   );
 
   const AddLayerButton: React.FC<AddLayerButtonProps> = props => {
-    const {datasets, onOptionSelected, typeaheadPlaceholder, intl} = props;
+    const {datasets, onOptionSelected, typeaheadPlaceholder, intl, disabled} = props;
     const [showAddLayerDropdown, setShowAddLayerDropdown] = useState(false);
 
     const toggleAddLayerDropdown = useCallback(() => {
@@ -195,6 +196,7 @@ function AddLayerButtonFactory() {
           className="add-layer-button"
           width="105px"
           onClick={toggleAddLayerDropdown}
+          disabled={disabled}
         >
           <Add height="12px" />
           <FormattedMessage id={'layerManager.addLayer'} />

src/components/src/side-panel/layer-panel/panel-view-list-toggle.tsx

@@ -24,7 +24,10 @@ import OrderByList from '../../common/icons/order-by-list';
 import OrderByDataset from '../../common/icons/order-by-dataset';
 import {Tooltip} from '../../common/styled-components';
 import {FormattedMessage} from '@kepler.gl/localization';
-import {LayerPanelListView} from '@kepler.gl/types';
+import {
+  ActionHandler,
+  toggleLayerPanelListView as _toggleLayerPanelListView
+} from '@kepler.gl/actions';
 
 type ToggleOptionProps = {
   isActive: boolean;
@@ -33,8 +36,8 @@ type ToggleOptionProps = {
 };
 
 type PanelViewListToggleProps = {
-  layerPanelListViewMode: LayerPanelListView;
-  toggleLayerPanelListView: (view: string) => void;
+  layerPanelListViewMode: string;
+  toggleLayerPanelListView: ActionHandler<typeof _toggleLayerPanelListView>;
 };
 
 const PanelViewListToggleContainer = styled.div.attrs({

src/reducers/src/ui-state-updaters.ts

@@ -832,7 +832,6 @@ export const toggleLayerPanelListViewUpdater = (
   state: UiState,
   {payload: listView}: UIStateActions.ToggleLayerPanelListViewAction
 ): UiState => {
-  // @ts-expect-error
   return listView === state.layerPanelListView
     ? state
     : {

src/types/reducers.d.ts

@@ -359,8 +359,6 @@ export type Notifications = {
 
 export type Locale = string;
 
-export type LayerPanelListView = 'list' | 'sortByDataset';
-
 export type UiState = {
   readOnly: boolean;
   activeSidePanel: string;
@@ -381,7 +379,7 @@ export type UiState = {
   loadFiles: LoadFiles;
   // Locale of the UI
   locale: Locale;
-  layerPanelListView: LayerPanelListView;
+  layerPanelListView: string;
 };
 
 /** Width of viewport */