Mercurial > hg > NetworkVis

comparison ismi-python-neo4jrestclient/static/commentaries_authors3.html @ 20:d8bbf6d5920b

Find changesets by keywords (author, files, the commit message), revision number or hash, or revset expression.
now with arrowheads.
author casties
date Fri, 09 Oct 2015 12:54:39 +0200
parents
children d964d9a23837
comparison
equal deleted inserted replaced
19:2b2699d47eba 20:d8bbf6d5920b
1 <html>
2 <head>
3 <meta name="viewport" content="width=device-width, initial-scale=1.0">
4 <link rel="stylesheet" href="static/main.css">
5 <title>ISMI commentary relations</title>
6 </head>
7
8 <body style="background:none;">
9 <div role="navigation" class="navbar navbar-default navbar-static-top">
10 <div class="container">
11 <div class="row">
12 <div class="col-sm-6 col-md-6">
13 <ul class="nav navbar-nav">
14 <li>
15 <form role="search" class="navbar-form" id="search">
16 <div class="form-group">
17 <input type="text" value="7437" placeholder="Search for person-id" class="form-control" name="search">
18 </div>
19 <button class="btn btn-default" type="submit">Search for author id</button>
20 </form>
21 </li>
22 </ul>
23 </div>
24 <div class="navbar-header col-sm-6 col-md-6">
25 <div class="logo-well">
26 <a href="//neo4j.com/developer-resources">
27 <img src="//neo4j-contrib.github.io/developer-resources/language-guides/assets/img/logo-white.svg" alt="Neo4j World's Leading Graph Database" id="logo">
28 </a>
29 </div>
30 <div class="navbar-brand">
31 <div class="brand">ISMI Commentary relations between Texts</div>
32 </div>
33 </div>
34 </div>
35 </div>
36 </div>
37
38 <div class="row">
39 <div class="col-md-5">
40 <div class="panel panel-default">
41 <div class="panel-heading">
42 <span>Texts by this author</span>
43 <span class="clickhide">(click to hide)</span>
44 <span class="clickhide" style="display:none;">(click to show)</span>
45 </div>
46 <table id="results" class="table table-striped table-hover">
47 <thead>
48 <tr>
49 <th>Author (translit)</th>
50 <th>Title (translit)</th>
51 <th>Title (arabic)</th>
52 <th>ismi_id</th>
53 </tr>
54 </thead>
55 <tbody>
56 </tbody>
57 </table>
58 </div>
59 </div>
60 <div class="col-md-7">
61 <div class="panel panel-default">
62 <div class="panel-heading">
63 <span id="title">Text details</span>
64 <span class="clickhide">(click to hide)</span>
65 <span class="clickhide" style="display:none;">(click to show)</span>
66 </div>
67 <div class="row">
68 <!-- <div class="col-sm-4 col-md-4">
69 <img src="" class="well" id="poster"/>
70 </div> -->
71 <div class="col-md-8 col-sm-8">
72 <h4>Details</h4>
73 <ul id="info">
74 </ul>
75 <h4>Commenting on</h4>
76 <ul id="commenting">
77 </ul>
78 <h4>Commentaries</h4>
79 <ul id="commentaries">
80 </ul>
81 </div>
82 </div>
83 </div>
84 </div>
85 </div>
86 <div class="col-lg-12">
87 <div class="panel panel-default">
88 <div class="panel-heading">
89 <span>Graph of commentaries</span>
90 <span class="clickhide">(click to hide)</span>
91 <span class="clickhide" style="display:none;">(click to show)</span>
92 </div>
93 <div id="graph">
94 </div>
95 </div>
96 </div>
97
98 <style type="text/css">
99 .node { stroke: #222; stroke-width: 1.5px; }
100 .node.TEXT { fill: #888; }
101 .node.TEXT.marked { stroke: red; }
102 .node.TEXT.selected { fill: red; }
103 .link { stroke: #999; stroke-opacity: .6; stroke-width: 2px; }
104 .arrowHead { fill: #999 }
105 tr.marked {border: 2px solid red;}
106 </style>
107
108 <script type="text/javascript" src="//code.jquery.com/jquery-1.11.0.min.js"></script>
109 <!-- <script src="https://d3js.org/d3.v3.min.js" type="text/javascript"></script> -->
110 <script src="//cdnjs.cloudflare.com/ajax/libs/d3/3.5.6/d3.min.js" type="text/javascript"></script>
111 <script type="text/javascript">
112 // make panels roll-up
113 $(".panel-heading").on("click", function() {
114 $(this).find(".clickhide").toggle();
115 $(this).next().slideToggle();
116 });
117 // provide search and graph
118 backendApiPrefix = "";
119 searchApi = {};
120 $(function () {
121 function showText(text_id) {
122 $.get(backendApiPrefix+"/textandcommentaries/" + encodeURIComponent(text_id),
123 function (data) {
124 if (!data) return;
125 $("#title").text("Title: "+data.title);
126 var $list = $("#info").empty();
127 $list.append($("<li> author: " + data.author + "</li>"));
128 for (var key in data.attrs) {
129 var val = data.attrs[key];
130 if (key === "link") {
131 val = "<a href=\"" + val + "\" target=\"_blank\">" + val + "</a>";
132 }
133 $list.append($("<li>" + key + ": " + val + "</li>"));
134 };
135 // re-set selected
136 $("#graph .selected").each(function(){this.classList.remove("selected")});
137 $("#graph .ismi-"+data.attrs.ismi_id).each(function(){this.classList.add("selected")});
138 var $commentaries = $("#commentaries").empty();
139 for (var key in data.commentaries) {
140 var val = data.commentaries[key];
141 $commentaries.append($("<li>" + val.title + " [<span class=\"text_id\">" + key + "</span>] by " + val.author + "</li>")
142 .click(function() { showText($(this).find("span.text_id").text());}));
143 }
144 var $commenting = $("#commenting").empty();
145 for (var key in data.commenting) {
146 var val = data.commenting[key];
147 $commenting.append($("<li>" + val.title + " [<span class=\"text_id\">" + key + "</span>] by " + val.author + "</li>")
148 .click(function() { showText($(this).find("span.text_id").text());}));
149 }
150 }, "json");
151 return false;
152 }
153 function search() {
154 var query=$("#search").find("input[name=search]").val();
155 $.get(backendApiPrefix+"/search?q=" + encodeURIComponent(query),
156 function (data) {
157 var t = $("table#results tbody").empty();
158 if (!data || data.length == 0) return;
159 // clear all marks
160 $("#graph .marked").each(function(){this.classList.remove("marked")});
161 data.forEach(function (row) {
162 var text = row.text;
163 var author = row.author;
164 var comm = row.is_commentary || row.has_commentaries;
165 var $row = $("<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)
166 .click(function() { showText($(this).find("td.text_id").text());});
167 if (comm) {
168 $row.addClass("marked");
169 }
170 // set mark
171 $("#graph .ismi-"+text.ismi_id).each(function(){this.classList.add("marked")});
172 });
173 showText(data[0].text.ismi_id);
174 }, "json");
175 return false;
176 }
177 // export API
178 searchApi.showText = showText;
179 searchApi.search = search;
180 // start search
181 $("#search").submit(search);
182 search();
183 });
184 </script>
185
186 <script type="text/javascript">
187 var width = 1400, height = 1400;
188
189 var force = d3.layout.force()
190 .charge(-100) // -200
191 .linkDistance(30) // 30
192 .size([width, height]);
193
194 var svg = d3.select("#graph").append("svg")
195 .attr("width", "1400px").attr("height", "1400px")
196 .attr("pointer-events", "all");
197
198 // arrow head marker
199 var defs = svg.append("defs").append("marker")
200 .attr({
201 "id":"arrow",
202 "markerUnits": "strokeWidth",
203 "viewBox":"0 -5 10 10",
204 "refX": 20, // 5
205 "refY":0,
206 "markerWidth":4,
207 "markerHeight":4,
208 "orient":"auto"
209 })
210 .append("path")
211 .attr("d", "M0,-5 L10,0 L0,5")
212 .attr("class","arrowHead");
213
214 // load graph
215 d3.json(backendApiPrefix+"/graph?limit=1000", function(error, graph) {
216 if (error) return;
217
218 force.nodes(graph.nodes).links(graph.links).start();
219
220 var link = svg.selectAll(".link")
221 .data(graph.links).enter()
222 .append("line").attr({
223 "class": "link",
224 "marker-end": "url(#arrow)"
225 });
226
227 var node = svg.selectAll(".node")
228 .data(graph.nodes).enter()
229 .append("circle")
230 .attr("class", function (d) { return "node "+d.label+" ismi-"+d.ismi_id})
231 .attr("r", 8) // 10
232 .attr("data-ismi_id", function(d) {return d.ismi_id})
233 .on("click", function() {
234 console.log("click on ", this);
235 var id = this.getAttribute("data-ismi_id");
236 searchApi.showText(id);
237 })
238 .call(force.drag);
239
240 console.log("searchApi:", searchApi);
241 // html title attribute
242 node.append("title")
243 .text(function (d) { return d.title; })
244
245 // force feed algo ticks
246 force.on("tick", function() {
247 link.attr("x1", function(d) { return d.source.x; })
248 .attr("y1", function(d) { return d.source.y; })
249 .attr("x2", function(d) { return d.target.x; })
250 .attr("y2", function(d) { return d.target.y; });
251
252 node.attr("cx", function(d) { return d.x; })
253 .attr("cy", function(d) { return d.y; });
254 });
255 });
256
257 </script>
258 </body>
259 </html>