annotate ismi-python-neo4jrestclient/static/commentaries.html @ 31:a6b2a09ea413

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