mirror of
https://github.com/The-Low-Code-Foundation/OpenNoodl.git
synced 2026-01-12 15:22:55 +01:00
103 lines
2.8 KiB
Markdown
103 lines
2.8 KiB
Markdown
# Topology Map Panel - Remaining Work Index
|
|
|
|
**Status:** In Progress
|
|
**Last Updated:** April 1, 2026
|
|
|
|
## Overview
|
|
|
|
This index tracks remaining work for VIEW-001 (Topology Map Panel). Work is split into focused documents to prevent scope confusion.
|
|
|
|
---
|
|
|
|
## 📋 Document Index
|
|
|
|
### 1. **[CRITICAL-BUGS.md](./CRITICAL-BUGS.md)**
|
|
|
|
Visual bugs that must be fixed before continuing with new features.
|
|
|
|
**Priority:** 🔴 **HIGHEST - Fix First**
|
|
|
|
### 2. **[PHASE-3-DRAGGABLE.md](./PHASE-3-DRAGGABLE.md)**
|
|
|
|
Drag-and-drop functionality for cards with position persistence.
|
|
|
|
**Priority:** 🟡 After bugs fixed
|
|
|
|
### 3. **[PHASE-4-STICKY-NOTES.md](./PHASE-4-STICKY-NOTES.md)**
|
|
|
|
Markdown sticky notes with drag-and-drop positioning.
|
|
|
|
**Priority:** 🟡 After draggable cards
|
|
|
|
### 4. **[PHASE-5-DRILLDOWN.md](./PHASE-5-DRILLDOWN.md)**
|
|
|
|
Drilldown view redesign and navigation improvements.
|
|
|
|
**Priority:** 🟢 Future enhancement
|
|
|
|
---
|
|
|
|
## ✅ Completed Work
|
|
|
|
### Phase 1: Icons & Styling (✅ Complete)
|
|
|
|
- Replaced emojis with SVG icons from icon system
|
|
- Used `foreignObject` for React Icon components in SVG
|
|
- Applied design tokens throughout SCSS files
|
|
- Changed sidebar icon to `IconName.StructureCircle`
|
|
|
|
### Phase 2: Enhanced Information (✅ Complete)
|
|
|
|
- Added gradient-colored connector lines (folder type colors)
|
|
- Added X-Ray stats to component cards
|
|
- Added component name previews to folder cards
|
|
- Added connection counts ("X in • Y out")
|
|
- Increased card heights for better information display
|
|
|
|
### Infrastructure (✅ Complete)
|
|
|
|
- Created `folderColors.ts` - Color/icon mapping
|
|
- Created `componentStats.ts` - Lightweight stats extraction
|
|
- Created `topologyPersistence.ts` - Project metadata persistence
|
|
- Created `snapToGrid.ts` - 20px grid snapping
|
|
- Created `useDraggable.ts` - Drag-and-drop hook
|
|
|
|
---
|
|
|
|
## 🎯 Current Focus
|
|
|
|
**Fix critical bugs in CRITICAL-BUGS.md before proceeding to Phase 3**
|
|
|
|
---
|
|
|
|
## 📁 File Locations
|
|
|
|
All Topology Map Panel code is in:
|
|
|
|
```
|
|
packages/noodl-editor/src/editor/src/views/panels/TopologyMapPanel/
|
|
├── components/
|
|
│ ├── ComponentNode.tsx
|
|
│ ├── ComponentNode.module.scss
|
|
│ ├── FolderNode.tsx
|
|
│ ├── FolderNode.module.scss
|
|
│ ├── FolderEdge.tsx
|
|
│ └── TopologyMapView.tsx
|
|
├── hooks/
|
|
│ ├── useTopologyGraph.ts
|
|
│ ├── useFolderGraph.ts
|
|
│ ├── useTopologyLayout.ts
|
|
│ ├── useFolderLayout.ts
|
|
│ └── useDraggable.ts (infrastructure ready)
|
|
├── utils/
|
|
│ ├── topologyTypes.ts
|
|
│ ├── folderTypeDetection.ts
|
|
│ ├── tierAssignment.ts
|
|
│ ├── folderAggregation.ts
|
|
│ ├── folderColors.ts
|
|
│ ├── componentStats.ts
|
|
│ ├── topologyPersistence.ts
|
|
│ └── snapToGrid.ts
|
|
└── TopologyMapPanel.tsx (main panel)
|
|
```
|