[chore] support addFilter with a specific filter id

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

@@ -367,20 +367,24 @@ export function setFilterAnimationWindow({
 
 export type AddFilterUpdaterAction = {
   dataId?: string | string[] | null;
+  id?: string;
 };
 /**
  * Add a new filter
  * @memberof visStateActions
  * @param dataId - dataset `id` this new filter is associated with
+ * @param id - `id` for the new filter
  * @returns action
  * @public
  */
 export function addFilter(
-  dataId: string | null
+  dataId: string | null,
+  id?: string
 ): Merge<AddFilterUpdaterAction, {type: typeof ActionTypes.ADD_FILTER}> {
   return {
     type: ActionTypes.ADD_FILTER,
-    dataId
+    dataId,
+    id
   };
 }
 

src/components/src/common/color-legend.tsx

@@ -165,7 +165,7 @@ export default class ColorLegend extends Component<ColorLegendProps> {
     const height = legends.data.length * (ROW_H + GAP);
 
     return (
-      <StyledLegend>
+      <StyledLegend className="styled-color-legend">
         <svg width={width} height={height}>
           {legends.data.map((color, idx) => (
             <LegendRow

src/components/src/index.ts

@@ -93,6 +93,7 @@ export {default as AddLayerButtonFactory} from './side-panel/layer-panel/add-lay
 export {default as LayerListFactory} from './side-panel/layer-panel/layer-list';
 export {default as CustomPicker} from './side-panel/layer-panel/custom-picker';
 export {default as CustomPalette} from './side-panel/layer-panel/custom-palette';
+export * from './side-panel/layer-panel/custom-palette';
 
 export {default as SourceDataCatalogFactory} from './side-panel/common/source-data-catalog';
 export {default as SourceDataSelectorFactory} from './side-panel/common/source-data-selector';
@@ -204,6 +205,7 @@ export {default as FileUploadFactory, FileUpload, WarningMsg} from './common/fil
 export {default as FileDrop} from './common/file-uploader/file-drop';
 export {default as UploadButton} from './common/file-uploader/upload-button';
 export {default as DatasetLabel} from './common/dataset-label';
+export {default as Accessor} from './common/item-selector/accessor';
 export {default as ChickletedInput, ChickletButton} from './common/item-selector/chickleted-input';
 export {default as ItemSelector} from './common/item-selector/item-selector';
 export {default as Typeahead} from './common/item-selector/typeahead';

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

@@ -937,7 +937,7 @@ export const addFilterUpdater = (
     ? state
     : {
         ...state,
-        filters: [...state.filters, getDefaultFilter(action.dataId)]
+        filters: [...state.filters, getDefaultFilter({dataId: action.dataId, id: action.id})]
       };
 
 /**

src/utils/src/filter-utils.ts

@@ -168,13 +168,18 @@ export const LAYER_FILTERS = [FILTER_TYPES.polygon];
 /**
  * Generates a filter with a dataset id as dataId
  */
-export function getDefaultFilter(dataId: string | null | string[]): FilterBase<LineChart> {
+export function getDefaultFilter({
+  dataId,
+  id
+}: {
+  dataId?: string | null | string[];
+  id?: string;
+} = {}): FilterBase<LineChart> {
   return {
     ...DEFAULT_FILTER_STRUCTURE,
     // store it as dataId and it could be one or many
-    // @ts-expect-error returns empty array for null, not array of nulls
-    dataId: toArray(dataId),
-    id: generateHashId(FILTER_ID_LENGTH)
+    dataId: dataId ? toArray(dataId) : [],
+    id: id || generateHashId(FILTER_ID_LENGTH)
   };
 }
 
@@ -267,7 +272,7 @@ export function validateFilter<K extends KeplerTableModel<K, L>, L>(
   }
 
   const initializeFilter: Filter = {
-    ...getDefaultFilter(filter.dataId),
+    ...getDefaultFilter({dataId: filter.dataId}),
     ...filter,
     dataId: filterDataId,
     name: toArray(filter.name)
@@ -516,7 +521,7 @@ export function getFilterFunction<L extends {config: {dataId: string | null}; id
 }
 
 export function updateFilterDataId(dataId: string | string[]): FilterBase<LineChart> {
-  return getDefaultFilter(dataId);
+  return getDefaultFilter({dataId});
 }
 
 export function filterDataByFilterTypes(
@@ -850,10 +855,7 @@ export function getTimeWidgetTitleFormatter(domain: [number, number]): string |
  */
 export function isFilterValidToSave(filter: any): boolean {
   return (
-    filter?.type &&
-    Array.isArray(filter?.name) &&
-    (filter?.name.length || filter?.layerId.length) &&
-    isValidFilterValue(filter?.type, filter?.value)
+    filter?.type && Array.isArray(filter?.name) && (filter?.name.length || filter?.layerId.length)
   );
 }
 
@@ -1099,7 +1101,7 @@ export function generatePolygonFilter<
   const dataId = layers.map(l => l.config.dataId).filter(notNullorUndefined);
   const layerId = layers.map(l => l.id);
   const name = layers.map(l => l.config.label);
-  const filter = getDefaultFilter(dataId);
+  const filter = getDefaultFilter({dataId});
   return {
     ...filter,
     fixedDomain: true,

src/utils/src/index.ts

@@ -100,7 +100,7 @@ export {snapToMarks} from './plot';
 export {transformRequest, isStyleUsingMapboxTiles} from './map-style-utils/mapbox-utils';
 
 // Map
-export {onViewPortChange, getMapLayersFromSplitMaps, getViewportFromMapState} from './map-utils';
+export * from './map-utils';
 
 export {createDataContainer, createIndexedDataContainer, getSampleData as getSampleContainerData} from './data-container-utils';
 export type {DataContainerInterface} from './data-container-interface';

test/node/reducers/vis-state-test.js

@@ -256,7 +256,7 @@ test('#visStateReducer', t => {
 
 test('#visStateReducer -> ADD_FILTER', t => {
   const dataId = 'kitten';
-  const newFilter = getDefaultFilter(dataId);
+  const newFilter = getDefaultFilter({dataId});
   const newReducer = reducer({filters: [mockFilter]}, VisStateActions.addFilter(dataId));
 
   const expectedReducer = {filters: [mockFilter, newFilter]};
@@ -2290,7 +2290,7 @@ test('#visStateReducer -> SET_FILTER.dataId', t => {
 
   let newFilter = newState.filters[1];
   let expectedFilter = {
-    ...getDefaultFilter(testCsvDataId),
+    ...getDefaultFilter({dataId: testCsvDataId}),
     id: newFilter.id
   };
 
@@ -2302,7 +2302,7 @@ test('#visStateReducer -> SET_FILTER.dataId', t => {
   newFilter = newState.filters[1];
 
   expectedFilter = {
-    ...getDefaultFilter(testCsvDataId),
+    ...getDefaultFilter({dataId: testCsvDataId}),
     id: newFilter.id
   };
 
@@ -2750,7 +2750,7 @@ test('#visStateReducer -> SET_FILTER_PLOT', t => {
   );
 
   const expectedFilterWName = {
-    ...getDefaultFilter('smoothie'),
+    ...getDefaultFilter({dataId: 'smoothie'}),
     freeze: true,
     fixedDomain: true,
     id: filterId,