@quillsql/react 2.13.24 → 2.13.26

package/dist/esm/ChartBuilder.js

@@ -1,23 +1,29 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { useEffect, useRef, useState, useContext, useMemo, } from 'react';
-import { ClientContext, DashboardConfigContext, DashboardContext, DashboardFiltersContext, SchemaDataContext, ThemeContext, } from './Context';
+import { ClientContext, DashboardConfigContext, DashboardContext, DashboardFiltersContext, ReportFiltersContext, SchemaDataContext, ThemeContext, } from './Context';
 import { getDataFromCloud } from './utils/dataFetcher';
 import { PivotModal, generatePivotTable, isDateField, } from './internals/ReportBuilder/PivotModal';
 import { PivotCard } from './internals/ReportBuilder/PivotList';
-import { ChartDisplay } from './Chart';
 import { MemoizedModal, QuillTextInput, MemoizedButton, MemoizedSecondaryButton, MemoizedHeader, MemoizedLabel, MemoizedDeleteButton, MemoizedText, MemoizedPopover, QuillTableComponent, QuillChartBuilderInputRowContainer, QuillChartBuilderInputColumnContainer, MemoizedSubHeader, QuillErrorMessageComponent, QuillPivotRowContainer, QuillPivotColumnContainer, QuillChartBuilderFormContainer, QuillLoadingComponent, } from './components/UiComponents';
 import { removeDoubleQuotes, snakeAndCamelCaseToTitleCase, } from './utils/textProcessing';
 import { QuillSelectComponent } from './components/QuillSelect';
+import { TEMP_REPORT_ID, } from './models/Report';
 import { QuillCard } from './components/QuillCard';
 import { quillFormat } from './utils/valueFormatter';
-import { convertFieldTypeToJSType } from './utils/columnProcessing';
+import { convertFieldTypeToJSType, isStringType, } from './utils/columnProcessing';
 import { getSelectFromAST, getTablesHelper } from './utils/astProcessing';
-import { getDateBucketFromRange } from './utils/dates';
 import { validateReport } from './utils/validation';
 import { QuillChartErrorWithAction } from './components/Chart/ChartError';
-import { convertInternalReportToReport, saveReport } from './utils/report';
-import AdjustmentsIcon from './assets/AdjustmentsIcon';
+import { convertInternalReportToReport, 
+// fetchReport,
+// fetchReportRowCount,
+saveReport, } from './utils/report';
 import { mergeComparisonRange } from './utils/merge';
+import { ExclamationFilledIcon } from './assets';
+import InternalChart from './components/Chart/InternalChart';
+import { shouldFetchMore, shouldSortInMemory, } from './utils/paginationProcessing';
+import { fetchResultsByQuery, getUniqueValuesByColumns, } from './utils/tableProcessing';
+import { getDateBucketFromRange } from './utils/dates';
 const CHART_TYPES = ['column', 'line', 'table', 'metric', 'bar', 'pie'];
 const CHART_TO_LABELS = {
     column: { xAxisLabel: 'X-Axis', yAxisLabel: 'Y-Axis' },
@@ -64,7 +70,6 @@ export function createInitialFormData(columns) {
         xAxisLabel: '',
         chartType: firstNumberColumn ? 'line' : 'table',
         pivot: null,
-        dateField: { table: '', field: '' },
         template: true,
     };
     return formEmptyState;
@@ -107,9 +112,9 @@ function createReportFromForm(formData, report, selectedPivotTable, rows = [], f
         ...formData,
         dashboardName: formData.dashboardName || '',
         pivot: formData.pivot,
-        id: '',
+        id: report?.id ?? TEMP_REPORT_ID,
         order: -1,
-        compareRows: report?.compareRows || [],
+        compareRows: report?.compareRows,
         filtersApplied: report?.filtersApplied || [],
         queryString: '',
         rows: rows,
@@ -191,6 +196,7 @@ export function ChartBuilderWithModal(props) {
     const [modalHeight, setModalHeight] = useState(200);
     const { isOpen, setIsOpen, title, isHorizontalView } = props;
     const Modal = props.ModalComponent ?? MemoizedModal;
+    const [dashboard] = useContext(DashboardContext);
     useEffect(() => {
         function handleResize() {
             const screenSize = window.innerWidth;
@@ -211,7 +217,7 @@ export function ChartBuilderWithModal(props) {
     return (_jsx("div", { style: { height: '100%' }, ref: parentRef, children: _jsx(Modal, { isOpen: isOpen, setIsOpen: setIsOpen, title: title || 'Add to dashboard', 
             // For isHorizontalView, use full viewport size minus 80px for padding,
             // otherwise use the default layout method of the modal (contents).
-            width: isHorizontalView ? modalWidth : undefined, height: isHorizontalView ? modalHeight : undefined, children: _jsx(ChartBuilder, { ...props }) }) }));
+            width: isHorizontalView ? modalWidth : undefined, height: isHorizontalView ? modalHeight : undefined, children: dashboard[props.reportId ?? TEMP_REPORT_ID] ? (_jsx(ChartBuilder, { ...props })) : (_jsx("div", { style: { padding: 20 }, children: _jsx(QuillLoadingComponent, {}) })) }) }));
 }
 /**
  * ### Quill Chart Builder
@@ -237,45 +243,32 @@ export function ChartBuilderWithModal(props) {
  * ### Chart Builder API
  * @see https://docs.quillsql.com/components/chart-builder
  */
-export default function ChartBuilder({ TextInputComponent = QuillTextInput, SelectComponent = QuillSelectComponent, ButtonComponent = MemoizedButton, SecondaryButtonComponent = MemoizedSecondaryButton, HeaderComponent = MemoizedHeader, SubHeaderComponent = MemoizedSubHeader, LabelComponent = MemoizedLabel, DeleteButtonComponent = MemoizedDeleteButton, TextComponent = MemoizedText, PopoverComponent = MemoizedPopover, CardComponent = QuillCard, TableComponent = QuillTableComponent, ModalComponent = MemoizedModal, LoadingComponent = QuillLoadingComponent, ErrorMessageComponent = QuillErrorMessageComponent, ChartBuilderInputRowContainer = QuillChartBuilderInputRowContainer, ChartBuilderInputColumnContainer = QuillChartBuilderInputColumnContainer, PivotRowContainer = QuillPivotRowContainer, PivotColumnContainer = QuillPivotColumnContainer, FormContainer = QuillChartBuilderFormContainer, ErrorComponent = QuillChartErrorWithAction, onClickChartError, isOpen, isHorizontalView = true, pivot, setIsOpen, rows = [], columns = [], query, queryNoDateColumn, dateRange, showTableFormatOptions = false, showDateFieldOptions = false, showAccessControlOptions = false, isAdmin = false, showDashboardDropdown = true, onAddToDashboardComplete, onDelete, onDiscardChanges, report = undefined, recommendedPivots: rp = [], createdPivots: cp = [], destinationDashboard, dateColumn, buttonLabel, organizationName, pivotData, hideDeleteButton = false, hideSubmitButton = false, hideDateRangeFilter = false, initialUniqueValues, initialUniqueValuesIsLoading, pivotRecommendationsEnabled = true, onFilterPreviewChange, onSortChange, onPageChange, rowCount, rowCountIsLoading, isLoading, onClickChartElement, isEditingMode = false, disableSort = true, }) {
+export default function ChartBuilder({ TextInputComponent = QuillTextInput, SelectComponent = QuillSelectComponent, ButtonComponent = MemoizedButton, SecondaryButtonComponent = MemoizedSecondaryButton, HeaderComponent = MemoizedHeader, SubHeaderComponent = MemoizedSubHeader, LabelComponent = MemoizedLabel, DeleteButtonComponent = MemoizedDeleteButton, TextComponent = MemoizedText, PopoverComponent = MemoizedPopover, CardComponent = QuillCard, TableComponent = QuillTableComponent, ModalComponent = MemoizedModal, LoadingComponent = QuillLoadingComponent, ErrorMessageComponent = QuillErrorMessageComponent, ChartBuilderInputRowContainer = QuillChartBuilderInputRowContainer, ChartBuilderInputColumnContainer = QuillChartBuilderInputColumnContainer, PivotRowContainer = QuillPivotRowContainer, PivotColumnContainer = QuillPivotColumnContainer, FormContainer = QuillChartBuilderFormContainer, ErrorComponent = QuillChartErrorWithAction, onClickChartError, isOpen, isHorizontalView = true, setIsOpen, queryNoDateColumn, dateRange, isAdmin = false, showDashboardDropdown = true, onAddToDashboardComplete, onDelete, onDiscardChanges, reportId, recommendedPivots: rp = [], createdPivots: cp = [], dateColumn, buttonLabel, organizationName, hideDeleteButton = false, hideSubmitButton = false, hideDateRangeFilter = false, initialUniqueValues, initialUniqueValuesIsLoading, pivotRecommendationsEnabled = true, filtersEnabled, onFiltersEnabledChanged, 
+// isLoading,
+onClickChartElement, isEditingMode = false, disableSort = true, }) {
     const [client] = useContext(ClientContext);
     const [theme] = useContext(ThemeContext);
     const [schemaData] = useContext(SchemaDataContext);
+    const [dashboard, dispatch] = useContext(DashboardContext);
+    const { dashboardConfig } = useContext(DashboardConfigContext);
+    const report = useMemo(() => {
+        return dashboard[TEMP_REPORT_ID] ?? dashboard[reportId ?? TEMP_REPORT_ID];
+    }, [reportId]);
     const [windowWidth, setWindowWidth] = useState(1200);
+    const [rows, setRows] = useState(report?.rows ?? []);
+    const [itemQuery, setItemQuery] = useState(report?.itemQuery);
+    const [rowCount, setRowCount] = useState(report?.rowCount ?? 0);
+    const [maxPage, setMaxPage] = useState(0);
+    const [isLoading, setIsLoading] = useState(false);
+    const [rowCountIsLoading, setRowCountIsLoading] = useState(false);
     const [isSubmitting, setIsSubmitting] = useState(false);
     const [pivotCardWidth, setPivotCardWidth] = useState(665);
     const [formWidth, setFormWidth] = useState(665);
     const inputRef = useRef(null);
     const selectRef = useRef(null);
-    const [, dispatch] = useContext(DashboardContext);
-    const [processedColumns, setProcessedColumns] = useState(columns);
-    const [currentPage, setCurrentPage] = useState(0);
-    const parentRef = useRef(null);
-    const deleteRef = useRef(null);
-    const modalPadding = 20;
-    const deleteButtonMargin = -12;
-    // Note: Commenting out for now because it was auto-focusing on table page changes
-    // If the TextInputComponent is a forwardRef it will have a $$typeof property
-    // So we only want to pass the ref if the TextInputComponent is a forwardRef
-    // const autofocusRefProp =
-    //   '$$typeof' in TextInputComponent
-    //     ? {
-    //         ref: (input: HTMLInputElement) =>
-    //           formData.name === '' && !showPivotPopover && input?.focus(),
-    //       }
-    //     : {};
-    const validationHelper = (formData, dashboard, dateField, tables) => {
-        const issues = validateReport(formData, dashboard, dateField || defaultDateField, tables || allTables);
-        if (issues.length > 0) {
-            setFilterIssues(issues);
-        }
-        else {
-            setFilterIssues([]);
-        }
-    };
-    useEffect(() => {
+    const processColumns = (columns) => {
         if (schemaData.schema) {
-            const newProcessedColumns = columns.map((col) => {
+            const newProcessedColumns = columns?.map((col) => {
                 if (col.jsType) {
                     return col;
                 }
@@ -296,47 +289,39 @@ export default function ChartBuilder({ TextInputComponent = QuillTextInput, Sele
                 newCol.jsType = convertFieldTypeToJSType(foundColumn.fieldType);
                 return newCol;
             });
-            setProcessedColumns(newProcessedColumns);
+            return newProcessedColumns;
         }
-    }, [schemaData.schema]);
-    useEffect(() => {
-        const handleResize = () => setWindowWidth(window.innerWidth);
-        handleResize();
-        window.addEventListener('resize', handleResize);
-        return () => {
-            window.removeEventListener('resize', handleResize);
-        };
-    }, []);
-    useEffect(() => {
-        const handleResize = () => {
-            // The pivot card should be the same width as the row of inputs
-            // above it (an input, two selects, plus the gaps between them).
-            if (inputRef.current && selectRef.current) {
-                const inputSize = inputRef.current?.getBoundingClientRect();
-                const selectSize = selectRef.current?.getBoundingClientRect();
-                const selectWidth = selectSize.width;
-                const showDash = showDashboardDropdown && !destinationDashboard;
-                const spaceBetween = selectSize.left - inputSize.right;
-                const gap = showDash ? (spaceBetween - selectWidth) / 2 : spaceBetween;
-                const width = inputSize.width + 2 * gap + 2 * selectWidth;
-                setPivotCardWidth(width);
-                // Calculate the form width by adding the width of the delete button
-                const deleteSize = deleteRef.current?.getBoundingClientRect();
-                const deleteWidth = deleteSize?.width ?? 0;
-                setFormWidth(width + deleteWidth);
-            }
-        };
-        handleResize();
-    }, [isOpen]);
+        return columns;
+    };
+    const [processedColumns, setProcessedColumns] = useState(processColumns(report?.columnInternal ?? []));
+    const [currentPage, setCurrentPage] = useState(0);
+    const parentRef = useRef(null);
+    const deleteRef = useRef(null);
+    const modalPadding = 20;
+    const deleteButtonMargin = -12;
+    const { dashboardFilters } = useContext(DashboardFiltersContext);
+    const specificDashboardFilters = useMemo(() => {
+        return Object.values(dashboardFilters[report?.dashboardName ?? ''] ?? {}).map((f) => f.filter);
+    }, [dashboard.filters, report?.dashboardName]);
+    const validationHelper = (formData, dashboard, dateField, tables) => {
+        const issues = validateReport(formData, dashboard, dateField || defaultDateField, tables || allTables);
+        if (issues.length > 0) {
+            setFilterIssues(issues);
+        }
+        else {
+            setFilterIssues([]);
+        }
+    };
     useEffect(() => {
         const handleResize = () => {
+            setWindowWidth(window.innerWidth);
             // The pivot card should be the same width as the row of inputs
             // above it (an input, two selects, plus the gaps between them).
             if (inputRef.current && selectRef.current) {
                 const inputSize = inputRef.current?.getBoundingClientRect();
                 const selectSize = selectRef.current?.getBoundingClientRect();
                 const selectWidth = selectSize.width;
-                const showDash = showDashboardDropdown && !destinationDashboard;
+                const showDash = showDashboardDropdown && !report?.dashboardName;
                 const spaceBetween = selectSize.left - inputSize.right;
                 const gap = showDash ? (spaceBetween - selectWidth) / 2 : spaceBetween;
                 const width = inputSize.width + 2 * gap + 2 * selectWidth;
@@ -352,15 +337,35 @@ export default function ChartBuilder({ TextInputComponent = QuillTextInput, Sele
         return () => {
             window.removeEventListener('resize', handleResize);
         };
-    }, []);
+    }, [isOpen]);
     const [dashboardOptions, setDashboardOptions] = useState([]);
-    const [defaultDashboardName, setDefaultDashboardName] = useState(destinationDashboard || report?.dashboardName || '');
-    const { dashboardFilters } = useContext(DashboardFiltersContext);
-    const { dashboardConfig } = useContext(DashboardConfigContext);
-    const [filtersActive, setFiltersActive] = useState(true);
-    const specificDashboardFilters = useMemo(() => {
-        return Object.values(dashboardFilters[defaultDashboardName] ?? {}).map((f) => f.filter);
-    }, [dashboardFilters, filtersActive]);
+    const { reportFilters, reportFiltersDispatch, loadFiltersForReport } = useContext(ReportFiltersContext);
+    useEffect(() => {
+        loadFiltersForReport(report?.id ?? TEMP_REPORT_ID, 'ChartBuilder', specificDashboardFilters, undefined, undefined, canonicalFilterMap, report?.dashboardName);
+        return () => {
+            reportFiltersDispatch({
+                type: 'CLEAR_REPORT_FILTERS',
+                id: report?.id ?? TEMP_REPORT_ID,
+            });
+            // TODO: Currently the behavior of Chart Builder is dependent on whether there is a TEMP_REPORT_ID in context or not
+            /* The Chart Builder can essentially be in three states
+              1. Creating a new report, all we have is an ephemeral temp report
+              2. Editing an existing report, we have a report id and the report is in the dashboard context
+              3. Editing the query of an existing report, we have a report id and the new-query report is in context under TEMP_REPORT_ID
+              One can imagine this going wrong: somehow the temp report gets set by SQLEditor or ReportBuilder but never cleared
+              and now its going to start popping up during state 2 rather than the real report.
+              For now we're going on faith that unmounting will always clear the temp report
+              but we may want to fiddle with the props to make this more robust
+            */
+            dispatch({
+                type: 'REMOVE_DASHBOARD_ITEM',
+                id: TEMP_REPORT_ID,
+            });
+        };
+    }, []);
+    const currentDashboardFilters = useMemo(() => {
+        return Object.values(reportFilters[report?.id ?? TEMP_REPORT_ID] ?? {}).map((f) => f.filter);
+    }, [reportFilters, report?.id]);
     const [showFilterModal, setShowFilterModal] = useState(false);
     const [filterIssues, setFilterIssues] = useState([]);
     const [showPivotPopover, setShowPivotPopover] = useState(false);
@@ -371,38 +376,72 @@ export default function ChartBuilder({ TextInputComponent = QuillTextInput, Sele
     const [pivotPopUpTitle, setPivotPopUpTitle] = useState('Add pivot');
     // eslint-disable-next-line @typescript-eslint/no-unused-vars
     const [pivotError, setPivotError] = useState(undefined);
+    const pivotData = report?.pivotRows && report?.pivotColumns
+        ? { rows: report.pivotRows, columns: report.pivotColumns }
+        : undefined;
+    const columns = report?.columnInternal ?? [];
+    const destinationDashboard = report?.dashboardName;
+    const query = report?.queryString;
     const [loadingFormData, setLoadingFormData] = useState(false);
     const [triggeredEditChart, setTriggeredEditChart] = useState(false);
-    const [createdPivots, setCreatedPivots] = useState(pivot ? [pivot] : report?.pivot ? [report.pivot] : cp);
+    const [createdPivots, setCreatedPivots] = useState(report?.pivot ? [report.pivot] : cp);
     const [recommendedPivots, setRecommendedPivots] = useState(rp);
-    const [pivotRowField, setPivotRowField] = useState(pivot?.rowField);
-    const [pivotColumnField, setPivotColumnField] = useState(pivot?.columnField);
-    const [pivotValueField, setPivotValueField] = useState(pivot?.valueField);
-    const [pivotValueField2, setPivotValueField2] = useState(pivot?.valueField2);
-    const [pivotAggregation, setPivotAggregation] = useState(pivot?.aggregationType);
+    const [pivotRowField, setPivotRowField] = useState(report?.pivot?.rowField);
+    const [pivotColumnField, setPivotColumnField] = useState(report?.pivot?.columnField);
+    const [pivotValueField, setPivotValueField] = useState(report?.pivot?.valueField);
+    const [pivotValueField2, setPivotValueField2] = useState(report?.pivot?.valueField2);
+    const [pivotAggregation, setPivotAggregation] = useState(report?.pivot?.aggregationType);
+    const baseProcessing = {
+        page: report?.pagination ?? {
+            page: 0,
+            rowsPerPage: 10,
+            rowsPerRequest: report?.chartType === 'table' ? 50 : 500,
+        },
+    };
+    const [currentProcessing, setCurrentProcessing] = useState(baseProcessing);
     // initial state is the fields array passed in, but can eventually be changed to be the pivot fields
     const [dateFieldOptions, setDateFieldOptions] = useState([]);
     const [allTables, setAllTables] = useState([]);
     const [customFieldTableRef, setCustomFieldTableRef] = useState(false);
     const [referencedColumns, setReferencedColumns] = useState({});
+    const [filterMap, setFilterMap] = useState(report?.filterMap ?? {});
+    const canonicalFilterMap = useMemo(() => {
+        return Object.fromEntries(Object.entries(filterMap).filter((f) => f[1].table !== undefined && f[1].field !== undefined));
+    }, [filterMap]);
+    const validFilter = useMemo(() => {
+        return currentDashboardFilters.reduce((acc, filter) => {
+            if (filter.filterType === 'date_range') {
+                acc[filter.label] = true;
+                return acc;
+            }
+            acc[filter.label] =
+                !!allTables.find((table) => table === (filterMap[filter.label] ?? filter).table) &&
+                    !!schemaData.schema
+                        ?.find((table) => {
+                        return (table.displayName === (filterMap[filter.label] ?? filter).table);
+                    })
+                        ?.columns.find((col) => col.field === (filterMap[filter.label] ?? filter).field);
+            return acc;
+        }, {});
+    }, [currentDashboardFilters, filterMap, allTables]);
     const [defaultDateField, setDefaultDateField] = useState({
         table: dateFieldOptions[0]?.name || '',
         field: dateFieldOptions[0]?.columns[0]?.field || '',
     });
-    const firstNumberColumn = columns?.find((col) => numberFormatOptions.includes(col.format));
+    const firstNumberColumn = report?.columnInternal?.find((col) => numberFormatOptions.includes(col.format));
     const formEmptyState = {
         name: report?.name ?? '',
-        dashboardName: dashboardOptions[0]?.label || '',
-        columns: columns.map((col) => {
+        dashboardName: dashboardOptions[0]?.label ?? '',
+        columns: report?.columns.map((col) => {
             return { ...col, label: snakeAndCamelCaseToTitleCase(col.label) };
-        }),
-        xAxisField: columns?.[0]?.field || '',
-        xAxisFormat: columns?.[0]?.format || 'string',
+        }) ?? [],
+        xAxisField: report?.columns?.[0]?.field ?? '',
+        xAxisFormat: report?.columns?.[0]?.format ?? 'string',
         yAxisFields: [
             {
-                field: firstNumberColumn?.field || columns?.[0]?.field || '',
+                field: firstNumberColumn?.field ?? report?.columns?.[0]?.field ?? '',
                 label: '',
-                format: firstNumberColumn?.format || columns?.[0]?.format || 'string',
+                format: firstNumberColumn?.format ?? report?.columns?.[0]?.format ?? 'string',
             },
         ],
         xAxisLabel: '',
@@ -461,7 +500,7 @@ export default function ChartBuilder({ TextInputComponent = QuillTextInput, Sele
             xAxisField: pivot.rowField ? pivot.rowField : pivot.valueField,
             xAxisFormat: isDateField(pivot.rowFieldType || '')
                 ? 'string'
-                : columns.find((col) => col.field === pivot.rowField)?.format ||
+                : report?.columns.find((col) => col.field === pivot.rowField)?.format ||
                     report?.xAxisFormat ||
                     'whole_number',
             xAxisLabel: report?.xAxisLabel || pivot.rowField,
@@ -474,8 +513,8 @@ export default function ChartBuilder({ TextInputComponent = QuillTextInput, Sele
                         : report?.yAxisFields && report?.yAxisFields?.length > 0
                             ? // @ts-ignore
                                 report?.yAxisFields[0].format
-                            : columns.find((col) => col.field === pivot.valueField)?.format ||
-                                'whole_number',
+                            : report?.columns.find((col) => col.field === pivot.valueField)
+                                ?.format || 'whole_number',
                 },
             ],
         };
@@ -483,8 +522,8 @@ export default function ChartBuilder({ TextInputComponent = QuillTextInput, Sele
     const formFormDataFromReport = (report) => {
         let pivotData = {};
         let dateField = defaultDateField;
-        if (pivot) {
-            pivotData = pivotFormData(pivot);
+        if (report?.pivot) {
+            pivotData = pivotFormData(report.pivot);
         }
         if (report) {
             dateField = report.dateField || defaultDateField;
@@ -493,7 +532,7 @@ export default function ChartBuilder({ TextInputComponent = QuillTextInput, Sele
             ...formEmptyState,
             ...report,
             ...pivotData,
-            ...(destinationDashboard && { dashboardName: destinationDashboard }),
+            ...(report?.dashboardName && { dashboardName: report?.dashboardName }),
             dateField: dateField,
         };
     };
@@ -502,7 +541,7 @@ export default function ChartBuilder({ TextInputComponent = QuillTextInput, Sele
         if (!rows || !rows.length) {
             return [];
         }
-        if (pivot || pivotData) {
+        if (report?.pivot || pivotData) {
             return [];
         }
         const columnsObservedInRows = rows[0] ? Object.keys(rows[0]) : [];
@@ -551,8 +590,6 @@ export default function ChartBuilder({ TextInputComponent = QuillTextInput, Sele
             const curDashboard = await updateDashboardFilters(dashboardName);
             setDashboardOptions(dashboardOptions);
             curFormData.dashboardName = dashboardName;
-            setDefaultDashboardName(dashboardName ??
-                (report ? report?.dashboardName : dashboardOptions[0]?.label));
             const curSchemaData = schemaData.schema;
             if (!query) {
                 setLoadingFormData(false);
@@ -613,34 +650,49 @@ export default function ChartBuilder({ TextInputComponent = QuillTextInput, Sele
         }
         getFormData();
     }, []);
-    const [selectedPivotTable, setSelectedPivotTable] = useState(pivotData || undefined);
+    const [selectedPivotTable, setSelectedPivotTable] = useState(pivotData);
+    const pivotCardTable = useMemo(() => {
+        return {
+            pivot: formData.pivot,
+            rows: selectedPivotTable?.rows ?? [],
+            columns: selectedPivotTable?.columns ?? [],
+        };
+    }, [selectedPivotTable, formData.pivot]);
     const chartData = useMemo(() => {
-        const data = createReportFromForm(formData, report, selectedPivotTable, rows, specificDashboardFilters);
-        return data;
+        const data = createReportFromForm(formData, report, selectedPivotTable, rows, currentDashboardFilters);
+        return {
+            ...data,
+            filterMap: canonicalFilterMap,
+        };
     }, [formData, selectedPivotTable, report, rows]);
-    const fetchPivotData = async (pivot, uniqueValues, overrideDateRange) => {
+    const fetchPivotData = async (pivot, tableInfo, uniqueValues, overrideFilters) => {
+        const dashboardFilters = filtersEnabled
+            ? (overrideFilters ?? currentDashboardFilters)
+            : undefined;
         if (pivot) {
-            // const dateFilter =
-            //   report && filtersActive
-            //     ? report.filtersApplied.find((filter: any) => {
-            //         return filter.filterType === 'date_range';
-            //       })
-            //     : undefined;
             let dateBucket = undefined;
-            if (overrideDateRange) {
-                dateBucket = getDateBucketFromRange(overrideDateRange);
+            if (filtersEnabled) {
+                const dateFilter = dashboardFilters?.find((f) => f.filterType === 'date_range');
+                dateBucket =
+                    dateFilter?.startDate && dateFilter?.endDate
+                        ? getDateBucketFromRange({
+                            start: dateFilter?.startDate,
+                            end: dateFilter?.endDate,
+                        })
+                        : undefined;
             }
             try {
                 const pivotTable = await generatePivotTable({
                     pivot,
                     dateBucket,
-                    report,
+                    report: { ...report, ...(tableInfo ?? { itemQuery }) },
                     client,
                     uniqueValues,
                 });
                 setSelectedPivotTable(pivotTable);
             }
             catch (e) {
+                console.log('error', e);
                 if (e instanceof Error) {
                     setPivotError(e.message);
                 }
@@ -697,6 +749,129 @@ export default function ChartBuilder({ TextInputComponent = QuillTextInput, Sele
         rows,
         formData.pivot,
     ]);
+    const fetchRowCount = async (processing, overrideFilters) => {
+        if (!client || !query) {
+            return;
+        }
+        setRowCountIsLoading(true);
+        const tableInfo = await fetchResultsByQuery(query, client, processing, schemaData.customFields, filtersEnabled ? overrideFilters : undefined, filtersEnabled ? (report?.dateField ?? formData.dateField) : undefined, false, true, canonicalFilterMap);
+        if (tableInfo.rowCount) {
+            setRowCount(tableInfo.rowCount);
+        }
+        setRowCountIsLoading(false);
+    };
+    const onDashboardFilterChange = (label, value) => {
+        const updatedFilters = currentDashboardFilters.map((filter) => {
+            if (filter.label === label) {
+                return {
+                    ...filter,
+                    ...value,
+                };
+            }
+            return filter;
+        });
+        loadFiltersForReport(report?.id ?? TEMP_REPORT_ID, 'ChartBuilder', updatedFilters, label, undefined, canonicalFilterMap, report?.dashboardName).then(() => {
+            setCurrentPage(0);
+            setMaxPage(0);
+            handleRunQuery(baseProcessing, updatedFilters);
+        });
+    };
+    const mounted = useRef(false);
+    useEffect(() => {
+        if (!mounted.current) {
+            mounted.current = true;
+            return;
+        }
+        setCurrentPage(0);
+        setMaxPage(0);
+        handleRunQuery(baseProcessing, currentDashboardFilters);
+    }, [filtersEnabled]);
+    const handleRunQuery = async (processing, overrideFilters) => {
+        if (!client || !query) {
+            return;
+        }
+        try {
+            setIsLoading(true);
+            const tableInfo = await fetchResultsByQuery(query, client, processing, schemaData.customFields, filtersEnabled ? overrideFilters : undefined, filtersEnabled ? (report?.dateField ?? formData.dateField) : undefined, true, false, canonicalFilterMap);
+            setCurrentProcessing(processing);
+            setRows(tableInfo.rows);
+            setProcessedColumns(processColumns(tableInfo.columns));
+            setItemQuery(tableInfo.itemQuery);
+            fetchRowCount(processing, overrideFilters);
+            if (formData.pivot) {
+                try {
+                    const uniqueValues = await getUniqueValuesByColumns(tableInfo.columns.filter((column) => column.field === formData.pivot?.columnField), report.queryString, tableInfo.rows, client, schemaData.customFields ?? [], overrideFilters);
+                    fetchPivotData(formData.pivot, tableInfo, uniqueValues, overrideFilters);
+                }
+                catch (e) {
+                    console.log('error fetching pivot', e);
+                    setPivotError(e.message);
+                }
+            }
+            setIsLoading(false);
+        }
+        catch (e) {
+            console.log(e);
+        }
+    };
+    const onPageChange = (page) => {
+        // only fetch if report is valid, else use query task
+        if (currentProcessing.page &&
+            shouldFetchMore(currentProcessing.page, page, maxPage)) {
+            const newPagination = {
+                ...currentProcessing.page,
+                page,
+            };
+            const updatedProcessing = {
+                ...currentProcessing,
+                page: newPagination,
+            };
+            setCurrentProcessing(updatedProcessing);
+            updateTableRows(updatedProcessing);
+        }
+        if (page > maxPage) {
+            setMaxPage(page);
+        }
+    };
+    const onSortChange = (sort) => {
+        if (shouldSortInMemory(baseProcessing.page, rowCount)) {
+            return;
+        }
+        const updatedProcessing = { ...baseProcessing, sort };
+        updateTableRows(updatedProcessing, true);
+        setCurrentProcessing(updatedProcessing);
+        setCurrentPage(0);
+        setMaxPage(0);
+    };
+    const updateTableRows = async (processing, resetRows = false) => {
+        if (!client) {
+            return;
+        }
+        if (!isLoading && report && query) {
+            setIsLoading(true);
+            try {
+                const updatedProcessing = { ...currentProcessing, ...processing };
+                const paginatedRows = await fetchResultsByQuery(query, client, updatedProcessing, schemaData.customFields, filtersEnabled ? currentDashboardFilters : undefined, filtersEnabled
+                    ? (report?.dateField ?? formData.dateField)
+                    : undefined, false, false, canonicalFilterMap);
+                if (paginatedRows.error) {
+                    throw new Error('Error fetching chart');
+                }
+                let tempRows = [...rows, ...paginatedRows.rows];
+                if (resetRows) {
+                    tempRows = paginatedRows.rows;
+                }
+                setRows(tempRows);
+                setCurrentProcessing(updatedProcessing);
+            }
+            catch (e) {
+                console.log(e);
+            }
+            finally {
+                setIsLoading(false);
+            }
+        }
+    };
     const handleChange = async (value, fieldName, index) => {
         let updatedForm = { ...formData };
         try {
@@ -754,7 +929,7 @@ export default function ChartBuilder({ TextInputComponent = QuillTextInput, Sele
                 }
                 else if (field === 'dateField' &&
                     subfield === 'table' &&
-                    !formData.dateField.field) {
+                    !formData.dateField?.field) {
                     const field = schemaData.schema?.find((elem) => elem.name === value)?.columns?.[0]?.field;
                     updatedForm.dateField = {
                         // @ts-ignore
@@ -785,7 +960,7 @@ export default function ChartBuilder({ TextInputComponent = QuillTextInput, Sele
         }
         setFormData(updatedForm);
     };
-    const handleAddPivot = async (pivot, uniqueValues, dateRange, pivotData) => {
+    const handleAddPivot = async (pivot, uniqueValues, pivotData) => {
         const newPivotFormData = pivotFormData(pivot);
         // Only keep the old chart type if the shapes of the pivots are the same
         // since the valid chart types for some pivots might have changed (eg. going
@@ -802,7 +977,7 @@ export default function ChartBuilder({ TextInputComponent = QuillTextInput, Sele
             });
         }
         else {
-            await fetchPivotData(pivot, uniqueValues, dateRange);
+            await fetchPivotData(pivot, undefined, uniqueValues);
         }
         setFormData((formData) => ({
             ...formData,
@@ -818,6 +993,7 @@ export default function ChartBuilder({ TextInputComponent = QuillTextInput, Sele
         }
         setFormData({
             ...formEmptyState,
+            ...formData,
             dashboardName: formData.dashboardName,
             pivot: null,
         });
@@ -893,26 +1069,25 @@ export default function ChartBuilder({ TextInputComponent = QuillTextInput, Sele
             return;
         }
         // If the dashboardItem is a template but the editor isn't an admin, create a new dashboardItem and set the template to false
-        let dashboardItemId = report ? report.id : undefined;
+        let dashboardItemId = reportId ? reportId : undefined;
         if (report && !isAdmin && formData.template) {
             dashboardItemId = undefined;
         }
         const newReport = {
             ...formData,
+            filterMap,
             columns: formData.columns.filter((col) => !invalidColumns.includes(col)),
             ...(formData.dateField?.table
                 ? {}
                 : { dateField: { ...defaultDateField } }),
             ...(formData.dashboardName
                 ? {}
-                : { dashboardName: defaultDashboardName }),
-            query: queryNoDateColumn || query || '',
+                : { dashboardName: report?.dashboardName }),
+            query: queryNoDateColumn || report?.queryString || '',
             pivot: formData.pivot,
             referencedTables: allTables,
             referencedColumns,
-            template: report && !showAccessControlOptions && formData.template
-                ? false
-                : formData.template,
+            template: report && !isAdmin && formData.template ? false : formData.template,
         };
         const resp = await saveReport({
             report: newReport,
@@ -948,7 +1123,7 @@ export default function ChartBuilder({ TextInputComponent = QuillTextInput, Sele
     // Prevent horizontal view on small screens.
     isHorizontalView = windowWidth < 1200 ? false : isHorizontalView;
     if (!schemaData.schema) {
-        return _jsx("div", { children: "bruh" });
+        return _jsx("div", { children: "No schema" });
     }
     return (_jsxs("div", { style: {
             width: '100%',
@@ -969,70 +1144,45 @@ export default function ChartBuilder({ TextInputComponent = QuillTextInput, Sele
                             display: 'flex',
                             flexDirection: 'column',
                             gap: isOpen ? 16 : 20,
-                            overflowY: 'visible',
+                            overflowY: 'scroll',
                             height: isHorizontalView || !isOpen ? '100%' : 800,
                             ...(isHorizontalView && {
                                 flexGrow: 1,
                                 maxWidth: !isOpen ? '100%' : `calc(100% - ${formWidth}px - 20px)`, // width of left sidebar plus gap
                             }),
                             ...(!isHorizontalView && isOpen && { width: formWidth }),
-                        }, children: [onFilterPreviewChange && (_jsxs("div", { className: "filters-active-toggle", style: {
-                                    cursor: 'pointer',
-                                    display: isOpen ? 'flex' : 'none',
-                                    flexDirection: 'row',
-                                    gap: 4,
-                                    marginTop: -16,
-                                    userSelect: 'none',
-                                }, onClick: () => {
-                                    onFilterPreviewChange && onFilterPreviewChange(!filtersActive);
-                                    setCurrentPage(0);
-                                    setFiltersActive(!filtersActive);
-                                }, children: [_jsx(AdjustmentsIcon, { style: {
-                                            color: filtersActive ? '#212121' : '#9e9e9e',
-                                            height: 20,
-                                            width: 20,
-                                        }, strokeWidth: filtersActive ? 1.5 : 1 }), _jsx("div", { style: {
-                                            color: filtersActive ? '#212121' : '#9e9e9e',
-                                            fontSize: 14,
-                                            fontWeight: 300,
-                                            userSelect: 'none',
-                                        }, children: filtersActive
-                                            ? 'Previewing with filters'
-                                            : 'Previewing without filters' })] })), !isEditingMode && (report?.adminError || report?.error) ? (_jsx(ErrorComponent, { label: report.adminError || report.error, onClick: onClickChartError })) : (((!isHorizontalView && windowWidth >= 1200) ||
-                                formData.chartType !== 'table') && (_jsx(ChartDisplay, { reportId: report?.id, config: chartData, scrollable: true, colors: theme?.chartColors, loading: false, hideDateRangeFilter: hideDateRangeFilter, containerStyle: {
+                        }, children: [!isEditingMode && (report?.adminError || report?.error) ? (_jsx(ErrorComponent, { label: report.adminError || report.error, onClick: onClickChartError })) : ((isHorizontalView || (!isOpen && windowWidth < 1200)) && (_jsx(InternalChart, { report: chartData, filtersEnabled: filtersEnabled, setFiltersEnabled: (hide) => {
+                                    onFiltersEnabledChanged(hide);
+                                }, colors: theme?.chartColors, loading: false, hideDateRangeFilter: hideDateRangeFilter, isAdmin: isAdmin, containerStyle: {
                                     width: '100%',
-                                    height: formData.chartType === 'metric'
-                                        ? 100
-                                        : isHorizontalView || !isOpen
-                                            ? showTableFormatOptions
-                                                ? `calc(50% - ${isOpen && onFilterPreviewChange ? '30' : '10'}px)`
-                                                : `calc(100% - ${isOpen && onFilterPreviewChange ? '30' : '10'}px)`
-                                            : 400,
+                                    // height:
+                                    //   formData.chartType === 'metric'
+                                    //     ? 100
+                                    //     : `calc(${filtersEnabled ? 50 : 70}%)`,
                                     ...(isHorizontalView && { flexGrow: 1 }),
-                                }, onClickChartElement: onClickChartElement }))), 
+                                }, onClickChartElement: onClickChartElement, filterToggleDisabled: Object.values(validFilter).includes(false), onDashboardFilterChange: onDashboardFilterChange }))), 
                             // Make sure to display non-pivoted table when using pivot chart
-                            showTableFormatOptions &&
+                            isAdmin &&
                                 (isHorizontalView || (!isOpen && windowWidth < 1200)) && (_jsx("div", { style: {
                                     width: '100%',
-                                    height: isHorizontalView || !isOpen
-                                        ? `calc(50% - ${isOpen && onFilterPreviewChange ? '30' : '10'}px)`
-                                        : 400,
+                                    // height:
+                                    //   isHorizontalView || !isOpen
+                                    //     ? `calc(${filtersEnabled ? 30 : 50}%)`
+                                    //     : 400,
                                     flexGrow: 1,
                                 }, children: formData.chartType !== 'table' ? (_jsx(TableComponent, { rows: formattedRows, columns: formData.columns, onPageChange: (page) => {
-                                        onPageChange &&
-                                            onPageChange(page, filtersActive, 'ChartBuilder');
+                                        onPageChange(page);
                                         setCurrentPage(page);
                                     }, onSortChange: (sort) => {
-                                        onSortChange && onSortChange(sort, filtersActive);
+                                        onSortChange && onSortChange(sort);
                                     }, currentPage: currentPage, rowCount: rowCount, isLoading: isLoading, rowCountIsLoading: rowCountIsLoading, disableSort: disableSort })) : (_jsx(TableComponent, { rows: formattedRows, columns: selectedPivotTable
                                         ? selectedPivotTable.columns
                                         : formData.columns, onPageChange: (page) => {
-                                        onPageChange &&
-                                            onPageChange(page, filtersActive, 'ChartBuilder');
+                                        onPageChange(page);
                                         setCurrentPage(page);
                                     }, onSortChange: (sort) => {
-                                        onSortChange && onSortChange(sort, filtersActive);
-                                    }, currentPage: currentPage, rowCount: rowCount, rowCountIsLoading: rowCountIsLoading, isLoading: isLoading, disableSort: disableSort })) }))] }), isOpen && (_jsxs("form", { ref: parentRef, id: "quill-chart-form", onSubmit: handleSubmit, style: {
+                                        onSortChange && onSortChange(sort);
+                                    }, currentPage: currentPage, rowCount: selectedPivotTable ? formattedRows.length : rowCount, rowCountIsLoading: rowCountIsLoading, isLoading: isLoading, disableSort: disableSort })) }))] }), isOpen && (_jsxs("form", { ref: parentRef, id: "quill-chart-form", onSubmit: handleSubmit, style: {
                             display: 'flex',
                             flexDirection: 'column',
                             gap: 20,
@@ -1069,11 +1219,7 @@ export default function ChartBuilder({ TextInputComponent = QuillTextInput, Sele
                                                             // marginTop: 6,
                                                             display: 'flex',
                                                             flexDirection: 'column',
-                                                        }, children: _jsx(PivotModal, { pivotRowField: pivotRowField, setPivotRowField: setPivotRowField, pivotColumnField: pivotColumnField, setPivotColumnField: setPivotColumnField, pivotValueField: pivotValueField, setPivotValueField: setPivotValueField, pivotValueField2: pivotValueField2, setPivotValueField2: setPivotValueField2, pivotAggregation: pivotAggregation, setPivotAggregation: setPivotAggregation, createdPivots: createdPivots, setCreatedPivots: setCreatedPivots, recommendedPivots: recommendedPivots, setRecommendedPivots: setRecommendedPivots, popUpTitle: pivotPopUpTitle, setPopUpTitle: setPivotPopUpTitle, selectedTable: selectedTable, SelectComponent: SelectComponent, ButtonComponent: ButtonComponent, CardComponent: CardComponent, SecondaryButtonComponent: SecondaryButtonComponent, PopoverComponent: PopoverComponent, LabelComponent: LabelComponent, TextComponent: TextComponent, HeaderComponent: HeaderComponent, ErrorMessageComponent: ErrorMessageComponent, PivotRowContainer: PivotRowContainer, PivotColumnContainer: PivotColumnContainer, LoadingComponent: LoadingComponent, theme: theme, isOpen: showPivotPopover, setIsOpen: setShowPivotPopover, showUpdatePivot: isEdittingPivot, setShowUpdatePivot: setIsEdittingPivot, parentRef: parentRef, data: rows, columns: processedColumns, triggerButtonText: 'Add pivot +', selectedPivotIndex: selectedPivotIndex, setSelectedPivotIndex: setSelectedPivotIndex, removePivot: handleDeletePivot, selectPivot: handleAddPivot, dateRange: dateRange, selectPivotOnEdit: true, showTrigger: !formData.pivot, query: query, pivotCountRequest: 4, initialUniqueValues: initialUniqueValues, uniqueValuesIsLoading: initialUniqueValuesIsLoading, initialSelectedPivotTable: selectedPivotTable, pivotRecommendationsEnabled: pivotRecommendationsEnabled, report: report }) }), formData.pivot && (_jsx("div", { children: _jsx("div", { style: { width: pivotCardWidth }, children: _jsx(PivotCard, { pivotTable: {
-                                                                    pivot: formData.pivot,
-                                                                    rows: selectedPivotTable?.rows ?? [],
-                                                                    columns: selectedPivotTable?.columns ?? [],
-                                                                }, theme: theme, index: 0, onSelectPivot: () => {
+                                                        }, children: _jsx(PivotModal, { pivotRowField: pivotRowField, setPivotRowField: setPivotRowField, pivotColumnField: pivotColumnField, setPivotColumnField: setPivotColumnField, pivotValueField: pivotValueField, setPivotValueField: setPivotValueField, pivotValueField2: pivotValueField2, setPivotValueField2: setPivotValueField2, pivotAggregation: pivotAggregation, setPivotAggregation: setPivotAggregation, createdPivots: createdPivots, setCreatedPivots: setCreatedPivots, recommendedPivots: recommendedPivots, setRecommendedPivots: setRecommendedPivots, popUpTitle: pivotPopUpTitle, setPopUpTitle: setPivotPopUpTitle, selectedTable: selectedTable, SelectComponent: SelectComponent, ButtonComponent: ButtonComponent, CardComponent: CardComponent, SecondaryButtonComponent: SecondaryButtonComponent, PopoverComponent: PopoverComponent, LabelComponent: LabelComponent, TextComponent: TextComponent, HeaderComponent: HeaderComponent, ErrorMessageComponent: ErrorMessageComponent, PivotRowContainer: PivotRowContainer, PivotColumnContainer: PivotColumnContainer, LoadingComponent: LoadingComponent, theme: theme, isOpen: showPivotPopover, setIsOpen: setShowPivotPopover, showUpdatePivot: isEdittingPivot, setShowUpdatePivot: setIsEdittingPivot, parentRef: parentRef, data: rows, columns: processedColumns, triggerButtonText: 'Add pivot +', selectedPivotIndex: selectedPivotIndex, setSelectedPivotIndex: setSelectedPivotIndex, removePivot: handleDeletePivot, selectPivot: handleAddPivot, dateRange: dateRange, selectPivotOnEdit: true, showTrigger: !formData.pivot, query: query, pivotCountRequest: 4, initialUniqueValues: initialUniqueValues, uniqueValuesIsLoading: initialUniqueValuesIsLoading, initialSelectedPivotTable: selectedPivotTable, pivotRecommendationsEnabled: pivotRecommendationsEnabled, report: report }) }), formData.pivot && (_jsx("div", { children: _jsx("div", { style: { width: pivotCardWidth }, children: _jsx(PivotCard, { pivotTable: pivotCardTable, theme: theme, index: 0, onSelectPivot: () => {
                                                                     setIsEdittingPivot(true);
                                                                     setShowPivotPopover(true);
                                                                     setPivotRowField(formData.pivot?.rowField);
@@ -1082,7 +1228,13 @@ export default function ChartBuilder({ TextInputComponent = QuillTextInput, Sele
                                                                     setPivotValueField2(formData.pivot?.valueField2);
                                                                     setPivotAggregation(formData.pivot?.aggregationType);
                                                                     setPivotPopUpTitle('Edit pivot');
-                                                                }, selectedPivotIndex: -1, onEditPivot: () => { }, CardComponent: CardComponent, ButtonComponent: ButtonComponent, HeaderComponent: HeaderComponent, showEdit: false, onClose: handleDeletePivot, minHeight: 180, LabelComponent: LabelComponent, TextComponent: TextComponent }) }) }))] })] }), (formData.pivot || formData.chartType !== 'table') && (_jsxs("div", { children: [CHART_TO_LABELS[formData.chartType]?.xAxisLabel && (_jsx("div", { style: {
+                                                                }, selectedPivotIndex: -1, onEditPivot: () => { }, CardComponent: CardComponent, ButtonComponent: ButtonComponent, HeaderComponent: HeaderComponent, showEdit: false, onClose: handleDeletePivot, minHeight: 180, LabelComponent: LabelComponent, TextComponent: TextComponent }) }) }))] })] }), (formData.pivot || formData.chartType !== 'table') && (_jsxs("div", { children: [windowWidth < 1200 && _jsx(InternalChart, { report: chartData, filtersEnabled: filtersEnabled, setFiltersEnabled: (hide) => {
+                                                    onFiltersEnabledChanged(hide);
+                                                }, colors: theme?.chartColors, loading: false, hideDateRangeFilter: hideDateRangeFilter, isAdmin: isAdmin, containerStyle: {
+                                                    width: '100%',
+                                                    height: 500,
+                                                    flexGrow: 1,
+                                                }, onClickChartElement: onClickChartElement, filterToggleDisabled: Object.values(validFilter).includes(false), onDashboardFilterChange: onDashboardFilterChange }), CHART_TO_LABELS[formData.chartType]?.xAxisLabel && (_jsx("div", { style: {
                                                     display: 'flex',
                                                     flexDirection: 'column',
                                                 }, children: _jsx(HeaderComponent, { label: "Chart" }) })), CHART_TO_LABELS[formData.chartType]?.xAxisLabel && (_jsxs("div", { children: [_jsx(SubHeaderComponent, { label: CHART_TO_LABELS[formData.chartType]?.xAxisLabel ?? '' }), _jsxs(ChartBuilderInputRowContainer, { children: [_jsx(SelectComponent, { value: formData.xAxisField, onChange: (e) => handleChange(e.target.value, 'xAxisField'), options: formData.pivot
@@ -1096,11 +1248,7 @@ export default function ChartBuilder({ TextInputComponent = QuillTextInput, Sele
                                                                     : formData.xAxisFormat, onChange: (e) => handleChange(e.target.value, 'xAxisFormat'), options: formData.pivot &&
                                                                     isDateField(formData.pivot.rowFieldType || '')
                                                                     ? [{ value: 'pivot_date', label: 'date' }]
-                                                                    : formatOptions, width: 200 })] })] })), CHART_TO_LABELS[formData.chartType]?.yAxisLabel && (_jsxs("div", { children: [_jsx(SubHeaderComponent, { label: CHART_TO_LABELS[formData.chartType]?.yAxisLabel ?? '' }), _jsxs(ChartBuilderInputColumnContainer, { children: [formData.yAxisFields
-                                                                // .filter((yAxisField: YAxisField) => {
-                                                                //   return !yAxisField.field.startsWith('comparison_');
-                                                                // })
-                                                                .map((yAxisField, index) => (_jsxs(ChartBuilderInputRowContainer, { children: [_jsx(SelectComponent, { value: formData.pivot
+                                                                    : formatOptions, width: 200 })] })] })), CHART_TO_LABELS[formData.chartType]?.yAxisLabel && (_jsxs("div", { children: [_jsx(SubHeaderComponent, { label: CHART_TO_LABELS[formData.chartType]?.yAxisLabel ?? '' }), _jsxs(ChartBuilderInputColumnContainer, { children: [formData.yAxisFields.map((yAxisField, index) => (_jsxs(ChartBuilderInputRowContainer, { children: [_jsx(SelectComponent, { value: formData.pivot
                                                                             ? formData.pivot.valueField || 'count'
                                                                             : yAxisField.field, onChange: (e) => handleChange(e.target.value, 'yAxisFields.field', index), options: formData.pivot
                                                                             ? [
@@ -1126,25 +1274,23 @@ export default function ChartBuilder({ TextInputComponent = QuillTextInput, Sele
                                                                                 : ''
                                                                             : yAxisField.format, onChange: (e) => handleChange(e.target.value, 'yAxisFields.format', index), options: formData.pivot
                                                                             ? NUMBER_OPTIONS
-                                                                            : formatOptions, width: 200 }), formData.pivot === null && (_jsx("div", { ref: deleteRef, style: { marginLeft: deleteButtonMargin }, children: _jsx(DeleteButtonComponent, { onClick: () => handleRemoveField('yAxisFields', index) }) }))] }, 'yAxisField' + index))), formData.pivot === null && (_jsx("div", { children: _jsx(SecondaryButtonComponent, { onClick: () => handleAddField('yAxisFields'), label: "Add field +" }) }))] })] }))] })), showTableFormatOptions && windowWidth < 1200 && (_jsx("div", { style: {
+                                                                            : formatOptions, width: 200 }), formData.pivot === null && (_jsx("div", { ref: deleteRef, style: { marginLeft: deleteButtonMargin }, children: _jsx(DeleteButtonComponent, { onClick: () => handleRemoveField('yAxisFields', index) }) }))] }, 'yAxisField' + index))), formData.pivot === null && (_jsx("div", { children: _jsx(SecondaryButtonComponent, { onClick: () => handleAddField('yAxisFields'), label: "Add field +" }) }))] })] }))] })), isAdmin && windowWidth < 1200 && (_jsx("div", { style: {
                                             width: '100%',
                                             height: isHorizontalView || !isOpen ? 'calc(50% - 10px)' : 400,
                                             flexGrow: 1,
                                         }, children: formData.chartType !== 'table' ? (_jsx(TableComponent, { rows: formattedRows, columns: formData.columns, onPageChange: (page) => {
-                                                onPageChange &&
-                                                    onPageChange(page, filtersActive, 'ChartBuilder');
+                                                onPageChange(page);
                                                 setCurrentPage(page);
                                             }, onSortChange: (sort) => {
-                                                onSortChange && onSortChange(sort, filtersActive);
+                                                onSortChange && onSortChange(sort);
                                             }, currentPage: currentPage, rowCount: rowCount, rowCountIsLoading: rowCountIsLoading, isLoading: isLoading, disableSort: disableSort })) : (_jsx(TableComponent, { rows: formattedRows, columns: selectedPivotTable
                                                 ? selectedPivotTable.columns
                                                 : formData.columns, onPageChange: (page) => {
-                                                onPageChange &&
-                                                    onPageChange(page, filtersActive, 'ChartBuilder');
+                                                onPageChange(page);
                                                 setCurrentPage(page);
                                             }, onSortChange: (sort) => {
-                                                onSortChange && onSortChange(sort, filtersActive);
-                                            }, currentPage: currentPage, rowCount: rowCount, rowCountIsLoading: rowCountIsLoading, isLoading: isLoading, disableSort: disableSort })) })), showTableFormatOptions && (_jsxs("div", { children: [_jsxs("div", { style: {
+                                                onSortChange && onSortChange(sort);
+                                            }, currentPage: currentPage, rowCount: selectedPivotTable ? formattedRows.length : rowCount, rowCountIsLoading: rowCountIsLoading, isLoading: isLoading, disableSort: disableSort })) })), isAdmin && (_jsxs("div", { children: [_jsxs("div", { style: {
                                                     display: 'flex',
                                                     flexDirection: 'column',
                                                 }, children: [_jsx(HeaderComponent, { label: "Table" }), _jsx(SubHeaderComponent, { label: "Columns" })] }), _jsxs(ChartBuilderInputColumnContainer, { children: [formData.pivot &&
@@ -1182,11 +1328,20 @@ export default function ChartBuilder({ TextInputComponent = QuillTextInput, Sele
                                                         (formData.pivot &&
                                                             selectedPivotTable &&
                                                             selectedPivotTable.columns &&
-                                                            formData.chartType === 'table')) && (_jsx(SecondaryButtonComponent, { onClick: () => handleAddField('columns'), label: "Add column +" })) })] })] })), showDateFieldOptions && formData.dateField && (_jsxs("div", { style: {
+                                                            formData.chartType === 'table')) && (_jsx(SecondaryButtonComponent, { onClick: () => handleAddField('columns'), label: "Add column +" })) })] })] })), (specificDashboardFilters.length > 0 ||
+                                        (isAdmin &&
+                                            formData.dateField &&
+                                            dashboardConfig[formData.dashboardName ?? '']?.config
+                                                .dateFilter?.label)) && (_jsxs("div", { style: {
                                             display: 'flex',
                                             flexDirection: 'column',
                                             gap: 6,
-                                        }, children: [_jsx(HeaderComponent, { label: "Date filter field" }), _jsxs(ChartBuilderInputRowContainer, { children: [_jsx("div", { style: { display: 'flex', flexDirection: 'column' }, children: _jsx(SelectComponent, { label: "Virtual Table", value: formData.dateField?.table, onChange: (e) => handleChange(e.target.value, 'dateField.table'), options: dateFieldOptions.map((elem) => ({
+                                        }, children: [_jsx(HeaderComponent, { label: "Dashboard filter fields" }), isAdmin &&
+                                                formData.dateField &&
+                                                dashboardConfig[formData.dashboardName ?? destinationDashboard ?? '']?.config.dateFilter?.label && (_jsxs(ChartBuilderInputRowContainer, { children: [_jsx(TextInputComponent, { id: 'filterMap.dateFilter.' +
+                                                            (dashboardConfig[formData.dashboardName ?? '']
+                                                                ?.config.dateFilter?.label ?? 'Date'), value: dashboardConfig[formData.dashboardName ?? '']
+                                                            ?.config.dateFilter?.label ?? 'Date', width: 200, onChange: () => { }, label: 'Filter', disabled: true }), _jsx("div", { style: { display: 'flex', flexDirection: 'column' }, children: _jsx(SelectComponent, { label: "Virtual Table", value: formData.dateField?.table, onChange: (e) => handleChange(e.target.value, 'dateField.table'), options: dateFieldOptions.map((elem) => ({
                                                                 label: elem.name,
                                                                 value: elem.name,
                                                             })), width: 200 }) }), _jsx("div", { style: { display: 'flex', flexDirection: 'column' }, children: _jsx(SelectComponent, { label: "Field", value: removeDoubleQuotes(formData.dateField?.field), onChange: (e) => handleChange(e.target.value, 'dateField.field'), options: dateFieldOptions
@@ -1194,7 +1349,67 @@ export default function ChartBuilder({ TextInputComponent = QuillTextInput, Sele
                                                                 ?.columns?.map((elem) => ({
                                                                 label: elem.field,
                                                                 value: elem.field,
-                                                            })) || [], width: 200 }) })] })] })), showAccessControlOptions && !client?.multiTenancyDisabled && (_jsxs("div", { style: {
+                                                            })) || [], width: 200 }) }), (!formData.dateField?.table ||
+                                                        !formData.dateField?.field) && (_jsx("div", { style: { marginBottom: 8, marginTop: 'auto' }, children: _jsx(ExclamationFilledIcon, { height: 28, width: 28, style: {
+                                                                color: '#dc143c',
+                                                            } }) }))] })), specificDashboardFilters.length > 0 && (_jsx("div", { style: {
+                                                    display: 'flex',
+                                                    flexDirection: 'column',
+                                                    gap: 6,
+                                                }, children: specificDashboardFilters
+                                                    .filter((f) => {
+                                                    return f.filterType !== 'date_range';
+                                                })
+                                                    .map((filter, index) => (_jsxs(ChartBuilderInputRowContainer, { children: [_jsx(TextInputComponent, { id: 'filterMap.' + filter.label, value: filter.label, width: 200, onChange: () => { }, label: index === 0 &&
+                                                                !(isAdmin &&
+                                                                    formData.dateField &&
+                                                                    dashboardConfig[formData.dashboardName ?? '']
+                                                                        ?.config.dateFilter?.label)
+                                                                ? 'Filter'
+                                                                : '', disabled: true }), _jsx(SelectComponent, { label: index === 0 &&
+                                                                !(isAdmin &&
+                                                                    formData.dateField &&
+                                                                    dashboardConfig[formData.dashboardName ?? '']
+                                                                        ?.config.dateFilter?.label)
+                                                                ? 'Virtual Table'
+                                                                : '', value: filterMap[filter.label]?.table ?? filter.table, onChange: (e) => setFilterMap({
+                                                                ...filterMap,
+                                                                [filter.label]: {
+                                                                    table: e.target.value,
+                                                                    field: schemaData.schema
+                                                                        .find((t) => t.name == e.target.value)
+                                                                        ?.columns.find((elem) => elem.field ===
+                                                                        (filterMap[filter.label]?.field ??
+                                                                            filter.field))?.field ?? '',
+                                                                },
+                                                            }), options: allTables.map((elem) => ({
+                                                                label: elem,
+                                                                value: elem,
+                                                            })), width: 200 }), _jsx(SelectComponent, { label: index === 0 &&
+                                                                !(isAdmin &&
+                                                                    formData.dateField &&
+                                                                    dashboardConfig[formData.dashboardName ?? '']
+                                                                        ?.config.dateFilter?.label)
+                                                                ? 'Field'
+                                                                : '', value: filterMap[filter.label]?.field ?? filter.field, onChange: (e) => setFilterMap({
+                                                                ...filterMap,
+                                                                [filter.label]: {
+                                                                    table: filterMap[filter.label]?.table ??
+                                                                        filter.table,
+                                                                    field: e.target.value,
+                                                                },
+                                                            }), options: schemaData.schema
+                                                                .find((t) => t.name ==
+                                                                (filterMap[filter.label]?.table ??
+                                                                    filter.table) &&
+                                                                allTables.includes(t.name))
+                                                                ?.columns.filter((column) => isStringType(column.fieldType))
+                                                                .map((elem) => ({
+                                                                label: elem.label,
+                                                                value: elem.field,
+                                                            })) ?? [], width: 200 }), !validFilter[filter.label] && (_jsx("div", { style: { marginBottom: 8, marginTop: 'auto' }, children: _jsx(ExclamationFilledIcon, { height: 28, width: 28, style: {
+                                                                    color: '#dc143c',
+                                                                } }) }))] }, filter.label))) }))] })), isAdmin && !client?.multiTenancyDisabled && (_jsxs("div", { style: {
                                             display: 'flex',
                                             flexDirection: 'column',
                                             gap: 12,
@@ -1224,7 +1439,8 @@ export default function ChartBuilder({ TextInputComponent = QuillTextInput, Sele
                                                         }, disabled: formData.name === '' ||
                                                             formData.dashboardName === '' ||
                                                             formData.chartType === '' ||
-                                                            filterIssues.length !== 0, label: buttonLabel
+                                                            filterIssues.length !== 0 ||
+                                                            Object.values(validFilter).includes(false), label: buttonLabel
                                                             ? buttonLabel
                                                             : report
                                                                 ? 'Save changes'