Mercurial > hg > NetworkVis

comparison ismi-python-neo4jrestclient/static/commentaries_authors2.html @ 16:ad3eefa2cb80

Find changesets by keywords (author, files, the commit message), revision number or hash, or revset expression.
pimped commentaries_authors.html visualisation.
author casties
date Tue, 06 Oct 2015 19:26:46 +0200
parents
children 09c0a9ceb778
comparison
equal deleted inserted replaced
15:7c4475cd747a 16:ad3eefa2cb80
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</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">Search Results</div>
42 <table id="results" class="table table-striped table-hover">
43 <thead>
44 <tr>
45 <th>Author (translit)</th>
46 <th>Title (translit)</th>
47 <th>Title (arabic)</th>
48 <th>ismi_id</th>
49 </tr>
50 </thead>
51 <tbody>
52 </tbody>
53 </table>
54 </div>
55 </div>
56 <div class="col-md-7">
57 <div class="panel panel-default">
58 <div class="panel-heading" id="title">Details</div>
59 <div class="row">
60 <!-- <div class="col-sm-4 col-md-4">
61 <img src="" class="well" id="poster"/>
62 </div> -->
63 <div class="col-md-8 col-sm-8">
64 <h4>Details</h4>
65 <ul id="info">
66 </ul>
67 <h4>Commenting on</h4>
68 <ul id="commenting">
69 </ul>
70 <h4>Commentaries</h4>
71 <ul id="commentaries">
72 </ul>
73 </div>
74 </div>
75 </div>
76 </div>
77 </div>
78 <div class="col-lg-12">
79 <div id="graph" class="panel panel-default">
80 </div>
81 </div>
82
83 <style type="text/css">
84 .node { stroke: #222; stroke-width: 1.5px; }
85 .node.TEXT { fill: #888; }
86 .node.TEXT.marked { stroke: red; }
87 .node.TEXT.selected { fill: red; }
88 .link { stroke: #999; stroke-opacity: .6; stroke-width: 1px; }
89 </style>
90
91 <script type="text/javascript" src="//code.jquery.com/jquery-1.11.0.min.js"></script>
92 <!-- <script src="https://d3js.org/d3.v3.min.js" type="text/javascript"></script> -->
93 <script src="//cdnjs.cloudflare.com/ajax/libs/d3/3.5.6/d3.min.js" type="text/javascript"></script>
94 <script type="text/javascript">
95 backendApiPrefix = "";
96 $(function () {
97 function showText(text_id) {
98 $.get(backendApiPrefix+"/textandcommentaries/" + encodeURIComponent(text_id),
99 function (data) {
100 if (!data) return;
101 $("#title").text(data.title);
102 var $list = $("#info").empty();
103 $list.append($("<li> author: " + data.author + "</li>"));
104 for (var key in data.attrs) {
105 var val = data.attrs[key];
106 if (key === "link") {
107 val = "<a href=\"" + val + "\" target=\"_blank\">" + val + "</a>";
108 }
109 $list.append($("<li>" + key + ": " + val + "</li>"));
110 };
111 // re-set selected
112 $("#graph .selected").each(function(){this.classList.remove("selected")});
113 $("#graph .ismi-"+data.attrs.ismi_id).each(function(){this.classList.add("selected")});
114 var $commentaries = $("#commentaries").empty();
115 for (var key in data.commentaries) {
116 var val = data.commentaries[key];
117 $commentaries.append($("<li>" + val.title + " [<span class=\"text_id\">" + key + "</span>] by " + val.author + "</li>")
118 .click(function() { showText($(this).find("span.text_id").text());}));
119 }
120 var $commenting = $("#commenting").empty();
121 for (var key in data.commenting) {
122 var val = data.commenting[key];
123 $commenting.append($("<li>" + val.title + " [<span class=\"text_id\">" + key + "</span>] by " + val.author + "</li>")
124 .click(function() { showText($(this).find("span.text_id").text());}));
125 }
126 }, "json");
127 return false;
128 }
129 function search() {
130 var query=$("#search").find("input[name=search]").val();
131 $.get(backendApiPrefix+"/search?q=" + encodeURIComponent(query),
132 function (data) {
133 var t = $("table#results tbody").empty();
134 if (!data || data.length == 0) return;
135 // clear all marks
136 $("#graph .marked").each(function(){this.classList.remove("marked")});
137 data.forEach(function (row) {
138 var text = row.text;
139 var author = row.author;
140 $("<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)
141 .click(function() { showText($(this).find("td.text_id").text());});
142 // set mark
143 $("#graph .ismi-"+text.ismi_id).each(function(){this.classList.add("marked")});
144 });
145 showText(data[0].text.ismi_id);
146 }, "json");
147 return false;
148 }
149
150 $("#search").submit(search);
151 search();
152 })
153 </script>
154
155 <script type="text/javascript">
156 var width = 1800, height = 1800;
157
158 var force = d3.layout.force()
159 .charge(-200).linkDistance(30).size([width, height]);
160
161 var svg = d3.select("#graph").append("svg")
162 .attr("width", "1800px").attr("height", "1800px")
163 .attr("pointer-events", "all");
164
165 d3.json(backendApiPrefix+"/graph?limit=1000", function(error, graph) {
166 if (error) return;
167
168 force.nodes(graph.nodes).links(graph.links).start();
169
170 var link = svg.selectAll(".link")
171 .data(graph.links).enter()
172 .append("line").attr("class", "link");
173
174 var node = svg.selectAll(".node")
175 .data(graph.nodes).enter()
176 .append("circle")
177 .attr("class", function (d) { return "node "+d.label+" ismi-"+d.ismi_id})
178 .attr("r", 10)
179 .call(force.drag);
180
181 // html title attribute
182 node.append("title")
183 .text(function (d) { return d.title; })
184
185 // force feed algo ticks
186 force.on("tick", function() {
187 link.attr("x1", function(d) { return d.source.x; })
188 .attr("y1", function(d) { return d.source.y; })
189 .attr("x2", function(d) { return d.target.x; })
190 .attr("y2", function(d) { return d.target.y; });
191
192 node.attr("cx", function(d) { return d.x; })
193 .attr("cy", function(d) { return d.y; });
194 });
195 });
196 </script>
197 </body>
198 </html>