Skip to content

Commit 5400848

Browse files
JoviDeCroockJoviDeCroock
committed
Formatting
1 parent 5ae1bd7 commit 5400848

4 files changed

Lines changed: 101 additions & 117 deletions

File tree

‎docs/demos/index.tsx‎

Lines changed: 0 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -70,11 +70,6 @@ function Counter() {
7070
);
7171
}
7272

73-
function Test(props: any) {
74-
const value = props.sig.value;
75-
return { value };
76-
}
77-
7873
function Sum() {
7974
const a = useSignal(0, { name: "a" });
8075
const b = useSignal(0, { name: "b" });
@@ -83,8 +78,6 @@ function Sum() {
8378

8479
return (
8580
<div class="card">
86-
<Test sig={a} />
87-
<Test sig={b} />
8881
<p>
8982
<label>
9083
A:{" "}

‎extension/src/components/Graph.tsx‎

Lines changed: 88 additions & 101 deletions
Original file line numberDiff line numberDiff line change
@@ -90,86 +90,35 @@ export function GraphVisualization({
9090
}
9191
}
9292

93-
// Group nodes by component
94-
const componentGroups = new Map<string, GraphNode[]>();
95-
const ungroupedNodes: GraphNode[] = [];
96-
nodes.forEach(node => {
97-
if (node.componentName) {
98-
if (!componentGroups.has(node.componentName)) {
99-
componentGroups.set(node.componentName, []);
100-
}
101-
componentGroups.get(node.componentName)!.push(node);
102-
} else {
103-
ungroupedNodes.push(node);
93+
// Simple depth-based layout
94+
const allNodes = Array.from(nodes.values());
95+
const nodeSpacing = 120; // More spacing between nodes
96+
const depthSpacing = 250; // Distance between depth levels
97+
const startX = 100;
98+
const startY = 80;
99+
100+
// Group nodes by depth
101+
const nodesByDepth = new Map<number, GraphNode[]>();
102+
allNodes.forEach(node => {
103+
if (!nodesByDepth.has(node.depth)) {
104+
nodesByDepth.set(node.depth, []);
104105
}
106+
nodesByDepth.get(node.depth)!.push(node);
105107
});
106108

107-
// Layout constants
108-
const nodeSpacing = 80;
109-
const componentSpacing = 60;
110-
const depthSpacing = 300;
111-
const startX = 150;
112-
const startY = 100;
113-
let currentY = startY;
114-
115-
const components: ComponentGroup[] = [];
116-
const allNodes: GraphNode[] = [];
117-
118-
// Layout component groups
119-
componentGroups.forEach((componentNodes, componentName) => {
120-
const nodesByDepth = new Map<number, GraphNode[]>();
121-
componentNodes.forEach(node => {
122-
if (!nodesByDepth.has(node.depth)) nodesByDepth.set(node.depth, []);
123-
nodesByDepth.get(node.depth)!.push(node);
124-
});
125-
126-
const minDepth = Math.min(...componentNodes.map(n => n.depth));
127-
const maxDepth = Math.max(...componentNodes.map(n => n.depth));
128-
const componentWidth = (maxDepth - minDepth + 1) * depthSpacing + 100;
129-
130-
let componentMinY = currentY;
131-
let componentMaxY = currentY;
132-
133-
nodesByDepth.forEach((depthNodes, depth) => {
134-
depthNodes.forEach((node, index) => {
135-
node.x = startX + depth * depthSpacing;
136-
node.y = currentY + index * nodeSpacing;
137-
componentMaxY = Math.max(componentMaxY, node.y);
138-
});
139-
currentY = componentMaxY + nodeSpacing;
140-
});
141-
142-
const componentHeight = componentMaxY - componentMinY + 80;
143-
components.push({
144-
id: componentName,
145-
name: componentName,
146-
x: startX + minDepth * depthSpacing - 40,
147-
y: componentMinY - 40,
148-
width: componentWidth,
149-
height: componentHeight,
150-
nodes: componentNodes,
151-
});
152-
allNodes.push(...componentNodes);
153-
currentY = componentMaxY + componentSpacing;
154-
});
109+
// Layout nodes by depth, centering each depth level vertically
110+
const maxDepth = Math.max(...allNodes.map(n => n.depth));
111+
nodesByDepth.forEach((depthNodes, depth) => {
112+
const depthHeight = (depthNodes.length - 1) * nodeSpacing;
113+
const depthStartY = startY + maxDepth * 100 - depthHeight / 2; // Center this depth level
155114

156-
// Layout ungrouped nodes
157-
const ungroupedByDepth = new Map<number, GraphNode[]>();
158-
ungroupedNodes.forEach(node => {
159-
if (!ungroupedByDepth.has(node.depth))
160-
ungroupedByDepth.set(node.depth, []);
161-
ungroupedByDepth.get(node.depth)!.push(node);
162-
});
163-
ungroupedByDepth.forEach((depthNodes, depth) => {
164115
depthNodes.forEach((node, index) => {
165116
node.x = startX + depth * depthSpacing;
166-
node.y = currentY + index * nodeSpacing;
117+
node.y = depthStartY + index * nodeSpacing;
167118
});
168-
if (depthNodes.length > 0) {
169-
currentY += (depthNodes.length - 1) * nodeSpacing + componentSpacing;
170-
}
171119
});
172-
allNodes.push(...ungroupedNodes);
120+
121+
const components: ComponentGroup[] = []; // Remove component grouping for now
173122

174123
return {
175124
nodes: allNodes,
@@ -192,10 +141,20 @@ export function GraphVisualization({
192141
);
193142
}
194143

144+
// Calculate SVG dimensions based on nodes
145+
const svgWidth = Math.max(800, ...graphData.value.nodes.map(n => n.x + 100));
146+
const svgHeight = Math.max(600, ...graphData.value.nodes.map(n => n.y + 100));
147+
195148
return (
196149
<div className="graph-container">
197150
<div className="graph-content">
198-
<svg ref={svgRef} className="graph-svg">
151+
<svg
152+
ref={svgRef}
153+
className="graph-svg"
154+
width={svgWidth}
155+
height={svgHeight}
156+
viewBox={`0 0 ${svgWidth} ${svgHeight}`}
157+
>
199158
{/* Arrow marker definition */}
200159
<defs>
201160
<marker
@@ -222,44 +181,72 @@ export function GraphVisualization({
222181

223182
if (!sourceNode || !targetNode) return null;
224183

184+
// Use curved paths for better visual flow
185+
const sourceX = sourceNode.x + 25;
186+
const sourceY = sourceNode.y;
187+
const targetX = targetNode.x - 25;
188+
const targetY = targetNode.y;
189+
190+
const midX = sourceX + (targetX - sourceX) * 0.6;
191+
const pathData = `M ${sourceX} ${sourceY} Q ${midX} ${sourceY} ${targetX} ${targetY}`;
192+
225193
return (
226-
<line
194+
<path
227195
key={`link-${index}`}
228196
className="graph-link"
229-
x1={sourceNode.x + 30}
230-
y1={sourceNode.y}
231-
x2={targetNode.x - 30}
232-
y2={targetNode.y}
197+
d={pathData}
198+
fill="none"
199+
stroke="#666"
200+
strokeWidth="2"
201+
markerEnd="url(#arrowhead)"
233202
/>
234203
);
235204
})}
236205
</g>
237206

238207
{/* Nodes */}
239208
<g className="nodes">
240-
{graphData.value.nodes.map(node => (
241-
<g key={node.id} className="graph-node-group">
242-
<circle
243-
className={`graph-node ${node.type}`}
244-
cx={node.x}
245-
cy={node.y}
246-
r="25"
247-
/>
248-
<text
249-
className="graph-text"
250-
x={node.x}
251-
y={node.y}
252-
textLength={
253-
8 * (node.name.length > 8 ? 11 : node.name.length)
254-
}
255-
lengthAdjust="spacingAndGlyphs"
256-
>
257-
{node.name.length > 8
258-
? node.name.slice(0, 8) + "..."
259-
: node.name}
260-
</text>
261-
</g>
262-
))}
209+
{graphData.value.nodes.map(node => {
210+
const radius = node.type === "component" ? 35 : 25;
211+
const displayName =
212+
node.name.length > 10
213+
? node.name.slice(0, 10) + "..."
214+
: node.name;
215+
216+
return (
217+
<g key={node.id} className="graph-node-group">
218+
{node.type === "component" ? (
219+
// Rectangular shape for components
220+
<rect
221+
className={`graph-node ${node.type}`}
222+
x={node.x - radius}
223+
y={node.y - 20}
224+
width={radius * 2}
225+
height={40}
226+
rx="8"
227+
/>
228+
) : (
229+
// Circular shape for signals/computed/effects
230+
<circle
231+
className={`graph-node ${node.type}`}
232+
cx={node.x}
233+
cy={node.y}
234+
r={radius}
235+
/>
236+
)}
237+
<text
238+
className="graph-text"
239+
x={node.x}
240+
y={node.y + 4}
241+
textAnchor="middle"
242+
fontSize="12"
243+
fontWeight="bold"
244+
>
245+
{displayName}
246+
</text>
247+
</g>
248+
);
249+
})}
263250
</g>
264251
</svg>
265252

‎extension/src/components/UpdateItem.tsx‎

Lines changed: 11 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -64,15 +64,17 @@ export function UpdateItem({ update }: UpdateItemProps) {
6464
<span class="value-arrow">→</span>
6565
<span class="value-new">{newValue}</span>
6666
</div>
67-
<ul class="component-list">
68-
<span class="component-name-header">Rerendered</span>
69-
{update.componentNames?.map((componentName, i) => (
70-
<li key={componentName} class="component-name">
71-
{componentName}
72-
{i < update.componentNames!.length - 1 ? ", " : ""}
73-
</li>
74-
))}
75-
</ul>
67+
{update.componentNames && update.componentNames.length > 0 && (
68+
<ul class="component-list">
69+
<span class="component-name-header">Rerendered</span>
70+
{update.componentNames?.map((componentName, i) => (
71+
<li key={componentName} class="component-name">
72+
{componentName}
73+
{i < update.componentNames!.length - 1 ? ", " : ""}
74+
</li>
75+
))}
76+
</ul>
77+
)}
7678
</div>
7779
);
7880
}

‎extension/styles/panel.css‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -437,6 +437,8 @@ body {
437437

438438
.graph-node.component {
439439
fill: #9c27b0;
440+
stroke: #7b1fa2;
441+
stroke-width: 2;
440442
}
441443

442444
.graph-link {

0 commit comments

Comments
 (0)