|
| 1 | +import { useEffect, useRef } from 'react'; |
| 2 | +import * as d3 from 'd3'; |
| 3 | + |
| 4 | +interface NodeData extends d3.SimulationNodeDatum { |
| 5 | + id: string | number; |
| 6 | + label: string; |
| 7 | +} |
| 8 | + |
| 9 | +interface LinkData extends d3.SimulationLinkDatum<NodeData> { |
| 10 | + source: string | number | NodeData; // Can be a string, number, or NodeData |
| 11 | + target: string | number | NodeData; |
| 12 | + type: string; |
| 13 | +} |
| 14 | + |
| 15 | +const backendUrl = import.meta.env.VITE_BACKEND_URL || 'http://localhost:5000'; |
| 16 | + |
| 17 | +const Relations = () => { |
| 18 | + const username = localStorage.getItem('devhub_username'); |
| 19 | + const d3Container = useRef<HTMLDivElement>(null); |
| 20 | + |
| 21 | + useEffect(() => { |
| 22 | + if (!username) { |
| 23 | + console.error("Username not found in localStorage"); |
| 24 | + return; |
| 25 | + } |
| 26 | + |
| 27 | + // Fetch the user relations data from the backend |
| 28 | + fetch(`${backendUrl}/profile/relations?username=${username}`) |
| 29 | + .then(response => { |
| 30 | + if (!response.ok) { |
| 31 | + throw new Error('Network response was not ok'); |
| 32 | + } |
| 33 | + return response.json(); |
| 34 | + }) |
| 35 | + .then((data: { nodes: NodeData[], links: LinkData[] }) => { |
| 36 | + // Remove any existing SVG if it exists to avoid duplication |
| 37 | + d3.select(d3Container.current).select('svg').remove(); |
| 38 | + |
| 39 | + // Get the parent element's dimensions dynamically |
| 40 | + const container = d3Container.current; |
| 41 | + const width = container?.getBoundingClientRect().width || 800; |
| 42 | + const height = container?.getBoundingClientRect().height || 600; |
| 43 | + |
| 44 | + // Create the SVG element inside the div |
| 45 | + const svg = d3.select(container).append('svg') |
| 46 | + .attr('width', width) |
| 47 | + .attr('height', height); |
| 48 | + |
| 49 | + // Initialize the force simulation with nodes |
| 50 | + const simulation = d3.forceSimulation<NodeData>(data.nodes) |
| 51 | + .force('link', d3.forceLink<NodeData, LinkData>(data.links) |
| 52 | + .id((d: NodeData) => d.id.toString()) // Ensure id is a string |
| 53 | + .distance(150)) // You can control the distance between nodes |
| 54 | + .force('charge', d3.forceManyBody()) // Compatible after extending NodeData |
| 55 | + .force('center', d3.forceCenter(width / 2, height / 2)); |
| 56 | + |
| 57 | + const link = svg.append('g') |
| 58 | + .selectAll('line') |
| 59 | + .data(data.links) |
| 60 | + .enter().append('line') |
| 61 | + .attr('stroke-width', 2) |
| 62 | + .attr('stroke', '#999'); |
| 63 | + |
| 64 | + // Add labels to links (relationship type) |
| 65 | + const linkText = svg.append('g') |
| 66 | + .selectAll('text') |
| 67 | + .data(data.links) |
| 68 | + .enter().append('text') |
| 69 | + .attr('text-anchor', 'middle') |
| 70 | + .attr('fill', '#666') |
| 71 | + .style('font-size', '14px') // Larger font for better visibility |
| 72 | + .text((d: LinkData) => d.type); |
| 73 | + |
| 74 | + // Create nodes with increased size |
| 75 | + const node = svg.append('g') |
| 76 | + .selectAll('circle') |
| 77 | + .data(data.nodes) |
| 78 | + .enter().append('circle') |
| 79 | + .attr('r', 20) // Increased radius for bigger nodes |
| 80 | + .attr('fill', '#69b3a2') |
| 81 | + .call( |
| 82 | + d3.drag<SVGCircleElement, NodeData>() // Type the drag behavior with <SVGCircleElement, NodeData> |
| 83 | + .on('start', dragstarted) |
| 84 | + .on('drag', dragged) |
| 85 | + .on('end', dragended) |
| 86 | + ); |
| 87 | + |
| 88 | + // Add node labels |
| 89 | + const nodeLabels = svg.append('g') |
| 90 | + .selectAll('text') |
| 91 | + .data(data.nodes) |
| 92 | + .enter().append('text') |
| 93 | + .attr('dy', -25) // Position label above node |
| 94 | + .attr('text-anchor', 'middle') |
| 95 | + .attr('fill', '#333') |
| 96 | + .style('font-size', '14px') // Adjust font size as needed |
| 97 | + .text((d: NodeData) => d.label); |
| 98 | + |
| 99 | + node.append('title').text((d: NodeData) => d.id.toString()); |
| 100 | + |
| 101 | + |
| 102 | + // Update positions on each tick |
| 103 | + simulation.on('tick', () => { |
| 104 | + link.attr('x1', (d: LinkData) => ((d.source as NodeData).x!)) |
| 105 | + .attr('y1', (d: LinkData) => ((d.source as NodeData).y!)) |
| 106 | + .attr('x2', (d: LinkData) => ((d.target as NodeData).x!)) |
| 107 | + .attr('y2', (d: LinkData) => ((d.target as NodeData).y!)); |
| 108 | + |
| 109 | + node.attr('cx', (d: NodeData) => d.x!) |
| 110 | + .attr('cy', (d: NodeData) => d.y!); |
| 111 | + |
| 112 | + // Update node labels position |
| 113 | + nodeLabels.attr('x', (d: NodeData) => d.x!) |
| 114 | + .attr('y', (d: NodeData) => d.y!); |
| 115 | + |
| 116 | + // Update link labels position |
| 117 | + linkText.attr('x', (d: LinkData) => { |
| 118 | + const x1 = (d.source as NodeData).x!; |
| 119 | + const x2 = (d.target as NodeData).x!; |
| 120 | + return (x1 + x2) / 2; // Position at the midpoint of the link |
| 121 | + }) |
| 122 | + .attr('y', (d: LinkData) => { |
| 123 | + const y1 = (d.source as NodeData).y!; |
| 124 | + const y2 = (d.target as NodeData).y!; |
| 125 | + return (y1 + y2) / 2; // Position at the midpoint of the link |
| 126 | + }); |
| 127 | + }); |
| 128 | + |
| 129 | + function dragstarted(event: d3.D3DragEvent<SVGCircleElement, NodeData, unknown>, d: NodeData) { |
| 130 | + if (!event.active) simulation.alphaTarget(0.3).restart(); |
| 131 | + d.fx = d.x; |
| 132 | + d.fy = d.y; |
| 133 | + } |
| 134 | + |
| 135 | + function dragged(event: d3.D3DragEvent<SVGCircleElement, NodeData, unknown>, d: NodeData) { |
| 136 | + d.fx = event.x; |
| 137 | + d.fy = event.y; |
| 138 | + } |
| 139 | + |
| 140 | + function dragended(event: d3.D3DragEvent<SVGCircleElement, NodeData, unknown>, d: NodeData) { |
| 141 | + if (!event.active) simulation.alphaTarget(0); |
| 142 | + d.fx = null; |
| 143 | + d.fy = null; |
| 144 | + } |
| 145 | + }) |
| 146 | + .catch(error => { |
| 147 | + console.error('Error fetching user relations:', error); |
| 148 | + }); |
| 149 | + }, [username]); |
| 150 | + |
| 151 | + return ( |
| 152 | + <div style={{ width: '100%', height: '100%' }}> |
| 153 | + <div ref={d3Container} style={{ width: '100%', height: '100%' }}></div> |
| 154 | + </div> |
| 155 | + ); |
| 156 | +}; |
| 157 | + |
| 158 | +export default Relations; |
0 commit comments