Polish treemap view in vortex-web

Signed-off-by: Robert Kruszewski <github@robertk.io>

Author: robert3005

vortex-web/.storybook/preview.ts

@@ -1,7 +1,9 @@
 // SPDX-License-Identifier: Apache-2.0
 // SPDX-FileCopyrightText: Copyright the Vortex contributors
 
+import { createElement } from 'react';
 import type { Preview } from '@storybook/react-vite';
+import { ThemeContext } from '../src/contexts/ThemeContext';
 import '../src/index.css';
 
 const preview: Preview = {
@@ -27,7 +29,13 @@ const preview: Preview = {
       const theme = context.globals.theme || 'light';
       document.documentElement.classList.toggle('dark', theme === 'dark');
       document.documentElement.classList.toggle('light', theme === 'light');
-      return Story();
+      // Supply the theme context so components using useTheme render in stories,
+      // following the Storybook theme toolbar rather than persisted preferences.
+      return createElement(
+        ThemeContext.Provider,
+        { value: { theme, setTheme: () => {} } },
+        Story(),
+      );
     },
   ],
   parameters: {

vortex-web/README.md

@@ -34,7 +34,7 @@ This starts a dev server at http://localhost:6006.
 ## Scripts
 
 | Command                   | Description                                |
-|---------------------------|--------------------------------------------|
+| ------------------------- | ------------------------------------------ |
 | `npm run dev`             | Build WASM (debug) + start Vite dev server |
 | `npm run build`           | Production build (WASM release + Vite)     |
 | `npm run storybook`       | Start Storybook dev server on port 6006    |
@@ -49,18 +49,18 @@ This starts a dev server at http://localhost:6006.
 Add story files alongside your components as `*.stories.tsx`:
 
 ```tsx
-import type {Meta, StoryObj} from '@storybook/react-vite';
-import {MyComponent} from './MyComponent';
+import type { Meta, StoryObj } from '@storybook/react-vite';
+import { MyComponent } from './MyComponent';
 
 const meta: Meta<typeof MyComponent> = {
-    component: MyComponent,
+  component: MyComponent,
 };
 export default meta;
 
 type Story = StoryObj<typeof MyComponent>;
 
 export const Default: Story = {
-    args: {},
+  args: {},
 };
 ```
 

vortex-web/src/components/detail/DetailPanel.tsx

@@ -15,7 +15,7 @@ import { SummaryPane } from './SummaryPane';
 import { ArraySummaryPane } from './ArraySummaryPane';
 import { EncodingPane } from './EncodingPane';
 import { SegmentsPane } from './SegmentsPane';
-import { TreemapPane } from './TreemapPane';
+import { BlockTreemap } from '../explorer/BlockTreemap';
 import { BuffersPane } from './BuffersPane';
 
 type TabId = 'encoding' | 'segments' | 'treemap' | 'buffers';
@@ -155,11 +155,15 @@ export function DetailPanel() {
             <SegmentsPane node={selection.selectedNode} segments={file.segments} />
           )}
           {currentTab === 'treemap' && selection.selectedNode && (
-            <TreemapPane
-              node={selection.selectedNode}
+            <BlockTreemap
+              root={file.layoutTree}
               segments={file.segments}
+              fileSize={file.fileSize}
+              selectedNodeId={selection.selectedNodeId}
+              hoveredNodeId={selection.hoveredNodeId}
               onSelectNode={selectNode}
               onHoverNode={hoverNode}
+              onExpand={file.expandArrayTree}
             />
           )}
           {currentTab === 'buffers' && selection.selectedNode && (