From e0b847757fbede2c89bb44b0b703c19d1bdf0a4f Mon Sep 17 00:00:00 2001 From: Felix Henninger Date: Wed, 8 May 2024 12:18:02 +0200 Subject: [PATCH] Revise debug plugin, adding visibility and RNG seed pinning --- packages/library/src/plugins/debug.ts | 99 ++++++++++++++++++++------- 1 file changed, 75 insertions(+), 24 deletions(-) diff --git a/packages/library/src/plugins/debug.ts b/packages/library/src/plugins/debug.ts index ff92ba5c..759d0c24 100644 --- a/packages/library/src/plugins/debug.ts +++ b/packages/library/src/plugins/debug.ts @@ -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 -------------------------------------------------------- @@ -90,14 +91,20 @@ const payload = `
-
- - - - - - +
+ + +
- lab.js debug tools · - 📦 csv - 📌 Snapshot - Reload - Clear - Toggle alignment - × + lab.js debug tools ·  + + + Download data as CSV file + + + +   + + + Take snapshot to recreate study on reload + + +   + + + Reload study + + +   + + + Clear snapshot to start afresh + + +   + + + Toggle horizontal and vertical display + + +   + + + Close debug tools + + +
@@ -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) @@ -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) => { @@ -357,6 +393,7 @@ export default class Debug { #alignment: DebugPluginAlignment #context?: Component #container?: Element + #seed: string constructor({ filePrefix = 'study' }: DebugPluginOptions = {}) { this.filePrefix = filePrefix @@ -364,6 +401,7 @@ export default class Debug { (window.sessionStorage.getItem( 'labjs-debug-alignment', ) as DebugPluginAlignment) ?? 'horizontal' + this.#seed = window.sessionStorage.getItem('labjs-debug-seed') ?? autoSeed() } async handle(context: Component, event: string) { @@ -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 @@ -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 @@ -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 @@ -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() { @@ -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() {