@quillsql/react 2.15.6 → 2.15.8

package/dist/index.js

@@ -386,14 +386,14 @@ var require_pluralize = __commonJS({
 import {
   useContext as useContext20,
   useEffect as useEffect18,
-  useState as useState22,
+  useState as useState23,
   useMemo as useMemo16,
   useRef as useRef13
 } from "react";
 
 // src/Chart.tsx
 import {
-  useState as useState16,
+  useState as useState17,
   useEffect as useEffect15,
   useContext as useContext16,
   useMemo as useMemo13,
@@ -812,7 +812,7 @@ var downloadCSV = (data) => {
 };
 
 // src/hooks/useExport.tsx
-import { useContext as useContext2, useMemo as useMemo3, useState as useState2 } from "react";
+import { useContext as useContext2, useMemo as useMemo3, useState as useState3 } from "react";
 
 // src/utils/constants.ts
 var MAX_PIVOT_UNIQUE_VALUES = 250;
@@ -19029,6 +19029,10 @@ async function cleanDashboardItem({
   let pivotTable;
   let pivotError;
   try {
+    const shouldPaginatePivotAsTable = item.chartType === "table";
+    const pivotChartProcessing = {
+      page: DEFAULT_PAGINATION
+    };
     pivotTable = await getPivotTable(
       {
         ...item,
@@ -19051,7 +19055,7 @@ async function cleanDashboardItem({
       client,
       eventTracking,
       dateBucket,
-      additionalProcessing,
+      shouldPaginatePivotAsTable ? additionalProcessing : pivotChartProcessing,
       tenants,
       customFields
     );
@@ -20513,6 +20517,8 @@ function extractAllReportValuesFromQuillInternalReport(reportInternal) {
     name: reportInternal.name,
     dashboardName: reportInternal.dashboardName,
     // section: reportInternal.section,
+    pagination: reportInternal.pagination,
+    sort: reportInternal.sort,
     rows: reportInternal.rows,
     columns: reportInternal.columns,
     chartType: reportInternal.chartType,
@@ -23070,7 +23076,7 @@ import { flushSync } from "react-dom";
 import jsPDF from "jspdf";
 
 // src/hooks/useDashboard.ts
-import { useContext, useEffect as useEffect2, useMemo as useMemo2, useRef as useRef2 } from "react";
+import { useContext, useEffect as useEffect2, useMemo as useMemo2, useRef as useRef2, useState as useState2 } from "react";
 var useDashboardInternal = (dashboardName, customFilters) => {
   const [dashboard] = useContext(DashboardContext);
   const {
@@ -23657,7 +23663,7 @@ var useDashboards = () => {
     deleteDashboard
   };
 };
-var useDashboard = (dashboardName) => {
+var useDashboard = (dashboardName, config) => {
   const { data, dashboardFilters, reload, isLoading } = useDashboardInternal(dashboardName);
   const { customFilterDispatch } = useContext(DashboardFiltersContext);
   const { reportsDispatch, reportsLoadingStateDispatch } = useContext(ReportsContext);
@@ -23698,7 +23704,7 @@ var useDashboard = (dashboardName) => {
   useEffect2(() => {
     if (!fetchedInitialReports.current && data) {
       fetchedInitialReports.current = true;
-      fetchReports([], dashboardFilters ?? []);
+      fetchReports([], dashboardFilters ?? [], config?.pageSize);
     }
   }, [fetchedInitialReports, data, dashboardFilters]);
   const applyDashboardFilters = (filtersToUpdate) => {
@@ -23805,24 +23811,35 @@ var useDashboard = (dashboardName) => {
     }
     return [];
   };
-  const fetchReports = async (customFilters, dashboardFilters2) => {
+  const fetchReports = async (customFilters, dashboardFilters2, pageSize) => {
     if (!client || !sections) return;
-    const allReportIds = Object.values(sections).flatMap(
-      (reports) => reports.map((report) => report.id)
-    );
+    const allReports = Object.values(sections).flat();
     await Promise.all(
-      allReportIds.map(async (reportId) => {
+      allReports.map(async (reportInfo) => {
+        const reportId = reportInfo.id;
         reportsLoadingStateDispatch({
           type: "SET_REPORT_LOADING",
           id: reportId,
           data: true
         });
         const customReportFiltersArray = await waitForCustomFilters(reportId);
+        let rowsPerRequest = pageSize || 600;
+        if (!pageSize && (reportInfo.chartType === "table" || reportInfo.chartType === "metric")) {
+          rowsPerRequest = 10;
+        }
+        const pagination = {
+          rowsPerRequest,
+          rowsPerPage: rowsPerRequest
+        };
+        const additionalProcessing = {
+          page: pagination
+        };
         const { report, error } = await fetchReport({
           reportId,
           client,
           tenants,
           flags,
+          additionalProcessing,
           filters: dashboardFilters2.concat(customFilters).concat(customReportFiltersArray),
           getToken,
           eventTracking
@@ -23834,7 +23851,10 @@ var useDashboard = (dashboardName) => {
         reportsDispatch({
           type: "UPDATE_REPORT",
           id: reportId,
-          data: report
+          data: {
+            ...report,
+            pagination
+          }
         });
         reportsLoadingStateDispatch({
           type: "SET_REPORT_LOADING",
@@ -23852,7 +23872,7 @@ var useDashboard = (dashboardName) => {
     applyFilters
   };
 };
-var useDashboardReport = (reportId, config) => {
+var useDashboardReportInternal = (reportId, config) => {
   const {
     reports,
     reportsLoadingState,
@@ -23864,13 +23884,15 @@ var useDashboardReport = (reportId, config) => {
   const [client] = useContext(ClientContext);
   const { getToken } = useContext(FetchContext);
   const { eventTracking } = useContext(EventTrackingContext);
-  const { customReportFiltersDispatch } = useContext(ReportFiltersContext);
+  const { customReportFilters, customReportFiltersDispatch } = useContext(ReportFiltersContext);
   const { dashboardCustomFilters } = useContext(DashboardFiltersContext);
   const {
     data: dashboardData,
     dashboardFilters: dashboardFiltersInternal,
     reload: reloadDashboard
   } = useDashboardInternal(reports[reportId]?.dashboardName ?? null);
+  const [pageLoading, setPageLoading] = useState2(false);
+  const [maxPage, setMaxPage] = useState2(0);
   useEffect2(() => {
     if (config?.initialFilters) {
       customReportFiltersDispatch({
@@ -23908,11 +23930,16 @@ var useDashboardReport = (reportId, config) => {
     const dashboardFiltersArray = dashboardFiltersInternal ?? [];
     const dashboardCustomFiltersArray = dashboardCustomFilters[processedReport?.dashboardName ?? ""] ?? [];
     const requestFilters = filters.map(convertCustomFilter).concat(dashboardCustomFiltersArray).concat(dashboardFiltersArray);
+    const pagination = processedReport?.pagination;
+    const additionalProcessing = {
+      page: pagination
+    };
     const { report, error } = await fetchReport({
       reportId,
       client,
       tenants,
       flags,
+      additionalProcessing,
       filters: requestFilters,
       getToken,
       eventTracking
@@ -23968,11 +23995,138 @@ var useDashboardReport = (reportId, config) => {
       });
     }
   };
+  const updateReportTableRows = async (processing, appendRows) => {
+    if (!client) {
+      return;
+    }
+    setPageLoading(true);
+    const dashboardFiltersArray = dashboardFiltersInternal ?? [];
+    const dashboardCustomFiltersArray = dashboardCustomFilters[processedReport?.dashboardName ?? ""] ?? [];
+    const reportCustomFiltersArray = customReportFilters[reportId] ?? [];
+    const filters = reportCustomFiltersArray.concat(dashboardFiltersArray).concat(dashboardCustomFiltersArray);
+    const pivot = processedReport?.pivot;
+    const pivotQuery = reports[reportId]?.pivotQuery;
+    const { rows } = await fetchResultsByReport({
+      reportId,
+      client,
+      tenants,
+      processing,
+      filters,
+      getToken,
+      eventTracking,
+      pivot,
+      pivotQuery
+    });
+    if (pivot && pivotQuery) {
+      const currRows = reports[reportId]?.pivotRows || [];
+      const updatedRows = appendRows ? [...currRows, ...rows] : rows;
+      reportsDispatch({
+        type: "UPDATE_REPORT",
+        id: reportId,
+        data: {
+          pivotRows: updatedRows,
+          pagination: processing.page,
+          sort: processing.sort
+        }
+      });
+    } else {
+      const currRows = reports[reportId]?.rows || [];
+      const updatedRows = appendRows ? [...currRows, ...rows] : rows;
+      reportsDispatch({
+        type: "UPDATE_REPORT",
+        id: reportId,
+        data: {
+          rows: updatedRows,
+          pagination: processing.page,
+          sort: processing.sort
+        }
+      });
+    }
+    setMaxPage(processing.page?.page || 0);
+    setPageLoading(false);
+  };
+  const handleNextPage = async () => {
+    if (!processedReport?.pagination) {
+      return;
+    }
+    const currPage = processedReport.pagination.page || 0;
+    const updatedPage = {
+      ...processedReport.pagination,
+      page: currPage + 1
+    };
+    if (shouldFetchMore(updatedPage, currPage + 1, maxPage)) {
+      const sort = processedReport?.sort;
+      updateReportTableRows({ page: updatedPage, sort }, true);
+    } else {
+      reportsDispatch({
+        type: "UPDATE_REPORT",
+        id: reportId,
+        data: {
+          pagination: updatedPage
+        }
+      });
+    }
+  };
+  const handlePrevPage = async () => {
+    if (!processedReport?.pagination) {
+      return;
+    }
+    const currPage = processedReport.pagination.page || 0;
+    const updatedPage = {
+      ...processedReport.pagination,
+      page: currPage - 1
+    };
+    reportsDispatch({
+      type: "UPDATE_REPORT",
+      id: reportId,
+      data: {
+        pagination: updatedPage
+      }
+    });
+  };
+  const handleSort = async (sort) => {
+    const currSort = processedReport?.sort;
+    const currPagination = processedReport?.pagination;
+    const newPagination = currPagination ? { ...currPagination, page: 0 } : void 0;
+    if (currSort?.field !== sort.field || currSort?.direction?.toLowerCase() !== sort?.direction?.toLowerCase()) {
+      updateReportTableRows({ page: newPagination, sort }, false);
+    }
+  };
   return {
     report: reportsLoadingState[reportId] ? null : processedReport,
     loading: !!reportsLoadingState[reportId],
     applyFilters: setReportFilters,
-    deleteReport
+    deleteReport,
+    pageNumber: processedReport?.pagination?.page || 0,
+    pageLoading,
+    nextPage: handleNextPage,
+    prevPage: handlePrevPage,
+    sortRows: handleSort
+  };
+};
+var useDashboardReport = (reportId, config) => {
+  const { report, loading, applyFilters, deleteReport, nextPage } = useDashboardReportInternal(reportId, config);
+  const fetchingRef = useRef2(false);
+  const fetchNextPage = async () => {
+    if (fetchingRef.current) {
+      return;
+    }
+    try {
+      fetchingRef.current = true;
+      await nextPage();
+    } catch (error) {
+      console.error("Error fetching page:", error.message);
+    } finally {
+      fetchingRef.current = false;
+    }
+  };
+  return {
+    report,
+    isLoading: loading || fetchingRef.current,
+    loading: loading || fetchingRef.current,
+    applyFilters,
+    deleteReport,
+    fetchNextPage
   };
 };
 
@@ -24054,8 +24208,8 @@ var useExport = (reportId, {
     return Object.values(reportFilters[reportId] ?? []).map((f) => f.filter);
   }, [reportFilters, reportId]);
   const [client] = useContext2(ClientContext);
-  const [isCSVLoading, setIsCSVLoading] = useState2(false);
-  const [isPDFLoading, setIsPDFLoading] = useState2(false);
+  const [isCSVLoading, setIsCSVLoading] = useState3(false);
+  const [isPDFLoading, setIsPDFLoading] = useState3(false);
   if (!reportId || !client) {
     return {
       downloadCSV: async () => {
@@ -25425,7 +25579,7 @@ var PieChartWrapper = React3.forwardRef(
 var PieChart_default = PieChartWrapper;
 
 // src/components/QuillTable.tsx
-import { useContext as useContext5, useEffect as useEffect7, useState as useState7 } from "react";
+import { useContext as useContext5, useEffect as useEffect7, useState as useState8 } from "react";
 
 // src/components/UiComponents.tsx
 import {
@@ -25433,7 +25587,7 @@ import {
   useContext as useContext4,
   useEffect as useEffect6,
   useRef as useRef3,
-  useState as useState6
+  useState as useState7
 } from "react";
 
 // src/assets/ArrowDownHeadIcon.tsx
@@ -25634,7 +25788,7 @@ function ChartSkeleton({
 }
 
 // src/hooks/useInternalState.tsx
-import { useState as useState3 } from "react";
+import { useState as useState4 } from "react";
 
 // src/hooks/useOnClickOutside.tsx
 import { useEffect as useEffect3 } from "react";
@@ -25680,10 +25834,10 @@ var createsStackingContext = (computedStyle) => {
 var useOnClickOutside_default = useOnClickOutside;
 
 // src/hooks/useOnWindowResize.tsx
-import { useEffect as useEffect4, useState as useState4 } from "react";
+import { useEffect as useEffect4, useState as useState5 } from "react";
 
 // src/hooks/useSelectOnKeyDown.tsx
-import { useEffect as useEffect5, useState as useState5 } from "react";
+import { useEffect as useEffect5, useState as useState6 } from "react";
 
 // src/components/UiComponents.tsx
 import { createPortal } from "react-dom";
@@ -26127,7 +26281,7 @@ var MemoizedPopover = ({
   titlePaddingLeft = 0
 }) => {
   const [theme] = useContext4(ThemeContext);
-  const [rightAlignment, setRightAlignment] = useState6("auto");
+  const [rightAlignment, setRightAlignment] = useState7("auto");
   const modalRef = useRef3(null);
   const popoverRef = useRef3(null);
   useEffect6(() => {
@@ -26545,7 +26699,7 @@ var QuillModalComponent = ({
   title
 }) => {
   const [theme] = useContext4(ThemeContext);
-  const [rightAlignment, setRightAlignment] = useState6("auto");
+  const [rightAlignment, setRightAlignment] = useState7("auto");
   const modalRef = useRef3(null);
   const popoverRef = useRef3(null);
   useEffect6(() => {
@@ -26861,8 +27015,8 @@ var OverflowContainer = ({
   style: style2
 }) => {
   const containerRef = useRef3(null);
-  const [showTopShadow, setShowTopShadow] = useState6(false);
-  const [showBottomShadow, setShowBottomShadow] = useState6(false);
+  const [showTopShadow, setShowTopShadow] = useState7(false);
+  const [showBottomShadow, setShowBottomShadow] = useState7(false);
   const checkOverflow = () => {
     const container = containerRef.current;
     if (container) {
@@ -27027,10 +27181,10 @@ var QuillToolTipPortal = ({
   mirror = false
 }) => {
   const [theme] = useContext4(ThemeContext);
-  const [isOpen, setIsOpen] = useState6(false);
+  const [isOpen, setIsOpen] = useState7(false);
   const tooltipRef = useRef3(null);
   const triggerRef = useRef3(null);
-  const [tooltipPosition, setTooltipPosition] = useState6(void 0);
+  const [tooltipPosition, setTooltipPosition] = useState7(void 0);
   const updatePosition = () => {
     if (triggerRef.current && tooltipRef.current) {
       const rect = triggerRef.current.getBoundingClientRect();
@@ -27199,8 +27353,8 @@ var QuillPortal = ({
   setShowModal
 }) => {
   const modalRef = useRef3(null);
-  const [popoverPosition, setPopoverPosition] = useState6(void 0);
-  const [z, setZ] = useState6(10);
+  const [popoverPosition, setPopoverPosition] = useState7(void 0);
+  const [z, setZ] = useState7(10);
   const scrollableParentRef = useRef3(document.body);
   const updatePosition = () => {
     if (anchorRef.current) {
@@ -27316,13 +27470,13 @@ function QuillTable({
   hideLabels,
   disableSort
 }) {
-  const [activeRows, setActiveRows] = useState7([]);
-  const [maxPage, setMaxPage] = useState7(1);
-  const [sortColumn, setSortColumn] = useState7(sort?.field || "");
-  const [sortDirection, setSortDirection] = useState7(sort?.direction || "desc");
+  const [activeRows, setActiveRows] = useState8([]);
+  const [maxPage, setMaxPage] = useState8(1);
+  const [sortColumn, setSortColumn] = useState8(sort?.field || "");
+  const [sortDirection, setSortDirection] = useState8(sort?.direction || "desc");
   const [theme] = useContext5(ThemeContext);
-  const [isPaginating, setIsPaginating] = useState7(true);
-  const [initialLoad, setInitialLoad] = useState7(true);
+  const [isPaginating, setIsPaginating] = useState8(true);
+  const [initialLoad, setInitialLoad] = useState8(true);
   useEffect7(() => {
     setSortColumn(sort?.field || "");
     setSortDirection(sort?.direction || "desc");
@@ -29318,7 +29472,7 @@ import {
   useContext as useContext9,
   useEffect as useEffect9,
   useRef as useRef5,
-  useState as useState9
+  useState as useState10
 } from "react";
 import {
   startOfMonth as startOfMonth2,
@@ -29340,7 +29494,7 @@ import {
   useContext as useContext8,
   useMemo as useMemo7,
   useRef as useRef4,
-  useState as useState8,
+  useState as useState9,
   useEffect as useEffect8
 } from "react";
 import { createPortal as createPortal2 } from "react-dom";
@@ -29356,7 +29510,7 @@ function QuillSelectComponent({
   hideEmptyOption
 }) {
   const [theme] = useContext8(ThemeContext);
-  const [showModal, setShowModal] = useState8(false);
+  const [showModal, setShowModal] = useState9(false);
   const modalRef = useRef4(null);
   const buttonRef = useRef4(null);
   useOnClickOutside_default(
@@ -29381,8 +29535,8 @@ function QuillSelectComponent({
   const nullLabel = useMemo7(() => {
     return sortedItems.some((item) => item.value === "-") ? "None" : "-";
   }, [sortedItems]);
-  const [popoverPosition, setPopoverPosition] = useState8(void 0);
-  const [z, setZ] = useState8(10);
+  const [popoverPosition, setPopoverPosition] = useState9(void 0);
+  const [z, setZ] = useState9(10);
   const scrollableParentRef = useRef4(document.body);
   const updatePosition = () => {
     if (buttonRef.current) {
@@ -29682,20 +29836,20 @@ function QuillDateRangePicker({
 }) {
   const [theme] = useContext9(ThemeContext);
   const [client] = useContext9(ClientContext);
-  const [anchorStartDate, setAnchorStartDate] = useState9(
+  const [anchorStartDate, setAnchorStartDate] = useState10(
     getAnchorStartDate(dateRange.startDate, dateRange.endDate)
   );
-  const [anchorEndDate, setAnchorEndDate] = useState9(
+  const [anchorEndDate, setAnchorEndDate] = useState10(
     getAnchorEndDate(dateRange.startDate, dateRange.endDate)
   );
-  const [localStartDate, setLocalStartDate] = useState9(
+  const [localStartDate, setLocalStartDate] = useState10(
     dateRange.startDate
   );
-  const [localEndDate, setLocalEndDate] = useState9(
+  const [localEndDate, setLocalEndDate] = useState10(
     dateRange.endDate
   );
-  const [localPreset, setLocalPreset] = useState9(preset);
-  const [showModal, setShowModal] = useState9(false);
+  const [localPreset, setLocalPreset] = useState10(preset);
+  const [showModal, setShowModal] = useState10(false);
   const buttonRef = useRef5(null);
   const modalRef = useRef5(null);
   useEffect9(() => {
@@ -30214,7 +30368,7 @@ import React7, {
   useEffect as useEffect10,
   useMemo as useMemo8,
   useRef as useRef6,
-  useState as useState10
+  useState as useState11
 } from "react";
 import { createPortal as createPortal3 } from "react-dom";
 import { Fragment as Fragment4, jsx as jsx40, jsxs as jsxs30 } from "react/jsx-runtime";
@@ -30231,15 +30385,15 @@ function QuillMultiSelectComponentWithCombo({
   style: style2
 }) {
   const [theme] = useContext10(ThemeContext);
-  const [selectedOptions, setSelectedOptions] = useState10([]);
-  const [showModal, setShowModal] = useState10(false);
+  const [selectedOptions, setSelectedOptions] = useState11([]);
+  const [showModal, setShowModal] = useState11(false);
   const modalRef = useRef6(null);
   const buttonRef = useRef6(null);
   const debounceTimeoutId = useRef6(null);
   const [searchQuery, setSearchQuery] = React7.useState("");
-  const [exceedsLimit, setExceedsLimit] = useState10(false);
-  const [popoverPosition, setPopoverPosition] = useState10(void 0);
-  const [z, setZ] = useState10(10);
+  const [exceedsLimit, setExceedsLimit] = useState11(false);
+  const [popoverPosition, setPopoverPosition] = useState11(void 0);
+  const [z, setZ] = useState11(10);
   const scrollableParentRef = useRef6(document.body);
   const selectAllRef = useRef6(null);
   let CheckboxState;
@@ -30275,7 +30429,7 @@ function QuillMultiSelectComponentWithCombo({
       (elem) => elem.label ?? "-"
     ).join(", ");
   }, [options, value]);
-  const [selectAllCheckboxState, setSelectAllCheckboxState] = useState10(
+  const [selectAllCheckboxState, setSelectAllCheckboxState] = useState11(
     (() => {
       if (value.length === 0) {
         return 1 /* UNSELECTED */;
@@ -30879,7 +31033,7 @@ import React8, {
   useContext as useContext11,
   useMemo as useMemo9,
   useRef as useRef7,
-  useState as useState11
+  useState as useState12
 } from "react";
 import { jsx as jsx41, jsxs as jsxs31 } from "react/jsx-runtime";
 function QuillSelectComponentWithCombo({
@@ -30893,7 +31047,7 @@ function QuillSelectComponentWithCombo({
   disabled
 }) {
   const [theme] = useContext11(ThemeContext);
-  const [showModal, setShowModal] = useState11(false);
+  const [showModal, setShowModal] = useState12(false);
   const modalRef = useRef7(null);
   const buttonRef = useRef7(null);
   const [searchQuery, setSearchQuery] = React8.useState("");
@@ -31649,7 +31803,7 @@ var MetricDisplay = ({
 };
 
 // src/components/Dashboard/DataLoader.tsx
-import { useContext as useContext13, useEffect as useEffect11, useMemo as useMemo11, useRef as useRef8, useState as useState12 } from "react";
+import { useContext as useContext13, useEffect as useEffect11, useMemo as useMemo11, useRef as useRef8, useState as useState13 } from "react";
 import equal2 from "fast-deep-equal";
 import { Fragment as Fragment5, jsx as jsx44 } from "react/jsx-runtime";
 var constructReportFromItem = (item) => {
@@ -31766,10 +31920,10 @@ function DataLoader({
     ) : Object.values(reportFilters[item.id] ?? {}).map((f) => f.filter);
   }, [dashboardFilters, reportFilters, dashboardName, item.id]);
   const [schemaData] = useContext13(SchemaDataContext);
-  const [loading, setLoading] = useState12(true);
-  const [error, setError] = useState12(void 0);
-  const [previousPage, setPreviousPage] = useState12(0);
-  const [additionalProcessing, setAdditionalProcessing] = useState12(defaultAdditionalProcessing);
+  const [loading, setLoading] = useState13(true);
+  const [error, setError] = useState13(void 0);
+  const [previousPage, setPreviousPage] = useState13(0);
+  const [additionalProcessing, setAdditionalProcessing] = useState13(defaultAdditionalProcessing);
   const chartReport = useMemo11(() => {
     const report = (dashboardName ? dashboard : reports)[item.id];
     if (report) {
@@ -31790,7 +31944,7 @@ function DataLoader({
   const previousUserFilters = useRef8(userFilters);
   const previousTenants = useRef8(tenants);
   const previousCustomFields = useRef8(schemaData.customFields);
-  const [rowCountIsLoading, setRowCountIsLoading] = useState12(false);
+  const [rowCountIsLoading, setRowCountIsLoading] = useState13(false);
   const rowsRequestId = useRef8(0);
   const rowsAbortController = useRef8(null);
   const rowCountRequestId = useRef8(0);
@@ -32136,8 +32290,8 @@ var ChartDataLoader = ({
       (f) => f.filter
     ) : Object.values(reportFilters[item.id] ?? {}).map((f) => f.filter);
   }, [dashboardFilters, reportFilters, dashboardName, item.id]);
-  const [loading, setLoading] = useState12(true);
-  const [error, setError] = useState12(void 0);
+  const [loading, setLoading] = useState13(true);
+  const [error, setError] = useState13(void 0);
   const [client] = useContext13(ClientContext);
   const [schemaData] = useContext13(SchemaDataContext);
   const previousFilters = useRef8(filters);
@@ -32373,7 +32527,7 @@ import {
   Geography,
   useMapContext
 } from "react-simple-maps";
-import { useEffect as useEffect12, useMemo as useMemo12, useRef as useRef9, useState as useState13 } from "react";
+import { useEffect as useEffect12, useMemo as useMemo12, useRef as useRef9, useState as useState14 } from "react";
 import { jsx as jsx45, jsxs as jsxs34 } from "react/jsx-runtime";
 var statesUrl = "https://cdn.jsdelivr.net/npm/us-atlas@3/states-10m.json";
 var countriesUrl = "https://cdn.jsdelivr.net/npm/world-atlas@2/countries-50m.json";
@@ -32700,16 +32854,16 @@ function USMap({
   containerStyle
 }) {
   const containerRef = useRef9(null);
-  const [hoveredState, setHoveredState] = useState13(
+  const [hoveredState, setHoveredState] = useState14(
     void 0
   );
-  const [hoveredCoords, setHoveredCoords] = useState13(void 0);
+  const [hoveredCoords, setHoveredCoords] = useState14(void 0);
   const mappedData = data.reduce((acc, curr) => {
     acc[curr[xAxisField]?.toString()] = curr;
     return acc;
   }, {});
   const measureField = yAxisFields[0].field;
-  const [scaleLog, setScaleLog] = useState13(null);
+  const [scaleLog, setScaleLog] = useState14(null);
   useEffect12(() => {
     import("d3-scale").then((scale) => {
       setScaleLog(() => scale.scaleLog);
@@ -32868,16 +33022,16 @@ function WorldMap({
   containerStyle
 }) {
   const containerRef = useRef9(null);
-  const [hoveredCountry, setHoveredCountry] = useState13(
+  const [hoveredCountry, setHoveredCountry] = useState14(
     void 0
   );
-  const [hoveredCoords, setHoveredCoords] = useState13(void 0);
+  const [hoveredCoords, setHoveredCoords] = useState14(void 0);
   const mappedData = data.reduce((acc, curr) => {
     acc[curr[xAxisField]?.toString()] = curr;
     return acc;
   }, {});
   const measureField = yAxisFields[0].field;
-  const [scaleLog, setScaleLog] = useState13(null);
+  const [scaleLog, setScaleLog] = useState14(null);
   useEffect12(() => {
     import("d3-scale").then((scale) => {
       setScaleLog(() => scale.scaleLog);
@@ -33037,7 +33191,7 @@ function MapLayout({
   regionNames
 }) {
   const { projection } = useMapContext();
-  const [geoCentroid, setGeoCentroid] = useState13(null);
+  const [geoCentroid, setGeoCentroid] = useState14(null);
   useEffect12(() => {
     import("d3-geo").then((geo) => {
       setGeoCentroid(() => geo.geoCentroid);
@@ -33090,7 +33244,7 @@ function MapLayout({
 }
 
 // src/components/Chart/GaugeChart.tsx
-import { useEffect as useEffect13, useRef as useRef10, useState as useState14 } from "react";
+import { useEffect as useEffect13, useRef as useRef10, useState as useState15 } from "react";
 
 // ../../node_modules/d3-transition/src/selection/index.js
 import { selection as selection3 } from "d3-selection";
@@ -34374,9 +34528,9 @@ function D3Gauge({
   const firstMountRef = useRef10(true);
   const startAngle = -(3 * Math.PI) / 4;
   const totalAngle = 3 * Math.PI / 2;
-  const [arc, setArc] = useState14(null);
-  const [interpolate, setInterpolate] = useState14(null);
-  const [select, setSelect] = useState14(null);
+  const [arc, setArc] = useState15(null);
+  const [interpolate, setInterpolate] = useState15(null);
+  const [select, setSelect] = useState15(null);
   useEffect13(() => {
     import("d3-shape").then(({ arc: arc2 }) => {
       setArc(() => arc2);
@@ -34523,7 +34677,7 @@ function D3Gauge({
 }
 
 // src/components/QuillComponentTables.tsx
-import { useState as useState15, useEffect as useEffect14, useContext as useContext15 } from "react";
+import { useState as useState16, useEffect as useEffect14, useContext as useContext15 } from "react";
 import { jsx as jsx47, jsxs as jsxs35 } from "react/jsx-runtime";
 var QuillTableSQLEditorComponent = ({
   rows,
@@ -34539,8 +34693,8 @@ var QuillTableSQLEditorComponent = ({
   setCurrentPage,
   hideLabels
 }) => {
-  const [sort, setSort] = useState15({ field: "", direction: "" });
-  const [page, setPage] = useState15(0);
+  const [sort, setSort] = useState16({ field: "", direction: "" });
+  const [page, setPage] = useState16(0);
   return /* @__PURE__ */ jsx47(
     QuillTable,
     {
@@ -34582,8 +34736,8 @@ var QuillTableReportBuilderComponent = ({
   setCurrentPage,
   disableSort
 }) => {
-  const [sort, setSort] = useState15({ field: "", direction: "" });
-  const [page, setPage] = useState15(0);
+  const [sort, setSort] = useState16({ field: "", direction: "" });
+  const [page, setPage] = useState16(0);
   useEffect14(() => {
     if (disableSort) {
       setSort({ field: "", direction: "" });
@@ -34628,9 +34782,9 @@ var QuillTableComponent = ({
   currentPage,
   hideLabels
 }) => {
-  const [sort, setSort] = useState15({ field: "", direction: "" });
-  const [page, setPage] = useState15(0);
-  const [initialLoad, setInitialLoad] = useState15(true);
+  const [sort, setSort] = useState16({ field: "", direction: "" });
+  const [page, setPage] = useState16(0);
+  const [initialLoad, setInitialLoad] = useState16(true);
   useEffect14(() => {
     if (initialLoad && !isLoading) {
       setInitialLoad(false);
@@ -34690,9 +34844,9 @@ function QuillTableDashboardComponent({
   hideName
 }) {
   const [theme] = useContext15(ThemeContext);
-  const [initialLoad, setInitialLoad] = useState15(true);
+  const [initialLoad, setInitialLoad] = useState16(true);
   const { downloadCSV: downloadCSV2 } = useExport(report?.id);
-  const [page, setPage] = useState15(0);
+  const [page, setPage] = useState16(0);
   useEffect14(() => {
     if (!isLoading) {
       setInitialLoad(false);
@@ -34876,7 +35030,7 @@ function Chart({
   if (!equal3(previousFilters.current, filters)) {
     previousFilters.current = filters;
   }
-  const [filterValues, setFilterValues] = useState16({});
+  const [filterValues, setFilterValues] = useState17({});
   useEffect15(() => {
     setFilterValues(
       Object.values(reportFilters[reportId] ?? {}).reduce((acc, f) => {
@@ -34946,7 +35100,7 @@ function Chart({
     [reportId, allReportsById]
   );
   const report = useMemo13(() => reports[reportId], [reports, reportId]);
-  const [loading, setLoading] = useState16(true);
+  const [loading, setLoading] = useState17(true);
   const [theme] = useContext16(ThemeContext);
   const colorMap = useMemo13(() => {
     if (mapColorsToFields && report && theme) {
@@ -34954,7 +35108,7 @@ function Chart({
     }
   }, [report, theme]);
   const [client, clientLoading] = useContext16(ClientContext);
-  const [error, setError] = useState16(void 0);
+  const [error, setError] = useState17(void 0);
   const updateFilter = (filter, value, comparison) => {
     let filterValue = {};
     if (filter.filterType === "string" /* String */) {
@@ -35244,7 +35398,8 @@ var ChartDisplay = ({
   onClickChartElement,
   overrideTheme,
   referenceLines,
-  showLegend = false
+  showLegend = false,
+  tableRowsLoading = false
 }) => {
   const { downloadCSV: downloadCSV2 } = useExport(reportId);
   const [theme] = useContext16(ThemeContext);
@@ -35276,7 +35431,7 @@ var ChartDisplay = ({
     }
     return void 0;
   }, [config, specificReportFilters, specificDashboardFilters]);
-  const [page, setPage] = useState16(0);
+  const [page, setPage] = useState17(0);
   if (loading) {
     return /* @__PURE__ */ jsx48("div", { className, style: containerStyle, children: /* @__PURE__ */ jsx48(LoadingComponent, {}) });
   } else if (config && !["metric", "table", "gauge", "US map", "World map"].includes(
@@ -35339,7 +35494,8 @@ var ChartDisplay = ({
         },
         onSortChange: (sort) => {
           onSortChange && onSortChange(sort);
-        }
+        },
+        isLoading: tableRowsLoading
       }
     );
   }
@@ -35702,7 +35858,7 @@ function QuillChartComponent({
 }
 
 // src/components/Dashboard/TemplateChartComponent.tsx
-import { useState as useState17 } from "react";
+import { useState as useState18 } from "react";
 import { jsx as jsx51 } from "react/jsx-runtime";
 function QuillTemplateChartComponent({
   report,
@@ -35710,7 +35866,7 @@ function QuillTemplateChartComponent({
   children,
   isLoading
 }) {
-  const [isSelected, setIsSelected] = useState17(false);
+  const [isSelected, setIsSelected] = useState18(false);
   return /* @__PURE__ */ jsx51(
     "div",
     {
@@ -35795,7 +35951,7 @@ import {
   useEffect as useEffect16,
   useMemo as useMemo14,
   useRef as useRef12,
-  useState as useState18
+  useState as useState19
 } from "react";
 import { Fragment as Fragment8, jsx as jsx53, jsxs as jsxs39 } from "react/jsx-runtime";
 var QuillSecondaryButton = ({ children, ...props }) => {
@@ -36288,9 +36444,9 @@ var FilterPopoverWrapper = ({
 }) => {
   const { tenants } = useContext19(TenantContext);
   const { eventTracking } = useContext19(EventTrackingContext);
-  const [isOpen, setIsOpen] = useState18(false);
-  const [uniqueValues, setUniqueValues] = useState18(void 0);
-  const [uniqueValuesIsLoading, setUniqueValuesIsLoading] = useState18(false);
+  const [isOpen, setIsOpen] = useState19(false);
+  const [uniqueValues, setUniqueValues] = useState19(void 0);
+  const [uniqueValuesIsLoading, setUniqueValuesIsLoading] = useState19(false);
   const prevFiltersRef = useRef12("");
   const columnInternals = useMemo14(() => {
     if (!tables) {
@@ -36385,7 +36541,7 @@ var FilterPopoverWrapper = ({
 };
 
 // src/components/ReportBuilder/FilterModal.tsx
-import { useState as useState19, useEffect as useEffect17, useMemo as useMemo15 } from "react";
+import { useState as useState20, useEffect as useEffect17, useMemo as useMemo15 } from "react";
 import { format as format8, isValid as isValid5, parse as parse4, startOfToday as startOfToday2 } from "date-fns";
 import { Fragment as Fragment9, jsx as jsx54, jsxs as jsxs40 } from "react/jsx-runtime";
 function FilterModal({
@@ -36405,26 +36561,26 @@ function FilterModal({
   MultiSelectComponent,
   reportBuilderColumns
 }) {
-  const [field, setField] = useState19("");
-  const [fieldOptions, setFieldOptions] = useState19([]);
-  const [fieldValues, setFieldValues] = useState19([]);
-  const [type, setType] = useState19(null);
-  const [value, setValue] = useState19(void 0);
-  const [selectedOptions, setSelectedOptions] = useState19([]);
-  const [operator, setOperator] = useState19(
+  const [field, setField] = useState20("");
+  const [fieldOptions, setFieldOptions] = useState20([]);
+  const [fieldValues, setFieldValues] = useState20([]);
+  const [type, setType] = useState20(null);
+  const [value, setValue] = useState20(void 0);
+  const [selectedOptions, setSelectedOptions] = useState20([]);
+  const [operator, setOperator] = useState20(
     void 0
   );
-  const [operatorOptions, setOperatorOptions] = useState19([]);
-  const [unit, setUnit] = useState19("");
-  const [unitOptions, setUnitOptions] = useState19([]);
-  const [startDate, setStartDate] = useState19(
+  const [operatorOptions, setOperatorOptions] = useState20([]);
+  const [unit, setUnit] = useState20("");
+  const [unitOptions, setUnitOptions] = useState20([]);
+  const [startDate, setStartDate] = useState20(
     startOfToday2().toISOString().substring(0, 10)
   );
-  const [endDate, setEndDate] = useState19(
+  const [endDate, setEndDate] = useState20(
     startOfToday2().toISOString().substring(0, 10)
   );
-  const [filterInitialized, setFilterInitialized] = useState19(false);
-  const [table, setTable] = useState19(void 0);
+  const [filterInitialized, setFilterInitialized] = useState20(false);
+  const [table, setTable] = useState20(void 0);
   const memoizedFieldValuesMap = useMemo15(
     () => fieldValuesMap,
     [JSON.stringify(fieldValuesMap)]
@@ -37185,7 +37341,7 @@ function FilterModal({
 }
 
 // src/components/Dashboard/TemplateMetricComponent.tsx
-import { useState as useState20 } from "react";
+import { useState as useState21 } from "react";
 import { jsx as jsx55 } from "react/jsx-runtime";
 function QuillTemplateMetricComponent({
   report,
@@ -37193,7 +37349,7 @@ function QuillTemplateMetricComponent({
   children,
   isLoading
 }) {
-  const [isSelected, setIsSelected] = useState20(false);
+  const [isSelected, setIsSelected] = useState21(false);
   return /* @__PURE__ */ jsx55(
     "div",
     {
@@ -37222,7 +37378,7 @@ function QuillTemplateMetricComponent({
 }
 
 // src/components/Dashboard/TemplateTableComponent.tsx
-import { useState as useState21 } from "react";
+import { useState as useState22 } from "react";
 import { jsx as jsx56 } from "react/jsx-runtime";
 function QuillTemplateTableComponent({
   report,
@@ -37233,7 +37389,7 @@ function QuillTemplateTableComponent({
   onPageChange,
   onSortChange
 }) {
-  const [isSelected, setIsSelected] = useState21(false);
+  const [isSelected, setIsSelected] = useState22(false);
   return /* @__PURE__ */ jsx56(
     "div",
     {
@@ -37445,8 +37601,8 @@ function Dashboard({
   templateDashboardName,
   pagination = { rowsPerPage: 10, rowsPerRequest: 50 }
 }) {
-  const [userFilters, setUserFilters] = useState22({});
-  const [selectedSection, setSelectedSection] = useState22("");
+  const [userFilters, setUserFilters] = useState23({});
+  const [selectedSection, setSelectedSection] = useState23("");
   const dataLoaderUserFilters = useMemo16(() => {
     return (filters?.map((f) => convertCustomFilter(f)) ?? []).concat(
       Object.values(userFilters)
@@ -37577,21 +37733,21 @@ function Dashboard({
   const { dispatch: dashboardFiltersDispatch } = useContext20(
     DashboardFiltersContext
   );
-  const [fieldValuesMap, setFieldValuesMap] = useState22({});
-  const [fieldValuesIsLoaded, setFieldValuesIsLoaded] = useState22(false);
-  const [addFilterPopoverIsOpen, setAddFilterPopoverIsOpen] = useState22(false);
-  const [filterListIsOpen, setFilterListIsOpen] = useState22(false);
+  const [fieldValuesMap, setFieldValuesMap] = useState23({});
+  const [fieldValuesIsLoaded, setFieldValuesIsLoaded] = useState23(false);
+  const [addFilterPopoverIsOpen, setAddFilterPopoverIsOpen] = useState23(false);
+  const [filterListIsOpen, setFilterListIsOpen] = useState23(false);
   const [
     filterListAddFilterPopoverIsOpen,
     setFilterListAddFilterPopoverIsOpen
-  ] = useState22(false);
+  ] = useState23(false);
   const presetOptions = useMemo16(() => {
     return populatedDashboardFilters?.[0]?.filterType === "date_range" ? convertPresetOptionsToSelectableList(
       populatedDashboardFilters[0].presetOptions ?? [],
       populatedDashboardFilters[0].defaultPresetRanges ?? []
     ) : defaultOptionsV2;
   }, [populatedDashboardFilters]);
-  const [filterValues, setFilterValues] = useState22({});
+  const [filterValues, setFilterValues] = useState23({});
   const prevNameRef = useRef13(name2);
   const prevFlagsRef = useRef13(flags);
   const prevClientRef = useRef13(client?.publicKey ?? "");
@@ -38490,10 +38646,10 @@ function QuillDashboardTemplate({
   const { dashboardConfig, dashboardConfigDispatch } = useContext20(
     DashboardConfigContext
   );
-  const [addItemModalIsOpen, setAddItemModalIsOpen] = useState22(false);
-  const [selectedTemplates, setSelectedTemplates] = useState22([]);
-  const [selectingTemplate, setSelectingTemplate] = useState22(false);
-  const [submittingTemplate, setSubmittingTemplate] = useState22(false);
+  const [addItemModalIsOpen, setAddItemModalIsOpen] = useState23(false);
+  const [selectedTemplates, setSelectedTemplates] = useState23([]);
+  const [selectingTemplate, setSelectingTemplate] = useState23(false);
+  const [submittingTemplate, setSubmittingTemplate] = useState23(false);
   const templateSections = data?.sections;
   const onSubmitTemplates = async () => {
     setSubmittingTemplate(true);
@@ -38639,7 +38795,7 @@ import {
   useContext as useContext21,
   useEffect as useEffect19,
   useMemo as useMemo17,
-  useState as useState23
+  useState as useState24
 } from "react";
 import { jsx as jsx59 } from "react/jsx-runtime";
 var Table = ({
@@ -38655,7 +38811,7 @@ var Table = ({
   const [schemaData] = useContext21(SchemaDataContext);
   const { eventTracking } = useContext21(EventTrackingContext);
   const { allReportsById } = useAllReports();
-  const [loading, setLoading] = useState23(false);
+  const [loading, setLoading] = useState24(false);
   const report = useMemo17(() => {
     return props.reportId ? allReportsById[props.reportId] : null;
   }, [allReportsById[props.reportId ?? ""]]);
@@ -38742,7 +38898,7 @@ var Table = ({
     clientLoading,
     !reports[props.reportId ?? ""]
   ]);
-  const [page, setPage] = useState23(0);
+  const [page, setPage] = useState24(0);
   if ("rows" in data && "columns" in data) {
     return /* @__PURE__ */ jsx59(
       QuillTable,
@@ -38803,7 +38959,7 @@ var Table_default = Table;
 
 // src/SQLEditor.tsx
 import {
-  useState as useState29,
+  useState as useState30,
   useContext as useContext28,
   useEffect as useEffect24,
   useRef as useRef18,
@@ -38816,7 +38972,7 @@ import MonacoEditor from "@monaco-editor/react";
 import {
   useEffect as useEffect22,
   useRef as useRef17,
-  useState as useState27,
+  useState as useState28,
   useContext as useContext26,
   useMemo as useMemo21
 } from "react";
@@ -38826,7 +38982,7 @@ import {
   useCallback as useCallback2,
   useContext as useContext23,
   useMemo as useMemo18,
-  useState as useState24,
+  useState as useState25,
   useEffect as useEffect20,
   useRef as useRef14
 } from "react";
@@ -39280,41 +39436,41 @@ var PivotModal = ({
   heightAdjustment = 0
 }) => {
   const { getToken, quillFetchWithToken } = useContext23(FetchContext);
-  const [isLoading, setIsLoading] = useState24(false);
-  const [previewLoading, setPreviewLoading] = useState24(false);
-  const [selectedPivotType, setSelectedPivotType] = useState24("recommended");
-  const [errors, setErrors] = useState24([]);
+  const [isLoading, setIsLoading] = useState25(false);
+  const [previewLoading, setPreviewLoading] = useState25(false);
+  const [selectedPivotType, setSelectedPivotType] = useState25("recommended");
+  const [errors, setErrors] = useState25([]);
   const [client] = useContext23(ClientContext);
   const [schemaData] = useContext23(SchemaDataContext);
   const { tenants } = useContext23(TenantContext);
   const { eventTracking } = useContext23(EventTrackingContext);
   const rowFieldRef = useRef14(null);
   const colFieldRef = useRef14(null);
-  const [pivotCardWidth, setPivotCardWidth] = useState24(420);
-  const [samplePivotTable, setSamplePivotTable] = useState24(null);
-  const [hasNoRecommendedPivots, sethasNoRecommendedPivots] = useState24(false);
-  const [isFetchingPivots, setIsFetchingPivots] = useState24(false);
-  const [allowedColumnFields, setAllowedColumnFields] = useState24([]);
-  const [allowedRowFields, setAllowedRowFields] = useState24([]);
-  const [allowedValueFields, setAllowedValueFields] = useState24([]);
-  const [uniqueValues, setUniqueValues] = useState24(initialUniqueValues);
+  const [pivotCardWidth, setPivotCardWidth] = useState25(420);
+  const [samplePivotTable, setSamplePivotTable] = useState25(null);
+  const [hasNoRecommendedPivots, sethasNoRecommendedPivots] = useState25(false);
+  const [isFetchingPivots, setIsFetchingPivots] = useState25(false);
+  const [allowedColumnFields, setAllowedColumnFields] = useState25([]);
+  const [allowedRowFields, setAllowedRowFields] = useState25([]);
+  const [allowedValueFields, setAllowedValueFields] = useState25([]);
+  const [uniqueValues, setUniqueValues] = useState25(initialUniqueValues);
   const buttonRef = useRef14(null);
-  const [dateRanges, setDateRanges] = useState24({});
-  const [pivotError, setPivotError] = useState24("");
-  const [limitInput, setLimitInput] = useState24(
+  const [dateRanges, setDateRanges] = useState25({});
+  const [pivotError, setPivotError] = useState25("");
+  const [limitInput, setLimitInput] = useState25(
     pivotLimit?.toString() ?? "100"
   );
-  const [sortFieldInput, setSortFieldInput] = useState24(
+  const [sortFieldInput, setSortFieldInput] = useState25(
     pivotSort?.sortField ?? ""
   );
-  const [sortDirectionInput, setSortDirectionInput] = useState24(
+  const [sortDirectionInput, setSortDirectionInput] = useState25(
     pivotSort?.sortDirection ?? "ASC"
   );
-  const [showLimitInput, setShowLimitInput] = useState24(!!pivotLimit);
-  const [showSortInput, setShowSortInput] = useState24(!!pivotSort);
-  const [availableHeight, setAvailableHeight] = useState24(0);
-  const [pivotModalTopHeight, setPivotModalTopHeight] = useState24(450);
-  const [popoverPosition, setPopoverPosition] = useState24(
+  const [showLimitInput, setShowLimitInput] = useState25(!!pivotLimit);
+  const [showSortInput, setShowSortInput] = useState25(!!pivotSort);
+  const [availableHeight, setAvailableHeight] = useState25(0);
+  const [pivotModalTopHeight, setPivotModalTopHeight] = useState25(450);
+  const [popoverPosition, setPopoverPosition] = useState25(
     "bottom"
   );
   const popoverRef = useRef14(null);
@@ -39592,7 +39748,7 @@ var PivotModal = ({
       return map;
     }, {});
   }, [columns]);
-  const [selectedPivotTable, setSelectedPivotTable] = useState24(null);
+  const [selectedPivotTable, setSelectedPivotTable] = useState25(null);
   useEffect20(() => {
     const fetchPivotTables = async () => {
       if (selectedPivotIndex === -1) {
@@ -40100,10 +40256,10 @@ var PivotModal = ({
       }
     }, 500);
   };
-  const [recommendedPivotTables, setRecommendedPivotTables] = useState24(
+  const [recommendedPivotTables, setRecommendedPivotTables] = useState25(
     []
   );
-  const [createdPivotTables, setCreatedPivotTables] = useState24([]);
+  const [createdPivotTables, setCreatedPivotTables] = useState25([]);
   useEffect20(() => {
     const fetchPivotTables = async () => {
       const pts = await Promise.all(
@@ -40988,7 +41144,7 @@ var validateReport = (formData, dashboardData, defaultDateFilter, allTables) =>
 
 // src/components/Chart/InternalChart.tsx
 import {
-  useState as useState25,
+  useState as useState26,
   useEffect as useEffect21,
   useContext as useContext24,
   useMemo as useMemo19,
@@ -41135,7 +41291,7 @@ function InternalChart({
       reportDateFilter.defaultPresetRanges ?? []
     ) : defaultOptionsV2;
   }, [reportDateFilter]);
-  const [filterValues, setFilterValues] = useState25({});
+  const [filterValues, setFilterValues] = useState26({});
   useEffect21(() => {
     if (reportDateFilter) {
       const customDateFilter = filters?.find(
@@ -41244,9 +41400,9 @@ function InternalChart({
     }));
     onDashboardFilterChange(filter.label, filterValue);
   };
-  const [filtersExpanded, setFiltersExpanded] = useState25(false);
+  const [filtersExpanded, setFiltersExpanded] = useState26(false);
   const filtersContainerRef = useRef15(null);
-  const [visibleFilters, setVisibleFilters] = useState25([]);
+  const [visibleFilters, setVisibleFilters] = useState26([]);
   const filtersOverflowing = useMemo19(() => {
     return visibleFilters.some((visible) => visible);
   }, [visibleFilters]);
@@ -41539,7 +41695,7 @@ import React13, {
   useContext as useContext25,
   useMemo as useMemo20,
   useRef as useRef16,
-  useState as useState26
+  useState as useState27
 } from "react";
 import { Fragment as Fragment12, jsx as jsx64, jsxs as jsxs46 } from "react/jsx-runtime";
 function QuillMultiSelectSectionList({
@@ -41557,7 +41713,7 @@ function QuillMultiSelectSectionList({
   owner
 }) {
   const [theme] = useContext25(ThemeContext);
-  const [showModal, setShowModal] = useState26(false);
+  const [showModal, setShowModal] = useState27(false);
   const modalRef = useRef16(null);
   const buttonRef = useRef16(null);
   const debounceTimeoutId = useRef16(null);
@@ -42173,14 +42329,14 @@ function createReportFromForm(formData, report, eventTracking, selectedPivotTabl
 }
 function ChartBuilderWithModal(props) {
   const parentRef = useRef17(null);
-  const [modalWidth, setModalWidth] = useState27(200);
-  const [modalHeight, setModalHeight] = useState27(200);
+  const [modalWidth, setModalWidth] = useState28(200);
+  const [modalHeight, setModalHeight] = useState28(200);
   const { isOpen, setIsOpen, title, isHorizontalView } = props;
   const Modal = props.ModalComponent ?? MemoizedModal;
   const { dashboardReports: dashboard } = useDashboardReports(
     props.destinationDashboard
   );
-  const [filtersEnabledState, setFiltersEnabledState] = useState27(
+  const [filtersEnabledState, setFiltersEnabledState] = useState28(
     !!props.reportId
   );
   useEffect22(() => {
@@ -42295,16 +42451,16 @@ function ChartBuilder({
   const report = useMemo21(() => {
     return reportId && !tempReport ? allReportsById[reportId] : tempReport;
   }, [reportId]);
-  const [windowWidth, setWindowWidth] = useState27(1200);
-  const [rows, setRows] = useState27(report?.rows ?? []);
-  const [itemQuery, setItemQuery] = useState27(report?.itemQuery);
-  const [rowCount, setRowCount] = useState27(report?.rowCount ?? 0);
-  const [maxPage, setMaxPage] = useState27(0);
-  const [isLoading, setIsLoading] = useState27(false);
-  const [rowCountIsLoading, setRowCountIsLoading] = useState27(false);
-  const [isSubmitting, setIsSubmitting] = useState27(false);
-  const [pivotCardWidth, setPivotCardWidth] = useState27(665);
-  const [formWidth, setFormWidth] = useState27(665);
+  const [windowWidth, setWindowWidth] = useState28(1200);
+  const [rows, setRows] = useState28(report?.rows ?? []);
+  const [itemQuery, setItemQuery] = useState28(report?.itemQuery);
+  const [rowCount, setRowCount] = useState28(report?.rowCount ?? 0);
+  const [maxPage, setMaxPage] = useState28(0);
+  const [isLoading, setIsLoading] = useState28(false);
+  const [rowCountIsLoading, setRowCountIsLoading] = useState28(false);
+  const [isSubmitting, setIsSubmitting] = useState28(false);
+  const [pivotCardWidth, setPivotCardWidth] = useState28(665);
+  const [formWidth, setFormWidth] = useState28(665);
   const inputRef = useRef17(null);
   const selectRef = useRef17(null);
   const processColumns = (columns2) => {
@@ -42336,10 +42492,10 @@ function ChartBuilder({
     }
     return columns2;
   };
-  const [processedColumns, setProcessedColumns] = useState27(
+  const [processedColumns, setProcessedColumns] = useState28(
     processColumns(report?.columnInternal ?? [])
   );
-  const [currentPage, setCurrentPage] = useState27(0);
+  const [currentPage, setCurrentPage] = useState28(0);
   const parentRef = useRef17(null);
   const deleteRef = useRef17(null);
   const modalPadding = 20;
@@ -42386,7 +42542,7 @@ function ChartBuilder({
       window.removeEventListener("resize", handleResize);
     };
   }, [isOpen]);
-  const [dashboardOptions, setDashboardOptions] = useState27([]);
+  const [dashboardOptions, setDashboardOptions] = useState28([]);
   const {
     reportFilters,
     loadFiltersForReport,
@@ -42395,7 +42551,7 @@ function ChartBuilder({
   } = useContext26(ReportFiltersContext);
   const { reportsDispatch } = useContext26(ReportsContext);
   const initialFilters = useRef17(reportFilters[report?.id ?? TEMP_REPORT_ID]);
-  const [reportFiltersLoaded, setReportFiltersLoaded] = useState27(!filtersEnabled);
+  const [reportFiltersLoaded, setReportFiltersLoaded] = useState28(!filtersEnabled);
   useEffect22(() => {
     if (!reportFilters[report?.id ?? TEMP_REPORT_ID]) {
       loadFiltersForReport(
@@ -42429,20 +42585,20 @@ function ChartBuilder({
       (f) => f.filter
     );
   }, [reportFilters, report?.id]);
-  const [showFilterModal, setShowFilterModal] = useState27(false);
-  const [filterIssues, setFilterIssues] = useState27([]);
-  const [showPivotPopover, setShowPivotPopover] = useState27(false);
-  const [isEdittingPivot, setIsEdittingPivot] = useState27(false);
-  const [selectedPivotIndex, setSelectedPivotIndex] = useState27(-1);
-  const [tableName, setTableName] = useState27(void 0);
-  const [includeCustomFields, setIncludeCustomFields] = useState27(
+  const [showFilterModal, setShowFilterModal] = useState28(false);
+  const [filterIssues, setFilterIssues] = useState28([]);
+  const [showPivotPopover, setShowPivotPopover] = useState28(false);
+  const [isEdittingPivot, setIsEdittingPivot] = useState28(false);
+  const [selectedPivotIndex, setSelectedPivotIndex] = useState28(-1);
+  const [tableName, setTableName] = useState28(void 0);
+  const [includeCustomFields, setIncludeCustomFields] = useState28(
     report ? !!report.includeCustomFields : !!client?.featureFlags?.customFieldsEnabled
   );
   const selectedTable = schemaData.schema?.find(
     (t) => t.displayName === tableName
   );
-  const [pivotPopUpTitle, setPivotPopUpTitle] = useState27("Add pivot");
-  const [pivotError, setPivotError] = useState27(void 0);
+  const [pivotPopUpTitle, setPivotPopUpTitle] = useState28("Add pivot");
+  const [pivotError, setPivotError] = useState28(void 0);
   const pivotData = report?.pivotRows && report?.pivotColumns ? {
     rows: report.pivotRows,
     columns: report.pivotColumns,
@@ -42453,19 +42609,19 @@ function ChartBuilder({
   const columns = report?.columnInternal ?? [];
   const destinationDashboardName = report?.dashboardName || destinationDashboard;
   const query = report?.queryString;
-  const [loadingFormData, setLoadingFormData] = useState27(false);
-  const [triggeredEditChart, setTriggeredEditChart] = useState27(false);
-  const [createdPivots, setCreatedPivots] = useState27(
+  const [loadingFormData, setLoadingFormData] = useState28(false);
+  const [triggeredEditChart, setTriggeredEditChart] = useState28(false);
+  const [createdPivots, setCreatedPivots] = useState28(
     report?.pivot ? [report.pivot] : cp
   );
-  const [recommendedPivots, setRecommendedPivots] = useState27(rp);
-  const [pivotRowField, setPivotRowField] = useState27(
+  const [recommendedPivots, setRecommendedPivots] = useState28(rp);
+  const [pivotRowField, setPivotRowField] = useState28(
     report?.pivot?.rowField
   );
-  const [pivotColumnField, setPivotColumnField] = useState27(
+  const [pivotColumnField, setPivotColumnField] = useState28(
     report?.pivot?.columnField
   );
-  const [pivotAggregations, setPivotAggregations] = useState27(
+  const [pivotAggregations, setPivotAggregations] = useState28(
     report?.pivot?.aggregations ?? [
       {
         valueField: report?.pivot?.valueField,
@@ -42474,10 +42630,10 @@ function ChartBuilder({
       }
     ]
   );
-  const [pivotLimit, setPivotLimit] = useState27(
+  const [pivotLimit, setPivotLimit] = useState28(
     report?.pivot?.rowLimit
   );
-  const [pivotSort, setPivotSort] = useState27(
+  const [pivotSort, setPivotSort] = useState28(
     report?.pivot?.sort && report?.pivot?.sortDirection && report?.pivot?.sortField ? {
       sortField: report.pivot.sortField,
       sortDirection: report.pivot.sortDirection
@@ -42490,16 +42646,16 @@ function ChartBuilder({
       rowsPerRequest: report?.chartType === "table" ? 50 : 500
     }
   };
-  const [currentProcessing, setCurrentProcessing] = useState27(baseProcessing);
-  const [customTenantAccess, setCustomTenantAccess] = useState27(
+  const [currentProcessing, setCurrentProcessing] = useState28(baseProcessing);
+  const [customTenantAccess, setCustomTenantAccess] = useState28(
     !!Object.values(report?.flags ?? {}).length
   );
-  const [dateFieldOptions, setDateFieldOptions] = useState27([]);
-  const [allTables, setAllTables] = useState27([]);
-  const [customFieldTableRef, setCustomFieldTableRef] = useState27(false);
-  const [referencedColumns, setReferencedColumns] = useState27({});
-  const [referencedColumnsWithoutStar, setReferencedColumnsWithoutStar] = useState27({});
-  const [filterMap, setFilterMap] = useState27(report?.filterMap ?? {});
+  const [dateFieldOptions, setDateFieldOptions] = useState28([]);
+  const [allTables, setAllTables] = useState28([]);
+  const [customFieldTableRef, setCustomFieldTableRef] = useState28(false);
+  const [referencedColumns, setReferencedColumns] = useState28({});
+  const [referencedColumnsWithoutStar, setReferencedColumnsWithoutStar] = useState28({});
+  const [filterMap, setFilterMap] = useState28(report?.filterMap ?? {});
   const canonicalFilterMap = useMemo21(() => {
     return Object.fromEntries(
       Object.entries(filterMap).filter(
@@ -42526,7 +42682,7 @@ function ChartBuilder({
       {}
     );
   }, [specificDashboardFilters, filterMap, allTables]);
-  const [formFlags, setFormFlags] = useState27(
+  const [formFlags, setFormFlags] = useState28(
     report?.flags ? Object.fromEntries(
       Object.entries(report.flags).map(([key, value]) => {
         if (value === ALL_TENANTS) {
@@ -42543,7 +42699,7 @@ function ChartBuilder({
       })
     ) : void 0
   );
-  const [defaultDateField, setDefaultDateField] = useState27({
+  const [defaultDateField, setDefaultDateField] = useState28({
     table: dateFieldOptions[0]?.name || "",
     field: dateFieldOptions[0]?.columns[0]?.field || ""
   });
@@ -42701,7 +42857,7 @@ function ChartBuilder({
     }
     return chartBuilderData;
   };
-  const [formData, setFormData] = useState27(
+  const [formData, setFormData] = useState28(
     formFormDataFromReport(report, destinationSection ?? getCurrentSection())
   );
   const reportCustomFields = useMemo21(() => {
@@ -42755,7 +42911,7 @@ function ChartBuilder({
     const columnsObservedInRows = rows[0] ? Object.keys(rows[0]) : [];
     return columns.filter((col) => !columnsObservedInRows.includes(col.field));
   }, [rows]);
-  const [chartTypes, setChartTypes] = useState27(
+  const [chartTypes, setChartTypes] = useState28(
     (() => {
       const data = formFormDataFromReport(
         report,
@@ -42971,7 +43127,7 @@ function ChartBuilder({
       {}
     ) ?? {};
   }, [client?.allTenantTypes]);
-  const [selectedPivotTable, setSelectedPivotTable] = useState27(pivotData);
+  const [selectedPivotTable, setSelectedPivotTable] = useState28(pivotData);
   const pivotCardTable = useMemo21(() => {
     return {
       pivot: formData.pivot,
@@ -45593,7 +45749,7 @@ var createDebounce = (func, delay) => {
 };
 
 // src/hooks/useLongLoading.tsx
-import { useContext as useContext27, useEffect as useEffect23, useState as useState28 } from "react";
+import { useContext as useContext27, useEffect as useEffect23, useState as useState29 } from "react";
 function useLongLoading(isLoading, meta) {
   const {
     origin,
@@ -45601,8 +45757,8 @@ function useLongLoading(isLoading, meta) {
     abnormalLoadTime = 15e3,
     loadDescription
   } = meta;
-  const [isLongLoading, setIsLongLoading] = useState28(false);
-  const [isAbnormalLoading, setIsAbnormalLoading] = useState28(false);
+  const [isLongLoading, setIsLongLoading] = useState29(false);
+  const [isAbnormalLoading, setIsAbnormalLoading] = useState29(false);
   const { eventTracking } = useContext27(EventTrackingContext);
   useEffect23(() => {
     let longTimer = null;
@@ -45780,7 +45936,7 @@ function SQLEditor({
   onClickChartElement,
   onRequestAddVirtualTable
 }) {
-  const [sqlPrompt, setSqlPrompt] = useState29("");
+  const [sqlPrompt, setSqlPrompt] = useState30("");
   const [client] = useContext28(ClientContext);
   const [theme] = useContext28(ThemeContext);
   const { tenants } = useContext28(TenantContext);
@@ -45795,9 +45951,9 @@ function SQLEditor({
   const destinationDashboardConfig = useMemo22(() => {
     return dashboards?.find((d) => d.name === destinationDashboard);
   }, [dashboards, destinationDashboard]);
-  const [query, setQuery] = useState29(defaultQuery);
-  const [rows, setRows] = useState29([]);
-  const [columns, setColumns] = useState29([]);
+  const [query, setQuery] = useState30(defaultQuery);
+  const [rows, setRows] = useState30([]);
+  const [columns, setColumns] = useState30([]);
   const [schemaData] = useContext28(SchemaDataContext);
   const { dashboardFilters } = useContext28(DashboardFiltersContext);
   const specificDashboardFilters = useMemo22(() => {
@@ -45805,37 +45961,37 @@ function SQLEditor({
       dashboardFilters[report?.dashboardName ?? destinationDashboard ?? ""] ?? {}
     ).map((f) => f.filter);
   }, [dashboardFilters, destinationDashboard]);
-  const [errorMessage, setErrorMessage] = useState29("");
-  const [sqlResponseLoading, setSqlResponseLoading] = useState29(false);
+  const [errorMessage, setErrorMessage] = useState30("");
+  const [sqlResponseLoading, setSqlResponseLoading] = useState30(false);
   useLongLoading(sqlResponseLoading, {
     origin: "SQLEditor",
     loadDescription: "Loading SQL response"
   });
-  const [sqlQueryLoading, setSqlQueryLoading] = useState29(false);
+  const [sqlQueryLoading, setSqlQueryLoading] = useState30(false);
   useLongLoading(sqlQueryLoading, {
     origin: "SQLEditor",
     loadDescription: "Loading SQL query"
   });
-  const [isChartBuilderOpen, setIsChartBuilderOpen] = useState29(false);
-  const [displayTable, setDisplayTable] = useState29(false);
-  const [formattedRows, setFormattedRows] = useState29([]);
+  const [isChartBuilderOpen, setIsChartBuilderOpen] = useState30(false);
+  const [displayTable, setDisplayTable] = useState30(false);
+  const [formattedRows, setFormattedRows] = useState30([]);
   const formRef = useRef18(null);
   const sidebarRef = useRef18(null);
-  const [searchBarWidth, setSearchBarWidth] = useState29(200);
-  const [showSearchBar, setShowSearchBar] = useState29(false);
-  const [filterBarWidth, setFilterBarWidth] = useState29(200);
-  const [rowCount, setRowCount] = useState29(void 0);
-  const [rowCountIsLoading, setRowCountIsLoading] = useState29(false);
-  const [maxPage, setMaxPage] = useState29(1);
-  const [tableSearchQuery, setTableSearchQuery] = useState29("");
-  const [lastSuccessfulQuery, setLastSuccessfulQuery] = useState29("");
-  const [isSaveQueryModalOpen, setIsSaveQueryModalOpen] = useState29(false);
-  const [tempReport, setTempReport] = useState29({
+  const [searchBarWidth, setSearchBarWidth] = useState30(200);
+  const [showSearchBar, setShowSearchBar] = useState30(false);
+  const [filterBarWidth, setFilterBarWidth] = useState30(200);
+  const [rowCount, setRowCount] = useState30(void 0);
+  const [rowCountIsLoading, setRowCountIsLoading] = useState30(false);
+  const [maxPage, setMaxPage] = useState30(1);
+  const [tableSearchQuery, setTableSearchQuery] = useState30("");
+  const [lastSuccessfulQuery, setLastSuccessfulQuery] = useState30("");
+  const [isSaveQueryModalOpen, setIsSaveQueryModalOpen] = useState30(false);
+  const [tempReport, setTempReport] = useState30({
     ...EMPTY_INTERNAL_REPORT,
     ...report
   });
   const tableRef = useRef18(null);
-  const [cachedHeight, setCachedHeight] = useState29(0);
+  const [cachedHeight, setCachedHeight] = useState30(0);
   const DEFAULT_ROWS_PER_PAGE = 5;
   const ROW_HEIGHT = 37;
   const TABLE_TAB_HEIGHT = 75;
@@ -45872,8 +46028,8 @@ function SQLEditor({
       rowsPerPage * 10
     )
   };
-  const [currentPage, setCurrentPage] = useState29(0);
-  const [currentSort, setCurrentSort] = useState29(void 0);
+  const [currentPage, setCurrentPage] = useState30(0);
+  const [currentSort, setCurrentSort] = useState30(void 0);
   const currentProcessing = useMemo22(() => {
     return {
       page: {
@@ -46777,7 +46933,7 @@ var SQLEditorComponent = ({
   loading,
   LoadingComponent = QuillLoadingComponent
 }) => {
-  const [editorKey, setEditorKey] = useState29(0);
+  const [editorKey, setEditorKey] = useState30(0);
   const { eventTracking } = useContext28(EventTrackingContext);
   const currentProvider = useRef18(null);
   useEffect24(() => {
@@ -47021,7 +47177,7 @@ function SchemaItem({
   index,
   onClick
 }) {
-  const [isOpen, setIsOpen] = useState29(index === 0);
+  const [isOpen, setIsOpen] = useState30(index === 0);
   const schemaContainerStyle = {
     display: "flex",
     flexDirection: "column"
@@ -47252,11 +47408,11 @@ import {
   useContext as useContext32,
   useEffect as useEffect28,
   useRef as useRef20,
-  useState as useState35
+  useState as useState36
 } from "react";
 
 // src/hooks/useReportBuilder.tsx
-import { useContext as useContext29, useEffect as useEffect25, useMemo as useMemo23, useState as useState30 } from "react";
+import { useContext as useContext29, useEffect as useEffect25, useMemo as useMemo23, useState as useState31 } from "react";
 var useReportBuilderInternal = ({
   reportId,
   initialTableName,
@@ -47298,18 +47454,18 @@ var useReportBuilderInternal = ({
     rowsPerPage: _rowsPerPage,
     rowsPerRequest: _rowsPerRequest
   };
-  const [openPopover, setOpenPopover] = useState30(null);
-  const [aiPrompt, setAiPrompt] = useState30("");
-  const [reportBuilderLoading, setReportBuilderLoading] = useState30(false);
-  const [tableLoading, setTableLoading] = useState30(false);
-  const [errorMessage, setErrorMessage] = useState30("");
-  const [unresolvedReportMessage, setUnresolvedReportMessage] = useState30("");
-  const [tables, setTables] = useState30([]);
-  const [columns, setColumns] = useState30([]);
-  const [filterStack, setFilterStack] = useState30([]);
-  const [pivot, setPivot] = useState30(null);
-  const [sort, setSort] = useState30([]);
-  const [limit, setLimit] = useState30(null);
+  const [openPopover, setOpenPopover] = useState31(null);
+  const [aiPrompt, setAiPrompt] = useState31("");
+  const [reportBuilderLoading, setReportBuilderLoading] = useState31(false);
+  const [tableLoading, setTableLoading] = useState31(false);
+  const [errorMessage, setErrorMessage] = useState31("");
+  const [unresolvedReportMessage, setUnresolvedReportMessage] = useState31("");
+  const [tables, setTables] = useState31([]);
+  const [columns, setColumns] = useState31([]);
+  const [filterStack, setFilterStack] = useState31([]);
+  const [pivot, setPivot] = useState31(null);
+  const [sort, setSort] = useState31([]);
+  const [limit, setLimit] = useState31(null);
   const reportBuilderState = useMemo23(() => {
     return {
       tables,
@@ -47320,30 +47476,30 @@ var useReportBuilderInternal = ({
       limit
     };
   }, [columns, filterStack, limit, pivot, sort, tables]);
-  const [stateStack, setStateStack] = useState30([]);
-  const [poppedStateStack, setPoppedStateStack] = useState30([]);
-  const [activeQuery, setActiveQuery] = useState30("");
-  const [queryOutOfSync, setQueryOutOfSync] = useState30(false);
-  const [unfilteredUniqueValues, setUnfilteredUniqueValues] = useState30({});
-  const [unfilteredUniqueValuesIsLoading, setUnfilteredUniqueValuesIsLoading] = useState30(false);
-  const [filteredUniqueValues, setFilteredUniqueValues] = useState30(null);
-  const [filteredUniqueValuesIsLoading, setFilteredUniqueValuesIsLoading] = useState30(false);
-  const [columnUniqueValues, setColumnUniqueValues] = useState30({});
-  const [dateRanges, setDateRanges] = useState30(null);
-  const [tempReport, setTempReport] = useState30({
+  const [stateStack, setStateStack] = useState31([]);
+  const [poppedStateStack, setPoppedStateStack] = useState31([]);
+  const [activeQuery, setActiveQuery] = useState31("");
+  const [queryOutOfSync, setQueryOutOfSync] = useState31(false);
+  const [unfilteredUniqueValues, setUnfilteredUniqueValues] = useState31({});
+  const [unfilteredUniqueValuesIsLoading, setUnfilteredUniqueValuesIsLoading] = useState31(false);
+  const [filteredUniqueValues, setFilteredUniqueValues] = useState31(null);
+  const [filteredUniqueValuesIsLoading, setFilteredUniqueValuesIsLoading] = useState31(false);
+  const [columnUniqueValues, setColumnUniqueValues] = useState31({});
+  const [dateRanges, setDateRanges] = useState31(null);
+  const [tempReport, setTempReport] = useState31({
     ...EMPTY_INTERNAL_REPORT,
     pagination: REPORT_BUILDER_PAGINATION
   });
-  const [currentProcessing, setCurrentProcessing] = useState30({
+  const [currentProcessing, setCurrentProcessing] = useState31({
     page: REPORT_BUILDER_PAGINATION
   });
-  const [previousPage, setPreviousPage] = useState30(0);
-  const [reportColumns, setReportColumns] = useState30([]);
-  const [reportRows, setReportRows] = useState30([]);
-  const [formattedRows, setFormattedRows] = useState30([]);
-  const [pivotData, setPivotData] = useState30(null);
-  const [numberOfRows, setNumberOfRows] = useState30(0);
-  const [rowCountIsLoading, setRowCountIsLoading] = useState30(false);
+  const [previousPage, setPreviousPage] = useState31(0);
+  const [reportColumns, setReportColumns] = useState31([]);
+  const [reportRows, setReportRows] = useState31([]);
+  const [formattedRows, setFormattedRows] = useState31([]);
+  const [pivotData, setPivotData] = useState31(null);
+  const [numberOfRows, setNumberOfRows] = useState31(0);
+  const [rowCountIsLoading, setRowCountIsLoading] = useState31(false);
   const reportColumnsToStateColumns = useMemo23(() => {
     const positionMap = {};
     columns.forEach((column, index) => {
@@ -47362,28 +47518,28 @@ var useReportBuilderInternal = ({
       }
     });
   }, [columns, reportColumns]);
-  const [pivotRowField, setPivotRowField] = useState30(
+  const [pivotRowField, setPivotRowField] = useState31(
     void 0
   );
-  const [pivotColumnField, setPivotColumnField] = useState30(
+  const [pivotColumnField, setPivotColumnField] = useState31(
     void 0
   );
-  const [pivotAggregations, setPivotAggregations] = useState30([]);
-  const [pivotLimit, setPivotLimit] = useState30(void 0);
-  const [pivotSort, setPivotSort] = useState30(void 0);
-  const [pivotHint, setPivotHint] = useState30("");
-  const [pivotError, setPivotError] = useState30("");
-  const [createdPivots, setCreatedPivots] = useState30([]);
-  const [recommendedPivots, setRecommendedPivots] = useState30([]);
-  const [pivotPopUpTitle, setPivotPopUpTitle] = useState30("Add pivot");
-  const [showPivotPopover, setShowPivotPopover] = useState30(false);
-  const [isEditingPivot, setIsEditingPivot] = useState30(false);
-  const [selectedPivotIndex, setSelectedPivotIndex] = useState30(-1);
+  const [pivotAggregations, setPivotAggregations] = useState31([]);
+  const [pivotLimit, setPivotLimit] = useState31(void 0);
+  const [pivotSort, setPivotSort] = useState31(void 0);
+  const [pivotHint, setPivotHint] = useState31("");
+  const [pivotError, setPivotError] = useState31("");
+  const [createdPivots, setCreatedPivots] = useState31([]);
+  const [recommendedPivots, setRecommendedPivots] = useState31([]);
+  const [pivotPopUpTitle, setPivotPopUpTitle] = useState31("Add pivot");
+  const [showPivotPopover, setShowPivotPopover] = useState31(false);
+  const [isEditingPivot, setIsEditingPivot] = useState31(false);
+  const [selectedPivotIndex, setSelectedPivotIndex] = useState31(-1);
   const [
     pivotRecommendationsEnabledState,
     setPivotRecommendationsEnabledState
-  ] = useState30(pivotRecommendationsEnabled);
-  const [askAILoading, setAskAILoading] = useState30(false);
+  ] = useState31(pivotRecommendationsEnabled);
+  const [askAILoading, setAskAILoading] = useState31(false);
   const loading = reportBuilderLoading || tableLoading;
   useLongLoading(reportBuilderLoading, {
     origin: "ReportBuilder",
@@ -48766,7 +48922,7 @@ var useReportBuilder = ({
 };
 
 // src/components/ReportBuilder/AddColumnModal.tsx
-import { useState as useState31, useRef as useRef19, useMemo as useMemo24, useEffect as useEffect26, useContext as useContext30 } from "react";
+import { useState as useState32, useRef as useRef19, useMemo as useMemo24, useEffect as useEffect26, useContext as useContext30 } from "react";
 import {
   DndContext,
   closestCenter,
@@ -48799,14 +48955,14 @@ function AddColumnModal({
   LoadingComponent = QuillLoadingComponent,
   onRequestAddVirtualTable
 }) {
-  const [primaryTable, setPrimaryTable] = useState31(
+  const [primaryTable, setPrimaryTable] = useState32(
     selectedTables[0]?.name
   );
   const [theme] = useContext30(ThemeContext);
-  const [search, setSearch] = useState31("");
-  const [initialLoad, setInitialLoad] = useState31(true);
+  const [search, setSearch] = useState32("");
+  const [initialLoad, setInitialLoad] = useState32(true);
   const textInputContainerRef = useRef19(null);
-  const [modalSelectedColumns, setModalSelectedColumns] = useState31(
+  const [modalSelectedColumns, setModalSelectedColumns] = useState32(
     selectedColumns.map((col) => `${col.table}.${col.field}`)
   );
   const columnOptions = useMemo24(() => {
@@ -48833,7 +48989,7 @@ function AddColumnModal({
       })
     );
   }, [schema, primaryTable]);
-  const [orderedColumnNames, setOrderedColumnNames] = useState31([]);
+  const [orderedColumnNames, setOrderedColumnNames] = useState32([]);
   const isSelectedAllColumns = columnOptions.length === modalSelectedColumns.length;
   const searchResults = useMemo24(() => {
     return orderedColumnNames.filter((column) => {
@@ -49725,7 +49881,7 @@ var AddFilters = ({
 };
 
 // src/internals/ReportBuilder/PivotForm.tsx
-import { useContext as useContext31, useEffect as useEffect27, useState as useState32 } from "react";
+import { useContext as useContext31, useEffect as useEffect27, useState as useState33 } from "react";
 import { jsx as jsx73, jsxs as jsxs53 } from "react/jsx-runtime";
 function PivotForm({
   pivotRowField,
@@ -49752,21 +49908,21 @@ function PivotForm({
   isLoading,
   pivotHint
 }) {
-  const [allowedColumnFields, setAllowedColumnFields] = useState32([]);
-  const [allowedRowFields, setAllowedRowFields] = useState32([]);
-  const [allowedValueFields, setAllowedValueFields] = useState32([]);
+  const [allowedColumnFields, setAllowedColumnFields] = useState33([]);
+  const [allowedRowFields, setAllowedRowFields] = useState33([]);
+  const [allowedValueFields, setAllowedValueFields] = useState33([]);
   const [theme] = useContext31(ThemeContext);
-  const [limitInput, setLimitInput] = useState32(
+  const [limitInput, setLimitInput] = useState33(
     pivotLimit?.toString() ?? ""
   );
-  const [sortFieldInput, setSortFieldInput] = useState32(
+  const [sortFieldInput, setSortFieldInput] = useState33(
     pivotSort?.sortField ?? ""
   );
-  const [sortDirectionInput, setSortDirectionInput] = useState32(
+  const [sortDirectionInput, setSortDirectionInput] = useState33(
     pivotSort?.sortDirection ?? ""
   );
-  const [showLimitInput, setShowLimitInput] = useState32(!!pivotLimit);
-  const [showSortInput, setShowSortInput] = useState32(!!pivotSort);
+  const [showLimitInput, setShowLimitInput] = useState33(!!pivotLimit);
+  const [showSortInput, setShowSortInput] = useState33(!!pivotSort);
   useEffect27(() => {
     if (uniqueValues) {
       const possibleColumns = getPossiblePivotFieldOptions(
@@ -50395,7 +50551,7 @@ var AddPivot = ({
 };
 
 // src/components/ReportBuilder/AddLimitPopover.tsx
-import { useState as useState33 } from "react";
+import { useState as useState34 } from "react";
 import { Fragment as Fragment14, jsx as jsx75, jsxs as jsxs55 } from "react/jsx-runtime";
 var LimitSentence = ({
   limit,
@@ -50410,7 +50566,7 @@ var LimitSentence = ({
   SecondaryButton = MemoizedSecondaryButton,
   disabled = false
 }) => {
-  const [isOpen, setIsOpen] = useState33(false);
+  const [isOpen, setIsOpen] = useState34(false);
   const handleClickDelete = () => {
     setOpenPopover(null);
     handleDelete();
@@ -50452,7 +50608,7 @@ var AddLimitPopover = ({
   Button = MemoizedButton,
   SecondaryButton = MemoizedSecondaryButton
 }) => {
-  const [limit, setLimit] = useState33(initialLimit.toString());
+  const [limit, setLimit] = useState34(initialLimit.toString());
   const MAX_LIMIT = 2147483647;
   return /* @__PURE__ */ jsxs55("div", { style: { display: "flex", flexDirection: "column", gap: 12 }, children: [
     /* @__PURE__ */ jsx75(
@@ -50693,7 +50849,7 @@ var AddLimit = ({
 };
 
 // src/components/ReportBuilder/AddSortPopover.tsx
-import { useState as useState34 } from "react";
+import { useState as useState35 } from "react";
 import { Fragment as Fragment15, jsx as jsx77, jsxs as jsxs57 } from "react/jsx-runtime";
 var SORT_VALUE_TO_LABEL = {
   ASC: "ascending",
@@ -50716,7 +50872,7 @@ var SortSentence = ({
   SecondaryButton = MemoizedSecondaryButton,
   disabled = false
 }) => {
-  const [isOpen, setIsOpen] = useState34(false);
+  const [isOpen, setIsOpen] = useState35(false);
   const handleSetIsOpen = (isOpen2) => {
     setIsOpen(isOpen2);
   };
@@ -50768,8 +50924,8 @@ var AddSortPopover = ({
   Button = MemoizedButton,
   SecondaryButton = MemoizedSecondaryButton
 }) => {
-  const [sortColumn, setSortColumn] = useState34(column || "");
-  const [sortDirection, setSortDirection] = useState34(
+  const [sortColumn, setSortColumn] = useState35(column || "");
+  const [sortDirection, setSortDirection] = useState35(
     direction || "ASC"
   );
   return /* @__PURE__ */ jsxs57("div", { style: { display: "flex", flexDirection: "column", gap: 12 }, children: [
@@ -51222,10 +51378,10 @@ function ReportBuilder({
   const [theme] = useContext32(ThemeContext);
   const parentRef = useRef20(null);
   const askAIContainerRef = useRef20(null);
-  const [askAIInputWidth, setAskAIInputWidth] = useState35(-1);
-  const [isCopying, setIsCopying] = useState35(false);
-  const [isChartBuilderOpen, setIsChartBuilderOpen] = useState35(false);
-  const [isSaveQueryModalOpen, setIsSaveQueryModalOpen] = useState35(false);
+  const [askAIInputWidth, setAskAIInputWidth] = useState36(-1);
+  const [isCopying, setIsCopying] = useState36(false);
+  const [isChartBuilderOpen, setIsChartBuilderOpen] = useState36(false);
+  const [isSaveQueryModalOpen, setIsSaveQueryModalOpen] = useState36(false);
   const reportBuilder = useReportBuilderInternal({
     reportId,
     initialTableName,
@@ -51714,7 +51870,7 @@ import {
   useEffect as useEffect29,
   useMemo as useMemo26,
   useRef as useRef21,
-  useState as useState36
+  useState as useState37
 } from "react";
 import { jsx as jsx82 } from "react/jsx-runtime";
 function ChartEditor({
@@ -51757,8 +51913,8 @@ function ChartEditor({
   onClickChartError
 }) {
   const parentRef = useRef21(null);
-  const [modalWidth, setModalWidth] = useState36(200);
-  const [modalHeight, setModalHeight] = useState36(200);
+  const [modalWidth, setModalWidth] = useState37(200);
+  const [modalHeight, setModalHeight] = useState37(200);
   const { addReport } = useDashboardReports(destinationDashboard);
   const { allReportsById } = useAllReports();
   const { tenants, flags } = useContext33(TenantContext);
@@ -51776,8 +51932,8 @@ function ChartEditor({
       (f) => f.filter
     );
   }, [dashboardFilters]);
-  const [filtersEnabled, setFiltersEnabled] = useState36(true);
-  const [chartBuilderKey, setChartBuilderKey] = useState36(0);
+  const [filtersEnabled, setFiltersEnabled] = useState37(true);
+  const [chartBuilderKey, setChartBuilderKey] = useState37(0);
   const dateFilter = Object.values(specificDashboardFilters).find(
     (filter) => filter.filterType === "date_range"
   );
@@ -51914,11 +52070,32 @@ function StaticChart({
   containerStyle,
   showLegend = false
 }) {
-  const { report, loading } = useDashboardReport(reportId);
+  const {
+    report,
+    loading,
+    pageNumber,
+    pageLoading,
+    nextPage,
+    prevPage,
+    sortRows
+  } = useDashboardReportInternal(reportId);
   const mergedStyle = {
     ...report?.chartType ? CHART_TYPE_STYLES[report.chartType] || DEFAULT_STYLE : DEFAULT_STYLE,
     ...containerStyle
   };
+  const onPageChange = (page) => {
+    if (page == pageNumber - 1) {
+      prevPage();
+    } else if (page == pageNumber + 1) {
+      nextPage();
+    }
+  };
+  const onSortChange = (sort) => {
+    sortRows({
+      field: sort.field,
+      direction: sort.direction
+    });
+  };
   return /* @__PURE__ */ jsx83(
     ChartDisplay,
     {
@@ -51930,7 +52107,10 @@ function StaticChart({
       onClickChartElement,
       loading,
       containerStyle: mergedStyle,
-      showLegend
+      showLegend,
+      onPageChange,
+      tableRowsLoading: pageLoading,
+      onSortChange
     }
   );
 }
@@ -51974,7 +52154,7 @@ var useTenants = (dashboardName) => {
 };
 
 // src/hooks/useQuill.ts
-import { useContext as useContext35, useEffect as useEffect31, useMemo as useMemo27, useState as useState37 } from "react";
+import { useContext as useContext35, useEffect as useEffect31, useMemo as useMemo27, useState as useState38 } from "react";
 var useQuill = (reportId, pagination) => {
   const { reports, reportsDispatch, fetchIndividualReport } = useContext35(ReportsContext);
   const { allReportsById } = useAllReports();
@@ -51994,9 +52174,9 @@ var useQuill = (reportId, pagination) => {
   const [client, isClientLoading] = useContext35(ClientContext);
   const { tenants } = useContext35(TenantContext);
   const { eventTracking } = useContext35(EventTrackingContext);
-  const [loading, setLoading] = useState37(true);
-  const [error, setError] = useState37(void 0);
-  const [previousPage, setPreviousPage] = useState37(0);
+  const [loading, setLoading] = useState38(true);
+  const [error, setError] = useState38(void 0);
+  const [previousPage, setPreviousPage] = useState38(0);
   const processedReport = useMemo27(() => {
     return reportId && allReportsById[reportId] ? convertInternalReportToReport(
       mergeComparisonRange(allReportsById[reportId]),
@@ -52005,7 +52185,7 @@ var useQuill = (reportId, pagination) => {
       "useQuill"
     ) : void 0;
   }, [reportId, reportId && allReportsById[reportId], specificReportFilters]);
-  const [additionalProcessing, setAdditionProcessing] = useState37(
+  const [additionalProcessing, setAdditionProcessing] = useState38(
     pagination ? {
       page: pagination
     } : void 0
@@ -52220,7 +52400,7 @@ var useMemoizedRows = (reportId) => {
 };
 
 // src/hooks/useAskQuill.tsx
-import { useContext as useContext36, useEffect as useEffect32, useState as useState38 } from "react";
+import { useContext as useContext36, useEffect as useEffect32, useState as useState39 } from "react";
 function convertColumnInternalToAskQuillColumn(columns) {
   return columns.map((column) => {
     let convertedFieldType = FieldType.String;
@@ -52249,8 +52429,8 @@ var useAskQuill = (dashboardName) => {
   const { tenants } = useContext36(TenantContext);
   const { getToken } = useContext36(FetchContext);
   const { eventTracking } = useContext36(EventTrackingContext);
-  const [astInfo, setAstInfo] = useState38(void 0);
-  const [data, setData] = useState38({
+  const [astInfo, setAstInfo] = useState39(void 0);
+  const [data, setData] = useState39({
     rows: [],
     columns: [],
     pivot: null,
@@ -52260,9 +52440,9 @@ var useAskQuill = (dashboardName) => {
     pivotColumnFields: [],
     pivotValueFields: []
   });
-  const [loading, setLoading] = useState38(false);
-  const [error, setError] = useState38(void 0);
-  const [ask, setAsk] = useState38(
+  const [loading, setLoading] = useState39(false);
+  const [error, setError] = useState39(void 0);
+  const [ask, setAsk] = useState39(
     async () => void 0
   );
   const askHelper = async (query) => {
@@ -52476,13 +52656,13 @@ var useAskQuill = (dashboardName) => {
 };
 
 // src/hooks/useVirtualTables.tsx
-import { useContext as useContext37, useState as useState39 } from "react";
+import { useContext as useContext37, useState as useState40 } from "react";
 var useVirtualTables = () => {
   const [schemaData, setSchemaData] = useContext37(SchemaDataContext);
   const { tenants } = useContext37(TenantContext);
   const { getToken, quillFetchWithToken } = useContext37(FetchContext);
   const { eventTracking } = useContext37(EventTrackingContext);
-  const [loadingTables, setLoadingTables] = useState39({});
+  const [loadingTables, setLoadingTables] = useState40({});
   const handleReload = async (client, caller) => {
     setSchemaData({ ...schemaData, isSchemaLoading: true });
     setLoadingTables(