Mercurial > hg > NetworkVis

comparison ismi-python-neo4jrestclient/static/commentaries_authors.html @ 13:394bd5cfc508

Find changesets by keywords (author, files, the commit message), revision number or hash, or revset expression.
new commentaries_authors.html visualisation.
author casties
date Mon, 05 Oct 2015 18:56:19 +0200
parents
children b33f35b57b93
comparison
equal deleted inserted replaced
12:d67c5ad47709 13:394bd5cfc508
1 <html>
2 <head>
3 <meta name="viewport" content="width=device-width, initial-scale=1.0">
4 <link rel="stylesheet" href="//neo4j-contrib.github.io/developer-resources/language-guides/assets/css/main.css">
5 <title>ISMI commentary relations</title>
6 </head>
7
8 <body style="background:none;">
9 <div id="graph">
10 </div>
11 <div role="navigation" class="navbar navbar-default navbar-static-top">
12 <div class="container">
13 <div class="row">
14 <div class="col-sm-6 col-md-6">
15 <ul class="nav navbar-nav">
16 <li>
17 <form role="search" class="navbar-form" id="search">
18 <div class="form-group">
19 <input type="text" value="tusi" placeholder="Search for Title" class="form-control" name="search">
20 </div>
21 <button class="btn btn-default" type="submit">Search</button>
22 </form>
23 </li>
24 </ul>
25 </div>
26 <div class="navbar-header col-sm-6 col-md-6">
27 <div class="logo-well">
28 <a href="//neo4j.com/developer-resources">
29 <img src="//neo4j-contrib.github.io/developer-resources/language-guides/assets/img/logo-white.svg" alt="Neo4j World's Leading Graph Database" id="logo">
30 </a>
31 </div>
32 <div class="navbar-brand">
33 <div class="brand">ISMI Commentary relations between Texts</div>
34 </div>
35 </div>
36 </div>
37 </div>
38 </div>
39
40 <div class="row">
41 <div class="col-md-5">
42 <div class="panel panel-default">
43 <div class="panel-heading">Search Results</div>
44 <table id="results" class="table table-striped table-hover">
45 <thead>
46 <tr>
47 <th>Title (translit)</th>
48 <th>Title (arabic)</th>
49 <th>ismi_id</th>
50 </tr>
51 </thead>
52 <tbody>
53 </tbody>
54 </table>
55 </div>
56 </div>
57 <div class="col-md-7">
58 <div class="panel panel-default">
59 <div class="panel-heading" id="title">Details</div>
60 <div class="row">
61 <!-- <div class="col-sm-4 col-md-4">
62 <img src="" class="well" id="poster"/>
63 </div> -->
64 <div class="col-md-8 col-sm-8">
65 <h4>Details</h4>
66 <ul id="info">
67 </ul>
68 <h4>Commenting on</h4>
69 <ul id="commenting">
70 </ul>
71 <h4>Commentaries</h4>
72 <ul id="commentaries">
73 </ul>
74 </div>
75 </div>
76 </div>
77 </div>
78 </div>
79 <style type="text/css">
80 .node { stroke: #222; stroke-width: 1.5px; }
81 .node.TEXT { fill: #888; }
82 .node.movie { fill: #BBB; }
83 .link { stroke: #999; stroke-opacity: .6; stroke-width: 1px; }
84 </style>
85
86 <script type="text/javascript" src="//code.jquery.com/jquery-1.11.0.min.js"></script>
87 <!-- <script src="https://d3js.org/d3.v3.min.js" type="text/javascript"></script> -->
88 <script src="//cdnjs.cloudflare.com/ajax/libs/d3/3.5.6/d3.min.js" type="text/javascript"></script>
89 <script type="text/javascript">
90 backendApiPrefix = "";
91 $(function () {
92 function showText(text_id) {
93 $.get(backendApiPrefix+"/textandcommentaries/" + encodeURIComponent(text_id),
94 function (data) {
95 if (!data) return;
96 $("#title").text(data.title);
97 var $list = $("#info").empty();
98 for (var key in data.attrs) {
99 var val = data.attrs[key];
100 if (key === "link") {
101 val = "<a href=\"" + val + "\" target=\"_blank\">" + val + "</a>";
102 }
103 $list.append($("<li>" + key + ": " + val + "</li>"));
104 };
105 var $commentaries = $("#commentaries").empty();
106 for (var key in data.commentaries) {
107 var val = data.commentaries[key];
108 $commentaries.append($("<li>" + val + " [<span class=\"text_id\">" + key + "</span>]" + "</li>")
109 .click(function() { showText($(this).find("span.text_id").text());}));
110 }
111 var $commenting = $("#commenting").empty();
112 for (var key in data.commenting) {
113 var val = data.commenting[key];
114 $commenting.append($("<li>" + val + " [<span class=\"text_id\">" + key + "</span>]" + "</li>")
115 .click(function() { showText($(this).find("span.text_id").text());}));
116 }
117 }, "json");
118 return false;
119 }
120 function search() {
121 var query=$("#search").find("input[name=search]").val();
122 $.get(backendApiPrefix+"/search?q=" + encodeURIComponent(query),
123 function (data) {
124 var t = $("table#results tbody").empty();
125 if (!data || data.length == 0) return;
126 data.forEach(function (row) {
127 var text = row.text;
128 var author = row.author;
129 $("<tr><td>" + author.label + "</td><td>" + text.label + "</td><td>" + text.full_title + "</td><td class='text_id'>" + text.ismi_id + "</td></tr>").appendTo(t)
130 .click(function() { showText($(this).find("td.text_id").text());})
131 });
132 showText(data[0].text.ismi_id);
133 }, "json");
134 return false;
135 }
136
137 $("#search").submit(search);
138 search();
139 })
140 </script>
141
142 <script type="text/javascript">
143 var width = 800, height = 800;
144
145 var force = d3.layout.force()
146 .charge(-200).linkDistance(30).size([width, height]);
147
148 var svg = d3.select("#graph").append("svg")
149 .attr("width", "100%").attr("height", "100%")
150 .attr("pointer-events", "all");
151
152 d3.json(backendApiPrefix+"/graph", function(error, graph) {
153 if (error) return;
154
155 force.nodes(graph.nodes).links(graph.links).start();
156
157 var link = svg.selectAll(".link")
158 .data(graph.links).enter()
159 .append("line").attr("class", "link");
160
161 var node = svg.selectAll(".node")
162 .data(graph.nodes).enter()
163 .append("circle")
164 .attr("class", function (d) { return "node "+d.label })
165 .attr("r", 10)
166 .call(force.drag);
167
168 // html title attribute
169 node.append("title")
170 .text(function (d) { return d.title; })
171
172 // force feed algo ticks
173 force.on("tick", function() {
174 link.attr("x1", function(d) { return d.source.x; })
175 .attr("y1", function(d) { return d.source.y; })
176 .attr("x2", function(d) { return d.target.x; })
177 .attr("y2", function(d) { return d.target.y; });
178
179 node.attr("cx", function(d) { return d.x; })
180 .attr("cy", function(d) { return d.y; });
181 });
182 });
183 </script>
184 </body>
185 </html>