|
16
|
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">
|
|
29
|
17 <input type="text" value="jaghmini" placeholder="Search for person name" class="form-control" name="search">
|
|
16
|
18 </div>
|
|
29
|
19 <button class="btn btn-default" type="submit">Search for author name</button>
|
|
16
|
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">
|
|
19
|
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>
|
|
16
|
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">
|
|
19
|
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>
|
|
16
|
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">
|
|
17
|
87 <div class="panel panel-default">
|
|
19
|
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>
|
|
17
|
93 <div id="graph">
|
|
|
94 </div>
|
|
|
95 </div>
|
|
16
|
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: 1px; }
|
|
17
|
104 tr.marked {border: 2px solid red;}
|
|
16
|
105 </style>
|
|
|
106
|
|
|
107 <script type="text/javascript" src="//code.jquery.com/jquery-1.11.0.min.js"></script>
|
|
|
108 <!-- <script src="https://d3js.org/d3.v3.min.js" type="text/javascript"></script> -->
|
|
|
109 <script src="//cdnjs.cloudflare.com/ajax/libs/d3/3.5.6/d3.min.js" type="text/javascript"></script>
|
|
|
110 <script type="text/javascript">
|
|
19
|
111 // make panels roll-up
|
|
|
112 $(".panel-heading").on("click", function() {
|
|
|
113 $(this).find(".clickhide").toggle();
|
|
|
114 $(this).next().slideToggle();
|
|
|
115 });
|
|
|
116 // provide search and graph
|
|
16
|
117 backendApiPrefix = "";
|
|
18
|
118 searchApi = {};
|
|
16
|
119 $(function () {
|
|
|
120 function showText(text_id) {
|
|
|
121 $.get(backendApiPrefix+"/textandcommentaries/" + encodeURIComponent(text_id),
|
|
|
122 function (data) {
|
|
|
123 if (!data) return;
|
|
17
|
124 $("#title").text("Title: "+data.title);
|
|
16
|
125 var $list = $("#info").empty();
|
|
|
126 $list.append($("<li> author: " + data.author + "</li>"));
|
|
|
127 for (var key in data.attrs) {
|
|
|
128 var val = data.attrs[key];
|
|
|
129 if (key === "link") {
|
|
|
130 val = "<a href=\"" + val + "\" target=\"_blank\">" + val + "</a>";
|
|
|
131 }
|
|
|
132 $list.append($("<li>" + key + ": " + val + "</li>"));
|
|
|
133 };
|
|
|
134 // re-set selected
|
|
|
135 $("#graph .selected").each(function(){this.classList.remove("selected")});
|
|
|
136 $("#graph .ismi-"+data.attrs.ismi_id).each(function(){this.classList.add("selected")});
|
|
|
137 var $commentaries = $("#commentaries").empty();
|
|
|
138 for (var key in data.commentaries) {
|
|
|
139 var val = data.commentaries[key];
|
|
|
140 $commentaries.append($("<li>" + val.title + " [<span class=\"text_id\">" + key + "</span>] by " + val.author + "</li>")
|
|
|
141 .click(function() { showText($(this).find("span.text_id").text());}));
|
|
|
142 }
|
|
|
143 var $commenting = $("#commenting").empty();
|
|
|
144 for (var key in data.commenting) {
|
|
|
145 var val = data.commenting[key];
|
|
|
146 $commenting.append($("<li>" + val.title + " [<span class=\"text_id\">" + key + "</span>] by " + val.author + "</li>")
|
|
|
147 .click(function() { showText($(this).find("span.text_id").text());}));
|
|
|
148 }
|
|
|
149 }, "json");
|
|
|
150 return false;
|
|
|
151 }
|
|
|
152 function search() {
|
|
|
153 var query=$("#search").find("input[name=search]").val();
|
|
|
154 $.get(backendApiPrefix+"/search?q=" + encodeURIComponent(query),
|
|
|
155 function (data) {
|
|
|
156 var t = $("table#results tbody").empty();
|
|
|
157 if (!data || data.length == 0) return;
|
|
|
158 // clear all marks
|
|
|
159 $("#graph .marked").each(function(){this.classList.remove("marked")});
|
|
|
160 data.forEach(function (row) {
|
|
|
161 var text = row.text;
|
|
|
162 var author = row.author;
|
|
17
|
163 var comm = row.is_commentary || row.has_commentaries;
|
|
|
164 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)
|
|
16
|
165 .click(function() { showText($(this).find("td.text_id").text());});
|
|
17
|
166 if (comm) {
|
|
|
167 $row.addClass("marked");
|
|
|
168 }
|
|
16
|
169 // set mark
|
|
|
170 $("#graph .ismi-"+text.ismi_id).each(function(){this.classList.add("marked")});
|
|
|
171 });
|
|
|
172 showText(data[0].text.ismi_id);
|
|
|
173 }, "json");
|
|
|
174 return false;
|
|
|
175 }
|
|
18
|
176 // export API
|
|
|
177 searchApi.showText = showText;
|
|
|
178 searchApi.search = search;
|
|
|
179 // start search
|
|
16
|
180 $("#search").submit(search);
|
|
|
181 search();
|
|
19
|
182 });
|
|
16
|
183 </script>
|
|
|
184
|
|
|
185 <script type="text/javascript">
|
|
17
|
186 var width = 1400, height = 1400;
|
|
16
|
187
|
|
|
188 var force = d3.layout.force()
|
|
17
|
189 .charge(-100) // -200
|
|
|
190 .linkDistance(15) // 30
|
|
|
191 .size([width, height]);
|
|
16
|
192
|
|
|
193 var svg = d3.select("#graph").append("svg")
|
|
17
|
194 .attr("width", "1400px").attr("height", "1400px")
|
|
16
|
195 .attr("pointer-events", "all");
|
|
|
196
|
|
|
197 d3.json(backendApiPrefix+"/graph?limit=1000", function(error, graph) {
|
|
|
198 if (error) return;
|
|
|
199
|
|
|
200 force.nodes(graph.nodes).links(graph.links).start();
|
|
|
201
|
|
|
202 var link = svg.selectAll(".link")
|
|
|
203 .data(graph.links).enter()
|
|
|
204 .append("line").attr("class", "link");
|
|
|
205
|
|
|
206 var node = svg.selectAll(".node")
|
|
|
207 .data(graph.nodes).enter()
|
|
|
208 .append("circle")
|
|
|
209 .attr("class", function (d) { return "node "+d.label+" ismi-"+d.ismi_id})
|
|
17
|
210 .attr("r", 8) // 10
|
|
18
|
211 .attr("data-ismi_id", function(d) {return d.ismi_id})
|
|
|
212 .on("click", function() {
|
|
|
213 console.log("click on ", this);
|
|
|
214 var id = this.getAttribute("data-ismi_id");
|
|
|
215 searchApi.showText(id);
|
|
|
216 })
|
|
16
|
217 .call(force.drag);
|
|
|
218
|
|
18
|
219 console.log("searchApi:", searchApi);
|
|
16
|
220 // html title attribute
|
|
|
221 node.append("title")
|
|
|
222 .text(function (d) { return d.title; })
|
|
17
|
223
|
|
16
|
224 // force feed algo ticks
|
|
|
225 force.on("tick", function() {
|
|
|
226 link.attr("x1", function(d) { return d.source.x; })
|
|
|
227 .attr("y1", function(d) { return d.source.y; })
|
|
|
228 .attr("x2", function(d) { return d.target.x; })
|
|
|
229 .attr("y2", function(d) { return d.target.y; });
|
|
|
230
|
|
|
231 node.attr("cx", function(d) { return d.x; })
|
|
|
232 .attr("cy", function(d) { return d.y; });
|
|
|
233 });
|
|
|
234 });
|
|
17
|
235
|
|
16
|
236 </script>
|
|
|
237 </body>
|
|
|
238 </html>
|
