feat: optimize the treemap view #1428

yifancong · 2025-12-03T13:03:38Z

Summary

optimize the treemap view

before:

after:

Pull request overview

This PR introduces significant optimizations and UX improvements to the TreeMap visualization component, bumping package versions to 1.3.13-beta.0 across the monorepo.

Complete UI redesign with a collapsible sidebar for better space utilization
New features including fullscreen mode, in-place search functionality, and multiple size type views (stat, parsed, gzipped)
Enhanced visual styling with updated color palettes and improved tooltip formatting

Reviewed changes

Copilot reviewed 14 out of 14 changed files in this pull request and generated 13 comments.

Show a summary per file

File	Description
packages/webpack-plugin/package.json	Version bump to 1.3.13-beta.0
packages/utils/package.json	Version bump to 1.3.13-beta.0
packages/types/package.json	Version bump to 1.3.13-beta.0
packages/sdk/package.json	Version bump to 1.3.13-beta.0
packages/rspack-plugin/package.json	Version bump to 1.3.13-beta.0
packages/graph/package.json	Version bump to 1.3.13-beta.0
packages/document/package.json	Version bump to 1.3.13-beta.0
packages/core/package.json	Version bump to 1.3.13-beta.0
packages/components/src/components/Charts/treemap.module.scss	Complete CSS rewrite with sidebar layout, fullscreen support, and search results styling
packages/components/src/components/Charts/constants.ts	Updated color palette with new Ant Design colors and adjusted transparency values
packages/components/src/components/Charts/TreeMap.tsx	Major refactoring adding fullscreen, search, sidebar toggle, improved tooltips, and node highlighting features
packages/components/package.json	Version bump to 1.3.13-beta.0
packages/client/package.json	Version bump to 1.3.13-beta.0
packages/cli/package.json	Version bump to 1.3.13-beta.0

💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.

Copilot · 2025-12-03T13:09:33Z

packages/components/src/components/Charts/TreeMap.tsx

+                      <div
+                        key={index}
+                        className={Styles['search-result-item']}
+                        onClick={() => handleSearchResultClick(result.nodeId)}
+                        title={result.path}
+                      >
+                        {displayPath || result.path}
+                      </div>
+                    );


Search result items are not keyboard accessible. These divs with onClick handlers should either be buttons or have proper keyboard accessibility attributes (role="button", tabIndex={0}, and keyboard event handlers for Enter/Space keys) to ensure users can navigate and select results using only the keyboard.

packages/components/src/components/Charts/TreeMap.tsx

Copilot · 2025-12-03T13:09:34Z

packages/components/src/components/Charts/TreeMap.tsx

              chartRef.current;
          }
        }
      }, [forwardedRef, chartRef.current]);


The useEffect dependency array includes chartRef.current, which is a ref value. React refs don't trigger re-renders when their .current property changes, so including it in the dependency array is ineffective and could be misleading. The effect will only run when forwardedRef changes, not when chartRef.current changes. Consider removing chartRef.current from the dependency array.

Suggested change

}, [forwardedRef, chartRef.current]);

}, [forwardedRef]);

packages/components/src/components/Charts/TreeMap.tsx

Copilot · 2025-12-03T13:09:35Z

packages/components/src/components/Charts/TreeMap.tsx

+      containerRef.current
+        .requestFullscreen()
+        .then(() => setIsFullscreen(true))
+        .catch((err) => console.error('Failed to enter fullscreen:', err));


Accessing requestFullscreen() directly may cause errors in browsers that don't support it or require vendor prefixes. Consider checking for browser support or providing a fallback:

if (containerRef.current?.requestFullscreen) { containerRef.current.requestFullscreen()... } else if ((containerRef.current as any)?.webkitRequestFullscreen) { (containerRef.current as any).webkitRequestFullscreen(); }

Suggested change

containerRef.current

.requestFullscreen()

.then(() => setIsFullscreen(true))

.catch((err) => console.error('Failed to enter fullscreen:', err));

const el = containerRef.current as any;

if (el.requestFullscreen) {

el

.requestFullscreen()

.then(() => setIsFullscreen(true))

.catch((err: any) => console.error('Failed to enter fullscreen:', err));

} else if (el.webkitRequestFullscreen) {

try {

el.webkitRequestFullscreen();

setIsFullscreen(true);

} catch (err) {

console.error('Failed to enter fullscreen (webkit):', err);

}

} else if (el.mozRequestFullScreen) {

try {

el.mozRequestFullScreen();

setIsFullscreen(true);

} catch (err) {

console.error('Failed to enter fullscreen (moz):', err);

}

} else if (el.msRequestFullscreen) {

try {

el.msRequestFullscreen();

setIsFullscreen(true);

} catch (err) {

console.error('Failed to enter fullscreen (ms):', err);

}

} else {

console.error('Fullscreen API is not supported in this browser.');

}

Copilot · 2025-12-03T13:09:36Z

packages/components/src/components/Charts/treemap.module.scss

+.sidebar-toggle {
+  position: absolute;
+  top: 10px;
+  right: 10px;
+  z-index: 20;
+  background: white;
+  border: 1px solid #ccc;
+  border-radius: 4px;
+  padding: 5px;
+  cursor: pointer;
+  transition: right 0.3s ease;

-    .statistics-space {
-      width: 100%;
-    }
+  &.collapsed {
+    right: -40px;


[nitpick] The sidebar toggle button is positioned with a fixed offset (right: 10px and right: -40px when collapsed), which may cause issues on smaller screens or when the sidebar width changes. Consider using a more responsive approach or making these values configurable.

Copilot · 2025-12-03T13:09:37Z

packages/components/src/components/Charts/TreeMap.tsx

+        <div
+          className={`${Styles['sidebar-toggle']} ${collapsed ? Styles.collapsed : ''}`}
+          onClick={() => setCollapsed(!collapsed)}
        >
-          <div className={`checkbox-container ${collapsed ? 'collapsed' : ''}`}>
+          {collapsed ? <RightOutlined /> : <LeftOutlined />}
+        </div>


The sidebar toggle button is not keyboard accessible. While it has an onClick handler, it's a div element without proper keyboard navigation support. Consider:

Using a <button> element instead

Adding role="button" and tabIndex={0}

Adding keyboard event handlers for Enter/Space keys

This ensures users who rely on keyboard navigation can toggle the sidebar.

packages/components/src/components/Charts/TreeMap.tsx

Copilot · 2025-12-03T13:09:37Z

packages/components/src/components/Charts/TreeMap.tsx

+              _rect: any,
+              size: any,
+            ) {
+              var obj = { top: pos[1] + 10 };


The var keyword is deprecated in modern JavaScript. Use const or let instead for better scoping and readability.

Suggested change

var obj = { top: pos[1] + 10 };

const obj = { top: pos[1] + 10 };

Copilot · 2025-12-03T13:09:38Z

packages/components/src/components/Charts/TreeMap.tsx

+                  seriesIndex: 0,
+                  name: nodeInfo.name,
+                });
+              } catch (e) {}


Empty catch blocks silently swallow errors, making debugging difficult. Consider logging the error or adding a comment explaining why the error can be safely ignored.

Suggested change

} catch (e) {}

} catch (e) {

console.error(

'Failed to highlight node with name:',

nodeInfo.name,

e,

);

}

fi3ework · 2025-12-04T11:23:52Z

commit message should starts with feat: https://www.conventionalcommits.org/en/v1.0.0/.

yifancong added 3 commits December 3, 2025 17:27

optimize: treemap view

372bf80

optimize: treemap view

c505f5b

optimize: treemap view

31d7ff1

Copilot AI review requested due to automatic review settings December 3, 2025 13:03

yifancong temporarily deployed to npm December 3, 2025 13:04 — with GitHub Actions Inactive

Copilot started reviewing on behalf of yifancong December 3, 2025 13:04 View session

Copilot finished reviewing on behalf of yifancong December 3, 2025 13:06

Copilot AI reviewed Dec 3, 2025

View reviewed changes

yifancong added 2 commits December 4, 2025 15:08

optimize: treemap view

ef05ad2

optimize: treemap view

6d81064

yifancong changed the title ~~Optimize/treemap graph~~ optimize: the treemap view Dec 4, 2025

yifancong requested review from chenjiahan and fi3ework December 4, 2025 11:16

yifancong marked this pull request as draft December 4, 2025 11:22

optimize: treemap view

38efa07

optimize: treemap view

14e67ab

yifancong deployed to npm December 4, 2025 11:29 — with GitHub Actions Active

optimize: treemap view

552ac2c

yifancong changed the title ~~optimize: the treemap view~~ feat: optimize the treemap view Dec 4, 2025

yifancong marked this pull request as ready for review December 4, 2025 12:38

github-actions bot added the change: feat label Dec 4, 2025

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Uh oh!

Uh oh!

feat: optimize the treemap view #1428

feat: optimize the treemap view #1428

yifancong commented Dec 3, 2025 •

edited

Loading

Uh oh!

netlify bot commented Dec 3, 2025 •

edited

Loading

Uh oh!

Copilot AI left a comment

Uh oh!

Copilot AI Dec 3, 2025

Uh oh!

Uh oh!

Copilot AI Dec 3, 2025

Uh oh!

Uh oh!

Copilot AI Dec 3, 2025

Uh oh!

Copilot AI Dec 3, 2025

Uh oh!

Copilot AI Dec 3, 2025

Uh oh!

Uh oh!

Copilot AI Dec 3, 2025

Uh oh!

Copilot AI Dec 3, 2025

Uh oh!

fi3ework commented Dec 4, 2025

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

3 participants

-      containerRef.current
-        .requestFullscreen()
-        .then(() => setIsFullscreen(true))
-        .catch((err) => console.error('Failed to enter fullscreen:', err));
+      const el = containerRef.current as any;
+      if (el.requestFullscreen) {
+        el
+          .requestFullscreen()
+          .then(() => setIsFullscreen(true))
+          .catch((err: any) => console.error('Failed to enter fullscreen:', err));
+      } else if (el.webkitRequestFullscreen) {
+        try {
+          el.webkitRequestFullscreen();
+          setIsFullscreen(true);
+        } catch (err) {
+          console.error('Failed to enter fullscreen (webkit):', err);
+        }
+      } else if (el.mozRequestFullScreen) {
+        try {
+          el.mozRequestFullScreen();
+          setIsFullscreen(true);
+        } catch (err) {
+          console.error('Failed to enter fullscreen (moz):', err);
+        }
+      } else if (el.msRequestFullscreen) {
+        try {
+          el.msRequestFullscreen();
+          setIsFullscreen(true);
+        } catch (err) {
+          console.error('Failed to enter fullscreen (ms):', err);
+        }
+      } else {
+        console.error('Fullscreen API is not supported in this browser.');
+      }

	var obj = { top: pos[1] + 10 };
	const obj = { top: pos[1] + 10 };

Uh oh!

feat: optimize the treemap view #1428

Are you sure you want to change the base?

feat: optimize the treemap view #1428

Conversation

yifancong commented Dec 3, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Summary

optimize the treemap view

Related Links

Uh oh!

netlify bot commented Dec 3, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

✅ Deploy Preview for rsdoctor ready!

Uh oh!

Copilot AI left a comment

Choose a reason for hiding this comment

Pull request overview

Reviewed changes

Uh oh!

Copilot AI Dec 3, 2025

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Copilot AI Dec 3, 2025

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Copilot AI Dec 3, 2025

Choose a reason for hiding this comment

Uh oh!

Copilot AI Dec 3, 2025

Choose a reason for hiding this comment

Uh oh!

Copilot AI Dec 3, 2025

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Copilot AI Dec 3, 2025

Choose a reason for hiding this comment

Uh oh!

Copilot AI Dec 3, 2025

Choose a reason for hiding this comment

Uh oh!

fi3ework commented Dec 4, 2025

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

3 participants

yifancong commented Dec 3, 2025 •

edited

Loading

netlify bot commented Dec 3, 2025 •

edited

Loading