Mercurial > hg > NetworkVis
comparison ismi-python-neo4jrestclient/static/commentaries.html @ 9:0f4846255b20
updated for ismi-dev.
author | casties |
---|---|
date | Thu, 01 Oct 2015 17:35:56 +0200 |
parents | |
children | 394bd5cfc508 |
comparison
equal
deleted
inserted
replaced
7:45dad9e38c82 | 9:0f4846255b20 |
---|---|
1 <html> | |
2 <head> | |
3 <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
4 <link rel="stylesheet" href="//neo4j-contrib.github.io/developer-resources/language-guides/assets/css/main.css"> | |
5 <title>ISMI commentary relations</title> | |
6 </head> | |
7 | |
8 <body style="background:none;"> | |
9 <div id="graph"> | |
10 </div> | |
11 <div role="navigation" class="navbar navbar-default navbar-static-top"> | |
12 <div class="container"> | |
13 <div class="row"> | |
14 <div class="col-sm-6 col-md-6"> | |
15 <ul class="nav navbar-nav"> | |
16 <li> | |
17 <form role="search" class="navbar-form" id="search"> | |
18 <div class="form-group"> | |
19 <input type="text" value="Qushji" placeholder="Search for Title" class="form-control" name="search"> | |
20 </div> | |
21 <button class="btn btn-default" type="submit">Search</button> | |
22 </form> | |
23 </li> | |
24 </ul> | |
25 </div> | |
26 <div class="navbar-header col-sm-6 col-md-6"> | |
27 <div class="logo-well"> | |
28 <a href="//neo4j.com/developer-resources"> | |
29 <img src="//neo4j-contrib.github.io/developer-resources/language-guides/assets/img/logo-white.svg" alt="Neo4j World's Leading Graph Database" id="logo"> | |
30 </a> | |
31 </div> | |
32 <div class="navbar-brand"> | |
33 <div class="brand">ISMI Commentary relations between Texts</div> | |
34 </div> | |
35 </div> | |
36 </div> | |
37 </div> | |
38 </div> | |
39 | |
40 <div class="row"> | |
41 <div class="col-md-5"> | |
42 <div class="panel panel-default"> | |
43 <div class="panel-heading">Search Results</div> | |
44 <table id="results" class="table table-striped table-hover"> | |
45 <thead> | |
46 <tr> | |
47 <th>Title (translit)</th> | |
48 <th>Title (arabic)</th> | |
49 <th>ismi_id</th> | |
50 </tr> | |
51 </thead> | |
52 <tbody> | |
53 </tbody> | |
54 </table> | |
55 </div> | |
56 </div> | |
57 <div class="col-md-7"> | |
58 <div class="panel panel-default"> | |
59 <div class="panel-heading" id="title">Details</div> | |
60 <div class="row"> | |
61 <!-- <div class="col-sm-4 col-md-4"> | |
62 <img src="" class="well" id="poster"/> | |
63 </div> --> | |
64 <div class="col-md-8 col-sm-8"> | |
65 <h4>Details</h4> | |
66 <ul id="info"> | |
67 </ul> | |
68 </div> | |
69 </div> | |
70 </div> | |
71 </div> | |
72 </div> | |
73 <style type="text/css"> | |
74 .node { stroke: #222; stroke-width: 1.5px; } | |
75 .node.TEXT { fill: #888; } | |
76 .node.movie { fill: #BBB; } | |
77 .link { stroke: #999; stroke-opacity: .6; stroke-width: 1px; } | |
78 </style> | |
79 | |
80 <script type="text/javascript" src="//code.jquery.com/jquery-1.11.0.min.js"></script> | |
81 <!-- <script src="https://d3js.org/d3.v3.min.js" type="text/javascript"></script> --> | |
82 <script src="//cdnjs.cloudflare.com/ajax/libs/d3/3.5.6/d3.min.js" type="text/javascript"></script> | |
83 <script type="text/javascript"> | |
84 $(function () { | |
85 function showMovie(text_id) { | |
86 $.get("/netvis-ismi/text/" + encodeURIComponent(text_id), | |
87 function (data) { | |
88 if (!data) return; | |
89 $("#title").text(data.title); | |
90 // $("#poster").attr("src","//neo4j-contrib.github.io/developer-resources/language-guides/assets/posters/"+encodeURIComponent(data.title)+".jpg"); | |
91 var $list = $("#info").empty(); | |
92 for (key in data.attrs) { | |
93 val = data.attrs[key]; | |
94 if (key === "link") { | |
95 val = "<a href=\"" + val + "\" target=\"_blank\">" + val + "</a>"; | |
96 } | |
97 $list.append($("<li>" + key + ": " + val + "</li>")); | |
98 }; | |
99 }, "json"); | |
100 return false; | |
101 } | |
102 function search() { | |
103 var query=$("#search").find("input[name=search]").val(); | |
104 $.get("/netvis-ismi/search?q=" + encodeURIComponent(query), | |
105 function (data) { | |
106 var t = $("table#results tbody").empty(); | |
107 if (!data || data.length == 0) return; | |
108 data.forEach(function (row) { | |
109 var text = row.text; | |
110 $("<tr><td>" + text.label + "</td><td>" + text.full_title + "</td><td class='text_id'>" + text.ismi_id + "</td></tr>").appendTo(t) | |
111 .click(function() { showMovie($(this).find("td.text_id").text());}) | |
112 }); | |
113 showMovie(data[0].text.ismi_id); | |
114 }, "json"); | |
115 return false; | |
116 } | |
117 | |
118 $("#search").submit(search); | |
119 search(); | |
120 }) | |
121 </script> | |
122 | |
123 <script type="text/javascript"> | |
124 var width = 800, height = 800; | |
125 | |
126 var force = d3.layout.force() | |
127 .charge(-200).linkDistance(30).size([width, height]); | |
128 | |
129 var svg = d3.select("#graph").append("svg") | |
130 .attr("width", "100%").attr("height", "100%") | |
131 .attr("pointer-events", "all"); | |
132 | |
133 d3.json("/netvis-ismi/graph", function(error, graph) { | |
134 if (error) return; | |
135 | |
136 force.nodes(graph.nodes).links(graph.links).start(); | |
137 | |
138 var link = svg.selectAll(".link") | |
139 .data(graph.links).enter() | |
140 .append("line").attr("class", "link"); | |
141 | |
142 var node = svg.selectAll(".node") | |
143 .data(graph.nodes).enter() | |
144 .append("circle") | |
145 .attr("class", function (d) { return "node "+d.label }) | |
146 .attr("r", 10) | |
147 .call(force.drag); | |
148 | |
149 // html title attribute | |
150 node.append("title") | |
151 .text(function (d) { return d.title; }) | |
152 | |
153 // force feed algo ticks | |
154 force.on("tick", function() { | |
155 link.attr("x1", function(d) { return d.source.x; }) | |
156 .attr("y1", function(d) { return d.source.y; }) | |
157 .attr("x2", function(d) { return d.target.x; }) | |
158 .attr("y2", function(d) { return d.target.y; }); | |
159 | |
160 node.attr("cx", function(d) { return d.x; }) | |
161 .attr("cy", function(d) { return d.y; }); | |
162 }); | |
163 }); | |
164 </script> | |
165 </body> | |
166 </html> |