@capillarytech/blaze-ui 5.2.2 → 5.2.4

package/CapLevelGraphRenderer/CapLevelGraphRenderer-test-cases.md

@@ -0,0 +1,50 @@
+# Test Cases: CapLevelGraphRenderer (Antd v3→v6)
+
+## Component Analysis
+- **Component**: CapLevelGraphRenderer
+- **Complexity**: medium
+- **Source**: blaze-ui/components/CapLevelGraphRenderer/
+- **Dependencies**: @antv/x6, React, CapButton, CapIcon
+- **Key Features**: Graph rendering with nodes, forward/reverse connections, pagination, tooltips
+
+## Test Cases (≤20 for medium complexity)
+
+| ID | Use Case | Props/Config | Expected Visual/Behavior | Priority | Storybook Story | Notes |
+|---|---|---|---|---|---|---|
+| UC-001 | Basic rendering with nodes and connections | `nodes=[{id: 'tier1', height: 295, component: MockComponent}, {id: 'tier2', height: 500, component: MockComponent}]`, `connections=[{sourceId: 'tier2', targetId: 'tier1'}]`, `graphId="test-graph"` | Graph renders with 2 nodes, forward connection between nodes, reverse connection visible, pagination controls visible | P0 | BasicRendering | Core functionality - must render graph |
+| UC-002 | Empty state - no nodes | `nodes=[]`, `connections=[]`, `graphId="test-graph"` | Graph container renders, no nodes visible, pagination buttons disabled, no errors | P1 | EmptyState | Edge case - empty data |
+| UC-003 | Single node without connections | `nodes=[{id: 'tier1', height: 295, component: MockComponent}]`, `connections=[]`, `graphId="test-graph"` | Single node renders, no connections drawn, pagination buttons disabled | P1 | SingleNode | Minimal valid state |
+| UC-004 | Multiple nodes with forward connections only | `nodes=[{id: 'tier1', height: 200}, {id: 'tier2', height: 300}, {id: 'tier3', height: 250}]`, `connections=[]`, `graphId="test-graph"` | 3 nodes render in sequence, forward connections between adjacent nodes visible, no reverse connections | P0 | ForwardConnections | Default forward connection behavior |
+| UC-005 | Reverse connections - level by level | `nodes=[{id: 'tier1', height: 200}, {id: 'tier2', height: 300}, {id: 'tier3', height: 250}]`, `connections=[{sourceId: 'tier3', targetId: 'tier1'}, {sourceId: 'tier2', targetId: 'tier1'}]`, `graphId="test-graph"` | Reverse connections render at different levels, avoid overlapping nodes, connections properly routed | P0 | ReverseConnections | Core reverse connection algorithm |
+| UC-006 | All styling props | `className="custom-class"`, `graphStyles={{border: '1px solid red'}}`, `containerStyles={{padding: '10px'}}`, `scrollClassName="custom-scroll"`, `graphId="test-graph"` | Custom classes and styles applied to respective containers, visual styling visible | P1 | StylingProps | Grouped all style-related props |
+| UC-007 | All layout/dimension props | `graphWidth="800px"`, `graphHeight="600px"`, `defaultStartX=50`, `defaultStartY=50`, `offsetHeight=30`, `defaultEleWidth=150`, `defaultEleDistance=40`, `offsetLineDistance=25`, `graphId="test-graph"` | Graph renders at specified dimensions, nodes positioned correctly, spacing matches props | P1 | LayoutProps | Grouped all layout configuration |
+| UC-008 | Connection styling props | `lineStrokeColor="#ff0000"`, `forwardConnProps={{strokeWidth: 3}}`, `reverseConnProps={{strokeDasharray: '5,5'}}`, `graphId="test-graph"` | Forward connections use red color and thicker stroke, reverse connections use dashed style | P1 | ConnectionStyling | Grouped connection appearance props |
+| UC-009 | Tooltip functionality - forward arrows | `showToolTip=true`, `allowForwardArrowTooltip=true`, `nodes=[{id: 'tier1', height: 200, toolTip: 'Tier 1'}, {id: 'tier2', height: 300, toolTip: 'Tier 2'}]`, `connections=[]`, `graphId="test-graph"` | Hovering forward connection shows tooltip with "Tier 1 - Tier 2" format | P1 | ForwardArrowTooltip | Tooltip on forward connections |
+| UC-010 | Tooltip functionality - reverse arrows | `showToolTip=true`, `allowReverseArrowTooltip=true`, `nodes=[{id: 'tier1', height: 200, toolTip: 'Tier 1'}, {id: 'tier2', height: 300, toolTip: 'Tier 2'}]`, `connections=[{sourceId: 'tier2', targetId: 'tier1'}]`, `graphId="test-graph"` | Hovering reverse connection shows tooltip with combined tooltip text | P1 | ReverseArrowTooltip | Tooltip on reverse connections |
+| UC-011 | Tooltip disabled | `showToolTip=false`, `nodes=[{id: 'tier1', height: 200, toolTip: 'Tier 1'}]`, `graphId="test-graph"` | No tooltip appears on hover, tooltip tool not registered | P2 | TooltipDisabled | Tooltip feature toggle |
+| UC-012 | Pagination - previous button interaction | `nodes=[5 nodes with width 100, distance 20]`, `graphWidth="300px"`, `graphId="test-graph"` | Click previous button scrolls graph left, button disabled at start, scroll position updates | P0 | PaginationPrevious | Pagination navigation |
+| UC-013 | Pagination - next button interaction | `nodes=[5 nodes with width 100, distance 20]`, `graphWidth="300px"`, `graphId="test-graph"` | Click next button scrolls graph right, button disabled at end, scroll position updates | P0 | PaginationNext | Pagination navigation |
+| UC-014 | Pagination button states | `nodes=[3 nodes]`, `graphWidth="500px"` (fits all), `graphId="test-graph"` | Both buttons disabled when all nodes visible, buttons enabled when content exceeds viewport | P1 | PaginationStates | Button disabled logic |
+| UC-015 | Scroller props customization | `scrollerProps={{padding: 10, pannable: true}}`, `graphId="test-graph"` | Scroller applies custom padding and panning behavior, graph respects scroller config | P2 | ScrollerProps | Advanced scroller configuration |
+| UC-016 | Node props - component rendering | `nodes=[{id: 'tier1', height: 200, component: CustomComponent, props: {label: 'Test'}}]`, `graphId="test-graph"` | Custom React component renders inside node with passed props, component visible in graph | P0 | NodeComponent | Node content rendering |
+| UC-017 | Complex connection scenarios | `nodes=[4 nodes]`, `connections=[multiple overlapping reverse connections]`, `graphId="test-graph"` | Multiple reverse connections render at different levels, no overlaps, proper routing around nodes | P0 | ComplexConnections | Edge case - complex graph topology |
+| UC-018 | Missing graphId (required prop) | `nodes=[{id: 'tier1', height: 200}]` (no graphId) | Component throws error or handles gracefully, PropTypes validation catches missing prop | P0 | MissingGraphId | Required prop validation |
+| UC-019 | Invalid connections | `nodes=[{id: 'tier1'}, {id: 'tier2'}]`, `connections=[{sourceId: 'invalid', targetId: 'tier1'}]`, `graphId="test-graph"` | Component handles invalid connection gracefully, only valid connections render, no errors | P1 | InvalidConnections | Edge case - invalid data |
+| UC-020 | Migration - antv/x6 Graph API | Standard props with nodes and connections | Graph initializes correctly, nodes and edges added via x6 API, React components render in nodes, events work | P0 | MigrationX6API | Verify @antv/x6 integration works in v6 context |
+
+## Grouping Rationale
+
+- **UC-006**: Grouped all style props (className, graphStyles, containerStyles, scrollClassName) into single test
+- **UC-007**: Grouped all layout/dimension props (graphWidth, graphHeight, positioning, spacing) into single test
+- **UC-008**: Grouped connection styling props (lineStrokeColor, forwardConnProps, reverseConnProps) into single test
+- **UC-009-011**: Tooltip tests grouped by feature (forward, reverse, disabled)
+- **UC-012-014**: Pagination tests grouped by interaction type (previous, next, states)
+
+## Notes
+
+- Component uses @antv/x6 Graph library - verify compatibility with Antd v6
+- Tooltip uses custom TooltipTool class extending ToolsView.ToolItem
+- Pagination uses CapButton and CapIcon components
+- Node components render via react-shape in x6
+- Reverse connections use level-based algorithm to avoid overlaps
+- Component requires DOM element with graphId for initialization

package/CapLevelGraphRenderer/MIGRATION_ANALYSIS.md

@@ -0,0 +1,138 @@
+# Migration Analysis Report: CapLevelGraphRenderer
+
+## STAGE 1: Pre-Analysis
+
+### Analysis Report for CapLevelGraphRenderer
+
+#### 1. Antd Style Overrides Found
+
+| Line # | Old Override | Can Tokenize? | Token Path | Token Value | Override Reason |
+|--------|-------------|---------------|------------|-------------|-----------------|
+| 18 | `.anticon { margin: 0 }` | ❌ No | N/A | N/A | Specific icon spacing override - no token available for nested icon margin within button |
+
+**Tokenizable overrides**: 0  
+**Non-tokenizable overrides**: 1  
+**If all tokenizable**: N/A  
+**If none found**: N/A  
+**Status**: One non-tokenizable override found - will use `:global` with `// OVERRIDE:` comment
+
+#### 2. API Breaking Changes
+
+| Old API | New API | Affected Props |
+|---------|---------|----------------|
+| N/A | N/A | N/A |
+
+**Note**: This component does not use Ant Design components directly (uses @antv/x6 Graph library). No Antd API breaking changes apply.
+
+#### 3. Backward Compatibility Plan
+
+| Deprecated Prop | Fallback Logic |
+|----------------|----------------|
+| N/A | N/A |
+
+**Note**: No deprecated props identified. Component uses @antv/x6 Graph library, not Ant Design components.
+
+#### 4. Type Definitions Needed
+
+- **Props interface**: Main component props with all current PropTypes converted to TypeScript
+- **Node interface**: Type for nodes array items (`{ id: string, component: React.ComponentType, height: number, props?: Record<string, unknown>, toolTip?: string }`)
+- **Connection interface**: Type for connections array items (`{ sourceId: string, targetId: string }`)
+- **GraphRef type**: Type for graph reference (`React.MutableRefObject<Graph | null>`)
+- **NodePosition interface**: Type for node position tracking object
+- **EdgeObj interface**: Type for edge tracking object
+
+#### 5. PropTypes Removal
+
+- [x] Component uses PropTypes: **YES**
+- [x] PropTypes file exists: **NO** (PropTypes defined inline in index.tsx)
+- [x] PropTypes imports found: **YES** (`import PropTypes from 'prop-types'` on line 16)
+- [x] Component.propTypes assignments found: **YES** (lines 431-454)
+- **Action Required**: Must remove all PropTypes and replace with TypeScript types from types.ts
+
+**PropTypes to Remove**:
+- `import PropTypes from 'prop-types'` (line 16)
+- `CapLevelGraphRenderer.propTypes = { ... }` (lines 431-454)
+
+#### 6. DefaultProps Removal
+
+- [x] Component uses defaultProps: **YES**
+- [x] Component.defaultProps assignments found: **YES** (lines 456-478)
+- [x] Old function syntax with props parameter: **NO** (already uses destructuring)
+- [x] Default values assigned inside function body: **NO** (uses defaultProps)
+- **Action Required**: Must remove defaultProps and convert to destructuring with default values in function arguments
+
+**DefaultProps to Remove**:
+- `CapLevelGraphRenderer.defaultProps = { ... }` (lines 456-478)
+
+**Default Values to Convert**:
+- `nodes: []`
+- `className: ''`
+- `graphStyles: {}`
+- `connections: []`
+- `defaultStartX: 0`
+- `defaultStartY: 0`
+- `offsetHeight: 20`
+- `scrollerProps: {}`
+- `showToolTip: false`
+- `containerStyles: {}`
+- `graphWidth: '500px'`
+- `scrollClassName: ''`
+- `graphHeight: '500px'`
+- `reverseConnProps: {}`
+- `forwardConnProps: {}`
+- `defaultEleWidth: 100`
+- `defaultEleDistance: 20`
+- `offsetLineDistance: 18`
+- `lineStrokeColor: 'gray'`
+- `allowForwardArrowTooltip: false`
+- `allowReverseArrowTooltip: false`
+
+#### 7. External Package Dependencies
+
+**External packages found**:
+- `@antv/x6` - Graph library (used in index.tsx line 12, Tooltip.tsx line 1)
+- `@antv/x6-react-shape` - React shape plugin for x6 (used in index.tsx line 13)
+
+**Package status**:
+- `@antv/x6`: Not found in package.json dependencies (needs to be added)
+- `@antv/x6-react-shape`: Not found in package.json dependencies (needs to be added)
+
+**Version reference**: Found version `1.12.4` in `tools/visual-testing/antd-current-version-consumer/package-lock.json`
+
+**Action Required**: Add both packages to `blaze-ui/package.json` dependencies:
+- `"@antv/x6": "^1.12.4"`
+- `"@antv/x6-react-shape": "^1.2.3"`
+
+#### 8. Component-Specific Notes
+
+- Component uses `@antv/x6` Graph library (not Ant Design components)
+- Uses React refs for graph instance management
+- Has complex connection calculation logic for reverse connections
+- Uses custom TooltipTool class extending ToolsView.ToolItem
+- Pagination controls use CapButton and CapIcon components
+- Component requires DOM element with `graphId` for initialization
+- Uses module-level objects (`nodePostionObj`, `edgeObj`) for state tracking
+
+---
+
+## STAGE 2: Theme Config Update
+
+**Status**: No theme config changes required
+
+**Reason**: No tokenizable Antd style overrides found. The component uses `@antv/x6` Graph library (not Ant Design components), and the only style override (`.anticon` margin) is non-tokenizable and documented with `// OVERRIDE:` comment in `styles.scss`.
+
+**Validation**: Cross-referenced with Stage 1 analysis - confirmed no tokenizable overrides exist.
+
+---
+
+## STAGE 3: Implementation Complete
+
+All files have been created/updated:
+- ✅ `types.ts` - TypeScript interfaces created
+- ✅ `styles.scss` - Updated with `// OVERRIDE:` comment for `.anticon`
+- ✅ `index.tsx` - PropTypes removed, defaultProps removed, TypeScript types used, CSS Modules implemented
+- ✅ `README.md` - Migration documentation created
+- ✅ `package.json` - Added `@antv/x6` and `@antv/x6-react-shape` dependencies
+- ✅ `components/index.ts` - Export added
+
+**Migration Status**: ✅ COMPLETE

package/CapLevelGraphRenderer/README.md

@@ -0,0 +1,123 @@
+# CapLevelGraphRenderer
+
+Graph renderer component that displays nodes with custom React components and draws level-by-level backward edges using the @antv/x6 Graph library.
+
+## Migration (Antd v3 → v6)
+
+- **Antd usage**: This component does **not** use any Ant Design components directly. It uses the `@antv/x6` Graph library for rendering. The component uses Cap UI components (`CapButton`, `CapIcon`) for pagination controls. No Antd theme config or API changes apply.
+- **PropTypes removed**: All runtime PropTypes were removed and replaced with TypeScript types from `types.ts`.
+- **defaultProps removed**: All `defaultProps` were removed and converted to destructuring with default values in the function signature.
+- **Styles**: `styles.scss` uses CSS Modules with one `:global` override for Ant Design icon spacing (with mandatory `// OVERRIDE:` comment).
+
+## Props
+
+See `types.ts` for full interfaces. Main props:
+
+| Prop | Type | Description |
+|------|------|-------------|
+| `nodes` | `GraphNode[]` | Array of nodes to render. Each node requires `id`, `component`, `height`, and optionally `props` and `toolTip`. Default: `[]` |
+| `graphId` | `string` | **Required.** Unique identifier for the graph container DOM element. |
+| `connections` | `GraphConnection[]` | Array of connections between nodes. Each connection has `sourceId` and `targetId`. Default: `[]` |
+| `graphWidth` | `number \| string` | Width of the graph container. Default: `'500px'` |
+| `graphHeight` | `number \| string` | Height of the graph container. Default: `'500px'` |
+| `showToolTip` | `boolean` | Whether to show tooltips on edges. Default: `false` |
+| `allowForwardArrowTooltip` | `boolean` | Whether to allow tooltips on forward arrows. Default: `false` |
+| `allowReverseArrowTooltip` | `boolean` | Whether to allow tooltips on reverse arrows. Default: `false` |
+| `defaultEleWidth` | `number` | Default width for each node element. Default: `100` |
+| `defaultEleDistance` | `number` | Default distance between node elements. Default: `20` |
+| `offsetHeight` | `number` | Offset height for connection lines from node top. Default: `20` |
+| `offsetLineDistance` | `number` | Offset distance for reverse connection lines. Default: `18` |
+| `defaultStartX` | `number` | Default starting X coordinate. Default: `0` |
+| `defaultStartY` | `number` | Default starting Y coordinate. Default: `0` |
+| `lineStrokeColor` | `string` | Color for connection lines. Default: `'gray'` |
+| `forwardConnProps` | `Record<string, unknown>` | Props to apply to forward connections. Default: `{}` |
+| `reverseConnProps` | `Record<string, unknown>` | Props to apply to reverse connections. Default: `{}` |
+| `scrollerProps` | `Record<string, unknown>` | Props to pass to the x6 scroller. Default: `{}` |
+| `scrollClassName` | `string` | CSS class name for the scroller. Default: `''` |
+| `graphStyles` | `React.CSSProperties` | Inline styles for the graph container. Default: `{}` |
+| `containerStyles` | `React.CSSProperties` | Inline styles for the container wrapper. Default: `{}` |
+| `className` | `string` | Additional CSS class name. Default: `''` |
+
+## Usage
+
+```tsx
+import CapLevelGraphRenderer from '@capillarytech/blaze-ui/components/CapLevelGraphRenderer';
+import type { GraphNode, GraphConnection } from '@capillarytech/blaze-ui/components/CapLevelGraphRenderer/types';
+
+const MyComponent = () => {
+  const nodes: GraphNode[] = [
+    {
+      id: 'tier1',
+      component: MyCustomComponent,
+      height: 295,
+      props: { label: 'Tier 1' },
+      toolTip: 'First Tier',
+    },
+    {
+      id: 'tier2',
+      component: MyCustomComponent,
+      height: 500,
+      props: { label: 'Tier 2' },
+      toolTip: 'Second Tier',
+    },
+  ];
+
+  const connections: GraphConnection[] = [
+    { sourceId: 'tier2', targetId: 'tier1' },
+  ];
+
+  return (
+    <CapLevelGraphRenderer
+      graphId="my-graph"
+      nodes={nodes}
+      connections={connections}
+      graphWidth="800px"
+      graphHeight="600px"
+      showToolTip={true}
+      allowForwardArrowTooltip={true}
+      allowReverseArrowTooltip={true}
+    />
+  );
+};
+```
+
+## Features
+
+- **Custom Node Components**: Each node can render a custom React component
+- **Forward Connections**: Automatically draws forward connections between adjacent nodes
+- **Reverse Connections**: Calculates and draws reverse connections level-by-level to avoid overlaps
+- **Pagination**: Built-in pagination controls for horizontal scrolling
+- **Tooltips**: Optional tooltips on edges (forward and reverse arrows)
+- **Customizable Styling**: Supports custom styles for graph container, connections, and scroller
+
+## Breaking Changes
+
+None. This component did not use Ant Design components or deprecated APIs.
+
+## Dependencies
+
+- `@antv/x6`: Graph rendering library (version: ^1.12.4)
+- `@antv/x6-react-shape`: React shape plugin for x6 (version: ^1.2.3)
+- `classnames`, `lodash` (already in blaze-ui dependencies)
+
+## Style Overrides
+
+The component uses one `:global` override for Ant Design icon spacing:
+
+```scss
+// OVERRIDE: Specific icon spacing override - no token available for nested icon margin within button
+:global {
+  & > span + .anticon {
+    margin: 0;
+  }
+}
+```
+
+This override is necessary because there's no design token available for nested icon margin within button components.
+
+## Notes
+
+- The component requires a DOM element with the specified `graphId` to exist before rendering
+- The component uses module-level objects (`nodePostionObj`, `edgeObj`) for state tracking
+- Reverse connections are calculated using a level-based algorithm to prevent overlaps
+- The graph instance is managed via React refs

package/CapLevelGraphRenderer/STORYBOOK_ANALYSIS.md

@@ -0,0 +1,96 @@
+# Storybook Story Creation Analysis: CapLevelGraphRenderer
+
+## STAGE 0: Analysis
+
+### 1. Story File Status
+- [x] Story exists: **NO** → Created new story file at `blaze-ui/stories/CapLevelGraphRenderer.stories.tsx`
+
+### 2. Component Props (from types.ts)
+
+| Prop | Type | Required | Control Type | Notes |
+|------|------|----------|--------------|-------|
+| `graphId` | `string` | Yes | text | Required prop - unique DOM element ID |
+| `nodes` | `GraphNode[]` | No | object | Array of nodes with component, height, props, toolTip |
+| `connections` | `GraphConnection[]` | No | object | Array of connections with sourceId, targetId |
+| `className` | `string` | No | text | Additional CSS class |
+| `graphWidth` | `number \| string` | No | text | Width of graph container |
+| `graphHeight` | `number \| string` | No | text | Height of graph container |
+| `showToolTip` | `boolean` | No | boolean | Enable tooltips on edges |
+| `allowForwardArrowTooltip` | `boolean` | No | boolean | Enable tooltips on forward arrows |
+| `allowReverseArrowTooltip` | `boolean` | No | boolean | Enable tooltips on reverse arrows |
+| `offsetHeight` | `number` | No | number | Connection line offset from node top |
+| `defaultStartX` | `number` | No | number | Starting X coordinate |
+| `defaultStartY` | `number` | No | number | Starting Y coordinate |
+| `defaultEleWidth` | `number` | No | number | Default node element width |
+| `defaultEleDistance` | `number` | No | number | Distance between node elements |
+| `offsetLineDistance` | `number` | No | number | Offset for reverse connection lines |
+| `lineStrokeColor` | `string` | No | color | Color for connection lines |
+| `graphStyles` | `React.CSSProperties` | No | object | Inline styles for graph container |
+| `containerStyles` | `React.CSSProperties` | No | object | Inline styles for container wrapper |
+| `scrollerProps` | `Record<string, unknown>` | No | object | Props for x6 scroller |
+| `scrollClassName` | `string` | No | text | CSS class for scroller |
+| `forwardConnProps` | `Record<string, unknown>` | No | object | Props for forward connections |
+| `reverseConnProps` | `Record<string, unknown>` | No | object | Props for reverse connections |
+
+### 3. Error Story Decision
+- [x] Component has error props/states: **NO**
+- [x] Error story needed: **NO**
+- **Decision**: Will create only Default + Custom (2 stories)
+
+**Reasoning**: Component doesn't have error handling props or error states. It's a graph renderer that requires valid data (nodes, connections) but doesn't expose error states to consumers.
+
+### 4. State Requirements
+- [x] Needs state management: **NO**
+- [x] State type: N/A
+
+**Reasoning**: Component is primarily presentational. It renders nodes and connections based on props. No internal state management needed in stories since the component manages its own graph state internally.
+
+### 5. Special Considerations
+
+**Mock Components**: Created `MockNodeComponent` to render inside graph nodes since nodes require React components.
+
+**Unique graphId**: Each story render generates a unique `graphId` to avoid DOM conflicts when multiple stories render simultaneously.
+
+**Complex Props**: Some props like `nodes` and `connections` are complex objects that require mock data. Provided default arrays for Default story and comprehensive examples for Custom story.
+
+---
+
+## STAGE 1: Implementation Complete
+
+✅ **File Created**: `blaze-ui/stories/CapLevelGraphRenderer.stories.tsx`
+
+✅ **Story Count**: 2 stories (Default, Custom)
+
+✅ **Story Names**: Default, Custom
+
+✅ **CSF 3.0 Format**: Uses `Meta<typeof CapLevelGraphRenderer>` and `StoryObj<typeof CapLevelGraphRenderer>`
+
+✅ **All Props in argTypes**: All 20 props configured with appropriate controls and descriptions
+
+✅ **Default Story**: Minimal args with basic nodes and connections
+
+✅ **Custom Story**: All props with realistic values, includes state indicator showing configuration
+
+---
+
+## Validation Checklist
+
+### Critical (Auto-Reject if Failed)
+- [x] File: `blaze-ui/stories/CapLevelGraphRenderer.stories.tsx` (exact path)
+- [x] Story count: 2 (matches Stage 0 decision)
+- [x] Story names: Default, Custom
+- [x] Format: CSF 3.0 with `Meta<typeof>` and `StoryObj<typeof>`
+- [x] No other files modified
+
+### Quality
+- [x] Stage 0 analysis completed
+- [x] All props from Stage 0 in argTypes
+- [x] Default: Minimal args with basic functionality
+- [x] Custom: ALL props with state indicator
+- [x] Mock components created for node rendering
+- [x] Unique graphId generation to avoid conflicts
+- [x] TypeScript compiles with no errors
+
+---
+
+**Status**: ✅ COMPLETE

package/CapLevelGraphRenderer/Tooltip.d.ts

@@ -0,0 +1,31 @@
+import { ToolsView } from '@antv/x6';
+import { Root } from 'react-dom/client';
+/**
+ * Custom tooltip tool for x6 graph edges
+ * Extends ToolsView.ToolItem to provide tooltip functionality on edge hover
+ *
+ * Note: Uses type assertions for @antv/x6 properties as the library's TypeScript
+ * definitions may not fully expose all ToolItem properties.
+ */
+declare class TooltipTool extends ToolsView.ToolItem {
+    /** DOM element for tooltip rendering */
+    knob: HTMLElement;
+    /** Delay in milliseconds before showing/hiding tooltip */
+    delay: number;
+    /** Current tooltip visibility state */
+    tooltipVisible: boolean;
+    /** Timer reference for delayed tooltip operations */
+    timer?: number;
+    /** React root instance for rendering tooltip */
+    root?: Root;
+    constructor(props: Record<string, unknown>);
+    render(): this;
+    toggleTooltip(visible: boolean): void;
+    updatePosition(e?: MouseEvent): void;
+    onMouseLeave(): void;
+    onMouseMove: (e: MouseEvent) => void;
+    delegateEvents(): this;
+    onRemove(): void;
+}
+export default TooltipTool;
+//# sourceMappingURL=Tooltip.d.ts.map

package/CapLevelGraphRenderer/Tooltip.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Tooltip.d.ts","sourceRoot":"","sources":["../../components/CapLevelGraphRenderer/Tooltip.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,MAAM,UAAU,CAAC;AAErC,OAAO,EAAc,IAAI,EAAE,MAAM,kBAAkB,CAAC;AAMpD;;;;;;GAMG;AACH,cAAM,WAAY,SAAQ,SAAS,CAAC,QAAQ;IAC1C,wCAAwC;IACxC,IAAI,EAAG,WAAW,CAAC;IAEnB,0DAA0D;IAC1D,KAAK,EAAE,MAAM,CAAC;IAEd,uCAAuC;IACvC,cAAc,EAAE,OAAO,CAAC;IAExB,qDAAqD;IACrD,KAAK,CAAC,EAAE,MAAM,CAAC;IAEf,gDAAgD;IAChD,IAAI,CAAC,EAAE,IAAI,CAAC;gBAEA,KAAK,EAAE,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC;IAM1C,MAAM,IAAI,IAAI;IAWd,aAAa,CAAC,OAAO,EAAE,OAAO,GAAG,IAAI;IAkBrC,cAAc,CAAC,CAAC,CAAC,EAAE,UAAU,GAAG,IAAI;IAepC,YAAY,IAAI,IAAI;IAWpB,WAAW,GAAI,GAAG,UAAU,KAAG,IAAI,CAWjC;IAEF,cAAc,IAAI,IAAI;IAMtB,QAAQ,IAAI,IAAI;CAWjB;AAcD,eAAe,WAAW,CAAC"}

package/CapLevelGraphRenderer/Tooltip_MIGRATION_ANALYSIS.md

@@ -0,0 +1,120 @@
+# Migration Analysis Report: Tooltip.tsx
+
+## STAGE 1: Pre-Analysis
+
+### Analysis Report for Tooltip.tsx
+
+#### 1. Antd Style Overrides Found
+
+| Line # | Old Override | Can Tokenize? | Token Path | Token Value | Override Reason |
+|--------|-------------|---------------|------------|-------------|-----------------|
+| N/A | None | N/A | N/A | N/A | No Antd style overrides found |
+
+**Tokenizable overrides**: 0  
+**Non-tokenizable overrides**: 0  
+**Status**: No Antd style overrides found - will skip theme config update
+
+#### 2. API Breaking Changes
+
+| Old API | New API | Affected Props |
+|---------|---------|----------------|
+| `visible` (CapTooltip) | `open` (CapTooltip) | Line 27: `visible` prop used |
+
+**Note**: The file uses deprecated `visible` prop on CapTooltip component. Should use `open` instead.
+
+#### 3. Backward Compatibility Plan
+
+| Deprecated Prop | Fallback Logic |
+|----------------|----------------|
+| `visible` (CapTooltip) | Use `open` prop instead (CapTooltip handles backward compatibility internally) |
+
+#### 4. Type Definitions Needed
+
+- **TooltipToolOptions interface**: Type for constructor props/options
+  - `tooltip?: string` - Tooltip text content
+- **Class property types**: 
+  - `knob: HTMLElement` - DOM element for tooltip rendering
+  - `delay: number` - Delay in milliseconds
+  - `tooltipVisible: boolean` - Current tooltip visibility state
+  - `timer: ReturnType<typeof setTimeout>` - Timer reference
+- **Method parameter types**:
+  - `toggleTooltip(visible: boolean): void`
+  - `updatePosition(e?: MouseEvent): void`
+  - `onMouseMove(e: MouseEvent): void`
+
+#### 5. PropTypes Removal
+
+- [x] Component uses PropTypes: **NO**
+- [x] PropTypes file exists: **NO**
+- [x] PropTypes imports found: **NO**
+- [x] Component.propTypes assignments found: **NO**
+- **Action Required**: None - no PropTypes found
+
+#### 6. DefaultProps Removal
+
+- [x] Component uses defaultProps: **NO**
+- [x] Component.defaultProps assignments found: **NO**
+- [x] Old function syntax with props parameter: **NO** (class-based component)
+- [x] Default values assigned inside function body: **YES** (line 10: `this.delay = 100`)
+- **Action Required**: None - defaultProps not used, default value assignment is acceptable for class properties
+
+#### 7. External Package Dependencies
+
+**External packages found**:
+- `@antv/x6` - Already in package.json (added in main component migration)
+- `react-dom/client` - Already available (React dependency)
+
+**Package status**:
+- All dependencies already present
+
+#### 8. Component-Specific Notes
+
+- Class-based component extending `ToolsView.ToolItem` from @antv/x6
+- Uses React 18 `createRoot` API (already migrated)
+- Uses deprecated `visible` prop on CapTooltip - needs update to `open`
+- Missing TypeScript types for class properties and method parameters
+- Uses DOM manipulation directly (acceptable for x6 tool implementation)
+
+---
+
+## STAGE 2: Theme Config Update
+
+**Status**: No theme config changes required
+
+**Reason**: No Antd style overrides found. Component uses @antv/x6 ToolsView.ToolItem and CapTooltip component.
+
+---
+
+## STAGE 3: Implementation Required
+
+1. **Add TypeScript types**:
+   - Define interface for TooltipToolOptions
+   - Add type annotations for class properties
+   - Add type annotations for method parameters
+
+2. **Fix deprecated prop usage**:
+   - Change `visible` to `open` on CapTooltip (line 27)
+
+3. **Improve type safety**:
+   - Add proper types for DOM elements and event handlers
+
+---
+
+## STAGE 3: Implementation Complete
+
+All changes have been implemented:
+- ✅ **TypeScript types added**: Created interfaces for TooltipToolOptions, GraphInstance, and CellViewInstance
+- ✅ **Class property types**: Added proper types for knob, delay, tooltipVisible, timer, and root
+- ✅ **Method parameter types**: Added types for toggleTooltip, updatePosition, onMouseMove, onMouseLeave
+- ✅ **Deprecated prop fixed**: Changed `visible` to `open` on CapTooltip (line 84)
+- ✅ **Type safety improved**: Used type assertions for @antv/x6 properties that aren't fully typed
+- ✅ **Cleanup added**: Added proper cleanup in onRemove method (unmount React root, clear timer)
+
+**Key Changes**:
+1. Fixed deprecated `visible` prop → `open` prop on CapTooltip
+2. Added TypeScript interfaces for options and x6 instance types
+3. Added proper type annotations for all class properties and methods
+4. Improved cleanup with React root unmounting
+5. Used type assertions for @antv/x6 properties that aren't fully exposed in TypeScript definitions
+
+**Migration Status**: ✅ COMPLETE

package/CapLevelGraphRenderer/index.d.ts

@@ -0,0 +1,16 @@
+/**
+ *
+ * CapLevelGraphRenderer
+ *
+ * It render graph with custom node and draw level by level backward edge
+ *
+ * Mock Data
+ * nodes = [{ id: 'tier1', height: 295 }, { id: 'tier2', height: 500 }]
+ * connections = [ { sourceId: 'tier2', targetId: 'tier1' }]
+ */
+import '@antv/x6-react-shape';
+import React from 'react';
+import type { CapLevelGraphRendererProps } from './types';
+declare const CapLevelGraphRenderer: React.FC<CapLevelGraphRendererProps>;
+export default CapLevelGraphRenderer;
+//# sourceMappingURL=index.d.ts.map

package/CapLevelGraphRenderer/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../components/CapLevelGraphRenderer/index.tsx"],"names":[],"mappings":"AAAA;;;;;;;;;GASG;AAGH,OAAO,sBAAsB,CAAC;AAG9B,OAAO,KAAmD,MAAM,OAAO,CAAC;AAOxE,OAAO,KAAK,EACV,0BAA0B,EAK3B,MAAM,SAAS,CAAC;AAYjB,QAAA,MAAM,qBAAqB,EAAE,KAAK,CAAC,EAAE,CAAC,0BAA0B,CA0b/D,CAAC;AAEF,eAAe,qBAAqB,CAAC"}