NetworkVis: ismi-python-neo4jrestclient/static/commentaries.html comparison

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

make new commentaries visualisation the default.

author	casties
date	Fri, 30 Oct 2015 15:37:43 +0100
parents	ismi-python-neo4jrestclient/static/commentaries_authors3.html@b709419d4235
children	eb0be386736f

comparison

equal deleted inserted replaced

-:b709419d4235
+:80010fb9dbce
 <html>
 <head>
 <meta name="viewport" content="width=device-width, initial-scale=1.0">
-<link rel="stylesheet" href="//neo4j-contrib.github.io/developer-resources/language-guides/assets/css/main.css">
+<link rel="stylesheet" href="static/main.css">
 <title>ISMI commentary relations</title>
 </head>
 <body style="background:none;">
-<div id="graph">
-</div>
 <div role="navigation" class="navbar navbar-default navbar-static-top">
 <div class="container">
 <div class="row">
 <div class="col-sm-6 col-md-6">
 <ul class="nav navbar-nav">
 <li>
 <form role="search" class="navbar-form" id="search">
 <div class="form-group">
-<input type="text" value="Qushji" placeholder="Search for Title" class="form-control" name="search">
+<input type="text" value="7437" placeholder="Search for person-id" class="form-control" name="search">
 </div>
-<button class="btn btn-default" type="submit">Search</button>
+<button class="btn btn-default" type="submit">Search for author id</button>
 </form>
 </li>
 </ul>
 </div>
 <div class="navbar-header col-sm-6 col-md-6">
 </div>
 <div class="row">
 <div class="col-md-5">
 <div class="panel panel-default">
-<div class="panel-heading">Search Results</div>
+<div class="panel-heading">
+<span id="author">Titles by this author</span>
+<span class="clickhide">(click to hide)</span>
+<span class="clickhide" style="display:none;">(click to show)</span>
+</div>
 <table id="results" class="table table-striped table-hover">
 <thead>
 <tr>
 <th>Title (translit)</th>
 <th>Title (arabic)</th>
 </table>
 </div>
 </div>
 <div class="col-md-7">
 <div class="panel panel-default">
-<div class="panel-heading" id="title">Details</div>
+<div class="panel-heading">
+<span id="title">Text details</span>
+<span class="clickhide">(click to hide)</span>
+<span class="clickhide" style="display:none;">(click to show)</span>
+</div>
 <div class="row">
 <!-- <div class="col-sm-4 col-md-4">
 <img src="" class="well" id="poster"/>
 </div> -->
 <div class="col-md-8 col-sm-8">
 <h4>Details</h4>
 <ul id="info">
 </ul>
+<h4>Commenting on</h4>
+<ul id="commenting">
+</ul>
+<h4>Commentaries</h4>
+<ul id="commentaries">
+</ul>
 </div>
 </div>
 </div>
 </div>
 </div>
+<div class="col-lg-12">
+<div class="panel panel-default">
+<div class="panel-heading">
+<span>Graph of commentaries</span>
+<span class="clickhide">(click to hide)</span>
+<span class="clickhide" style="display:none;">(click to show)</span>
+</div>
+<div id="graph">
+</div>
+</div>
+</div>
 <style type="text/css">
 .node { stroke: #222; stroke-width: 1.5px; }
 .node.TEXT { fill: #888; }
-.node.movie { fill: #BBB; }
+.node.TEXT.marked { stroke: red; }
-.link { stroke: #999; stroke-opacity: .6; stroke-width: 1px; }
+.node.TEXT.selected { fill: red; }
+.link { stroke: #999; stroke-opacity: .6; stroke-width: 2px; }
+.arrowHead { fill: #999 }
+tr.marked {border: 2px solid red;}
 </style>
 <script type="text/javascript" src="//code.jquery.com/jquery-1.11.0.min.js"></script>
 <!-- <script src="https://d3js.org/d3.v3.min.js" type="text/javascript"></script> -->
 <script src="//cdnjs.cloudflare.com/ajax/libs/d3/3.5.6/d3.min.js" type="text/javascript"></script>
 <script type="text/javascript">
-backendApiPrefix = "";
+// make panels roll-up
+$(".panel-heading").on("click", function() {
+$(this).find(".clickhide").toggle();
+$(this).next().slideToggle();
+});
+// provide search and graph
+backendApiPrefix = "/netvis-ismi";
+searchApi = {};
 $(function () {
-function showMovie(text_id) {
+function showText(text_id) {
-$.get(backendApiPrefix+"/text/" + encodeURIComponent(text_id),
+$.get(backendApiPrefix+"/textandcommentaries/" + encodeURIComponent(text_id),
 function (data) {
 if (!data) return;
-$("#title").text(data.title);
+$("#title").text("Title: "+data.title);
-// $("#poster").attr("src","//neo4j-contrib.github.io/developer-resources/language-guides/assets/posters/"+encodeURIComponent(data.title)+".jpg");
 var $list = $("#info").empty();
-for (key in data.attrs) {
+$list.append($("<li>Author: " + data.author.label + " [" + data.author.ismi_id + "]</li>")
-val = data.attrs[key];
+.click(function() {
+search(data.author.ismi_id, true);
+}));
+for (var key in data.attrs) {
+var val = data.attrs[key];
 if (key === "link") {
 val = "<a href=\"" + val + "\" target=\"_blank\">" + val + "</a>";
 }
 $list.append($("<li>" + key + ": " + val + "</li>"));
 };
+// re-set selected
+$("#graph .selected").each(function(){this.classList.remove("selected")});
+$("#graph .ismi-"+data.attrs.ismi_id).each(function(){this.classList.add("selected")});
+// add commentaries
+var $commentaries = $("#commentaries").empty();
+for (var key in data.commentaries) {
+var val = data.commentaries[key];
+$commentaries.append($("<li>" + val.title + " [<span class=\"text_id\">" + key + "</span>] by " + val.author + "</li>")
+.click(function() { showText($(this).find("span.text_id").text());}));
+}
+var $commenting = $("#commenting").empty();
+for (var key in data.commenting) {
+var val = data.commenting[key];
+$commenting.append($("<li>" + val.title + " [<span class=\"text_id\">" + key + "</span>] by " + val.author + "</li>")
+.click(function() { showText($(this).find("span.text_id").text());}));
+}
 }, "json");
 return false;
 }
-function search() {
+function search(query, keep_detail_view) {
-var query=$("#search").find("input[name=search]").val();
+if (query == null) {
+query=$("#search").find("input[name=search]").val();
+}
 $.get(backendApiPrefix+"/search?q=" + encodeURIComponent(query),
 function (data) {
 var t = $("table#results tbody").empty();
 if (!data || data.length == 0) return;
+// clear all marks
+$("#graph .marked").each(function(){this.classList.remove("marked")});
+// fill table of titles
 data.forEach(function (row) {
 var text = row.text;
-$("<tr><td>" + text.label + "</td><td>" + text.full_title + "</td><td class='text_id'>" + text.ismi_id + "</td></tr>").appendTo(t)
+var author = row.author;
-.click(function() { showMovie($(this).find("td.text_id").text());})
+$("#author").text("Titles by Author: "+author.label+" ["+author.ismi_id+"]");
+var comm = row.is_commentary || row.has_commentaries;
+var $row = $("<tr><td>" + text.label + "</td><td>" + text.full_title + "</td><td class='text_id'>" + text.ismi_id + "</td></tr>").appendTo(t)
+.click(function() { showText($(this).find("td.text_id").text());});
+if (comm) {
+$row.addClass("marked");
+}
+// set mark
+$("#graph .ismi-"+text.ismi_id).each(function(){this.classList.add("marked")});
 });
-showMovie(data[0].text.ismi_id);
+if (!keep_detail_view) {
+// show first title
+showText(data[0].text.ismi_id);
+}
 }, "json");
 return false;
 }
+// export API
+searchApi.showText = showText;
+searchApi.search = search;
+// start search
 $("#search").submit(search);
 search();
-})
+});
 </script>
 <script type="text/javascript">
-var width = 800, height = 800;
+var width = 1400, height = 1400;
 var force = d3.layout.force()
-.charge(-200).linkDistance(30).size([width, height]);
+.charge(-100) // -200
+.linkDistance(30) // 30
+.size([width, height]);
 var svg = d3.select("#graph").append("svg")
-.attr("width", "100%").attr("height", "100%")
+.attr("width", "1400px").attr("height", "1400px")
 .attr("pointer-events", "all");
-d3.json(backendApiPrefix+"/graph", function(error, graph) {
+// arrow head marker
+var defs = svg.append("defs").append("marker")
+.attr({
+"id":"arrow",
+"markerUnits": "strokeWidth",
+"viewBox":"0 -5 10 10",
+"refX": 20, // 5
+"refY":0,
+"markerWidth":4,
+"markerHeight":4,
+"orient":"auto"
+})
+.append("path")
+.attr("d", "M0,-5 L10,0 L0,5")
+.attr("class","arrowHead");
+// load graph
+d3.json(backendApiPrefix+"/graph?limit=1000", function(error, graph) {
 		if (error) return;
 force.nodes(graph.nodes).links(graph.links).start();
 var link = svg.selectAll(".link")
 .data(graph.links).enter()
-.append("line").attr("class", "link");
+.append("line").attr({
+"class": "link",
+"marker-end": "url(#arrow)"
+});
 var node = svg.selectAll(".node")
 .data(graph.nodes).enter()
 .append("circle")
-.attr("class", function (d) { return "node "+d.label })
+.attr("class", function (d) { return "node "+d.label+" ismi-"+d.ismi_id})
-.attr("r", 10)
+.attr("r", 8) // 10
+.attr("data-ismi_id", function(d) {return d.ismi_id})
+.on("click", function() {
+var id = this.getAttribute("data-ismi_id");
+searchApi.showText(id);
+})
 .call(force.drag);
+console.log("searchApi:", searchApi);
 // html title attribute
 node.append("title")
 .text(function (d) { return d.title; })
 // force feed algo ticks
 force.on("tick", function() {
 link.attr("x1", function(d) { return d.source.x; })
 .attr("y1", function(d) { return d.source.y; })
 .attr("x2", function(d) { return d.target.x; })
 node.attr("cx", function(d) { return d.x; })
 .attr("cy", function(d) { return d.y; });
 });
 });
 </script>
 </body>
 </html>

Mercurial > hg > NetworkVis

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