From 5491f1691895339bbf53698f36149b475271befc Mon Sep 17 00:00:00 2001 From: Amit Kumar Date: Mon, 4 May 2026 17:04:31 +0000 Subject: [PATCH] perf(ui): cap initial file-tree fetch at depth 8 on dashboard MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Dashboard.tsx called `api.getFileTree()` with no depth, so the backend returned the full tree (capped only by the 10 K maxFiles limit). On a 200 K-node graph that's ~2-4 MB of JSON shipped to the browser on every cold load, even though ECharts treemap only renders one level at a time and drilling is client-side. Cap initial fetch at depth 8 — enough for a fully-qualified Java path (`src/main/java/io/github////File.java` = 8 segments) and the typical TS/Python/Go layouts. Past depth 8 the directory renders as a leaf with its aggregate node count; on-demand subtree fetching for deeper drilling is a follow-up if real workloads need it. Co-Authored-By: Claude Opus 4.7 (1M context) --- src/main/frontend/src/pages/Dashboard.tsx | 9 +++++++-- 1 file changed, 7 insertions(+), 2 deletions(-) diff --git a/src/main/frontend/src/pages/Dashboard.tsx b/src/main/frontend/src/pages/Dashboard.tsx index 6ce8829c..e7b1deae 100644 --- a/src/main/frontend/src/pages/Dashboard.tsx +++ b/src/main/frontend/src/pages/Dashboard.tsx @@ -208,8 +208,13 @@ export default function Dashboard() { // breadcrumb(38) + gaps(24) const treemapHeight = useViewportHeight(56 + 32 + 110 + 38 + 24); - // Treemap - const { data: treeData, loading: treeLoading } = useApi(() => api.getFileTree(), []); + // Treemap. Cap initial fetch at depth 8 — enough for a fully-qualified Java + // path (src/main/java/io/github////File.java = 8 segments) + // and most other languages, but spares the 200 K-node case from shipping + // the full tree for paths the user will never drill into. Past depth 8 + // the directory renders as a leaf with its aggregate node count; on-demand + // subtree fetching is a follow-up (Phase 2). + const { data: treeData, loading: treeLoading } = useApi(() => api.getFileTree(8), []); const { treemapRoot, pathMap } = useMemo(() => { const map = new WeakMap(); const children = buildTreemapTree(collapseTree(treeData?.tree ?? []), '', map);