import { ReactWidget } from '@jupyterlab/apputils' ; import React , { useEffect , useState } from 'react' ; import { IDebugger } from '../../tokens' ; /**
 * The body for a Breakpoints Panel.
 */ export class BreakpointsBody extends ReactWidget { param model constructor ( model ) { super ( ) ; this . _model = model ; this . addClass ( 'jp-DebuggerBreakpoints-body' ) ; } /**
     * Render the BreakpointsComponent.
     */ render ( ) { return < BreakpointsComponent model = { this . _model } />; } private _model : IDebugger . Model . IBreakpoints ; } param props param props . model const BreakpointsComponent = ( { model } ) : JSX . Element => { const [ breakpoints , setBreakpoints ] = useState ( Array . from ( model . breakpoints . entries ( ) ) ) ; useEffect ( ( ) => { const updateBreakpoints = ( _ , updates ) : void => { setBreakpoints ( Array . from ( model . breakpoints . entries ( ) ) ) ; } ; const restoreBreakpoints = ( _ ) : void => { setBreakpoints ( Array . from ( model . breakpoints . entries ( ) ) ) ; } ; model . changed . connect ( updateBreakpoints ) ; model . restored . connect ( restoreBreakpoints ) ; return ( ) : void => { model . changed . disconnect ( updateBreakpoints ) ; model . restored . disconnect ( restoreBreakpoints ) ; } ; } ) ; return ( < > { breakpoints . map ( entry => ( < BreakpointCellComponent key = { entry [ 0 ] } breakpoints = { entry [ 1 ] } model = { model } / > ) ) } < />); } ; param props param props . breakpoints param props . model const BreakpointCellComponent = ( { breakpoints , model } ) : JSX . Element => { return ( < > { breakpoints . sort ( ( a , b ) => { return a . line - b . line ; } ) . map ( ( breakpoint , index ) => ( < BreakpointComponent key = { breakpoint . source . path + index } breakpoint = { breakpoint } model = { model } / > ) ) } < />); } ; param props param props . breakpoint param props . model const BreakpointComponent = ( { breakpoint , model } ) : JSX . Element => { const moveToEndFirstCharIfSlash = ( breakpointSourcePath ) : string => { return breakpointSourcePath [ 0 ] === '/' ? breakpointSourcePath . slice ( 1 ) + '/' : breakpointSourcePath ; } ; return ( < div className = { 'jp-DebuggerBreakpoint' } onClick = { ( ) : void => model . clicked . emit ( breakpoint ) } title = { breakpoint . source . path } > < span className = { 'jp-DebuggerBreakpoint-marker' } > ● < /span> < span className = { 'jp-DebuggerBreakpoint-source jp-left-truncated' } > { moveToEndFirstCharIfSlash ( breakpoint . source . path ) } < /span> < span className = { 'jp-DebuggerBreakpoint-line' } > { breakpoint . line } < /span> < /div>); } ;