Introduce slider varient for Dynamic filter #12268

web/client/components/widgets/builder/wizard/FilterWizard.jsx

@@ -57,6 +57,7 @@ const isFilterConfigValid = (editorData = {}) => {
 const FilterWizard = ({
     filterData = {},
     editorData = {},
+    selectableItems = [],
     onChange = () => {},
     onOpenLayerSelector = () => {},
     openFilterEditor = () => {},
@@ -74,7 +75,8 @@ const FilterWizard = ({
     onAddFilter = () => {},
     onDeleteFilter = () => {},
     onRenameFilter = () => {},
-    onSelectionChange = () => {}
+    onSelectionChange = () => {},
+    onSelectableItemsChange = () => {}
 }) => {
     const [activeTab, setActiveTab] = useState('data');
 
@@ -94,7 +96,7 @@ const FilterWizard = ({
 
     const tabContents = {
         data: <FilterDataTab data={filterData} onChange={onChange} onOpenLayerSelector={onOpenLayerSelector} openFilterEditor={openFilterEditor} onEditorChange={onEditorChange} dashBoardEditing={dashBoardEditing} selections={selections} />,
-        layout: <FilterLayoutTab data={filterData} onChange={onChange} selections={selections} onEditorChange={onEditorChange}  />,
+        layout: <FilterLayoutTab data={filterData} onChange={onChange} selections={selections} onEditorChange={onEditorChange} selectableItems={selectableItems}  />,
         actions: <FilterActionsTab data={filterData} onChange={onChange} onEditorChange={onEditorChange}  />
     };
 
@@ -108,6 +110,7 @@ const FilterWizard = ({
                     selections={selections}
                     getSelectionHandler={onSelectionChange}
                     selectedFilterId={selectedFilterId}
+                    onSelectableItemsChange={onSelectableItemsChange}
                 />
             </div>
             <FilterSelector
@@ -176,4 +179,3 @@ const FilterWizard = ({
 };
 
 export default FilterWizard;
-

web/client/components/widgets/builder/wizard/filter/FilterCheckboxList.jsx

@@ -47,8 +47,9 @@ const FilterCheckboxList = ({
     return (
         <FormGroup className="ms-filter-checkbox-list">
             <div className={containerClassName} style={containerStyle}>
-                {items.map(({ id, label, description, disabled }) => (
+                {items.map(({ id, label, description, disabled }, index) => (
                     <ControlComponent
+                        key={`${id}-${index}`}
                         inline={isInline}
                         checked={selectedValues.includes(id)}
                         onChange={() => handleToggle(id)}
@@ -85,4 +86,3 @@ FilterCheckboxList.propTypes = {
 
 export default FilterCheckboxList;
 
-

web/client/components/widgets/builder/wizard/filter/FilterChipList.jsx

@@ -70,11 +70,11 @@ const FilterChipList = ({
                 className="ms-filter-chip-list-items"
                 style={listStyle}
             >
-                {items.map(({ id, label, disabled }) => {
+                {items.map(({ id, label, disabled }, index) => {
                     const active = selectedValues.includes(id);
                     return (
                         <Text
-                            key={id}
+                            key={`${id}-${index}`}
                             component="li"
                             fontSize="sm"
                             role={isSingle ? 'radio' : 'checkbox'}
@@ -110,4 +110,3 @@ FilterChipList.propTypes = {
 
 export default FilterChipList;
 
-

web/client/components/widgets/builder/wizard/filter/FilterDataTab/components/AttributeSelector.jsx

@@ -65,7 +65,8 @@ AttributeSelector.propTypes = {
     value: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
     options: PropTypes.arrayOf(PropTypes.shape({
         value: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
-        label: PropTypes.string
+        label: PropTypes.string,
+        type: PropTypes.string
     })),
     onChange: PropTypes.func,
     placeholder: PropTypes.string,
@@ -77,4 +78,3 @@ AttributeSelector.propTypes = {
 };
 
 export default AttributeSelector;
-

web/client/components/widgets/builder/wizard/filter/FilterDataTab/components/FilterAttributesSection.jsx

@@ -56,11 +56,11 @@ const FilterAttributesSection = ({
     const isAttributeDisabled = !attributeOptions.length && !isLoading;
 
     const handleValueAttributeChange = (option) => {
-        onValueAttributeChange(option?.value);
+        onValueAttributeChange(option);
     };
 
     const handleLabelAttributeChange = (option) => {
-        onLabelAttributeChange(option?.value);
+        onLabelAttributeChange(option);
     };
 
     const handleSortByAttributeChange = (option) => {
@@ -153,4 +153,3 @@ FilterAttributesSection.propTypes = {
 };
 
 export default FilterAttributesSection;
-

web/client/components/widgets/builder/wizard/filter/FilterDataTab/hooks/useFilterData.js

@@ -80,7 +80,9 @@ export const useFilterData = (data = {}) => {
 
         // Attributes
         const valueAttribute = filterData.valueAttribute ?? null;
+        const valueAttributeType = filterData.valueAttributeType ?? null;
         const labelAttribute = filterData.labelAttribute ?? null;
+        const labelAttributeType = filterData.labelAttributeType ?? null;
         const sortByAttribute = filterData.sortByAttribute ?? null;
         const sortOrder = filterData.sortOrder;
 
@@ -111,7 +113,9 @@ export const useFilterData = (data = {}) => {
 
             // Attributes
             valueAttribute,
+            valueAttributeType,
             labelAttribute,
+            labelAttributeType,
             sortByAttribute,
             sortOrder,
 
@@ -128,4 +132,3 @@ export const useFilterData = (data = {}) => {
         };
     }, [data]);
 };
-

web/client/components/widgets/builder/wizard/filter/FilterDataTab/hooks/useLayerAttributes.js

@@ -20,7 +20,8 @@ const getLayerKey = (layer, layerId = null) => {
 const mapAttributesToOptions = (attributes = []) => {
     return attributes.map(attribute => ({
         value: attribute.value || attribute.attribute || attribute.name,
-        label: attribute.label || attribute.alias || attribute.value || attribute.attribute || attribute.name
+        label: attribute.label || attribute.alias || attribute.value || attribute.attribute || attribute.name,
+        type: attribute.type
     }));
 };
 
@@ -110,4 +111,3 @@ export const useLayerAttributes = (selectedLayer, hasLayerSelection = false) =>
         error: attributesError
     };
 };
-

web/client/components/widgets/builder/wizard/filter/FilterDataTab/index.jsx

@@ -85,8 +85,17 @@ const FilterDataTab = ({
     }, [onEditorChange]);
 
     // Generic handlers using the factory function
-    const handleValueAttributeChange = createChangeHandler('data.valueAttribute');
-    const handleLabelAttributeChange = createChangeHandler('data.labelAttribute');
+    const handleValueAttributeChange = useCallback((option) => {
+        onChange('data.valueAttribute', option?.value);
+        onChange('data.valueAttributeType', option?.type);
+        if (!filterDataState.labelAttribute) {
+            onChange('data.labelAttributeType', option?.type);
+        }
+    }, [onChange, filterDataState.labelAttribute]);
+    const handleLabelAttributeChange = useCallback((option) => {
+        onChange('data.labelAttribute', option?.value);
+        onChange('data.labelAttributeType', option?.type);
+    }, [onChange]);
     const handleSortByAttributeChange = createChangeHandler('data.sortByAttribute');
     const handleSortOrderChange = createChangeHandler('data.sortOrder');
     const handleMaxFeaturesChange = createChangeHandler('data.maxFeatures');
@@ -207,4 +216,3 @@ FilterDataTab.propTypes = {
 };
 
 export default FilterDataTab;
-