@extends('layouts.app')

@section('content')
<div class="container-fluid">
    <div id="activation-graph" style="width: 100%; height: 800px">
</div>

<script type="text/javascript">
    window.addEventListener('load', function() {

        // ------ activation graph
        var cy = cytoscape({
            container: $('#activation-graph'),
            elements: @json($activation_graph_elements),

              style: [ // the stylesheet for the graph
                {
                  selector: 'node',
                  style: {
                    'background-color': '#666',
                    'label': 'data(id)'
                  }
                },

                {
                  selector: 'edge',
                  style: {
                    'width': 3,
                    'line-color': '#ccc',
                    'target-arrow-color': '#ccc',
                    'target-arrow-shape': 'triangle',
                    'curve-style': 'bezier'
                  }
                }
              ],

              layout: {
                  name: 'dagre',
                  rankDir: 'LR',
                  nodeDimensionsIncludeLabels: true
              }
        });

        cy.on('click', 'node', function(evt) {
            console.log("clicked " + this.id());
            window.location = "/app/ranking/" + this.id();
        });
    });
</script>
@endsection