-
-
Notifications
You must be signed in to change notification settings - Fork 40
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
- Loading branch information
1 parent
1129840
commit 8cefe29
Showing
43 changed files
with
2,056 additions
and
1,889 deletions.
There are no files selected for viewing
Large diffs are not rendered by default.
Oops, something went wrong.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,111 @@ | ||
| import { animate, motion, useMotionValue } from "framer-motion" | ||
| import type React from "react" | ||
| import { useEffect } from "react" | ||
| import type { NetworkRequest } from "./types" | ||
|
|
||
| interface NetworkBarProps { | ||
| request: NetworkRequest | ||
| index: number | ||
| minTime: number | ||
| pixelsPerMs: number | ||
| barHeight: number | ||
| barPadding: number | ||
| now: number | ||
| onClick: (e: React.MouseEvent, request: NetworkRequest, order: number) => void | ||
| isActive: boolean | ||
| } | ||
|
|
||
| const COLORS = { | ||
| loader: "#4ade80", | ||
| "client-loader": "#60a5fa", | ||
| action: "#f59e0b", | ||
| "client-action": "#ef4444", | ||
| pending: "#94a3b8", | ||
| error: "#dc2626", | ||
| } | ||
|
|
||
| export const NetworkBar: React.FC<NetworkBarProps> = ({ | ||
| request, | ||
| index, | ||
| minTime, | ||
| pixelsPerMs, | ||
| barHeight, | ||
| barPadding, | ||
| now, | ||
| onClick, | ||
| isActive, | ||
| }) => { | ||
| const startX = (request.startTime - minTime) * pixelsPerMs | ||
| const currentEndTime = request.endTime || now | ||
| const duration = currentEndTime - request.startTime | ||
| const y = index * (barHeight + barPadding) + 24 | ||
| const state = request.endTime ? "finished" : "pending" | ||
|
|
||
| const color = state === "pending" ? COLORS.pending : COLORS[request.type as keyof typeof COLORS] | ||
|
|
||
| const barWidth = useMotionValue(2) | ||
|
|
||
| useEffect(() => { | ||
| const updateWidth = () => { | ||
| if (request.endTime) { | ||
| animate(barWidth, Math.max(2, (request.endTime - request.startTime) * pixelsPerMs), { | ||
| duration: 0.3, | ||
| ease: "easeOut", | ||
| }) | ||
| } else if (isActive) { | ||
| barWidth.set(Math.max(2, (now - request.startTime) * pixelsPerMs)) | ||
| requestAnimationFrame(updateWidth) | ||
| } | ||
| } | ||
|
|
||
| if (isActive) { | ||
| requestAnimationFrame(updateWidth) | ||
| } | ||
|
|
||
| if (!isActive) { | ||
| barWidth.stop() | ||
| } | ||
|
|
||
| return () => { | ||
| barWidth.stop() | ||
| } | ||
| }, [request.endTime, request.startTime, pixelsPerMs, now, barWidth, isActive]) | ||
|
|
||
| return ( | ||
| <motion.div | ||
| style={{ | ||
| position: "absolute", | ||
| top: y, | ||
| height: barHeight, | ||
| backgroundColor: color, | ||
| borderRadius: "2px", | ||
| width: barWidth, | ||
| minWidth: "2px", | ||
| x: startX, | ||
| }} | ||
| transition={{ | ||
| x: { duration: 0.3, ease: "easeOut" }, | ||
| }} | ||
| className="relative overflow-hidden group cursor-pointer hover:brightness-110" | ||
| onClick={(e) => onClick(e, request, index)} | ||
| > | ||
| {request.state === "pending" && isActive && ( | ||
| <motion.div | ||
| className="absolute inset-0 bg-gradient-to-r from-transparent via-white to-transparent opacity-20" | ||
| animate={{ x: ["-100%", "100%"] }} | ||
| transition={{ | ||
| repeat: Number.POSITIVE_INFINITY, | ||
| duration: 1.5, | ||
| ease: "linear", | ||
| }} | ||
| /> | ||
| )} | ||
|
|
||
| <div className="absolute left-full top-1/2 -translate-y-1/2 ml-2 opacity-0 group-hover:opacity-100 transition-opacity bg-gray-900 px-2 py-1 rounded text-xs whitespace-nowrap pointer-events-none z-10"> | ||
| {request.method} {request.url} | ||
| <br /> | ||
| {request.endTime ? `Duration: ${duration.toFixed(0)}ms` : `Elapsed: ${duration.toFixed(0)}ms...`} | ||
| </div> | ||
| </motion.div> | ||
| ) | ||
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,42 @@ | ||
| import { useEffect, useState } from "react" | ||
| import { useRequestContext } from "../../context/requests/request-context" | ||
|
|
||
| import NetworkWaterfall from "./NetworkWaterfall" | ||
|
|
||
| function NetworkPanel() { | ||
| const { requests } = useRequestContext() | ||
|
|
||
| const [containerWidth, setContainerWidth] = useState(800) | ||
|
|
||
| //console.log(req) | ||
| // Simulate network requests for demo | ||
|
|
||
| // Update container width on resize | ||
| useEffect(() => { | ||
| const updateWidth = () => { | ||
| const container = document.querySelector(".network-container") | ||
| if (container) { | ||
| setContainerWidth(container.clientWidth) | ||
| } | ||
| } | ||
|
|
||
| window.addEventListener("resize", updateWidth) | ||
| updateWidth() | ||
|
|
||
| return () => window.removeEventListener("resize", updateWidth) | ||
| }, []) | ||
|
|
||
| return ( | ||
| <div className=" text-gray-100"> | ||
| <div className="mx-auto p-1"> | ||
| <div className="bg-gray-800 rounded-lg shadow-xl overflow-hidden"> | ||
| <div className="border-t border-gray-700 p-4 network-container"> | ||
| <NetworkWaterfall requests={requests} width={containerWidth - 32} /> | ||
| </div> | ||
| </div> | ||
| </div> | ||
| </div> | ||
| ) | ||
| } | ||
|
|
||
| export default NetworkPanel |
Oops, something went wrong.