import { ReactWidget } from '@jupyterlab/apputils' ; import { caretDownEmptyIcon } from '@jupyterlab/ui-components' ; import { ArrayExt } from '@lumino/algorithm' ; import React , { useEffect , useState } from 'react' ; import { IDebugger } from '../../tokens' ; import { VariablesModel } from './model' ; import { convertType } from '.' ; /**
 * The body for tree of variables.
 */ export class VariablesBodyTree extends ReactWidget { param options constructor ( options ) { super ( ) ; this . _service = options . service ; const model = options . model ; model . changed . connect ( this . _updateScopes , this ) ; this . addClass ( 'jp-DebuggerVariables-body' ) ; } /**
     * Render the VariablesBodyTree.
     */ render ( ) { const scope = this . _scopes . find ( scope => scope . name === this . _scope ) ?? this . _scopes [ 0 ] ; return scope ? ( < VariablesComponent key = { scope . name } service = { this . _service } data = { scope . variables } filter = { this . _filter } / > ) : ( < div > < /div>); } /**
     * Set the variable filter list.
     */ set filter ( filter ) { this . _filter = filter ; this . update ( ) ; } /**
     * Set the current scope
     */ set scope ( scope ) { this . _scope = scope ; this . update ( ) ; } param model private _updateScopes ( model ) { if ( ArrayExt . shallowEqual ( this . _scopes , model . scopes ) ) { return ; } this . _scopes = model . scopes ; this . update ( ) ; } private _scope = '' ; private _scopes : IDebugger . IScope [ ] = [ ] ; private _filter = new Set < string > ( ) ; private _service : IDebugger ; } param props param props . data param props . service param props . filter const VariablesComponent = ( { data , service , filter } ) : JSX . Element => { const [ variables , setVariables ] = useState ( data ) ; useEffect ( ( ) => { setVariables ( data ) ; } , [ data ] ) ; return ( < ul > { variables ?. filter ( variable => ! filter . has ( variable . evaluateName ) ) . map ( variable => { const key = `${ variable . name }-${ variable . evaluateName }-${ variable . type }-${ variable . value }` ; return ( < VariableComponent key = { key } data = { variable } service = { service } filter = { filter } / > ) ; } ) } < /ul>); } ; param props param props . data param props . service param props . filter const VariableComponent = ( { data , service , filter } ) : JSX . Element => { const [ variable ] = useState ( data ) ; const [ expanded , setExpanded ] = useState ( null ) ; const [ variables , setVariables ] = useState ( null ) ; const styleName = { color : 'var(--jp-mirror-editor-attribute-color)' } ; const styleType = { color : 'var(--jp-mirror-editor-string-color)' } ; const expandable = variable . variablesReference !== 0 || variable . type === 'function' ; const onVariableClicked = async ( e ) : Promise < void > => { if ( ! expandable ) { return ; } e . stopPropagation ( ) ; const variables = await service . inspectVariable ( variable . variablesReference ) ; setExpanded ( ! expanded ) ; setVariables ( variables ) ; } ; return ( < li onClick = { ( e ) : Promise < void > => onVariableClicked ( e ) } > < caretDownEmptyIcon . react visibility = { expandable ? 'visible' : 'hidden' } stylesheet = "menuItem" tag = "span" transform = { expanded ? 'rotate(0deg)' : 'rotate(-90deg)' } / > < span style = { styleName } > { variable . name } < /span> < span > : < /span> < span style = { styleType } > { convertType ( variable ) } < /span> { expanded && variables && ( < VariablesComponent key = { variable . name } data = { variables } service = { service } filter = { filter } / > ) } < /li>); } ; /**
 * A namespace for VariablesBodyTree `statics`.
 */ namespace VariablesBodyTree { /**
     * Instantiation options for `VariablesBodyTree`.
     */ export interface IOptions { /**
         * The variables model.
         */ model : IDebugger . Model . IVariables ; /**
         * The debugger service.
         */ service : IDebugger ; } }