@@ -30,25 +30,21 @@ function renderJsonTree(
3030 // VarDerivationNode
3131 if ( "var" in node ) {
3232 const placement = error . translationTable ?. [ node . var ] ;
33+ if ( ! placement ) return `<span class="node-var">${ node . var } </span>` ;
34+
3335 const filePath = ( placement as any ) ?. file ?? error . file ;
34- const filename = filePath ? filePath . split ( "/" ) . pop ( ) : "" ;
35- const position = placement ?. position ;
36- const tooltipData = placement
37- ? `${ filename } :${ ( position ?. line ?? 0 ) + 1 } :${ ( position ?. column ?? 0 ) + 1 } `
38- : "No location available" ;
39- const fileAttr = filePath ? `data-file="${ filePath } "` : "" ;
40- const lineAttr = position ? `data-line="${ position . line } "` : "" ;
41- const columnAttr = position ? `data-column="${ position . column } "` : "" ;
42- const clickableClass = hasOrigin ? "derivable-node" : "" ;
43- const pathAttr = hasOrigin ? `data-node-path="${ path } "` : "" ;
44- const idAttr = hasOrigin ? `data-error-id="${ errorId } "` : "" ;
45- return `<span class="node-var tooltip clickable ${ clickableClass } " data-tooltip="${ tooltipData } " ${ fileAttr } ${ lineAttr } ${ columnAttr } ${ pathAttr } ${ idAttr } >${ node . var } </span>` ;
36+ const filename = filePath . split ( "/" ) . pop ( ) ?? "" ;
37+ const tooltipData = `${ filename } :${ ( placement . position ?. line ?? 0 ) + 1 } ` ;
38+ const classes = `node-var tooltip clickable ${ hasOrigin ? "derivable-node" : "" } ` . trim ( ) ;
39+ const attrs = hasOrigin ? ` data-node-path="${ path } " data-error-id="${ errorId } "` : "" ;
40+ const fileAttr = ` data-file="${ filePath } " data-line="${ placement . position ?. line ?? 0 } " data-column="${ placement . position ?. column ?? 0 } "` ;
41+ return `<span class="${ classes } " data-tooltip="${ tooltipData } "${ fileAttr } ${ attrs } >${ node . var } </span>` ;
4642 }
4743
4844 // ValDerivationNode
4945 if ( "value" in node ) {
5046 const valueNode = node as ValDerivationNode ;
51- const valClass = typeof valueNode . value === "number" ? "node-number" : "node-value" ;
47+ const valClass = typeof valueNode . value === "number" ? "node-number" : typeof valueNode . value === "boolean" ? "node-boolean" : "node-value" ;
5248 const clickableClass = hasOrigin ? "derivable-node clickable" : "" ;
5349 const pathAttr = hasOrigin ? `data-node-path="${ path } "` : "" ;
5450 const idAttr = hasOrigin ? `data-error-id="${ errorId } "` : "" ;
@@ -65,7 +61,7 @@ function renderJsonTree(
6561 // UnaryDerivationNode
6662 if ( "operand" in node ) {
6763 const operandHtml = renderJsonTree ( error , node . operand , errorId , `${ path } .operand` , expandedPaths ) ;
68- return ` ${ node . op } ( ${ operandHtml } )`;
64+ return node . op === "-" ? `( ${ node . op } ${ operandHtml } )` : ` ${ node . op } ${ operandHtml } `;
6965 }
7066
7167 // fallback
@@ -116,11 +112,13 @@ export function renderDerivationNode(error: RefinementError, node: ValDerivation
116112 const expansions = getExpansions ( errorId ) ;
117113 return /*html*/ `
118114 <div class="container derivation-container" data-error-id="${ errorId } ">
119- ${ renderJsonTree ( error , node . origin || node , errorId , "root" , expansions ) }
120- ${ expansions . size === 0 ? '<span class="node-expand-indicator"> (click to expand)</span>' : '' }
115+ <div style="flex: 1;">
116+ ${ renderJsonTree ( error , node . origin || node , errorId , "root" , expansions ) }
117+ ${ expansions . size === 0 ? '<span class="node-expand-indicator"> (click to expand)</span>' : '' }
118+ </div>
119+ <button class="reset-btn derivation-reset-btn" data-error-id="${ errorId } " ${ expansions . size === 0 ? "disabled" : "" } >
120+ ↻
121+ </button>
121122 </div>
122- <button class="reset-btn derivation-reset-btn" data-error-id="${ errorId } " ${ expansions . size === 0 ? "disabled" : "" } >
123- Reset
124- </button>
125123 ` ;
126124}
0 commit comments