Community_Detection/displayGraph.html at master · marinaelmore/Community_Detection · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
<!--
/* FILE: displayGraph.html
 * AUTHORS: Marina Elmore, Jennifer Hu
 * AHPCRC Summmer Institute 2014
 *
 * This file provides the html backbone for the graphical display interface.
 * It is written using bootstrap components and uses Javascript to dyanamically
 * populate the menus
 */ -->

<!doctype html>
<meta charset=utf-8>

<title>Community Detection</title>

<style>
.node {
    stroke: #fff;
    stroke-width: 1.5px;
}
.rectangle {
    fill: none;
    stroke-width:3;
    stroke:rgb(0,0,0);
}
.link {
    stroke: #999;
    stroke-opacity: .6;
}
html, body {
    height: window.innerHeight;
}
</style>

<link href=http://code.jquery.com/ui/1.9.1/themes/smoothness/jquery-ui.css rel=stylesheet>
<link href=http://bootswatch.com/cosmo/bootstrap.min.css rel=stylesheet type=text/css>
<link href=//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap-glyphicons.css rel=stylesheet>
<script src=https://maps.googleapis.com/maps/api/js?v=3.exp&sensor=false></script>
<script src=http://d3js.org/d3.v3.min.js></script>
<script src=http://d3js.org/topojson.v1.min.js></script>
<script src=http://trifacta.github.io/vega/releases/v1.3.3/vega.min.js></script>
<script src=http://code.jquery.com/jquery-1.8.2.min.js></script>
<script src=http://code.jquery.com/ui/1.9.1/jquery-ui.min.js></script>
<script src=http://netdna.bootstrapcdn.com/bootstrap/3.0.3/js/bootstrap.min.js></script>
<script src=/js/tangelo.js></script>

<body>

    <div class="navbar navbar-default navbar-static-top" role="navigation" style="margin-bottom:0px;">

        <div class="container-fluid">
            <div class="navbar-header">
                <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
                    <span class="sr-only">Toggle navigation</span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                </button>
                <a class="navbar-brand" href="#"><font size=5 color = #999>Community Detection</font></a>
                <a class="navbar-brand" href= welcomeScreen.html ><font size=4>Home</font> </a>
            </div>
            <div class="navbar-collapse collapse">
                <ul class="nav navbar-nav">
                    <li class="dropdown">
                        <a href="#" class="dropdown-toggle" data-toggle="dropdown"><font size=4>View Layers</font><span class="caret"></span></a>
                        <ul class="dropdown-menu" role="menu" id="dropdown_alg">
                            <li class="dropdown-header">Algorithm Iterations</li>
                        </ul>
                    </li>
                </ul>
    <script>
        //Variables
        var queryString = window.location.search;
        var input = "";
        var param = "";
        var dataset = "";
        var dataset_length = 0;
        var textfile = "";

        // Determining correct dataset, input file,
        // and text file from query string
        if(queryString != ""){
             param = queryString.substring(4);
             dataset = param.substring(0, param.length-2);
             input = "/~armysummer/community_detection/output/" + dataset + "/" + param + ".json";
             textfile = dataset + "/" + param + ".txt";
        }

        //Ajax call to populate the drop down menu with
        //the correct number of Delite Iterations
        $.ajax({
        type: 'GET',
        url: "getFilesInDir?me=numLayers.txt:input/" + dataset,

          success: function() {
            console.log("getsFiles");
            var label = "";
            var id = ""
            $.get('numLayers.txt', function(data){
                var lines = data.split('\n');
                dataset_length = lines.length;
                var dropdown = document.getElementById("dropdown_alg");
                for(var i = 1; i < dataset_length-1; i++){
                    var list = document.createElement('li');
                    var layer = document.createElement('a');
                    var elem_id = "layer_" + i.toString();
                    var new_url="displayGraph.html?me=" + dataset + "_" + (i-1).toString();
                    layer.innerHTML = "Layer " + i.toString();
                    layer.setAttribute("href",new_url);
                    layer.setAttribute("id", elem_id);
                    list.appendChild(layer);
                    console.log(list);
                    dropdown.appendChild(list);
                }
            });
          }
        });
    </script>
            </div>
        </div>
    </div>

    <!-- Graph Input Data from separate Javascript file <displaygraph.js> -->
    <script src = displaygraph.js> graphData(input, textfile); </script>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
</body>
<div id=content></div>