Skip to content

Commit b620c29

Browse files
hasparushasparus
committed
Animate wires
1 parent 3e13f54 commit b620c29

File tree

2 files changed

+142
-50
lines changed

2 files changed

+142
-50
lines changed

‎src/components/index-page/data-colocation/component-tree.tsx

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -175,7 +175,7 @@ function Fork(props: React.SVGProps<SVGSVGElement>) {
175175
<path d="M40.5 8V0M1 16V8m79 8V8" vectorEffect="non-scaling-stroke" />
176176
<path
177177
d="m1 8 79-.00001"
178-
stroke-linecap="square"
178+
strokeLinecap="square"
179179
vectorEffect="non-scaling-stroke"
180180
/>
181181
</svg>

‎src/components/index-page/what-is-graphql/wires.tsx

Lines changed: 141 additions & 49 deletions
Original file line numberDiff line numberDiff line change
@@ -15,13 +15,9 @@ import {
1515

1616
import QueryMdx from "./api-gateway-query.mdx"
1717
import clsx from "clsx"
18-
import { ComponentPropsWithoutRef, useReducer } from "react"
18+
import { ComponentPropsWithoutRef, ReactNode, useReducer } from "react"
1919

20-
function ClientEdges({
21-
highlighted: pathHighlighted,
22-
}: {
23-
highlighted?: number
24-
}) {
20+
function ClientEdges({ highlighted }: { highlighted?: number }) {
2521
const paths = [
2622
"M514.5 220H424.5V76H72",
2723
"M446 220H424.5V112H144",
@@ -36,18 +32,21 @@ function ClientEdges({
3632

3733
return (
3834
<>
39-
{paths.map((path, index) => (
40-
<path
41-
key={index}
42-
d={path}
43-
stroke={
44-
pathHighlighted === index
45-
? `url(#paint_lr_dark_linear_671_9150)`
46-
: `url(#paint_lr_light_linear_671_9150)`
47-
}
48-
strokeWidth={pathHighlighted === index ? "2" : "1"}
49-
/>
50-
))}
35+
{moveHighlightedToTop(
36+
highlighted,
37+
paths.map((path, index) => (
38+
<path
39+
key={index}
40+
d={path}
41+
stroke={
42+
highlighted === index
43+
? `url(#paint_lr_dark_linear_671_9150)`
44+
: `url(#paint_lr_light_linear_671_9150)`
45+
}
46+
strokeWidth={highlighted === index ? "2" : "1"}
47+
/>
48+
)),
49+
)}
5150
</>
5251
)
5352
}
@@ -74,11 +73,13 @@ function ServerEdges({ highlighted }: { highlighted: number[] }) {
7473
key={index}
7574
d={d}
7675
strokeWidth={isHighlighted ? 2 : 1}
77-
stroke={
76+
className={clsx(
7877
isHighlighted
79-
? `url(#${index % 2 ? "paint_sr_pri_highlight_linear_671_9150" : "paint_sr_sec_highlight_linear_671_9150"})`
80-
: "url(#paint_sr_light_linear_671_9150)"
81-
}
78+
? index % 2
79+
? "stroke-[url(#paint_sr_pri_highlight_linear_671_9150)] motion-reduce:stroke-[url(#paint_sr_pri_highlight_linear_static_671_9150)]"
80+
: "stroke-[url(#paint_sr_sec_highlight_linear_671_9150)] motion-reduce:stroke-[url(#paint_sr_sec_highlight_linear_static_671_9150)]"
81+
: "stroke-[url(#paint_sr_light_linear_671_9150)]",
82+
)}
8283
/>
8384
)
8485
})}
@@ -186,8 +187,8 @@ function ServerBoxes({ highlighted }: { highlighted: number[] }) {
186187
className={
187188
isHighlighted
188189
? index % 2
189-
? "[&_path]:fill-pri-darker dark:[&_path]:fill-pri-lighter"
190-
: "[&_path]:fill-sec-darker dark:[&_path]:fill-sec-lighter"
190+
? "dark:[&_path]:fill-pri-lighter [&_rect]:fill-pri-darker"
191+
: "dark:[&_path]:fill-sec-lighter [&_rect]:fill-sec-darker"
191192
: undefined
192193
}
193194
>
@@ -211,8 +212,15 @@ function SVGDefinitions() {
211212
y2="41.7739"
212213
gradientUnits="userSpaceOnUse"
213214
>
214-
<stop stopColor="hsl(var(--color-neu-100))" />
215-
<stop offset="1" stopColor="hsl(var(--color-neu-600))" />
215+
<stop
216+
stopColor="hsl(var(--color-neu-100))"
217+
className="dark:[stop-color:hsl(var(--color-neu-50))]"
218+
/>
219+
<stop
220+
offset="1"
221+
stopColor="hsl(var(--color-neu-600))"
222+
className="dark:[stop-color:hsl(var(--color-neu-100))]"
223+
/>
216224
</linearGradient>
217225
<linearGradient
218226
id="paint_lr_dark_linear_671_9150"
@@ -234,31 +242,109 @@ function SVGDefinitions() {
234242
y2="0"
235243
gradientUnits="userSpaceOnUse"
236244
>
237-
<stop stopColor="hsl(var(--color-neu-100))" />
238-
<stop offset="1" stopColor="hsl(var(--color-neu-600))" />
245+
<stop
246+
stopColor="hsl(var(--color-neu-100))"
247+
className="dark:[stop-color:hsl(var(--color-neu-0))]"
248+
/>
249+
<stop
250+
offset="1"
251+
stopColor="hsl(var(--color-neu-600))"
252+
className="dark:[stop-color:hsl(var(--color-neu-100))]"
253+
/>
239254
</linearGradient>
240255

241-
<linearGradient
242-
id="paint_sr_sec_highlight_linear_671_9150"
243-
x1="696"
244-
y1="0"
245-
x2="937.904"
246-
y2="0"
247-
gradientUnits="userSpaceOnUse"
248-
>
249-
<stop stopColor="hsl(var(--color-sec-dark))" />
250-
<stop offset="1" stopColor="hsl(var(--color-sec-light))" />
256+
<linearGradient id="paint_sr_sec_highlight_linear_static_671_9150">
257+
<stop
258+
stopColor="hsl(var(--color-sec-dark))"
259+
className="dark:[stop-color:hsl(var(--color-sec-light))]"
260+
/>
261+
<stop
262+
offset="1"
263+
stopColor="hsl(var(--color-sec-light))"
264+
className="dark:[stop-color:hsl(var(--color-sec-darker))]"
265+
/>
251266
</linearGradient>
252-
<linearGradient
253-
id="paint_sr_pri_highlight_linear_671_9150"
254-
x1="696"
255-
y1="0"
256-
x2="937.904"
257-
y2="0"
258-
gradientUnits="userSpaceOnUse"
259-
>
260-
<stop stopColor="hsl(var(--color-pri-dark))" />
261-
<stop offset="1" stopColor="hsl(var(--color-pri-lighter))" />
267+
<linearGradient id="paint_sr_sec_highlight_linear_671_9150">
268+
<stop
269+
stopColor="hsl(var(--color-sec-light))"
270+
className="dark:[stop-color:hsl(var(--color-sec-darker))]"
271+
>
272+
<animate
273+
attributeName="offset"
274+
values="-2.562;1.438;-2.562"
275+
dur="10s"
276+
repeatCount="indefinite"
277+
/>
278+
</stop>
279+
<stop
280+
stopColor="hsl(var(--color-sec-dark))"
281+
className="dark:[stop-color:hsl(var(--color-sec-light))]"
282+
>
283+
<animate
284+
attributeName="offset"
285+
values="-1.562;2.438;-1.562"
286+
dur="10s"
287+
repeatCount="indefinite"
288+
/>
289+
</stop>
290+
<stop
291+
stopColor="hsl(var(--color-sec-light))"
292+
className="dark:[stop-color:hsl(var(--color-sec-darker))]"
293+
>
294+
<animate
295+
attributeName="offset"
296+
values="-0.562;3.438;-0.562"
297+
dur="10s"
298+
repeatCount="indefinite"
299+
/>
300+
</stop>
301+
</linearGradient>
302+
303+
<linearGradient id="paint_sr_pri_highlight_linear_static_671_9150">
304+
<stop
305+
stopColor="hsl(var(--color-pri-dark))"
306+
className="dark:[stop-color:hsl(var(--color-pri-light))]"
307+
/>
308+
<stop
309+
offset="1"
310+
stopColor="hsl(var(--color-pri-lighter))"
311+
className="dark:[stop-color:hsl(var(--color-pri-darker))]"
312+
/>
313+
</linearGradient>
314+
<linearGradient id="paint_sr_pri_highlight_linear_671_9150">
315+
<stop
316+
stopColor="hsl(var(--color-pri-lighter))"
317+
className="dark:[stop-color:hsl(var(--color-pri-darker))]"
318+
>
319+
<animate
320+
attributeName="offset"
321+
values="-2.562;1.438;-2.562"
322+
dur="10s"
323+
repeatCount="indefinite"
324+
/>
325+
</stop>
326+
<stop
327+
stopColor="hsl(var(--color-pri-dark))"
328+
className="dark:[stop-color:hsl(var(--color-pri-light))]"
329+
>
330+
<animate
331+
attributeName="offset"
332+
values="-1.562;2.438;-1.562"
333+
dur="10s"
334+
repeatCount="indefinite"
335+
/>
336+
</stop>
337+
<stop
338+
stopColor="hsl(var(--color-pri-lighter))"
339+
className="dark:[stop-color:hsl(var(--color-pri-darker))]"
340+
>
341+
<animate
342+
attributeName="offset"
343+
values="-0.562;3.438;-0.562"
344+
dur="10s"
345+
repeatCount="indefinite"
346+
/>
347+
</stop>
262348
</linearGradient>
263349

264350
<clipPath id="clip0_671_9150">
@@ -283,7 +369,6 @@ const components = {
283369
}
284370

285371
export function Wires({ className }: { className?: string }) {
286-
// 1: Query visible, first client wire selected.
287372
const STEPS = 3
288373
const [step, inc] = useReducer(x => (x + 1) % STEPS, 1)
289374

@@ -309,3 +394,10 @@ export function Wires({ className }: { className?: string }) {
309394
</div>
310395
)
311396
}
397+
398+
function moveHighlightedToTop(index: number | undefined, nodes: ReactNode[]) {
399+
if (index === undefined) return nodes
400+
const newNodes = nodes.filter((_, i) => i !== index)
401+
newNodes.push(nodes[index] as ReactNode)
402+
return newNodes
403+
}

0 commit comments

Comments
 (0)