-
Notifications
You must be signed in to change notification settings - Fork 17
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
Showing
9 changed files
with
211 additions
and
16 deletions.
There are no files selected for viewing
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,21 @@ | ||
| import { RunFrame } from "lib/components/RunFrame" | ||
| import React from "react" | ||
|
|
||
| export default () => ( | ||
| <RunFrame | ||
| fsMap={{ | ||
| "main.tsx": ` | ||
| circuit.add( | ||
| <board width="10mm" height="10mm"> | ||
| <resistor name="R1" resistance="1k" footprint="0402" /> | ||
| <capacitor name="C1" capacitance="1uF" footprint="0603" pcbX={4} /> | ||
| <trace from=".R1 .pin1" to=".C1 .pin1" /> | ||
| </board> | ||
| ) | ||
| `, | ||
| }} | ||
| defaultActiveTab="render_log" | ||
| entrypoint="main.tsx" | ||
| // showRenderLogTab | ||
| /> | ||
| ) |
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,20 @@ | ||
| import { RunFrame } from "lib/components/RunFrame" | ||
| import React from "react" | ||
|
|
||
| export default () => ( | ||
| <RunFrame | ||
| fsMap={{ | ||
| "main.tsx": ` | ||
| import LedMatrix from "@tsci/seveibar.contribution-board" | ||
| circuit.add( | ||
| <LedMatrix /> | ||
| ) | ||
| `, | ||
| "manual-edits.json": "{}", | ||
| }} | ||
| defaultActiveTab="render_log" | ||
| entrypoint="main.tsx" | ||
| // showRenderLogTab | ||
| /> | ||
| ) |
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,39 @@ | ||
| import type { RenderLog } from "lib/render-logging/RenderLog" | ||
|
|
||
| export const RenderLogViewer = ({ | ||
| renderLog, | ||
| }: { renderLog?: RenderLog | null }) => { | ||
| if (!renderLog) | ||
| return ( | ||
| <div className="p-4 bg-gray-100 rounded-md"> | ||
| No render log, make sure this tab is open when you render (TODO add a | ||
| rerender button here) | ||
| </div> | ||
| ) | ||
|
|
||
| const orderedPhaseTimings = Object.entries( | ||
| renderLog?.phaseTimings ?? {}, | ||
| ).sort((a, b) => b[1] - a[1]) | ||
|
|
||
| return ( | ||
| <div> | ||
| <div>Render Logs</div> | ||
| <table className="w-full text-xs"> | ||
| <thead> | ||
| <tr> | ||
| <th className="text-left p-2">Phase</th> | ||
| <th className="text-left p-2">Duration (ms)</th> | ||
| </tr> | ||
| </thead> | ||
| <tbody> | ||
| {orderedPhaseTimings.map(([phase, duration]) => ( | ||
| <tr key={phase}> | ||
| <td className="p-2">{phase}</td> | ||
| <td className="p-2">{duration}</td> | ||
| </tr> | ||
| ))} | ||
| </tbody> | ||
| </table> | ||
| </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
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,6 @@ | ||
| export interface RenderLog { | ||
| renderEvents?: any[] | ||
|
|
||
| // Not sure if we can do this because of async | ||
| phaseTimings?: Record<string, number> | ||
| } |
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,47 @@ | ||
| type RenderEvent = { | ||
| type: | ||
| | `renderable:renderLifecycle:${string}:start` | ||
| | `renderable:renderLifecycle:${string}:end` | ||
| /** | ||
| * Corresponds to the element that was rendered | ||
| */ | ||
| renderId: string | ||
| createdAt: number | ||
| } | ||
| /** | ||
| * Given a list of render events, return a map of how much time was spent in each | ||
| * render phase. | ||
| * | ||
| * To get the time spent in each phase, you have to find the end event for each | ||
| * start event and subtract the createdAt of the start event from the createdAt | ||
| */ | ||
| export const getPhaseTimingsFromRenderEvents = ( | ||
| renderEvents: RenderEvent[], | ||
| ): Record<string, number> => { | ||
| const phaseTimings: Record<string, number> = {} | ||
| if (!renderEvents) return phaseTimings | ||
|
|
||
| // Create a map to store start events by phase and renderId | ||
| const startEvents = new Map<string, RenderEvent>() | ||
|
|
||
| for (const event of renderEvents) { | ||
| const [, , phase, eventType] = event.type.split(":") | ||
|
|
||
| // For start events, store them in the map keyed by phase+renderId | ||
| if (eventType === "start") { | ||
| startEvents.set(`${phase}:${event.renderId}`, event) | ||
| continue | ||
| } | ||
|
|
||
| // For end events, find matching start event and calculate duration | ||
| if (eventType === "end") { | ||
| const startEvent = startEvents.get(`${phase}:${event.renderId}`) | ||
| if (startEvent) { | ||
| const duration = event.createdAt - startEvent.createdAt | ||
| phaseTimings[phase] = (phaseTimings[phase] || 0) + duration | ||
| } | ||
| } | ||
| } | ||
|
|
||
| return phaseTimings | ||
| } |
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