Fossil

Check-in [fa811f95]
Login

Many hyperlinks are disabled.
Use anonymous login to enable hyperlinks.

Overview
Comment:The tooltip over a graph node shows a link to the check-in or artifact that the node represents, not a link to the branch.
Downloads: Tarball | ZIP archive | SQL archive
Timelines: family | ancestors | descendants | both | tooltip-experiments
Files: files | file ages | folders
SHA3-256: fa811f95c46f6d8180b758fd83fac4a567d564c27be6c85e157884f5fcf4530e
User & Date: drh 2019-05-22 15:42:22
Wiki:tooltip-experiments
Context
2019-05-22
16:47
CSS changes to the look of the tooltip. check-in: b5cfa435 user: drh tags: tooltip-experiments
15:42
The tooltip over a graph node shows a link to the check-in or artifact that the node represents, not a link to the branch. check-in: fa811f95 user: drh tags: tooltip-experiments
14:34
Additional simplification of the tooltip javascript. check-in: c0f8f578 user: drh tags: tooltip-experiments
Changes
Hide Diffs Unified Diffs Ignore Whitespace Patch

Changes to src/graph.js.

99
100
101
102
103
104
105

106
107
108
109
110
111
112
...
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
...
186
187
188
189
190
191
192

















193
194
195
196
197
198
199
...
372
373
374
375
376
377
378
379
380
381

382
383
384
385
386
387
388
...
574
575
576
577
578
579
580

581
582





583



584
585
586
587
588
589
590
591




592
593
594
595
596
597
598
599

600
601
602


603
604
605
606
607
608
609
window.tooltipInfo = {
  dwellTimeout: 250,  /* The tooltip dwell timeout. */
  closeTimeout: 3000, /* The tooltip close timeout. */
  idTimer: 0,         /* The tooltip dwell timer id. */
  idTimerClose: 0,    /* The tooltip close timer id. */
  ixHover: -1,        /* The id of the element with the mouse. */
  ixActive: -1,       /* The id of the element with the tooltip. */

  posX: 0, posY: 0    /* The last mouse position. */
};

/* Functions used to control the tooltip popup and its timer */
function hideGraphTooltip(){
  stopCloseTimer();
  tooltipObj.style.display = "none";
................................................................................
  topObj.onclick = clickOnGraph
  topObj.ondblclick = dblclickOnGraph
  topObj.onmousemove = function(e) {
    var ix = findTxIndex(e);
    topObj.style.cursor = (ix<0) ? "" : "pointer"
    /* Keep the already visible tooltip at a constant position, as long as the
    ** mouse is over the same element. */
    var isReentry = false;  // Detect mouse move back to same element.
    if(tooltipObj.style.display != "none"){
      if(ix == tooltipInfo.ixHover) return;
      if(-1==tooltipInfo.ixHover && ix==tooltipInfo.ixActive) isReentry = true;
    }
    /* The tooltip is either not visible, or the mouse is over a different
    ** element, so clear the dwell timer, and record the new element id and
    ** mouse position. */
    stopDwellTimer();
    if(ix >= 0){
      if(!isReentry){
        /* Close existing tooltip only if the mouse is over a different element */
        hideGraphTooltip();
      }
      tooltipInfo.ixHover = ix;
      tooltipInfo.posX = e.x;
      tooltipInfo.posY = e.y;
      stopCloseTimer();
      if (!isReentry && tooltipInfo.dwellTimeout>0) {
        tooltipInfo.idTimer = setTimeout(function() {
          tooltipInfo.idTimer = 0;
          stopCloseTimer();
          showGraphTooltip();
        },tooltipInfo.dwellTimeout);
      }
    }
    else {
      /* The mouse is not over an element with a tooltip */
      tooltipInfo.ixHover = -1;
      resumeCloseTimer();
    }
  };
  topObj.onmouseleave = function(e) {
    /* Hide the tooltip if the mouse is outside the "timelineTableN" element,
................................................................................
    if(e.relatedTarget && e.relatedTarget != tooltipObj){
      tooltipInfo.ixHover = -1;
      hideGraphTooltip();
      stopDwellTimer();
      stopCloseTimer();
    }
  };

















  var canvasDiv;
  var railPitch;
  var mergeOffset;
  var node, arrow, arrowSmall, line, mArrow, mLine, wArrow, wLine;

  function initGraph(){
    var parent = topObj.rows[0].cells[1];
................................................................................
    if( p.u>0 ) drawUpArrow(p,tx.rowinfo[p.u-tx.iTopRow],p.fg,p.id);
    if( p.sb>0 ) drawDotted(p,tx.rowinfo[p.sb-tx.iTopRow],p.fg,p.id);
    var cls = node.cls;
    if( p.hasOwnProperty('mi') && p.mi.length ) cls += " merge";
    if( p.f&1 ) cls += " leaf";
    var n = drawBox(cls,p.bg,p.x,p.y);
    n.id = "tln"+p.id;
    addToolTip(n,p.id)
    n.onclick = clickOnNode;
    n.ondblclick = dblclickOnNode;

    n.style.zIndex = 10;
    if( !tx.omitDescenders ){
      if( p.u==0 ){
        if( p.hasOwnProperty('mo') && p.r==p.mo ){
          var ix = p.hasOwnProperty('cu') ? p.cu : p.mu;
          var top = tx.rowinfo[ix-tx.iTopRow]
          drawUpArrow(p,{x: p.x, y: top.y-node.h}, p.fg, p.id);
................................................................................
  function clickOnGraph(e){
    tooltipInfo.ixHover = findTxIndex(e);
    tooltipInfo.posX = e.x;
    tooltipInfo.posY = e.y;
    showGraphTooltip();
  }
  function showGraphTooltip(){

    if( tooltipInfo.ixHoever<0 ){
      hideGraphTooltip()





    }else{



      var ix = tooltipInfo.ixHover
      var br = tx.rowinfo[ix].br
      var dest = branchHyperlink(ix)
      var hbr = br.replace(/&/g, "&amp;")
         .replace(/</g, "&lt;")
         .replace(/>/g, "&gt;")
         .replace(/"/g, "&quot;")
         .replace(/'/g, "&#039;");




      /* Setup while hidden, to ensure proper dimensions. */
      tooltipObj.style.visibility = "hidden"
      tooltipObj.innerHTML = "<a href=\""+dest+"\">"+hbr+"</a>"
      tooltipObj.style.display = "inline"
      tooltipObj.style.position = "absolute"
      var x = tooltipInfo.posX + 4 + window.pageXOffset
      tooltipObj.style.left = x+"px"
      var y = tooltipInfo.posY + window.pageYOffset - tooltipObj.clientHeight - 4

      tooltipObj.style.top = y+"px"
      tooltipObj.style.visibility = "visible"
      tooltipInfo.ixActive = ix;


    }
  }
  function dblclickOnGraph(e){
    var ix = findTxIndex(e);
    var dest = branchHyperlink(ix)
    hideGraphTooltip()
    window.location.href = dest







>







 







<


<






<
<
<
<




|






<
|







 







>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>







 







<


>







 







>
|
<
>
>
>
>
>
|
>
>
>








>
>
>
>


|




|
>


<
>
>







99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
...
145
146
147
148
149
150
151

152
153

154
155
156
157
158
159




160
161
162
163
164
165
166
167
168
169
170

171
172
173
174
175
176
177
178
...
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
...
383
384
385
386
387
388
389

390
391
392
393
394
395
396
397
398
399
...
585
586
587
588
589
590
591
592
593

594
595
596
597
598
599
600
601
602
603
604
605
606
607
608
609
610
611
612
613
614
615
616
617
618
619
620
621
622
623
624
625

626
627
628
629
630
631
632
633
634
window.tooltipInfo = {
  dwellTimeout: 250,  /* The tooltip dwell timeout. */
  closeTimeout: 3000, /* The tooltip close timeout. */
  idTimer: 0,         /* The tooltip dwell timer id. */
  idTimerClose: 0,    /* The tooltip close timer id. */
  ixHover: -1,        /* The id of the element with the mouse. */
  ixActive: -1,       /* The id of the element with the tooltip. */
  nodeHover: null,    /* Graph node under mouse when ixHover==-2 */
  posX: 0, posY: 0    /* The last mouse position. */
};

/* Functions used to control the tooltip popup and its timer */
function hideGraphTooltip(){
  stopCloseTimer();
  tooltipObj.style.display = "none";
................................................................................
  topObj.onclick = clickOnGraph
  topObj.ondblclick = dblclickOnGraph
  topObj.onmousemove = function(e) {
    var ix = findTxIndex(e);
    topObj.style.cursor = (ix<0) ? "" : "pointer"
    /* Keep the already visible tooltip at a constant position, as long as the
    ** mouse is over the same element. */

    if(tooltipObj.style.display != "none"){
      if(ix == tooltipInfo.ixHover) return;

    }
    /* The tooltip is either not visible, or the mouse is over a different
    ** element, so clear the dwell timer, and record the new element id and
    ** mouse position. */
    stopDwellTimer();
    if(ix >= 0){




      tooltipInfo.ixHover = ix;
      tooltipInfo.posX = e.x;
      tooltipInfo.posY = e.y;
      stopCloseTimer();
      if(tooltipInfo.dwellTimeout>0){
        tooltipInfo.idTimer = setTimeout(function() {
          tooltipInfo.idTimer = 0;
          stopCloseTimer();
          showGraphTooltip();
        },tooltipInfo.dwellTimeout);
      }

    }else{
      /* The mouse is not over an element with a tooltip */
      tooltipInfo.ixHover = -1;
      resumeCloseTimer();
    }
  };
  topObj.onmouseleave = function(e) {
    /* Hide the tooltip if the mouse is outside the "timelineTableN" element,
................................................................................
    if(e.relatedTarget && e.relatedTarget != tooltipObj){
      tooltipInfo.ixHover = -1;
      hideGraphTooltip();
      stopDwellTimer();
      stopCloseTimer();
    }
  };
  function nodeHover(e){
    /* Invoked by mousemove events over a graph node */
    e.stopPropagation()
    if(tooltipInfo.ixHover==-2) return
    tooltipInfo.ixHover = -2
    tooltipInfo.posX = e.x
    tooltipInfo.posY = e.y
    tooltipInfo.nodeHover = this
    stopCloseTimer();
    if(tooltipInfo.dwellTimeout>0){
      tooltipInfo.idTimer = setTimeout(function() {
        tooltipInfo.idTimer = 0;
        stopCloseTimer();
        showGraphTooltip();
      },tooltipInfo.dwellTimeout);
    }
  }
  var canvasDiv;
  var railPitch;
  var mergeOffset;
  var node, arrow, arrowSmall, line, mArrow, mLine, wArrow, wLine;

  function initGraph(){
    var parent = topObj.rows[0].cells[1];
................................................................................
    if( p.u>0 ) drawUpArrow(p,tx.rowinfo[p.u-tx.iTopRow],p.fg,p.id);
    if( p.sb>0 ) drawDotted(p,tx.rowinfo[p.sb-tx.iTopRow],p.fg,p.id);
    var cls = node.cls;
    if( p.hasOwnProperty('mi') && p.mi.length ) cls += " merge";
    if( p.f&1 ) cls += " leaf";
    var n = drawBox(cls,p.bg,p.x,p.y);
    n.id = "tln"+p.id;

    n.onclick = clickOnNode;
    n.ondblclick = dblclickOnNode;
    n.onmousemove = nodeHover;
    n.style.zIndex = 10;
    if( !tx.omitDescenders ){
      if( p.u==0 ){
        if( p.hasOwnProperty('mo') && p.r==p.mo ){
          var ix = p.hasOwnProperty('cu') ? p.cu : p.mu;
          var top = tx.rowinfo[ix-tx.iTopRow]
          drawUpArrow(p,{x: p.x, y: top.y-node.h}, p.fg, p.id);
................................................................................
  function clickOnGraph(e){
    tooltipInfo.ixHover = findTxIndex(e);
    tooltipInfo.posX = e.x;
    tooltipInfo.posY = e.y;
    showGraphTooltip();
  }
  function showGraphTooltip(){
    var html = null
    if( tooltipInfo.ixHover==-2 ){

      var ix = parseInt(tooltipInfo.nodeHover.id.match(/\d+$/)[0],10)-tx.iTopRow
      var h = tx.rowinfo[ix].h
      var dest = tx.baseUrl + "/info/" + h
      if( tx.fileDiff ){
        html = "<a href=\""+dest+"\">artifact "+h+"</a>"
      }else{
        html = "<a href=\""+dest+"\">check-in "+h+"</a>"
      }
    }else if( tooltipInfo.ixHover>=0 ){
      var ix = tooltipInfo.ixHover
      var br = tx.rowinfo[ix].br
      var dest = branchHyperlink(ix)
      var hbr = br.replace(/&/g, "&amp;")
         .replace(/</g, "&lt;")
         .replace(/>/g, "&gt;")
         .replace(/"/g, "&quot;")
         .replace(/'/g, "&#039;");
      html = "<a href=\""+dest+"\">"+hbr+"</a>"
      tooltipInfo.ixActive = ix;
    }
    if( html ){
      /* Setup while hidden, to ensure proper dimensions. */
      tooltipObj.style.visibility = "hidden"
      tooltipObj.innerHTML = html
      tooltipObj.style.display = "inline"
      tooltipObj.style.position = "absolute"
      var x = tooltipInfo.posX + 4 + window.pageXOffset
      tooltipObj.style.left = x+"px"
      var y = tooltipInfo.posY + window.pageYOffset
                   - tooltipObj.clientHeight - 4
      tooltipObj.style.top = y+"px"
      tooltipObj.style.visibility = "visible"

    }else{
      hideGraphTooltip()
    }
  }
  function dblclickOnGraph(e){
    var ix = findTxIndex(e);
    var dest = branchHyperlink(ix)
    hideGraphTooltip()
    window.location.href = dest