@quillsql/react 2.13.2 → 2.13.4

package/dist/esm/SQLEditor.js

@@ -100,11 +100,12 @@ export default function SQLEditor({ ButtonComponent = MemoizedButton, SecondaryB
     const [isAddLoading, setIsAddLoading] = useState(false);
     const [isChartBuilderOpen, setIsChartBuilderOpen] = useState(false);
     const [displayTable, setDisplayTable] = useState(false);
+    const [formattedRows, setFormattedRows] = useState([]);
     const formRef = useRef(null);
     const sidebarRef = useRef(null);
     const [searchBarWidth, setSearchBarWidth] = useState(200);
+    const [showSearchBar, setShowSearchBar] = useState(false);
     const [filterBarWidth, setFilterBarWidth] = useState(200);
-    const [formattedRows, setFormattedRows] = useState([]);
     const [rowCount, setRowCount] = useState(undefined);
     const [rowCountIsLoading, setRowCountIsLoading] = useState(false);
     const [maxPage, setMaxPage] = useState(1);
@@ -114,12 +115,12 @@ export default function SQLEditor({ ButtonComponent = MemoizedButton, SecondaryB
         ...EMPTY_INTERNAL_REPORT,
         ...report,
     });
-    const DEFAULT_ROWS_PER_PAGE = 10;
+    const tableRef = useRef(null);
+    const DEFAULT_ROWS_PER_PAGE = 5;
     const ROW_HEIGHT = 37;
     const TABLE_TAB_HEIGHT = 75;
-    const dynamicHeight = window.innerHeight * 0.8 - 310;
-    const rowsPerPage = Math.max(DEFAULT_ROWS_PER_PAGE, Math.floor((dynamicHeight - TABLE_TAB_HEIGHT) / ROW_HEIGHT));
-    const calculatedHeight = TABLE_TAB_HEIGHT + rowsPerPage * ROW_HEIGHT; // height needs to be 75 + rows * rowheight <= window.innerHeight * 0.8 - 330
+    const dynamicHeight = tableRef.current ? tableRef.current.clientHeight : 0;
+    const rowsPerPage = Math.max(DEFAULT_ROWS_PER_PAGE, Math.ceil((dynamicHeight - TABLE_TAB_HEIGHT) / ROW_HEIGHT));
     const pagination = {
         page: 0,
         rowsPerPage,
@@ -145,6 +146,7 @@ export default function SQLEditor({ ButtonComponent = MemoizedButton, SecondaryB
         function handleResize() {
             updateFirstChildWidth(formRef, setSearchBarWidth, { gap: 12 });
             updateFirstChildWidth(sidebarRef, setFilterBarWidth, { gap: 12 });
+            setShowSearchBar(true);
         }
         handleResize();
         window.addEventListener('resize', handleResize);
@@ -313,6 +315,9 @@ export default function SQLEditor({ ButtonComponent = MemoizedButton, SecondaryB
             onChangeQuery(query || '');
         }
     }, [query]);
+    if (schemaData.isSchemaLoading) {
+        return _jsx(LoadingComponent, {});
+    }
     return (_jsxs("div", { style: { backgroundColor: theme?.backgroundColor, ...containerStyle }, className: className, children: [(!isChartBuilderHorizontalView ||
                 (isChartBuilderHorizontalView && !isChartBuilderOpen)) &&
                 !schemaData.isSchemaLoading && (_jsx("div", { style: {
@@ -360,14 +365,15 @@ export default function SQLEditor({ ButtonComponent = MemoizedButton, SecondaryB
                                                         handleRunSqlPrompt();
                                                     }, style: {
                                                         display: 'flex',
+                                                        visibility: showSearchBar ? 'visible' : 'hidden',
                                                         flexDirection: 'row',
                                                         gap: 12,
                                                         paddingTop: 16,
                                                         paddingBottom: 16,
                                                     }, children: [_jsx(TextInputComponent, { id: "ai-search", value: sqlPrompt, width: searchBarWidth, onChange: (e) => setSqlPrompt(e.target.value), placeholder: "Ask a question..." }), _jsx(ButtonComponent, { onClick: handleRunSqlPrompt, label: "Ask AI" })] }), _jsx("div", { style: {
-                                                        minHeight: Math.max(210, window.innerHeight * 0.2),
+                                                        minHeight: 'max(210px, 20vh)',
                                                         maxHeight: '30%',
-                                                        height: window.innerHeight * 0.2,
+                                                        height: '20vh',
                                                     }, children: _jsx(SQLEditorComponent, { query: query || '', schema: schemaData.schema, databaseType: client?.databaseType ?? 'postgresql', clientName: client?.publicKey || '', setQuery: setQuery, handleRunQuery: () => {
                                                             handleRunQuery(currentProcessing, true);
                                                         }, handleFixWithAI: handleFixWithAI, isNewQueryEnabled: isNewQueryEnabled, runQueryOnMount: runQueryOnMount, handleClearQuery: handleClearQuery, theme: theme, defineEditorTheme: defineEditorTheme, setEditorTheme: setEditorTheme, setEditorMounted: () => { }, ButtonComponent: ButtonComponent, SecondaryButtonComponent: SecondaryButtonComponent, loading: sqlResponseLoading && schemaData.isSchemaLoading, LoadingComponent: LoadingComponent }) }), _jsx("div", { style: {
@@ -428,10 +434,11 @@ export default function SQLEditor({ ButtonComponent = MemoizedButton, SecondaryB
                                                                     width: '100%',
                                                                     alignItems: 'center',
                                                                 }, children: [errorMessage, errorMessage !== 'No data found' &&
-                                                                        errorMessage !== 'No query found' && (_jsx(SecondaryButtonComponent, { onClick: handleFixWithAI, label: "Fix with AI" }))] }) })), errorMessage || !displayTable ? null : (_jsx(TableComponent, { isLoading: sqlQueryLoading && !isAddLoading, rows: formattedRows, columns: columns, rowCount: rowCount, rowsPerPage: rowsPerPage, rowCountIsLoading: rowCountIsLoading, onPageChange: onPageChange, onSortChange: onSortChange, containerStyle: {
-                                                                height: calculatedHeight,
-                                                                maxHeight: calculatedHeight,
-                                                            }, currentPage: currentPage, setCurrentPage: setCurrentPage }))] })] }) }), isChartBuilderEnabled && (_jsxs("div", { style: {
+                                                                        errorMessage !== 'No query found' && (_jsx(SecondaryButtonComponent, { onClick: handleFixWithAI, label: "Fix with AI" }))] }) })), errorMessage || !displayTable ? null : (_jsx("div", { ref: tableRef, children: _jsx(TableComponent, { isLoading: sqlQueryLoading && !isAddLoading, rows: formattedRows, columns: columns, rowCount: rowCount, rowsPerPage: rowsPerPage, rowCountIsLoading: rowCountIsLoading, onPageChange: onPageChange, onSortChange: onSortChange, containerStyle: {
+                                                                    height: 'calc(100vh - max(210px, 20vh) - 310px)',
+                                                                    minHeight: `calc(${DEFAULT_ROWS_PER_PAGE} * ${ROW_HEIGHT}px + ${TABLE_TAB_HEIGHT}px)`, // at least 10 rows tall
+                                                                    maxHeight: 'calc(100vh - max(210px, 20vh) - 310px)',
+                                                                }, currentPage: currentPage, setCurrentPage: setCurrentPage }) }))] })] }) }), isChartBuilderEnabled && (_jsxs("div", { style: {
                                             display: 'flex',
                                             flexDirection: 'row',
                                             alignItems: 'center',

package/dist/esm/Table.js

@@ -197,7 +197,7 @@ const ChartUpdater = ({ reportId, containerStyle, className, dashboardContext, c
                             if (f.field === filter.field ||
                                 (f.filterType === 'date_range' &&
                                     filter.filterType === 'date_range')) {
-                                return updateFilter(f, value, comparison);
+                                return updateFilter(f, value, comparison, f.dashboardName);
                             }
                             return f;
                         });

package/dist/esm/components/Dashboard/DashboardFilter.js

@@ -83,7 +83,7 @@ export function DashboardFilter({ filter, onChangeFilter, SelectComponent = Quil
                                 whiteSpace: 'nowrap',
                                 minWidth: 80,
                                 justifyContent: 'center',
-                            }, children: "compared to" }), _jsx(SelectComponent, { value: filter.comparisonRange?.value, onChange: (e) => {
+                            }, children: "compared to" }), _jsx(SelectComponent, { value: filter.comparisonRange?.value ?? 'NO_COMPARISON', onChange: (e) => {
                                 onChangeFilter(filter, null, COMPARISON_OPTIONS.find((option) => option.value === e.target.value));
                             }, options: COMPARISON_OPTIONS.map((compareOption) => ({
                                 value: compareOption.value,

package/dist/esm/components/Dashboard/DataLoader.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"DataLoader.d.ts","sourceRoot":"","sources":["../../../../src/components/Dashboard/DataLoader.tsx"],"names":[],"mappings":";AAOA,OAAO,EAAE,WAAW,EAAuB,MAAM,qBAAqB,CAAC;AACvE,OAAO,EAAE,UAAU,EAAE,MAAM,qBAAqB,CAAC;AAajD,OAAO,EACL,oBAAoB,EAErB,MAAM,6BAA6B,CAAC;AAuBrC,MAAM,MAAM,oBAAoB,GAAG;IACjC,SAAS,EAAE,OAAO,CAAC;IACnB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,YAAY,EAAE,CAAC,IAAI,EAAE,MAAM,KAAK,IAAI,CAAC;IACrC,YAAY,EAAE,CAAC,IAAI,EAAE;QAAE,KAAK,EAAE,MAAM,CAAC;QAAC,SAAS,EAAE,MAAM,CAAA;KAAE,KAAK,IAAI,CAAC;IACnE,IAAI,EAAE,WAAW,CAAC;IAClB,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,iBAAiB,CAAC,EAAE,OAAO,CAAC;CAC7B,CAAC;AAkCF,MAAM,CAAC,OAAO,UAAU,UAAU,CAAC,EACjC,IAAI,EACJ,QAAQ,EACR,OAAO,EACP,oBAAoB,EAAE,2BAA2B,GAClD,EAAE;IACD,IAAI,EAAE,WAAW,CAAC;IAClB,OAAO,EAAE,GAAG,EAAE,GAAG,IAAI,CAAC;IACtB,oBAAoB,EAAE,oBAAoB,CAAC;IAC3C,QAAQ,EAAE,CAAC,EACT,SAAS,EACT,KAAK,EACL,YAAY,EACZ,YAAY,EACZ,IAAI,GACL,EAAE,oBAAoB,KAAK,GAAG,CAAC,OAAO,CAAC;CACzC,GAAG,GAAG,CAAC,OAAO,CAyLd;AAED,KAAK,YAAY,GAAG;IAClB,CAAC,GAAG,EAAE,MAAM,GAAG;QACb,OAAO,EAAE,MAAM,CAAC;QAChB,UAAU,CAAC,EAAE,MAAM,CAAC;QACpB,oBAAoB,CAAC,EAAE,MAAM,CAAC;QAC9B,mBAAmB,CAAC,EAAE,MAAM,CAAC;QAC7B,uBAAuB,CAAC,EAAE,MAAM,CAAC;QACjC,sBAAsB,CAAC,EAAE,MAAM,CAAC;KACjC,CAAC;CACH,CAAC;AAEF,MAAM,MAAM,yBAAyB,GAAG;IACtC,SAAS,EAAE,OAAO,CAAC;IACnB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,IAAI,EAAE,WAAW,CAAC;IAClB,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,iBAAiB,CAAC,EAAE,OAAO,CAAC;CAC7B,CAAC;AAIF,eAAO,MAAM,eAAe;UAOpB,WAAW;;mCAGN,WAAW,UACZ,UAAU,KACf,YAAY;0BACK,oBAAoB;aACjC,GAAG,EAAE,GAAG,IAAI;qFAQlB,yBAAyB,KAAK,WAAW;MAC1C,WAmFH,CAAC"}
+{"version":3,"file":"DataLoader.d.ts","sourceRoot":"","sources":["../../../../src/components/Dashboard/DataLoader.tsx"],"names":[],"mappings":";AAOA,OAAO,EAAE,WAAW,EAAuB,MAAM,qBAAqB,CAAC;AACvE,OAAO,EAAE,UAAU,EAAE,MAAM,qBAAqB,CAAC;AAajD,OAAO,EACL,oBAAoB,EAErB,MAAM,6BAA6B,CAAC;AAuBrC,MAAM,MAAM,oBAAoB,GAAG;IACjC,SAAS,EAAE,OAAO,CAAC;IACnB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,YAAY,EAAE,CAAC,IAAI,EAAE,MAAM,KAAK,IAAI,CAAC;IACrC,YAAY,EAAE,CAAC,IAAI,EAAE;QAAE,KAAK,EAAE,MAAM,CAAC;QAAC,SAAS,EAAE,MAAM,CAAA;KAAE,KAAK,IAAI,CAAC;IACnE,IAAI,EAAE,WAAW,CAAC;IAClB,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,iBAAiB,CAAC,EAAE,OAAO,CAAC;CAC7B,CAAC;AAoCF,MAAM,CAAC,OAAO,UAAU,UAAU,CAAC,EACjC,IAAI,EACJ,QAAQ,EACR,OAAO,EACP,oBAAoB,EAAE,2BAA2B,GAClD,EAAE;IACD,IAAI,EAAE,WAAW,CAAC;IAClB,OAAO,EAAE,GAAG,EAAE,GAAG,IAAI,CAAC;IACtB,oBAAoB,EAAE,oBAAoB,CAAC;IAC3C,QAAQ,EAAE,CAAC,EACT,SAAS,EACT,KAAK,EACL,YAAY,EACZ,YAAY,EACZ,IAAI,GACL,EAAE,oBAAoB,KAAK,GAAG,CAAC,OAAO,CAAC;CACzC,GAAG,GAAG,CAAC,OAAO,CAiPd;AAED,KAAK,YAAY,GAAG;IAClB,CAAC,GAAG,EAAE,MAAM,GAAG;QACb,OAAO,EAAE,MAAM,CAAC;QAChB,UAAU,CAAC,EAAE,MAAM,CAAC;QACpB,oBAAoB,CAAC,EAAE,MAAM,CAAC;QAC9B,mBAAmB,CAAC,EAAE,MAAM,CAAC;QAC7B,uBAAuB,CAAC,EAAE,MAAM,CAAC;QACjC,sBAAsB,CAAC,EAAE,MAAM,CAAC;KACjC,CAAC;CACH,CAAC;AAEF,MAAM,MAAM,yBAAyB,GAAG;IACtC,SAAS,EAAE,OAAO,CAAC;IACnB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,IAAI,EAAE,WAAW,CAAC;IAClB,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,iBAAiB,CAAC,EAAE,OAAO,CAAC;CAC7B,CAAC;AAIF,eAAO,MAAM,eAAe;UAOpB,WAAW;;mCAGN,WAAW,UACZ,UAAU,KACf,YAAY;0BACK,oBAAoB;aACjC,GAAG,EAAE,GAAG,IAAI;qFAQlB,yBAAyB,KAAK,WAAW;MAC1C,WAmGH,CAAC"}

package/dist/esm/components/Dashboard/DataLoader.js

@@ -48,7 +48,9 @@ function filterValuesEquivalent(filters1, filters2) {
             mappedFilters1[key].table !== mappedFilters2[key]?.table ||
             mappedFilters1[key].filterType !== mappedFilters2[key]?.filterType ||
             mappedFilters1[key].startDate !== mappedFilters2[key]?.startDate ||
-            mappedFilters1[key].endDate !== mappedFilters2[key]?.endDate) {
+            mappedFilters1[key].endDate !== mappedFilters2[key]?.endDate ||
+            mappedFilters1[key].comparisonRange !==
+                mappedFilters2[key]?.comparisonRange) {
             return false;
         }
     }
@@ -66,21 +68,44 @@ export default function DataLoader({ item, children, filters, additionalProcessi
     const previousFilters = useRef(null);
     const [rowCount, setRowCount] = useState(dashboard[item.id]?.rowCount ?? 0);
     const [rowCountIsLoading, setRowCountIsLoading] = useState(false);
+    const rowsRequestId = useRef(0);
+    const rowsAbortController = useRef(null);
+    const rowCountRequestId = useRef(0);
+    const rowCountAbortController = useRef(null);
+    const updateTableRowsRequestId = useRef(0);
+    const updateTableRowsAbortController = useRef(null);
     const fetchRowCount = async (processing) => {
         if (!client || !filters) {
             return;
         }
+        const fetchReportRowCountRequestId = rowCountRequestId.current + 1;
+        rowCountRequestId.current = fetchReportRowCountRequestId;
         setRowCountIsLoading(true);
-        const rowCount = await fetchReportRowCount(item.id, client, true, filters, processing, schemaData.customFields);
-        if (rowCount) {
-            dispatch({
-                type: 'UPDATE_DASHBOARD_ITEM',
-                id: item.id,
-                data: { rowCount },
-            });
-            setRowCount(rowCount);
+        rowCountAbortController.current?.abort();
+        rowCountAbortController.current = new AbortController();
+        try {
+            const rowCount = await fetchReportRowCount(item.id, client, true, filters, processing, schemaData.customFields, rowCountAbortController.current.signal);
+            rowCountAbortController.current = null;
+            if (rowCount) {
+                dispatch({
+                    type: 'UPDATE_DASHBOARD_ITEM',
+                    id: item.id,
+                    data: { rowCount },
+                });
+                setRowCount(rowCount);
+            }
+        }
+        catch (e) {
+            if (e instanceof Error && e.name === 'AbortError') {
+                // console.log('Aborted fetching row count');
+                return;
+            }
+        }
+        finally {
+            if (fetchReportRowCountRequestId === rowCountRequestId.current) {
+                setRowCountIsLoading(false);
+            }
         }
-        setRowCountIsLoading(false);
     };
     const onPageChange = (page) => {
         if (additionalProcessing &&
@@ -99,10 +124,10 @@ export default function DataLoader({ item, children, filters, additionalProcessi
         }
     };
     const onSortChange = (sort) => {
-        if (shouldSortInMemory(DEFAULT_PAGINATION, report.rowCount, !!report.pivot)) {
+        if (shouldSortInMemory(additionalProcessing.page ?? DEFAULT_PAGINATION, report.rowCount, !!report.pivot)) {
             return;
         }
-        const updatedProcessing = { page: DEFAULT_PAGINATION, sort };
+        const updatedProcessing = { page: additionalProcessing.page, sort };
         fetchReportHelper(additionalProcessing);
         updateTableRows(updatedProcessing, true);
         setPreviousPage(0);
@@ -112,10 +137,15 @@ export default function DataLoader({ item, children, filters, additionalProcessi
             return;
         }
         if (!loading) {
+            const fetchUpdateTableRowsRequestId = updateTableRowsRequestId.current + 1;
+            updateTableRowsRequestId.current = fetchUpdateTableRowsRequestId;
             setLoading(true);
             try {
+                updateTableRowsAbortController.current?.abort();
+                updateTableRowsAbortController.current = new AbortController();
                 const updatedProcessing = { ...additionalProcessing, ...processing };
-                const paginatedRows = await fetchResultsByReport(report.id, client, updatedProcessing, filters, schemaData.customFields, true);
+                const paginatedRows = await fetchResultsByReport(report.id, client, updatedProcessing, filters, schemaData.customFields, true, undefined, updateTableRowsAbortController.current.signal);
+                updateTableRowsAbortController.current = null;
                 if (paginatedRows.error) {
                     throw new Error('Error fetching chart');
                 }
@@ -125,11 +155,14 @@ export default function DataLoader({ item, children, filters, additionalProcessi
                 }
                 setReport({ ...report, rows: tempRows });
                 setAdditionProcessing(updatedProcessing);
-                setLoading(false);
             }
             catch (e) {
                 console.log(e);
-                setLoading(false);
+            }
+            finally {
+                if (fetchUpdateTableRowsRequestId === updateTableRowsRequestId.current) {
+                    setLoading(false);
+                }
             }
         }
     };
@@ -149,19 +182,38 @@ export default function DataLoader({ item, children, filters, additionalProcessi
             setReport(convertedReport);
             return;
         }
+        const fetchRowsRequestId = rowsRequestId.current + 1;
+        rowsRequestId.current = fetchRowsRequestId;
         setLoading(true);
-        const { report: fetchedReport, error } = await fetchReport(item.id, client, true, filters, processing, undefined, schemaData.customFields, true);
-        dispatch({
-            type: 'ADD_DASHBOARD_ITEM',
-            id: item.id,
-            data: { ...fetchedReport, triggerReload: false, rowCount: 0 }, // rowCount 0 indicates it's still loading if row length is nonzero
-        });
-        fetchRowCount(processing);
-        const convertedReport = convertInternalReportToReport(fetchedReport);
-        setReport(convertedReport);
-        setAdditionProcessing(processing);
-        setError(error);
-        setLoading(false);
+        console.log('fetching', item.id, filters);
+        rowsAbortController.current?.abort();
+        rowsAbortController.current = new AbortController();
+        try {
+            const { report: fetchedReport, error } = await fetchReport(item.id, client, true, filters, processing, undefined, schemaData.customFields, true, false, rowsAbortController.current.signal);
+            rowsAbortController.current = null;
+            dispatch({
+                type: 'ADD_DASHBOARD_ITEM',
+                id: item.id,
+                data: { ...fetchedReport, triggerReload: false, rowCount: 0 }, // rowCount 0 indicates it's still loading if row length is nonzero
+            });
+            fetchRowCount(processing);
+            const convertedReport = convertInternalReportToReport(fetchedReport);
+            setReport(convertedReport);
+            setAdditionProcessing(processing);
+            setError(error);
+        }
+        catch (e) {
+            if (e instanceof Error && e.name === 'AbortError') {
+                // console.log('Aborted fetching rows');
+                return;
+            }
+            throw e;
+        }
+        finally {
+            if (fetchRowsRequestId === rowsRequestId.current) {
+                setLoading(false);
+            }
+        }
     };
     useEffect(() => {
         if (!filters) {
@@ -176,8 +228,7 @@ export default function DataLoader({ item, children, filters, additionalProcessi
         fetchReportHelper(additionalProcessing);
     }, [filters, item.id]);
     useEffect(() => {
-        // @ts-ignore
-        if (dashboard[item.id] && dashboard[item.id].triggerReload) {
+        if (dashboard[item.id]?.triggerReload) {
             fetchReportHelper(additionalProcessing);
         }
     }, [dashboard[item.id]]);
@@ -203,6 +254,7 @@ export const ChartDataLoader = ({ item, children, dateBucket, additionalProcessi
     const [client] = useContext(ClientContext);
     const [schemaData] = useContext(SchemaDataContext);
     const previousFilters = useRef(null);
+    const fetchReportAbortController = useRef(null);
     const fetchReportHelper = async (useReportTask = true) => {
         if (!client || !filters) {
             return;
@@ -218,20 +270,34 @@ export const ChartDataLoader = ({ item, children, dateBucket, additionalProcessi
             return;
         }
         setLoading(true);
-        const { report, error } = await fetchReport(item.id, client, useReportTask, filters, {
-            ...additionalProcessing,
-            ...(item.pivot ? {} : { page: DEFAULT_PAGINATION }),
-        }, dateBucket, schemaData.customFields);
-        dispatch({
-            type: 'ADD_DASHBOARD_ITEM',
-            id: item.id,
-            data: { ...report, triggerReload: false },
-        });
-        const convertedReport = convertInternalReportToReport(report);
-        setReport(convertedReport);
-        setLocalDateBucket(dateBucket);
-        setError(error);
-        setLoading(false);
+        fetchReportAbortController.current?.abort();
+        fetchReportAbortController.current = new AbortController();
+        try {
+            const { report, error } = await fetchReport(item.id, client, useReportTask, filters, {
+                ...additionalProcessing,
+                ...(item.pivot ? {} : { page: DEFAULT_PAGINATION }),
+            }, dateBucket, schemaData.customFields, undefined, undefined, fetchReportAbortController.current.signal);
+            fetchReportAbortController.current = null;
+            dispatch({
+                type: 'ADD_DASHBOARD_ITEM',
+                id: item.id,
+                data: { ...report, triggerReload: false },
+            });
+            const convertedReport = convertInternalReportToReport(report);
+            setReport(convertedReport);
+            setLocalDateBucket(dateBucket);
+            setError(error);
+        }
+        catch (e) {
+            if (e instanceof Error && e.name === 'AbortError') {
+                // console.log('Aborted fetching rows for chart');
+                return;
+            }
+            throw e;
+        }
+        finally {
+            setLoading(false);
+        }
     };
     useEffect(() => {
         if (!filters) {

package/dist/esm/components/Dashboard/MetricComponent.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"MetricComponent.d.ts","sourceRoot":"","sources":["../../../../src/components/Dashboard/MetricComponent.tsx"],"names":[],"mappings":";AACA,OAAO,EAAE,gBAAgB,EAAE,MAAM,iBAAiB,CAAC;AAMnD,MAAM,CAAC,OAAO,UAAU,oBAAoB,CAAC,EAC3C,MAAM,EACN,OAAO,EACP,KAAK,EACL,SAAS,GACV,EAAE,gBAAgB,GAAG,GAAG,CAAC,OAAO,CA+MhC"}
+{"version":3,"file":"MetricComponent.d.ts","sourceRoot":"","sources":["../../../../src/components/Dashboard/MetricComponent.tsx"],"names":[],"mappings":";AACA,OAAO,EAAE,gBAAgB,EAAE,MAAM,iBAAiB,CAAC;AAMnD,MAAM,CAAC,OAAO,UAAU,oBAAoB,CAAC,EAC3C,MAAM,EACN,OAAO,EACP,KAAK,EACL,SAAS,GACV,EAAE,gBAAgB,GAAG,GAAG,CAAC,OAAO,CA2NhC"}

package/dist/esm/components/Dashboard/MetricComponent.js

@@ -10,8 +10,8 @@ export default function QuillMetricComponent({ report, onClick, error, isLoading
     const primaryMetricLabel = report?.filtersApplied?.date_range?.preset?.label;
     const comparisonKey = report?.filtersApplied?.date_range?.comparisonRange?.value;
     const comparisonLabel = COMPARISON_OPTIONS.find((opt) => opt.value === comparisonKey)?.text;
-    return (_jsx("div", { onClick: () => onClick && !error && onClick(report), style: {
-            cursor: error || !onClick ? 'default' : 'pointer',
+    return (_jsx("div", { onClick: () => onClick && onClick(report), style: {
+            cursor: !onClick ? 'default' : 'pointer',
             boxSizing: 'content-box',
             borderRadius: 8,
             paddingBottom: isLoading ? 0 : 30,
@@ -51,7 +51,18 @@ export default function QuillMetricComponent({ report, onClick, error, isLoading
                                 }, children: report?.name })) }), isLoading ? (_jsx(ChartSkeleton, { containerStyle: {
                                 maxHeight: '78px',
                                 height: '100%',
-                            } })) : error ? (_jsx("div", { children: _jsx(ChartError, { errorMessage: error }) })) : report.rows?.length === 0 ||
+                            } })) : error ? (_jsx(ChartError, { errorMessage: error, containerStyle: {
+                                display: 'flex',
+                                flex: '1 0 auto',
+                                height: '80%',
+                                margin: 'auto',
+                                justifyContent: 'center',
+                                alignItems: 'center',
+                                fontSize: 13,
+                                color: theme?.secondaryTextColor,
+                                maxWidth: '100%',
+                                width: '100%',
+                            } })) : report.rows?.length === 0 ||
                             report.rows[0][report.xAxisField] === null ? (_jsx("div", { style: {
                                 display: 'flex',
                                 flex: '1 0 auto',

package/dist/esm/components/QuillMultiSelectWithCombo.d.ts

@@ -2,7 +2,7 @@ import { MultiSelectComponentProps } from './UiComponents';
 /**
  * A robust select component that implements the new minimal Select interface.
  */
-export declare function QuillMultiSelectComponentWithCombo({ options, width, onChange, label, value, isLoading, }: MultiSelectComponentProps): import("react/jsx-runtime").JSX.Element;
+export declare function QuillMultiSelectComponentWithCombo({ options, width, onChange, label, value, isLoading, disabled, }: MultiSelectComponentProps): import("react/jsx-runtime").JSX.Element;
 export declare const ListboxTextInput: ({ value, onChange, placeholder, }: {
     value: string;
     onChange: (e: string) => void;

package/dist/esm/components/QuillMultiSelectWithCombo.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"QuillMultiSelectWithCombo.d.ts","sourceRoot":"","sources":["../../../src/components/QuillMultiSelectWithCombo.tsx"],"names":[],"mappings":"AACA,OAAO,EAAkB,yBAAyB,EAAE,MAAM,gBAAgB,CAAC;AAiC3E;;GAEG;AACH,wBAAgB,kCAAkC,CAAC,EACjD,OAAO,EACP,KAAK,EACL,QAAQ,EACR,KAAK,EACL,KAAK,EACL,SAAS,GACV,EAAE,yBAAyB,2CA4U3B;AAED,eAAO,MAAM,gBAAgB;WAKpB,MAAM;kBACC,MAAM,KAAK,IAAI;iBAChB,MAAM;6CAwDpB,CAAC"}
+{"version":3,"file":"QuillMultiSelectWithCombo.d.ts","sourceRoot":"","sources":["../../../src/components/QuillMultiSelectWithCombo.tsx"],"names":[],"mappings":"AACA,OAAO,EAAkB,yBAAyB,EAAE,MAAM,gBAAgB,CAAC;AAiC3E;;GAEG;AACH,wBAAgB,kCAAkC,CAAC,EACjD,OAAO,EACP,KAAK,EACL,QAAQ,EACR,KAAK,EACL,KAAK,EACL,SAAS,EACT,QAAQ,GACT,EAAE,yBAAyB,2CAiV3B;AAED,eAAO,MAAM,gBAAgB;WAKpB,MAAM;kBACC,MAAM,KAAK,IAAI;iBAChB,MAAM;6CAwDpB,CAAC"}

package/dist/esm/components/QuillMultiSelectWithCombo.js

@@ -21,7 +21,7 @@ function displaySelectedOptionLabels({ options, value, }) {
 /**
  * A robust select component that implements the new minimal Select interface.
  */
-export function QuillMultiSelectComponentWithCombo({ options, width, onChange, label, value, isLoading, }) {
+export function QuillMultiSelectComponentWithCombo({ options, width, onChange, label, value, isLoading, disabled, }) {
     const [theme] = useContext(ThemeContext);
     const [selectedOptions, setSelectedOptions] = useState([]);
     const [showModal, setShowModal] = useState(false);
@@ -124,8 +124,12 @@ export function QuillMultiSelectComponentWithCombo({ options, width, onChange, l
                     height: 40,
                     minHeight: 40,
                     maxHeight: 40,
-                }, className: "quill-select-button", onClick: () => setShowModal((showModal) => !showModal), children: [_jsx("style", { children: ` .quill-select-button { background: ${theme?.backgroundColor}; } 
+                }, className: 'quill-select-button', onClick: () => setShowModal((showModal) => !showModal), disabled: disabled, children: [_jsx("style", { children: ` .quill-select-button { background: ${theme?.backgroundColor}; } 
           .quill-select-button:hover { background: ${theme?.hoverBackgroundColor}; }
+          .quill-select-button:disabled {
+            cursor: not-allowed;
+            background: ${theme?.hoverBackgroundColor};
+          }
         ` }), _jsx("span", { style: {
                             textOverflow: 'ellipsis',
                             whiteSpace: 'nowrap',

package/dist/esm/components/QuillSelect.js

@@ -63,8 +63,8 @@ export function QuillSelectComponent({ options, value, width, onChange, label, i
                 }, className: "quill-select-button", onClick: () => setShowModal((showModal) => !showModal), disabled: disabled, children: [_jsx("style", { children: ` 
             .quill-select-button { background: ${theme?.backgroundColor}; } 
             .quill-select-button:hover { background: ${theme?.hoverBackgroundColor}; }
-            .quill-select-button:disabled {
-              opacity: 0.5;
+            .quill-select-button:disabled, {
+              background: ${theme?.hoverBackgroundColor};
               cursor: not-allowed;
             }        
           ` }), _jsx("span", { style: {
@@ -91,7 +91,7 @@ export function QuillSelectComponent({ options, value, width, onChange, label, i
                     fontFamily: theme?.fontFamily,
                     maxHeight: '50vh',
                     overflow: 'scroll',
-                }, children: [!isLoading && !hideEmptyOption && (_jsxs("button", { style: {
+                }, children: [!isLoading && (!hideEmptyOption || !options.length) && (_jsxs("button", { style: {
                             display: 'flex',
                             alignItems: 'center',
                             justifyContent: 'space-between',

package/dist/esm/components/QuillSelectWithCombo.d.ts

@@ -2,5 +2,5 @@ import { SelectComponentProps } from './UiComponents';
 /**
  * A robust select component that implements the new minimal Select interface.
  */
-export declare function QuillSelectComponentWithCombo({ options, value, width, onChange, label, isLoading, hideEmptyOption, }: SelectComponentProps): import("react/jsx-runtime").JSX.Element;
+export declare function QuillSelectComponentWithCombo({ options, value, width, onChange, label, isLoading, hideEmptyOption, disabled, }: SelectComponentProps): import("react/jsx-runtime").JSX.Element;
 //# sourceMappingURL=QuillSelectWithCombo.d.ts.map

package/dist/esm/components/QuillSelectWithCombo.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"QuillSelectWithCombo.d.ts","sourceRoot":"","sources":["../../../src/components/QuillSelectWithCombo.tsx"],"names":[],"mappings":"AACA,OAAO,EAAkB,oBAAoB,EAAE,MAAM,gBAAgB,CAAC;AAWtE;;GAEG;AACH,wBAAgB,6BAA6B,CAAC,EAC5C,OAAO,EACP,KAAK,EACL,KAAK,EACL,QAAQ,EACR,KAAK,EACL,SAAS,EACT,eAAe,GAChB,EAAE,oBAAoB,2CA8QtB"}
+{"version":3,"file":"QuillSelectWithCombo.d.ts","sourceRoot":"","sources":["../../../src/components/QuillSelectWithCombo.tsx"],"names":[],"mappings":"AACA,OAAO,EAAkB,oBAAoB,EAAE,MAAM,gBAAgB,CAAC;AAWtE;;GAEG;AACH,wBAAgB,6BAA6B,CAAC,EAC5C,OAAO,EACP,KAAK,EACL,KAAK,EACL,QAAQ,EACR,KAAK,EACL,SAAS,EACT,eAAe,EACf,QAAQ,GACT,EAAE,oBAAoB,2CA2RtB"}

package/dist/esm/components/QuillSelectWithCombo.js

@@ -7,7 +7,7 @@ import { ListboxTextInput } from './QuillMultiSelectWithCombo';
 /**
  * A robust select component that implements the new minimal Select interface.
  */
-export function QuillSelectComponentWithCombo({ options, value, width, onChange, label, isLoading, hideEmptyOption, }) {
+export function QuillSelectComponentWithCombo({ options, value, width, onChange, label, isLoading, hideEmptyOption, disabled, }) {
     const [theme] = useContext(ThemeContext);
     const [showModal, setShowModal] = useState(false);
     const modalRef = useRef(null);
@@ -90,7 +90,15 @@ export function QuillSelectComponentWithCombo({ options, value, width, onChange,
                     height: 40,
                     minHeight: 40,
                     maxHeight: 40,
-                }, className: "quill-select-button", onClick: () => setShowModal((showModal) => !showModal), children: [_jsx("style", { children: ` .quill-select-button { background: ${theme?.backgroundColor}; } .quill-select-button:hover { background: ${theme?.hoverBackgroundColor}; }` }), _jsx("span", { style: {
+                }, className: 'quill-select-button', onClick: () => setShowModal((showModal) => !showModal), disabled: disabled, children: [_jsx("style", { children: ` 
+          .quill-select-button { background: ${theme?.backgroundColor}; }
+          .quill-select-button:hover { background: ${theme?.hoverBackgroundColor}; }
+          .quill-select-button:disabled { 
+            cursor: not-allowed;
+            background: ${theme?.hoverBackgroundColor}; 
+          }
+
+        ` }), _jsx("span", { style: {
                             textOverflow: 'ellipsis',
                             whiteSpace: 'nowrap',
                             overflow: 'hidden',
@@ -117,7 +125,9 @@ export function QuillSelectComponentWithCombo({ options, value, width, onChange,
                     fontSize: 14,
                 }, children: [options && options.length > 20 && !isLoading && (_jsx(ListboxTextInput, { value: searchQuery, placeholder: "Search", onChange: (value) => {
                             setSearchQuery(value);
-                        } })), searchQuery === '' && !isLoading && !hideEmptyOption && (_jsxs("button", { style: {
+                        } })), searchQuery === '' &&
+                        !isLoading &&
+                        (!hideEmptyOption || !options.length) && (_jsxs("button", { style: {
                             display: 'flex',
                             alignItems: 'center',
                             justifyContent: 'space-between',
@@ -137,7 +147,7 @@ export function QuillSelectComponentWithCombo({ options, value, width, onChange,
                             minHeight: 34,
                         }, className: "quill-option", onClick: () => {
                             // Manually create a synthetic ChangeEvent and pass it to callback
-                            const changeEvent = { target: { value: '' } };
+                            const changeEvent = { target: { value: undefined } };
                             onChange(changeEvent);
                             setShowModal(false);
                         }, children: [_jsx("style", { children: `

package/dist/esm/components/ReportBuilder/FilterStack.d.ts

@@ -0,0 +1,33 @@
+import { FilterTreeNode } from '../../utils/astFilterProcessing';
+interface FilterStackProps {
+    client: any;
+    filterStack: FilterTreeNode[];
+    filterTree: FilterTreeNode | null;
+    defaultAST: any;
+    baseAst: any;
+    setBaseAst: any;
+    setFormData: any;
+    fetchSqlQuery: any;
+    schemaData: any;
+    defaultColumn: any;
+    defaultTable: any;
+    currentTable: any;
+    initialTableName: string;
+    globalUniqueValues: any;
+    globalUniqueValuesIsLoading: boolean;
+    columns: any;
+    removingFilter: any;
+    setRemovingFilter: any;
+    TabsComponent: any;
+    FilterPopoverComponent: any;
+    FilterModal: any;
+    ButtonComponent: any;
+    SecondaryButtonComponent: any;
+    SelectComponent: any;
+    TextInputComponent: any;
+    MultiSelectComponent: any;
+    actionsEnabled: boolean;
+}
+export default function FilterStack({ client, filterStack, filterTree, defaultAST, baseAst, setBaseAst, setFormData, fetchSqlQuery, schemaData, defaultColumn, defaultTable, currentTable, initialTableName, globalUniqueValues, globalUniqueValuesIsLoading, columns, removingFilter, setRemovingFilter, TabsComponent, FilterPopoverComponent, FilterModal, ButtonComponent, SecondaryButtonComponent, SelectComponent, TextInputComponent, MultiSelectComponent, actionsEnabled, }: FilterStackProps): import("react/jsx-runtime").JSX.Element;
+export {};
+//# sourceMappingURL=FilterStack.d.ts.map

package/dist/esm/components/ReportBuilder/FilterStack.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"FilterStack.d.ts","sourceRoot":"","sources":["../../../../src/components/ReportBuilder/FilterStack.tsx"],"names":[],"mappings":"AAGA,OAAO,EACL,cAAc,EAEf,MAAM,iCAAiC,CAAC;AAUzC,UAAU,gBAAgB;IACxB,MAAM,EAAE,GAAG,CAAC;IACZ,WAAW,EAAE,cAAc,EAAE,CAAC;IAC9B,UAAU,EAAE,cAAc,GAAG,IAAI,CAAC;IAClC,UAAU,EAAE,GAAG,CAAC;IAChB,OAAO,EAAE,GAAG,CAAC;IACb,UAAU,EAAE,GAAG,CAAC;IAChB,WAAW,EAAE,GAAG,CAAC;IACjB,aAAa,EAAE,GAAG,CAAC;IACnB,UAAU,EAAE,GAAG,CAAC;IAChB,aAAa,EAAE,GAAG,CAAC;IACnB,YAAY,EAAE,GAAG,CAAC;IAClB,YAAY,EAAE,GAAG,CAAC;IAClB,gBAAgB,EAAE,MAAM,CAAC;IACzB,kBAAkB,EAAE,GAAG,CAAC;IACxB,2BAA2B,EAAE,OAAO,CAAC;IACrC,OAAO,EAAE,GAAG,CAAC;IACb,cAAc,EAAE,GAAG,CAAC;IACpB,iBAAiB,EAAE,GAAG,CAAC;IACvB,aAAa,EAAE,GAAG,CAAC;IACnB,sBAAsB,EAAE,GAAG,CAAC;IAC5B,WAAW,EAAE,GAAG,CAAC;IACjB,eAAe,EAAE,GAAG,CAAC;IACrB,wBAAwB,EAAE,GAAG,CAAC;IAC9B,eAAe,EAAE,GAAG,CAAC;IACrB,kBAAkB,EAAE,GAAG,CAAC;IACxB,oBAAoB,EAAE,GAAG,CAAC;IAC1B,cAAc,EAAE,OAAO,CAAC;CACzB;AAED,MAAM,CAAC,OAAO,UAAU,WAAW,CAAC,EAClC,MAAM,EACN,WAAW,EACX,UAAU,EACV,UAAU,EACV,OAAO,EACP,UAAU,EACV,WAAW,EACX,aAAa,EACb,UAAU,EACV,aAAa,EACb,YAAY,EACZ,YAAY,EACZ,gBAAgB,EAChB,kBAAkB,EAClB,2BAA2B,EAC3B,OAAO,EACP,cAAc,EACd,iBAAiB,EACjB,aAAa,EACb,sBAAsB,EACtB,WAAW,EACX,eAAe,EACf,wBAAwB,EACxB,eAAe,EACf,kBAAkB,EAClB,oBAAoB,EACpB,cAAqB,GACtB,EAAE,gBAAgB,2CAgLlB"}