feat: working version of new visualization approach

README.md

@@ -1,6 +1,6 @@
 # D3 Edge Graph Visualization Generator
 
-A tool to generate interactive, force-directed graph visualizations with nodes and edges using D3.js and HTML Canvas.
+A modern tool to generate interactive, force-directed graph visualizations with nodes and edges using D3.js and HTML Canvas.
 
 ## Live Demo
 
@@ -10,14 +10,43 @@ Try the interactive visualization example: [https://edge-node-d3.vercel.app/](ht
 
 ## Features
 
-- Force-directed graph layout
-- Interactive node dragging
+- Modern, responsive UI with dark mode design
+- Force-directed graph layout with physics controls
+- Interactive node dragging and selection
 - Directional arrows showing relationships
 - Bidirectional relationship support
 - Color-coded nodes by type
 - Auto-wrapping node labels
-- Smooth animations
+- Search functionality to find and highlight nodes
+- Node hover effects with visual feedback
+- Mini-map navigation for large graphs
+- Zoom controls with smooth transitions
+- Toggle labels and relationship visibility
+- Dynamic legend based on node types
+- Status bar with graph statistics
+- Smooth animations and transitions
 - Canvas-based rendering for better performance
+- **Multi-level abstraction for complex graphs**
+
+## Multi-level Abstraction
+
+The visualization supports a hierarchical abstraction system that simplifies complex graphs and makes them easier to understand:
+
+- **Domain Level (highest)**: Groups nodes into broad domains like "People", "Movies", and "Companies"
+- **Type Level (middle)**: Groups nodes by their type, such as "Actor", "Director", "Film", etc.
+- **Detail Level (lowest)**: Shows individual nodes with their relationships
+
+Abstraction levels change automatically based on zoom level:
+- When zoomed out, you see domain-level abstractions
+- At medium zoom, you see type-level abstractions
+- When zoomed in, you see individual nodes
+
+You can also:
+- Directly select abstraction levels from the dropdown control
+- Click the "+" icon on abstraction nodes to expand that specific group
+- Monitor the current abstraction level in the status bar
+
+This approach is inspired by the "galaxy/solar system/planets" paradigm, allowing you to understand the general structure of your data before diving into details.
 
 ## Prerequisites
 
@@ -30,9 +59,12 @@ Try the interactive visualization example: [https://edge-node-d3.vercel.app/](ht
 d3-edge-graph/
 ├── src/
 │   ├── edgeGraph.js        # Core visualization implementation
-│   └── generateNodeTree.js # Generator script
+│   └── generateEdgeGraph.js # Generator script
 ├── examples/
 │   └── example_data.json  # Example data structure
+├── tests/                 # Test files
+│   ├── edgeGraph.test.js  # Unit tests
+│   └── generate-test.js   # Generation test
 ├── package.json           # Project configuration
 ├── README.md             # Documentation
 └── .gitignore           # Git ignore rules
@@ -65,9 +97,21 @@ npm run example
 npm run generate path/to/your/data.json
 ```
 
+3. Start a local server to view the visualization:
+```bash
+npm start
+```
+
+4. Run tests:
+```bash
+npm test            # Run unit tests
+npm run test:watch  # Run tests in watch mode
+npm run test:generate # Test generation with example data
+```
+
 ### Using node directly
 ```bash
-node src/generateNodeTree.js path/to/your/data.json
+node src/generateEdgeGraph.js path/to/your/data.json
 ```
 
 ## Data Format
@@ -153,7 +197,9 @@ const edgeGraph = new EdgeGraph(container, data, {
     logoUrl: 'path/to/your/logo.png',
     logoPosition: 'bottomRight',
     logoSize: 100,
-    logoPadding: 20
+    logoPadding: 20,
+    showMiniMap: true,
+    miniMapCanvas: document.getElementById('mini-map-canvas')
 });
 ```
 
@@ -168,18 +214,31 @@ You can display a custom logo in the corner of your graph:
 - **size/logoSize**: Maximum dimension of the logo in pixels (preserves aspect ratio)
 - **padding/logoPadding**: Padding from the edge of the canvas in pixels
 
+### Mini-Map Options
+
+You can enable a mini-map for navigating large graphs:
+
+- **showMiniMap**: Boolean to enable/disable the mini-map
+- **miniMapCanvas**: Reference to the mini-map canvas element
+
 ## Interaction Guide
 
 - **Drag nodes**: Click and drag any node to reposition it
 - **Click on a node**: Opens an information box showing all the node's properties
+- **Search**: Type in the search box to find and highlight matching nodes
 - **Node colors**: Defined in the colors object for each node type
+- **Hover**: Move the mouse over a node to see a hover effect
 - **Arrows**: Show relationship direction between nodes
 - **Labels**: 
-  - Node labels appear inside nodes
-  - Relationship names appear above arrows
+  - Node labels appear inside nodes (can be toggled)
+  - Relationship names appear above arrows (can be toggled)
 - **Click on empty space**: Closes any open node info box
 - **Click and drag on empty space**: Pans the entire graph
 - **Mouse wheel**: Zooms in and out of the graph
+- **Zoom slider**: Adjust zoom level with precise control
+- **Mini-map**: Shows the current viewport in the context of the entire graph
+- **Physics toggle**: Pause/resume the force simulation
+- **Reset view**: Fit all nodes to the viewport
 
 ### Node Info Box
 
@@ -208,12 +267,51 @@ Example property display:
 - Automatic text wrapping in nodes
 - Bidirectional relationship handling
 - Interactive drag and click functionality
-- Smooth animations for expanding/collapsing nodes
+- Search highlighting with visual feedback
+- Node hover effects with glow
+- Mini-map navigation for large graphs
+- Physics controls for simulation
+- Responsive design that works on various screen sizes
+- Smart zoom to fit selected nodes
+- Smooth animations for transitions
 
 ### Dependencies
-- D3.js v7.0.0 for force simulation and interactions
+- D3.js v7.8.5 for force simulation and interactions
 - HTML5 Canvas for rendering
 - Node.js for generating the visualization file
+- Jest for testing
+
+## Testing
+
+The project includes comprehensive tests for core functionality and UI interactions:
+
+1. **Unit Tests**
+   ```bash
+   npm test
+   ```
+   Tests edge graph functionality using Jest with jsdom environment, including:
+   - Core graph processing and rendering
+   - Search functionality
+   - Zoom controls
+   - Label visibility toggling
+   - Relationship label toggling
+   - Reset view functionality
+   - Physics simulation controls
+
+2. **UI Integration Tests**
+   The tests verify the correct interaction between UI controls and graph functionality:
+   - Search input integration
+   - Zoom slider behavior
+   - Label toggle checkboxes
+   - Reset view button
+   - Physics toggle button
+   - Controls panel toggling
+
+3. **Generation Tests**
+   ```bash
+   npm run test:generate
+   ```
+   Validates example data structure and tests visualization generation
 
 ## Troubleshooting
 
@@ -226,15 +324,16 @@ Example property display:
    - Make sure you're using a modern browser
    - Check if D3.js is loading correctly
 
-3. If clustering is not working:
-   - Verify your JSON structure
-   - Check that nodes have proper `children` arrays
+3. If searching doesn't work:
+   - Verify node labels and properties contain searchable text
+   - Check browser console for any JavaScript errors
 
 ## Limitations
 
 - Best suited for graphs with less than 1000 nodes
 - Requires modern browser with Canvas support
 - JSON file must be valid and follow the required structure
+- Performance may degrade with very large graphs
 
 ## Contributing