@anymux/ui-kit 0.1.0

package/src/list/components/TreemapView.tsx

@@ -0,0 +1,709 @@
+import React, { useRef, useEffect, useMemo, useState } from 'react';
+import { observer } from 'mobx-react-lite';
+import {
+  layoutSquarefy,
+  createSurfaces,
+  drawToImageData,
+  Rectangle,
+} from '@cushiontreemap/core';
+import type { INode, Color } from '@cushiontreemap/core';
+import { ListItemsModel } from '../models/ListItemsModel';
+import {
+  TreemapModel,
+  formatBytes,
+  getColorForExtension,
+  getHexColorForExtension,
+  EXTENSION_LEGEND,
+  EXTENSION_CATEGORIES,
+} from '../models/TreemapModel';
+import type { ListItemData } from '../types/ListTypes';
+import type { TreemapNodeData, TreemapScanProgress } from '../providers/ListItemsProvider';
+
+/** Node metadata for overlay tiles */
+export interface TileInfo {
+  path: string;
+  name: string;
+  size?: number;
+  isDirectory: boolean;
+}
+
+export interface TreemapViewProps {
+  model: ListItemsModel;
+  treemapModel: TreemapModel;
+  width: number;
+  height: number;
+  className?: string;
+  onTileContextMenu?: (info: TileInfo, event: React.MouseEvent) => void;
+  onEmptyContextMenu?: (event: React.MouseEvent) => void;
+}
+
+/** Minimum pixel area for a tile to get an interactive overlay div */
+const MIN_TILE_AREA = 50;
+
+/** Minimum dimensions for showing file name label */
+const MIN_LABEL_WIDTH = 60;
+const MIN_LABEL_HEIGHT = 24;
+
+/** Minimum dimensions for showing size label */
+const MIN_SIZE_LABEL_WIDTH = 80;
+const MIN_SIZE_LABEL_HEIGHT = 40;
+
+/** Base height for legend bar */
+const LEGEND_HEIGHT = 28;
+
+/** Height for breadcrumb bar */
+const BREADCRUMB_HEIGHT = 28;
+
+/**
+ * Map extension category labels to their extension sets for legend highlighting.
+ */
+const CATEGORY_EXTENSIONS: Record<string, Set<string>> = {
+  'JS/TS': new Set(['js', 'jsx', 'ts', 'tsx', 'mjs', 'cjs']),
+  'Styles': new Set(['css', 'scss', 'less', 'sass']),
+  'Markup': new Set(['html', 'xml', 'svg', 'vue']),
+  'Data': new Set(['json', 'yaml', 'yml', 'toml', 'env']),
+  'Images': new Set(['png', 'jpg', 'jpeg', 'gif', 'webp', 'avif', 'ico']),
+  'Docs': new Set(['md', 'txt', 'pdf', 'doc', 'docx']),
+  'Archives': new Set(['zip', 'tar', 'gz', 'br', 'rar', '7z']),
+};
+
+/**
+ * Check if a file matches a given extension category label.
+ */
+function matchesExtensionCategory(name: string, isDirectory: boolean, category: string): boolean {
+  if (category === 'Folders') return isDirectory;
+  if (category === 'Other') {
+    if (isDirectory) return false;
+    const ext = name.split('.').pop()?.toLowerCase() ?? '';
+    return !EXTENSION_CATEGORIES[ext];
+  }
+  const exts = CATEGORY_EXTENSIONS[category];
+  if (!exts) return false;
+  const ext = name.split('.').pop()?.toLowerCase() ?? '';
+  return exts.has(ext);
+}
+
+/**
+ * Compute recursive size for a TreemapNodeData (sum of all descendant file sizes).
+ */
+function computeSize(node: TreemapNodeData): number {
+  if (!node.isDirectory || !node.children || node.children.length === 0) {
+    return node.size ?? 1;
+  }
+  return node.children.reduce((sum, child) => sum + computeSize(child), 0);
+}
+
+/**
+ * Build an INode tree from recursive TreemapNodeData.
+ * Directories become internal nodes with children; files become leaves.
+ */
+function buildNestedTree(nodes: TreemapNodeData[]): {
+  root: INode<string>;
+  infoMap: Map<string, TileInfo>;
+} {
+  const infoMap = new Map<string, TileInfo>();
+
+  function convertNode(node: TreemapNodeData): INode<string> {
+    const size = computeSize(node);
+    infoMap.set(node.path, {
+      path: node.path,
+      name: node.name,
+      size: node.size,
+      isDirectory: node.isDirectory,
+    });
+
+    if (node.isDirectory && node.children && node.children.length > 0) {
+      const children = node.children
+        .map(child => convertNode(child))
+        .filter(c => (c.value ?? 0) > 0)
+        .sort((a, b) => (b.value ?? 0) - (a.value ?? 0));
+
+      return {
+        id: node.path,
+        value: size,
+        children: children.length > 0 ? children : undefined,
+      };
+    }
+
+    return {
+      id: node.path,
+      value: size,
+    };
+  }
+
+  const children = nodes
+    .map(n => convertNode(n))
+    .filter(c => (c.value ?? 0) > 0)
+    .sort((a, b) => (b.value ?? 0) - (a.value ?? 0));
+
+  const root: INode<string> = {
+    id: '__root__',
+    value: children.reduce((sum, c) => sum + (c.value ?? 0), 0),
+    children,
+  };
+
+  return { root, infoMap };
+}
+
+/**
+ * Build flat INode tree from ListItemData (fallback when no recursive data).
+ */
+function buildFlatTree(items: ListItemData[]): {
+  root: INode<string>;
+  infoMap: Map<string, TileInfo>;
+} {
+  const infoMap = new Map<string, TileInfo>();
+
+  const children: INode<string>[] = items
+    .filter(item => (item.size ?? 1) > 0)
+    .map(item => {
+      infoMap.set(item.id, {
+        path: item.path,
+        name: item.name,
+        size: item.size,
+        isDirectory: !!item.isDirectory,
+      });
+      return {
+        id: item.id,
+        value: item.size ?? 1,
+      };
+    })
+    .sort((a, b) => (b.value ?? 0) - (a.value ?? 0));
+
+  const root: INode<string> = {
+    id: '__root__',
+    value: children.reduce((sum, c) => sum + (c.value ?? 0), 0),
+    children,
+  };
+
+  return { root, infoMap };
+}
+
+/**
+ * Find a subtree's children in recursive TreemapNodeData by path.
+ * Returns the children of the directory at the given path, or null if not found.
+ */
+function findSubtree(nodes: TreemapNodeData[], path: string): TreemapNodeData[] | null {
+  for (const node of nodes) {
+    if (node.path === path && node.isDirectory && node.children) {
+      return node.children;
+    }
+    if (node.children) {
+      const found = findSubtree(node.children, path);
+      if (found) return found;
+    }
+  }
+  return null;
+}
+
+/** Find a node by ID in the INode tree */
+function findNode(node: INode<string>, id: string): INode<string> | null {
+  if (node.id === id) return node;
+  if (node.children) {
+    for (const child of node.children) {
+      const found = findNode(child, id);
+      if (found) return found;
+    }
+  }
+  return null;
+}
+
+/**
+ * TreemapView — renders items from ListItemsModel as a cushion-shaded treemap.
+ *
+ * Uses @cushiontreemap/core to render to a canvas, with transparent overlaid
+ * divs for click/hover interactivity.
+ *
+ * If the provider supports loadTreemapData(), shows recursive subdirectory content.
+ */
+export const TreemapView = observer<TreemapViewProps>(({
+  model,
+  treemapModel,
+  width,
+  height,
+  className = '',
+  onTileContextMenu,
+  onEmptyContextMenu,
+}) => {
+  const canvasRef = useRef<HTMLCanvasElement>(null);
+
+  // Recursive data loading
+  const [recursiveData, setRecursiveData] = useState<TreemapNodeData[] | null>(null);
+  const [loading, setLoading] = useState(false);
+  const [scanProgress, setScanProgress] = useState<TreemapScanProgress | null>(null);
+
+  useEffect(() => {
+    if (!model.provider.loadTreemapData) return;
+    let cancelled = false;
+    setLoading(true);
+    setScanProgress(null);
+    treemapModel.resetZoom();
+    model.provider.loadTreemapData((progress) => {
+      if (!cancelled) setScanProgress({ ...progress });
+    })
+      .then(data => { if (!cancelled) setRecursiveData(data); })
+      .catch(err => console.warn('[TreemapView] Failed to load recursive data:', err))
+      .finally(() => { if (!cancelled) { setLoading(false); setScanProgress(null); } });
+    return () => { cancelled = true; };
+  }, [model.provider, model.items]); // reload when items change (path navigation)
+
+  // Compute chrome height (legend + optional breadcrumb)
+  const hasBreadcrumbs = treemapModel.breadcrumbs.length > 0;
+  const chromeHeight = LEGEND_HEIGHT + (hasBreadcrumbs ? BREADCRUMB_HEIGHT : 0);
+
+  // Compute available canvas dimensions (subtract chrome)
+  const canvasWidth = Math.max(1, Math.floor(width));
+  const canvasHeight = Math.max(1, Math.floor(height - chromeHeight));
+
+  // When zoomed, find subtree from recursive data
+  const effectiveData = useMemo(() => {
+    if (!recursiveData || !treemapModel.zoomPath) return recursiveData;
+    const subtree = findSubtree(recursiveData, treemapModel.zoomPath);
+    return subtree ?? recursiveData;
+  }, [recursiveData, treemapModel.zoomPath]);
+
+  // Build the tree — prefer recursive data if available
+  const { root, infoMap, rects } = useMemo(() => {
+    const items = effectiveData ?? model.items;
+    if ((!effectiveData && model.items.length === 0) || (effectiveData && effectiveData.length === 0)) {
+      return {
+        root: null,
+        infoMap: new Map<string, TileInfo>(),
+        rects: new Map<string, Rectangle>(),
+      };
+    }
+
+    const { root: r, infoMap: im } = effectiveData
+      ? buildNestedTree(effectiveData)
+      : buildFlatTree(model.items);
+
+    if (!r.children || r.children.length === 0) {
+      return { root: null, infoMap: im, rects: new Map<string, Rectangle>() };
+    }
+
+    const rectMap = layoutSquarefy(r, canvasWidth, canvasHeight);
+    return { root: r, infoMap: im, rects: rectMap };
+  }, [effectiveData, model.items, canvasWidth, canvasHeight]);
+
+  // Draw the cushion treemap to the canvas
+  useEffect(() => {
+    const canvas = canvasRef.current;
+    if (!canvas || !root || rects.size === 0) return;
+
+    canvas.width = canvasWidth;
+    canvas.height = canvasHeight;
+
+    const ctx = canvas.getContext('2d');
+    if (!ctx) return;
+
+    const imageData = ctx.createImageData(canvasWidth, canvasHeight);
+
+    const surfaces = createSurfaces(root, rects);
+
+    const getColor = (node: INode<string>): Color => {
+      if (node.id === '__root__') return [128, 128, 128, 255];
+      const info = infoMap.get(node.id);
+      if (!info) return [156, 163, 175, 255];
+      return getColorForExtension(info.name, info.isDirectory);
+    };
+
+    drawToImageData(root, rects, surfaces, imageData, getColor, {
+      Ia: 40,
+      Is: 215,
+      Lx: 0.09759,
+      Ly: 0.19518,
+      Lz: 0.9759,
+    });
+
+    ctx.putImageData(imageData, 0, 0);
+
+    // Draw border lines between tiles
+    ctx.strokeStyle = 'rgba(0, 0, 0, 0.15)';
+    ctx.lineWidth = 1;
+    for (const [id, rect] of rects) {
+      if (id === '__root__') continue;
+      const x = Math.round(rect.x0) + 0.5;
+      const y = Math.round(rect.y0) + 0.5;
+      const w = Math.round(rect.x1 - rect.x0);
+      const h = Math.round(rect.y1 - rect.y0);
+      if (w > 2 && h > 2) {
+        ctx.strokeRect(x, y, w, h);
+      }
+    }
+  }, [root, rects, infoMap, canvasWidth, canvasHeight]);
+
+  // Build overlay tile data — only for leaf nodes (visible tiles)
+  const tiles = useMemo(() => {
+    if (!root || rects.size === 0) return [];
+
+    const result: Array<{
+      id: string;
+      info: TileInfo;
+      x: number;
+      y: number;
+      w: number;
+      h: number;
+    }> = [];
+
+    for (const [id, rect] of rects) {
+      if (id === '__root__') continue;
+      const info = infoMap.get(id);
+      if (!info) continue;
+
+      const x = rect.x0;
+      const y = rect.y0;
+      const w = rect.x1 - rect.x0;
+      const h = rect.y1 - rect.y0;
+
+      if (w * h < MIN_TILE_AREA) continue;
+
+      // Skip internal nodes (directories with children that got subdivided)
+      // Only show leaf nodes as interactive tiles
+      const node = findNode(root, id);
+      if (node && node.children && node.children.length > 0) continue;
+
+      result.push({ id, info, x, y, w, h });
+    }
+
+    return result;
+  }, [root, rects, infoMap]);
+
+  // Event handlers
+  const handleTileClick = (info: TileInfo, event: React.MouseEvent) => {
+    // For directories, zoom in on single click (instead of navigating away)
+    if (info.isDirectory) {
+      treemapModel.zoomIn(info.path);
+      return;
+    }
+    // For files, select
+    const item = model.items.find(i => i.path === info.path || i.id === info.path);
+    if (item) {
+      model.selectItem(item, {
+        ctrl: event.ctrlKey || event.metaKey,
+        shift: event.shiftKey,
+      });
+    }
+  };
+
+  const handleTileDoubleClick = (info: TileInfo) => {
+    if (!model.provider.onItemDoubleClick) return;
+    const item = model.items.find(i => i.path === info.path || i.id === info.path);
+    if (item) {
+      model.provider.onItemDoubleClick(item);
+    } else {
+      // For recursive items not in the flat list, create a fake item
+      const fakeItem: ListItemData = {
+        id: info.path,
+        name: info.name,
+        path: info.path,
+        type: info.isDirectory ? 'directory' : 'file',
+        isDirectory: info.isDirectory,
+        size: info.size,
+      };
+      model.provider.onItemDoubleClick(fakeItem);
+    }
+  };
+
+  const handleTileContextMenu = (info: TileInfo, event: React.MouseEvent) => {
+    event.preventDefault();
+    event.stopPropagation();
+    onTileContextMenu?.(info, event);
+  };
+
+  const handleEmptyContextMenu = (event: React.MouseEvent) => {
+    event.preventDefault();
+    onEmptyContextMenu?.(event);
+  };
+
+  const handleTileMouseEnter = (id: string) => {
+    treemapModel.setHoveredPath(id);
+  };
+
+  const handleTileMouseLeave = () => {
+    treemapModel.setHoveredPath(null);
+  };
+
+  // Tooltip data
+  const hoveredInfo = treemapModel.hoveredPath
+    ? infoMap.get(treemapModel.hoveredPath)
+    : null;
+  const hoveredRect = treemapModel.hoveredPath
+    ? rects.get(treemapModel.hoveredPath)
+    : null;
+
+  const totalSize = useMemo(() => root?.value ?? 0, [root]);
+
+  // Extension highlighting
+  const highlighted = treemapModel.highlightedExtension;
+
+  if (loading) {
+    return (
+      <div className={`flex items-center justify-center text-muted-foreground ${className}`} style={{ width, height }}>
+        <div className="flex flex-col items-center gap-3">
+          <div className="w-6 h-6 border-2 border-muted-foreground/40 border-t-muted-foreground rounded-full animate-spin" />
+          <p className="text-sm font-medium">Scanning directories...</p>
+          {scanProgress && (
+            <div className="flex items-center gap-4 text-xs">
+              <span>{scanProgress.directoriesScanned} folders</span>
+              <span>{scanProgress.filesFound} files</span>
+              {scanProgress.totalSize > 0 && (
+                <span>{formatBytes(scanProgress.totalSize)}</span>
+              )}
+            </div>
+          )}
+        </div>
+      </div>
+    );
+  }
+
+  if (model.items.length === 0 && !effectiveData) {
+    return (
+      <div className={`flex items-center justify-center text-muted-foreground ${className}`} style={{ width, height }}>
+        <p className="text-sm">No items to display</p>
+      </div>
+    );
+  }
+
+  return (
+    <div className={`flex flex-col select-none ${className}`} style={{ width, height }}>
+      {/* Legend bar — interactive: click to highlight extension category */}
+      <div className="flex items-center gap-3 px-3 py-1 border-b bg-background/80 flex-shrink-0 overflow-x-auto" style={{ height: LEGEND_HEIGHT }}>
+        <span className="text-xs font-medium text-muted-foreground whitespace-nowrap">Filter:</span>
+        {EXTENSION_LEGEND.map(({ label, color }) => {
+          const isActive = highlighted === label;
+          return (
+            <button
+              key={label}
+              type="button"
+              onClick={() => treemapModel.setHighlightedExtension(label)}
+              className={`flex items-center gap-1 whitespace-nowrap rounded px-1 py-0.5 transition-colors ${
+                isActive
+                  ? 'bg-accent ring-1 ring-accent-foreground/20'
+                  : 'hover:bg-accent/50'
+              }`}
+            >
+              <div
+                className="w-2.5 h-2.5 rounded-sm flex-shrink-0"
+                style={{ backgroundColor: color }}
+              />
+              <span className={`text-[10px] ${isActive ? 'text-foreground font-medium' : 'text-muted-foreground'}`}>
+                {label}
+              </span>
+            </button>
+          );
+        })}
+        <div className="ml-auto text-[10px] text-muted-foreground whitespace-nowrap">
+          {infoMap.size} items • {formatBytes(totalSize)}
+        </div>
+      </div>
+
+      {/* Breadcrumb bar — only when zoomed */}
+      {hasBreadcrumbs && (
+        <div className="flex items-center gap-1 px-3 border-b bg-background/60 flex-shrink-0 overflow-x-auto" style={{ height: BREADCRUMB_HEIGHT }}>
+          <button
+            type="button"
+            onClick={() => treemapModel.resetZoom()}
+            className="text-[11px] text-primary hover:underline"
+          >
+            Root
+          </button>
+          {treemapModel.breadcrumbs.map((crumb) => (
+            <React.Fragment key={crumb.path}>
+              <span className="text-[10px] text-muted-foreground">/</span>
+              <button
+                type="button"
+                onClick={() => treemapModel.zoomIn(crumb.path)}
+                className={`text-[11px] ${
+                  crumb.path === treemapModel.zoomPath
+                    ? 'text-foreground font-medium'
+                    : 'text-primary hover:underline'
+                }`}
+              >
+                {crumb.name}
+              </button>
+            </React.Fragment>
+          ))}
+        </div>
+      )}
+
+      {/* Treemap canvas + overlay container */}
+      <div
+        className="relative flex-1 overflow-hidden"
+        style={{ width: canvasWidth, height: canvasHeight }}
+        onContextMenu={handleEmptyContextMenu}
+      >
+        {/* Canvas layer — the cushion-shaded treemap */}
+        <canvas
+          ref={canvasRef}
+          width={canvasWidth}
+          height={canvasHeight}
+          className="absolute inset-0"
+          style={{ imageRendering: 'auto' }}
+        />
+
+        {/* Interactive overlay layer */}
+        {tiles.map(({ id, info, x, y, w, h }) => {
+          const isSelected = model.isItemSelected(info.path);
+          const isHovered = treemapModel.hoveredPath === id;
+          const showLabel = w >= MIN_LABEL_WIDTH && h >= MIN_LABEL_HEIGHT;
+          const showSize = w >= MIN_SIZE_LABEL_WIDTH && h >= MIN_SIZE_LABEL_HEIGHT;
+
+          // Extension highlighting: dim non-matching tiles
+          const isDimmed = highlighted != null && !matchesExtensionCategory(info.name, info.isDirectory, highlighted);
+
+          return (
+            <div
+              key={id}
+              className="absolute cursor-pointer"
+              style={{
+                left: x,
+                top: y,
+                width: w,
+                height: h,
+                opacity: isDimmed ? 0.3 : 1,
+                transition: 'opacity 0.15s ease',
+              }}
+              onClick={(e) => handleTileClick(info, e)}
+              onDoubleClick={() => handleTileDoubleClick(info)}
+              onContextMenu={(e) => handleTileContextMenu(info, e)}
+              onMouseEnter={() => handleTileMouseEnter(id)}
+              onMouseLeave={handleTileMouseLeave}
+              aria-label={`${info.name}${info.size ? ` (${formatBytes(info.size)})` : ''}`}
+            >
+              {/* Selection / hover highlight */}
+              {(isSelected || isHovered) && (
+                <div
+                  className="absolute inset-0 pointer-events-none"
+                  style={{
+                    backgroundColor: isSelected
+                      ? 'rgba(255, 255, 255, 0.25)'
+                      : 'rgba(255, 255, 255, 0.12)',
+                    outline: isSelected
+                      ? '2px solid rgba(59, 130, 246, 0.8)'
+                      : '1px solid rgba(255, 255, 255, 0.4)',
+                    outlineOffset: isSelected ? '-2px' : '-1px',
+                    zIndex: isSelected ? 2 : 1,
+                  }}
+                />
+              )}
+
+              {/* Text label overlay */}
+              {showLabel && treemapModel.showLabels && (
+                <div
+                  className="absolute inset-0 flex flex-col items-center justify-center pointer-events-none overflow-hidden px-1"
+                  style={{ zIndex: 3 }}
+                >
+                  <span
+                    className="text-white font-medium truncate max-w-full text-center leading-tight"
+                    style={{
+                      fontSize: w > 150 && h > 60 ? '12px' : '10px',
+                      textShadow: '0 1px 3px rgba(0,0,0,0.8), 0 0px 1px rgba(0,0,0,0.9)',
+                    }}
+                  >
+                    {info.name}
+                  </span>
+                  {showSize && treemapModel.showSizes && info.size != null && info.size > 0 && (
+                    <span
+                      className="text-white/80 truncate max-w-full text-center leading-tight"
+                      style={{
+                        fontSize: '9px',
+                        textShadow: '0 1px 2px rgba(0,0,0,0.8)',
+                      }}
+                    >
+                      {formatBytes(info.size)}
+                    </span>
+                  )}
+                </div>
+              )}
+            </div>
+          );
+        })}
+
+        {/* Tooltip */}
+        {hoveredInfo && hoveredRect && (
+          <TreemapTooltip
+            info={hoveredInfo}
+            rect={hoveredRect}
+            canvasWidth={canvasWidth}
+            canvasHeight={canvasHeight}
+            totalSize={totalSize}
+          />
+        )}
+      </div>
+    </div>
+  );
+});
+
+TreemapView.displayName = 'TreemapView';
+
+/** Floating tooltip for hovered treemap tile */
+const TreemapTooltip = observer<{
+  info: TileInfo;
+  rect: Rectangle;
+  canvasWidth: number;
+  canvasHeight: number;
+  totalSize: number;
+}>(({ info, rect, canvasWidth, canvasHeight, totalSize }) => {
+  const centerX = (rect.x0 + rect.x1) / 2;
+  const centerY = rect.y0;
+
+  const tooltipWidth = 200;
+  const tooltipHeight = 80;
+
+  let left = centerX - tooltipWidth / 2;
+  let top = centerY - tooltipHeight - 8;
+
+  if (left < 4) left = 4;
+  if (left + tooltipWidth > canvasWidth - 4) left = canvasWidth - tooltipWidth - 4;
+  if (top < 4) {
+    top = rect.y1 + 8;
+  }
+  if (top + tooltipHeight > canvasHeight - 4) {
+    top = canvasHeight - tooltipHeight - 4;
+  }
+
+  const ext = info.name.split('.').pop()?.toLowerCase() ?? '';
+  const percentage = totalSize > 0 && info.size
+    ? ((info.size / totalSize) * 100).toFixed(1)
+    : null;
+  const colorHex = getHexColorForExtension(info.name, info.isDirectory);
+
+  return (
+    <div
+      className="absolute z-50 pointer-events-none rounded-md border bg-popover/95 px-3 py-2 shadow-lg backdrop-blur-sm"
+      style={{
+        left,
+        top,
+        width: tooltipWidth,
+      }}
+    >
+      <div className="flex items-center gap-2 mb-1">
+        <div
+          className="w-2.5 h-2.5 rounded-sm flex-shrink-0"
+          style={{ backgroundColor: colorHex }}
+        />
+        <span className="text-xs font-medium text-foreground truncate">{info.name}</span>
+      </div>
+      <div className="text-[10px] text-muted-foreground space-y-0.5">
+        <div className="flex justify-between">
+          <span>Type</span>
+          <span>{info.isDirectory ? 'Directory' : (ext ? `.${ext}` : 'File')}</span>
+        </div>
+        {info.size != null && (
+          <div className="flex justify-between">
+            <span>Size</span>
+            <span>{formatBytes(info.size)}</span>
+          </div>
+        )}
+        {percentage && (
+          <div className="flex justify-between">
+            <span>Share</span>
+            <span>{percentage}%</span>
+          </div>
+        )}
+      </div>
+    </div>
+  );
+});
+
+TreemapTooltip.displayName = 'TreemapTooltip';