@@style(io/reactors/debugger/lib/bootstrap/css/bootstrap.min.css)
@@library(io/reactors/debugger/js/util.js)
@@library(io/reactors/debugger/js/animation.js)
@@library(io/reactors/debugger/js/event-bus.js)
@@library(io/reactors/debugger/lib/jquery/jquery-1.12.4.min.js)
@@library(io/reactors/debugger/lib/bootstrap/js/bootstrap.min.js)
@@library(io/reactors/debugger/lib/sigmajs/sigma.js)
@@library(io/reactors/debugger/lib/sigmajs/plugins/sigma.plugins.animate.min.js)
@@library(io/reactors/debugger/lib/sigmajs/plugins/sigma.layout.forceAtlas2.min.js)


<template id="x-graph">
  <div :class="'x-graph-root ' + canvasClass">
    <div :id="'x-graph-sigma-' + uid" class="x-graph-sigma">
    </div>
  </div>
</template>


<script>
  var Graph = Vue.extend({
    template: "#x-graph",
    props: ["ctx", "config", "model", "events", "canvasClass"],
    data: function() {
      return {
        uid: Uid.num(),
        subscriptions: [],
        layoutRequested: false
      };
    },
    attached: function() {
      this.ctx._graph = this;

      var style = window.getComputedStyle(document.body);

      sigma.classes.graph.addMethod('getNodeCount', function() {
        return this.nodesArray.length;
      });
      this.sigma = new sigma({
        container: "x-graph-sigma-" + this.uid,
        settings: {
          borderSize: 1,
          defaultNodeBorderColor:
            style.getPropertyValue("--graph-node-hover-border-color"),
          defaultNodeColor: style.getPropertyValue("--graph-node-color"),
          defaultLabelColor: style.getPropertyValue("--graph-label-color"),
          defaultHoverLabelBGColor:
            style.getPropertyValue("--graph-label-hover-background-color"),
          defaultLabelHoverColor:
            style.getPropertyValue("--graph-label-hover-color"),
          minEdgeSize: 0.15,
          maxEdgeSize: 0.35,
          autoRescale: false,
          minArrowSize: 5,
          batchEdgesDrawing: true,
          hideEdgesOnMove: true,
          zoomMin: 0.007,
          zoomMax: 0.125,
          font: "Helvetica"
        },
        renderers: [
          {
            container: document.getElementById("x-graph-sigma-" + this.uid),
            type: "canvas" // sigma.renderers.canvas works as well
          }
        ]
      });
      this.sigma.camera.goTo({ x: 3, y: 3, ratio: 0.01 });

      // Start dynamic layout.
      this.requestDynamicLayout();

      // Install event stream observers.
      this.subscriptions.push(this.events.stateReset.observe(() => {
        this.resetState();
      }));

      this.subscriptions.push(this.events.reactorSeen.observe((r) => {
        this.addReactor(r.uid);
      }));

      this.subscriptions.push(this.events.reactorStarted.observe((r) => {
        this.addReactor(r.uid);
      }));

      this.subscriptions.push(this.events.reactorTerminated.observe((r) => {
        this.removeReactor(r.uid);
      }));

      this.subscriptions.push(this.events.sends.observe((sends) => {
        this.updateEdges(sends);
      }));

      this.subscriptions.push(this.events.stateUpdateDone.observe(() => {
        this.endResetState();
      }));

      // Install event bus observers.
      this.subscriptions.push(eventBus.observe("moveToReactor", (id) => {
        var xy = this.getReactorCoordinates(id);
        if (xy) this.moveAnimatedTo(xy);
      }));
      this.subscriptions.push(eventBus.observe("moveTo", (x, y) => {
        this.moveAnimatedTo({ x: x, y: y });
      }));

      // Install coordinate listeners.
      var updateBackground = () => {
        $(".x-graph-sigma").css("background-position",
          (-this.sigma.camera.x * 3.0) + "px " + (-this.sigma.camera.y * 3.0) + "px");
      };
      updateBackground();
      this.sigma.camera.bind("coordinatesUpdated", () => {
        updateBackground();
      });
    },
    methods: {
      requestDynamicLayout: function() {
        if (this.layoutRequested) return;

        this.layoutRequested = true;
        setTimeout(() => {
          this.layoutRequested = false;
          if (this.sigma.isForceAtlas2Running()) {
            this.sigma.killForceAtlas2();
          };
          this.sigma.startForceAtlas2({
            worker: true,
            barnesHutOptimize: true,
            slowDown: 2,
            gravity: 1,
            strongGravityMode: true,
            scalingRatio: 0.5,
            adjustSizes: true
          });
          setTimeout(() => {
            if (this.sigma.isForceAtlas2Running()) {
              this.sigma.killForceAtlas2();
            };
            this.sigma.refresh({
              skipIndexation: true
            });
          }, Math.min(2000, 400 + 2 * this.sigma.graph.getNodeCount()));
        }, 800);
      },
      resetState: function() {
        this.sigma.graph.clear();
      },
      setNodeSize: function(uid, sz) {
        var node = this.sigma.graph.nodes(uid)
        if (node) {
          node.size = sz;
          this.sigma.refresh({
            skipIndexation: true
          });
        }
      },
      addReactor: function(uid) {
        var label = this.model.reactors[uid].name;
        var x = 6.0 * Math.random();
        var y = 6.0 * Math.random();
        var ani = animation.smoothstep(14, 0.01, 1.0,
          (v) => this.setNodeSize(uid, v),
          () => {
            this.sigma.graph.addNode({
              id: uid,
              label: label,
              x: x,
              y: y,
              size: 1.0
            });
            this.requestDynamicLayout();
          },
          () => {}
        );
        this.ctx.animator.startLabeled(ani, "reactor-" + uid, true);
      },
      moveAnimatedTo: function(xy) {
        var startx = this.sigma.camera.x;
        var starty = this.sigma.camera.y;
        var interpolator = new SmoothStepInterpolator(18, 0.0, 1.0).map(v => {
          var x = startx + (xy.x - startx) * v;
          var y = starty + (xy.y - starty) * v;
          return { x: x, y: y };
        });
        var ani = new Animation(interpolator, (xy) => this.sigma.camera.goTo(xy));
        this.ctx.animator.startLabeled(ani, "move");
      },
      removeReactor: function(uid) {
        var ani = animation.smoothstep(14, 1.0, 0.01,
          (v) => this.setNodeSize(uid, v),
          () => {},
          () => this.sigma.graph.dropNode(uid)
        );
        this.ctx.animator.startLabeled(ani, "reactor-" + uid, true);
      },
      getReactorCoordinates: function(uid) {
        var r = this.sigma.graph.nodes(uid);
        if (r) return { x: r.x, y: r.y };
        else return undefined;
      },
      endResetState: function() {
        this.sigma.refresh();
      },
      updateEdges: function(sends) {
        for (var i = 0; i < sends.length; i++) {
          var send = sends[i];
          var key = send[0] + "-" + send[1];
          var count = this.model.sends[key];
          var edge = this.sigma.graph.edges(key);
          if (!edge) {
            var style = window.getComputedStyle(document.body);
            this.sigma.graph.addEdge({
              id: key,
              source: send[0],
              target: send[1],
              size: 0.12,
              color: style.getPropertyValue("--graph-edge-color"),
              type: "curvedArrow"
            });
            this.requestDynamicLayout();
          }
        }
        this.sigma.refresh({
          skipIndexation: true
        });        
      }
    },
    destroyed: function() {
      for (var i = 0; i < this.subscriptions.length; i++) {
        this.subscriptions[i]();
      }
    }
  });

  Vue.component("x-graph", Graph);
</script>


<style type="text/css">
  .x-graph-root {
    height: 100%;
    background: #000;
  }

  .x-graph-sigma {
    height: 100%;
    background: url(img/grid.png);
    opacity: 0.6;
    z-index: -1;
  }
</style>