re-frame trace

.block

license: mit
border: yes
scrolling: no

README.md

Built with blockbuilder.org

forked from anonymous's block: re-frame trace

abra.json

{
  "nodes": [
    {
      "id": "ra1",
      "title": "app-db",
      "group": 1,
      "r": 20,
      "fx": 15,
      "fy": 200
    },
    {
      "id": "rx40",
      "title": ":sorted-todos",
      "group": 2,
      "r": 10,
      "data": {
        "id": 131,
        "operation": "sorted-todos",
        "type": "create",
        "tags": {
          "query-v": [
            "sorted-todos"
          ],
          "cached?": false,
          "reaction": "rx40"
        },
        "child-of": 130,
        "start": 83603.75,
        "duration": 0.08500000000640284,
        "end": 83603.845
      }
    },
    {
      "id": "rx41",
      "title": ":todos",
      "group": 2,
      "r": 10,
      "data": {
        "id": 130,
        "operation": "todos",
        "type": "create",
        "tags": {
          "query-v": [
            "todos"
          ],
          "cached?": false,
          "reaction": "rx41"
        },
        "child-of": 129,
        "start": 83603.7,
        "duration": 0.9750000000058208,
        "end": 83604.70000000001
      }
    },
    {
      "id": "rx44",
      "title": ":showing",
      "group": 2,
      "r": 10,
      "data": {
        "id": 140,
        "operation": "showing",
        "type": "create",
        "tags": {
          "query-v": [
            "showing"
          ],
          "cached?": false,
          "reaction": "rx44"
        },
        "child-of": 138,
        "start": 83609.67000000001,
        "duration": 0.13999999999941792,
        "end": 83609.825
      }
    },
    {
      "id": "rx45",
      "title": ":visible-todos",
      "group": 2,
      "r": 10,
      "data": {
        "id": 138,
        "operation": "visible-todos",
        "type": "create",
        "tags": {
          "query-v": [
            "visible-todos"
          ],
          "cached?": false,
          "reaction": "rx45"
        },
        "child-of": 137,
        "start": 83609.41000000002,
        "duration": 0.5199999999895226,
        "end": 83609.94
      }
    },
    {
      "id": "rx46",
      "title": ":all-complete?",
      "group": 2,
      "r": 10,
      "data": {
        "id": 141,
        "operation": "all-complete?",
        "type": "create",
        "tags": {
          "query-v": [
            "all-complete?"
          ],
          "cached?": false,
          "reaction": "rx46"
        },
        "child-of": 137,
        "start": 83609.98500000002,
        "duration": 0.27499999999417923,
        "end": 83610.29500000001
      }
    },
    {
      "id": "rx49",
      "title": ":footer-counts",
      "group": 2,
      "r": 10,
      "data": {
        "id": 150,
        "operation": "footer-counts",
        "type": "create",
        "tags": {
          "query-v": [
            "footer-counts"
          ],
          "cached?": false,
          "reaction": "rx49"
        },
        "child-of": 149,
        "start": 83616.12500000001,
        "duration": 0.14999999999417923,
        "end": 83616.29000000001
      }
    },
    {
      "id": "rx50",
      "title": ":completed-count",
      "group": 2,
      "r": 10,
      "data": {
        "id": 154,
        "operation": "completed-count",
        "type": "create",
        "tags": {
          "query-v": [
            "completed-count"
          ],
          "cached?": false,
          "reaction": "rx50"
        },
        "child-of": 152,
        "start": 83616.565,
        "duration": 0.1900000000023283,
        "end": 83616.765
      }
    },
    {
      "id": "rx39",
      "title": "rx39 todomvc.core.wrapper",
      "group": 3,
      "r": 5,
      "data": {
        "id": 128,
        "operation": "todomvc.core.wrapper",
        "type": "render",
        "tags": {
          "component-path": "todomvc.core.wrapper",
          "reaction": "rx39",
          "input-signals": [
            "ra54"
          ]
        },
        "child-of": null,
        "start": 83602.46500000001,
        "duration": 0.7299999999959255,
        "end": 83603.205
      },
      "fx": 250
    },
    {
      "id": "rx42",
      "title": "rx42 todomvc.views.todo_app",
      "group": 3,
      "r": 5,
      "data": {
        "id": 129,
        "operation": "todomvc.views.todo_app",
        "type": "render",
        "tags": {
          "component-path": "todomvc.core.wrapper > todomvc.views.todo_app",
          "reaction": "rx42",
          "input-signals": [
            "rx41"
          ]
        },
        "child-of": null,
        "start": 83603.66500000001,
        "duration": 1.8300000000017462,
        "end": 83605.51000000001
      },
      "fx": 250
    },
    {
      "id": "rx43",
      "title": "rx43 todomvc.views.todo_input",
      "group": 3,
      "r": 5,
      "data": {
        "id": 135,
        "operation": "todomvc.views.todo_input",
        "type": "render",
        "tags": {
          "component-path": "todomvc.core.wrapper > todomvc.views.todo_app > todomvc.views.task_entry > todomvc.views.todo_input",
          "reaction": "rx43",
          "input-signals": [
            "ra55"
          ]
        },
        "child-of": null,
        "start": 83606.57,
        "duration": 0.8849999999947613,
        "end": 83607.47
      },
      "fx": 250
    },
    {
      "id": "rx47",
      "title": "rx47 todomvc.views.task_list",
      "group": 3,
      "r": 5,
      "data": {
        "id": 137,
        "operation": "todomvc.views.task_list",
        "type": "render",
        "tags": {
          "component-path": "todomvc.core.wrapper > todomvc.views.todo_app > todomvc.views.task_list",
          "reaction": "rx47",
          "input-signals": [
            "rx46",
            "rx45"
          ]
        },
        "child-of": null,
        "start": 83609.32500000001,
        "duration": 2.6199999999953434,
        "end": 83611.96500000001
      },
      "fx": 250
    },
    {
      "id": "rx48",
      "title": "rx48 todomvc.views.todo_item",
      "group": 3,
      "r": 5,
      "data": {
        "id": 147,
        "operation": "todomvc.views.todo_item",
        "type": "render",
        "tags": {
          "component-path": "todomvc.core.wrapper > todomvc.views.todo_app > todomvc.views.task_list > todomvc.views.todo_item",
          "reaction": "rx48",
          "input-signals": [
            "ra56",
            "ra56"
          ]
        },
        "child-of": null,
        "start": 83613.98000000001,
        "duration": 0.4999999999854481,
        "end": 83614.49500000001
      },
      "fx": 250
    },
    {
      "id": "rx51",
      "title": "rx51 todomvc.views.footer_controls",
      "group": 3,
      "r": 5,
      "data": {
        "id": 149,
        "operation": "todomvc.views.footer_controls",
        "type": "render",
        "tags": {
          "component-path": "todomvc.core.wrapper > todomvc.views.todo_app > todomvc.views.footer_controls",
          "reaction": "rx51",
          "input-signals": [
            "rx49",
            "rx44",
            "rx44",
            "rx44"
          ]
        },
        "child-of": null,
        "start": 83616.07500000001,
        "duration": 1.319999999992433,
        "end": 83617.405
      },
      "fx": 250
    }
  ],
  "links": [
    {
      "source": "rx41",
      "target": "rx46",
      "value": 1,
      "id": "rx41|rx46"
    },
    {
      "source": "ra1",
      "target": "rx40",
      "value": 1,
      "id": "ra1|rx40"
    },
    {
      "source": "rx50",
      "target": "rx49",
      "value": 1,
      "id": "rx50|rx49"
    },
    {
      "source": "rx44",
      "target": "rx45",
      "value": 1,
      "id": "rx44|rx45"
    },
    {
      "source": "rx41",
      "target": "rx50",
      "value": 1,
      "id": "rx41|rx50"
    },
    {
      "source": "rx40",
      "target": "rx41",
      "value": 1,
      "id": "rx40|rx41"
    },
    {
      "source": "rx41",
      "target": "rx49",
      "value": 1,
      "id": "rx41|rx49"
    },
    {
      "source": "rx41",
      "target": "rx45",
      "value": 1,
      "id": "rx41|rx45"
    },
    {
      "source": "ra1",
      "target": "rx44",
      "value": 1,
      "id": "ra1|rx44"
    },
    {
      "source": "rx41",
      "target": "rx42",
      "value": 0.5,
      "id": "rx41|rx42"
    },
    {
      "source": "rx46",
      "target": "rx47",
      "value": 0.5,
      "id": "rx46|rx47"
    },
    {
      "source": "rx45",
      "target": "rx47",
      "value": 0.5,
      "id": "rx45|rx47"
    },
    {
      "source": "rx49",
      "target": "rx51",
      "value": 0.5,
      "id": "rx49|rx51"
    },
    {
      "source": "rx44",
      "target": "rx51",
      "value": 0.5,
      "id": "rx44|rx51"
    }
  ]
}

index.html

<!DOCTYPE html>
<head>
  <meta charset="utf-8">
  <script src="https://d3js.org/d3.v4.min.js"></script>
<style>
        body {
            margin: 5;
            position: fixed;
            top: 0;
            right: 0;
            bottom: 0;
            left: 0;
        }

        .links line {
            stroke: #999;
            stroke-opacity: 0.6;
        }

        .nodes circle {
            stroke: #fff;
            stroke-width: 1.5px;
        }

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

    </style>
</head>

<body>
  <script>
    // Feel free to change or delete any of the code you see in this editor!

var width = 500
var height = 500

var svg = d3.select("body").append("svg")
  .attr("width", width)
  .attr("height", height)
  .style("border", "1px solid black")

var node, link

var color = d3.scaleOrdinal(d3.schemeCategory20);

var simulation = d3.forceSimulation()
  .force("link", d3.forceLink().id((d) => d.id).distance(() => 200))
  .force("charge", d3.forceManyBody())
  .force("center", d3.forceCenter(width / 2, height / 2));

function once() {
  svg.append("g").attr("class", "links")
  svg.append("g").attr("class", "nodes")
}

once()

function handleGraph(error, graph) {
  if (error) throw error;

  console.log("Handling graph")

  link = svg.select("g.links")
    .selectAll("line")
    .data(graph.links, (d) => d.id)

  var enterLink = link.enter().append("line")
    .attr("stroke-width", function(d) {
      return Math.sqrt(d.value);
    });

  link = enterLink.merge(link)

  node = svg.select("g.nodes")
    .selectAll(".node")

  var enterNode = node.data(graph.nodes, (d) => d.id)
    .enter().append("g")
    .attr("class", "node")
    .call(d3.drag()
      .on("start", dragstarted)
      .on("drag", dragged)
      .on("end", dragended));

  node = enterNode.merge(node)

  var circle = node.append("circle")
    .attr("r", 5)
    .attr("fill", function(d) {
      return color(d.group);
    })

  var text = node.append("text")
    .attr("dx", 12)
    .attr("dy", ".35em")
    .text((d) => d.title);

  var oldNodes = simulation.nodes()
  console.log(oldNodes)
    // if (oldNodes.length !== 0) {
    //   graph.nodes = oldNodes
    // }

  simulation
    .nodes(graph.nodes)
    .on("tick", ticked);


  simulation.force("link")
    .links(graph.links);

  function ticked() {
    link
      .attr("x1", function(d) {
        return d.source.x;
      })
      .attr("y1", function(d) {
        return d.source.y;
      })
      .attr("x2", function(d) {
        return d.target.x;
      })
      .attr("y2", function(d) {
        return d.target.y;
      });

    node.attr("transform", function(d) {
      return "translate(" + d.x + "," + d.y + ")";
    });
  }
}


d3.json("abra.json", handleGraph);
window.setTimeout(() => d3.json("abra.json", handleGraph), 3000)

function dragstarted(d) {
  if (!d3.event.active) simulation.alphaTarget(0.3).restart();
  d.fx = d.x;
  d.fy = d.y;
}

function dragged(d) {
  d.fx = d3.event.x;
  d.fy = d3.event.y;
}

function dragended(d) {
  if (!d3.event.active) simulation.alphaTarget(0);
  d.fx = null;
  d.fy = null;
}

  </script>
</body>