import { ReactWidget } from '@jupyterlab/apputils' ; import React , { useEffect , useState } from 'react' ; import { IDebugger } from '../../tokens' ; /**
 * The body for a Callstack Panel.
 */ export class CallstackBody extends ReactWidget { param model constructor ( model ) { super ( ) ; this . _model = model ; this . addClass ( 'jp-DebuggerCallstack-body' ) ; } /**
     * Render the FramesComponent.
     */ render ( ) { return < FramesComponent model = { this . _model } />; } private _model : IDebugger . Model . ICallstack ; } param props param props . model const FramesComponent = ( { model } ) : JSX . Element => { const [ frames , setFrames ] = useState ( model . frames ) ; const [ selected , setSelected ] = useState ( model . frame ) ; const onSelected = ( frame ) : void => { setSelected ( frame ) ; model . frame = frame ; } ; useEffect ( ( ) => { const updateFrames = ( ) : void => { setSelected ( model . frame ) ; setFrames ( model . frames ) ; } ; model . framesChanged . connect ( updateFrames ) ; return ( ) : void => { model . framesChanged . disconnect ( updateFrames ) ; } ; } , [ model ] ) ; return ( < ul > { frames . map ( ele => ( < li key = { ele . id } onClick = { ( ) : void => onSelected ( ele ) } className = { selected ?. id === ele . id ? 'selected' : '' } > { ele . name } at { ele . source . name } : { ele . line } < /li>))} < /ul>); } ;