dp-widgets-framework 1.5.8 → 1.5.9

package/dist/index.esm.js

@@ -7,7 +7,7 @@ import * as LabelPrimitive from '@radix-ui/react-label';
 import { cva } from 'class-variance-authority';
 import * as SwitchPrimitives from '@radix-ui/react-switch';
 import * as SelectPrimitive from '@radix-ui/react-select';
-import { ChevronDown, ChevronUp, Check, AlertCircle, MoveUp, MoveDown, Trash2, Plus, Bot, Type, Layout, LayoutGrid, BarChart as BarChart$1, Filter, Search, ArrowUp, ArrowDown, ChevronRight, RefreshCw, Send, X, AlignVerticalSpaceAround, LineChart as LineChart$1, PieChart as PieChart$1, Table, FileText, SlidersHorizontal, Loader2, GripHorizontal, Edit, MessageCircleX, Edit2 } from 'lucide-react';
+import { ChevronDown, ChevronUp, Check, AlertCircle, MoveUp, MoveDown, Trash2, Plus, Bot, Type, Layout, LayoutGrid, BarChart as BarChart$1, Filter, Search, ArrowUp, ArrowDown, ChevronRight, RefreshCw, Send, Loader2, X, AlignVerticalSpaceAround, LineChart as LineChart$1, PieChart as PieChart$1, Table, FileText, SlidersHorizontal, GripHorizontal, Edit, MessageCircleX, Edit2 } from 'lucide-react';
 import * as ScrollAreaPrimitive from '@radix-ui/react-scroll-area';
 import { Slot } from '@radix-ui/react-slot';
 import { debounce as debounce$1 } from 'lodash';
@@ -39387,10 +39387,12 @@ function TableSelectionConfirmation({ ambiguousColumns, resolvedColumns, message
                                 }, className: "w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-primary-500", children: [jsxRuntimeExports.jsx("option", { value: "", children: "Select a table..." }), col.tables.map((table) => (jsxRuntimeExports.jsx("option", { value: table, children: table }, table)))] })] }, col.column))) }) }), jsxRuntimeExports.jsxs("div", { className: "flex gap-2 pt-3 border-t border-gray-200", children: [jsxRuntimeExports.jsx(Button, { onClick: onCancel, variant: "outline", className: "flex-1", children: "Cancel" }), jsxRuntimeExports.jsx(Button, { onClick: handleSubmit, disabled: !allSelected, className: "flex-1 bg-primary-600 hover:bg-primary-700 text-white disabled:bg-gray-400", children: "Confirm Selection" })] })] }));
 }
 function FiltersContent({ filterGroups, showHeader, onFilterChange, widget, appendMessage, query, isFirstLoad, widgetBackendUrl, widgetId, startLoadingTimeout, clearLoadingTimeout, filterState, onApplyFilters, isEditing = false, }) {
+    var _a;
     const hasCalledRef = useRef(false);
     const [expandedGroups, setExpandedGroups] = useState({});
     const [selectedFilters, setSelectedFilters] = useState({});
     const [searchQueries, setSearchQueries] = useState({});
+    const [isSubmitting, setIsSubmitting] = useState(false);
     const isEmpty = filterGroups.length === 0;
     const handleRefresh = async () => {
         if (query) {
@@ -39428,6 +39430,29 @@ function FiltersContent({ filterGroups, showHeader, onFilterChange, widget, appe
         });
         setExpandedGroups(initialExpanded);
     }, [filterGroups]);
+    // Initialize selected filters from widget.config.filters
+    useEffect(() => {
+        var _a;
+        if (((_a = widget.config) === null || _a === void 0 ? void 0 : _a.filters) && filterGroups.length > 0) {
+            const initialSelectedFilters = {};
+            Object.entries(widget.config.filters).forEach(([groupId, labels]) => {
+                const group = filterGroups.find(g => g.id === groupId);
+                if (group && Array.isArray(labels)) {
+                    // Convert labels back to option IDs
+                    const optionIds = labels
+                        .map(label => {
+                        const option = group.options.find(opt => opt.label === label);
+                        return option === null || option === void 0 ? void 0 : option.id;
+                    })
+                        .filter((id) => id !== undefined);
+                    if (optionIds.length > 0) {
+                        initialSelectedFilters[groupId] = optionIds;
+                    }
+                }
+            });
+            setSelectedFilters(initialSelectedFilters);
+        }
+    }, [(_a = widget.config) === null || _a === void 0 ? void 0 : _a.filters, filterGroups]);
     const toggleGroup = (groupId) => {
         setExpandedGroups((prev) => (Object.assign(Object.assign({}, prev), { [groupId]: !prev[groupId] })));
     };
@@ -39491,7 +39516,7 @@ function FiltersContent({ filterGroups, showHeader, onFilterChange, widget, appe
                                 if (onFilterChange) {
                                     onFilterChange({});
                                 }
-                            }, className: "py-1.5 text-sm font-medium text-primary-600 hover:text-primary-800 hover:bg-primary-50 rounded-md transition-colors px-2", children: "Clear All Filters" })) : (jsxRuntimeExports.jsx("div", {})), jsxRuntimeExports.jsx(Button, { onClick: () => {
+                            }, className: "py-1.5 text-sm font-medium text-primary-600 hover:text-primary-800 hover:bg-primary-50 rounded-md transition-colors px-2", children: "Clear All Filters" })) : (jsxRuntimeExports.jsx("div", {})), jsxRuntimeExports.jsx(Button, { onClick: async () => {
                                 // Convert option IDs back to original label values
                                 const filtersWithLabels = {};
                                 filterGroups.forEach((group) => {
@@ -39501,8 +39526,37 @@ function FiltersContent({ filterGroups, showHeader, onFilterChange, widget, appe
                                         return (option === null || option === void 0 ? void 0 : option.label) || optionId;
                                     });
                                 });
-                                onApplyFilters === null || onApplyFilters === void 0 ? void 0 : onApplyFilters(filtersWithLabels);
-                            }, disabled: isEditing, className: `${isEditing ? 'bg-gray-400 cursor-not-allowed' : 'bg-primary-600 hover:bg-primary-700'} text-white`, title: isEditing ? 'Save the layout first to apply filters' : '', children: "Apply Filters" })] }) })] }));
+                                // Call API to update widget config with filters
+                                if (widgetBackendUrl && widgetId) {
+                                    setIsSubmitting(true);
+                                    try {
+                                        const response = await fetch(`${widgetBackendUrl}/api/widgets/${widgetId}/config`, {
+                                            method: 'PATCH',
+                                            headers: {
+                                                'Content-Type': 'application/json',
+                                            },
+                                            body: JSON.stringify({
+                                                config: Object.assign(Object.assign({}, widget.config), { filters: filtersWithLabels }),
+                                            }),
+                                        });
+                                        if (!response.ok) {
+                                            throw new Error('Failed to update widget config');
+                                        }
+                                        // Call the onApplyFilters callback after successful API call
+                                        onApplyFilters === null || onApplyFilters === void 0 ? void 0 : onApplyFilters(filtersWithLabels);
+                                    }
+                                    catch (error) {
+                                        console.error('Error updating widget config:', error);
+                                    }
+                                    finally {
+                                        setIsSubmitting(false);
+                                    }
+                                }
+                                else {
+                                    // Fallback if no backend URL - just call the callback
+                                    onApplyFilters === null || onApplyFilters === void 0 ? void 0 : onApplyFilters(filtersWithLabels);
+                                }
+                            }, disabled: isEditing || isSubmitting, className: `${isEditing || isSubmitting ? 'bg-gray-400 cursor-not-allowed' : 'bg-primary-600 hover:bg-primary-700'} text-white`, title: isEditing ? 'Save the layout first to apply filters' : '', children: isSubmitting ? (jsxRuntimeExports.jsxs(jsxRuntimeExports.Fragment, { children: [jsxRuntimeExports.jsx(Loader2, { className: "mr-2 h-4 w-4 animate-spin" }), "Applying..."] })) : ('Apply Filters') })] }) })] }));
 }
 function CopilotKitFilters({ widget, showHeader, onFilterChange, onResetReady, widgetBackendUrl, datasetId, onApplyFilters, isEditing = false, }) {
     var _a, _b, _c, _d, _e, _f, _g, _h;

package/dist/index.js

@@ -39414,10 +39414,12 @@ function TableSelectionConfirmation({ ambiguousColumns, resolvedColumns, message
                                 }, className: "w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-primary-500", children: [jsxRuntimeExports.jsx("option", { value: "", children: "Select a table..." }), col.tables.map((table) => (jsxRuntimeExports.jsx("option", { value: table, children: table }, table)))] })] }, col.column))) }) }), jsxRuntimeExports.jsxs("div", { className: "flex gap-2 pt-3 border-t border-gray-200", children: [jsxRuntimeExports.jsx(Button, { onClick: onCancel, variant: "outline", className: "flex-1", children: "Cancel" }), jsxRuntimeExports.jsx(Button, { onClick: handleSubmit, disabled: !allSelected, className: "flex-1 bg-primary-600 hover:bg-primary-700 text-white disabled:bg-gray-400", children: "Confirm Selection" })] })] }));
 }
 function FiltersContent({ filterGroups, showHeader, onFilterChange, widget, appendMessage, query, isFirstLoad, widgetBackendUrl, widgetId, startLoadingTimeout, clearLoadingTimeout, filterState, onApplyFilters, isEditing = false, }) {
+    var _a;
     const hasCalledRef = React.useRef(false);
     const [expandedGroups, setExpandedGroups] = React.useState({});
     const [selectedFilters, setSelectedFilters] = React.useState({});
     const [searchQueries, setSearchQueries] = React.useState({});
+    const [isSubmitting, setIsSubmitting] = React.useState(false);
     const isEmpty = filterGroups.length === 0;
     const handleRefresh = async () => {
         if (query) {
@@ -39455,6 +39457,29 @@ function FiltersContent({ filterGroups, showHeader, onFilterChange, widget, appe
         });
         setExpandedGroups(initialExpanded);
     }, [filterGroups]);
+    // Initialize selected filters from widget.config.filters
+    React.useEffect(() => {
+        var _a;
+        if (((_a = widget.config) === null || _a === void 0 ? void 0 : _a.filters) && filterGroups.length > 0) {
+            const initialSelectedFilters = {};
+            Object.entries(widget.config.filters).forEach(([groupId, labels]) => {
+                const group = filterGroups.find(g => g.id === groupId);
+                if (group && Array.isArray(labels)) {
+                    // Convert labels back to option IDs
+                    const optionIds = labels
+                        .map(label => {
+                        const option = group.options.find(opt => opt.label === label);
+                        return option === null || option === void 0 ? void 0 : option.id;
+                    })
+                        .filter((id) => id !== undefined);
+                    if (optionIds.length > 0) {
+                        initialSelectedFilters[groupId] = optionIds;
+                    }
+                }
+            });
+            setSelectedFilters(initialSelectedFilters);
+        }
+    }, [(_a = widget.config) === null || _a === void 0 ? void 0 : _a.filters, filterGroups]);
     const toggleGroup = (groupId) => {
         setExpandedGroups((prev) => (Object.assign(Object.assign({}, prev), { [groupId]: !prev[groupId] })));
     };
@@ -39518,7 +39543,7 @@ function FiltersContent({ filterGroups, showHeader, onFilterChange, widget, appe
                                 if (onFilterChange) {
                                     onFilterChange({});
                                 }
-                            }, className: "py-1.5 text-sm font-medium text-primary-600 hover:text-primary-800 hover:bg-primary-50 rounded-md transition-colors px-2", children: "Clear All Filters" })) : (jsxRuntimeExports.jsx("div", {})), jsxRuntimeExports.jsx(Button, { onClick: () => {
+                            }, className: "py-1.5 text-sm font-medium text-primary-600 hover:text-primary-800 hover:bg-primary-50 rounded-md transition-colors px-2", children: "Clear All Filters" })) : (jsxRuntimeExports.jsx("div", {})), jsxRuntimeExports.jsx(Button, { onClick: async () => {
                                 // Convert option IDs back to original label values
                                 const filtersWithLabels = {};
                                 filterGroups.forEach((group) => {
@@ -39528,8 +39553,37 @@ function FiltersContent({ filterGroups, showHeader, onFilterChange, widget, appe
                                         return (option === null || option === void 0 ? void 0 : option.label) || optionId;
                                     });
                                 });
-                                onApplyFilters === null || onApplyFilters === void 0 ? void 0 : onApplyFilters(filtersWithLabels);
-                            }, disabled: isEditing, className: `${isEditing ? 'bg-gray-400 cursor-not-allowed' : 'bg-primary-600 hover:bg-primary-700'} text-white`, title: isEditing ? 'Save the layout first to apply filters' : '', children: "Apply Filters" })] }) })] }));
+                                // Call API to update widget config with filters
+                                if (widgetBackendUrl && widgetId) {
+                                    setIsSubmitting(true);
+                                    try {
+                                        const response = await fetch(`${widgetBackendUrl}/api/widgets/${widgetId}/config`, {
+                                            method: 'PATCH',
+                                            headers: {
+                                                'Content-Type': 'application/json',
+                                            },
+                                            body: JSON.stringify({
+                                                config: Object.assign(Object.assign({}, widget.config), { filters: filtersWithLabels }),
+                                            }),
+                                        });
+                                        if (!response.ok) {
+                                            throw new Error('Failed to update widget config');
+                                        }
+                                        // Call the onApplyFilters callback after successful API call
+                                        onApplyFilters === null || onApplyFilters === void 0 ? void 0 : onApplyFilters(filtersWithLabels);
+                                    }
+                                    catch (error) {
+                                        console.error('Error updating widget config:', error);
+                                    }
+                                    finally {
+                                        setIsSubmitting(false);
+                                    }
+                                }
+                                else {
+                                    // Fallback if no backend URL - just call the callback
+                                    onApplyFilters === null || onApplyFilters === void 0 ? void 0 : onApplyFilters(filtersWithLabels);
+                                }
+                            }, disabled: isEditing || isSubmitting, className: `${isEditing || isSubmitting ? 'bg-gray-400 cursor-not-allowed' : 'bg-primary-600 hover:bg-primary-700'} text-white`, title: isEditing ? 'Save the layout first to apply filters' : '', children: isSubmitting ? (jsxRuntimeExports.jsxs(jsxRuntimeExports.Fragment, { children: [jsxRuntimeExports.jsx(lucideReact.Loader2, { className: "mr-2 h-4 w-4 animate-spin" }), "Applying..."] })) : ('Apply Filters') })] }) })] }));
 }
 function CopilotKitFilters({ widget, showHeader, onFilterChange, onResetReady, widgetBackendUrl, datasetId, onApplyFilters, isEditing = false, }) {
     var _a, _b, _c, _d, _e, _f, _g, _h;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "dp-widgets-framework",
-  "version": "1.5.8",
+  "version": "1.5.9",
   "private": false,
   "publishConfig": {
     "registry": "https://registry.npmjs.org"