Monitor - D3 Diagram

by Ben Clayton

HTML

<script src="//d3js.org/d3.v3.min.js"></script>
<script src="//unpkg.com/vue"></script>
<div class="contianer"></div>

CSS

.debug-nodes {
  z-index: 30;
  position: absolute;
  top: 20px;
  height: 600px;
  left: 20px;
  transition: max-width 1s, height 1s;
  right: 20px;
  border: 2px solid gray;
  background-color: rgba( 255, 255, 255, 0.95);
  overflow: hidden;
  padding: 10px;
  max-width: 2000px;
}
h4,h5,h3 {
  line-height:20px;
  -webkit-margin-before: 0.1em;
  -webkit-margin-after: 0.1em;
}
.debug-nodes .minimise {
  position: absolute;
  top: 0px;
  right: 0px;
  border: 1px solid black;
  width: 20px;
  text-align: center;
  z-index: 2;
}

.debug-nodes.minimised {
  left: 23px;
  top: 0px;
  height: 28px;
  max-width: 15px;
}

.debug-nodes.minimised h2 {
  visibility: hidden;
}

.debug-nodes .minimise::after {
  content: "X";
}

.debug-nodes.minimised .minimise::after {
  content: "D";
}

.debug-nodes .properties-panel {
  position: absolute;
  top: 0px;
  right: 0px;
  width: 150px;
  height: 598px;
  border: 1px solid black;
  background-color: rgba( 200, 200, 210, 0.5);
  padding: 10px;
  overflow: auto;
}

.debug-nodes.minimised .properties-panel {
  display: none;
}

@media only screen and ( min-height: 1900px) {
  .debug-nodes .properties-panel {
    display: none;
  }
}

.node circle {
  fill: #fff;
  stroke: steelblue;
  stroke-width: 2px;
}

.node text {
  font: 12px sans-serif;
}

.link {
  fill: none;
  stroke: #ccc;
  stroke-width: 1px;
}

.node .targetScreen {
  stroke: #000;
  stroke-width: 2px;
}

.debug-nodes .node .sequencer {
  fill: #fff;
  stroke: black;
  stroke-width: 2px;
}

.debug-nodes .sequencer-list td,
.debug-nodes .telemetry-list td,
.debug-nodes .requestevents-list td {
  border: 1px solid gray;
  padding: 2px 3px;
  line-height: 12px;
}

.debug-nodes .sequencer-list th {
  border: 1px solid gray;
  background-color: cornflowerblue;
  padding: 2px 3px;
  line-height: 12px;
}

.debug-nodes .requestevents-list th {
  border: 1px solid gray;
  background-color: pink;
  padding: 2px 3px;
  line-height: 12px;
}

.debug-nodes .telemetry-list th {
 ...

JavaScript

//========================================================================================
// Uses D3 to calculate node layout and draw the svg elements
//========================================================================================
"use strict";



class debugNodes {

  constructor() {
    this.offset = {};
    this.handlerOffsets = {};
    this.init();
  };

  init() {

    $('body .contianer').prepend(this.template());

    // ************** Generate the tree diagram	 *****************
    var margin = {
        top: 20,
        right: 120,
        bottom: 20,
        left: 60
      },
      width = 660 - margin.right - margin.left,
      height = 500 - margin.top - margin.bottom;

    this.tree = d3.layout.tree()
      .size([height, width]);

    this.diagonal = d3.svg.diagonal()
      .projection(function(d) {
        return [d.y, d.x];
      });

    this.svg = d3.select(".debug-nodes").append("svg")
      .attr("width", width + margin.right + margin.left)
      .attr("height", height + margin.top + margin.bottom)
      .append("g")
      .attr("transform", "translate( " + margin.left + "," + margin.top + " )");

    // Message sent to this node carrying a payload
    //   typical event trigger:
    //      $( ".debug-nodes" ).trigger( "idisplay.debug", { "action" : "render", "data" : debugNodesData } );

    $(".debug-nodes").on("idisplay.debug", function(e, params) {

      if (params.action == "render") {
        this.render(params.data);
      } else if (params.action == "show") {
        d3.select(".dbg-" + params.noderef).select("circle").style("fill", params.leaf ? "red" : "yellow");
      } else if (params.action == "hide") {
        d3.select(".dbg-" + params.noderef).select("circle").style("fill", "gray");
      } else if (params.action == "keypress") {
        this.showKey(params.noderef, params.handler, params.key);

      } else if (params.action == "flash-blob") {
        this.flashBlob(params.noderef, params.handler);
      }


  ...