Mercurial > hg > NetworkVis

comparison ismi-python-neo4jrestclient/static/commentaries1.html @ 23:80010fb9dbce

Find changesets by keywords (author, files, the commit message), revision number or hash, or revset expression.
make new commentaries visualisation the default.
author casties
date Fri, 30 Oct 2015 15:37:43 +0100
parents ismi-python-neo4jrestclient/static/commentaries.html@394bd5cfc508
children
comparison
equal deleted inserted replaced
22:b709419d4235 23:80010fb9dbce
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 backendApiPrefix = "";
85 $(function () {
86 function showMovie(text_id) {
87 $.get(backendApiPrefix+"/text/" + encodeURIComponent(text_id),
88 function (data) {
89 if (!data) return;
90 $("#title").text(data.title);
91 // $("#poster").attr("src","//neo4j-contrib.github.io/developer-resources/language-guides/assets/posters/"+encodeURIComponent(data.title)+".jpg");
92 var $list = $("#info").empty();
93 for (key in data.attrs) {
94 val = data.attrs[key];
95 if (key === "link") {
96 val = "<a href=\"" + val + "\" target=\"_blank\">" + val + "</a>";
97 }
98 $list.append($("<li>" + key + ": " + val + "</li>"));
99 };
100 }, "json");
101 return false;
102 }
103 function search() {
104 var query=$("#search").find("input[name=search]").val();
105 $.get(backendApiPrefix+"/search?q=" + encodeURIComponent(query),
106 function (data) {
107 var t = $("table#results tbody").empty();
108 if (!data || data.length == 0) return;
109 data.forEach(function (row) {
110 var text = row.text;
111 $("<tr><td>" + text.label + "</td><td>" + text.full_title + "</td><td class='text_id'>" + text.ismi_id + "</td></tr>").appendTo(t)
112 .click(function() { showMovie($(this).find("td.text_id").text());})
113 });
114 showMovie(data[0].text.ismi_id);
115 }, "json");
116 return false;
117 }
118
119 $("#search").submit(search);
120 search();
121 })
122 </script>
123
124 <script type="text/javascript">
125 var width = 800, height = 800;
126
127 var force = d3.layout.force()
128 .charge(-200).linkDistance(30).size([width, height]);
129
130 var svg = d3.select("#graph").append("svg")
131 .attr("width", "100%").attr("height", "100%")
132 .attr("pointer-events", "all");
133
134 d3.json(backendApiPrefix+"/graph", function(error, graph) {
135 if (error) return;
136
137 force.nodes(graph.nodes).links(graph.links).start();
138
139 var link = svg.selectAll(".link")
140 .data(graph.links).enter()
141 .append("line").attr("class", "link");
142
143 var node = svg.selectAll(".node")
144 .data(graph.nodes).enter()
145 .append("circle")
146 .attr("class", function (d) { return "node "+d.label })
147 .attr("r", 10)
148 .call(force.drag);
149
150 // html title attribute
151 node.append("title")
152 .text(function (d) { return d.title; })
153
154 // force feed algo ticks
155 force.on("tick", function() {
156 link.attr("x1", function(d) { return d.source.x; })
157 .attr("y1", function(d) { return d.source.y; })
158 .attr("x2", function(d) { return d.target.x; })
159 .attr("y2", function(d) { return d.target.y; });
160
161 node.attr("cx", function(d) { return d.x; })
162 .attr("cy", function(d) { return d.y; });
163 });
164 });
165 </script>
166 </body>
167 </html>