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

feat: add group minimize/maximize with floating edges and React Flow v12

Browse source 
Implements comprehensive group minimize/maximize functionality and migrates
to React Flow v12 (@xyflow/react) with improved edge routing.

## Group Minimize/Maximize Features:
- Minimized groups render as compact 220×80px solid rectangles
- Original dimensions preserved in metadata and restored on maximize
- Child actors hidden (not filtered) to prevent React Flow state issues
- Solid color backgrounds (transparency removed for minimized state)
- Internal edges filtered out when group is minimized
- Dimension sync before minimize ensures correct size on maximize

## Floating Edges:
- Dynamic edge routing for connections to/from minimized groups
- Edges connect to closest point on minimized group border
- Regular actors maintain fixed handle connections
- Smooth transitions when toggling group state

## React Flow v12 Migration:
- Updated package from 'reactflow' to '@xyflow/react'
- Changed imports to named imports (ReactFlow is now named)
- Updated CSS imports to '@xyflow/react/dist/style.css'
- Fixed NodeProps/EdgeProps to use full Node/Edge types
- Added Record<string, unknown> to data interfaces for v12 compatibility
- Replaced useStore(state => state.connectionNodeId) with useConnection()
- Updated nodeInternals to nodeLookup (renamed in v12)
- Fixed event handler types for v12 API changes

## Edge Label Improvements:
- Added explicit z-index (1000) to edge labels via EdgeLabelRenderer
- Labels now properly render above edge paths

## Type Safety & Code Quality:
- Removed all 'any' type assertions in useDocumentHistory
- Fixed missing React Hook dependencies
- Fixed unused variable warnings
- All ESLint checks passing (0 errors, 0 warnings)
- TypeScript compilation clean

## Bug Fixes:
- Group drag positions now properly persisted to store
- Minimized group styling (removed dotted border, padding)
- Node visibility using 'hidden' property instead of array filtering
- Dimension sync prevents actors from disappearing on maximize

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude <noreply@anthropic.com>
This commit is contained in:
Jan-Henrik Bruhn 2025-10-20 11:52:44 +02:00
parent f5adbc8ead
commit b1e634d3c4
21 changed files with 614 additions and 395 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

342
package-lock.json generated
View file

@ -12,18 +12,17 @@
"@citation-js/plugin-bibtex": "^0.7.18", "@citation-js/plugin-bibtex": "^0.7.18",
"@citation-js/plugin-csl": "^0.7.18", "@citation-js/plugin-csl": "^0.7.18",
"@citation-js/plugin-doi": "^0.7.18", "@citation-js/plugin-doi": "^0.7.18",
"@citation-js/plugin-pubmed": "^0.3.0",
"@citation-js/plugin-ris": "^0.7.18", "@citation-js/plugin-ris": "^0.7.18",
"@citation-js/plugin-software-formats": "^0.6.1", "@citation-js/plugin-software-formats": "^0.6.1",
"@emotion/react": "^11.11.3", "@emotion/react": "^11.11.3",
"@emotion/styled": "^11.11.0", "@emotion/styled": "^11.11.0",
"@mui/icons-material": "^5.15.10", "@mui/icons-material": "^5.15.10",
"@mui/material": "^5.15.10", "@mui/material": "^5.15.10",
"@xyflow/react": "^12.3.5",
"html-to-image": "^1.11.11", "html-to-image": "^1.11.11",
"jszip": "^3.10.1", "jszip": "^3.10.1",
"react": "^18.2.0", "react": "^18.2.0",
"react-dom": "^18.2.0", "react-dom": "^18.2.0",
"reactflow": "^11.11.0",
"zustand": "^4.5.0" "zustand": "^4.5.0"
}, },
"devDependencies": { "devDependencies": {
@ -444,17 +443,6 @@
"node": ">=14.0.0" "node": ">=14.0.0"
} }
}, },
"node_modules/@citation-js/plugin-pubmed": {
"version": "0.3.0",
"resolved": "https://registry.npmjs.org/@citation-js/plugin-pubmed/-/plugin-pubmed-0.3.0.tgz",
"integrity": "sha512-E3l83VP5UnTh6lLJaTaNBIkNgIx3U6IjDNf7j5l4geBOaOwDIhkl9X+Ss33/MMNEIMNDsBoodoMJTZ8Cq+C/ug==",
"engines": {
"node": ">=14"
},
"peerDependencies": {
"@citation-js/core": ">=0.5.1 <=0.6"
}
},
"node_modules/@citation-js/plugin-ris": { "node_modules/@citation-js/plugin-ris": {
"version": "0.7.18", "version": "0.7.18",
"resolved": "https://registry.npmjs.org/@citation-js/plugin-ris/-/plugin-ris-0.7.18.tgz", "resolved": "https://registry.npmjs.org/@citation-js/plugin-ris/-/plugin-ris-0.7.18.tgz",
@ -1508,102 +1496,6 @@
"url": "https://opencollective.com/popperjs" "url": "https://opencollective.com/popperjs"
} }
}, },
"node_modules/@reactflow/background": {
"version": "11.3.14",
"resolved": "https://registry.npmjs.org/@reactflow/background/-/background-11.3.14.tgz",
"integrity": "sha512-Gewd7blEVT5Lh6jqrvOgd4G6Qk17eGKQfsDXgyRSqM+CTwDqRldG2LsWN4sNeno6sbqVIC2fZ+rAUBFA9ZEUDA==",
"dependencies": {
"@reactflow/core": "11.11.4",
"classcat": "^5.0.3",
"zustand": "^4.4.1"
},
"peerDependencies": {
"react": ">=17",
"react-dom": ">=17"
}
},
"node_modules/@reactflow/controls": {
"version": "11.2.14",
"resolved": "https://registry.npmjs.org/@reactflow/controls/-/controls-11.2.14.tgz",
"integrity": "sha512-MiJp5VldFD7FrqaBNIrQ85dxChrG6ivuZ+dcFhPQUwOK3HfYgX2RHdBua+gx+40p5Vw5It3dVNp/my4Z3jF0dw==",
"dependencies": {
"@reactflow/core": "11.11.4",
"classcat": "^5.0.3",
"zustand": "^4.4.1"
},
"peerDependencies": {
"react": ">=17",
"react-dom": ">=17"
}
},
"node_modules/@reactflow/core": {
"version": "11.11.4",
"resolved": "https://registry.npmjs.org/@reactflow/core/-/core-11.11.4.tgz",
"integrity": "sha512-H4vODklsjAq3AMq6Np4LE12i1I4Ta9PrDHuBR9GmL8uzTt2l2jh4CiQbEMpvMDcp7xi4be0hgXj+Ysodde/i7Q==",
"dependencies": {
"@types/d3": "^7.4.0",
"@types/d3-drag": "^3.0.1",
"@types/d3-selection": "^3.0.3",
"@types/d3-zoom": "^3.0.1",
"classcat": "^5.0.3",
"d3-drag": "^3.0.0",
"d3-selection": "^3.0.0",
"d3-zoom": "^3.0.0",
"zustand": "^4.4.1"
},
"peerDependencies": {
"react": ">=17",
"react-dom": ">=17"
}
},
"node_modules/@reactflow/minimap": {
"version": "11.7.14",
"resolved": "https://registry.npmjs.org/@reactflow/minimap/-/minimap-11.7.14.tgz",
"integrity": "sha512-mpwLKKrEAofgFJdkhwR5UQ1JYWlcAAL/ZU/bctBkuNTT1yqV+y0buoNVImsRehVYhJwffSWeSHaBR5/GJjlCSQ==",
"dependencies": {
"@reactflow/core": "11.11.4",
"@types/d3-selection": "^3.0.3",
"@types/d3-zoom": "^3.0.1",
"classcat": "^5.0.3",
"d3-selection": "^3.0.0",
"d3-zoom": "^3.0.0",
"zustand": "^4.4.1"
},
"peerDependencies": {
"react": ">=17",
"react-dom": ">=17"
}
},
"node_modules/@reactflow/node-resizer": {
"version": "2.2.14",
"resolved": "https://registry.npmjs.org/@reactflow/node-resizer/-/node-resizer-2.2.14.tgz",
"integrity": "sha512-fwqnks83jUlYr6OHcdFEedumWKChTHRGw/kbCxj0oqBd+ekfs+SIp4ddyNU0pdx96JIm5iNFS0oNrmEiJbbSaA==",
"dependencies": {
"@reactflow/core": "11.11.4",
"classcat": "^5.0.4",
"d3-drag": "^3.0.0",
"d3-selection": "^3.0.0",
"zustand": "^4.4.1"
},
"peerDependencies": {
"react": ">=17",
"react-dom": ">=17"
}
},
"node_modules/@reactflow/node-toolbar": {
"version": "1.3.14",
"resolved": "https://registry.npmjs.org/@reactflow/node-toolbar/-/node-toolbar-1.3.14.tgz",
"integrity": "sha512-rbynXQnH/xFNu4P9H+hVqlEUafDCkEoCy0Dg9mG22Sg+rY/0ck6KkrAQrYrTgXusd+cEJOMK0uOOFCK2/5rSGQ==",
"dependencies": {
"@reactflow/core": "11.11.4",
"classcat": "^5.0.3",
"zustand": "^4.4.1"
},
"peerDependencies": {
"react": ">=17",
"react-dom": ">=17"
}
},
"node_modules/@rolldown/pluginutils": { "node_modules/@rolldown/pluginutils": {
"version": "1.0.0-beta.27", "version": "1.0.0-beta.27",
"resolved": "https://registry.npmjs.org/@rolldown/pluginutils/-/pluginutils-1.0.0-beta.27.tgz", "resolved": "https://registry.npmjs.org/@rolldown/pluginutils/-/pluginutils-1.0.0-beta.27.tgz",
@ -1937,93 +1829,11 @@
"@babel/types": "^7.28.2" "@babel/types": "^7.28.2"
} }
}, },
"node_modules/@types/d3": {
"version": "7.4.3",
"resolved": "https://registry.npmjs.org/@types/d3/-/d3-7.4.3.tgz",
"integrity": "sha512-lZXZ9ckh5R8uiFVt8ogUNf+pIrK4EsWrx2Np75WvF/eTpJ0FMHNhjXk8CKEx/+gpHbNQyJWehbFaTvqmHWB3ww==",
"dependencies": {
"@types/d3-array": "*",
"@types/d3-axis": "*",
"@types/d3-brush": "*",
"@types/d3-chord": "*",
"@types/d3-color": "*",
"@types/d3-contour": "*",
"@types/d3-delaunay": "*",
"@types/d3-dispatch": "*",
"@types/d3-drag": "*",
"@types/d3-dsv": "*",
"@types/d3-ease": "*",
"@types/d3-fetch": "*",
"@types/d3-force": "*",
"@types/d3-format": "*",
"@types/d3-geo": "*",
"@types/d3-hierarchy": "*",
"@types/d3-interpolate": "*",
"@types/d3-path": "*",
"@types/d3-polygon": "*",
"@types/d3-quadtree": "*",
"@types/d3-random": "*",
"@types/d3-scale": "*",
"@types/d3-scale-chromatic": "*",
"@types/d3-selection": "*",
"@types/d3-shape": "*",
"@types/d3-time": "*",
"@types/d3-time-format": "*",
"@types/d3-timer": "*",
"@types/d3-transition": "*",
"@types/d3-zoom": "*"
}
},
"node_modules/@types/d3-array": {
"version": "3.2.2",
"resolved": "https://registry.npmjs.org/@types/d3-array/-/d3-array-3.2.2.tgz",
"integrity": "sha512-hOLWVbm7uRza0BYXpIIW5pxfrKe0W+D5lrFiAEYR+pb6w3N2SwSMaJbXdUfSEv+dT4MfHBLtn5js0LAWaO6otw=="
},
"node_modules/@types/d3-axis": {
"version": "3.0.6",
"resolved": "https://registry.npmjs.org/@types/d3-axis/-/d3-axis-3.0.6.tgz",
"integrity": "sha512-pYeijfZuBd87T0hGn0FO1vQ/cgLk6E1ALJjfkC0oJ8cbwkZl3TpgS8bVBLZN+2jjGgg38epgxb2zmoGtSfvgMw==",
"dependencies": {
"@types/d3-selection": "*"
}
},
"node_modules/@types/d3-brush": {
"version": "3.0.6",
"resolved": "https://registry.npmjs.org/@types/d3-brush/-/d3-brush-3.0.6.tgz",
"integrity": "sha512-nH60IZNNxEcrh6L1ZSMNA28rj27ut/2ZmI3r96Zd+1jrZD++zD3LsMIjWlvg4AYrHn/Pqz4CF3veCxGjtbqt7A==",
"dependencies": {
"@types/d3-selection": "*"
}
},
"node_modules/@types/d3-chord": {
"version": "3.0.6",
"resolved": "https://registry.npmjs.org/@types/d3-chord/-/d3-chord-3.0.6.tgz",
"integrity": "sha512-LFYWWd8nwfwEmTZG9PfQxd17HbNPksHBiJHaKuY1XeqscXacsS2tyoo6OdRsjf+NQYeB6XrNL3a25E3gH69lcg=="
},
"node_modules/@types/d3-color": { "node_modules/@types/d3-color": {
"version": "3.1.3", "version": "3.1.3",
"resolved": "https://registry.npmjs.org/@types/d3-color/-/d3-color-3.1.3.tgz", "resolved": "https://registry.npmjs.org/@types/d3-color/-/d3-color-3.1.3.tgz",
"integrity": "sha512-iO90scth9WAbmgv7ogoq57O9YpKmFBbmoEoCHDB2xMBY0+/KVrqAaCDyCE16dUspeOvIxFFRI+0sEtqDqy2b4A==" "integrity": "sha512-iO90scth9WAbmgv7ogoq57O9YpKmFBbmoEoCHDB2xMBY0+/KVrqAaCDyCE16dUspeOvIxFFRI+0sEtqDqy2b4A=="
}, },
"node_modules/@types/d3-contour": {
"version": "3.0.6",
"resolved": "https://registry.npmjs.org/@types/d3-contour/-/d3-contour-3.0.6.tgz",
"integrity": "sha512-BjzLgXGnCWjUSYGfH1cpdo41/hgdWETu4YxpezoztawmqsvCeep+8QGfiY6YbDvfgHz/DkjeIkkZVJavB4a3rg==",
"dependencies": {
"@types/d3-array": "*",
"@types/geojson": "*"
}
},
"node_modules/@types/d3-delaunay": {
"version": "6.0.4",
"resolved": "https://registry.npmjs.org/@types/d3-delaunay/-/d3-delaunay-6.0.4.tgz",
"integrity": "sha512-ZMaSKu4THYCU6sV64Lhg6qjf1orxBthaC161plr5KuPHo3CNm8DTHiLw/5Eq2b6TsNP0W0iJrUOFscY6Q450Hw=="
},
"node_modules/@types/d3-dispatch": {
"version": "3.0.7",
"resolved": "https://registry.npmjs.org/@types/d3-dispatch/-/d3-dispatch-3.0.7.tgz",
"integrity": "sha512-5o9OIAdKkhN1QItV2oqaE5KMIiXAvDWBDPrD85e58Qlz1c1kI/J0NcqbEG88CoTwJrYe7ntUCVfeUl2UJKbWgA=="
},
"node_modules/@types/d3-drag": { "node_modules/@types/d3-drag": {
"version": "3.0.7", "version": "3.0.7",
"resolved": "https://registry.npmjs.org/@types/d3-drag/-/d3-drag-3.0.7.tgz", "resolved": "https://registry.npmjs.org/@types/d3-drag/-/d3-drag-3.0.7.tgz",
@ -2032,47 +1842,6 @@
"@types/d3-selection": "*" "@types/d3-selection": "*"
} }
}, },
"node_modules/@types/d3-dsv": {
"version": "3.0.7",
"resolved": "https://registry.npmjs.org/@types/d3-dsv/-/d3-dsv-3.0.7.tgz",
"integrity": "sha512-n6QBF9/+XASqcKK6waudgL0pf/S5XHPPI8APyMLLUHd8NqouBGLsU8MgtO7NINGtPBtk9Kko/W4ea0oAspwh9g=="
},
"node_modules/@types/d3-ease": {
"version": "3.0.2",
"resolved": "https://registry.npmjs.org/@types/d3-ease/-/d3-ease-3.0.2.tgz",
"integrity": "sha512-NcV1JjO5oDzoK26oMzbILE6HW7uVXOHLQvHshBUW4UMdZGfiY6v5BeQwh9a9tCzv+CeefZQHJt5SRgK154RtiA=="
},
"node_modules/@types/d3-fetch": {
"version": "3.0.7",
"resolved": "https://registry.npmjs.org/@types/d3-fetch/-/d3-fetch-3.0.7.tgz",
"integrity": "sha512-fTAfNmxSb9SOWNB9IoG5c8Hg6R+AzUHDRlsXsDZsNp6sxAEOP0tkP3gKkNSO/qmHPoBFTxNrjDprVHDQDvo5aA==",
"dependencies": {
"@types/d3-dsv": "*"
}
},
"node_modules/@types/d3-force": {
"version": "3.0.10",
"resolved": "https://registry.npmjs.org/@types/d3-force/-/d3-force-3.0.10.tgz",
"integrity": "sha512-ZYeSaCF3p73RdOKcjj+swRlZfnYpK1EbaDiYICEEp5Q6sUiqFaFQ9qgoshp5CzIyyb/yD09kD9o2zEltCexlgw=="
},
"node_modules/@types/d3-format": {
"version": "3.0.4",
"resolved": "https://registry.npmjs.org/@types/d3-format/-/d3-format-3.0.4.tgz",
"integrity": "sha512-fALi2aI6shfg7vM5KiR1wNJnZ7r6UuggVqtDA+xiEdPZQwy/trcQaHnwShLuLdta2rTymCNpxYTiMZX/e09F4g=="
},
"node_modules/@types/d3-geo": {
"version": "3.1.0",
"resolved": "https://registry.npmjs.org/@types/d3-geo/-/d3-geo-3.1.0.tgz",
"integrity": "sha512-856sckF0oP/diXtS4jNsiQw/UuK5fQG8l/a9VVLeSouf1/PPbBE1i1W852zVwKwYCBkFJJB7nCFTbk6UMEXBOQ==",
"dependencies": {
"@types/geojson": "*"
}
},
"node_modules/@types/d3-hierarchy": {
"version": "3.1.7",
"resolved": "https://registry.npmjs.org/@types/d3-hierarchy/-/d3-hierarchy-3.1.7.tgz",
"integrity": "sha512-tJFtNoYBtRtkNysX1Xq4sxtjK8YgoWUNpIiUee0/jHGRwqvzYxkq0hGVbbOGSz+JgFxxRu4K8nb3YpG3CMARtg=="
},
"node_modules/@types/d3-interpolate": { "node_modules/@types/d3-interpolate": {
"version": "3.0.4", "version": "3.0.4",
"resolved": "https://registry.npmjs.org/@types/d3-interpolate/-/d3-interpolate-3.0.4.tgz", "resolved": "https://registry.npmjs.org/@types/d3-interpolate/-/d3-interpolate-3.0.4.tgz",
@ -2081,67 +1850,11 @@
"@types/d3-color": "*" "@types/d3-color": "*"
} }
}, },
"node_modules/@types/d3-path": {
"version": "3.1.1",
"resolved": "https://registry.npmjs.org/@types/d3-path/-/d3-path-3.1.1.tgz",
"integrity": "sha512-VMZBYyQvbGmWyWVea0EHs/BwLgxc+MKi1zLDCONksozI4YJMcTt8ZEuIR4Sb1MMTE8MMW49v0IwI5+b7RmfWlg=="
},
"node_modules/@types/d3-polygon": {
"version": "3.0.2",
"resolved": "https://registry.npmjs.org/@types/d3-polygon/-/d3-polygon-3.0.2.tgz",
"integrity": "sha512-ZuWOtMaHCkN9xoeEMr1ubW2nGWsp4nIql+OPQRstu4ypeZ+zk3YKqQT0CXVe/PYqrKpZAi+J9mTs05TKwjXSRA=="
},
"node_modules/@types/d3-quadtree": {
"version": "3.0.6",
"resolved": "https://registry.npmjs.org/@types/d3-quadtree/-/d3-quadtree-3.0.6.tgz",
"integrity": "sha512-oUzyO1/Zm6rsxKRHA1vH0NEDG58HrT5icx/azi9MF1TWdtttWl0UIUsjEQBBh+SIkrpd21ZjEv7ptxWys1ncsg=="
},
"node_modules/@types/d3-random": {
"version": "3.0.3",
"resolved": "https://registry.npmjs.org/@types/d3-random/-/d3-random-3.0.3.tgz",
"integrity": "sha512-Imagg1vJ3y76Y2ea0871wpabqp613+8/r0mCLEBfdtqC7xMSfj9idOnmBYyMoULfHePJyxMAw3nWhJxzc+LFwQ=="
},
"node_modules/@types/d3-scale": {
"version": "4.0.9",
"resolved": "https://registry.npmjs.org/@types/d3-scale/-/d3-scale-4.0.9.tgz",
"integrity": "sha512-dLmtwB8zkAeO/juAMfnV+sItKjlsw2lKdZVVy6LRr0cBmegxSABiLEpGVmSJJ8O08i4+sGR6qQtb6WtuwJdvVw==",
"dependencies": {
"@types/d3-time": "*"
}
},
"node_modules/@types/d3-scale-chromatic": {
"version": "3.1.0",
"resolved": "https://registry.npmjs.org/@types/d3-scale-chromatic/-/d3-scale-chromatic-3.1.0.tgz",
"integrity": "sha512-iWMJgwkK7yTRmWqRB5plb1kadXyQ5Sj8V/zYlFGMUBbIPKQScw+Dku9cAAMgJG+z5GYDoMjWGLVOvjghDEFnKQ=="
},
"node_modules/@types/d3-selection": { "node_modules/@types/d3-selection": {
"version": "3.0.11", "version": "3.0.11",
"resolved": "https://registry.npmjs.org/@types/d3-selection/-/d3-selection-3.0.11.tgz", "resolved": "https://registry.npmjs.org/@types/d3-selection/-/d3-selection-3.0.11.tgz",
"integrity": "sha512-bhAXu23DJWsrI45xafYpkQ4NtcKMwWnAC/vKrd2l+nxMFuvOT3XMYTIj2opv8vq8AO5Yh7Qac/nSeP/3zjTK0w==" "integrity": "sha512-bhAXu23DJWsrI45xafYpkQ4NtcKMwWnAC/vKrd2l+nxMFuvOT3XMYTIj2opv8vq8AO5Yh7Qac/nSeP/3zjTK0w=="
}, },
"node_modules/@types/d3-shape": {
"version": "3.1.7",
"resolved": "https://registry.npmjs.org/@types/d3-shape/-/d3-shape-3.1.7.tgz",
"integrity": "sha512-VLvUQ33C+3J+8p+Daf+nYSOsjB4GXp19/S/aGo60m9h1v6XaxjiT82lKVWJCfzhtuZ3yD7i/TPeC/fuKLLOSmg==",
"dependencies": {
"@types/d3-path": "*"
}
},
"node_modules/@types/d3-time": {
"version": "3.0.4",
"resolved": "https://registry.npmjs.org/@types/d3-time/-/d3-time-3.0.4.tgz",
"integrity": "sha512-yuzZug1nkAAaBlBBikKZTgzCeA+k1uy4ZFwWANOfKw5z5LRhV0gNA7gNkKm7HoK+HRN0wX3EkxGk0fpbWhmB7g=="
},
"node_modules/@types/d3-time-format": {
"version": "4.0.3",
"resolved": "https://registry.npmjs.org/@types/d3-time-format/-/d3-time-format-4.0.3.tgz",
"integrity": "sha512-5xg9rC+wWL8kdDj153qZcsJ0FWiFt0J5RB6LYUNZjwSnesfblqrI/bJ1wBdJ8OQfncgbJG5+2F+qfqnqyzYxyg=="
},
"node_modules/@types/d3-timer": {
"version": "3.0.2",
"resolved": "https://registry.npmjs.org/@types/d3-timer/-/d3-timer-3.0.2.tgz",
"integrity": "sha512-Ps3T8E8dZDam6fUyNiMkekK3XUsaUEik+idO9/YjPtfj2qruF8tFBXS7XhtE4iIXBLxhmLjP3SXpLhVf21I9Lw=="
},
"node_modules/@types/d3-transition": { "node_modules/@types/d3-transition": {
"version": "3.0.9", "version": "3.0.9",
"resolved": "https://registry.npmjs.org/@types/d3-transition/-/d3-transition-3.0.9.tgz", "resolved": "https://registry.npmjs.org/@types/d3-transition/-/d3-transition-3.0.9.tgz",
@ -2165,11 +1878,6 @@
"integrity": "sha512-dWHzHa2WqEXI/O1E9OjrocMTKJl2mSrEolh1Iomrv6U+JuNwaHXsXx9bLu5gG7BUWFIN0skIQJQ/L1rIex4X6w==", "integrity": "sha512-dWHzHa2WqEXI/O1E9OjrocMTKJl2mSrEolh1Iomrv6U+JuNwaHXsXx9bLu5gG7BUWFIN0skIQJQ/L1rIex4X6w==",
"dev": true "dev": true
}, },
"node_modules/@types/geojson": {
"version": "7946.0.16",
"resolved": "https://registry.npmjs.org/@types/geojson/-/geojson-7946.0.16.tgz",
"integrity": "sha512-6C8nqWur3j98U6+lXDfTUWIfgvZU+EumvpHKcYjujKH7woYyLj2sUmff0tRhrqM7BohUw7Pz3ZB1jj2gW9Fvmg=="
},
"node_modules/@types/json-schema": { "node_modules/@types/json-schema": {
"version": "7.0.15", "version": "7.0.15",
"resolved": "https://registry.npmjs.org/@types/json-schema/-/json-schema-7.0.15.tgz", "resolved": "https://registry.npmjs.org/@types/json-schema/-/json-schema-7.0.15.tgz",
@ -2190,7 +1898,6 @@
"version": "18.3.26", "version": "18.3.26",
"resolved": "https://registry.npmjs.org/@types/react/-/react-18.3.26.tgz", "resolved": "https://registry.npmjs.org/@types/react/-/react-18.3.26.tgz",
"integrity": "sha512-RFA/bURkcKzx/X9oumPG9Vp3D3JUgus/d0b67KB0t5S/raciymilkOa66olh78MUI92QLbEJevO7rvqU/kjwKA==", "integrity": "sha512-RFA/bURkcKzx/X9oumPG9Vp3D3JUgus/d0b67KB0t5S/raciymilkOa66olh78MUI92QLbEJevO7rvqU/kjwKA==",
"dev": true,
"dependencies": { "dependencies": {
"@types/prop-types": "*", "@types/prop-types": "*",
"csstype": "^3.0.2" "csstype": "^3.0.2"
@ -2435,6 +2142,36 @@
"vite": "^4.2.0 || ^5.0.0 || ^6.0.0 || ^7.0.0" "vite": "^4.2.0 || ^5.0.0 || ^6.0.0 || ^7.0.0"
} }
}, },
"node_modules/@xyflow/react": {
"version": "12.8.6",
"resolved": "https://registry.npmjs.org/@xyflow/react/-/react-12.8.6.tgz",
"integrity": "sha512-SksAm2m4ySupjChphMmzvm55djtgMDPr+eovPDdTnyGvShf73cvydfoBfWDFllooIQ4IaiUL5yfxHRwU0c37EA==",
"dependencies": {
"@xyflow/system": "0.0.70",
"classcat": "^5.0.3",
"zustand": "^4.4.0"
},
"peerDependencies": {
"react": ">=17",
"react-dom": ">=17"
}
},
"node_modules/@xyflow/system": {
"version": "0.0.70",
"resolved": "https://registry.npmjs.org/@xyflow/system/-/system-0.0.70.tgz",
"integrity": "sha512-PpC//u9zxdjj0tfTSmZrg3+sRbTz6kop/Amky44U2Dl51sxzDTIUfXMwETOYpmr2dqICWXBIJwXL2a9QWtX2XA==",
"dependencies": {
"@types/d3-drag": "^3.0.7",
"@types/d3-interpolate": "^3.0.4",
"@types/d3-selection": "^3.0.10",
"@types/d3-transition": "^3.0.8",
"@types/d3-zoom": "^3.0.8",
"d3-drag": "^3.0.0",
"d3-interpolate": "^3.0.1",
"d3-selection": "^3.0.0",
"d3-zoom": "^3.0.0"
}
},
"node_modules/acorn": { "node_modules/acorn": {
"version": "8.15.0", "version": "8.15.0",
"resolved": "https://registry.npmjs.org/acorn/-/acorn-8.15.0.tgz", "resolved": "https://registry.npmjs.org/acorn/-/acorn-8.15.0.tgz",
@ -4632,23 +4369,6 @@
"react-dom": ">=16.6.0" "react-dom": ">=16.6.0"
} }
}, },
"node_modules/reactflow": {
"version": "11.11.4",
"resolved": "https://registry.npmjs.org/reactflow/-/reactflow-11.11.4.tgz",
"integrity": "sha512-70FOtJkUWH3BAOsN+LU9lCrKoKbtOPnz2uq0CV2PLdNSwxTXOhCbsZr50GmZ+Rtw3jx8Uv7/vBFtCGixLfd4Og==",
"dependencies": {
"@reactflow/background": "11.3.14",
"@reactflow/controls": "11.2.14",
"@reactflow/core": "11.11.4",
"@reactflow/minimap": "11.7.14",
"@reactflow/node-resizer": "2.2.14",
"@reactflow/node-toolbar": "1.3.14"
},
"peerDependencies": {
"react": ">=17",
"react-dom": ">=17"
}
},
"node_modules/read-cache": { "node_modules/read-cache": {
"version": "1.0.0", "version": "1.0.0",
"resolved": "https://registry.npmjs.org/read-cache/-/read-cache-1.0.0.tgz", "resolved": "https://registry.npmjs.org/read-cache/-/read-cache-1.0.0.tgz",

3
package.json
View file

@ -14,18 +14,17 @@
"@citation-js/plugin-bibtex": "^0.7.18", "@citation-js/plugin-bibtex": "^0.7.18",
"@citation-js/plugin-csl": "^0.7.18", "@citation-js/plugin-csl": "^0.7.18",
"@citation-js/plugin-doi": "^0.7.18", "@citation-js/plugin-doi": "^0.7.18",
"@citation-js/plugin-pubmed": "^0.3.0",
"@citation-js/plugin-ris": "^0.7.18", "@citation-js/plugin-ris": "^0.7.18",
"@citation-js/plugin-software-formats": "^0.6.1", "@citation-js/plugin-software-formats": "^0.6.1",
"@emotion/react": "^11.11.3", "@emotion/react": "^11.11.3",
"@emotion/styled": "^11.11.0", "@emotion/styled": "^11.11.0",
"@mui/icons-material": "^5.15.10", "@mui/icons-material": "^5.15.10",
"@mui/material": "^5.15.10", "@mui/material": "^5.15.10",
"@xyflow/react": "^12.3.5",
"html-to-image": "^1.11.11", "html-to-image": "^1.11.11",
"jszip": "^3.10.1", "jszip": "^3.10.1",
"react": "^18.2.0", "react": "^18.2.0",
"react-dom": "^18.2.0", "react-dom": "^18.2.0",
"reactflow": "^11.11.0",
"zustand": "^4.5.0" "zustand": "^4.5.0"
}, },
"devDependencies": { "devDependencies": {

2
src/App.tsx
View file

@ -1,5 +1,5 @@
import { useState, useCallback, useEffect, useRef } from "react"; import { useState, useCallback, useEffect, useRef } from "react";
import { ReactFlowProvider, useReactFlow } from "reactflow"; import { ReactFlowProvider, useReactFlow } from "@xyflow/react";
import GraphEditor from "./components/Editor/GraphEditor"; import GraphEditor from "./components/Editor/GraphEditor";
import LeftPanel, { type LeftPanelRef } from "./components/Panels/LeftPanel"; import LeftPanel, { type LeftPanelRef } from "./components/Panels/LeftPanel";
import RightPanel from "./components/Panels/RightPanel"; import RightPanel from "./components/Panels/RightPanel";

60
src/components/Edges/CustomEdge.tsx
View file

@ -4,11 +4,14 @@ import {
getBezierPath, getBezierPath,
EdgeLabelRenderer, EdgeLabelRenderer,
BaseEdge, BaseEdge,
} from 'reactflow'; useNodes,
} from '@xyflow/react';
import { useGraphStore } from '../../stores/graphStore'; import { useGraphStore } from '../../stores/graphStore';
import { useSearchStore } from '../../stores/searchStore'; import { useSearchStore } from '../../stores/searchStore';
import type { RelationData } from '../../types'; import type { Relation } from '../../types';
import type { Group } from '../../types';
import LabelBadge from '../Common/LabelBadge'; import LabelBadge from '../Common/LabelBadge';
import { getFloatingEdgeParams } from '../../utils/edgeUtils';
/** /**
* CustomEdge - Represents a relation between actors in the constellation graph * CustomEdge - Represents a relation between actors in the constellation graph
@ -19,11 +22,14 @@ import LabelBadge from '../Common/LabelBadge';
* - Optional label display * - Optional label display
* - Edge type badge * - Edge type badge
* - Directional arrow markers (directed, bidirectional, undirected) * - Directional arrow markers (directed, bidirectional, undirected)
* - Floating edges for minimized groups
* *
* Usage: Automatically rendered by React Flow for edges with type='custom' * Usage: Automatically rendered by React Flow for edges with type='custom'
*/ */
const CustomEdge = ({ const CustomEdge = ({
id, id,
source,
target,
sourceX, sourceX,
sourceY, sourceY,
targetX, targetX,
@ -32,19 +38,54 @@ const CustomEdge = ({
targetPosition, targetPosition,
data, data,
selected, selected,
}: EdgeProps<RelationData>) => { }: EdgeProps<Relation>) => {
const edgeTypes = useGraphStore((state) => state.edgeTypes); const edgeTypes = useGraphStore((state) => state.edgeTypes);
const labels = useGraphStore((state) => state.labels); const labels = useGraphStore((state) => state.labels);
const { searchText, selectedRelationTypes, selectedLabels } = useSearchStore(); const { searchText, selectedRelationTypes, selectedLabels } = useSearchStore();
// Get all nodes to check if source/target are minimized groups
const nodes = useNodes();
const sourceNode = nodes.find((n) => n.id === source);
const targetNode = nodes.find((n) => n.id === target);
// Check if either endpoint is a minimized group
const sourceIsMinimizedGroup = sourceNode?.type === 'group' && (sourceNode.data as Group['data']).minimized;
const targetIsMinimizedGroup = targetNode?.type === 'group' && (targetNode.data as Group['data']).minimized;
// Calculate floating edge parameters if needed
// Only float the side(s) that connect to minimized groups
let finalSourceX = sourceX;
let finalSourceY = sourceY;
let finalTargetX = targetX;
let finalTargetY = targetY;
let finalSourcePosition = sourcePosition;
let finalTargetPosition = targetPosition;
if ((sourceIsMinimizedGroup || targetIsMinimizedGroup) && sourceNode && targetNode) {
const floatingParams = getFloatingEdgeParams(sourceNode, targetNode);
// Only use floating position for the minimized group side(s)
if (sourceIsMinimizedGroup) {
finalSourceX = floatingParams.sx;
finalSourceY = floatingParams.sy;
finalSourcePosition = floatingParams.sourcePos;
}
if (targetIsMinimizedGroup) {
finalTargetX = floatingParams.tx;
finalTargetY = floatingParams.ty;
finalTargetPosition = floatingParams.targetPos;
}
}
// Calculate the bezier path // Calculate the bezier path
const [edgePath, labelX, labelY] = getBezierPath({ const [edgePath, labelX, labelY] = getBezierPath({
sourceX, sourceX: finalSourceX,
sourceY, sourceY: finalSourceY,
sourcePosition, sourcePosition: finalSourcePosition,
targetX, targetX: finalTargetX,
targetY, targetY: finalTargetY,
targetPosition, targetPosition: finalTargetPosition,
}); });
// Find the edge type configuration // Find the edge type configuration
@ -175,6 +216,7 @@ const CustomEdge = ({
transform: `translate(-50%, -50%) translate(${labelX}px,${labelY}px)`, transform: `translate(-50%, -50%) translate(${labelX}px,${labelY}px)`,
pointerEvents: 'all', pointerEvents: 'all',
opacity: edgeOpacity, opacity: edgeOpacity,
zIndex: 1000,
}} }}
className="bg-white px-2 py-1 rounded border border-gray-300 text-xs font-medium shadow-sm" className="bg-white px-2 py-1 rounded border border-gray-300 text-xs font-medium shadow-sm"
> >

159
src/components/Editor/GraphEditor.tsx
View file

@ -1,5 +1,6 @@
import { useCallback, useMemo, useEffect, useState, useRef } from "react"; import { useCallback, useMemo, useEffect, useState, useRef } from "react";
import ReactFlow, { import {
ReactFlow,
Background, Background,
Controls, Controls,
MiniMap, MiniMap,
@ -18,8 +19,8 @@ import ReactFlow, {
useReactFlow, useReactFlow,
Viewport, Viewport,
useOnSelectionChange, useOnSelectionChange,
} from "reactflow"; } from "@xyflow/react";
import "reactflow/dist/style.css"; import "@xyflow/react/dist/style.css";
import { useGraphWithHistory } from "../../hooks/useGraphWithHistory"; import { useGraphWithHistory } from "../../hooks/useGraphWithHistory";
import { useDocumentHistory } from "../../hooks/useDocumentHistory"; import { useDocumentHistory } from "../../hooks/useDocumentHistory";
@ -38,6 +39,8 @@ import { createNode } from "../../utils/nodeUtils";
import DeleteIcon from "@mui/icons-material/Delete"; import DeleteIcon from "@mui/icons-material/Delete";
import GroupWorkIcon from "@mui/icons-material/GroupWork"; import GroupWorkIcon from "@mui/icons-material/GroupWork";
import UngroupIcon from "@mui/icons-material/CallSplit"; import UngroupIcon from "@mui/icons-material/CallSplit";
import MinimizeIcon from "@mui/icons-material/UnfoldLess";
import MaximizeIcon from "@mui/icons-material/UnfoldMore";
import { useConfirm } from "../../hooks/useConfirm"; import { useConfirm } from "../../hooks/useConfirm";
import { useGraphExport } from "../../hooks/useGraphExport"; import { useGraphExport } from "../../hooks/useGraphExport";
import type { ExportOptions } from "../../utils/graphExport"; import type { ExportOptions } from "../../utils/graphExport";
@ -92,6 +95,7 @@ const GraphEditor = ({ onNodeSelect, onEdgeSelect, onGroupSelect, onAddNodeReque
deleteNode, deleteNode,
deleteEdge, deleteEdge,
deleteGroup, deleteGroup,
toggleGroupMinimized,
} = useGraphWithHistory(); } = useGraphWithHistory();
const { pushToHistory } = useDocumentHistory(); const { pushToHistory } = useDocumentHistory();
@ -134,12 +138,92 @@ const GraphEditor = ({ onNodeSelect, onEdgeSelect, onGroupSelect, onAddNodeReque
// Combine regular nodes and group nodes for ReactFlow // Combine regular nodes and group nodes for ReactFlow
// IMPORTANT: Parent nodes (groups) MUST appear BEFORE child nodes for React Flow to process correctly // IMPORTANT: Parent nodes (groups) MUST appear BEFORE child nodes for React Flow to process correctly
const allNodes = useMemo(() => { const allNodes = useMemo(() => {
return [...(storeGroups as Node[]), ...(storeNodes as Node[])]; // Get IDs of minimized groups
const minimizedGroupIds = new Set(
storeGroups.filter((group) => group.data.minimized).map((group) => group.id)
);
// Mark actors in minimized groups as hidden instead of filtering them out
// This prevents React Flow from losing track of them
const visibleNodes = storeNodes.map((node) => {
const nodeWithParent = node as Actor & { parentId?: string };
const shouldHide = !!(nodeWithParent.parentId && minimizedGroupIds.has(nodeWithParent.parentId));
// Always explicitly set hidden (true or false) to ensure state is cleared when maximizing
return {
...node,
hidden: shouldHide,
};
});
return [...(storeGroups as Node[]), ...(visibleNodes as Node[])];
}, [storeNodes, storeGroups]); }, [storeNodes, storeGroups]);
const [nodes, setNodesState, onNodesChange] = useNodesState(allNodes); const [nodes, setNodesState, onNodesChange] = useNodesState(allNodes);
// Track the latest selection state to avoid stale closures
const latestNodesRef = useRef(nodes);
useEffect(() => {
latestNodesRef.current = nodes;
}, [nodes]);
// Reroute edges to minimized groups and filter internal edges
const visibleEdges = useMemo(() => {
// Build a map of actor -> group for actors in minimized groups
const actorToMinimizedGroup = new Map<string, string>();
storeGroups.forEach((group) => {
if (group.data.minimized) {
group.data.actorIds.forEach((actorId) => {
actorToMinimizedGroup.set(actorId, group.id);
});
}
});
// Reroute edges: if source or target is in a minimized group, redirect to the group
// Filter out edges that are internal to a minimized group (both source and target in same group)
return (storeEdges as Edge[])
.map((edge) => {
const newSource = actorToMinimizedGroup.get(edge.source) || edge.source;
const newTarget = actorToMinimizedGroup.get(edge.target) || edge.target;
const sourceChanged = newSource !== edge.source;
const targetChanged = newTarget !== edge.target;
// Filter: if both source and target are rerouted to the SAME group, hide this edge
// (it's an internal edge within a minimized group)
if (sourceChanged && targetChanged && newSource === newTarget) {
return null; // Mark for filtering
}
// Only update if source or target changed
if (sourceChanged || targetChanged) {
// Destructure to separate handle properties from the rest
const { sourceHandle, targetHandle, ...edgeWithoutHandles } = edge;
// Create new edge object, omitting handle properties when rerouting to groups
const newEdge: Edge = {
...edgeWithoutHandles,
source: newSource,
target: newTarget,
};
// Only include handle IDs if not rerouted to a group
if (!sourceChanged && sourceHandle) {
newEdge.sourceHandle = sourceHandle;
}
if (!targetChanged && targetHandle) {
newEdge.targetHandle = targetHandle;
}
return newEdge;
}
return edge;
})
.filter((edge): edge is Edge => edge !== null); // Remove null entries
}, [storeEdges, storeGroups]);
const [edges, setEdgesState, onEdgesChange] = useEdgesState( const [edges, setEdgesState, onEdgesChange] = useEdgesState(
storeEdges as Edge[], visibleEdges,
); );
// Track if a drag is in progress to capture state before drag // Track if a drag is in progress to capture state before drag
@ -168,6 +252,12 @@ const GraphEditor = ({ onNodeSelect, onEdgeSelect, onGroupSelect, onAddNodeReque
// IMPORTANT: Directly set the nodes array to avoid React Flow processing intermediate states // IMPORTANT: Directly set the nodes array to avoid React Flow processing intermediate states
// Using setNodesState with a callback can cause React Flow to process stale state // Using setNodesState with a callback can cause React Flow to process stale state
// Build selection map from the latest React Flow state using ref
const selectionMap = new Map(
latestNodesRef.current.map((node) => [node.id, node.selected])
);
if (hasPendingSelection) { if (hasPendingSelection) {
const pendingNodeId = pendingType === 'node' || pendingType === 'group' ? pendingId : null; const pendingNodeId = pendingType === 'node' || pendingType === 'group' ? pendingId : null;
@ -177,16 +267,15 @@ const GraphEditor = ({ onNodeSelect, onEdgeSelect, onGroupSelect, onAddNodeReque
}))); })));
} else { } else {
// Preserve existing selection state // Preserve existing selection state
setNodesState((currentNodes) => { // IMPORTANT: Don't spread the entire node - only copy specific properties
const selectionMap = new Map( // This ensures hidden state from allNodes is properly applied
currentNodes.map((node) => [node.id, node.selected]) setNodesState(allNodes.map((node) => {
); const currentSelected = selectionMap.get(node.id) || false;
return {
return allNodes.map((node) => ({
...node, ...node,
selected: selectionMap.get(node.id) || false, selected: currentSelected,
})); };
}); }));
} }
setEdgesState((currentEdges) => { setEdgesState((currentEdges) => {
@ -194,7 +283,7 @@ const GraphEditor = ({ onNodeSelect, onEdgeSelect, onGroupSelect, onAddNodeReque
if (hasPendingSelection) { if (hasPendingSelection) {
const pendingEdgeId = pendingType === 'edge' ? pendingId : null; const pendingEdgeId = pendingType === 'edge' ? pendingId : null;
const newEdges = (storeEdges as Edge[]).map((edge) => ({ const newEdges = visibleEdges.map((edge) => ({
...edge, ...edge,
selected: edge.id === pendingEdgeId, selected: edge.id === pendingEdgeId,
})); }));
@ -210,12 +299,12 @@ const GraphEditor = ({ onNodeSelect, onEdgeSelect, onGroupSelect, onAddNodeReque
currentEdges.map((edge) => [edge.id, edge.selected]) currentEdges.map((edge) => [edge.id, edge.selected])
); );
return (storeEdges as Edge[]).map((edge) => ({ return visibleEdges.map((edge) => ({
...edge, ...edge,
selected: selectionMap.get(edge.id) || false, selected: selectionMap.get(edge.id) || false,
})); }));
}); });
}, [allNodes, storeEdges, setNodesState, setEdgesState]); }, [allNodes, visibleEdges, setNodesState, setEdgesState]);
// Save viewport when switching documents and restore viewport for new document // Save viewport when switching documents and restore viewport for new document
useEffect(() => { useEffect(() => {
@ -435,7 +524,7 @@ const GraphEditor = ({ onNodeSelect, onEdgeSelect, onGroupSelect, onAddNodeReque
if (dragStartChanges.length > 0 && !dragInProgressRef.current) { if (dragStartChanges.length > 0 && !dragInProgressRef.current) {
dragInProgressRef.current = true; dragInProgressRef.current = true;
// Capture the state before any changes are applied // Capture the state before any changes are applied
pushToHistory("Move Actor"); pushToHistory("Move Node");
} }
// Check if a resize operation just started (resizing: true) // Check if a resize operation just started (resizing: true)
@ -478,8 +567,11 @@ const GraphEditor = ({ onNodeSelect, onEdgeSelect, onGroupSelect, onAddNodeReque
setTimeout(() => { setTimeout(() => {
// Sync to store - use callback to get fresh state // Sync to store - use callback to get fresh state
setNodesState((currentNodes) => { setNodesState((currentNodes) => {
// Filter out groups - they're stored separately // Sync both groups and actors (groups can be dragged too!)
const groupNodes = currentNodes.filter((node) => node.type === 'group');
const actorNodes = currentNodes.filter((node) => node.type !== 'group'); const actorNodes = currentNodes.filter((node) => node.type !== 'group');
setGroups(groupNodes as Group[]);
setNodes(actorNodes as Actor[]); setNodes(actorNodes as Actor[]);
return currentNodes; return currentNodes;
}); });
@ -641,7 +733,7 @@ const GraphEditor = ({ onNodeSelect, onEdgeSelect, onGroupSelect, onAddNodeReque
}, []); }, []);
// Handle right-click on pane (empty space) // Handle right-click on pane (empty space)
const handlePaneContextMenu = useCallback((event: React.MouseEvent) => { const handlePaneContextMenu = useCallback((event: React.MouseEvent | MouseEvent) => {
event.preventDefault(); event.preventDefault();
setContextMenu({ setContextMenu({
x: event.clientX, x: event.clientX,
@ -939,11 +1031,36 @@ const GraphEditor = ({ onNodeSelect, onEdgeSelect, onGroupSelect, onAddNodeReque
const sections = []; const sections = [];
// If it's a group node, show "Ungroup" option // If it's a group node, show "Minimize/Maximize" and "Ungroup" options
if (isGroup) { if (isGroup) {
const groupNode = targetNode as Group; const groupNode = targetNode as Group;
const isMinimized = groupNode.data.minimized;
sections.push({ sections.push({
actions: [ actions: [
{
label: isMinimized ? "Maximize Group" : "Minimize Group",
icon: isMinimized ? <MaximizeIcon fontSize="small" /> : <MinimizeIcon fontSize="small" />,
onClick: () => {
// Sync current React Flow dimensions before toggling
if (!isMinimized) {
// When minimizing, update the store with current dimensions first
const currentNode = nodes.find((n) => n.id === groupNode.id);
if (currentNode && currentNode.width && currentNode.height) {
setGroups(storeGroups.map((g) =>
g.id === groupNode.id
? { ...g, width: currentNode.width, height: currentNode.height }
: g
));
}
}
// Use setTimeout to ensure store update completes before toggle
setTimeout(() => {
toggleGroupMinimized(groupNode.id);
}, 0);
setContextMenu(null);
},
},
{ {
label: "Ungroup", label: "Ungroup",
icon: <UngroupIcon fontSize="small" />, icon: <UngroupIcon fontSize="small" />,

10
src/components/Nodes/CustomNode.tsx
View file

@ -1,5 +1,5 @@
import { memo, useMemo } from "react"; import { memo, useMemo } from "react";
import { Handle, Position, NodeProps, useStore } from "reactflow"; import { Handle, Position, NodeProps, useConnection } from "@xyflow/react";
import { useGraphStore } from "../../stores/graphStore"; import { useGraphStore } from "../../stores/graphStore";
import { useSearchStore } from "../../stores/searchStore"; import { useSearchStore } from "../../stores/searchStore";
import { import {
@ -7,7 +7,7 @@ import {
adjustColorBrightness, adjustColorBrightness,
} from "../../utils/colorUtils"; } from "../../utils/colorUtils";
import { getIconComponent } from "../../utils/iconUtils"; import { getIconComponent } from "../../utils/iconUtils";
import type { ActorData } from "../../types"; import type { Actor } from "../../types";
import NodeShapeRenderer from "./Shapes/NodeShapeRenderer"; import NodeShapeRenderer from "./Shapes/NodeShapeRenderer";
import LabelBadge from "../Common/LabelBadge"; import LabelBadge from "../Common/LabelBadge";
@ -22,14 +22,14 @@ import LabelBadge from "../Common/LabelBadge";
* *
* Usage: Automatically rendered by React Flow for nodes with type='custom' * Usage: Automatically rendered by React Flow for nodes with type='custom'
*/ */
const CustomNode = ({ data, selected }: NodeProps<ActorData>) => { const CustomNode = ({ data, selected }: NodeProps<Actor>) => {
const nodeTypes = useGraphStore((state) => state.nodeTypes); const nodeTypes = useGraphStore((state) => state.nodeTypes);
const labels = useGraphStore((state) => state.labels); const labels = useGraphStore((state) => state.labels);
const { searchText, selectedActorTypes, selectedLabels } = useSearchStore(); const { searchText, selectedActorTypes, selectedLabels } = useSearchStore();
// Check if any connection is being made (to show handles) // Check if any connection is being made (to show handles)
const connectionNodeId = useStore((state) => state.connectionNodeId); const connection = useConnection();
const isConnecting = !!connectionNodeId; const isConnecting = !!connection.inProgress;
// Find the node type configuration // Find the node type configuration
const nodeTypeConfig = nodeTypes.find((nt) => nt.id === data.type); const nodeTypeConfig = nodeTypes.find((nt) => nt.id === data.type);

115
src/components/Nodes/GroupNode.tsx
View file

@ -1,6 +1,6 @@
import { memo, useState, useMemo } from 'react'; import { memo, useState, useMemo } from 'react';
import { NodeProps, NodeResizer, useStore } from 'reactflow'; import { NodeProps, NodeResizer, useStore, Handle, Position } from '@xyflow/react';
import type { GroupData } from '../../types'; import type { Group } from '../../types';
import type { Actor } from '../../types'; import type { Actor } from '../../types';
/** /**
@ -16,15 +16,15 @@ import type { Actor } from '../../types';
* *
* Usage: Automatically rendered by React Flow for nodes with type='group' * Usage: Automatically rendered by React Flow for nodes with type='group'
*/ */
const GroupNode = ({ id, data, selected }: NodeProps<GroupData>) => { const GroupNode = ({ id, data, selected }: NodeProps<Group>) => {
const [isEditing, setIsEditing] = useState(false); const [isEditing, setIsEditing] = useState(false);
const [editLabel, setEditLabel] = useState(data.label); const [editLabel, setEditLabel] = useState(data.label);
// Get child nodes from React Flow store to calculate minimum dimensions // Get child nodes from React Flow store to calculate minimum dimensions
const childNodes = useStore((state) => { const childNodes = useStore((state) => {
return state.nodeInternals return state.nodeLookup
? Array.from(state.nodeInternals.values()).filter( ? Array.from(state.nodeLookup.values()).filter(
(node) => (node as Actor & { parentId?: string }).parentId === id (node) => (node as unknown as Actor & { parentId?: string }).parentId === id
) )
: []; : [];
}); });
@ -84,6 +84,109 @@ const GroupNode = ({ id, data, selected }: NodeProps<GroupData>) => {
} }
}; };
// Minimized state - render as compact rectangle
if (data.minimized) {
// Convert color to solid (remove alpha) for minimized state
const solidColor = data.color
? data.color.replace(/rgba?\((\d+),\s*(\d+),\s*(\d+)(?:,\s*[\d.]+)?\)/, 'rgb($1, $2, $3)')
: '#f0f2f5';
return (
<div
className="group-minimized"
style={{
width: '100%',
height: '100%',
display: 'flex',
alignItems: 'center',
justifyContent: 'center',
backgroundColor: solidColor,
borderRadius: '8px',
// Use separate border properties to override .react-flow__node-group dashed border
borderWidth: '2px',
borderStyle: 'solid',
borderColor: selected ? '#3b82f6' : 'rgba(0, 0, 0, 0.2)',
boxShadow: '0 2px 8px rgba(0, 0, 0, 0.1)',
cursor: 'pointer',
position: 'relative',
}}
>
{/* Connection handles for minimized groups - hidden but necessary for edge routing */}
<Handle
type="target"
position={Position.Top}
id="top"
isConnectable={false}
style={{ opacity: 0 }}
/>
<Handle
type="source"
position={Position.Top}
id="top"
isConnectable={false}
style={{ opacity: 0 }}
/>
<Handle
type="target"
position={Position.Right}
id="right"
isConnectable={false}
style={{ opacity: 0 }}
/>
<Handle
type="source"
position={Position.Right}
id="right"
isConnectable={false}
style={{ opacity: 0 }}
/>
<Handle
type="target"
position={Position.Bottom}
id="bottom"
isConnectable={false}
style={{ opacity: 0 }}
/>
<Handle
type="source"
position={Position.Bottom}
id="bottom"
isConnectable={false}
style={{ opacity: 0 }}
/>
<Handle
type="target"
position={Position.Left}
id="left"
isConnectable={false}
style={{ opacity: 0 }}
/>
<Handle
type="source"
position={Position.Left}
id="left"
isConnectable={false}
style={{ opacity: 0 }}
/>
<div
style={{
padding: '12px 20px',
textAlign: 'center',
}}
>
<div className="text-sm font-semibold text-gray-800 leading-tight">
{data.label}
</div>
<div className="text-xs text-gray-600 mt-1.5">
{data.actorIds.length} actor{data.actorIds.length !== 1 ? 's' : ''}
</div>
</div>
</div>
);
}
// Normal (maximized) state
return ( return (
<div <div
style={{ style={{

39
src/components/Panels/GroupEditorPanel.tsx
View file

@ -2,6 +2,9 @@ import { useState, useCallback, useEffect, useRef } from 'react';
import { IconButton, Tooltip } from '@mui/material'; import { IconButton, Tooltip } from '@mui/material';
import DeleteIcon from '@mui/icons-material/Delete'; import DeleteIcon from '@mui/icons-material/Delete';
import CloseIcon from '@mui/icons-material/Close'; import CloseIcon from '@mui/icons-material/Close';
import MinimizeIcon from '@mui/icons-material/UnfoldLess';
import MaximizeIcon from '@mui/icons-material/UnfoldMore';
import { useNodes } from '@xyflow/react';
import { useGraphWithHistory } from '../../hooks/useGraphWithHistory'; import { useGraphWithHistory } from '../../hooks/useGraphWithHistory';
import { useConfirm } from '../../hooks/useConfirm'; import { useConfirm } from '../../hooks/useConfirm';
import type { Group } from '../../types'; import type { Group } from '../../types';
@ -32,8 +35,9 @@ const DEFAULT_GROUP_COLORS = [
]; ];
const GroupEditorPanel = ({ selectedGroup, onClose }: Props) => { const GroupEditorPanel = ({ selectedGroup, onClose }: Props) => {
const { updateGroup, deleteGroup, removeActorFromGroup, nodes, nodeTypes } = useGraphWithHistory(); const { updateGroup, deleteGroup, removeActorFromGroup, toggleGroupMinimized, nodes, nodeTypes, setGroups, groups } = useGraphWithHistory();
const { confirm, ConfirmDialogComponent } = useConfirm(); const { confirm, ConfirmDialogComponent } = useConfirm();
const reactFlowNodes = useNodes();
const [label, setLabel] = useState(selectedGroup.data.label); const [label, setLabel] = useState(selectedGroup.data.label);
const [description, setDescription] = useState(selectedGroup.data.description || ''); const [description, setDescription] = useState(selectedGroup.data.description || '');
@ -238,6 +242,39 @@ const GroupEditorPanel = ({ selectedGroup, onClose }: Props) => {
{/* Actions */} {/* Actions */}
<div className="pt-4 border-t border-gray-200 space-y-2"> <div className="pt-4 border-t border-gray-200 space-y-2">
<button
onClick={() => {
// Sync current React Flow dimensions before toggling
if (!selectedGroup.data.minimized) {
// When minimizing, update the store with current dimensions first
const currentNode = reactFlowNodes.find((n) => n.id === selectedGroup.id);
if (currentNode && currentNode.width && currentNode.height) {
setGroups(groups.map((g) =>
g.id === selectedGroup.id
? { ...g, width: currentNode.width, height: currentNode.height }
: g
));
}
}
// Use setTimeout to ensure store update completes before toggle
setTimeout(() => {
toggleGroupMinimized(selectedGroup.id);
}, 0);
}}
className="w-full px-4 py-2 text-sm font-medium text-gray-700 bg-gray-50 rounded hover:bg-gray-100 transition-colors flex items-center justify-center space-x-2"
>
{selectedGroup.data.minimized ? (
<>
<MaximizeIcon fontSize="small" />
<span>Maximize Group</span>
</>
) : (
<>
<MinimizeIcon fontSize="small" />
<span>Minimize Group</span>
</>
)}
</button>
<button <button
onClick={handleUngroup} onClick={handleUngroup}
className="w-full px-4 py-2 text-sm font-medium text-blue-700 bg-blue-50 rounded hover:bg-blue-100 transition-colors" className="w-full px-4 py-2 text-sm font-medium text-blue-700 bg-blue-50 rounded hover:bg-blue-100 transition-colors"

10
src/components/Timeline/StateNode.tsx
View file

@ -1,17 +1,19 @@
import React from "react"; import React from "react";
import { Handle, Position, NodeProps } from "reactflow"; import { Handle, Position, NodeProps, Node } from "@xyflow/react";
import type { ConstellationState } from "../../types/timeline"; import type { ConstellationState } from "../../types/timeline";
interface StateNodeData { interface StateNodeData extends Record<string, unknown> {
state: ConstellationState; state: ConstellationState;
isCurrent: boolean; isCurrent: boolean;
onRename?: (stateId: string) => void; onRename?: (stateId: string) => void;
} }
type StateNode = Node<StateNodeData>;
/** /**
* StateNode - Custom node for timeline visualization * StateNode - Custom node for timeline visualization
*/ */
const StateNode: React.FC<NodeProps<StateNodeData>> = ({ data, selected }) => { const StateNodeComponent: React.FC<NodeProps<StateNode>> = ({ data, selected }) => {
const { state, isCurrent } = data; const { state, isCurrent } = data;
// Format date if present // Format date if present
@ -93,4 +95,4 @@ const StateNode: React.FC<NodeProps<StateNodeData>> = ({ data, selected }) => {
); );
}; };
export default StateNode; export default StateNodeComponent;

7
src/components/Timeline/TimelineView.tsx
View file

@ -1,5 +1,6 @@
import React, { useMemo, useCallback, useState } from "react"; import React, { useMemo, useCallback, useState } from "react";
import ReactFlow, { import {
ReactFlow,
Background, Background,
Controls, Controls,
NodeTypes, NodeTypes,
@ -9,8 +10,8 @@ import ReactFlow, {
useEdgesState, useEdgesState,
BackgroundVariant, BackgroundVariant,
ReactFlowProvider, ReactFlowProvider,
} from "reactflow"; } from "@xyflow/react";
import "reactflow/dist/style.css"; import "@xyflow/react/dist/style.css";
import { useTimelineStore } from "../../stores/timelineStore"; import { useTimelineStore } from "../../stores/timelineStore";
import { useWorkspaceStore } from "../../stores/workspaceStore"; import { useWorkspaceStore } from "../../stores/workspaceStore";
import StateNode from "./StateNode"; import StateNode from "./StateNode";

18
src/hooks/useDocumentHistory.ts
View file

@ -68,9 +68,9 @@ export function useDocumentHistory() {
if (currentState) { if (currentState) {
const graphStore = useGraphStore.getState(); const graphStore = useGraphStore.getState();
currentState.graph = { currentState.graph = {
nodes: graphStore.nodes as any, nodes: graphStore.nodes as unknown as typeof currentState.graph.nodes,
edges: graphStore.edges as any, edges: graphStore.edges as unknown as typeof currentState.graph.edges,
groups: graphStore.groups as any, groups: graphStore.groups as unknown as typeof currentState.graph.groups,
}; };
} }
@ -128,9 +128,9 @@ export function useDocumentHistory() {
if (currentState) { if (currentState) {
const graphStore = useGraphStore.getState(); const graphStore = useGraphStore.getState();
currentState.graph = { currentState.graph = {
nodes: graphStore.nodes as any, nodes: graphStore.nodes as unknown as typeof currentState.graph.nodes,
edges: graphStore.edges as any, edges: graphStore.edges as unknown as typeof currentState.graph.edges,
groups: graphStore.groups as any, groups: graphStore.groups as unknown as typeof currentState.graph.groups,
}; };
} }
@ -219,9 +219,9 @@ export function useDocumentHistory() {
if (currentState) { if (currentState) {
const graphStore = useGraphStore.getState(); const graphStore = useGraphStore.getState();
currentState.graph = { currentState.graph = {
nodes: graphStore.nodes as any, nodes: graphStore.nodes as unknown as typeof currentState.graph.nodes,
edges: graphStore.edges as any, edges: graphStore.edges as unknown as typeof currentState.graph.edges,
groups: graphStore.groups as any, groups: graphStore.groups as unknown as typeof currentState.graph.groups,
}; };
} }

2
src/hooks/useGraphExport.ts
View file

@ -1,5 +1,5 @@
import { useCallback } from 'react'; import { useCallback } from 'react';
import { useReactFlow } from 'reactflow'; import { useReactFlow } from '@xyflow/react';
import { exportGraphAsPNG, exportGraphAsSVG } from '../utils/graphExport'; import { exportGraphAsPNG, exportGraphAsSVG } from '../utils/graphExport';
import type { ExportOptions } from '../utils/graphExport'; import type { ExportOptions } from '../utils/graphExport';

15
src/hooks/useGraphWithHistory.ts
View file

@ -411,6 +411,20 @@ export function useGraphWithHistory() {
[graphStore, pushToHistory] [graphStore, pushToHistory]
); );
const toggleGroupMinimized = useCallback(
(groupId: string) => {
if (isRestoringRef.current) {
graphStore.toggleGroupMinimized(groupId);
return;
}
const group = graphStore.groups.find((g) => g.id === groupId);
const action = group?.data.minimized ? 'Maximize' : 'Minimize';
pushToHistory(`${action} Group: ${group?.data.label}`);
graphStore.toggleGroupMinimized(groupId);
},
[graphStore, pushToHistory]
);
/** /**
* createGroupWithActors - Atomic operation to create a group and add actors to it * createGroupWithActors - Atomic operation to create a group and add actors to it
* *
@ -470,6 +484,7 @@ export function useGraphWithHistory() {
deleteGroup, deleteGroup,
addActorToGroup, addActorToGroup,
removeActorFromGroup, removeActorFromGroup,
toggleGroupMinimized,
createGroupWithActors, createGroupWithActors,
addNodeType, addNodeType,
updateNodeType, updateNodeType,

1
src/stores/bibliographyStore.ts
View file

@ -6,7 +6,6 @@ import "@citation-js/plugin-csl";
import "@citation-js/plugin-doi"; import "@citation-js/plugin-doi";
import "@citation-js/plugin-bibtex"; import "@citation-js/plugin-bibtex";
import "@citation-js/plugin-ris"; import "@citation-js/plugin-ris";
import "@citation-js/plugin-pubmed";
import "@citation-js/plugin-software-formats"; import "@citation-js/plugin-software-formats";
import type { import type {

65
src/stores/graphStore.ts
View file

@ -1,5 +1,5 @@
import { create } from 'zustand'; import { create } from 'zustand';
import { addEdge as rfAddEdge } from 'reactflow'; import { addEdge as rfAddEdge } from '@xyflow/react';
import type { import type {
Actor, Actor,
Relation, Relation,
@ -363,6 +363,68 @@ export const useGraphStore = create<GraphStore & GraphActions>((set) => ({
}; };
}), }),
toggleGroupMinimized: (groupId: string) =>
set((state) => {
const group = state.groups.find((g) => g.id === groupId);
if (!group) return state;
const isMinimized = !group.data.minimized;
// Update group's minimized state
const updatedGroups = state.groups.map((g) => {
if (g.id !== groupId) return g;
if (isMinimized) {
// Minimizing: store original dimensions in metadata
return {
...g,
data: {
...g.data,
minimized: true,
metadata: {
...g.data.metadata,
originalWidth: g.width,
originalHeight: g.height,
},
},
width: 220,
height: 80,
// Override wrapper styles to remove padding and border
style: {
padding: 0,
border: 'none',
backgroundColor: 'white', // Solid background (inner div will cover with its own color)
},
};
} else {
// Maximizing: restore original dimensions from metadata
const originalWidth = (g.data.metadata?.originalWidth as number) || 300;
const originalHeight = (g.data.metadata?.originalHeight as number) || 200;
// Remove the stored dimensions from metadata
// eslint-disable-next-line @typescript-eslint/no-unused-vars
const { originalWidth: _, originalHeight: __, ...restMetadata } = g.data.metadata || {};
return {
...g,
data: {
...g.data,
minimized: false,
metadata: Object.keys(restMetadata).length > 0 ? restMetadata : undefined,
},
width: originalWidth,
height: originalHeight,
// Remove wrapper style overrides for maximized state
style: undefined,
};
}
});
return {
groups: updatedGroups,
};
}),
// Utility operations // Utility operations
clearGraph: () => clearGraph: () =>
set({ set({
@ -415,6 +477,7 @@ export const useGraphStore = create<GraphStore & GraphActions>((set) => ({
const nodeWithParent = node as Actor & { parentId?: string; extent?: 'parent' }; const nodeWithParent = node as Actor & { parentId?: string; extent?: 'parent' };
if (nodeWithParent.parentId && !validGroupIds.has(nodeWithParent.parentId)) { if (nodeWithParent.parentId && !validGroupIds.has(nodeWithParent.parentId)) {
// Remove orphaned parent reference // Remove orphaned parent reference
// eslint-disable-next-line @typescript-eslint/no-unused-vars
const { parentId, extent, ...cleanNode } = nodeWithParent; const { parentId, extent, ...cleanNode } = nodeWithParent;
return cleanNode as Actor; return cleanNode as Actor;
} }

33
src/stores/persistence/saver.ts
View file

@ -1,5 +1,5 @@
import type { ConstellationDocument, SerializedActor, SerializedRelation } from './types'; import type { ConstellationDocument, SerializedActor, SerializedRelation, SerializedGroup } from './types';
import type { Actor, Relation, NodeTypeConfig, EdgeTypeConfig, LabelConfig } from '../../types'; import type { Actor, Relation, Group, NodeTypeConfig, EdgeTypeConfig, LabelConfig } from '../../types';
import { STORAGE_KEYS, SCHEMA_VERSION, APP_NAME } from './constants'; import { STORAGE_KEYS, SCHEMA_VERSION, APP_NAME } from './constants';
import { safeStringify } from '../../utils/safeStringify'; import { safeStringify } from '../../utils/safeStringify';
@ -9,12 +9,17 @@ import { safeStringify } from '../../utils/safeStringify';
// Serialize actors for storage (strip React Flow internals) // Serialize actors for storage (strip React Flow internals)
export function serializeActors(actors: Actor[]): SerializedActor[] { export function serializeActors(actors: Actor[]): SerializedActor[] {
return actors.map(actor => ({ return actors.map(actor => {
id: actor.id, const actorWithParent = actor as Actor & { parentId?: string; extent?: 'parent' };
type: actor.type || 'custom', // Default to 'custom' if undefined return {
position: actor.position, id: actor.id,
data: actor.data, type: actor.type || 'custom', // Default to 'custom' if undefined
})); position: actor.position,
data: actor.data,
...(actorWithParent.parentId && { parentNode: actorWithParent.parentId }),
...(actorWithParent.extent && { extent: actorWithParent.extent }),
};
});
} }
// Serialize relations for storage (strip React Flow internals) // Serialize relations for storage (strip React Flow internals)
@ -30,6 +35,18 @@ export function serializeRelations(relations: Relation[]): SerializedRelation[]
})); }));
} }
// Serialize groups for storage (strip React Flow internals)
export function serializeGroups(groups: Group[]): SerializedGroup[] {
return groups.map(group => ({
id: group.id,
type: 'group' as const,
position: group.position,
data: group.data,
width: group.width ?? undefined,
height: group.height ?? undefined,
}));
}
// Generate unique state ID // Generate unique state ID
function generateStateId(): string { function generateStateId(): string {
return `state_${Date.now()}_${Math.random().toString(36).substr(2, 9)}`; return `state_${Date.now()}_${Math.random().toString(36).substr(2, 9)}`;

23
src/stores/workspace/useActiveDocument.ts
View file

@ -2,7 +2,7 @@ import { useEffect, useRef } from 'react';
import { useWorkspaceStore } from '../workspaceStore'; import { useWorkspaceStore } from '../workspaceStore';
import { useGraphStore } from '../graphStore'; import { useGraphStore } from '../graphStore';
import { useTimelineStore } from '../timelineStore'; import { useTimelineStore } from '../timelineStore';
import type { Actor, Relation, NodeTypeConfig, EdgeTypeConfig, LabelConfig } from '../../types'; import type { Actor, Relation, Group, NodeTypeConfig, EdgeTypeConfig, LabelConfig } from '../../types';
import { getCurrentGraphFromDocument } from '../persistence/loader'; import { getCurrentGraphFromDocument } from '../persistence/loader';
/** /**
@ -27,11 +27,13 @@ export function useActiveDocument() {
const setNodes = useGraphStore((state) => state.setNodes); const setNodes = useGraphStore((state) => state.setNodes);
const setEdges = useGraphStore((state) => state.setEdges); const setEdges = useGraphStore((state) => state.setEdges);
const setGroups = useGraphStore((state) => state.setGroups);
const setNodeTypes = useGraphStore((state) => state.setNodeTypes); const setNodeTypes = useGraphStore((state) => state.setNodeTypes);
const setEdgeTypes = useGraphStore((state) => state.setEdgeTypes); const setEdgeTypes = useGraphStore((state) => state.setEdgeTypes);
const setLabels = useGraphStore((state) => state.setLabels); const setLabels = useGraphStore((state) => state.setLabels);
const graphNodes = useGraphStore((state) => state.nodes); const graphNodes = useGraphStore((state) => state.nodes);
const graphEdges = useGraphStore((state) => state.edges); const graphEdges = useGraphStore((state) => state.edges);
const graphGroups = useGraphStore((state) => state.groups);
const graphNodeTypes = useGraphStore((state) => state.nodeTypes); const graphNodeTypes = useGraphStore((state) => state.nodeTypes);
const graphEdgeTypes = useGraphStore((state) => state.edgeTypes); const graphEdgeTypes = useGraphStore((state) => state.edgeTypes);
const graphLabels = useGraphStore((state) => state.labels); const graphLabels = useGraphStore((state) => state.labels);
@ -48,6 +50,7 @@ export function useActiveDocument() {
documentId: string | null; documentId: string | null;
nodes: Actor[]; nodes: Actor[];
edges: Relation[]; edges: Relation[];
groups: Group[];
nodeTypes: NodeTypeConfig[]; nodeTypes: NodeTypeConfig[];
edgeTypes: EdgeTypeConfig[]; edgeTypes: EdgeTypeConfig[];
labels: LabelConfig[]; labels: LabelConfig[];
@ -55,6 +58,7 @@ export function useActiveDocument() {
documentId: null, documentId: null,
nodes: [], nodes: [],
edges: [], edges: [],
groups: [],
nodeTypes: [], nodeTypes: [],
edgeTypes: [], edgeTypes: [],
labels: [], labels: [],
@ -78,6 +82,7 @@ export function useActiveDocument() {
setNodes(currentGraph.nodes as never[]); setNodes(currentGraph.nodes as never[]);
setEdges(currentGraph.edges as never[]); setEdges(currentGraph.edges as never[]);
setGroups(currentGraph.groups as never[]);
setNodeTypes(currentGraph.nodeTypes as never[]); setNodeTypes(currentGraph.nodeTypes as never[]);
setEdgeTypes(currentGraph.edgeTypes as never[]); setEdgeTypes(currentGraph.edgeTypes as never[]);
setLabels(activeDocument.labels || []); setLabels(activeDocument.labels || []);
@ -87,6 +92,7 @@ export function useActiveDocument() {
documentId: activeDocumentId, documentId: activeDocumentId,
nodes: currentGraph.nodes as Actor[], nodes: currentGraph.nodes as Actor[],
edges: currentGraph.edges as Relation[], edges: currentGraph.edges as Relation[],
groups: currentGraph.groups as Group[],
nodeTypes: currentGraph.nodeTypes as NodeTypeConfig[], nodeTypes: currentGraph.nodeTypes as NodeTypeConfig[],
edgeTypes: currentGraph.edgeTypes as EdgeTypeConfig[], edgeTypes: currentGraph.edgeTypes as EdgeTypeConfig[],
labels: activeDocument.labels || [], labels: activeDocument.labels || [],
@ -106,6 +112,7 @@ export function useActiveDocument() {
setNodes([]); setNodes([]);
setEdges([]); setEdges([]);
setGroups([]);
setLabels([]); setLabels([]);
// Note: We keep nodeTypes and edgeTypes so they're available for new documents // Note: We keep nodeTypes and edgeTypes so they're available for new documents
@ -114,6 +121,7 @@ export function useActiveDocument() {
documentId: null, documentId: null,
nodes: [], nodes: [],
edges: [], edges: [],
groups: [],
nodeTypes: [], nodeTypes: [],
edgeTypes: [], edgeTypes: [],
labels: [], labels: [],
@ -124,7 +132,7 @@ export function useActiveDocument() {
isLoadingRef.current = false; isLoadingRef.current = false;
}, 100); }, 100);
} }
}, [activeDocumentId, activeDocument, documents, setNodes, setEdges, setNodeTypes, setEdgeTypes, setLabels]); }, [activeDocumentId, activeDocument, documents, setNodes, setEdges, setGroups, setNodeTypes, setEdgeTypes, setLabels]);
// Save graphStore changes back to workspace (debounced via workspace) // Save graphStore changes back to workspace (debounced via workspace)
useEffect(() => { useEffect(() => {
@ -151,11 +159,12 @@ export function useActiveDocument() {
} }
// Mark document as dirty when graph changes // Mark document as dirty when graph changes
// NOTE: We only track nodes/edges here. Type changes are handled by workspaceStore's // NOTE: We only track nodes/edges/groups here. Type changes are handled by workspaceStore's
// type management actions, which directly mark the document as dirty. // type management actions, which directly mark the document as dirty.
const hasChanges = const hasChanges =
JSON.stringify(graphNodes) !== JSON.stringify(lastSyncedStateRef.current.nodes) || JSON.stringify(graphNodes) !== JSON.stringify(lastSyncedStateRef.current.nodes) ||
JSON.stringify(graphEdges) !== JSON.stringify(lastSyncedStateRef.current.edges); JSON.stringify(graphEdges) !== JSON.stringify(lastSyncedStateRef.current.edges) ||
JSON.stringify(graphGroups) !== JSON.stringify(lastSyncedStateRef.current.groups);
if (hasChanges) { if (hasChanges) {
console.log(`Document ${activeDocumentId} has changes, marking as dirty`); console.log(`Document ${activeDocumentId} has changes, marking as dirty`);
@ -166,15 +175,17 @@ export function useActiveDocument() {
documentId: activeDocumentId, documentId: activeDocumentId,
nodes: graphNodes as Actor[], nodes: graphNodes as Actor[],
edges: graphEdges as Relation[], edges: graphEdges as Relation[],
groups: graphGroups as Group[],
nodeTypes: graphNodeTypes as NodeTypeConfig[], nodeTypes: graphNodeTypes as NodeTypeConfig[],
edgeTypes: graphEdgeTypes as EdgeTypeConfig[], edgeTypes: graphEdgeTypes as EdgeTypeConfig[],
labels: graphLabels as LabelConfig[], labels: graphLabels as LabelConfig[],
}; };
// Update the timeline's current state with the new graph data (nodes and edges only) // Update the timeline's current state with the new graph data (nodes, edges, and groups)
useTimelineStore.getState().saveCurrentGraph({ useTimelineStore.getState().saveCurrentGraph({
nodes: graphNodes as never[], nodes: graphNodes as never[],
edges: graphEdges as never[], edges: graphEdges as never[],
groups: graphGroups as never[],
}); });
// Debounced save // Debounced save
@ -184,7 +195,7 @@ export function useActiveDocument() {
return () => clearTimeout(timeoutId); return () => clearTimeout(timeoutId);
} }
}, [graphNodes, graphEdges, graphNodeTypes, graphEdgeTypes, graphLabels, activeDocumentId, activeDocument, documents, markDocumentDirty, saveDocument]); }, [graphNodes, graphEdges, graphGroups, graphNodeTypes, graphEdgeTypes, graphLabels, activeDocumentId, activeDocument, documents, markDocumentDirty, saveDocument]);
// Memory management: Unload inactive documents after timeout // Memory management: Unload inactive documents after timeout
useEffect(() => { useEffect(() => {

8
src/styles/index.css
View file

@ -49,6 +49,7 @@ code {
background-color: rgba(240, 242, 245, 0.5); background-color: rgba(240, 242, 245, 0.5);
border: 2px dashed rgba(100, 116, 139, 0.4); border: 2px dashed rgba(100, 116, 139, 0.4);
border-radius: 8px; border-radius: 8px;
padding: 10px; /* Default padding for maximized groups */
} }
.react-flow__node-group.selected { .react-flow__node-group.selected {
@ -56,6 +57,13 @@ code {
border: 2px solid rgba(59, 130, 246, 0.6); border: 2px solid rgba(59, 130, 246, 0.6);
} }
/* Hide outer border/background/padding for minimized groups (inner div handles styling) */
.react-flow__node-group:has(.group-minimized) {
background-color: transparent !important;
border: none !important;
padding: 0 !important;
}
/* Smooth transitions for interactive elements */ /* Smooth transitions for interactive elements */
button { button {
transition: all 0.2s ease-in-out; transition: all 0.2s ease-in-out;

10
src/types/index.ts
View file

@ -1,7 +1,7 @@
import { Node, Edge } from 'reactflow'; import { Node, Edge } from '@xyflow/react';
// Node/Actor Types // Node/Actor Types
export interface ActorData { export interface ActorData extends Record<string, unknown> {
label: string; label: string;
type: string; type: string;
description?: string; description?: string;
@ -15,7 +15,7 @@ export type Actor = Node<ActorData>;
// Edge/Relation Types // Edge/Relation Types
export type EdgeDirectionality = 'directed' | 'bidirectional' | 'undirected'; export type EdgeDirectionality = 'directed' | 'bidirectional' | 'undirected';
export interface RelationData { export interface RelationData extends Record<string, unknown> {
label?: string; label?: string;
type: string; type: string;
directionality?: EdgeDirectionality; directionality?: EdgeDirectionality;
@ -67,11 +67,12 @@ export interface LabelConfig {
} }
// Group Types // Group Types
export interface GroupData { export interface GroupData extends Record<string, unknown> {
label: string; label: string;
description?: string; description?: string;
color: string; color: string;
actorIds: string[]; actorIds: string[];
minimized?: boolean;
metadata?: Record<string, unknown>; metadata?: Record<string, unknown>;
} }
@ -118,6 +119,7 @@ export interface GraphActions {
deleteGroup: (id: string, ungroupActors?: boolean) => void; deleteGroup: (id: string, ungroupActors?: boolean) => void;
addActorToGroup: (actorId: string, groupId: string) => void; addActorToGroup: (actorId: string, groupId: string) => void;
removeActorFromGroup: (actorId: string, groupId: string) => void; removeActorFromGroup: (actorId: string, groupId: string) => void;
toggleGroupMinimized: (groupId: string) => void;
clearGraph: () => void; clearGraph: () => void;
setNodes: (nodes: Actor[]) => void; setNodes: (nodes: Actor[]) => void;
setEdges: (edges: Relation[]) => void; setEdges: (edges: Relation[]) => void;

83
src/utils/edgeUtils.ts
View file

@ -1,4 +1,6 @@
import type { Relation, RelationData } from '../types'; import type { Relation, RelationData } from '../types';
import type { Node } from '@xyflow/react';
import { Position } from '@xyflow/react';
/** /**
* Generates a unique ID for edges * Generates a unique ID for edges
@ -7,6 +9,87 @@ export const generateEdgeId = (source: string, target: string): string => {
return `edge_${source}_${target}_${Date.now()}`; return `edge_${source}_${target}_${Date.now()}`;
}; };
/**
* Calculate the intersection point between a line and a rectangle
* Used for floating edges to connect at the closest point on the node
*/
function getNodeIntersection(intersectionNode: Node, targetNode: Node) {
const {
width: intersectionNodeWidth,
height: intersectionNodeHeight,
position: intersectionNodePosition,
} = intersectionNode;
const targetPosition = targetNode.position;
const w = (intersectionNodeWidth ?? 0) / 2;
const h = (intersectionNodeHeight ?? 0) / 2;
const x2 = intersectionNodePosition.x + w;
const y2 = intersectionNodePosition.y + h;
const x1 = targetPosition.x + (targetNode.width ?? 0) / 2;
const y1 = targetPosition.y + (targetNode.height ?? 0) / 2;
const xx1 = (x1 - x2) / (2 * w) - (y1 - y2) / (2 * h);
const yy1 = (x1 - x2) / (2 * w) + (y1 - y2) / (2 * h);
const a = 1 / (Math.abs(xx1) + Math.abs(yy1));
const xx3 = a * xx1;
const yy3 = a * yy1;
const x = w * (xx3 + yy3) + x2;
const y = h * (-xx3 + yy3) + y2;
return { x, y };
}
/**
* Get the position (top, right, bottom, left) of the handle based on the intersection point
*/
function getEdgePosition(node: Node, intersectionPoint: { x: number; y: number }) {
const n = { ...node.position, ...node };
const nx = Math.round(n.x);
const ny = Math.round(n.y);
const px = Math.round(intersectionPoint.x);
const py = Math.round(intersectionPoint.y);
const width = node.width ?? 0;
const height = node.height ?? 0;
if (px <= nx + 1) {
return Position.Left;
}
if (px >= nx + width - 1) {
return Position.Right;
}
if (py <= ny + 1) {
return Position.Top;
}
if (py >= ny + height - 1) {
return Position.Bottom;
}
return Position.Top;
}
/**
* Calculate the parameters for a floating edge between two nodes
* Returns source/target coordinates and positions for dynamic edge routing
*/
export function getFloatingEdgeParams(sourceNode: Node, targetNode: Node) {
const sourceIntersectionPoint = getNodeIntersection(sourceNode, targetNode);
const targetIntersectionPoint = getNodeIntersection(targetNode, sourceNode);
const sourcePos = getEdgePosition(sourceNode, sourceIntersectionPoint);
const targetPos = getEdgePosition(targetNode, targetIntersectionPoint);
return {
sx: sourceIntersectionPoint.x,
sy: sourceIntersectionPoint.y,
tx: targetIntersectionPoint.x,
ty: targetIntersectionPoint.y,
sourcePos,
targetPos,
};
}
/** /**
* Creates a new relation/edge with default properties * Creates a new relation/edge with default properties
*/ */

4
src/utils/graphExport.ts
View file

@ -1,6 +1,6 @@
import { toPng, toSvg } from 'html-to-image'; import { toPng, toSvg } from 'html-to-image';
import { getNodesBounds } from 'reactflow'; import { getNodesBounds } from '@xyflow/react';
import type { Node } from 'reactflow'; import type { Node } from '@xyflow/react';
/** /**
* Graph Export Utilities * Graph Export Utilities