add a debounce for resizing a chart

This commit is contained in:
Nate Kelley 2025-03-12 12:09:46 -06:00
parent 5861f81b93
commit 621cc025b8
No known key found for this signature in database
GPG Key ID: FD90372AB8D98B4F
10 changed files with 13 additions and 17 deletions

View File

@ -11,7 +11,6 @@ export type BusterChartProps = {
id?: string; id?: string;
error?: string; error?: string;
columnMetadata?: ColumnMetaData[]; columnMetadata?: ColumnMetaData[];
useRapidResizeObserver?: boolean;
editable?: boolean; editable?: boolean;
onInitialAnimationEnd?: () => void; onInitialAnimationEnd?: () => void;
onChartMounted?: (chart?: any) => void; onChartMounted?: (chart?: any) => void;

View File

@ -1,5 +1,6 @@
'use client'; 'use client';
import { FileIndeterminateLoader } from '@/components/features/FileIndeterminateLoader';
import { StatusCard } from '@/components/ui/card/StatusCard'; import { StatusCard } from '@/components/ui/card/StatusCard';
import { ReasoningController } from '@/controllers/ReasoningController'; import { ReasoningController } from '@/controllers/ReasoningController';
import { useChatIndividualContextSelector } from '@/layouts/ChatLayout/ChatContext'; import { useChatIndividualContextSelector } from '@/layouts/ChatLayout/ChatContext';
@ -13,11 +14,14 @@ export default function Page(params: { params: { chatId: string } }) {
} }
return ( return (
<div className="p-5"> <>
<StatusCard <FileIndeterminateLoader />
title="Error" <div className="p-5">
message="If you are seeing this, tell Nate and screenshot this whole page including the URL and logs..." <StatusCard
/> title="Error"
</div> message="If you are seeing this, tell Nate and screenshot this whole page including the URL and logs..."
/>
</div>
</>
); );
} }

View File

@ -45,7 +45,7 @@ export const SQLContainer: React.FC<{
className className
)}> )}>
<AppCodeEditor <AppCodeEditor
className="overflow-hidden" className="overflow-hidden border-x-0 border-t-0"
value={sql} value={sql}
onChange={setDatasetSQL} onChange={setDatasetSQL}
onMetaEnter={onRunQueryPreflight} onMetaEnter={onRunQueryPreflight}

View File

@ -40,7 +40,6 @@ export const BusterChart: React.FC<BusterChartProps> = React.memo(
metricValueAggregate, metricValueAggregate,
metricValueLabel, metricValueLabel,
onChartMounted: onChartMountedProp, onChartMounted: onChartMountedProp,
useRapidResizeObserver = true,
onInitialAnimationEnd, onInitialAnimationEnd,
editable, editable,
selectedChartType, selectedChartType,
@ -140,7 +139,6 @@ export const BusterChart: React.FC<BusterChartProps> = React.memo(
animate, animate,
animateLegend, animateLegend,
className, className,
useRapidResizeObserver,
columnLabelFormats, columnLabelFormats,
selectedChartType, selectedChartType,
loading, loading,

View File

@ -21,7 +21,6 @@ export const BusterChartJS: React.FC<BusterChartComponentProps> = ({
loading = false, loading = false,
showLegendHeadline, showLegendHeadline,
columnMetadata = DEFAULT_COLUMN_METADATA, columnMetadata = DEFAULT_COLUMN_METADATA,
useRapidResizeObserver = false,
onChartMounted, onChartMounted,
onInitialAnimationEnd, onInitialAnimationEnd,
columnSettings = DEFAULT_CHART_CONFIG.columnSettings, columnSettings = DEFAULT_CHART_CONFIG.columnSettings,
@ -74,7 +73,6 @@ export const BusterChartJS: React.FC<BusterChartComponentProps> = ({
columnSettings={columnSettings} columnSettings={columnSettings}
{...props} {...props}
className={className} className={className}
useRapidResizeObserver={useRapidResizeObserver}
/> />
</BusterChartJSLegendWrapper> </BusterChartJSLegendWrapper>
); );

View File

@ -67,7 +67,6 @@ export const BusterChartJSComponent = React.memo(
xAxisTimeInterval, xAxisTimeInterval,
//TODO //TODO
xAxisDataZoom, xAxisDataZoom,
useRapidResizeObserver = false,
...rest ...rest
}, },
ref ref

View File

@ -69,6 +69,7 @@ ChartJS.register(
); );
ChartJS.defaults.responsive = true; ChartJS.defaults.responsive = true;
ChartJS.defaults.resizeDelay = 100;
ChartJS.defaults.maintainAspectRatio = false; ChartJS.defaults.maintainAspectRatio = false;
ChartJS.defaults.color = color; ChartJS.defaults.color = color;
ChartJS.defaults.backgroundColor = DEFAULT_CHART_THEME; ChartJS.defaults.backgroundColor = DEFAULT_CHART_THEME;

View File

@ -8,7 +8,7 @@ import { CircleSpinnerLoaderContainer } from '../../loaders/CircleSpinnerLoaderC
import { useMemoizedFn } from '@/hooks'; import { useMemoizedFn } from '@/hooks';
import { cn } from '@/lib/classMerge'; import { cn } from '@/lib/classMerge';
import type { editor } from 'monaco-editor/esm/vs/editor/editor.api'; import type { editor } from 'monaco-editor/esm/vs/editor/editor.api';
//import './MonacoWebWorker'; import './MonacoWebWorker';
import { configureMonacoToUseYaml } from './yamlHelper'; import { configureMonacoToUseYaml } from './yamlHelper';
//import GithubLightTheme from 'monaco-themes/themes/Github Light.json'; //import GithubLightTheme from 'monaco-themes/themes/Github Light.json';

View File

@ -23,8 +23,6 @@ export const MetricController: React.FC<{
? MetricViewComponents[selectedFileView as MetricFileView] ? MetricViewComponents[selectedFileView as MetricFileView]
: () => <></>; : () => <></>;
console.log(selectedFileView);
return ( return (
<> <>
{showLoader && <FileIndeterminateLoader />} {showLoader && <FileIndeterminateLoader />}

View File

@ -40,7 +40,6 @@ export const updateChatToIChat = (
chat.messages, chat.messages,
isNewChat ? last(chat.message_ids) : undefined isNewChat ? last(chat.message_ids) : undefined
); );
console.log(iChatMessages);
return { return {
iChat, iChat,
iChatMessages iChatMessages