mirror of
https://github.com/OFFIS-ESC/constellation-analyzer
synced 2026-01-27 15:53:42 +00:00
3b7497ec99
Implements comprehensive multi-selection support for bulk operations on actors, relations, and groups. Features: - New MultiSelectProperties panel for 2+ selected elements - Bulk operations: group, ungroup, delete, minimize/maximize - Add actors to existing groups (expands group bounds) - Reverse relation directions - Change directionality for multiple relations - Immediate UI feedback with local state for directionality - Standardized panel layout with scrollable content and footer Fixes: - Group positioning: actors stay at absolute positions when added/removed - Minimize/maximize: properly stores/restores dimensions and visibility - Position conversion between absolute and relative coordinates - Type-safe width/height handling for group dimensions UI Consistency: - All property panels use fragment wrapper pattern - Scrollable content area with px-3 py-3 padding - Fixed footer section with action buttons - Consistent button styles across panels 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude <noreply@anthropic.com>
55 lines
No EOL
2 KiB
Markdown
55 lines
No EOL
2 KiB
Markdown
# CLAUDE.md
|
|
|
|
This file provides guidance to Claude Code (claude.ai/code) when working with code in this repository.
|
|
|
|
## Project Overview
|
|
|
|
Constellation Analyzer is a React-based visual editor for creating and analyzing Constellation Analyses. A Constellation Analysis examines actors (nodes) and their relationships (edges) to each other, resulting in an interactive graph visualization.
|
|
|
|
## Core Concepts
|
|
|
|
### Actors (Nodes)
|
|
- Represent entities in the analysis
|
|
- Support multiple configurable node types
|
|
- Each node type can have distinct visual properties and behaviors
|
|
|
|
### Relations (Edges)
|
|
- Connect actors to show relationships
|
|
- Support multiple definable edge types
|
|
- Edge types can represent different relationship categories
|
|
|
|
### Graph Editor
|
|
- Interactive visual canvas for creating and editing constellation graphs
|
|
- Drag-and-drop interface for node manipulation
|
|
- Visual edge creation between nodes
|
|
- Real-time graph updates
|
|
|
|
## Project Status
|
|
|
|
This is a new project. The codebase structure needs to be established including:
|
|
- React application scaffolding
|
|
- Graph visualization library integration
|
|
- State management setup
|
|
- Component architecture
|
|
- Data model definitions
|
|
|
|
## Architecture Decisions Needed
|
|
|
|
When implementing this project, consider:
|
|
|
|
1. **Graph Visualization Library**: Choose between React Flow, vis.js, Cytoscape.js, or similar
|
|
2. **State Management**: Redux, Zustand, Jotai, or React Context
|
|
3. **Build Tool**: Vite, Create React App, or Next.js
|
|
4. **Styling**: CSS Modules, Styled Components, Tailwind CSS, or plain CSS
|
|
5. **TypeScript**: Strongly recommended for type-safe node/edge definitions
|
|
6. **Data Persistence**: Local storage, backend API, or file export/import
|
|
|
|
## Development Workflow
|
|
|
|
Since this is a new project, the initial setup should include:
|
|
- Initialize React application with chosen build tool
|
|
- Install graph visualization dependencies
|
|
- Set up project structure (components, hooks, utils, types)
|
|
- Configure linting and formatting tools
|
|
- Establish data models for nodes, edges, and graph state
|
|
- build: npm run build; lint: npm run lint |