vis.html

<!DOCTYPE html>
<html lang="en">
  <head>
    <title>EspruinoMemView</title>

    <!--https://visjs.github.io/vis-network/docs/network/-->
    <script type="text/javascript" src="lib/vis-network.min.js"></script> <!-- https://visjs.github.io/vis-network/standalone/umd/vis-network.min.js -->
    <script src="https://www.espruino.com/js/uart.js"></script>

    <style type="text/css">
      #mynetwork {
        width: 100%;
        height: 1000px;
        border: 1px solid lightgray;
      }
    </style>
  </head>
  <body>
    <p id="instructions"><b>Espruino Memory Usage Visualiser</b> <a href="https://espruino.github.io/EspruinoMemView">More Info</a>- click <button id="connect">Connect</button> and a graph of all vars is shown.</p>
    <p id="diffinstructions" style="display:none">Click <button id="diff">Diff</button> to read again (<input type="checkbox" id="diffgc" checked></input>GC?), and to colour only <b>new variables</b></p>
    <button id="clearpath" style="display:none;">Clear Highlighted Path</button>
    <pre id="info"></pre>
    <div id="mynetwork"></div>
    <script type="text/javascript">

      var response = []; // data from E.dumpVariables()
      var headers = {}; // map of data name to CSV index - ref,size,name,links...

      // for debug - list of nodes
      var nodeList = [];
      var edgeList = [];
      // the actual network
      var network;


      var container = document.getElementById("mynetwork");
      var infoDiv = document.getElementById("info");
      var clearBtn = document.getElementById("clearpath");

      clearBtn.onclick = function () {
        clearPathHighlight();
      };

      function log(txt) {
        infoDiv.innerText = txt;
      }

      function getTitle() {
        var c, r, t;
        t = document.createElement('table');
        for (var i = 0; i < arguments.length; i+=2) {
          var key = arguments[i];
          var value = arguments[i + 1];
          if (value && value != "") {
            r = t.insertRow(-1);
            c = r.insertCell(0);
            c.innerHTML = String(key + ":");
            c = r.insertCell(1);
            c.innerHTML = String(value);
          }
        }
        return t;
      }

      UART.debug=3;
      document.getElementById("connect").onclick = function() {
        document.getElementById("instructions").style = "display:none";
        log("Connecting...");
        UART.write("\x03", function() {
          log("Reading variables...");
          setTimeout(function() {
            requestVariables(true/*gc*/).then(() => handleResponse());
          }, 500);
        });
      };

      document.getElementById("diff").onclick = function() {
        document.getElementById("diffinstructions").style = "display:none";
        let oldNodes = nodeList;
        nodeList = [];
        log("Reading variables...");
        let gcFirst = document.getElementById("diffgc").checked;
        requestVariables(gcFirst).then(response => {
          handleResponse(oldNodes);
        });
      }

      function requestVariables(gcFirst) {
        // process.memory(); forces a GC, just in case we had floating vars that needed a clean up
        return new Promise((resolve,reject) => {
          UART.write(`\x03\x10${gcFirst?"process.memory();":""}E.dumpVariables()\n`, function(r) {
            response = r.trim().split("\n").map(l=>l.trim());
            headers = {};
            response.shift().split(",").forEach((v,n) => headers[v]=n); // ref,size,name,links...
            if (headers.ref!==0) {
              log("Unexpected data received");
              console.log("Invalid data : "+ JSON.stringify(r));
              document.getElementById("instructions").style = "";
              return reject();
            }
            log("Got Data ("+response.length+" items)");
            resolve(response);
          });
        });
      }

      // Follow ownedBy chain from nodeId back to ROOT, return highlighted edge IDs
      function findPathToRoot(nodeId) {
        var edgeIds = [];
        var seen = {};
        seen[nodeId] = true;
        while (nodeId !== 1 && nodeId !== 3) {
          var node = nodeList.find(function(n) { return n.id === nodeId; });
          if (!node || node.ownedBy === undefined || node.ownedBy === null) break;
          var parent = node.ownedBy;
          var edge = edgeList.find(function(e) {
            return !e.isConnectingNode && e.from === parent && e.to === nodeId;
          });
          if (edge) edgeIds.push(edge.id);
          if (seen[parent]) break;
          seen[parent] = true;
          nodeId = parent;
        }
        return edgeIds;
      }

      // Track highlighted edges and their original styles so we can reset them
      var _highlightedEdges = [];

      function clearPathHighlight() {
        if (!_highlightedEdges.length || !network) return;
        network.body.data.edges.update(_highlightedEdges.map(function(h) { return h.orig; }));
        _highlightedEdges = [];
        clearBtn.style.display = "none";
      }

      function highlightPathEdges(edgeIds) {
        clearPathHighlight();
        if (!edgeIds.length) return;
        _highlightedEdges = edgeIds.map(function(id) {
          var edge = edgeList.find(function(e) { return e.id === id; });
          return {
            id: id,
            orig: { id: id, width: edge ? edge.width : undefined, color: edge ? edge.color : undefined, dashes: edge ? edge.dashes : undefined }
          };
        });
        network.body.data.edges.update(edgeIds.map(function(id) {
          return { id: id, width: 10, color: "#5b9bd5", dashes: true };
        }));
        clearBtn.style.display = "inline-block";
      }



      function handleResponse(oldNodes) {
        nodeList = [];
        edgeList = [];

        response.forEach(rl=> {
          var l = rl.split(",");
          var id = parseInt(l[headers.ref]),
              size = parseInt(l[headers.size]),
//              name = l[headers.name] ? l[headers.name].replace('"', '').replace('\"','') : "",
              name = l[headers.name],
              flags = headers.flags ? parseInt(l[headers.flags]) : undefined;
          var node = {
            id:id,
            label : name,
            value : size,
            title: getTitle("Name", name, "Size", size, "Flags", flags),
            flags : flags // not used for vis, this is just for us
           };
          if (id==1) { node.label="ROOT"; node.color = "red"; }
          if (id==3) { node.label="HIDDENROOT?"; node.color = "red"; }
          if (oldNodes && oldNodes.find(n=>n.id==id))
            node.color = "grey";
          if (!isNaN(node.id)) {
            nodeList.push(node);
          }
          var lastNode;
          for (var i=headers["links..."];i< l.length;i++)
            if (l[i]!="") {
              var currNode = parseInt(l[i]);
              edgeList.push({
                from : id,
                to : currNode,
                arrows: "to"
              });
              if (lastNode)
                edgeList.push({ // a connecting edge
                  from : lastNode,
                  to : currNode,
                  color : "grey",
                  length: 5,
                  isConnectingNode : true
                });
              lastNode = currNode;
            }
        });
        // Create 'ownedBy' based on edgeList
        log("Propagating edgess...");
        edgeList.forEach(edge => {
          if (edge.isConnectingNode) return;
          let n = nodeList.find(n => n.id == edge.to);
          if (n) n.ownedBy = edge.from;
        });
        // Name merging
        log("Merging names...");
        nodeList.forEach(node => {
          if (node.label=="") return; // don't care
          var linksOut = edgeList.filter(e=>e.from == node.id);
          if (linksOut.length != 1) return; // only interested in single links
          var linkTo = nodeList.find(n=>n.id==linksOut[0].to);
          if (linkTo===undefined) {
            console.log("linkTo not found for "+node.id);
            return;
          }
          if (linkTo.label != "") return; // only interested in links to non-names
          var linksInTo = edgeList.filter(e=>e.to == linkTo.id);
          if (linksInTo.length != 1) return; // we only care about single point->point items
          console.log("Combining name ",node," to link ",linkTo);
          linkTo.label = node.label;
          linkTo.value += node.value;
          edgeList = edgeList.filter(e=>{
            if (e.to == node.id) e.to = linkTo.id;
            return e.from != node.id;
          });
          nodeList = nodeList.filter( n => n.id!=node.id );
        });

        // Property-value merging: combine property-name nodes with their value nodes
        // e.g. "myObject" > Object becomes "myObject": Object
        log("Merging property-value pairs...");
        var merges = []; // collect candidates first to avoid mutating during iteration
        nodeList.forEach(function(node) {
          if (!node.label) return;
          if (node.color === "red") return;
          var linksOut = edgeList.filter(function(e) { return !e.isConnectingNode && e.from === node.id; });
          if (linksOut.length !== 1) return;
          var linkTo = nodeList.find(function(n) { return n.id === linksOut[0].to; });
          if (!linkTo || !linkTo.label) return;
          if (linkTo.color === "red") return;
          var linksInTo = edgeList.filter(function(e) { return !e.isConnectingNode && e.to === linkTo.id; });
          if (linksInTo.length !== 1) return;
          merges.push({ prop: node, value: linkTo });
        });
        merges.forEach(function(m) {
          var node = m.prop, linkTo = m.value;
          // Verify both nodes still exist (earlier merges may have consumed one)
          if (nodeList.indexOf(node) === -1 || nodeList.indexOf(linkTo) === -1) return;
          console.log("Combining property ", node.label, " with value ", linkTo.label);
          node.label = node.label + ": " + linkTo.label;
          node.value += linkTo.value;
          node.shape = "diamond"; // TODO: Could perhaps use different shapes per data type?
          node.title = getTitle("Name", node.label, "Size", node.value, "Flags", node.flags);
          edgeList = edgeList.filter(function(e) { return !(e.from === node.id && e.to === linkTo.id && !e.isConnectingNode); });
          edgeList.forEach(function(e) {
            if (e.from === linkTo.id) e.from = node.id;
            if (e.to === linkTo.id) e.to = node.id;
          });
          nodeList.forEach(function(n) {
            if (n.ownedBy === linkTo.id) n.ownedBy = node.id;
          });
          nodeList = nodeList.filter(function(n) { return n.id !== linkTo.id; });
        });
        // labelling
        nodeList.forEach(node => {
          if (node.color != "grey" && node.flags==7) {
            node.color = "green";
            /*edgeList.forEach(e=>{
              if (e.from = node.id) ...
            });*/
          }
          let path = [];
          let parentHistory = [];
          let parent = nodeList.find(n => n.id == node.ownedBy);
          while (parent) {
            if (parent.label=="Object" || parent.label=="ROOT") { // try and format links via objects
              let n = path[0];
              try { n = JSON.parse(path[0]); } catch {};
              path[0] = "."+n;
              if (parent.label=="ROOT") path.unshift("global");
            } else if (parent.label=="Array") {
              let n = path[0];
              try {
                let v = JSON.parse(path[0]);
                if (isFinite(v)) n=v;
              } catch {};
              path[0] = "["+n+"]";
            } else path.unshift(parent.label);
            if (parentHistory.includes(parent.ownedBy)) {
              path.unshift("...");
              parent = undefined; // stop recursive loops
            } else {
              parentHistory.push(parent.ownedBy);
              parent = nodeList.find(n => n.id == parent.ownedBy);
            }
          }
          node.path = path.join("");
        });

        // Find and highlight circular dependency edges in orange
        log("Finding circular references...");
        var adj = {};
        nodeList.forEach(function(n) { adj[n.id] = []; });
        edgeList.forEach(function(edge) {
          if (edge.isConnectingNode) return;
          if (adj[edge.from]) adj[edge.from].push(edge);
        });
        var WHITE = 0, GRAY = 1, BLACK = 2;
        var color = {};
        var parent = {};
        var cycleEdges = [];
        nodeList.forEach(function(n) { color[n.id] = WHITE; });
        function dfsCycleDetect(u) {
          color[u] = GRAY;
          (adj[u] || []).forEach(function(edge) {
            var v = edge.to;
            if (color[v] === GRAY) {
              // Found a back edge — this edge completes a cycle
              cycleEdges.push(edge);
              // Walk parent pointers back from u to v to catch all cycle edges
              var curr = u;
              while (curr !== v) {
                var parentEdge = parent[curr];
                if (parentEdge) {
                  cycleEdges.push(parentEdge);
                  curr = parentEdge.from;
                } else {
                  break;
                }
              }
            }
            if (color[v] === WHITE) {
              parent[v] = edge;
              dfsCycleDetect(v);
            }
          });
          color[u] = BLACK;
        }
        Object.keys(adj).forEach(function(id) {
          if (color[id] === WHITE) dfsCycleDetect(parseInt(id));
        });
        cycleEdges.forEach(function(edge) {
          edge.color = "#f0a030";
          edge.dashes = true;
          edge.width = 2;
        });
        log(`Found ${cycleEdges.length} circular reference edge(s)`);
        // Assign IDs to every edge for edge highlighting
        edgeList.forEach(function(edge, i) { edge.id = i + 1; });
        createNetwork(oldNodes);
      }

      function createNetwork(oldNodes) {
        log("Creating network...");
        var data = {
          nodes: new vis.DataSet(nodeList),
          edges: new vis.DataSet(edgeList),
        };
        var options = {
          nodes: {
            shape: "dot",
            scaling : { min:16, max:48 }
          },
          physics: {
            forceAtlas2Based: {
              gravitationalConstant: -60,
              centralGravity: 0.01,
              springLength: 40,
              springConstant: 0.6,
              damping: 0.35,
            },
            maxVelocity: 250,
            solver: "forceAtlas2Based",
            timestep: 0.35,
            stabilization: {
              enabled:true, iterations: 250, updateInterval: 25,
            },
          }
        };
        network = new vis.Network(container, data, options);
        network.on("stabilizationProgress", function (params) {
          var percent = Math.round(100 * params.iterations / params.total);
          infoDiv.innerText = "Calculating "+percent+"%";
        });
        network.once("stabilizationIterationsDone", function () {
          // Switch to less crazy physics to prevent weird vibration, maybe
          network.setOptions({
            physics: {
              forceAtlas2Based: {
                gravitationalConstant: -60,
                centralGravity: 0.01,
                springLength: 40,
                springConstant: 0.6,
                damping: 0.85,
              },
              maxVelocity: 15,
              timestep: 0.35,
              stabilization: false,
            }
          });
          infoDiv.innerText = "Ready";
          if (!oldNodes) document.getElementById("diffinstructions").style = "display:inherit";
        });
        network.on("click", function (e) {
          clearPathHighlight();
          if (e.nodes.length === 1) {
            highlightPathEdges(findPathToRoot(e.nodes[0]));
          }
          infoDiv.innerText = JSON.stringify(e.nodes.map(function(n) { return nodeList.find(function(l) { return l.id === n; }); }), null, 2);
        });
        log("Network created");
      }

    </script>
  </body>
</html>