Mercurial > hg > NetworkVis

comparison ismi-python-neo4jrestclient/static/commentaries_authors2.html @ 17:09c0a9ceb778

Find changesets by keywords (author, files, the commit message), revision number or hash, or revset expression.
more pimping of commentaries_authors.
author casties
date Wed, 07 Oct 2015 15:41:00 +0200
parents ad3eefa2cb80
children c5fffe4338a1
comparison
equal deleted inserted replaced
16:ad3eefa2cb80 17:09c0a9ceb778
14 <li> 14 <li>
15 <form role="search" class="navbar-form" id="search"> 15 <form role="search" class="navbar-form" id="search">
16 <div class="form-group"> 16 <div class="form-group">
17 <input type="text" value="7437" placeholder="Search for person-id" class="form-control" name="search"> 17 <input type="text" value="7437" placeholder="Search for person-id" class="form-control" name="search">
18 </div> 18 </div>
19 <button class="btn btn-default" type="submit">Search</button> 19 <button class="btn btn-default" type="submit">Search for author id</button>
20 </form> 20 </form>
21 </li> 21 </li>
22 </ul> 22 </ul>
23 </div> 23 </div>
24 <div class="navbar-header col-sm-6 col-md-6"> 24 <div class="navbar-header col-sm-6 col-md-6">
36 </div> 36 </div>
37 37
38 <div class="row"> 38 <div class="row">
39 <div class="col-md-5"> 39 <div class="col-md-5">
40 <div class="panel panel-default"> 40 <div class="panel panel-default">
41 <div class="panel-heading">Search Results</div> 41 <div class="panel-heading">Texts by this author</div>
42 <table id="results" class="table table-striped table-hover"> 42 <table id="results" class="table table-striped table-hover">
43 <thead> 43 <thead>
44 <tr> 44 <tr>
45 <th>Author (translit)</th> 45 <th>Author (translit)</th>
46 <th>Title (translit)</th> 46 <th>Title (translit)</th>
53 </table> 53 </table>
54 </div> 54 </div>
55 </div> 55 </div>
56 <div class="col-md-7"> 56 <div class="col-md-7">
57 <div class="panel panel-default"> 57 <div class="panel panel-default">
58 <div class="panel-heading" id="title">Details</div> 58 <div class="panel-heading" id="title">Text details</div>
59 <div class="row"> 59 <div class="row">
60 <!-- <div class="col-sm-4 col-md-4"> 60 <!-- <div class="col-sm-4 col-md-4">
61 <img src="" class="well" id="poster"/> 61 <img src="" class="well" id="poster"/>
62 </div> --> 62 </div> -->
63 <div class="col-md-8 col-sm-8"> 63 <div class="col-md-8 col-sm-8">
74 </div> 74 </div>
75 </div> 75 </div>
76 </div> 76 </div>
77 </div> 77 </div>
78 <div class="col-lg-12"> 78 <div class="col-lg-12">
79 <div id="graph" class="panel panel-default"> 79 <div class="panel panel-default">
80 </div> 80 <div class="panel-heading">Graph of commentaries</div>
81 <div id="graph">
82 </div>
83 </div>
81 </div> 84 </div>
82 85
83 <style type="text/css"> 86 <style type="text/css">
84 .node { stroke: #222; stroke-width: 1.5px; } 87 .node { stroke: #222; stroke-width: 1.5px; }
85 .node.TEXT { fill: #888; } 88 .node.TEXT { fill: #888; }
86 .node.TEXT.marked { stroke: red; } 89 .node.TEXT.marked { stroke: red; }
87 .node.TEXT.selected { fill: red; } 90 .node.TEXT.selected { fill: red; }
88 .link { stroke: #999; stroke-opacity: .6; stroke-width: 1px; } 91 .link { stroke: #999; stroke-opacity: .6; stroke-width: 1px; }
92 tr.marked {border: 2px solid red;}
89 </style> 93 </style>
90 94
91 <script type="text/javascript" src="//code.jquery.com/jquery-1.11.0.min.js"></script> 95 <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> --> 96 <!-- <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> 97 <script src="//cdnjs.cloudflare.com/ajax/libs/d3/3.5.6/d3.min.js" type="text/javascript"></script>
96 $(function () { 100 $(function () {
97 function showText(text_id) { 101 function showText(text_id) {
98 $.get(backendApiPrefix+"/textandcommentaries/" + encodeURIComponent(text_id), 102 $.get(backendApiPrefix+"/textandcommentaries/" + encodeURIComponent(text_id),
99 function (data) { 103 function (data) {
100 if (!data) return; 104 if (!data) return;
101 $("#title").text(data.title); 105 $("#title").text("Title: "+data.title);
102 var $list = $("#info").empty(); 106 var $list = $("#info").empty();
103 $list.append($("<li> author: " + data.author + "</li>")); 107 $list.append($("<li> author: " + data.author + "</li>"));
104 for (var key in data.attrs) { 108 for (var key in data.attrs) {
105 var val = data.attrs[key]; 109 var val = data.attrs[key];
106 if (key === "link") { 110 if (key === "link") {
135 // clear all marks 139 // clear all marks
136 $("#graph .marked").each(function(){this.classList.remove("marked")}); 140 $("#graph .marked").each(function(){this.classList.remove("marked")});
137 data.forEach(function (row) { 141 data.forEach(function (row) {
138 var text = row.text; 142 var text = row.text;
139 var author = row.author; 143 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) 144 var comm = row.is_commentary || row.has_commentaries;
145 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)
141 .click(function() { showText($(this).find("td.text_id").text());}); 146 .click(function() { showText($(this).find("td.text_id").text());});
147 if (comm) {
148 $row.addClass("marked");
149 }
142 // set mark 150 // set mark
143 $("#graph .ismi-"+text.ismi_id).each(function(){this.classList.add("marked")}); 151 $("#graph .ismi-"+text.ismi_id).each(function(){this.classList.add("marked")});
144 }); 152 });
145 showText(data[0].text.ismi_id); 153 showText(data[0].text.ismi_id);
146 }, "json"); 154 }, "json");
151 search(); 159 search();
152 }) 160 })
153 </script> 161 </script>
154 162
155 <script type="text/javascript"> 163 <script type="text/javascript">
156 var width = 1800, height = 1800; 164 var width = 1400, height = 1400;
157 165
158 var force = d3.layout.force() 166 var force = d3.layout.force()
159 .charge(-200).linkDistance(30).size([width, height]); 167 .charge(-100) // -200
168 .linkDistance(15) // 30
169 .size([width, height]);
160 170
161 var svg = d3.select("#graph").append("svg") 171 var svg = d3.select("#graph").append("svg")
162 .attr("width", "1800px").attr("height", "1800px") 172 .attr("width", "1400px").attr("height", "1400px")
163 .attr("pointer-events", "all"); 173 .attr("pointer-events", "all");
164 174
165 d3.json(backendApiPrefix+"/graph?limit=1000", function(error, graph) { 175 d3.json(backendApiPrefix+"/graph?limit=1000", function(error, graph) {
166 if (error) return; 176 if (error) return;
167 177
173 183
174 var node = svg.selectAll(".node") 184 var node = svg.selectAll(".node")
175 .data(graph.nodes).enter() 185 .data(graph.nodes).enter()
176 .append("circle") 186 .append("circle")
177 .attr("class", function (d) { return "node "+d.label+" ismi-"+d.ismi_id}) 187 .attr("class", function (d) { return "node "+d.label+" ismi-"+d.ismi_id})
178 .attr("r", 10) 188 .attr("r", 8) // 10
179 .call(force.drag); 189 .call(force.drag);
180 190
181 // html title attribute 191 // html title attribute
182 node.append("title") 192 node.append("title")
183 .text(function (d) { return d.title; }) 193 .text(function (d) { return d.title; })
184 194
185 // force feed algo ticks 195 // force feed algo ticks
186 force.on("tick", function() { 196 force.on("tick", function() {
187 link.attr("x1", function(d) { return d.source.x; }) 197 link.attr("x1", function(d) { return d.source.x; })
188 .attr("y1", function(d) { return d.source.y; }) 198 .attr("y1", function(d) { return d.source.y; })
189 .attr("x2", function(d) { return d.target.x; }) 199 .attr("x2", function(d) { return d.target.x; })
191 201
192 node.attr("cx", function(d) { return d.x; }) 202 node.attr("cx", function(d) { return d.x; })
193 .attr("cy", function(d) { return d.y; }); 203 .attr("cy", function(d) { return d.y; });
194 }); 204 });
195 }); 205 });
206
196 </script> 207 </script>
197 </body> 208 </body>
198 </html> 209 </html>