[Enhancement] Synced filter small tuneup to synced filter panel (#2715)

- small tuneup to synced filter panel - Added regression test for the applyFilterFieldName fix - Remove unnecessary import Signed-off-by: Ihor Dykhta <[email protected]>
keplergl · Oct 28, 2024 · 0b6f320 · 0b6f320
1 parent caf6e48
commit 0b6f320
Show file tree

Hide file tree

Showing 3 changed files with 56 additions and 29 deletions.
diff --git a/src/components/src/filters/filter-panels/filter-synced-dataset-panel.tsx b/src/components/src/filters/filter-panels/filter-synced-dataset-panel.tsx
@@ -33,6 +33,7 @@ const StyledSeparator = styled.div`
 `;
 
 const StyledButton = styled(Button)`
+  margin-top: 2px;
   padding: 2px;
 `;
 
@@ -138,7 +139,7 @@ function FilterSyncedDatasetPanelFactory(SourceSelector, FilterPanelHeader, Sour
                       onFieldSelector={field => onFieldSelector(field, index)}
                     />
                   </StyledFilterPanelHeader>
-                  {index + 1 < list.length && <StyledSeparator />}
+                  <StyledSeparator />
                 </div>
               );
             })}

diff --git a/src/components/src/side-panel/common/source-selector.tsx b/src/components/src/side-panel/common/source-selector.tsx
@@ -14,22 +14,24 @@ const StyledSourceContainer = styled.div`
 SourceSelectorFactory.deps = [SourceDataSelectorContentFactory, FieldSelectorFactory];
 
 function SourceSelectorFactory(SourceDataSelectorContent, FieldSelector) {
-  const StyledFieldSelector = styled(FieldSelector)`
-    -webkit-border-bottom-right-radius: 4px;
-    -webkit-border-bottom-left-radius: 4px;
-    -moz-border-radius-bottomright: 4px;
-    -moz-border-radius-bottomleft: 4px;
-    border-bottom-right-radius: 4px;
-    border-bottom-left-radius: 4px;
+  const StyledSourceDataSelectorContent = styled.div`
+    margin-bottom: 2px;
+
+    .item-selector__dropdown {
+      border-top-left-radius: 2px;
+      border-top-right-radius: 2px;
+      border-bottom-left-radius: 0;
+      border-bottom-right-radius: 0;
+    }
   `;
 
-  const StyledSourceDataSelectorContent = styled(SourceDataSelectorContent)`
-    -webkit-border-top-left-radius: 4px;
-    -webkit-border-top-right-radius: 4px;
-    -moz-border-radius-topleft: 4px;
-    -moz-border-radius-topright: 4px;
-    border-top-left-radius: 4px;
-    border-top-right-radius: 4px;
+  const StyledFieldSelector = styled.div`
+    .item-selector__dropdown {
+      border-top-left-radius: 0;
+      border-top-right-radius: 0;
+      border-bottom-left-radius: 2px;
+      border-bottom-right-radius: 2px;
+    }
   `;
 
   const SourceSelector = ({
@@ -49,21 +51,25 @@ function SourceSelectorFactory(SourceDataSelectorContent, FieldSelector) {
 
     return (
       <StyledSourceContainer className={className}>
-        <StyledSourceDataSelectorContent
-          inputTheme={inputTheme}
-          datasets={datasets}
-          disabled={disabled}
-          dataId={dataId}
-          onSelect={onSelectDataset}
-        />
-        {dataId && (
-          <StyledFieldSelector
+        <StyledSourceDataSelectorContent>
+          <SourceDataSelectorContent
             inputTheme={inputTheme}
-            fields={datasetFields}
-            value={fieldValue}
-            erasable={false}
-            onSelect={onFieldSelector}
+            datasets={datasets}
+            disabled={disabled}
+            dataId={dataId}
+            onSelect={onSelectDataset}
           />
+        </StyledSourceDataSelectorContent>
+        {dataId && (
+          <StyledFieldSelector>
+            <FieldSelector
+              inputTheme={inputTheme}
+              fields={datasetFields}
+              value={fieldValue}
+              erasable={false}
+              onSelect={onFieldSelector}
+            />
+          </StyledFieldSelector>
         )}
       </StyledSourceContainer>
     );

diff --git a/test/node/reducers/vis-state-test.js b/test/node/reducers/vis-state-test.js
@@ -24,7 +24,12 @@ import {
 import {processCsvData, processGeojson} from '@kepler.gl/processors';
 import {Layer, KeplerGlLayers, COLUMN_MODE_TABLE} from '@kepler.gl/layers';
 import {createNewDataEntry, maybeToDate} from '@kepler.gl/table';
-import {createDataContainer, getDefaultFilter, histogramFromDomain} from '@kepler.gl/utils';
+import {
+  createDataContainer,
+  applyFilterFieldName,
+  getDefaultFilter,
+  histogramFromDomain
+} from '@kepler.gl/utils';
 import {
   ALL_FIELD_TYPES,
   EDITOR_MODES,
@@ -5742,6 +5747,21 @@ test('#visStateReducer -> layerFilteredItemsChange', t => {
   t.end();
 });
 
+test('#visStateReducer -> applyFilterFieldName', t => {
+  const stateToSave = CloneDeep(StateWFilters);
+
+  const oldFilter = stateToSave.visState.filters[0];
+  const dataset = stateToSave.visState.datasets[oldFilter.dataId];
+  const {filter: newFilter} = applyFilterFieldName(oldFilter, dataset, oldFilter.name[0]);
+  t.deepEqual(
+    oldFilter.plotType,
+    newFilter.plotType,
+    'Should not overwrite plotType (by the default empty object)'
+  );
+
+  t.end();
+});
+
 test('VisStateUpdater -> prepareStateForDatasetReplace', t => {
   const oldTooltipConfigFields =
     StateWFilters.visState.interactionConfig.tooltip.config.fieldsToShow;