Jesse.Markowitz/interactive-story
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Collapse nested state trees by default, keep top level expanded

Browse Source 
Only depth 0 opens automatically; deeper objects/arrays start collapsed
and expand on click, so deep state stays readable.

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_01TEpWMjnfPqzZ13nPMoGhs5
This commit is contained in:
parththakkar106
2026-07-21 01:23:59 +05:30
co-authored by Claude Opus 4.8
parent e74566c5d4
commit 8a1650c0d4
1 changed files with 8 additions and 6 deletions
Download Patch File Download Diff File Expand all files Collapse all files
frontend/src/pages/Play.jsx
+8 -6
View File
@@ -395,18 +395,20 @@ function ScriptsPanel({ advId }) {
// Renders one script-state value: primitives inline (typed/coloured), and
// objects/arrays as a collapsible, indented tree — recursing into nesting so
// deep state shows structure instead of a flat JSON blob.
function StateValue({ value }) {
function StateValue({ value, depth = 0 }) {
if (value === null || value === undefined) return <span className="jv-null">null</span>
if (typeof value === 'boolean') return <span className="jv-bool">{String(value)}</span>
if (typeof value === 'number') return <span className="jv-number">{value}</span>
if (typeof value === 'string') return <span className="jv-string">{value}</span>
if (Array.isArray(value)) return <StateTree entries={value.map((v, i) => [i, v])} empty="[ ]" />
if (typeof value === 'object') return <StateTree entries={Object.entries(value)} empty="{ }" />
if (Array.isArray(value)) return <StateTree entries={value.map((v, i) => [i, v])} empty="[ ]" depth={depth} />
if (typeof value === 'object') return <StateTree entries={Object.entries(value)} empty="{ }" depth={depth} />
return <span className="jv-string">{String(value)}</span>
}
function StateTree({ entries, empty }) {
const [open, setOpen] = useState(true)
// Only the first level is expanded by default (depth 0); nested trees start
// collapsed and can be opened on demand.
function StateTree({ entries, empty, depth = 0 }) {
const [open, setOpen] = useState(depth < 1)
if (entries.length === 0) return <span className="jv-empty">{empty}</span>
return (
<div className="jv-tree">
@@ -418,7 +420,7 @@ function StateTree({ entries, empty }) {
{entries.map(([k, v]) => (
<li key={k}>
<span className="jv-key">{k}</span>
<StateValue value={v} />
<StateValue value={v} depth={depth + 1} />
</li>
))}
</ul>