Ling0925
/
buster
mirror of https://github.com/buster-so/buster.git
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

update dashboard controller to be more memoized

This commit is contained in:
Nate Kelley 2025-04-18 23:01:40 -06:00
parent 0973733b46
commit bb74d9c30b
No known key found for this signature in database
GPG Key ID: FD90372AB8D98B4F
2 changed files with 298 additions and 286 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

10
web/src/components/ui/grid/BusterResizeableGrid.tsx
View File

@ -45,7 +45,8 @@ export const BusterResizeableGrid: React.FC<{
onEndDrag?: (d: { id: string }) => void;
overlayComponent?: React.ReactNode;
readOnly?: boolean;
}> = ({
}> = React.memo(
({
readOnly = true,
className = '',
overlayComponent,
@ -53,7 +54,7 @@ export const BusterResizeableGrid: React.FC<{
onRowLayoutChange,
onStartDrag,
onEndDrag
}) => {
}) => {
const [rows, setRows] = useState<BusterResizeableGridRow[]>(serverRows);
const styleRef = useRef<HTMLStyleElement>(undefined);
@ -348,7 +349,10 @@ export const BusterResizeableGrid: React.FC<{
)}
</DndContext>
);
};
}
);
BusterResizeableGrid.displayName = 'BusterResizeableGrid';
const removeEmptyContainers = (items: BusterResizeableGridRow[]): BusterResizeableGridRow[] => {
return items.filter((item) => item.items.length > 0 && item.items[0]?.id);

38
web/src/controllers/DashboardController/DashboardViewDashboardController/DashboardContentController/DashboardContentController.tsx
View File

@ -55,6 +55,23 @@ export const DashboardContentController: React.FC<{
return remapMetrics ? normalizeNewMetricsIntoGrid(metrics, configRows) : configRows;
}, [remapMetrics, metrics, configRows]);
const memoizedOverlayComponent = useMemo(() => {
return (
dashboard &&
draggingId && (
<DashboardMetricItem
metricId={draggingId}
readOnly={true}
dashboardId={dashboard?.id}
isDragOverlay
numberOfMetrics={numberOfMetrics}
chatId={undefined}
versionNumber={metrics[draggingId]?.version_number}
/>
)
);
}, [draggingId, dashboard?.id, numberOfMetrics, metrics]);
const dashboardRows = useMemo(() => {
console.log('dashboardRows! rerender', rows);
return rows
@ -90,9 +107,12 @@ export const DashboardContentController: React.FC<{
{ wait: 650, leading: true }
);
const onRowLayoutChange = useMemoizedFn((rows: BusterResizeableGridRow[]) => {
const onRowLayoutChange = useMemoizedFn((layoutRows: BusterResizeableGridRow[]) => {
if (dashboard) {
onUpdateDashboardConfig({ rows: removeChildrenFromItems(rows), dashboardId: dashboard.id });
onUpdateDashboardConfig({
rows: removeChildrenFromItems(layoutRows),
dashboardId: dashboard.id
});
}
});
@ -132,19 +152,7 @@ export const DashboardContentController: React.FC<{
onRowLayoutChange={onRowLayoutChange}
onStartDrag={onStartDrag}
onEndDrag={onDragEnd}
overlayComponent={
draggingId && (
<DashboardMetricItem
metricId={draggingId}
readOnly={true}
dashboardId={dashboard.id}
isDragOverlay
numberOfMetrics={numberOfMetrics}
chatId={undefined}
versionNumber={metrics[draggingId]?.version_number}
/>
)
}
overlayComponent={memoizedOverlayComponent}
/>
</DashboardContentControllerProvider>
) : !readOnly ? (