Skip to content

Commit

Permalink
Revise debug plugin, adding visibility and RNG seed pinning
Browse files Browse the repository at this point in the history
  • Loading branch information
@FelixHenninger
FelixHenninger committed May 8, 2024
1 parent ab0b816 commit e0b8477
Showing 1 changed file with 75 additions and 24 deletions.
99 changes: 75 additions & 24 deletions packages/library/src/plugins/debug.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -4,6 +4,7 @@ import { Component } from '../core/component'
import { requestIdleCallback } from '../core/timing/shims'
import { Store } from '../data/store'
import { stackSummary } from '../base/util/iterators/interface'
import { autoSeed } from '../util/random/seed'

// Overlay UI container --------------------------------------------------------

Expand Down Expand Up @@ -90,14 +91,20 @@ const payload = `<style type="text/css">
.labjs-debug-overlay-menu .pull-right {
float: right;
position: relative;
top: -4px;
}
top: -3px;
.labjs-debug-overlay-menu .pull-right .labjs-debug-close {
font-size: 1rem;
margin-left: 0.5em;
position: relative;
top: 1px;
a {
text-decoration: none;
&:hover {
color: orange;
}
}
svg {
position: relative;
top: 3.5px;
}
}
body.labjs-debug-visible .labjs-debug-overlay {
Expand Down Expand Up @@ -142,26 +149,54 @@ const payload = `<style type="text/css">
}
</style>
<div class="labjs-debug-open labjs-debug-toggle">
<div style="position:relative;top:3.2px;left:-1.5px">
<svg width="21" height="21" viewBox="0 0 16.93 16.93" xmlns="http://www.w3.org/2000/svg">
<ellipse style="fill:currentColor" cx="8.47" cy="4.49" rx="2.49" ry=".89"/>
<ellipse style="fill:none;stroke:currentColor;stroke-width:1.1" cx="8.47" cy="9.07" rx="4.65" ry="5.44"/>
<path style="fill:none;stroke:currentColor;stroke-width:.2" d="M12.33 6c0 .9-1.73 1.63-3.86 1.63C6.33 7.63 4.6 6.9 4.6 6"/>
<path style="fill:none;stroke:currentColor;stroke-width:.2" d="M8.47 7.58v6.8"/>
<path style="fill:none;stroke:currentColor;stroke-width:.9" d="M5.65 2.12s.22 1.13.78 1.76M1.94 9.95s1.15-.1 1.89-.31M3.26 13.8s1.29-.6 1.55-1.13M2.54 5.6s1 .76 1.74 1.02M11.29 2.12s-.23 1.13-.78 1.76M15 9.95s-1.16-.1-1.9-.31M13.68 13.8s-1.3-.6-1.56-1.13M14.39 5.6s-1 .76-1.73 1.02"/>
<div style="position:relative;top:3.75px;left:-2.75px">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" style="width: 1.25rem">
<path d="M13.024 9.25c.47 0 .827-.433.637-.863a4 4 0 0 0-4.094-2.364c-.468.05-.665.576-.43.984l1.08 1.868a.75.75 0 0 0 .649.375h2.158ZM7.84 7.758c-.236-.408-.79-.5-1.068-.12A3.982 3.982 0 0 0 6 10c0 .884.287 1.7.772 2.363.278.38.832.287 1.068-.12l1.078-1.868a.75.75 0 0 0 0-.75L7.839 7.758ZM9.138 12.993c-.235.408-.039.934.43.984a4 4 0 0 0 4.094-2.364c.19-.43-.168-.863-.638-.863h-2.158a.75.75 0 0 0-.65.375l-1.078 1.868Z" />
<path fill-rule="evenodd" d="m14.13 4.347.644-1.117a.75.75 0 0 0-1.299-.75l-.644 1.116a6.954 6.954 0 0 0-2.081-.556V1.75a.75.75 0 0 0-1.5 0v1.29a6.954 6.954 0 0 0-2.081.556L6.525 2.48a.75.75 0 1 0-1.3.75l.645 1.117A7.04 7.04 0 0 0 4.347 5.87L3.23 5.225a.75.75 0 1 0-.75 1.3l1.116.644A6.954 6.954 0 0 0 3.04 9.25H1.75a.75.75 0 0 0 0 1.5h1.29c.078.733.27 1.433.556 2.081l-1.116.645a.75.75 0 1 0 .75 1.298l1.117-.644a7.04 7.04 0 0 0 1.523 1.523l-.645 1.117a.75.75 0 1 0 1.3.75l.644-1.116a6.954 6.954 0 0 0 2.081.556v1.29a.75.75 0 0 0 1.5 0v-1.29a6.954 6.954 0 0 0 2.081-.556l.645 1.116a.75.75 0 0 0 1.299-.75l-.645-1.117a7.042 7.042 0 0 0 1.523-1.523l1.117.644a.75.75 0 0 0 .75-1.298l-1.116-.645a6.954 6.954 0 0 0 .556-2.081h1.29a.75.75 0 0 0 0-1.5h-1.29a6.954 6.954 0 0 0-.556-2.081l1.116-.644a.75.75 0 0 0-.75-1.3l-1.117.645a7.04 7.04 0 0 0-1.524-1.523ZM10 4.5a5.475 5.475 0 0 0-2.781.754A5.527 5.527 0 0 0 5.22 7.277 5.475 5.475 0 0 0 4.5 10a5.475 5.475 0 0 0 .752 2.777 5.527 5.527 0 0 0 2.028 2.004c.802.458 1.73.719 2.72.719a5.474 5.474 0 0 0 2.78-.753 5.527 5.527 0 0 0 2.001-2.027c.458-.802.719-1.73.719-2.72a5.475 5.475 0 0 0-.753-2.78 5.528 5.528 0 0 0-2.028-2.002A5.475 5.475 0 0 0 10 4.5Z" clip-rule="evenodd" />
</svg>
</div>
</div>
<div class="labjs-debug-overlay">
<div class="labjs-debug-overlay-menu">
<div class="pull-right">
<code>lab.js</code> debug tools ·
<a href="#" class="labjs-debug-data-download">📦 csv</a>
<a href="" class="labjs-debug-snapshot">📌 Snapshot</a>
<a href="" class="labjs-debug-snapshot-reload">Reload</a>
<a href="" class="labjs-debug-snapshot-clear">Clear</a>
<a href="" class="labjs-debug-alignment-toggle">Toggle alignment</a>
<span class="labjs-debug-close labjs-debug-toggle">&times;</span>
<code>lab.js</code> debug tools&ensp;·&ensp;
<a href="#" class="labjs-debug-data-download">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" fill="currentColor" style="width: 1rem">
<title>Download data as CSV file</title>
<path d="M8.75 2.75a.75.75 0 0 0-1.5 0v5.69L5.03 6.22a.75.75 0 0 0-1.06 1.06l3.5 3.5a.75.75 0 0 0 1.06 0l3.5-3.5a.75.75 0 0 0-1.06-1.06L8.75 8.44V2.75Z" />
<path d="M3.5 9.75a.75.75 0 0 0-1.5 0v1.5A2.75 2.75 0 0 0 4.75 14h6.5A2.75 2.75 0 0 0 14 11.25v-1.5a.75.75 0 0 0-1.5 0v1.5c0 .69-.56 1.25-1.25 1.25h-6.5c-.69 0-1.25-.56-1.25-1.25v-1.5Z" />
</svg>
</a>&nbsp;
<a href="#" class="labjs-debug-snapshot">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" fill="currentColor" style="width: 1rem">
<title>Take snapshot to recreate study on reload</title>
<path d="M3.75 2a.75.75 0 0 0-.75.75v10.5a.75.75 0 0 0 1.28.53L8 10.06l3.72 3.72a.75.75 0 0 0 1.28-.53V2.75a.75.75 0 0 0-.75-.75h-8.5Z" />
</svg>
</a>&nbsp;
<a href="#" class="labjs-debug-snapshot-reload">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" fill="currentColor" style="width: 1rem">
<title>Reload study</title>
<path fill-rule="evenodd" d="M13.836 2.477a.75.75 0 0 1 .75.75v3.182a.75.75 0 0 1-.75.75h-3.182a.75.75 0 0 1 0-1.5h1.37l-.84-.841a4.5 4.5 0 0 0-7.08.932.75.75 0 0 1-1.3-.75 6 6 0 0 1 9.44-1.242l.842.84V3.227a.75.75 0 0 1 .75-.75Zm-.911 7.5A.75.75 0 0 1 13.199 11a6 6 0 0 1-9.44 1.241l-.84-.84v1.371a.75.75 0 0 1-1.5 0V9.591a.75.75 0 0 1 .75-.75H5.35a.75.75 0 0 1 0 1.5H3.98l.841.841a4.5 4.5 0 0 0 7.08-.932.75.75 0 0 1 1.025-.273Z" clip-rule="evenodd" />
</svg>
</a>&nbsp;
<a href="#" class="labjs-debug-snapshot-clear">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" fill="currentColor" style="width: 1rem">
<title>Clear snapshot to start afresh</title>
<path d="M13 2.75v7.775L4.475 2h7.775a.75.75 0 0 1 .75.75ZM3 13.25V5.475l4.793 4.793L4.28 13.78A.75.75 0 0 1 3 13.25ZM2.22 2.22a.75.75 0 0 1 1.06 0l10.5 10.5a.75.75 0 1 1-1.06 1.06L2.22 3.28a.75.75 0 0 1 0-1.06Z" />
</svg>
</a>&nbsp;
<a href="#" class="labjs-debug-alignment-toggle">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" fill="currentColor" style="width: 1rem">
<title>Toggle horizontal and vertical display</title>
<path fill-rule="evenodd" d="M4.22 11.78a.75.75 0 0 1 0-1.06L9.44 5.5H5.75a.75.75 0 0 1 0-1.5h5.5a.75.75 0 0 1 .75.75v5.5a.75.75 0 0 1-1.5 0V6.56l-5.22 5.22a.75.75 0 0 1-1.06 0Z" clip-rule="evenodd" />
</svg>
</a>&nbsp;
<span class="labjs-debug-close labjs-debug-toggle">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" fill="currentColor" style="width: 1rem">
<title>Close debug tools</title>
<path d="M5.28 4.22a.75.75 0 0 0-1.06 1.06L6.94 8l-2.72 2.72a.75.75 0 1 0 1.06 1.06L8 9.06l2.72 2.72a.75.75 0 1 0 1.06-1.06L9.06 8l2.72-2.72a.75.75 0 0 0-1.06-1.06L8 6.94 5.28 4.22Z" />
</svg>
</span>
</div>
<div>
<span class="labjs-debug-overlay-breadcrumbs"></span>
Expand Down Expand Up @@ -309,7 +344,7 @@ const renderBreadcrumbs = (controller: Controller) => {

// Hydration logic -------------------------------------------------------------

const snapshot = (context: Component, target?: string[]) => {
const snapshot = (context: Component, target?: string[], seed?: string) => {
// Calculate set of current ids
const targetId =
target ?? context.internals.controller.currentStack.slice(1).map(c => c.id)
Expand All @@ -327,6 +362,7 @@ const snapshot = (context: Component, target?: string[]) => {
keep: true,
}),
)
window.sessionStorage.setItem('labjs-debug-seed', seed ?? '')
}

const hydrate = async (component: Component, data: any) => {
Expand Down Expand Up @@ -357,13 +393,15 @@ export default class Debug {
#alignment: DebugPluginAlignment
#context?: Component
#container?: Element
#seed: string

constructor({ filePrefix = 'study' }: DebugPluginOptions = {}) {
this.filePrefix = filePrefix
this.#alignment =
(window.sessionStorage.getItem(
'labjs-debug-alignment',
) as DebugPluginAlignment) ?? 'horizontal'
this.#seed = window.sessionStorage.getItem('labjs-debug-seed') ?? autoSeed()
}

async handle(context: Component, event: string) {
Expand All @@ -379,7 +417,9 @@ export default class Debug {

onInit(context: Component) {
// Prepare internal state
this.#isVisible = false
this.#isVisible = JSON.parse(
window.sessionStorage.getItem('labjs-debug-visible') ?? 'false',
) as unknown as boolean
this.#context = context

// Prepare container element for debug tools
Expand Down Expand Up @@ -412,7 +452,7 @@ export default class Debug {
.querySelector('.labjs-debug-snapshot')!
.addEventListener('click', e => {
e.preventDefault()
snapshot(this.#context!)
snapshot(this.#context!, undefined, this.#seed)
})

this.#container
Expand All @@ -427,6 +467,7 @@ export default class Debug {
.addEventListener('click', e => {
e.preventDefault()
window.sessionStorage.removeItem('labjs-debug-snapshot')
window.sessionStorage.removeItem('labjs-debug-seed')
})

this.#container
Expand Down Expand Up @@ -487,6 +528,12 @@ export default class Debug {
// Add payload code to document
document.body.appendChild(this.#container)
this.#updateBodyClassList()

// Setup RNG generation on context if not available
this.#context.options.random = this.#context.options.random ?? {
algorithm: 'alea',
seed: this.#seed,
}
}

async onPrepare() {
Expand Down Expand Up @@ -522,6 +569,10 @@ export default class Debug {
this.#isVisible = !this.#isVisible
this.render()
this.#updateBodyClassList()
window.sessionStorage.setItem(
'labjs-debug-visible',
JSON.stringify(this.#isVisible),
)
}

render() {
Expand Down

0 comments on commit e0b8477

Please sign in to comment.