[fix] filter fields based on timestamp (#2714)

- Syncable fields should only be timestamp
- Calculate bar width prevent .x0 of undefined crash

Signed-off-by: Ihor Dykhta <[email protected]>

src/components/src/common/histogram-plot.tsx

@@ -94,16 +94,18 @@ function HistogramPlotFactory() {
     );
 
     const barWidth = useMemo(() => {
-      const maxBins = max(groupKeys, key => {
-        if (histogramsByGroup[key].length > 1)
-          return (
-            (domain[1] - domain[0]) / (histogramsByGroup[key][1].x1 - histogramsByGroup[key][1].x0)
-          );
-        // TODO this part should be removed with follow ups
-        return (
-          (domain[1] - domain[0]) / (histogramsByGroup[key][0].x1 - histogramsByGroup[key][0].x0)
-        );
-      });
+      // find histogramsByGroup with max number of bins
+      const maxGroup = groupKeys.reduce((accu, key, idx) => {
+        if (histogramsByGroup[key].length > accu.length) {
+          return histogramsByGroup[key];
+        }
+        return accu;
+      }, histogramsByGroup[groupKeys[0]]);
+
+      // find the bin for measuring step
+      const stdBinIdx = maxGroup.length > 1 ? 1 : 0;
+      const xStep = maxGroup[stdBinIdx].x1 - maxGroup[stdBinIdx].x0;
+      const maxBins = (domain[1] - domain[0]) / xStep;
       if (!maxBins) return 0;
       return width / maxBins / groupKeys.length;
     }, [histogramsByGroup, domain, groupKeys, width]);

src/components/src/filters/filter-panels/filter-synced-dataset-panel.tsx

@@ -14,8 +14,6 @@ import FilterPanelHeaderFactory from '../../side-panel/filter-panel/filter-panel
 import SourceSelectorFactory from '../../side-panel/common/source-selector';
 import SourceDataSelectorFactory from '../../side-panel/common/source-data-selector';
 
-const TIME_FIELD_ANALYZER_TYPES = ['DATE', 'TIME', 'DATETIME'];
-
 const SyncedDatasetsArea = styled.div`
   display: grid;
   align-items: center;
@@ -50,7 +48,7 @@ function getDatasetsWithTimeField(datasets) {
 }
 
 function getTimeFields(dataset) {
-  return dataset.fields.filter(f => TIME_FIELD_ANALYZER_TYPES.includes(f.analyzerType));
+  return dataset.fields.filter(f => f.type === ALL_FIELD_TYPES.timestamp);
 }
 
 FilterSyncedDatasetPanelFactory.deps = [

src/components/src/filters/filter-panels/time-range-filter-panel.tsx

@@ -4,12 +4,10 @@
 import React, {useCallback, useMemo} from 'react';
 import TimeRangeFilterFactory from '../time-range-filter';
 import {Clock} from '../../common/icons';
-import FieldPanelWithFieldSelectFactory from './filter-panel-with-field-select';
 import {TimeRangeFilterPanelComponent} from './types';
 import {isSideFilter, getTimelineFromFilter} from '@kepler.gl/utils';
 import FilterPanelHeaderFactory from '../../side-panel/filter-panel/filter-panel-header';
 import PanelHeaderActionFactory from '../../side-panel/panel-header-action';
-import SourceDataSelectorFactory from '../../side-panel/common/source-data-selector';
 import FieldSelectorFactory from '../../common/field-selector';
 import {StyledFilterContent} from '../../common/styled-components';
 import {getSupportedFilterFields} from './new-filter-panel';
@@ -20,21 +18,17 @@ import FilterSyncedDatasetPanelFactory from './filter-synced-dataset-panel';
 const SYNC_FILTER_ID_LENGTH = 2;
 
 TimeRangeFilterPanelFactory.deps = [
-  FieldPanelWithFieldSelectFactory,
   TimeRangeFilterFactory,
   FilterPanelHeaderFactory,
-  SourceDataSelectorFactory,
   FieldSelectorFactory,
   PanelHeaderActionFactory,
   TimeSyncedFieldSelectorFactory,
   FilterSyncedDatasetPanelFactory
 ];
 
 function TimeRangeFilterPanelFactory(
-  FieldPanelWithFieldSelect: ReturnType<typeof FieldPanelWithFieldSelectFactory>,
   TimeRangeFilter: ReturnType<typeof TimeRangeFilterFactory>,
   FilterPanelHeader: ReturnType<typeof FilterPanelHeaderFactory>,
-  SourceDataSelector: ReturnType<typeof SourceDataSelectorFactory>,
   FieldSelector: ReturnType<typeof FieldSelectorFactory>,
   PanelHeaderAction: ReturnType<typeof PanelHeaderActionFactory>,
   TimeSyncedFieldSelector: ReturnType<typeof TimeSyncedFieldSelectorFactory>,