f1d51b8cc8
- Foldable left panel (user profile) and right panel (task details) - Clicking a task in the list or graph node selects it and shows details - Both views (task list + graph) always mounted via absolute inset-0 for correct canvas dimensions; tabs toggle visibility with opacity - Graph node selection animation: other nodes repel outward (charge -600), then selected node smoothly slides to center (500ms cubic ease-out), then charge restores to -120 and graph stabilizes - Graph re-fits on tab switch and panel resize via ResizeObserver - Fix UUID string IDs throughout (backend returns UUIDs, not integers) - Add TaskDetailPanel, UserPanel components - Add CLAUDE.md project documentation Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
69 lines
2.0 KiB
HTML
69 lines
2.0 KiB
HTML
<head>
|
|
<style> body { margin: 0; } </style>
|
|
|
|
<script src="//cdn.jsdelivr.net/npm/force-graph"></script>
|
|
<!--<script src="../../dist/force-graph.js"></script>-->
|
|
</head>
|
|
|
|
<body>
|
|
<div id="graph"></div>
|
|
|
|
<script type="module">
|
|
import { csvParse } from 'https://esm.sh/d3-dsv';
|
|
import { forceCollide } from 'https://esm.sh/d3-force';
|
|
import { GUI } from 'https://esm.sh/dat.gui';
|
|
|
|
// controls
|
|
const controls = { 'DAG Orientation': 'td'};
|
|
const gui = new GUI();
|
|
gui.add(controls, 'DAG Orientation', ['td', 'bu', 'lr', 'rl', 'radialout', 'radialin', null])
|
|
.onChange(orientation => graph && graph.dagMode(orientation));
|
|
|
|
// graph config
|
|
const NODE_REL_SIZE = 1;
|
|
const graph = new ForceGraph(document.getElementById('graph'))
|
|
.dagMode('td')
|
|
.dagLevelDistance(300)
|
|
.backgroundColor('#101020')
|
|
.linkColor(() => 'rgba(255,255,255,0.2)')
|
|
.nodeRelSize(NODE_REL_SIZE)
|
|
.nodeId('path')
|
|
.nodeVal(node => 100 / (node.level + 1))
|
|
.nodeLabel('path')
|
|
.nodeAutoColorBy('module')
|
|
.linkDirectionalParticles(2)
|
|
.linkDirectionalParticleWidth(2)
|
|
.d3Force('collision', forceCollide(node => Math.sqrt(100 / (node.level + 1)) * NODE_REL_SIZE))
|
|
.d3VelocityDecay(0.3);
|
|
|
|
fetch('../datasets/d3-dependencies.csv')
|
|
.then(r => r.text())
|
|
.then(csvParse)
|
|
.then(data => {
|
|
const nodes = [], links = [];
|
|
data.forEach(({ size, path }) => {
|
|
const levels = path.split('/'),
|
|
level = levels.length - 1,
|
|
module = level > 0 ? levels[1] : null,
|
|
leaf = levels.pop(),
|
|
parent = levels.join('/');
|
|
|
|
const node = {
|
|
path,
|
|
leaf,
|
|
module,
|
|
size: +size || 20,
|
|
level
|
|
};
|
|
|
|
nodes.push(node);
|
|
|
|
if (parent) {
|
|
links.push({source: parent, target: path, targetNode: node});
|
|
}
|
|
});
|
|
|
|
graph.graphData({ nodes, links });
|
|
});
|
|
</script>
|
|
</body> |