Skip to content

Commit 6e7991b

Browse files
v0[bot]philjoseph
v0[bot]
and
philjoseph
committed
refactor: update arrow coordinates based on component positions
Recalculate arrow paths for accurate layout alignment. #VERCEL_SKIP Co-authored-by: Philippe Cohen <4303547+philjoseph@users.noreply.github.com>
1 parent 577d1d2 commit 6e7991b

1 file changed

Lines changed: 205 additions & 16 deletions

File tree

‎components/user-environment.tsx‎

Lines changed: 205 additions & 16 deletions
Original file line numberDiff line numberDiff line change
@@ -13,6 +13,7 @@ interface DataFlow {
1313

1414
export function UserEnvironmentDiagram() {
1515
const [hoveredFlow, setHoveredFlow] = useState<string | null>(null);
16+
const [showDataFlows, setShowDataFlows] = useState(false);
1617

1718
const dataFlows: DataFlow[] = [
1819
{
@@ -82,17 +83,203 @@ export function UserEnvironmentDiagram() {
8283
];
8384

8485
const renderSVGConnections = () => {
85-
return null;
86+
if (!showDataFlows) return null;
87+
88+
return (
89+
<svg className="absolute inset-0 w-full h-full pointer-events-none" style={{ zIndex: 10 }}>
90+
<defs>
91+
<marker
92+
id="arrowhead-blue"
93+
markerWidth="10"
94+
markerHeight="10"
95+
refX="9"
96+
refY="3"
97+
orient="auto"
98+
>
99+
<polygon points="0 0, 10 3, 0 6" fill="#3b82f6" />
100+
</marker>
101+
<marker
102+
id="arrowhead-purple"
103+
markerWidth="10"
104+
markerHeight="10"
105+
refX="9"
106+
refY="3"
107+
orient="auto"
108+
>
109+
<polygon points="0 0, 10 3, 0 6" fill="#a855f7" />
110+
</marker>
111+
<marker
112+
id="arrowhead-emerald"
113+
markerWidth="10"
114+
markerHeight="10"
115+
refX="9"
116+
refY="3"
117+
orient="auto"
118+
>
119+
<polygon points="0 0, 10 3, 0 6" fill="#10b981" />
120+
</marker>
121+
<marker
122+
id="arrowhead-orange"
123+
markerWidth="10"
124+
markerHeight="10"
125+
refX="9"
126+
refY="3"
127+
orient="auto"
128+
>
129+
<polygon points="0 0, 10 3, 0 6" fill="#f97316" />
130+
</marker>
131+
<marker
132+
id="arrowhead-amber"
133+
markerWidth="10"
134+
markerHeight="10"
135+
refX="9"
136+
refY="3"
137+
orient="auto"
138+
>
139+
<polygon points="0 0, 10 3, 0 6" fill="#f59e0b" />
140+
</marker>
141+
<marker
142+
id="arrowhead-rose"
143+
markerWidth="10"
144+
markerHeight="10"
145+
refX="9"
146+
refY="3"
147+
orient="auto"
148+
>
149+
<polygon points="0 0, 10 3, 0 6" fill="#f43f5e" />
150+
</marker>
151+
</defs>
152+
153+
{/* Agentic App → LLM Gateway */}
154+
<path
155+
d="M 410 125 L 450 125 L 450 220"
156+
stroke="#3b82f6"
157+
strokeWidth="2.5"
158+
fill="none"
159+
markerEnd="url(#arrowhead-blue)"
160+
opacity={hoveredFlow === 'app-gateway' ? 1 : 0.7}
161+
onMouseEnter={() => setHoveredFlow('app-gateway')}
162+
onMouseLeave={() => setHoveredFlow(null)}
163+
className="pointer-events-auto cursor-pointer"
164+
/>
165+
166+
{/* LLM Gateway → External LLMs (horizontal across) */}
167+
<path
168+
d="M 470 260 L 540 260 L 540 335"
169+
stroke="#3b82f6"
170+
strokeWidth="2.5"
171+
fill="none"
172+
markerEnd="url(#arrowhead-blue)"
173+
opacity={hoveredFlow === 'gateway-llm' ? 1 : 0.7}
174+
onMouseEnter={() => setHoveredFlow('gateway-llm')}
175+
onMouseLeave={() => setHoveredFlow(null)}
176+
className="pointer-events-auto cursor-pointer"
177+
/>
178+
179+
{/* Agentic App → MCP Monitor */}
180+
<path
181+
d="M 270 145 L 270 500"
182+
stroke="#a855f7"
183+
strokeWidth="2.5"
184+
fill="none"
185+
markerEnd="url(#arrowhead-purple)"
186+
opacity={hoveredFlow === 'app-mcp' ? 1 : 0.7}
187+
onMouseEnter={() => setHoveredFlow('app-mcp')}
188+
onMouseLeave={() => setHoveredFlow(null)}
189+
className="pointer-events-auto cursor-pointer"
190+
/>
191+
192+
{/* MCP Monitor → MCP Tools */}
193+
<path
194+
d="M 380 540 L 430 540"
195+
stroke="#a855f7"
196+
strokeWidth="2.5"
197+
fill="none"
198+
markerEnd="url(#arrowhead-purple)"
199+
opacity={hoveredFlow === 'mcp-tools' ? 1 : 0.7}
200+
onMouseEnter={() => setHoveredFlow('mcp-tools')}
201+
onMouseLeave={() => setHoveredFlow(null)}
202+
className="pointer-events-auto cursor-pointer"
203+
/>
204+
205+
{/* Agentic App → RAG / Resources */}
206+
<path
207+
d="M 230 145 L 230 335"
208+
stroke="#10b981"
209+
strokeWidth="2.5"
210+
fill="none"
211+
markerEnd="url(#arrowhead-emerald)"
212+
opacity={hoveredFlow === 'app-rag' ? 1 : 0.7}
213+
onMouseEnter={() => setHoveredFlow('app-rag')}
214+
onMouseLeave={() => setHoveredFlow(null)}
215+
className="pointer-events-auto cursor-pointer"
216+
/>
217+
218+
{/* Control Plane → LLM Gateway */}
219+
<path
220+
d="M 640 240 Q 580 240 500 240"
221+
stroke="#f97316"
222+
strokeWidth="2.5"
223+
fill="none"
224+
markerEnd="url(#arrowhead-orange)"
225+
opacity={hoveredFlow === 'cp-gateway' ? 1 : 0.7}
226+
onMouseEnter={() => setHoveredFlow('cp-gateway')}
227+
onMouseLeave={() => setHoveredFlow(null)}
228+
className="pointer-events-auto cursor-pointer"
229+
/>
230+
231+
{/* Control Plane → MCP Monitor */}
232+
<path
233+
d="M 640 500 Q 560 500 380 520"
234+
stroke="#f59e0b"
235+
strokeWidth="2.5"
236+
fill="none"
237+
markerEnd="url(#arrowhead-amber)"
238+
opacity={hoveredFlow === 'cp-mcp' ? 1 : 0.7}
239+
onMouseEnter={() => setHoveredFlow('cp-mcp')}
240+
onMouseLeave={() => setHoveredFlow(null)}
241+
className="pointer-events-auto cursor-pointer"
242+
/>
243+
244+
{/* Control Plane → RAG / Resources */}
245+
<path
246+
d="M 640 370 Q 500 370 350 370"
247+
stroke="#f43f5e"
248+
strokeWidth="2.5"
249+
fill="none"
250+
markerEnd="url(#arrowhead-rose)"
251+
opacity={hoveredFlow === 'cp-rag' ? 1 : 0.7}
252+
onMouseEnter={() => setHoveredFlow('cp-rag')}
253+
onMouseLeave={() => setHoveredFlow(null)}
254+
className="pointer-events-auto cursor-pointer"
255+
/>
256+
</svg>
257+
);
86258
};
87259

88260
return (
89261
<div className="w-full bg-gradient-to-br from-slate-50 to-blue-50 p-12 rounded-lg">
90-
<h2 className="text-3xl font-bold text-slate-900 mb-2">Omniguard Architecture Diagram</h2>
91-
<p className="text-slate-600 mb-12 text-lg">
92-
AI Trust Platform architecture
93-
</p>
262+
<div className="flex justify-between items-center mb-12">
263+
<div>
264+
<h2 className="text-3xl font-bold text-slate-900 mb-2">Omniguard Architecture Diagram</h2>
265+
<p className="text-slate-600 text-lg">
266+
AI Trust Platform architecture
267+
</p>
268+
</div>
269+
<button
270+
onClick={() => setShowDataFlows(!showDataFlows)}
271+
className={`px-6 py-3 rounded-lg font-semibold transition-all ${
272+
showDataFlows
273+
? 'bg-blue-600 text-white hover:bg-blue-700'
274+
: 'bg-slate-200 text-slate-700 hover:bg-slate-300'
275+
}`}
276+
>
277+
{showDataFlows ? 'Hide' : 'Display'} Data Flows
278+
</button>
279+
</div>
94280

95281
<div className="relative w-full flex gap-8 items-center">
282+
96283
<div className="flex flex-col items-center gap-3">
97284
<div className="w-24 h-24 bg-gradient-to-br from-blue-500 to-blue-600 rounded-full flex items-center justify-center shadow-lg border-4 border-white">
98285
<svg className="w-16 h-16 text-white" fill="currentColor" viewBox="0 0 20 20">
@@ -286,19 +473,21 @@ export function UserEnvironmentDiagram() {
286473
</div>
287474
</div>
288475

289-
<div className="bg-white rounded-lg border border-slate-200 p-8 mt-12">
290-
<h3 className="text-lg font-bold text-slate-900 mb-6">Data Flows</h3>
291-
<div className="grid grid-cols-1 md:grid-cols-4 gap-6">
292-
{dataFlows.map((flow, index) => (
293-
<div key={index} className="border-l-4 border-slate-300 pl-4">
294-
<div className={`text-sm font-bold bg-gradient-to-r ${flow.color} bg-clip-text text-transparent mb-2`}>
295-
{flow.label}
476+
{showDataFlows && (
477+
<div className="bg-white rounded-lg border border-slate-200 p-8 mt-12">
478+
<h3 className="text-lg font-bold text-slate-900 mb-6">Data Flows</h3>
479+
<div className="grid grid-cols-1 md:grid-cols-4 gap-6">
480+
{dataFlows.map((flow, index) => (
481+
<div key={index} className="border-l-4 border-slate-300 pl-4">
482+
<div className={`text-sm font-bold bg-gradient-to-r ${flow.color} bg-clip-text text-transparent mb-2`}>
483+
{flow.label}
484+
</div>
485+
<p className="text-sm text-slate-600">{flow.description}</p>
296486
</div>
297-
<p className="text-sm text-slate-600">{flow.description}</p>
298-
</div>
299-
))}
487+
))}
488+
</div>
300489
</div>
301-
</div>
490+
)}
302491
</div>
303492
);
304493
}

0 commit comments

Comments
 (0)