call_graph_highlight_plugin.xml

<!--
The following is the call graph plugin.

Copyright 2022, Gavin Chou, gavineaglechou@gmail.com
http://github.com/gavinchou/dot-build-tool.git

Permission is hereby granted, free of charge, to any person obtaining a copy of
this software and associated documentation files (the "Software"), to deal in
the Software without restriction, including without limitation the rights to
use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of
the Software, and to permit persons to whom the Software is furnished to do so,
subject to the following conditions:

The above copyright notice and this permission notice shall be included in all
copies or substantial portions of the Software.

THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS
FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR
COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER
IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN
CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
-->

<!-- TODO: use pushState to solve in-page nevigation/redirect -->

<style>
.highlight-node {
  fill: #ffaaaa;
}
.highlight-node:hover {
  fill: #ffaaaa88;
}
.highlight-text {
  fill: #000000
}
.fade {
  opacity: 0.2;
}
.fade:hover {
  opacity: 1.0;
}
.arrow-path {
  stroke: #ee7777;
}
.arrow-head-tail {
  fill: #ee7777;
  stroke: #ee7777;
}
</style>
<!-- Local script first, fall back if failed -->
<script xlink:href="https://code.jquery.com/jquery-3.4.0.min.js"></script>
<script><![CDATA[
  // Failed to execute 'write' on 'Document': Only HTML documents support write()
  // window.jQuery || document.write('<script xlink:href="https://code.jquery.com/jquery-3.4.0.min.js"></script>')
  // This works in console but not here
  // window.jQuery || import("https://code.jquery.com/jquery-3.4.0.min.js");
]]></script>
<script>
<![CDATA[

// configure to switch highlight effect
const HIGHLIGHT = 1;
const FADE = 2;
// configure to change highlight direction, default upwards
const UPWARDS = 1;
const DOWNWARDS = 2;

var style = HIGHLIGHT;
var gDontShowInstruction = false;
var gResizeViewOnLoad = false;
var gHighlightDirection = UPWARDS;
var gDisableZooming = false; // force user to use browser's zooming function

function processClick() {
  var allNodes = $('.node');
  var allEdges = $('.edge');
  var allNodeTitles = allNodes.find('title');
  var allEdgeTitles = allEdges.find('title');
  var nodeAreas = allNodes.find('[fill]'); // including text

  var urlParams = new URLSearchParams(location.search);
  var s = urlParams.get("highlightStyle");
  if (s != null) {
    style = s == "fade" ? FADE : (s == "highlight" ? HIGHLIGHT : style);
  }

  var nonHiClass = style == FADE ? 'fade' : 'none';
  var hiClass = style == FADE ? 'none' : 'highlight-node';
  var hiClassText = style == FADE ? 'none' : 'highlight-text';
  var arrowPathClass = style == FADE ? 'none' : 'arrow-path';
  var arrowHeadTailClass = style == FADE ? 'none'  : 'arrow-head-tail';
  var arrowTextClass = 'none'; // always remains none;

  // TODO: only nodes and edges, which can be recorded and modified, should be
  //       considered
  clearHighlight = function() {
    allNodes.each(function(index) {
//       $(this).find('[fill]:not(text)').attr('class', nonHiClass);
      $(this).find('*').attr('class', nonHiClass);
    });
    allEdges.each(function(index) {
      $(this).find('*').attr('class', nonHiClass);
    });
  }

  nodeAreas.click(function() {
    clearHighlight();
    // highlight current node first
    $(this).parent().find('[fill]:not(text)').attr('class', hiClass);
    $(this).parent().find('text').attr('class', hiClassText);
    // console.log($(this).parent());
    var highlight = function(title) {
      // FIXME: This algorithm is not efficitent enough, the current process is
      //        to build a subgraph/subtree every time a node is clicked.
      //        We may need to build a diagraph in-memory with allEdge and
      //        allNodes, and then search that DAG to eliminate repeated
      //        global search.
      allEdgeTitles.each(function(index) { // search all adj. nodes
        // console.log($(this).text());
        // Process wired names with arrows and colons
        // a:b->c:d => e:f->g::
        var edgeText = $(this).text();
        var posArrow = [];
        for (var i = 0; i < edgeText.length; ++i) {
          if (i < edgeText.length - 1
              && edgeText[i] == '-' && edgeText[i + 1] == '>') {
            posArrow.push(i);
          }
        }
        // console.log(posArrow);

        var from = null;
        var to = null;
        var fromMatched = false;
        var toMatched = false;
        for (var i in posArrow) {
          from = [edgeText.substr(0, posArrow[i])];
          to = [edgeText.substr(posArrow[i] + 2)];
          // ATTN: port name must not contain ':', of course we can resolve that
          //       case here, however, it is unnecessary.
          var c = from[0].lastIndexOf(':');
          if (c >= 0) from.push(from[0].substr(0, c));
          var d = to[0].lastIndexOf(':');
          if (d >= 0) to.push(to[0].substr(0, d));
          for (var j = from.length - 1; j >= 0; --j) { // guess without port first
            if (from[j] === title) { // current edge: thisNode(title) -> otherNode
              fromMatched = true;
              break;
            }
          }
          for (var k = to.length - 1; k >= 0; --k) {
            if (to[k] === title) { // current edge: otherNode -> thisNode(title)
              toMatched = true;
              break;
            }
          }
          if (fromMatched || toMatched) break;
          // console.log(from + " => " + to + " @ " + title);
        }
        var nextNode = []; // POSSIBLE nextNode titles
        if (fromMatched) {
          if (gHighlightDirection == DOWNWARDS) nextNode = to; // search downwards
        } else if (toMatched) {
          if (gHighlightDirection == UPWARDS) nextNode = from; // search upwards
        } else {
          return; // nothing matched we are done
        }
        // console.log(nextNode);

        // Highlight current edge/arrow.
        // The first level and the last level edge highlight are unnecessary
        if (nextNode.length != 0) {
          $(this).parent().find('path').attr('class', arrowPathClass);
          $(this).parent().find('polygon').attr('class', arrowHeadTailClass);
          $(this).parent().find('ellipse').attr('class', arrowHeadTailClass);
          $(this).parent().find('text').attr('class', arrowTextClass);
        }

        // We have to try out all possible titles due to possible colons in the
        // node name
        for (var i in nextNode) {
          var done = false;
          allNodeTitles.each(function(index) {
            // Filter out unrelated nodes
            if (!($(this).text() === nextNode[i])) return;
            done = true; // We are done trying searching next node
            if ($(this).parent().find('[fill]').attr('class') === hiClass) return;
            $(this).parent().find('[fill]:not(text)').attr('class', hiClass);
            $(this).parent().find('text').attr('class', hiClassText);
            highlight(nextNode[i]);
          });
          if (done) break;
        }
      });
    };
    var clickedTitle = $(this).parent().find('title').text();
    highlight(clickedTitle);
  });

  // cancel highlight
  window.addEventListener("keyup", function(evt) {
    if (evt.defaultPrevented || evt.key != "Escape") {
      return;
    }
    clearHighlight();
    evt.preventDefault();
  }, {passive: false});
}


scaleX = 1
scaleY = 1
scaleStep = 0.20
lastZoom = -1
const minZoomInterval = 30.0

// 1mm ≅ 3.7795px
// 1pt ≅ 1.3333px
// 1in = 96px
// 1pc = 16px
function pixelFactor(unit) {
  if (unit == null || unit == "" || unit == "px") return 1;
  if (unit == "pt") return 1.3333;
  if (unit == "in") return 96;
  if (unit == "pc") return 16;
  return 1;
}

/**
 * TODO: resize with certain scale, and zooming process depends on this method
 * 
 * @param svg the svg to resize
 * @relies
 */
function resizeView(svg) {
  if (gDisableZooming || !gResizeViewOnLoad) return;
  var windowWidth = window.innerWidth; // window height and width are measured in px
  var windowHeight = window.innerHeight;
  var unit = svg.attr('width').substr(-2);
  if (!isNaN(parseInt(unit))) unit = "";
  var svgWidth = parseInt(svg.attr('width').substr(0, svg.attr('width').length - unit.length));
  var svgHeight = parseInt(svg.attr('height').substr(0, svg.attr('height').length - unit.length));

  var scale = Math.min(windowWidth / svgWidth, windowHeight / svgHeight);
  svgWidth = Math.floor(svgWidth * scale) / pixelFactor(unit);
  svgHeight = Math.floor(svgHeight * scale) / pixelFactor(unit);

  svg.attr('width',  svgWidth + unit);
  svg.attr('height', svgHeight + unit);
}

function processZoom() {
  svg = $('svg');

  resizeView(svg);

  scaleX = parseInt(svg.attr('width').substr(0, svg.attr('width').length - 2))
  scaleY = parseInt(svg.attr('height').substr(0, svg.attr('height').length - 2))

  wheelHandle = function (evt) {
    if (evt.ctrlKey == true) {
      if (gDisableZooming) {
        console.log("zooming is disabled, plz use browser's zooming function");
        return true; // do not consume the event
      }
      evt.preventDefault();
      // console.log(
      //        evt.wheelDelta + ' ' + Date.now() + ' ' + scaleX + ' ' + scaleY)
      if (lastZoom > 0 && Date.now() - lastZoom < minZoomInterval) {
        return false
      }
      rate = 0;
      if (evt.wheelDelta / 120 > 0) {
        // zoom in
        rate = scaleStep
        // console.log('scroll up');
        rate = (1 + scaleStep)
      } else {
        // zoom out
        // console.log('scroll down');
        rate = 1 / (1 + scaleStep)
      }
      scaleX = parseInt(scaleX * rate + 0.5)
      scaleY = parseInt(scaleY * rate + 0.5)

      svg.attr('width', scaleX + 'pt')
      svg.attr('height', scaleY + 'pt')
      // console.log('new size ' + scaleX + ' ' + scaleY + ' ' + evt.screenX
      //              + ' ' + evt.screenY)

      // get pointer offset in view ratio offset within svg
      // the ratio of cursor's position to the svg's top-left remains the same
      // after zooming/scrolling:
      // oldCursorX / oldSvgWidth == newCursorX / newSvgWidth
      // oldCursorY / oldSvgHeight == newCursorY / newSvgHeight
      // newSvgWidth / oldSvgWidth == rate
      //
      // ATTN: If the window is at the bottom-right corner of svg, we SHOULD NOT
      //       move scroll bar when zoom out, because it's the very last screen
      //       to display.
      //
      //           <        svgWidth          >       x: cursor position 
      //         ^ +--------------------------+          relitive to window
      //           |                          |
      //           |      +---------------+   |<-scrollY ^
      //           |      |               |   |
      // svgHeight |      |      (cx,cy)  |   |       winHeight
      //           |      |         x     |   |
      //           |      +---------------+   |          v
      //           |                          |
      //         v +--------------------------+
      //                  ^
      //               scrollX
      //                  <    winWidth   >
      //

      oldScrollX = window.pageXOffset
      oldScrollY = window.pageYOffset
      var scrollX = oldScrollX
      var scrollY = oldScrollY

      if (scaleX * pixelFactor('pt') > window.innerWidth 
          && (rate > 1
            || 1*window.innerWidth + oldScrollX < document.documentElement.scrollWidth)) { // last screen
          scrollX = parseInt((oldScrollX + evt.screenX)*rate - evt.screenX + 0.5);
      }
      if (scaleY * pixelFactor('pt') > window.innerHeight
          && (rate > 1
            || 1*window.innerHeight + oldScrollY < document.documentElement.scrollHeight)) { // last screen
        scrollY = parseInt((oldScrollY + evt.screenY)*rate - evt.screenY + 0.5) ;
      }
      window.scroll({top: scrollY, left: scrollX, behavor: 'smooth'})
      // console.log('scroll to fit cursor ' + scrollX + ' ' + scrollY);

      lastZoom = Date.now()

      // consume the event
      return false
    }
    return true
  }
  window.addEventListener("mousewheel", wheelHandle, {passive: false});
}

function updateConf() {
  // Update conf from graph data.
  // Config format example:
  // __graph_js_config__ [label="gDontShowInstruction=true;gResizeViewOnLoad=true;" shape=plaintext fontcolor="#00000001" id="\N"]
  var graphConf = document.getElementById("__graph_js_config__");
  while (graphConf != null) {
    graphConf.setAttribute("style", "display:none"); // make it invisable
    graphConf = graphConf.getElementsByTagName("text");
    if (graphConf.length < 1) break;
    graphConf = graphConf[0];
    console.log(graphConf);
    try { eval(graphConf.innerHTML); }
    catch(e) { console.log("__graph_js_config__ error."); console.log(e); };
    break;
  }

  // What the user defined in url is the highest priority.
  // Update conf from search string
  var urlParams = new URLSearchParams(location.search);

  // Only "true", "false" and "" are accepted.
  // If the flag is given with no value ("") assigned, it intends to be true
  const getBoolValue = function(name, origVal) {
    var v = !urlParams.get(name) ? "" : urlParams.get(name).toLowerCase();
    return v == "true" || urlParams.get(name) == "" ? true : (v == "false" ? false : origVal);
  };
  gDontShowInstruction = getBoolValue("dontShowInstruction", gDontShowInstruction);
  gResizeViewOnLoad = getBoolValue("resizeViewOnLoad", gResizeViewOnLoad);
  gDisableZooming = getBoolValue("disableZooming", gDisableZooming);

  var hd = urlParams.get("highlightDirection");
  if (hd != null) {
    if (hd == "UPWARDS" || hd == "upwards" || hd == 1) {
      gHighlightDirection = UPWARDS;
    } else if (hd == "DOWNWARDS" || hd == "downwards" || hd == 2) {
      gHighlightDirection = DOWNWARDS;
    } else {
      console.log("not supported value: " + hd + " for gHighlightDirection");
    }
  }
}

async function showInstruction() {
  if (gDontShowInstruction) return;
  inst = "* click any node to highlight specific path\n"
       + "* press ESC to cancel highlight\n"
       + "* ctrl+scroll to zoom in/out";
  var svg = document.getElementsByTagName('svg')[0];
  var rect = document.createElementNS('http://www.w3.org/2000/svg', 'rect');
  // Use fixed dimenssion to skip determining of transformation of the svg.
  rect.setAttribute('height', 10000); // svg.getAttribute('height')
  rect.setAttribute('width', 10000); // svg.getAttribute('width')
  rect.setAttribute('style', "fill:#555555ee");
  rect.setAttribute('id', "__highlight_instruction__");
  (async () => { svg.appendChild(rect); })();
  await sleep(100); // Tricy: sleep is needed, don't know why, but it works...
  alert(inst);
  (async () => { svg.removeChild(rect); })();
}

var sleep = (delay_ms) => { return new Promise(r => setTimeout(r, delay_ms)); };

/**
 * Focus to (scroll into view) the first element with tag
 * `<title>The title</title>`
 * The tag title is the node name in graphviz, which should be unique, if not,
 * we keep it ambiguous and focus to the first occurence.
 *
 * @param title title content
 */
async function focusElement(title) {
  // Node name is title.
  // We can also find edge by title, edge arrow "->" in html is "-&gt;"
  for (var i of document.getElementsByTagName("title")) { 
    // console.log(i.innerHTML + " == " + title);
    if (i.innerHTML != title) continue;
    var p = i.parentElement;

    // behavior Optional:
    // Defines the transition animation. One of auto or smooth. Defaults to auto.
    // block Optional:
    // Defines vertical alignment. One of start, center, end, or nearest. Defaults to start.
    // inline Optional:
    // Defines horizontal alignment. One of start, center, end, or nearest. Defaults to nearest.
    p.scrollIntoView({behavior: "smooth", block: "center", inline: "center"});

    var n = 5;
    var flash = async () => {
      var backup = p.getAttribute("style");
      while (n--) {
        p.setAttribute("style", "display:none") // disappear
        await sleep(200);
        p.setAttribute("style", backup) // appear
        await sleep(500);
      }
    };
    flash();
    // break; // we can continue without breaking for multiple elments
  }
}

function processFocus() {
  var urlParams = new URLSearchParams(location.search);
  var s = urlParams.get("focus");
  if (s == null || s.length < 1) {
    return;
  }
  focusElement(s);
}

$(document).ready(function() {
  updateConf();
  processClick();
  processZoom();
  processFocus();
  showInstruction();
});

]]>
</script>
<!--
vim: et ts=2 sw=2 ft=javascript:
-->