import { findAncestor , findAncestorP } from "./utils" ; import { Line } from "./node" ; const TOOLTIP_TIMEOUT = 500 ; let timeoutId = null ; let currentTooltip = null ; let cursorX = 0 ; let cursorY = 0 ; function initTooltip ( container ) { disableCssTooltips ( container ) ; trackMousePosition ( ) ; let nodes = container . querySelectorAll ( ".qp-node" ) ; for ( let i = 0 ; i < nodes . length ; i ++ ) { addTooltip ( nodes [ i ] , e => < HTMLElement > e . querySelector ( ".qp-tt" ) . cloneNode ( true ) ) ; } let lines = container . getElementsByTagName ( "polyline" ) ; for ( let i = 0 ; i < lines . length ; i ++ ) { let line = new Line ( lines [ i ] ) ; addTooltip ( line . element , e => { return buildLineTooltip ( line ) ; } ) ; } } function addTooltip ( node , createTooltip ) { node . addEventListener ( "mouseover" , ( ) => onMouseover ( node , createTooltip ) ) ; node . addEventListener ( "mouseout" , ( event ) => onMouseout ( node , event ) ) ; } function disableCssTooltips ( container ) { let root = container . querySelector ( ".qp-root" ) ; root . className += " qp-noCssTooltip" ; } function trackMousePosition ( ) { document . onmousemove = e => { cursorX = e . pageX ; cursorY = e . pageY ; } ; } function onMouseover ( node , createTooltip ) { if ( timeoutId != null ) return ; timeoutId = window . setTimeout ( ( ) => { var tooltip = createTooltip ( node ) ; if ( tooltip != null ) showTooltip ( node , tooltip ) ; } , TOOLTIP_TIMEOUT ) ; } function onMouseout ( node , event ) { let e = event . toElement || event . relatedTarget as Element ; if ( e == node || e == currentTooltip ) return ; if ( findAncestorP ( e , x => x == node ) ) return ; if ( findAncestorP ( e , x => x == currentTooltip ) ) return ; window . clearTimeout ( timeoutId ) ; timeoutId = null ; hideTooltip ( ) ; } function showTooltip ( node , tooltip ) { hideTooltip ( ) ; let positionY = cursorY ; let documentHeight = getDocumentHeight ( ) ; let gapAtBottom = documentHeight - ( positionY + tooltip . offsetHeight ) ; if ( gapAtBottom < 10 ) { positionY = documentHeight - ( tooltip . offsetHeight + 10 ) ; } if ( positionY < 10 ) { positionY = 10 ; } currentTooltip = tooltip ; document . body . appendChild ( currentTooltip ) ; currentTooltip . style . left = cursorX + "px" ; currentTooltip . style . top = positionY + "px" ; currentTooltip . addEventListener ( "mouseout" , function ( event ) { onMouseout ( node , event ) ; } ) ; } function getDocumentHeight ( ) { let body = document . body , html = document . documentElement ; return Math . max ( body . scrollHeight , body . offsetHeight , html . clientHeight , html . scrollHeight , html . offsetHeight ) ; } function hideTooltip ( ) { if ( currentTooltip != null ) { document . body . removeChild ( currentTooltip ) ; currentTooltip = null ; } } param line function buildLineTooltip ( line ) { if ( line . relOp == null ) return null ; let parser = new DOMParser ( ) ; let actualNumberOfRows = line . relOp . actualRows != null ? `<tr>
            <th>Actual Number of Rows</th>
            <td>${ line . relOp . actualRows }</td>
        </tr>` : '' ; let numberOfRowsRead = line . relOp . actualRowsRead != null ? `<tr>
            <th>Number of Rows Read</th>
            <td>${ line . relOp . actualRowsRead }</td>
        </tr>` : '' ; let document = parser . parseFromString ( `
        <div class="qp-tt"><table><tbody>
        ${ actualNumberOfRows }
        ${ numberOfRowsRead }
        <tr>
            <th>Estimated Number of Rows</th>
            <td>${ line . relOp . estimatedRows }</td>
        </tr>
        <tr>
            <th>Estimated Row Size</th>
            <td>${ convertSize ( line . relOp . estimatedRowSize ) }</td>
        </tr>
        <tr>
            <th>Estimated Data Size</th>
            <td>${ convertSize ( line . relOp . estimatedDataSize ) }</td>
        </tr>
        </tbody></tabke></div>
    ` , "text/html" ) ; return < HTMLElement > document . getElementsByClassName ( "qp-tt" ) [ 0 ] ; } param b function convertSize ( b ) { if ( b >= 10000 ) { let kb = b / 1024 ; if ( kb >= 10000 ) { let mb = kb / 1024 ; return `${ Math . round ( mb ) } MB` ; } return `${ Math . round ( kb ) } KB` ; } return `${ b } B` ; } export { initTooltip , buildLineTooltip , convertSize } ;