@quillsql/react 2.15.2 → 2.15.4

package/dist/esm/ChartBuilder.js

@@ -1,2273 +0,0 @@
-import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
-import { useEffect, useRef, useState, useContext, useMemo, } from 'react';
-import { ClientContext, DashboardConfigContext, DashboardFiltersContext, EventTrackingContext, FetchContext, ReportFiltersContext, ReportsContext, SchemaDataContext, TenantContext, ThemeContext, } from './Context';
-import { PivotModal, generatePivotTable, isDateField, } from './internals/ReportBuilder/PivotModal';
-import { PivotCard } from './internals/ReportBuilder/PivotList';
-import { MemoizedModal, QuillTextInput, MemoizedButton, MemoizedSecondaryButton, MemoizedHeader, MemoizedLabel, MemoizedDeleteButton, MemoizedText, MemoizedPopover, QuillTableComponent, QuillChartBuilderInputRowContainer, QuillChartBuilderInputColumnContainer, MemoizedSubHeader, QuillErrorMessageComponent, QuillPivotRowContainer, QuillPivotColumnContainer, QuillChartBuilderFormContainer, QuillLoadingComponent, QuillToolTip, QuillChartBuilderCheckboxComponent, } 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 { quillAutoFormat, NUMBER_FORMAT_TYPES, quillFormat, } from './utils/valueFormatter';
-import { convertFieldTypeToJSType, isDateType, isNumberType, isStringType, } from './utils/columnProcessing';
-import { getSelectFromAST, getTablesHelper } from './utils/astProcessing';
-import { validateReport } from './utils/validation';
-import { QuillChartErrorWithAction } from './components/Chart/ChartError';
-import { convertInternalReportToReport, 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, getUniqueValuesByQuery, } from './utils/tableProcessing';
-import { getDateBucketFromRange } from './utils/dates';
-import { QuillMultiSelectComponentWithCombo as MultiSelectComponent } from './components/QuillMultiSelectWithCombo';
-import { QuillMultiSelectSectionList } from './components/QuillMultiSelectSectionList';
-import { ALL_TENANTS, REFERENCE_LINE, SINGLE_TENANT } from './utils/constants';
-import { disambiguatedValueField } from './utils/pivotConstructor';
-import { useAllReports, useDashboardInternal, useDashboardReports, } from './hooks/useDashboard';
-const CHART_TYPES = [
-    'column',
-    'stacked',
-    'line',
-    'table',
-    'metric',
-    'gauge',
-    'bar',
-    'pie',
-    'US map',
-    'World map',
-];
-const CHART_TO_LABELS = {
-    column: { xAxisLabel: 'X-Axis', yAxisLabel: 'Y-Axis' },
-    line: { xAxisLabel: 'X-Axis', yAxisLabel: 'Y-Axis' },
-    table: {},
-    metric: {},
-    bar: { xAxisLabel: 'X-Axis', yAxisLabel: 'Y-Axis' },
-    stacked: { xAxisLabel: 'X-Axis', yAxisLabel: 'Y-Axis' },
-    pie: { xAxisLabel: 'Category', yAxisLabel: 'Count' },
-    'US map': { xAxisLabel: 'State', yAxisLabel: 'Value' },
-    'World map': { xAxisLabel: 'Country', yAxisLabel: 'Value' },
-    gauge: { xAxisLabel: 'Value' },
-};
-function getPivotMetricOptions(pivot, selectedPivotTable, chartType) {
-    if (['metric', 'gauge'].includes(chartType) && selectedPivotTable) {
-        return selectedPivotTable.columns.map((elem) => ({
-            label: elem.field === pivot?.rowField
-                ? `Pivot Row (${elem.field})`
-                : elem.field,
-            value: elem.field,
-        }));
-    }
-    if (!pivot.rowField) {
-        const valueField = disambiguatedValueField(pivot);
-        return [
-            {
-                label: `Pivot Value (${valueField})`,
-                value: valueField ?? '',
-            },
-        ];
-    }
-    else {
-        return [
-            {
-                label: `Pivot Row (${pivot.rowField})`,
-                value: pivot.rowField,
-            },
-        ];
-    }
-}
-export function createInitialFormData(columns) {
-    const firstNumberColumn = columns?.find((col) => numberFormatOptions.includes(col.format));
-    const firstStringColumn = columns?.find((col) => !numberFormatOptions.includes(col.format) &&
-        !dateFormatOptions.includes(col.format));
-    const firstDateColumn = columns?.find((col) => dateFormatOptions.includes(col.format));
-    const xAxisField = firstStringColumn?.field ||
-        firstDateColumn?.field ||
-        firstNumberColumn?.field ||
-        columns?.[0]?.field ||
-        '';
-    const xAxisFormat = firstStringColumn?.format ||
-        firstDateColumn?.format ||
-        firstNumberColumn?.format ||
-        columns?.[0]?.format ||
-        'string';
-    const formEmptyState = {
-        name: '',
-        columns: columns.map((col) => {
-            return { ...col, label: snakeAndCamelCaseToTitleCase(col.label) };
-        }),
-        xAxisField,
-        xAxisFormat,
-        yAxisFields: [
-            {
-                field: firstNumberColumn?.field || columns?.[0]?.field || '',
-                label: '',
-                format: firstNumberColumn?.format || columns?.[0]?.format || 'string',
-            },
-        ],
-        xAxisLabel: '',
-        chartType: firstNumberColumn ? 'line' : 'table',
-        pivot: null,
-        template: true,
-        referenceLines: [],
-    };
-    return formEmptyState;
-}
-function getChartTypeOptions(formData, dashboard) {
-    let viableCharts = CHART_TYPES;
-    if (dashboard && dashboard.dateFilter && dashboard.dateFilter.comparison) {
-        viableCharts = viableCharts.filter((chart) => ![
-            'table',
-            'metric',
-            'gauge',
-            'bar',
-            'stacked',
-            'pie',
-            'US map',
-            'World map',
-        ].includes(chart));
-    }
-    if (formData.pivot && !formData.pivot.rowField) {
-        return viableCharts
-            .filter((elem) => ['table', 'metric', 'gauge'].includes(elem))
-            .map((elem) => ({
-            label: elem,
-            value: elem,
-        }));
-    }
-    else {
-        return viableCharts
-            .filter((elem) => !(formData.pivot &&
-            formData.pivot.columnField &&
-            (elem === 'bar' ||
-                elem === 'pie' ||
-                elem === 'US map' ||
-                elem === 'World map')))
-            .map((elem) => ({ label: elem, value: elem }));
-    }
-}
-export function createReportFromForm(formData, report, eventTracking, selectedPivotTable, rows = [], filtersApplied = [], referenceLineQueryResults) {
-    const newReport = convertInternalReportToReport(mergeComparisonRange({
-        ...formData,
-        dashboardName: formData.dashboardName || '',
-        pivot: formData.pivot,
-        id: report.id,
-        order: -1,
-        compareRows: report?.compareRows,
-        filtersApplied: report?.filtersApplied || [],
-        queryString: '',
-        rows: rows,
-        rowCount: selectedPivotTable?.rowCount ||
-            report?.rowCount ||
-            selectedPivotTable?.rows?.length ||
-            rows.length ||
-            0,
-        yAxisFields: formData.yAxisFields ?? [],
-        pivotColumns: selectedPivotTable?.columns ?? undefined,
-        pivotRows: selectedPivotTable?.rows ?? undefined,
-        columnInternal: report?.columnInternal ?? [],
-        referenceLines: formData.referenceLines?.map((elem) => ({
-            label: elem.label,
-            query: elem.label === REFERENCE_LINE
-                ? [Number(elem.y1) || 0, Number(elem.y2) || 0]
-                : elem.label,
-        })) || [],
-        referenceLineYValues: formData.referenceLines?.map((elem, index) => ({
-            label: elem.label,
-            query: elem.label === REFERENCE_LINE
-                ? [Number(elem.y1) || 0, Number(elem.y2) || 0]
-                : referenceLineQueryResults?.[index],
-        })) || [],
-    }), filtersApplied, eventTracking);
-    return newReport;
-}
-export const numberFormatOptions = [
-    'whole_number',
-    'one_decimal_place',
-    'two_decimal_places',
-    'dollar_amount',
-    'dollar_cents',
-    'percentage',
-];
-export const dateFormatOptions = [
-    'MMM_yyyy',
-    'MMM_dd',
-    'MMM_dd_yyyy',
-    'MMM_dd_hh:mm_ap_pm',
-    'hh_ap_pm',
-    'date',
-    'timestamptz',
-];
-const NUMBER_OPTIONS = [
-    { value: 'whole_number', label: 'whole number' },
-    { value: 'one_decimal_place', label: 'one decimal place' },
-    { value: 'two_decimal_places', label: 'two decimal places' },
-    { value: 'dollar_amount', label: 'dollar amount' },
-    { value: 'dollar_cents', label: 'dollar and cent amount' },
-    { value: 'percent', label: 'percentage' },
-];
-const DATE_OPTIONS = [
-    { value: 'MMM_yyyy', label: 'month' },
-    { value: 'MMM_dd', label: 'day' },
-    { value: 'MMM_dd_yyyy', label: 'day and year' },
-    { value: 'MMM_dd_hh:mm_ap_pm', label: 'day and time' },
-    { value: 'hh_ap_pm', label: 'hour' },
-];
-const ALL_FORMAT_OPTIONS = [
-    ...NUMBER_OPTIONS,
-    ...DATE_OPTIONS,
-    { value: 'string', label: 'string' },
-];
-/**
- * ### Quill Chart Builder with Modal
- *
- * Renders a ChartBuilder component with a modal.
- *
- * @example
- * ```js
- * // Usage without custom components
- * <ChartBuilder />
- * ```
- *
- * @example
- * ```js
- * // You can also pass your own components
- * <ChartBuilder
- *   ButtonComponent={MyButton}
- *   SecondaryButtonComponent={MySecondaryButton}
- * />
- * ```
- *
- * ### Chart Builder API
- * @see https://docs.quillsql.com/components/chart-builder#with-modal
- */
-export function ChartBuilderWithModal(props) {
-    const parentRef = useRef(null);
-    const [modalWidth, setModalWidth] = useState(200);
-    const [modalHeight, setModalHeight] = useState(200);
-    const { isOpen, setIsOpen, title, isHorizontalView } = props;
-    const Modal = props.ModalComponent ?? MemoizedModal;
-    const { dashboardReports: dashboard } = useDashboardReports(props.destinationDashboard);
-    const [filtersEnabledState, setFiltersEnabledState] = useState(!!props.reportId);
-    useEffect(() => {
-        function handleResize() {
-            const screenSize = window.innerWidth;
-            if (screenSize >= 1200) {
-                setModalWidth(window.innerWidth - 80);
-            }
-            else {
-                setModalWidth(undefined); // use dynamic width of contents
-            }
-            setModalHeight(window.innerHeight - 80);
-        }
-        handleResize();
-        window.addEventListener('resize', handleResize);
-        return () => {
-            window.removeEventListener('resize', handleResize);
-        };
-    }, []);
-    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: (props.reportId
-                ? (dashboard[props.reportId] ?? props.tempReport)
-                : props.tempReport) ? (_jsx(ChartBuilder, { ...props, filtersEnabled: filtersEnabledState, onFiltersEnabledChanged: setFiltersEnabledState, runQueryOnMount: filtersEnabledState })) : (_jsx("div", { style: { padding: 20 }, children: _jsx(QuillLoadingComponent, {}) })) }) }));
-}
-/**
- * ### Quill Chart Builder
- *
- * A simple form that lets users turn a SQL query into a chart, metric, or table
- * and then add that dashboard item into one of their dashboards.
- *
- * @example
- * ```js
- * // Usage without custom components
- * <ChartBuilder />
- * ```
- *
- * @example
- * ```js
- * // You can also pass your own components
- * <ChartBuilder
- *   ButtonComponent={MyButton}
- *   SecondaryButtonComponent={MySecondaryButton}
- * />
- * ```
- *
- * ### Chart Builder API
- * @see https://docs.quillsql.com/components/chart-builder
- */
-export default function ChartBuilder({ TextInputComponent = QuillTextInput, SelectComponent = QuillSelectComponent, 
-// MultiSelectComponent = QuillMultiSelectComponentWithCombo,
-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, CheckboxComponent = QuillChartBuilderCheckboxComponent, onClickChartError, isOpen, isHorizontalView = true, setIsOpen, dateRange, isAdmin = false, showDashboardDropdown = true, hidePivotForm = false, onAddToDashboardComplete, onDelete, onDiscardChanges, reportId, tempReport, recommendedPivots: rp = [], createdPivots: cp = [], dateColumn, buttonLabel, organizationName, hideDeleteButton = false, hideSubmitButton = false, hideDateRangeFilter = false, showTableFormatOptions, initialUniqueValues, initialUniqueValuesIsLoading, pivotRecommendationsEnabled = true, hideTableView = false, hideChartView = false, hideChartType = false, hideDiscardChanges = false, filtersEnabled, onFiltersEnabledChanged, 
-// isLoading,
-destinationDashboard, destinationSection, onClickChartElement, isEditingMode = false, disableSort = true, runQueryOnMount = false, }) {
-    const [client] = useContext(ClientContext);
-    const [theme] = useContext(ThemeContext);
-    const [schemaData] = useContext(SchemaDataContext);
-    const { getToken, quillFetchWithToken } = useContext(FetchContext);
-    const { eventTracking } = useContext(EventTrackingContext);
-    const { addReport } = useDashboardReports(destinationDashboard);
-    const { reload: reloadDashboard } = useDashboardInternal(destinationDashboard);
-    const { allReportsById } = useAllReports();
-    const { dashboardConfig } = useContext(DashboardConfigContext);
-    const { tenants, flags } = useContext(TenantContext);
-    const report = useMemo(() => {
-        return reportId && !tempReport ? allReportsById[reportId] : tempReport;
-    }, [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 processColumns = (columns) => {
-        if (schemaData.schemaWithCustomFields) {
-            const newProcessedColumns = columns?.map((col) => {
-                if (col.jsType) {
-                    return col;
-                }
-                const newCol = { ...col };
-                let foundColumn;
-                schemaData.schemaWithCustomFields.forEach((table) => {
-                    if (table.columns) {
-                        const matchedColumn = table.columns.find((c) => c.field === col.field);
-                        if (matchedColumn) {
-                            foundColumn = matchedColumn;
-                        }
-                    }
-                });
-                if (!foundColumn) {
-                    return col;
-                }
-                newCol.fieldType = foundColumn.fieldType;
-                newCol.jsType = convertFieldTypeToJSType(foundColumn.fieldType);
-                return newCol;
-            });
-            return newProcessedColumns;
-        }
-        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);
-    }, [dashboardFilters, 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 && !report?.dashboardName;
-                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();
-        window.addEventListener('resize', handleResize);
-        return () => {
-            window.removeEventListener('resize', handleResize);
-        };
-    }, [isOpen]);
-    const [dashboardOptions, setDashboardOptions] = useState([]);
-    const { reportFilters, loadFiltersForReport, reportFiltersDispatch, abortLoadingFilters, } = useContext(ReportFiltersContext);
-    const { reportsDispatch } = useContext(ReportsContext);
-    const initialFilters = useRef(reportFilters[report?.id ?? TEMP_REPORT_ID]);
-    const [reportFiltersLoaded, setReportFiltersLoaded] = useState(!filtersEnabled);
-    useEffect(() => {
-        if (!reportFilters[report?.id ?? TEMP_REPORT_ID]) {
-            loadFiltersForReport(report?.id ?? TEMP_REPORT_ID, 'ChartBuilder', specificDashboardFilters, undefined, undefined, report?.dashboardName);
-        }
-        setReportFiltersLoaded(true);
-        return () => {
-            abortLoadingFilters(report?.id ?? tempReport?.id ?? TEMP_REPORT_ID);
-            if (initialFilters.current) {
-                reportFiltersDispatch({
-                    type: 'ADD_REPORT_FILTERS',
-                    id: report?.id ?? TEMP_REPORT_ID,
-                    data: Object.values(initialFilters.current),
-                });
-            }
-            else {
-                reportFiltersDispatch({
-                    type: 'CLEAR_REPORT_FILTERS',
-                    id: report?.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);
-    const [isEdittingPivot, setIsEdittingPivot] = useState(false);
-    const [selectedPivotIndex, setSelectedPivotIndex] = useState(-1);
-    const [tableName, setTableName] = useState(undefined);
-    const [includeCustomFields, setIncludeCustomFields] = useState(report
-        ? !!report.includeCustomFields
-        : !!client?.featureFlags?.customFieldsEnabled);
-    const selectedTable = schemaData.schema?.find((t) => t.displayName === tableName);
-    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,
-            rowCount: report.pivotRowCount ?? report.pivotRows.length,
-            pivotQuery: report.pivotQuery ?? '',
-            comparisonPivotQuery: report.comparisonPivotQuery,
-        }
-        : undefined;
-    const columns = report?.columnInternal ?? [];
-    const destinationDashboardName = report?.dashboardName || destinationDashboard;
-    const query = report?.queryString;
-    const [loadingFormData, setLoadingFormData] = useState(false);
-    const [triggeredEditChart, setTriggeredEditChart] = useState(false);
-    const [createdPivots, setCreatedPivots] = useState(report?.pivot ? [report.pivot] : cp);
-    const [recommendedPivots, setRecommendedPivots] = useState(rp);
-    const [pivotRowField, setPivotRowField] = useState(report?.pivot?.rowField);
-    const [pivotColumnField, setPivotColumnField] = useState(report?.pivot?.columnField);
-    const [pivotAggregations, setPivotAggregations] = useState(report?.pivot?.aggregations ?? [
-        {
-            valueField: report?.pivot?.valueField,
-            valueField2: report?.pivot?.valueField2,
-            aggregationType: report?.pivot?.aggregationType,
-        },
-    ]);
-    const [pivotLimit, setPivotLimit] = useState(report?.pivot?.rowLimit);
-    const [pivotSort, setPivotSort] = useState(report?.pivot?.sort &&
-        report?.pivot?.sortDirection &&
-        report?.pivot?.sortField
-        ? {
-            sortField: report.pivot.sortField,
-            sortDirection: report.pivot.sortDirection,
-        }
-        : undefined);
-    const baseProcessing = {
-        page: report?.pagination ?? {
-            page: 0,
-            rowsPerPage: 10,
-            rowsPerRequest: report?.chartType === 'table' ? 50 : 500,
-        },
-    };
-    const [currentProcessing, setCurrentProcessing] = useState(baseProcessing);
-    const [customTenantAccess, setCustomTenantAccess] = useState(!!Object.values(report?.flags ?? {}).length);
-    // 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 [referencedColumnsWithoutStar, setReferencedColumnsWithoutStar] = 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 specificDashboardFilters.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.schemaWithCustomFields
-                        ?.find((table) => {
-                        return (table.displayName === (filterMap[filter.label] ?? filter).table);
-                    })
-                        ?.columns.find((col) => col.field === (filterMap[filter.label] ?? filter).field);
-            return acc;
-        }, {});
-    }, [specificDashboardFilters, filterMap, allTables]);
-    const [formFlags, setFormFlags] = useState(report?.flags
-        ? Object.fromEntries(Object.entries(report.flags).map(([key, value]) => {
-            if (value === ALL_TENANTS) {
-                const tenantType = client?.allTenantTypes?.find((t) => t.tenantField === key);
-                return [
-                    key,
-                    tenantType?.tenantField === SINGLE_TENANT
-                        ? (tenantType?.flags ?? [])
-                        : (tenantType?.tenantIds?.map((id) => id.flag) ?? []),
-                ];
-            }
-            else {
-                return [key, value];
-            }
-        }))
-        : undefined);
-    const [defaultDateField, setDefaultDateField] = useState({
-        table: dateFieldOptions[0]?.name || '',
-        field: dateFieldOptions[0]?.columns[0]?.field || '',
-    });
-    const firstNumberColumn = report?.columnInternal?.find((col) => numberFormatOptions.includes(col.format));
-    const formEmptyState = {
-        name: report?.name ?? '',
-        dashboardName: dashboardOptions[0]?.label ?? '',
-        columns: report?.columns?.map((col) => {
-            return { ...col, label: snakeAndCamelCaseToTitleCase(col.label) };
-        }) ?? [],
-        xAxisField: report?.columns?.[0]?.field ?? '',
-        xAxisFormat: report?.columns?.[0]?.format ?? 'string',
-        yAxisFields: [
-            {
-                field: firstNumberColumn?.field ?? report?.columns?.[0]?.field ?? '',
-                label: '',
-                format: firstNumberColumn?.format ?? report?.columns?.[0]?.format ?? 'string',
-            },
-        ],
-        xAxisLabel: '',
-        chartType: firstNumberColumn ? 'line' : 'table',
-        pivot: null,
-        dateField: defaultDateField,
-        template: true,
-        referenceLines: [],
-    };
-    const updateDashboardFilters = async (dashboardName) => {
-        if (dashboardConfig && dashboardConfig[dashboardName]) {
-            return dashboardConfig[dashboardName];
-        }
-        if (!client) {
-            return;
-        }
-        const { data: responseData } = await quillFetchWithToken({
-            client,
-            task: 'dashboard',
-            metadata: {
-                name: dashboardName,
-                clientId: client.clientId,
-                databaseType: client.databaseType,
-                useNewNodeSql: true,
-                tenants,
-            },
-        });
-        if (responseData) {
-            return {
-                ...responseData,
-                createdAt: responseData.createdAt && new Date(responseData.createdAt),
-                dateFilter: responseData.dateFilter
-                    ? {
-                        ...responseData.dateFilter,
-                        presetOptions: responseData.dateFilter.presetOptions?.map((preset) => ({
-                            ...preset,
-                            loopStart: preset.loopStart
-                                ? new Date(preset.loopStart)
-                                : undefined,
-                            loopEnd: preset.loopEnd
-                                ? new Date(preset.loopEnd)
-                                : undefined,
-                        })),
-                        defaultPresetRanges: responseData.dateFilter.defaultPresetRanges?.map((preset) => ({
-                            ...preset,
-                            loopStart: preset.loopStart
-                                ? new Date(preset.loopStart)
-                                : undefined,
-                            loopEnd: preset.loopEnd
-                                ? new Date(preset.loopEnd)
-                                : undefined,
-                        })),
-                    }
-                    : undefined,
-            };
-        }
-    };
-    const pivotFormData = (pivot, reportChartType) => {
-        const yAxisField = pivot.columnField ?? disambiguatedValueField(pivot) ?? '';
-        const yAxisLabel = report?.yAxisFields && report?.yAxisFields?.length > 0
-            ? (report.yAxisFields[0]?.label ?? '')
-            : (disambiguatedValueField(pivot) ?? '');
-        // date labels for pivots should be treated like strings since they are
-        const yAxisIsDate = pivot.columnField
-            ? isDateField(pivot.columnFieldType ?? '')
-            : false;
-        const chartType = reportChartType ??
-            formData?.chartType ??
-            (pivot.rowField ? 'column' : 'metric');
-        const rowColumn = (selectedPivotTable?.columns ?? columns).find((col) => col.field === pivot.rowField);
-        const xAxisField = pivot.rowField &&
-            !(['metric', 'gauge'].includes(chartType) &&
-                !NUMBER_FORMAT_TYPES.includes(rowColumn?.format ?? ''))
-            ? pivot.rowField
-            : disambiguatedValueField(pivot);
-        const result = {
-            pivot,
-            chartType: chartType,
-            xAxisField,
-            xAxisFormat: chartType === 'gauge'
-                ? 'percent'
-                : chartType === 'metric'
-                    ? 'whole_number'
-                    : isDateType(pivot.rowFieldType ?? '')
-                        ? 'string'
-                        : isNumberType(pivot.rowFieldType ?? '')
-                            ? 'whole_number'
-                            : isNumberType(disambiguatedValueField(pivot) ?? '')
-                                ? 'whole_number'
-                                : 'string',
-            xAxisLabel: report?.xAxisLabel || pivot.rowField,
-            yAxisFields: [
-                {
-                    field: yAxisField,
-                    label: yAxisLabel,
-                    format: yAxisIsDate
-                        ? 'string'
-                        : report?.yAxisFields && report?.yAxisFields?.length > 0
-                            ? (report?.yAxisFields[0]?.format ?? 'whole_number')
-                            : (report?.columns.find((col) => col.field === disambiguatedValueField(pivot))?.format ?? 'whole_number'),
-                },
-            ],
-        };
-        return result;
-    };
-    const getReferencedTables = async (client, sqlQuery, dbTables, skipStar) => {
-        const { data: resp } = await quillFetchWithToken({
-            client,
-            task: 'astify',
-            metadata: {
-                query: sqlQuery,
-                clientId: client.clientId,
-                useNewNodeSql: true,
-            },
-        });
-        if (resp.success === false) {
-            return getTablesHelper(getSelectFromAST({}), dbTables, skipStar);
-        }
-        return getTablesHelper(getSelectFromAST(resp.ast), dbTables, skipStar);
-    };
-    const getCurrentSection = () => dashboardConfig[destinationDashboard]?.config.sectionOrder?.find((section) => section.reportOrder?.includes(report?.id ?? ''))?.section ?? '';
-    const formFormDataFromReport = (report, section) => {
-        let pivotData = {};
-        let dateField = defaultDateField;
-        if (report?.pivot && report.pivot.rowField && !report.yAxisFields?.length) {
-            pivotData = pivotFormData(report.pivot, report.chartType);
-        }
-        if (report) {
-            dateField = report.dateField || defaultDateField;
-        }
-        const chartBuilderData = {
-            ...formEmptyState,
-            ...report,
-            ...pivotData,
-            dateField: dateField,
-            referenceLines: report?.referenceLines
-                ? report.referenceLines?.map(({ label, query }) => {
-                    if (typeof query === 'string') {
-                        return { label, y1: undefined, y2: undefined };
-                    }
-                    return {
-                        label,
-                        y1: query[0],
-                        y2: query[1],
-                    };
-                })
-                : [],
-            section,
-        };
-        const chartType = report?.chartType ?? formEmptyState.chartType;
-        const chartTypeOptions = getChartTypeOptions(chartBuilderData, dashboardConfig[report?.dashboardName || destinationDashboard || '']);
-        if (!chartTypeOptions.find((option) => option.value === chartType)) {
-            chartBuilderData.chartType = chartTypeOptions[0]?.value ?? 'table';
-        }
-        return chartBuilderData;
-    };
-    const [formData, setFormData] = useState(formFormDataFromReport(report, destinationSection ?? getCurrentSection()));
-    const reportCustomFields = useMemo(() => {
-        return (report?.columnsWithCustomFields?.filter((col) => !report?.columns?.some((c) => col.field === c.field)) ?? []);
-    }, [report?.columnsWithCustomFields, report?.columns]);
-    const referenceLineQueryResults = useMemo(() => {
-        return formData?.referenceLines?.map((line) => {
-            if (line.label === REFERENCE_LINE) {
-                return [Number(line.y1) || 0, Number(line.y2) || 0];
-            }
-            // line.label is a field
-            // Get the first and last row of the field
-            const field = formData.columns.find((col) => col.field === line.label);
-            if (!field) {
-                return [0, 0];
-            }
-            // return [Number(rows[0]?.[field.field]) || 0, Number(rows[rows.length - 1]?.[field.field]) || 0];
-            return (pivotData?.rows ? pivotData.rows : rows).map((row) => Number(row[field.field]) || 0);
-        });
-    }, [formData?.referenceLines]);
-    const currentDashboard = useMemo(() => {
-        return dashboardConfig[formData.dashboardName ?? report?.dashboardName ?? '']?.config;
-    }, [dashboardConfig, formData.dashboardName, report?.dashboardName]);
-    const currentDashboardTenants = useMemo(() => {
-        return (currentDashboard?.tenantKeys?.map((tenantKey) => client?.allTenantTypes?.find((t) => t.tenantField === tenantKey)) ?? []);
-    }, [client?.allTenantTypes, currentDashboard?.tenantKeys]);
-    const dashboardOwner = currentDashboardTenants?.[0];
-    const currentTenantAsFormFlags = useMemo(() => {
-        if (!tenants || !tenants.length) {
-            return undefined;
-        }
-        const tenantField = typeof tenants[0] !== 'object'
-            ? dashboardOwner?.name
-            : tenants[0]?.tenantField;
-        if (!tenantField) {
-            return undefined;
-        }
-        const tenantIds = typeof tenants[0] !== 'object' ? tenants : tenants[0]?.tenantIds;
-        return { [tenantField]: tenantIds };
-    }, [tenants, dashboardOwner]);
-    const invalidColumns = useMemo(() => {
-        if (!rows || !rows.length) {
-            return [];
-        }
-        if (report?.pivot || pivotData) {
-            return [];
-        }
-        const columnsObservedInRows = rows[0] ? Object.keys(rows[0]) : [];
-        return columns.filter((col) => !columnsObservedInRows.includes(col.field));
-    }, [rows]);
-    const [chartTypes, setChartTypes] = useState((() => {
-        const data = formFormDataFromReport(report, destinationSection ?? getCurrentSection());
-        return getChartTypeOptions(data, dashboardConfig[data.dashboardName || '']);
-    })());
-    const reportContainsCustomFields = useMemo(() => {
-        // Check whether report query contains custom fields
-        const customFieldsMap = schemaData.customFields;
-        const reportQueryContainsCustomFields = allTables.some((table) => {
-            const tableColumns = referencedColumnsWithoutStar[table] ?? [];
-            const customFieldColumns = customFieldsMap?.[table] ?? [];
-            return tableColumns.some((column) => customFieldColumns.some((field) => field.field === column));
-        });
-        return reportQueryContainsCustomFields;
-    }, [allTables, referencedColumnsWithoutStar]);
-    const chartBuilderFormDataContainsCustomFields = useMemo(() => {
-        const customFields = allTables
-            .map((table) => schemaData.customFields?.[table] ?? [])
-            .flat();
-        const customFieldsMap = schemaData.customFields;
-        const pivotContainsCustomFields = customFields.some((field) => field.field === formData.pivot?.columnField ||
-            field.field === formData.pivot?.rowField ||
-            field.field === formData.pivot?.valueField);
-        const xAxisFieldContainsCustomFields = customFields.some((field) => field.field === formData.xAxisField);
-        const yAxisFieldsContainsCustomFields = formData.yAxisFields.some((yAxisField) => {
-            return customFields.some((field) => field.field === yAxisField.field);
-        });
-        const dateFieldContainsCustomFields = customFields.some((field) => field.field === formData.dateField?.field);
-        const canonicalFilterMapContainsCustomFields = Object.values(canonicalFilterMap).some((filter) => {
-            return customFieldsMap?.[filter.table || '']?.some((field) => field.field === filter.field);
-        });
-        return (pivotContainsCustomFields ||
-            xAxisFieldContainsCustomFields ||
-            yAxisFieldsContainsCustomFields ||
-            dateFieldContainsCustomFields ||
-            canonicalFilterMapContainsCustomFields);
-    }, [
-        allTables,
-        formData.pivot,
-        formData.xAxisField,
-        formData.yAxisFields,
-        formData.dateField,
-        canonicalFilterMap,
-    ]);
-    const customFieldsInTabularColumns = useMemo(() => {
-        const customFields = allTables
-            .map((table) => schemaData.customFields?.[table] ?? [])
-            .flat();
-        return formData.columns.some((col) => {
-            return customFields.some((field) => field.field === col.field);
-        });
-    }, [allTables, formData.columns]);
-    const containsCustomFields = useMemo(() => {
-        return (reportContainsCustomFields ||
-            customFieldsInTabularColumns ||
-            chartBuilderFormDataContainsCustomFields);
-    }, [
-        reportContainsCustomFields,
-        customFieldsInTabularColumns,
-        chartBuilderFormDataContainsCustomFields,
-    ]);
-    useEffect(() => {
-        if (!loadingFormData && triggeredEditChart) {
-            editChart();
-        }
-    }, [loadingFormData]);
-    useEffect(() => {
-        async function getFormData() {
-            if (!client) {
-                return;
-            }
-            setLoadingFormData(true);
-            const curFormData = formData;
-            let dashNames = Object.keys(dashboardConfig);
-            if (dashNames.length === 0) {
-                const { data: resp } = await quillFetchWithToken({
-                    client,
-                    task: 'dashnames',
-                    metadata: {
-                        clientId: client.clientId,
-                    },
-                });
-                dashNames = resp.dashboardNames;
-            }
-            let dashboardOptions = dashNames
-                .filter((elem) => elem !== null)
-                .map((key) => ({ label: key, value: key }));
-            if (!dashboardOptions.length) {
-                dashboardOptions = [
-                    { label: 'New - Dashboard', value: 'New - Dashboard' },
-                ];
-            }
-            if (destinationDashboardName) {
-                dashboardOptions = [
-                    { label: destinationDashboardName, value: destinationDashboardName },
-                ];
-            }
-            let dashboardName = report?.dashboardName ?? dashboardOptions[0]?.label ?? '';
-            if (destinationDashboardName) {
-                dashboardName = destinationDashboardName;
-            }
-            const curDashboard = await updateDashboardFilters(dashboardName);
-            setDashboardOptions(dashboardOptions);
-            curFormData.dashboardName = dashboardName;
-            const curSchemaData = schemaData.schemaWithCustomFields;
-            if (!query) {
-                setLoadingFormData(false);
-                return;
-            }
-            const result = await getReferencedTables(client, query, curSchemaData);
-            const referencedTablesWithoutStar = await getReferencedTables(client, query, curSchemaData, true);
-            setDateFieldOptions(result.dateFields);
-            if (result.dateFields[0] && result.dateFields[0].columns[0]) {
-                setDefaultDateField({
-                    table: result.dateFields[0].name,
-                    field: result.dateFields[0].columns[0].field,
-                });
-            }
-            // check if the referenced table is a table with custom field info.. If so block template settings
-            const tableNames = result.referencedTablesAndColumns.map((table) => table.name);
-            setAllTables(tableNames);
-            let customFieldUsage = false;
-            for (const table of tableNames) {
-                const tableInfo = curSchemaData.find((elem) => elem.name === table);
-                if (tableInfo?.customFieldInfo) {
-                    customFieldUsage = true;
-                    break;
-                }
-            }
-            setCustomFieldTableRef(customFieldUsage);
-            const referencedColumns = result.referencedTablesAndColumns.reduce((acc, table) => {
-                acc[table.name] = table.columns.map((col) => col.field);
-                return acc;
-            }, {});
-            const referencedColumnsWithoutStar = referencedTablesWithoutStar.referencedTablesAndColumns.reduce((acc, table) => {
-                acc[table.name] = table.columns.map((col) => col.field);
-                return acc;
-            }, {});
-            setReferencedColumnsWithoutStar(referencedColumnsWithoutStar);
-            setReferencedColumns(referencedColumns);
-            setTableName(result.dateFields[0]?.name);
-            const dateField = {
-                table: result.dateFields[0]?.name || '',
-                field: dateColumn || result.dateFields[0]?.columns[0]?.field || '',
-            };
-            let isTemplate = curFormData.template;
-            if (customFieldUsage) {
-                isTemplate = false;
-            }
-            curFormData.dashboardName =
-                report && report.dashboardName
-                    ? report?.dashboardName
-                    : dashboardOptions[0]?.label;
-            curFormData.template = isTemplate;
-            if (!curFormData.dateField) {
-                curFormData.dateField = { field: '', table: '' };
-            }
-            if (!curFormData.dateField.field || !curFormData.dateField.table) {
-                if (dateField && dateField.field) {
-                    curFormData.dateField = dateField;
-                }
-            }
-            setFormData(curFormData);
-            validationHelper(curFormData, curDashboard, curFormData.dateField ?? dateField, tableNames);
-            setLoadingFormData(false);
-        }
-        getFormData();
-    }, []);
-    const ranMountQuery = useRef(false);
-    useEffect(() => {
-        if (runQueryOnMount &&
-            reportFiltersLoaded &&
-            filtersEnabled &&
-            !ranMountQuery.current) {
-            ranMountQuery.current = true;
-            handleRunQuery(baseProcessing, currentDashboardFilters);
-        }
-    }, [runQueryOnMount, reportFiltersLoaded, filtersEnabled]);
-    const allTenantMap = useMemo(() => {
-        return (client?.allTenantTypes?.reduce((acc, tenantType) => {
-            if (tenantType.scope === 'database') {
-                acc[tenantType.tenantField] =
-                    tenantType.flags?.map((t) => ({
-                        label: t.toString(),
-                        value: t.toString(),
-                    })) ?? [];
-            }
-            else {
-                acc[tenantType.tenantField] =
-                    tenantType.tenantIds?.map((t) => ({
-                        label: t.label.toString(),
-                        value: t.flag.toString(),
-                    })) ?? [];
-            }
-            return acc;
-        }, {}) ?? {});
-    }, [client?.allTenantTypes]);
-    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 ? { ...report, rowCount } : tempReport, eventTracking, selectedPivotTable, rows, currentDashboardFilters, referenceLineQueryResults);
-        return {
-            ...data,
-            filterMap: canonicalFilterMap,
-        };
-    }, [
-        formData,
-        selectedPivotTable,
-        report,
-        rows,
-        rowCount,
-        currentDashboardFilters,
-    ]);
-    const xAxisFormatOptions = useMemo(() => {
-        return chartData?.chartType === 'gauge'
-            ? [
-                { value: 'whole_number', label: 'whole number' },
-                { value: 'two_decimal_places', label: 'two decimal places' },
-                { value: 'percent', label: 'percentage' },
-            ]
-            : ALL_FORMAT_OPTIONS;
-    }, [chartData?.chartType]);
-    const fetchPivotData = async (pivot, tableInfo, uniqueValues, overrideFilters) => {
-        const dashboardFilters = filtersEnabled
-            ? (overrideFilters ?? currentDashboardFilters)
-            : undefined;
-        if (pivot) {
-            let dateBucket = undefined;
-            let dateFilter = undefined;
-            if (filtersEnabled) {
-                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,
-                    dateFilter,
-                    report: report
-                        ? { ...report, ...(tableInfo ?? { itemQuery }) }
-                        : undefined,
-                    client,
-                    uniqueValues,
-                    dashboardName: destinationDashboardName,
-                    tenants,
-                    additionalProcessing: baseProcessing,
-                    getToken,
-                    eventTracking,
-                });
-                setSelectedPivotTable(pivotTable);
-                return pivotTable;
-            }
-            catch (e) {
-                console.log('error', e);
-                eventTracking?.logError?.({
-                    type: 'bug', // TODO: determine type
-                    severity: 'high',
-                    message: 'Error fetching pivot',
-                    errorMessage: e.message,
-                    errorStack: e.stack,
-                    errorData: {
-                        caller: 'ChartBuilder',
-                        function: 'fetchPivotData',
-                    },
-                });
-                if (e instanceof Error) {
-                    setPivotError(e.message);
-                }
-            }
-        }
-        else {
-            setSelectedPivotTable(undefined);
-        }
-    };
-    const formattedRows = useMemo(() => {
-        if (selectedPivotTable &&
-            selectedPivotTable.columns &&
-            formData.chartType === 'table') {
-            const columns = selectedPivotTable.columns;
-            columns.forEach((col, index) => {
-                // ADD THE RIGHT FIELD TYPE FOR THE VALUE COLUMNS
-                if (['min', 'max'].includes(formData.pivot?.aggregations?.[0]?.aggregationType ?? '') &&
-                    index !== 0) {
-                    col.format = 'two_decimal_places';
-                }
-            });
-            return selectedPivotTable.rows.map((row) => {
-                return columns.reduce((formattedRow, column) => {
-                    // Apply the format function to each field in the row
-                    const formattedValue = quillFormat({
-                        value: row[column.field],
-                        format: column.format,
-                    });
-                    formattedRow[column.field] = formattedValue;
-                    return formattedRow;
-                }, {});
-            });
-        }
-        else {
-            if (!rows)
-                return [];
-            return rows.map((row) => {
-                const columns = formData.includeCustomFields && !containsCustomFields
-                    ? formData.columns.concat(reportCustomFields)
-                    : formData.columns;
-                return columns.reduce((formattedRow, column) => {
-                    // Apply the format function to each field in the row
-                    const formattedValue = column.inferFormat
-                        ? quillAutoFormat(row[column.field])
-                        : quillFormat({
-                            value: row[column.field],
-                            format: column.format,
-                        });
-                    formattedRow[column.field] = formattedValue;
-                    return formattedRow;
-                }, {});
-            });
-        }
-    }, [
-        selectedPivotTable,
-        formData.columns,
-        formData.chartType,
-        rows,
-        formData.pivot,
-    ]);
-    const fetchRowCount = async (processing, overrideFilters) => {
-        if (!client || !query) {
-            return;
-        }
-        setRowCountIsLoading(true);
-        const tableInfo = await fetchResultsByQuery({
-            query,
-            client,
-            getToken,
-            eventTracking,
-            tenants,
-            processing,
-            customFields: schemaData.customFields,
-            filters: filtersEnabled ? overrideFilters : undefined,
-            dateField: filtersEnabled
-                ? (report?.dateField ?? formData.dateField)
-                : undefined,
-            rowsOnly: false,
-            rowCountOnly: true,
-            filterMap: canonicalFilterMap,
-            dashboardName: destinationDashboardName,
-        });
-        if (tableInfo.rowCount !== undefined) {
-            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, report?.dashboardName).then(() => {
-            setCurrentPage(0);
-            setMaxPage(0);
-            handleRunQuery(baseProcessing, updatedFilters);
-        });
-    };
-    const filtersEnabledRef = useRef(filtersEnabled);
-    useEffect(() => {
-        // Previous strategy of using mounted.current was not working in StrictMode
-        if (filtersEnabledRef.current !== filtersEnabled) {
-            filtersEnabledRef.current = filtersEnabled;
-            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,
-                tenants,
-                processing,
-                customFields: schemaData.customFields,
-                filters: filtersEnabled ? overrideFilters : undefined,
-                dateField: filtersEnabled
-                    ? (report?.dateField ?? formData.dateField)
-                    : undefined,
-                rowsOnly: true,
-                rowCountOnly: false,
-                filterMap: canonicalFilterMap,
-                dashboardName: destinationDashboardName,
-                getToken,
-                eventTracking,
-            });
-            setCurrentProcessing(processing);
-            setRows(tableInfo.rows);
-            setProcessedColumns(processColumns(tableInfo.columns));
-            setItemQuery(tableInfo.itemQuery);
-            fetchRowCount(processing, overrideFilters);
-            if (formData.pivot) {
-                try {
-                    const uniqueValues = await getUniqueValuesByQuery({
-                        columns: tableInfo.columns.filter((column) => column.field === formData.pivot?.columnField),
-                        query: report.queryString,
-                        client,
-                        getToken,
-                        tenants,
-                        customFields: schemaData.customFields ?? {},
-                        filters: overrideFilters,
-                        dashboardName: destinationDashboardName ?? '',
-                        eventTracking,
-                    });
-                    fetchPivotData(formData.pivot, tableInfo, uniqueValues ?? {}, overrideFilters);
-                }
-                catch (e) {
-                    console.log('error fetching pivot', e);
-                    eventTracking?.logError?.({
-                        type: 'bug', // TODO: determine type
-                        severity: 'high',
-                        message: 'Error running query with pivot',
-                        errorMessage: e.message,
-                        errorStack: e.stack,
-                        errorData: {
-                            caller: 'ChartBuilder',
-                            function: 'handleRunQuery',
-                        },
-                    });
-                    setPivotError(e.message);
-                }
-            }
-            setTimeout(() => {
-                setIsLoading(false);
-            }, 1000); // timeout to avoid a flash
-        }
-        catch (e) {
-            eventTracking?.logError?.({
-                type: 'bug', // TODO: determine type
-                severity: 'high',
-                message: 'Error running query',
-                errorMessage: e.message,
-                errorStack: e.stack,
-                errorData: {
-                    caller: 'ChartBuilder',
-                    function: 'handleRunQuery',
-                },
-            });
-            console.log(e);
-        }
-    };
-    const onPageChange = (page, isPivotTable) => {
-        // 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, false, isPivotTable);
-        }
-        if (page > maxPage) {
-            setMaxPage(page);
-        }
-    };
-    const onSortChange = (sort, isPivotTable) => {
-        // if (shouldSortInMemory(baseProcessing.page, rowCount)) {
-        //   return;
-        // }
-        const updatedProcessing = { ...baseProcessing, sort };
-        updateTableRows(updatedProcessing, true, isPivotTable);
-        setCurrentProcessing(updatedProcessing);
-        setCurrentPage(0);
-        setMaxPage(0);
-    };
-    const updateTableRows = async (processing, resetRows = false, isPivotTable = false) => {
-        if (!client) {
-            return;
-        }
-        if (!isLoading && report && query) {
-            setIsLoading(true);
-            try {
-                const updatedProcessing = { ...currentProcessing, ...processing };
-                const paginatedRows = await fetchResultsByQuery({
-                    query: isPivotTable && report.pivotQuery ? report.pivotQuery : query,
-                    comparisonQuery: isPivotTable && report.comparisonPivotQuery
-                        ? report.comparisonPivotQuery
-                        : undefined,
-                    client,
-                    getToken,
-                    tenants,
-                    processing: updatedProcessing,
-                    customFields: schemaData.customFields,
-                    filters: filtersEnabled ? currentDashboardFilters : undefined,
-                    dateField: filtersEnabled
-                        ? (report?.dateField ?? formData.dateField)
-                        : undefined,
-                    rowsOnly: false,
-                    rowCountOnly: false,
-                    filterMap: canonicalFilterMap,
-                    dashboardName: destinationDashboardName,
-                    pivot: isPivotTable ? report.pivot : undefined,
-                    getPivotRowCount: false,
-                    eventTracking,
-                });
-                if (paginatedRows.error) {
-                    throw new Error('Error fetching chart');
-                }
-                const prevRows = isPivotTable && selectedPivotTable ? selectedPivotTable.rows : rows;
-                let updatedRows = [...prevRows, ...paginatedRows.rows];
-                if (resetRows) {
-                    updatedRows = paginatedRows.rows;
-                }
-                if (isPivotTable && selectedPivotTable) {
-                    setSelectedPivotTable({ ...selectedPivotTable, rows: updatedRows });
-                }
-                else {
-                    setRows(updatedRows);
-                }
-                setCurrentProcessing(updatedProcessing);
-            }
-            catch (e) {
-                console.log(e);
-                eventTracking?.logError?.({
-                    type: 'bug', // TODO: determine type
-                    severity: 'high',
-                    message: 'Error updating table rows',
-                    errorMessage: e.message,
-                    errorStack: e.stack,
-                    errorData: {
-                        caller: 'ChartBuilder',
-                        function: 'updateTableRows',
-                    },
-                });
-            }
-            finally {
-                setTimeout(() => {
-                    setIsLoading(false);
-                }, 500);
-            }
-        }
-    };
-    const handleChange = async (value, fieldName, index) => {
-        let updatedForm = { ...formData };
-        try {
-            if (index !== undefined) {
-                // For dynamic array fields
-                const [field, subfield] = fieldName.split('.');
-                if (field === 'pivot' && !!subfield) {
-                    if (!selectedPivotTable) {
-                        return;
-                    }
-                    let newLabel = undefined;
-                    if (subfield === 'field') {
-                        newLabel = snakeAndCamelCaseToTitleCase(value);
-                    }
-                    const newColumns = selectedPivotTable.columns.map((col, i) => i === index
-                        ? {
-                            ...col,
-                            label: newLabel ? newLabel : col.label,
-                            [subfield]: value,
-                        }
-                        : col);
-                    setSelectedPivotTable({
-                        ...selectedPivotTable,
-                        columns: newColumns,
-                    });
-                }
-                else {
-                    let newLabel = undefined;
-                    if (field === 'columns' && subfield === 'field') {
-                        if (!formData['columns'][index]?.label) {
-                            newLabel = snakeAndCamelCaseToTitleCase(value);
-                        }
-                    }
-                    // @ts-ignore
-                    const updatedArray = formData[field].map((item, i) => i === index
-                        ? {
-                            ...item,
-                            label: newLabel ? newLabel : item.label,
-                            [subfield]: value,
-                        }
-                        : item);
-                    updatedForm = { ...formData, [field]: updatedArray };
-                    setFormData(updatedForm);
-                    setChartTypes(getChartTypeOptions(updatedForm, dashboardConfig[updatedForm.dashboardName ?? '']));
-                }
-            }
-            else if (fieldName.includes('.')) {
-                // For nested fields
-                const [field, subfield] = fieldName.split('.');
-                if (field === 'dateField' &&
-                    subfield === 'table' &&
-                    !formData.dateField?.field) {
-                    const field = schemaData.schemaWithCustomFields?.find((elem) => elem.name === value)?.columns?.[0]?.field;
-                    updatedForm.dateField = {
-                        // @ts-ignore
-                        ...updatedForm[field],
-                        [subfield]: value,
-                        field: field,
-                    };
-                }
-                updatedForm = {
-                    ...updatedForm,
-                    // @ts-ignore
-                    [field]: { ...updatedForm[field], [subfield]: value },
-                };
-            }
-            else {
-                // For simple fields
-                updatedForm = { ...updatedForm, [fieldName]: value };
-            }
-            if (fieldName === 'chartType') {
-                if (value === 'metric') {
-                    updatedForm.xAxisFormat = 'whole_number';
-                    const currentXAxisColumn = (selectedPivotTable?.columns ?? columns).find((c) => c.field === updatedForm.xAxisField);
-                    if (!NUMBER_FORMAT_TYPES.includes(currentXAxisColumn?.format ?? '')) {
-                        updatedForm.xAxisField =
-                            (selectedPivotTable?.columns ?? columns).find((c) => NUMBER_FORMAT_TYPES.includes(c.format))?.field ?? updatedForm.xAxisField;
-                    }
-                }
-                else if (value === 'gauge') {
-                    updatedForm.xAxisFormat = 'percent';
-                    const currentXAxisColumn = (selectedPivotTable?.columns ?? columns).find((c) => c.field === updatedForm.xAxisField);
-                    if (!NUMBER_FORMAT_TYPES.includes(currentXAxisColumn?.format ?? '')) {
-                        updatedForm.xAxisField =
-                            (selectedPivotTable?.columns ?? columns).find((c) => NUMBER_FORMAT_TYPES.includes(c.format))?.field ?? updatedForm.xAxisField;
-                    }
-                }
-            }
-            let dashboardName = updatedForm.dashboardName;
-            if (fieldName === 'dashboardName') {
-                dashboardName = value;
-            }
-            validationHelper(updatedForm, dashboardConfig[dashboardName || '']);
-            setChartTypes(getChartTypeOptions(updatedForm, dashboardConfig[dashboardName || '']));
-        }
-        catch (e) {
-            updatedForm = { ...updatedForm, [fieldName]: value };
-            eventTracking?.logError?.({
-                type: 'bug', // TODO: determine type
-                severity: 'high',
-                message: 'Error changing form',
-                errorMessage: e.message,
-                errorStack: e.stack,
-                errorData: {
-                    caller: 'ChartBuilder',
-                    function: 'handleChange',
-                },
-            });
-        }
-        setFormData(updatedForm);
-    };
-    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
-        // from a 1D pivot to a 2D pivot would make bar lists not an option).
-        // They don't have to have the same value, just same 'truthiness'.
-        const isPivotSameShape = Boolean(formData.pivot?.rowField) === Boolean(pivot.rowField) &&
-            Boolean(formData.pivot?.columnField) === Boolean(pivot.columnField);
-        const isNewChartType = formData.chartType !== newPivotFormData.chartType;
-        const keepOldChartType = isNewChartType && isPivotSameShape;
-        if (pivotData) {
-            setSelectedPivotTable({
-                rows: pivotData.rows,
-                columns: pivotData.columns,
-                rowCount: pivotData.rowCount,
-                pivotQuery: pivotData.pivotQuery,
-                comparisonPivotQuery: pivotData.comparisonPivotQuery,
-            });
-        }
-        else {
-            pivotData = await fetchPivotData(pivot, undefined, uniqueValues);
-        }
-        // NOTE: we are setting the date field to the rowField if it is a date
-        // This method is *potentially* flawed because it chooses the first matching field it finds
-        // which may not be robust to joins, aliases, disambiguations, etc.
-        // unfortunately the pivot doesn't store the table of the rowField so we can't do better
-        const dateField = pivot.rowField && isDateField(pivot.rowFieldType ?? '')
-            ? dateFieldOptions.find((table) => {
-                return table.columns.find((col) => col.field === pivot.rowField);
-            })
-            : undefined;
-        setFormData((formData) => ({
-            ...formData,
-            ...newPivotFormData,
-            ...(keepOldChartType && { chartType: formData.chartType }),
-            dateField: dateField
-                ? { table: dateField.name, field: pivot.rowField }
-                : formData.dateField,
-        }));
-        setChartTypes(getChartTypeOptions({ ...formData, ...newPivotFormData }, dashboardConfig[formData.dashboardName || '']));
-        // maybe validate
-    };
-    const handleDeletePivot = () => {
-        if (!formData.pivot) {
-            return;
-        }
-        setFormData({
-            ...formEmptyState,
-            ...formData,
-            dashboardName: formData.dashboardName,
-            pivot: null,
-            chartType: formEmptyState.chartType,
-            xAxisField: formEmptyState.xAxisField,
-            xAxisFormat: formEmptyState.xAxisFormat,
-            xAxisLabel: formEmptyState.xAxisLabel,
-            yAxisFields: formEmptyState.yAxisFields,
-        });
-        // maybe validate
-        setSelectedPivotTable(undefined);
-        setChartTypes(getChartTypeOptions({ ...formEmptyState, pivot: null }, dashboardConfig[formData.dashboardName || '']));
-    };
-    const handleAddField = (fieldName) => {
-        if (fieldName === 'columns') {
-            setFormData({
-                ...formData,
-                columns: [
-                    ...formData.columns,
-                    { label: '', field: '', format: 'string' },
-                ],
-            });
-        }
-        else if (fieldName === 'yAxisFields') {
-            setFormData({
-                ...formData,
-                yAxisFields: [
-                    ...formData.yAxisFields,
-                    { label: '', field: '', format: 'string' },
-                ],
-            });
-        }
-        else if (fieldName === 'pivot') {
-            setFormData({
-                ...formData,
-                pivot: {
-                    title: '',
-                    rowField: '',
-                    rowFieldType: '',
-                    columnField: '',
-                    columnFieldType: '',
-                    valueField: '',
-                    aggregationType: 'sum',
-                },
-            });
-        }
-        else if (fieldName === 'referenceLines') {
-            setFormData({
-                ...formData,
-                referenceLines: [
-                    ...formData.referenceLines,
-                    { label: '', y1: undefined, y2: undefined },
-                ],
-            });
-        }
-    };
-    const handleRemoveField = (fieldName, index) => {
-        if (fieldName === 'pivot') {
-            setFormData({
-                ...formData,
-                pivot: null,
-            });
-            return;
-        }
-        // @ts-ignore
-        const updatedArray = formData[fieldName].filter((_, i) => i !== index);
-        setFormData({ ...formData, [fieldName]: updatedArray });
-    };
-    const handleSubmit = (event) => {
-        event.preventDefault();
-    };
-    const deleteChart = async () => {
-        if (onDelete && onDelete()) {
-            setIsOpen(false);
-            setIsSubmitting(false);
-        }
-    };
-    const editChart = async () => {
-        if (!client) {
-            return;
-        }
-        if (isSubmitting) {
-            setTriggeredEditChart(false);
-            return;
-        }
-        setIsSubmitting(true);
-        if (!client) {
-            setTriggeredEditChart(false);
-            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 = reportId ? reportId : undefined;
-        if (report && !isAdmin && formData.template) {
-            dashboardItemId = undefined;
-        }
-        const newReport = {
-            ...formData,
-            yAxisFields: formData.yAxisFields.slice(0, formData.chartType === 'pie' ? 1 : formData.yAxisFields.length),
-            filterMap,
-            columns: formData.columns.filter((col) => !invalidColumns.includes(col)),
-            ...(formData.dateField?.table
-                ? {}
-                : { dateField: { ...defaultDateField } }),
-            dashboardName: destinationDashboardName,
-            query: report?.queryString ?? '',
-            pivot: formData.pivot,
-            referencedTables: allTables,
-            referencedColumns,
-            includeCustomFields: includeCustomFields || containsCustomFields,
-            template: tenants
-                ? undefined
-                : report && !isAdmin && formData.template
-                    ? false
-                    : formData.template,
-            reportFlags: containsCustomFields
-                ? currentTenantAsFormFlags
-                : formFlags
-                    ? Object.fromEntries(Object.entries(formFlags)
-                        .filter(([, value]) => value.length > 0)
-                        .map(([key, value]) => {
-                        return [
-                            key,
-                            Object.keys(allTenantMap).length > 1 &&
-                                allTenantMap[key]?.length === value.length
-                                ? ALL_TENANTS
-                                : value,
-                        ];
-                    }))
-                    : undefined,
-            referenceLines: formData.referenceLines.map((line) => {
-                return {
-                    label: line.label,
-                    query: line.label === REFERENCE_LINE
-                        ? [Number(line.y1 ?? 0) || 0, Number(line.y2 ?? 0) || 0]
-                        : '',
-                };
-            }),
-        };
-        const resp = await saveReport({
-            report: { ...newReport, rows: undefined, pivotRows: undefined }, // stop including rows in request
-            dashboardItemId,
-            client,
-            getToken,
-            eventTracking,
-        });
-        if (resp && resp.name !== 'error') {
-            const data = {
-                ...resp,
-                rows,
-                columns: formData.columns.filter((col) => !invalidColumns.includes(col)),
-                pivotRows: selectedPivotTable?.rows || undefined,
-                pivotColumns: selectedPivotTable?.columns || undefined,
-                triggerReload: true,
-                error: undefined,
-                section: formData.section,
-            };
-            addReport(data);
-            reportsDispatch({
-                type: 'ADD_REPORT',
-                id: resp.id,
-                data,
-            });
-            if (onAddToDashboardComplete) {
-                onAddToDashboardComplete(data);
-            }
-            else {
-                // if no explicit onAddToDashboardComplete, default to reloading the dashboard
-                // TODO: Should probably always reload the dashboard, but currently, in the admin library, onAddToDashboardComplete
-                // handles the reload way upstream, and it's a bit spooky to change that right now
-                reloadDashboard(destinationDashboard, true, {
-                    report: data,
-                    action: 'upsert',
-                });
-            }
-        }
-        setIsOpen(false);
-        setIsSubmitting(false);
-        setTriggeredEditChart(false);
-    };
-    // Prevent horizontal view on small screens.
-    isHorizontalView = windowWidth < 1200 ? false : isHorizontalView;
-    if (!schemaData.schema) {
-        return _jsx("div", { children: "No schema" });
-    }
-    return (_jsxs("div", { style: {
-            width: '100%',
-            height: '100%',
-            display: 'flex',
-            flexDirection: 'column',
-            flexGrow: 1,
-        }, children: [_jsxs("div", { id: "quill-chart-modal", style: {
-                    width: '100%',
-                    height: '100%',
-                    maxWidth: '100%',
-                    display: 'flex',
-                    padding: modalPadding,
-                    paddingTop: windowWidth < 1200 && isOpen ? 0 : modalPadding,
-                    gap: '20px',
-                    flexDirection: isHorizontalView ? 'row' : 'column',
-                    boxSizing: 'border-box',
-                }, children: [hideChartView ? null : (_jsxs("div", { style: {
-                            display: 'flex',
-                            flexDirection: 'column',
-                            gap: isOpen ? 16 : 20,
-                            overflowY: 'scroll',
-                            height: isHorizontalView || !isOpen ? '100%' : 800,
-                            ...(isHorizontalView && {
-                                // flexGrow: 1,
-                                width: !isOpen ? '100%' : `calc(100% - ${formWidth}px - 20px)`, // width of left sidebar plus gap
-                            }),
-                            ...(!isHorizontalView && isOpen && { width: formWidth }),
-                        }, 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: isLoading || !reportFiltersLoaded, hideDateRangeFilter: hideDateRangeFilter, isAdmin: isAdmin, containerStyle: {
-                                    width: '100%',
-                                    // height:
-                                    //   formData.chartType === 'metric'
-                                    //     ? 100
-                                    //     : `calc(${filtersEnabled ? 50 : 70}%)`,
-                                    ...(isHorizontalView && {
-                                        flexGrow: !['table'].includes(formData.chartType) ? 1 : 0,
-                                    }),
-                                }, onClickChartElement: onClickChartElement, filterToggleDisabled: Object.values(validFilter).includes(false), onDashboardFilterChange: onDashboardFilterChange, layoutChanged: isOpen, SelectComponent: SelectComponent, MultiSelectComponent: MultiSelectComponent, LoadingComponent: LoadingComponent }))), 
-                            // Make sure to display non-pivoted table when using pivot chart
-                            !hideChartView &&
-                                (isHorizontalView || (!isOpen && windowWidth < 1200)) && (_jsxs("div", { style: {
-                                    width: '100%',
-                                    // height:
-                                    //   isHorizontalView || !isOpen
-                                    //     ? `calc(${filtersEnabled ? 30 : 50}%)`
-                                    //     : 400,
-                                    flexGrow: 1,
-                                    display: 'flex',
-                                    flexDirection: 'column',
-                                    gap: 8,
-                                }, children: [windowWidth < 1200 && (_jsx(InternalChart, { report: chartData, filtersEnabled: filtersEnabled, setFiltersEnabled: (hide) => {
-                                            onFiltersEnabledChanged(hide);
-                                        }, colors: theme?.chartColors, loading: isLoading || !reportFiltersLoaded, hideDateRangeFilter: hideDateRangeFilter, isAdmin: isAdmin, containerStyle: {
-                                            width: '100%',
-                                            // height:
-                                            //   formData.chartType === 'table'
-                                            //     ? 200
-                                            //     : formData.chartType === 'metric'
-                                            //       ? 300
-                                            //       : 500,
-                                            flexGrow: formData.chartType !== 'table' ? 1 : 0,
-                                        }, onClickChartElement: onClickChartElement, filterToggleDisabled: Object.values(validFilter).includes(false), onDashboardFilterChange: onDashboardFilterChange, layoutChanged: isOpen })), hideTableView ? null : formData.chartType !== 'table' ? (_jsx(TableComponent, { rows: formattedRows, columns: includeCustomFields && !containsCustomFields
-                                            ? formData.columns.concat(reportCustomFields)
-                                            : formData.columns, onPageChange: (page) => {
-                                            onPageChange(page);
-                                            setCurrentPage(page);
-                                        }, onSortChange: (sort) => {
-                                            onSortChange && onSortChange(sort);
-                                        }, currentPage: currentPage, rowCount: rowCount, isLoading: isLoading || !reportFiltersLoaded, rowCountIsLoading: rowCountIsLoading, disableSort: disableSort, hideLabels: false })) : (_jsx(TableComponent, { rows: formattedRows, columns: selectedPivotTable
-                                            ? selectedPivotTable.columns
-                                            : includeCustomFields && !containsCustomFields
-                                                ? formData.columns.concat(reportCustomFields)
-                                                : formData.columns, onPageChange: (page) => {
-                                            onPageChange(page, true);
-                                            setCurrentPage(page);
-                                        }, onSortChange: (sort) => {
-                                            onSortChange && onSortChange(sort, true);
-                                        }, currentPage: currentPage, rowCount: selectedPivotTable ? pivotData?.rowCount : rowCount, rowCountIsLoading: rowCountIsLoading, isLoading: isLoading || !reportFiltersLoaded, disableSort: disableSort, hideLabels: false }))] }))] })), isOpen && (_jsxs("form", { ref: parentRef, id: "quill-chart-form", onSubmit: handleSubmit, style: {
-                            display: 'flex',
-                            flexDirection: 'column',
-                            gap: 20,
-                            ...(isHorizontalView && {
-                                height: '100%',
-                                minWidth: formWidth,
-                                maxWidth: formWidth,
-                                width: formWidth,
-                            }),
-                            ...(windowWidth < 1200 && {
-                                height: '100%',
-                                width: formWidth,
-                                paddingTop: modalPadding,
-                                paddingBottom: modalPadding,
-                            }),
-                        }, children: [_jsxs(FormContainer, { children: [hideChartView
-                                        ? null
-                                        : (formData.pivot || formData.chartType !== 'table') &&
-                                            windowWidth < 1200 && (_jsx(InternalChart, { report: chartData, filtersEnabled: filtersEnabled, setFiltersEnabled: (hide) => {
-                                                onFiltersEnabledChanged(hide);
-                                            }, colors: theme?.chartColors, loading: isLoading || !reportFiltersLoaded, hideDateRangeFilter: hideDateRangeFilter, isAdmin: isAdmin, containerStyle: {
-                                                width: '100%',
-                                                // height:
-                                                //   formData.chartType === 'table'
-                                                //     ? 200
-                                                //     : formData.chartType === 'metric'
-                                                //       ? 300
-                                                //       : formData.chartType === 'US map' ||
-                                                //           formData.chartType === 'World map'
-                                                //         ? 'fit-content'
-                                                //         : 500,
-                                                flexGrow: !['table'].includes(formData.chartType)
-                                                    ? 1
-                                                    : 0,
-                                            }, onClickChartElement: onClickChartElement, filterToggleDisabled: Object.values(validFilter).includes(false), onDashboardFilterChange: onDashboardFilterChange, layoutChanged: isOpen })), _jsxs(ChartBuilderInputRowContainer, { children: [_jsx("div", { ref: inputRef, style: { display: 'flex', flexDirection: 'column' }, children: _jsx(TextInputComponent
-                                                // {...autofocusRefProp}
-                                                , { 
-                                                    // {...autofocusRefProp}
-                                                    id: "chart-builder-name", label: "Name", width: 200, value: formData.name, onChange: (e) => handleChange(e.target.value, 'name'), placeholder: "Name" }) }), showDashboardDropdown && !destinationDashboardName && (_jsx("div", { style: { display: 'flex', flexDirection: 'column' }, children: _jsx(SelectComponent, { label: "Dashboard", value: formData.dashboardName || '', onChange: async (e) => {
-                                                        handleChange(e.target.value, 'dashboardName');
-                                                        await updateDashboardFilters(e.target.value);
-                                                    }, options: dashboardOptions.map((elem) => ({
-                                                        label: elem.label,
-                                                        value: elem.label,
-                                                    })), width: 200 }) })), hideChartType ? (_jsx("div", { style: { width: 200 } })) : (_jsxs(_Fragment, { children: [_jsx("div", { ref: selectRef, style: { display: 'flex', flexDirection: 'column' }, children: _jsx(SelectComponent, { label: "Chart type", value: formData.chartType, onChange: (e) => handleChange(e.target.value, 'chartType'), options: chartTypes, width: 200 }) }), !destinationSection &&
-                                                        currentDashboard?.sectionOrder?.some((s) => s.section) && (_jsx("div", { style: {
-                                                            display: currentDashboard?.sectionOrder?.length
-                                                                ? 'flex'
-                                                                : 'none',
-                                                            flexDirection: 'column',
-                                                        }, children: _jsx(SelectComponent, { label: "Section", value: formData.section ?? '', options: currentDashboard?.sectionOrder?.map((s) => ({
-                                                                label: s.section ? s.section : 'No section',
-                                                                value: s.section,
-                                                            })) ?? [], onChange: (e) => {
-                                                                handleChange(e.target.value ?? '', 'section');
-                                                            }, width: 200, hideEmptyOption: true }) }))] }))] }), hidePivotForm ? null : (_jsxs("div", { style: {
-                                            display: 'flex',
-                                            flexDirection: 'column',
-                                            gap: 6,
-                                        }, children: [_jsx(HeaderComponent, { label: "Pivot" }), _jsxs("div", { style: { fontFamily: theme?.fontFamily }, children: [_jsx("div", { style: {
-                                                            maxWidth: 200,
-                                                            // marginTop: 6,
-                                                            display: 'flex',
-                                                            flexDirection: 'column',
-                                                        }, children: _jsx(PivotModal, { pivotRowField: pivotRowField, setPivotRowField: setPivotRowField, pivotColumnField: pivotColumnField, setPivotColumnField: setPivotColumnField, pivotAggregations: pivotAggregations, pivotSort: pivotSort, setPivotSort: setPivotSort, pivotLimit: pivotLimit, setPivotLimit: setPivotLimit, setPivotAggregations: setPivotAggregations, createdPivots: createdPivots, setCreatedPivots: setCreatedPivots, recommendedPivots: recommendedPivots, setRecommendedPivots: setRecommendedPivots, popUpTitle: pivotPopUpTitle, setPopUpTitle: setPivotPopUpTitle, selectedTable: selectedTable, SelectComponent: SelectComponent, TextInputComponent: TextInputComponent, ButtonComponent: ButtonComponent, CardComponent: CardComponent, SecondaryButtonComponent: SecondaryButtonComponent, PopoverComponent: PopoverComponent, LabelComponent: LabelComponent, TextComponent: TextComponent, HeaderComponent: HeaderComponent, SubheaderComponent: SubHeaderComponent, DeleteButtonComponent: DeleteButtonComponent, 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 ? { ...report, ...{ itemQuery } } : undefined, dashboardName: destinationDashboardName || '', dateFilter: filtersEnabled
-                                                                ? currentDashboardFilters?.find((f) => f.filterType === 'date_range')
-                                                                : undefined, heightAdjustment: 200 }) }), formData.pivot && (_jsx("div", { children: _jsx("div", { style: { width: pivotCardWidth }, children: isLoading || !reportFiltersLoaded ? (_jsx(LoadingComponent, {})) : (_jsx(PivotCard, { pivotTable: pivotCardTable, theme: theme, index: 0, onSelectPivot: () => {
-                                                                    setIsEdittingPivot(true);
-                                                                    setShowPivotPopover(true);
-                                                                    setPivotRowField(formData.pivot?.rowField);
-                                                                    setPivotColumnField(formData.pivot?.columnField);
-                                                                    setPivotAggregations(formData.pivot?.aggregations ?? [
-                                                                        {
-                                                                            valueField: formData.pivot?.valueField,
-                                                                            aggregationType: formData.pivot?.aggregationType,
-                                                                            valueField2: formData.pivot?.valueField2,
-                                                                        },
-                                                                    ]);
-                                                                    setPivotSort(formData.pivot?.sort &&
-                                                                        formData.pivot?.sortDirection &&
-                                                                        formData.pivot?.sortField
-                                                                        ? {
-                                                                            sortField: formData.pivot?.sortField,
-                                                                            sortDirection: formData.pivot?.sortDirection,
-                                                                        }
-                                                                        : undefined);
-                                                                    setPivotLimit(formData.pivot?.rowLimit);
-                                                                    setPivotPopUpTitle('Edit pivot');
-                                                                }, selectedPivotIndex: -1, onEditPivot: () => { }, CardComponent: CardComponent, ButtonComponent: ButtonComponent, HeaderComponent: HeaderComponent, showEdit: false, onClose: handleDeletePivot, minHeight: 180, LabelComponent: LabelComponent, TextComponent: TextComponent })) }) }))] })] })), !hideChartView &&
-                                        (formData.pivot ||
-                                            (formData.chartType !== 'table' &&
-                                                formData.chartType !== 'metric')) && (_jsxs("div", { children: [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
-                                                                    ? getPivotMetricOptions(formData.pivot, selectedPivotTable, formData.chartType)
-                                                                    : columns.map((elem) => ({
-                                                                        label: elem.field,
-                                                                        value: elem.field,
-                                                                    })), width: 200 }), _jsx(TextInputComponent, { id: "chart-builder-x-axis-label", width: 200, value: formData.xAxisLabel, placeholder: "Column Label", onChange: (e) => handleChange(e.target.value, 'xAxisLabel') }), _jsx(SelectComponent, { value: formData.pivot &&
-                                                                    isDateField(formData.pivot.rowFieldType ?? '')
-                                                                    ? 'string'
-                                                                    : formData.xAxisFormat, onChange: (e) => handleChange(e.target.value, 'xAxisFormat'), options: formData.pivot &&
-                                                                    isDateField(formData.pivot.rowFieldType ?? '')
-                                                                    ? [{ value: 'string', label: 'date' }]
-                                                                    : xAxisFormatOptions, width: 200, hideEmptyOption: true })] })] })), CHART_TO_LABELS[formData.chartType]?.yAxisLabel && (_jsxs("div", { children: [_jsx(SubHeaderComponent, { label: CHART_TO_LABELS[formData.chartType]?.yAxisLabel ??
-                                                            '' }), _jsxs(ChartBuilderInputColumnContainer, { children: [formData.yAxisFields
-                                                                .slice(0, formData.chartType === 'pie'
-                                                                ? 1
-                                                                : formData.yAxisFields.length)
-                                                                .map((yAxisField, index) => (_jsxs(ChartBuilderInputRowContainer, { children: [_jsx(SelectComponent, { value: formData.pivot
-                                                                            ? formData.pivot.aggregations?.length
-                                                                                ? (disambiguatedValueField(formData.pivot) ?? 'count')
-                                                                                : 'count'
-                                                                            : yAxisField.field, onChange: (e) => handleChange(e.target.value, 'yAxisFields.field', index), options: formData.pivot
-                                                                            ? [
-                                                                                {
-                                                                                    label: `Pivot Column (${formData.pivot.aggregations?.length ? (disambiguatedValueField(formData.pivot) ?? 'count') : 'count'})`,
-                                                                                    value: formData.pivot.aggregations
-                                                                                        ?.length
-                                                                                        ? (disambiguatedValueField(formData.pivot) ?? 'count')
-                                                                                        : 'count',
-                                                                                },
-                                                                            ]
-                                                                            : columns
-                                                                                .filter((elem) => {
-                                                                                return numberFormatOptions.includes(columns.find((col) => col.field === elem.field)?.format || '');
-                                                                            })
-                                                                                .map((elem) => ({
-                                                                                label: elem.field,
-                                                                                value: elem.field,
-                                                                            })), width: 200 }), _jsx(TextInputComponent, { id: "chart-builder-y-axis-label", width: 200, value: yAxisField.label, placeholder: "Column Label", onChange: (e) => handleChange(e.target.value, 'yAxisFields.label', index) }), _jsx(SelectComponent, { value: formData.pivot
-                                                                            ? (NUMBER_OPTIONS.find((option) => {
-                                                                                return (option.value === yAxisField.format);
-                                                                            })?.value ?? NUMBER_OPTIONS[0].value)
-                                                                            : yAxisField.format, onChange: (e) => handleChange(e.target.value, 'yAxisFields.format', index), options: formData.pivot
-                                                                            ? NUMBER_OPTIONS
-                                                                            : ALL_FORMAT_OPTIONS, width: 200, hideEmptyOption: true }), !formData.pivot && (_jsx("div", { ref: deleteRef, style: { marginLeft: deleteButtonMargin }, children: _jsx(DeleteButtonComponent, { onClick: () => handleRemoveField('yAxisFields', index) }) }))] }, 'yAxisField_' + yAxisField.field + index))), !formData.pivot && formData.chartType !== 'pie' && (_jsx("div", { children: _jsx(SecondaryButtonComponent, { onClick: () => handleAddField('yAxisFields'), label: "Add field +" }) }))] })] })), client?.featureFlags?.['referenceLines'] &&
-                                                (chartData.chartType === 'line' ||
-                                                    chartData.chartType === 'column') && (_jsxs("div", { children: [_jsx(SubHeaderComponent, { label: 'Reference Lines' }), _jsxs(ChartBuilderInputColumnContainer, { children: [formData.referenceLines?.map((refLine, index) => (_jsxs(ChartBuilderInputRowContainer, { children: [_jsx(SelectComponent, { width: 200, value: refLine.label, onChange: (e) => handleChange(e.target.value, 'referenceLines.label', index), 
-                                                                        // only include numeric columns
-                                                                        options: [
-                                                                            {
-                                                                                label: 'Custom Values',
-                                                                                value: REFERENCE_LINE,
-                                                                            },
-                                                                        ].concat((selectedPivotTable?.columns
-                                                                            ? selectedPivotTable.columns
-                                                                            : columns)
-                                                                            .filter((c) => NUMBER_FORMAT_TYPES.includes(c.format))
-                                                                            .map((elem) => ({
-                                                                            label: elem.field,
-                                                                            value: elem.field,
-                                                                        }))) }), refLine.label === REFERENCE_LINE && (_jsxs(_Fragment, { children: [_jsx(TextInputComponent, { id: "chart-builder-ref-line-y1", width: 200, value: refLine.y1?.toString() ?? '', placeholder: "Start value", onChange: (e) => handleChange(e.target.value, 'referenceLines.y1', index) }), _jsx(TextInputComponent, { id: "chart-builder-ref-line-y2", width: 200, value: refLine.y2?.toString() ?? '', placeholder: "End value", onChange: (e) => handleChange(e.target.value, 'referenceLines.y2', index) })] })), _jsx("div", { ref: deleteRef, style: { marginLeft: deleteButtonMargin }, children: _jsx(DeleteButtonComponent, { onClick: () => handleRemoveField('referenceLines', index) }) })] }, 'referenceLine' + index))), _jsx("div", { children: _jsx(SecondaryButtonComponent, { onClick: () => handleAddField('referenceLines'), label: "Add line +" }) })] })] }))] })), 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: includeCustomFields && !containsCustomFields
-                                                ? formData.columns.concat(reportCustomFields)
-                                                : formData.columns, onPageChange: (page) => {
-                                                onPageChange(page);
-                                                setCurrentPage(page);
-                                            }, onSortChange: (sort) => {
-                                                onSortChange && onSortChange(sort);
-                                            }, currentPage: currentPage, rowCount: rowCount, rowCountIsLoading: rowCountIsLoading, isLoading: isLoading || !reportFiltersLoaded, disableSort: disableSort, hideLabels: false })) : (_jsx(TableComponent, { rows: formattedRows, columns: selectedPivotTable
-                                                ? selectedPivotTable.columns
-                                                : includeCustomFields && !containsCustomFields
-                                                    ? formData.columns.concat(reportCustomFields)
-                                                    : formData.columns, onPageChange: (page) => {
-                                                onPageChange(page, true);
-                                                setCurrentPage(page);
-                                            }, onSortChange: (sort) => {
-                                                onSortChange && onSortChange(sort, true);
-                                            }, currentPage: currentPage, rowCount: selectedPivotTable ? pivotData?.rowCount : rowCount, rowCountIsLoading: rowCountIsLoading, isLoading: isLoading || !reportFiltersLoaded, disableSort: disableSort, hideLabels: false })) })), (showTableFormatOptions || isAdmin) && (_jsxs("div", { style: {
-                                            display: 'flex',
-                                            flexDirection: 'column',
-                                            gap: 6,
-                                        }, children: [_jsxs("div", { style: {
-                                                    display: 'flex',
-                                                    flexDirection: 'column',
-                                                }, children: [_jsx(HeaderComponent, { label: "Table" }), _jsx(SubHeaderComponent, { label: "Columns" })] }), _jsxs(ChartBuilderInputColumnContainer, { children: [formData.pivot &&
-                                                        selectedPivotTable &&
-                                                        selectedPivotTable.columns &&
-                                                        formData.chartType === 'table'
-                                                        ? // THIS CASE IF FOR PIVOT TABLES ONLY
-                                                            selectedPivotTable.columns.map((column, index) => (_jsxs(ChartBuilderInputRowContainer, { children: [_jsx(SelectComponent, { value: column.field, onChange: (e) => handleChange(e.target.value, 'pivot.field', index), options: selectedPivotTable.columns.map((elem) => ({
-                                                                            label: elem.field,
-                                                                            value: elem.field,
-                                                                        })), disabled: index === 0, width: 200, hideEmptyOption: true }), _jsx(TextInputComponent, { id: `chart-builder-column-label-${index}`, width: 200, value: column.label, placeholder: "Column Label", onChange: (e) => handleChange(e.target.value, 'pivot.label', index) }), _jsx(SelectComponent, { value: 
-                                                                        // The first index use rowField for the rest of them use value fields
-                                                                        column.format, onChange: (e) => handleChange(e.target.value, 'pivot.format', index), options: formData.pivot &&
-                                                                            index === 0 &&
-                                                                            selectedPivotTable?.columns.length > 1
-                                                                            ? isDateField(formData.pivot.rowFieldType || '')
-                                                                                ? [{ label: 'date', value: 'string' }]
-                                                                                : [{ label: 'string', value: 'string' }]
-                                                                            : [
-                                                                                ...NUMBER_OPTIONS,
-                                                                                { label: 'string', value: 'string' },
-                                                                            ], width: 200, hideEmptyOption: true })] }, 'column' + index)))
-                                                        : formData.columns.map((column, index) => (_jsxs(ChartBuilderInputRowContainer, { children: [_jsx(SelectComponent, { value: column.field, onChange: (e) => handleChange(e.target.value, 'columns.field', index), options: rows[0]
-                                                                        ? Object.keys(rows[0]).map((elem) => ({
-                                                                            label: elem,
-                                                                            value: elem,
-                                                                        }))
-                                                                        : columns.map((elem) => ({
-                                                                            label: elem.field,
-                                                                            value: elem.field,
-                                                                        })), width: 200, hideEmptyOption: true }), _jsx(TextInputComponent, { id: `chart-builder-column-label-${index}`, width: 200, value: column.label, placeholder: "Column Label", onChange: (e) => handleChange(e.target.value, 'columns.label', index) }), _jsx(SelectComponent, { value: column.format, onChange: (e) => handleChange(e.target.value, 'columns.format', index), options: ALL_FORMAT_OPTIONS, width: 200, hideEmptyOption: true }), _jsx("div", { ref: deleteRef, style: { marginLeft: deleteButtonMargin }, children: _jsx(DeleteButtonComponent, { onClick: () => handleRemoveField('columns', index) }) })] }, 'column' + index))), _jsx("div", { children: !(
-                                                        // hide when pivoted and chartType === 'table'
-                                                        (formData.pivot &&
-                                                            selectedPivotTable &&
-                                                            selectedPivotTable.columns &&
-                                                            formData.chartType === 'table')) && (_jsxs("div", { style: {
-                                                                display: 'flex',
-                                                                flexDirection: 'row',
-                                                                gap: 10,
-                                                            }, children: [_jsx(SecondaryButtonComponent, { onClick: () => handleAddField('columns'), label: "Add column +" }), isAdmin &&
-                                                                    client?.featureFlags?.customFieldsEnabled && (_jsx(QuillToolTip, { text: "Custom field directly referenced in report", enabled: containsCustomFields, textStyle: {
-                                                                        maxWidth: '200px',
-                                                                        whiteSpace: 'normal',
-                                                                    }, children: _jsx(CheckboxComponent, { isChecked: containsCustomFields || includeCustomFields, label: "Include Custom Fields", onChange: () => setIncludeCustomFields((prev) => !prev), disabled: containsCustomFields, containerStyle: {
-                                                                            height: containsCustomFields
-                                                                                ? '100%' // required when wrapped with QuillToolTip
-                                                                                : undefined,
-                                                                        } }) }))] })) })] })] })), isAdmin && tenants && dashboardOwner && (_jsxs("div", { style: {
-                                            display: 'flex',
-                                            flexDirection: 'column',
-                                            gap: 12,
-                                        }, children: [_jsx(HeaderComponent, { label: "Tenant access" }), _jsx("div", { style: {
-                                                    display: 'flex',
-                                                    flexDirection: 'column',
-                                                    width: 'fit-content',
-                                                }, children: _jsxs("div", { style: {
-                                                        display: 'flex',
-                                                        flexDirection: 'row',
-                                                        width: 'fit-content',
-                                                        gap: 12,
-                                                        marginBottom: 8,
-                                                    }, children: [_jsx(QuillToolTip, { text: 'Tenant access is restricted to current tenant with direct custom field reference.', enabled: containsCustomFields, textStyle: {
-                                                                maxWidth: '200px',
-                                                                whiteSpace: 'normal',
-                                                            }, children: _jsxs("div", { style: {
-                                                                    outline: '1px solid #E7E7E7',
-                                                                    borderRadius: 6,
-                                                                    padding: 4,
-                                                                    display: 'flex',
-                                                                    flexDirection: 'row',
-                                                                    marginLeft: 2,
-                                                                    backgroundColor: '#FCFCFC',
-                                                                    height: 38,
-                                                                    width: 'fit-content',
-                                                                }, children: [_jsx("button", { onClick: () => {
-                                                                            if (!containsCustomFields) {
-                                                                                setCustomTenantAccess(false);
-                                                                                setFormFlags(undefined);
-                                                                            }
-                                                                        }, style: {
-                                                                            width: 95,
-                                                                            outline: !(customTenantAccess || containsCustomFields)
-                                                                                ? '1px solid #E7E7E7'
-                                                                                : undefined,
-                                                                            backgroundColor: !(customTenantAccess || containsCustomFields)
-                                                                                ? 'white'
-                                                                                : undefined,
-                                                                            // Center text vertically and horizontally
-                                                                            display: 'flex',
-                                                                            justifyContent: 'center',
-                                                                            alignItems: 'center',
-                                                                            borderRadius: 6,
-                                                                            fontSize: 14,
-                                                                            fontWeight: 500,
-                                                                            userSelect: 'none',
-                                                                        }, children: "Global" }), _jsx("button", { onClick: () => {
-                                                                            setCustomTenantAccess(true);
-                                                                        }, style: {
-                                                                            width: 95,
-                                                                            outline: customTenantAccess || containsCustomFields
-                                                                                ? '1px solid #E7E7E7'
-                                                                                : undefined,
-                                                                            backgroundColor: customTenantAccess || containsCustomFields
-                                                                                ? 'white'
-                                                                                : undefined,
-                                                                            // Center text vertically and horizontally
-                                                                            display: 'flex',
-                                                                            justifyContent: 'center',
-                                                                            alignItems: 'center',
-                                                                            borderRadius: 6,
-                                                                            fontSize: 14,
-                                                                            fontWeight: 500,
-                                                                            userSelect: 'none',
-                                                                        }, children: "Custom" })] }) }), client?.allTenantTypes?.length === 1 ? (_jsx(MultiSelectComponent, { disabled: containsCustomFields, value: containsCustomFields
-                                                                ? (currentTenantAsFormFlags?.[dashboardOwner.tenantField] ?? []) // Even though value requires string[], turns out flags can be numbers
-                                                                : (formFlags?.[dashboardOwner.tenantField] ?? []), onChange: (e) => setFormFlags({
-                                                                ...formFlags,
-                                                                [dashboardOwner.tenantField]: e.target
-                                                                    .value,
-                                                            }), options: dashboardOwner.scope === 'database'
-                                                                ? (dashboardOwner.flags?.map((f) => ({
-                                                                    label: f,
-                                                                    value: f,
-                                                                })) ?? [])
-                                                                : (dashboardOwner.tenantIds
-                                                                    ?.filter((t) => t.flag !== undefined)
-                                                                    .map((t) => ({
-                                                                    label: t.label ?? t.flag,
-                                                                    value: t.flag,
-                                                                })) ?? []), width: 200, emptyLabel: dashboardOwner.scope === 'database'
-                                                                ? 'No tags supplied'
-                                                                : undefined, allSelectedLabel: 'All ' + dashboardOwner.name + 's', style: {
-                                                                display: customTenantAccess || containsCustomFields
-                                                                    ? 'inline'
-                                                                    : 'none',
-                                                                marginTop: -1,
-                                                                marginBottom: -4,
-                                                            } })) : (_jsx(QuillMultiSelectSectionList, { value: formFlags ?? {}, onChange: (e) => setFormFlags(e.target.value), options: allTenantMap, sectionHeaderMap: client?.allTenantTypes?.reduce((acc, tenantType) => {
-                                                                if (tenantType.scope === 'database') {
-                                                                    acc[SINGLE_TENANT] = 'Database';
-                                                                    return acc;
-                                                                }
-                                                                acc[tenantType.tenantField] = tenantType.name;
-                                                                return acc;
-                                                            }, {}) ?? {}, width: 200, allSelectedLabel: 'All ' + dashboardOwner.name + 's', style: {
-                                                                display: customTenantAccess || containsCustomFields
-                                                                    ? 'inline'
-                                                                    : 'none',
-                                                                marginTop: -1,
-                                                                marginBottom: -4,
-                                                            }, owner: dashboardOwner.tenantField }))] }) })] })), specificDashboardFilters.length > 0 && isAdmin && (_jsxs("div", { style: {
-                                            display: 'flex',
-                                            flexDirection: 'column',
-                                            gap: 6,
-                                            marginBottom: 128,
-                                        }, children: [_jsx(HeaderComponent, { label: "Dashboard filter fields" }), isAdmin &&
-                                                formData.dateField &&
-                                                dashboardConfig[formData.dashboardName ?? destinationDashboardName ?? '']?.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, hideEmptyOption: true }) }), _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
-                                                                ?.find((elem) => elem.name === formData.dateField?.table)
-                                                                ?.columns?.map((elem) => ({
-                                                                label: elem.field,
-                                                                value: elem.field,
-                                                            })) || [], width: 200, hideEmptyOption: true }) }), (!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.schemaWithCustomFields
-                                                                        .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, hideEmptyOption: true }), _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.schemaWithCustomFields
-                                                                .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, hideEmptyOption: true }), !validFilter[filter.label] && (_jsx("div", { style: { marginBottom: 8, marginTop: 'auto' }, children: _jsx(ExclamationFilledIcon, { height: 28, width: 28, style: {
-                                                                    color: '#dc143c',
-                                                                } }) }))] }, filter.label))) }))] })), isAdmin && !tenants && !flags && (_jsxs("div", { style: {
-                                            display: 'flex',
-                                            flexDirection: 'column',
-                                            gap: 12,
-                                        }, children: [_jsx(HeaderComponent, { label: "Organization access" }), _jsx(SegmentedControl, { onChange: (e) => handleChange(e, 'template'), value: formData.template || !organizationName, theme: theme ?? undefined, organizationName: organizationName, customFieldTableRef: customFieldTableRef })] }))] }), _jsxs("div", { style: {
-                                    display: 'flex',
-                                    flexDirection: 'row',
-                                    justifyContent: 'flex-end',
-                                    gap: 10,
-                                    position: 'absolute',
-                                    bottom: 16,
-                                    right: 16,
-                                }, children: [!hideDeleteButton && !isHorizontalView && report && (_jsx(SecondaryButtonComponent, { onClick: deleteChart, label: 'Delete' })), !hideSubmitButton && (_jsxs("div", { style: {
-                                            display: 'flex',
-                                            flexDirection: 'row',
-                                            width: '100%',
-                                            justifyContent: 'space-between',
-                                            alignItems: 'center',
-                                            gap: 6,
-                                        }, children: [!!filterIssues?.length && (_jsx(ErrorMessageComponent, { errorMessage: filterIssues[0] || 'Dashboard - Report issues', containerStyle: { height: '100%' } })), _jsxs("div", { style: {
-                                                    display: 'flex',
-                                                    flexDirection: 'row',
-                                                    gap: 10,
-                                                    backgroundColor: 'white',
-                                                }, children: [hideDiscardChanges ? null : (_jsx(SecondaryButtonComponent, { onClick: () => {
-                                                            setIsOpen(false);
-                                                            onDiscardChanges && onDiscardChanges();
-                                                        }, label: 'Discard changes' })), _jsx(ButtonComponent, { onClick: () => {
-                                                            if (loadingFormData) {
-                                                                setTriggeredEditChart(true);
-                                                            }
-                                                            else {
-                                                                editChart();
-                                                            }
-                                                        }, disabled: formData.name === '' ||
-                                                            formData.dashboardName === '' ||
-                                                            formData.chartType === '' ||
-                                                            filterIssues.length !== 0 ||
-                                                            Object.values(validFilter).includes(false) ||
-                                                            (currentDashboard?.tenantKeys &&
-                                                                customTenantAccess &&
-                                                                Object.values(formFlags ?? {}).every((value) => !value.length)), label: buttonLabel
-                                                            ? buttonLabel
-                                                            : report
-                                                                ? 'Save changes'
-                                                                : 'Add to dashboard' })] })] }))] })] }))] }), _jsx(DashboardFilterModal, { isOpen: showFilterModal, setIsOpen: setShowFilterModal, issues: filterIssues, ButtonComponent: ButtonComponent, ModalComponent: ModalComponent })] }));
-}
-function SegmentedControl({ onChange, value, theme, organizationName, customFieldTableRef, }) {
-    return (_jsxs("div", { style: {
-            display: 'flex',
-            flexDirection: 'row',
-            alignItems: 'center',
-            background: '#F5F5F6',
-            maxWidth: organizationName ? 418 : 209,
-            padding: 4,
-            borderRadius: 6,
-        }, children: [!customFieldTableRef && (_jsxs("button", { className: "quill-tab", onClick: () => onChange(true), style: {
-                    border: value === true ? '1px solid #E7E7E7' : '1px solid transparent',
-                    outline: 'none',
-                    width: '100%',
-                    borderRadius: 4,
-                    padding: 10,
-                    boxShadow: value === true
-                        ? '0px 1px 4px 0px rgba(56, 65, 81, 0.08)'
-                        : undefined,
-                    color: value === true ? 'rgba(56, 65, 81, 1)' : 'rgba(56, 65, 81, 0.85)',
-                    fontWeight: value === true ? 600 : 500,
-                    fontSize: 14,
-                    fontFamily: theme?.fontFamily,
-                }, children: [_jsx("style", { children: `
-    .quill-tab {
-        background-color: ${value === true ? 'white' : 'transparent'};
-    }
-    .quill-tab:hover {
-      background-color:  ${value === false ? 'rgba(56, 65, 81, 0.05)' : undefined};
-    }
-    .quill-tab:active {
-      background-color: "rgba(56, 65, 81, 0.15)";
-    }
-` }), 'All Organizations'] })), organizationName && (_jsxs("button", { className: "quill-tab2", onClick: () => onChange(false), style: {
-                    border: value === false ? '1px solid #E7E7E7' : '1px solid transparent',
-                    boxShadow: value === false
-                        ? '0px 1px 4px 0px rgba(56, 65, 81, 0.08)'
-                        : undefined,
-                    outline: 'none',
-                    width: '100%',
-                    borderRadius: 4,
-                    color: value === false
-                        ? 'rgba(56, 65, 81, 1)'
-                        : 'rgba(56, 65, 81, 0.85)',
-                    padding: 10,
-                    fontWeight: value === false ? 600 : 500,
-                    fontSize: 14,
-                    fontFamily: theme?.fontFamily,
-                }, children: [_jsx("style", { children: `
-    .quill-tab2 {
-        background-color: ${value === false ? 'white' : 'transparent'};
-    }
-    .quill-tab2:hover {
-      background-color:  ${value === true ? 'rgba(56, 65, 81, 0.05)' : undefined};
-    }
-    .quill-tab2:focused {
-      background-color: blue;
-    }
-    .quill-tab2:active {
-      background-color: "rgba(56, 65, 81, 0.15)";
-    }
-` }), organizationName] }))] }));
-}
-export function DashboardFilterModal({ isOpen, setIsOpen, issues, ModalComponent = MemoizedModal, ButtonComponent = MemoizedButton, }) {
-    if (!isOpen)
-        return null;
-    return (_jsx(ModalComponent, { isOpen: isOpen, setIsOpen: setIsOpen, title: 'Chart not compatible with selected dashboard', width: 600, children: _jsxs("div", { style: {
-                display: 'flex',
-                flexDirection: 'column',
-                width: '600px',
-                padding: '20px',
-                boxSizing: 'border-box',
-                overflow: 'scroll',
-                maxHeight: 600,
-            }, children: [issues.map((issue) => (_jsx("span", { style: { paddingTop: '10px' }, children: issue }, issue))), _jsx("div", { style: {
-                        display: 'flex',
-                        flexDirection: 'row',
-                        justifyContent: 'flex-end',
-                        paddingTop: '14px',
-                    }, children: _jsx(ButtonComponent, { label: "Got It", onClick: () => setIsOpen(false) }) })] }) }));
-}