Feature selection UI refactor

packages/react-ui/__tests__/widgets/FeatureSelectionWidgetUI.test.js

@@ -1,6 +1,6 @@
 import React from 'react';
 import { render, queryByAttribute, fireEvent } from '../widgets/utils/testUtils';
-import FeatureSelectionWidgetUI from '../../src/widgets/FeatureSelectionWidgetUI';
+import FeatureSelectionWidgetUI from '../../src/widgets/FeatureSelectionWidgetUI/FeatureSelectionWidgetUI';
 import { capitalize } from '@mui/material';
 import CursorIcon from '../../src/assets/icons/CursorIcon';
 import PolygonIcon from '../../src/assets/icons/PolygonIcon';
@@ -53,10 +53,10 @@ describe('FeatureSelectionWidgetUI', () => {
       render(
         <FeatureSelectionWidgetUI
           selectionModes={FEATURE_SELECTION_MODES}
-          selectedMode={'IInvented'}
+          selectedMode={'Invented'}
         />
       )
-    ).toThrowError('Selected mode not supported');
+    ).toThrowError('Selected mode "Invented" not supported');
   });
 
   test('activate selected mode event is correctly raised', () => {
@@ -109,7 +109,16 @@ describe('FeatureSelectionWidgetUI', () => {
     expect(onSelectMode).toHaveBeenCalledWith(anotherMode.id);
   });
 
-  const GEOMETRY = { geometry: 1 };
+  const GEOMETRY = {
+    type: 'Feature',
+    geometry: {
+      type: 'Point',
+      coordinates: [125.6, 10.1]
+    },
+    properties: {
+      name: 'Mask'
+    }
+  };
   test('geometry is rendered correctly', () => {
     const rendered = render(<CommonFeatureSelectionWidgetUI geometry={GEOMETRY} />);
     expect(rendered.getByText('Mask')).toBeDefined();

packages/react-ui/src/index.d.ts

@@ -21,7 +21,10 @@ import useTimeSeriesInteractivity from './widgets/TimeSeriesWidgetUI/hooks/useTi
 import { CHART_TYPES } from './widgets/TimeSeriesWidgetUI/utils/constants';
 import TableWidgetUI from './widgets/TableWidgetUI/TableWidgetUI';
 import NoDataAlert from './widgets/NoDataAlert';
-import FeatureSelectionWidgetUI from './widgets/FeatureSelectionWidgetUI';
+import FeatureSelectionWidgetUI from './widgets/FeatureSelectionWidgetUI/FeatureSelectionWidgetUI';
+import FeatureSelectionUIDropdown from './widgets/FeatureSelectionWidgetUI/FeatureSelectionUIDropdown';
+import FeatureSelectionUIGeometryChips from './widgets/FeatureSelectionWidgetUI/FeatureSelectionUIGeometryChips';
+import FeatureSelectionUIToggleButton from './widgets/FeatureSelectionWidgetUI/FeatureSelectionUIToggleButton';
 import ComparativePieWidgetUI from './widgets/comparative/ComparativePieWidgetUI';
 import ComparativeFormulaWidgetUI from './widgets/comparative/ComparativeFormulaWidgetUI/ComparativeFormulaWidgetUI';
 import ComparativeCategoryWidgetUI from './widgets/comparative/ComparativeCategoryWidgetUI/ComparativeCategoryWidgetUI';
@@ -71,6 +74,9 @@ export {
   RangeWidgetUI,
   ComparativePieWidgetUI,
   FeatureSelectionWidgetUI,
+  FeatureSelectionUIDropdown,
+  FeatureSelectionUIGeometryChips,
+  FeatureSelectionUIToggleButton,
   ComparativeFormulaWidgetUI,
   ComparativeCategoryWidgetUI,
   LEGEND_TYPES,

packages/react-ui/src/index.js

@@ -12,7 +12,10 @@ import LegendProportion from './widgets/legend/LegendProportion';
 import LegendRamp from './widgets/legend/LegendRamp';
 import ScatterPlotWidgetUI from './widgets/ScatterPlotWidgetUI/ScatterPlotWidgetUI';
 import TimeSeriesWidgetUI from './widgets/TimeSeriesWidgetUI/TimeSeriesWidgetUI';
-import FeatureSelectionWidgetUI from './widgets/FeatureSelectionWidgetUI';
+import FeatureSelectionWidgetUI from './widgets/FeatureSelectionWidgetUI/FeatureSelectionWidgetUI';
+import FeatureSelectionUIDropdown from './widgets/FeatureSelectionWidgetUI/FeatureSelectionUIDropdown';
+import FeatureSelectionUIGeometryChips from './widgets/FeatureSelectionWidgetUI/FeatureSelectionUIGeometryChips';
+import FeatureSelectionUIToggleButton from './widgets/FeatureSelectionWidgetUI/FeatureSelectionUIToggleButton';
 import RangeWidgetUI from './widgets/RangeWidgetUI/RangeWidgetUI';
 import ComparativeFormulaWidgetUI from './widgets/comparative/ComparativeFormulaWidgetUI/ComparativeFormulaWidgetUI';
 import ComparativeCategoryWidgetUI from './widgets/comparative/ComparativeCategoryWidgetUI/ComparativeCategoryWidgetUI';
@@ -61,6 +64,9 @@ export {
   PieWidgetUI,
   ScatterPlotWidgetUI,
   FeatureSelectionWidgetUI,
+  FeatureSelectionUIDropdown,
+  FeatureSelectionUIGeometryChips,
+  FeatureSelectionUIToggleButton,
   TimeSeriesWidgetUI,
   CHART_TYPES as TIME_SERIES_CHART_TYPES,
   TableWidgetUI,

packages/react-ui/src/types.d.ts

@@ -22,7 +22,6 @@ export type WrapperWidgetUI = {
 export type CategoryWidgetUIData = { name: number | string | boolean; value: number }[];
 export type CategoryWidgetUI = {
   data: CategoryWidgetUIData;
-  isLoading?: boolean;
   formatter?: Function;
   labels?: object;
   maxItems?: number;
@@ -158,20 +157,46 @@ export type NoDataAlert = {
 export type FeatureSelectionWidgetUIData = {
   id: string;
   label: string;
-  icon: React.ReactElement;
+  icon: React.ReactNode;
 };
 export type FeatureSelectionWidgetUI = {
+  selectionModes: FeatureSelectionWidgetUIData[];
+  editModes?: FeatureSelectionWidgetUIData[];
+  selectedMode: string;
+  onSelectMode?: Function;
+  enabled?: boolean;
+  onEnabledChange?: Function;
+  geometry?: GeoJSON.Feature;
+  onSelectGeometry?: Function;
+  onDeleteGeometry?: Function;
+  tooltipPlacement?: "bottom" | "left" | "right" | "top";
+};
+
+export type FeatureSelectionUIDropdown = {
   selectionModes: FeatureSelectionWidgetUIData[];
   editModes: FeatureSelectionWidgetUIData[];
   selectedMode: string;
   onSelectMode?: Function;
-  activated?: boolean;
-  onActivatedChange?: Function;
-  geometry?: any;
+  enabled?: boolean;
+  onEnabledChange?: Function;
+  tooltipPlacement?: "bottom" | "left" | "right" | "top";
+};
+export type FeatureSelectionUIGeometryChips = {
+  features: GeoJSON.Feature[];
   onSelectGeometry?: Function;
-  tooltipPlacement?: string;
-  className?: string;
-  sx?: SxProps<Theme>;
+  onDeleteGeometry?: Function;
+  chipTooltip?: string;
+  disabledChipTooltip?: string;
+  size?: 'small' | 'medium';
+  tooltipPlacement?: "bottom" | "left" | "right" | "top";
+};
+export type FeatureSelectionUIToggleButton = {
+  icon: React.ReactNode;
+  hoverTooltip?: string;
+  clickTooltip?: string;
+  enabled?: boolean;
+  onEnabledChange?: Function;
+  tooltipPlacement?: "bottom" | "left" | "right" | "top";
 };
 
 // Legends