jan-henrik/constellation-analyzer
1
0
Fork 0
mirror of https://github.com/OFFIS-ESC/constellation-analyzer synced 2026-01-27 07:43:41 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions
constellation-analyzer/CLAUDE.md
Jan-Henrik Bruhn 3b7497ec99 feat: add multi-select properties panel with bulk operations 
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>
2025-10-21 10:57:07 +02:00

2 KiB
Raw Blame History

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