perf(studio): virtualize the furniture table and throttle batch progress
- Render the table view through a virtualizer too, using a shared grid template so the sticky header and rows keep perfect column alignment - Keep semantic table/row/cell elements while virtualizing - Cap the batch item-details list to the latest 60 rows (newest first) - Coalesce per-item progress events server-side (120ms throttle) in both the exact-import and clone SSE batch runners
This commit is contained in:
openhands committed
1 parent
d02aaa0d87
commit
b92f897ba2
4 files changed
+284
-206
No files matched your search
@@ -117,6 +117,11 @@ export const POST = withAdmin(
|
||||
});
|
||||
|
||||
try {
|
||||
// Coalesce micro-step progress events to at most one per
|
||||
// ~120ms per item so large imports don't flood the client
|
||||
// (terminal states are always emitted by importSingleFurni
|
||||
// and sent below).
|
||||
let lastProgressSent = 0;
|
||||
const result: ImportSingleResult = await importSingleFurni({
|
||||
id: item.id ?? 0,
|
||||
classname: item.classname,
|
||||
@@ -131,6 +136,9 @@ export const POST = withAdmin(
|
||||
nitroBaseUrl: source?.nitroBaseUrl,
|
||||
iconBaseUrl: source?.iconBaseUrl,
|
||||
onProgress: (status: string) => {
|
||||
const now = Date.now();
|
||||
if (now - lastProgressSent < 120) return;
|
||||
lastProgressSent = now;
|
||||
send({
|
||||
type: "item_progress",
|
||||
classname: item.classname,
|
||||
|
||||
@@ -73,7 +73,13 @@ export const BatchProgress = memo(function BatchProgress({
|
||||
return () => clearInterval(id);
|
||||
}, [done]);
|
||||
|
||||
const entries = useMemo(() => [...progress.values()], [progress]);
|
||||
// Relevance-first list: newest activity on top, capped so high-volume
|
||||
// imports don't render hundreds of DOM rows on every progress event.
|
||||
const VISIBLE_ITEMS = 60;
|
||||
const entries = useMemo(
|
||||
() => [...progress.values()].slice().reverse(),
|
||||
[progress],
|
||||
);
|
||||
const completed = useMemo(
|
||||
() =>
|
||||
entries.filter((i) => i.status === "done" || i.status === "failed")
|
||||
@@ -239,7 +245,12 @@ export const BatchProgress = memo(function BatchProgress({
|
||||
View item details ({total})
|
||||
</summary>
|
||||
<div className="mt-2 max-h-44 space-y-2 overflow-auto">
|
||||
{entries.map((item) => (
|
||||
{entries.length > VISIBLE_ITEMS && (
|
||||
<p className="px-1 text-[0.65rem] text-[var(--admin-text-muted)]">
|
||||
Showing {VISIBLE_ITEMS} of {entries.length} items
|
||||
</p>
|
||||
)}
|
||||
{entries.slice(0, VISIBLE_ITEMS).map((item) => (
|
||||
<div
|
||||
key={item.classname}
|
||||
className="flex items-start gap-2 rounded-md bg-[var(--admin-canvas)] p-2 text-xs"
|
||||
|
||||
@@ -107,6 +107,12 @@ const GRID_CARD_W = 150;
|
||||
const GRID_GAP = 12;
|
||||
const GRID_ROW_H = 176;
|
||||
|
||||
// Table layout: a shared grid template keeps the sticky header and each
|
||||
// virtualized row in perfect column alignment.
|
||||
const TABLE_COLS =
|
||||
"36px 48px minmax(0,1.4fr) minmax(0,1fr) minmax(0,0.6fr) minmax(0,0.7fr) minmax(0,1fr) 112px";
|
||||
const TABLE_ROW_H = 40;
|
||||
|
||||
export function StudioClient({
|
||||
source,
|
||||
initialTree,
|
||||
@@ -304,6 +310,12 @@ export function StudioClient({
|
||||
estimateSize: () => GRID_ROW_H,
|
||||
overscan: 5,
|
||||
});
|
||||
const tableVirtualizer = useVirtualizer({
|
||||
count: viewMode === "list" ? filteredItems.length : 0,
|
||||
getScrollElement: () => listRef.current,
|
||||
estimateSize: () => TABLE_ROW_H,
|
||||
overscan: 8,
|
||||
});
|
||||
|
||||
// Infinite scroll: auto-load the next page when the sentinel enters view.
|
||||
const sentinelRef = useRef<HTMLDivElement | null>(null);
|
||||
@@ -1771,9 +1783,9 @@ export function StudioClient({
|
||||
<p className="truncate font-mono text-[0.6rem] text-[var(--admin-text-muted)]">
|
||||
{item.classname}
|
||||
</p>
|
||||
<p className="truncate text-[0.6rem] text-[var(--admin-text-muted)]/80">
|
||||
{item.category || "—"}
|
||||
</p>
|
||||
<p className="truncate text-[0.6rem] text-[var(--admin-text-muted)]/80">
|
||||
{item.category || "—"}
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
<div className="flex items-center gap-1 px-2 pb-1.5">
|
||||
@@ -1855,212 +1867,246 @@ export function StudioClient({
|
||||
})}
|
||||
</div>
|
||||
) : (
|
||||
<div className="overflow-x-auto rounded-lg border border-[var(--admin-border)]">
|
||||
<table className="w-full min-w-[660px] text-sm">
|
||||
<thead className="sticky top-0 z-10 bg-[var(--admin-surface)]">
|
||||
<tr>
|
||||
<th className="w-9 px-2 py-2 text-left">
|
||||
<Checkbox
|
||||
style={{
|
||||
display: "inline-flex",
|
||||
width: 18,
|
||||
height: 18,
|
||||
}}
|
||||
className="border-[var(--admin-border)] bg-[var(--admin-surface)] data-checked:border-[var(--admin-accent)] data-checked:bg-[var(--admin-accent)] data-checked:text-[var(--admin-accent-foreground)]"
|
||||
checked={allSelected}
|
||||
onCheckedChange={toggleAll}
|
||||
aria-label="Select all"
|
||||
/>
|
||||
</th>
|
||||
<th className="w-12 px-1 py-2" />
|
||||
<th className="px-2 py-2 text-left font-semibold text-[var(--admin-text-muted)]">
|
||||
Name
|
||||
</th>
|
||||
<th className="px-2 py-2 text-left font-semibold text-[var(--admin-text-muted)]">
|
||||
Classname
|
||||
</th>
|
||||
<th className="px-2 py-2 text-left font-semibold text-[var(--admin-text-muted)]">
|
||||
Type
|
||||
</th>
|
||||
<th className="px-2 py-2 text-left font-semibold text-[var(--admin-text-muted)]">
|
||||
Category
|
||||
</th>
|
||||
<th className="px-2 py-2 text-left font-semibold text-[var(--admin-text-muted)]">
|
||||
Status
|
||||
</th>
|
||||
<th className="w-28 px-2 py-2 text-right font-semibold text-[var(--admin-text-muted)]">
|
||||
Actions
|
||||
</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
{filteredItems.map((item) => {
|
||||
const isSel = selected.has(item.classname);
|
||||
return (
|
||||
<tr
|
||||
key={item.classname}
|
||||
aria-selected={isSel}
|
||||
className={cn(
|
||||
"border-t border-[var(--admin-border)] transition-colors hover:bg-[var(--admin-accent)]/5",
|
||||
isSel && "bg-[var(--admin-accent)]/10",
|
||||
)}
|
||||
>
|
||||
<td className="px-2 py-1.5">
|
||||
<Checkbox
|
||||
style={{
|
||||
display: "inline-flex",
|
||||
width: 18,
|
||||
height: 18,
|
||||
}}
|
||||
className="border-[var(--admin-border)] bg-[var(--admin-surface)] data-checked:border-[var(--admin-accent)] data-checked:bg-[var(--admin-accent)] data-checked:text-[var(--admin-accent-foreground)]"
|
||||
checked={isSel}
|
||||
onCheckedChange={() =>
|
||||
toggleSelect(item.classname)
|
||||
}
|
||||
aria-label={`Select ${item.classname}`}
|
||||
<table
|
||||
aria-label="Furniture results"
|
||||
className="w-full text-sm"
|
||||
style={{ borderCollapse: "separate" }}
|
||||
>
|
||||
<thead>
|
||||
<tr
|
||||
className="sticky top-0 z-10 grid w-full min-w-[660px] border-b border-[var(--admin-border)] bg-[var(--admin-surface)]"
|
||||
style={{ gridTemplateColumns: TABLE_COLS }}
|
||||
>
|
||||
<th scope="col" className="px-2 py-2 text-left">
|
||||
<Checkbox
|
||||
style={{
|
||||
display: "inline-flex",
|
||||
width: 18,
|
||||
height: 18,
|
||||
}}
|
||||
className="border-[var(--admin-border)] bg-[var(--admin-surface)] data-checked:border-[var(--admin-accent)] data-checked:bg-[var(--admin-accent)] data-checked:text-[var(--admin-accent-foreground)]"
|
||||
checked={allSelected}
|
||||
onCheckedChange={toggleAll}
|
||||
aria-label="Select all"
|
||||
/>
|
||||
</th>
|
||||
<th scope="col" className="px-1 py-2" />
|
||||
<th
|
||||
scope="col"
|
||||
className="px-2 py-2 text-left font-semibold text-[var(--admin-text-muted)]"
|
||||
>
|
||||
Name
|
||||
</th>
|
||||
<th
|
||||
scope="col"
|
||||
className="px-2 py-2 text-left font-semibold text-[var(--admin-text-muted)]"
|
||||
>
|
||||
Classname
|
||||
</th>
|
||||
<th
|
||||
scope="col"
|
||||
className="px-2 py-2 text-left font-semibold text-[var(--admin-text-muted)]"
|
||||
>
|
||||
Type
|
||||
</th>
|
||||
<th
|
||||
scope="col"
|
||||
className="px-2 py-2 text-left font-semibold text-[var(--admin-text-muted)]"
|
||||
>
|
||||
Category
|
||||
</th>
|
||||
<th
|
||||
scope="col"
|
||||
className="px-2 py-2 text-left font-semibold text-[var(--admin-text-muted)]"
|
||||
>
|
||||
Status
|
||||
</th>
|
||||
<th
|
||||
scope="col"
|
||||
className="px-2 py-2 text-right font-semibold text-[var(--admin-text-muted)]"
|
||||
>
|
||||
Actions
|
||||
</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody
|
||||
className="relative w-full"
|
||||
style={{
|
||||
display: "block",
|
||||
height: `${tableVirtualizer.getTotalSize()}px`,
|
||||
}}
|
||||
>
|
||||
{tableVirtualizer.getVirtualItems().map((vi) => {
|
||||
const item = filteredItems[vi.index];
|
||||
const isSel = selected.has(item.classname);
|
||||
return (
|
||||
<tr
|
||||
key={vi.key}
|
||||
data-index={vi.index}
|
||||
ref={tableVirtualizer.measureElement}
|
||||
aria-selected={isSel}
|
||||
className={cn(
|
||||
"absolute left-0 top-0 grid w-full min-w-[660px] text-sm transition-colors hover:bg-[var(--admin-accent)]/5",
|
||||
isSel && "bg-[var(--admin-accent)]/10",
|
||||
)}
|
||||
style={{
|
||||
display: "grid",
|
||||
transform: `translateY(${vi.start}px)`,
|
||||
gridTemplateColumns: TABLE_COLS,
|
||||
}}
|
||||
>
|
||||
<td className="border-t border-[var(--admin-border)] px-2 py-1.5">
|
||||
<Checkbox
|
||||
style={{
|
||||
display: "inline-flex",
|
||||
width: 18,
|
||||
height: 18,
|
||||
}}
|
||||
className="border-[var(--admin-border)] bg-[var(--admin-surface)] data-checked:border-[var(--admin-accent)] data-checked:bg-[var(--admin-accent)] data-checked:text-[var(--admin-accent-foreground)]"
|
||||
checked={isSel}
|
||||
onCheckedChange={() =>
|
||||
toggleSelect(item.classname)
|
||||
}
|
||||
aria-label={`Select ${item.classname}`}
|
||||
/>
|
||||
</td>
|
||||
<td className="border-t border-[var(--admin-border)] px-1 py-1.5">
|
||||
<button
|
||||
type="button"
|
||||
onClick={() => openDetail(item)}
|
||||
className="rounded outline-none focus-visible:ring-2 focus-visible:ring-[var(--admin-accent)]"
|
||||
aria-label={`View ${item.name}`}
|
||||
>
|
||||
<img
|
||||
src={getFurniImageUrl(item)}
|
||||
alt=""
|
||||
className="h-8 w-8 object-contain"
|
||||
style={{ imageRendering: "pixelated" }}
|
||||
loading="lazy"
|
||||
onError={(e) => handleImgError(e, item)}
|
||||
/>
|
||||
</td>
|
||||
<td className="px-1 py-1.5">
|
||||
<button
|
||||
type="button"
|
||||
onClick={() => openDetail(item)}
|
||||
className="rounded outline-none focus-visible:ring-2 focus-visible:ring-[var(--admin-accent)]"
|
||||
aria-label={`View ${item.name}`}
|
||||
>
|
||||
<img
|
||||
src={getFurniImageUrl(item)}
|
||||
alt=""
|
||||
className="h-8 w-8 object-contain"
|
||||
style={{ imageRendering: "pixelated" }}
|
||||
loading="lazy"
|
||||
onError={(e) => handleImgError(e, item)}
|
||||
/>
|
||||
</button>
|
||||
</td>
|
||||
<td className="max-w-[220px] truncate px-2 py-1.5 font-medium text-[var(--admin-text)]">
|
||||
{item.name}
|
||||
</td>
|
||||
<td className="max-w-[180px] truncate px-2 py-1.5 font-mono text-[0.7rem] text-[var(--admin-text-muted)]">
|
||||
{item.classname}
|
||||
</td>
|
||||
<td className="px-2 py-1.5 text-[var(--admin-text-muted)]">
|
||||
{TYPE_LABELS[item.type] ?? item.type}
|
||||
</td>
|
||||
<td className="max-w-[140px] truncate px-2 py-1.5 text-[var(--admin-text-muted)]">
|
||||
{item.category || "—"}
|
||||
</td>
|
||||
<td className="px-2 py-1.5">
|
||||
{item.alreadyImported ? (
|
||||
<div className="flex flex-wrap gap-0.5">
|
||||
{!item.nitroExists && (
|
||||
<Badge
|
||||
variant="secondary"
|
||||
className="h-4 text-[0.6rem] text-[var(--admin-warning)] border-[var(--admin-warning)]/40"
|
||||
>
|
||||
No nitro
|
||||
</Badge>
|
||||
)}
|
||||
{item.hasFurnidata === false && (
|
||||
<Badge
|
||||
variant="secondary"
|
||||
className="h-4 text-[0.6rem] text-[var(--admin-warning)] border-[var(--admin-warning)]/40"
|
||||
>
|
||||
No furnidata
|
||||
</Badge>
|
||||
)}
|
||||
{item.hasCatalogEntry === false && (
|
||||
<Badge
|
||||
variant="secondary"
|
||||
className="h-4 text-[0.6rem] text-[var(--admin-warning)] border-[var(--admin-warning)]/40"
|
||||
>
|
||||
No catalog
|
||||
</Badge>
|
||||
)}
|
||||
{item.nitroExists &&
|
||||
item.hasFurnidata !== false &&
|
||||
item.hasCatalogEntry !== false && (
|
||||
<Badge
|
||||
variant="secondary"
|
||||
className="h-4 text-[0.6rem] text-[var(--admin-success)] border-[var(--admin-success)]/40"
|
||||
>
|
||||
Imported
|
||||
</Badge>
|
||||
)}
|
||||
</div>
|
||||
) : (
|
||||
<Badge className="h-4 bg-[var(--admin-accent)] text-[var(--admin-accent-foreground)]">
|
||||
New
|
||||
</Badge>
|
||||
)}
|
||||
</td>
|
||||
<td className="px-2 py-1.5">
|
||||
<div className="flex items-center justify-end gap-1">
|
||||
{!item.alreadyImported && (
|
||||
<button
|
||||
type="button"
|
||||
onClick={() =>
|
||||
setReview({
|
||||
items: [item],
|
||||
single: true,
|
||||
})
|
||||
}
|
||||
disabled={importingId !== null}
|
||||
aria-label={`Import ${item.classname}`}
|
||||
className="grid h-9 w-9 place-items-center rounded-md text-[var(--admin-text-muted)] transition-colors hover:bg-[var(--admin-accent)]/10 hover:text-[var(--admin-text)] disabled:opacity-50"
|
||||
</button>
|
||||
</td>
|
||||
<td className="truncate border-t border-[var(--admin-border)] px-2 py-1.5 font-medium text-[var(--admin-text)]">
|
||||
{item.name}
|
||||
</td>
|
||||
<td className="truncate border-t border-[var(--admin-border)] px-2 py-1.5 font-mono text-[0.7rem] text-[var(--admin-text-muted)]">
|
||||
{item.classname}
|
||||
</td>
|
||||
<td className="truncate border-t border-[var(--admin-border)] px-2 py-1.5 text-[var(--admin-text-muted)]">
|
||||
{TYPE_LABELS[item.type] ?? item.type}
|
||||
</td>
|
||||
<td className="truncate border-t border-[var(--admin-border)] px-2 py-1.5 text-[var(--admin-text-muted)]">
|
||||
{item.category || "—"}
|
||||
</td>
|
||||
<td className="border-t border-[var(--admin-border)] px-2 py-1.5">
|
||||
{item.alreadyImported ? (
|
||||
<div className="flex flex-wrap gap-0.5">
|
||||
{!item.nitroExists && (
|
||||
<Badge
|
||||
variant="secondary"
|
||||
className="h-4 text-[0.6rem] text-[var(--admin-warning)] border-[var(--admin-warning)]/40"
|
||||
>
|
||||
{importingId === item.classname ? (
|
||||
<Loader2
|
||||
size={12}
|
||||
className="animate-spin"
|
||||
/>
|
||||
) : (
|
||||
<CloudDownload size={12} />
|
||||
)}
|
||||
</button>
|
||||
No nitro
|
||||
</Badge>
|
||||
)}
|
||||
{item.alreadyImported && item.nitroExists && (
|
||||
<button
|
||||
type="button"
|
||||
onClick={() =>
|
||||
setEditingClassname(item.classname)
|
||||
}
|
||||
aria-label={`Edit nitro ${item.classname}`}
|
||||
className="grid h-9 w-9 place-items-center rounded-md text-[var(--admin-text-muted)] transition-colors hover:bg-[var(--admin-accent)]/10 hover:text-[var(--admin-text)]"
|
||||
{item.hasFurnidata === false && (
|
||||
<Badge
|
||||
variant="secondary"
|
||||
className="h-4 text-[0.6rem] text-[var(--admin-warning)] border-[var(--admin-warning)]/40"
|
||||
>
|
||||
<Pencil size={12} />
|
||||
</button>
|
||||
No furnidata
|
||||
</Badge>
|
||||
)}
|
||||
{item.alreadyImported &&
|
||||
!item.nitroExists && (
|
||||
<button
|
||||
type="button"
|
||||
onClick={() => regenNitro(item)}
|
||||
disabled={regeneratingNitro.has(
|
||||
item.classname,
|
||||
)}
|
||||
aria-label={`Regenerate nitro ${item.classname}`}
|
||||
className="grid h-9 w-9 place-items-center rounded-md text-[var(--admin-warning)] transition-colors hover:bg-[var(--admin-warning)]/10 disabled:opacity-50"
|
||||
{item.hasCatalogEntry === false && (
|
||||
<Badge
|
||||
variant="secondary"
|
||||
className="h-4 text-[0.6rem] text-[var(--admin-warning)] border-[var(--admin-warning)]/40"
|
||||
>
|
||||
No catalog
|
||||
</Badge>
|
||||
)}
|
||||
{item.nitroExists &&
|
||||
item.hasFurnidata !== false &&
|
||||
item.hasCatalogEntry !== false && (
|
||||
<Badge
|
||||
variant="secondary"
|
||||
className="h-4 text-[0.6rem] text-[var(--admin-success)] border-[var(--admin-success)]/40"
|
||||
>
|
||||
{regeneratingNitro.has(
|
||||
item.classname,
|
||||
) ? (
|
||||
<Loader2
|
||||
size={12}
|
||||
className="animate-spin"
|
||||
/>
|
||||
) : (
|
||||
<RefreshCw size={12} />
|
||||
)}
|
||||
</button>
|
||||
Imported
|
||||
</Badge>
|
||||
)}
|
||||
</div>
|
||||
</td>
|
||||
</tr>
|
||||
);
|
||||
})}
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
) : (
|
||||
<Badge className="h-4 bg-[var(--admin-accent)] text-[var(--admin-accent-foreground)]">
|
||||
New
|
||||
</Badge>
|
||||
)}
|
||||
</td>
|
||||
<td className="border-t border-[var(--admin-border)] px-2 py-1.5">
|
||||
<div className="flex items-center justify-end gap-1">
|
||||
{!item.alreadyImported && (
|
||||
<button
|
||||
type="button"
|
||||
onClick={() =>
|
||||
setReview({
|
||||
items: [item],
|
||||
single: true,
|
||||
})
|
||||
}
|
||||
disabled={importingId !== null}
|
||||
aria-label={`Import ${item.classname}`}
|
||||
className="grid h-9 w-9 place-items-center rounded-md text-[var(--admin-text-muted)] transition-colors hover:bg-[var(--admin-accent)]/10 hover:text-[var(--admin-text)] disabled:opacity-50"
|
||||
>
|
||||
{importingId === item.classname ? (
|
||||
<Loader2
|
||||
size={12}
|
||||
className="animate-spin"
|
||||
/>
|
||||
) : (
|
||||
<CloudDownload size={12} />
|
||||
)}
|
||||
</button>
|
||||
)}
|
||||
{item.alreadyImported && item.nitroExists && (
|
||||
<button
|
||||
type="button"
|
||||
onClick={() =>
|
||||
setEditingClassname(item.classname)
|
||||
}
|
||||
aria-label={`Edit nitro ${item.classname}`}
|
||||
className="grid h-9 w-9 place-items-center rounded-md text-[var(--admin-text-muted)] transition-colors hover:bg-[var(--admin-accent)]/10 hover:text-[var(--admin-text)]"
|
||||
>
|
||||
<Pencil size={12} />
|
||||
</button>
|
||||
)}
|
||||
{item.alreadyImported && !item.nitroExists && (
|
||||
<button
|
||||
type="button"
|
||||
onClick={() => regenNitro(item)}
|
||||
disabled={regeneratingNitro.has(
|
||||
item.classname,
|
||||
)}
|
||||
aria-label={`Regenerate nitro ${item.classname}`}
|
||||
className="grid h-9 w-9 place-items-center rounded-md text-[var(--admin-warning)] transition-colors hover:bg-[var(--admin-warning)]/10 disabled:opacity-50"
|
||||
>
|
||||
{regeneratingNitro.has(item.classname) ? (
|
||||
<Loader2
|
||||
size={12}
|
||||
className="animate-spin"
|
||||
/>
|
||||
) : (
|
||||
<RefreshCw size={12} />
|
||||
)}
|
||||
</button>
|
||||
)}
|
||||
</div>
|
||||
</td>
|
||||
</tr>
|
||||
);
|
||||
})}
|
||||
</tbody>
|
||||
</table>
|
||||
)}
|
||||
|
||||
<div
|
||||
|
||||
@@ -79,9 +79,22 @@ export function runSseBatch<T>(opts: RunSseBatchOptions<T>): Response {
|
||||
index,
|
||||
});
|
||||
try {
|
||||
const result = await worker(item, index, (status) =>
|
||||
send({ type: "item_progress", classname, status, index }),
|
||||
);
|
||||
// Coalesce micro-step progress ('downloading', 'converting',
|
||||
// ...) to at most one per 120ms per item so large imports
|
||||
// don't flood the client. Terminal states are emitted
|
||||
// separately below.
|
||||
let lastReportSent = 0;
|
||||
const result = await worker(item, index, (status) => {
|
||||
const now = Date.now();
|
||||
if (now - lastReportSent < 120) return;
|
||||
lastReportSent = now;
|
||||
send({
|
||||
type: "item_progress",
|
||||
classname,
|
||||
status,
|
||||
index,
|
||||
});
|
||||
});
|
||||
if (ac.signal.aborted) return;
|
||||
if (result.ok) {
|
||||
succeeded++;
|
||||
|
||||
Reference in new issue
Block a user