Mercurial > hg > NetworkVis
diff 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 |
line wrap: on
line diff
--- a/ismi-python-neo4jrestclient/static/commentaries.html Fri Oct 09 15:12:34 2015 +0200 +++ b/ismi-python-neo4jrestclient/static/commentaries.html Fri Oct 30 15:37:43 2015 +0100 @@ -1,13 +1,11 @@ <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"> @@ -16,9 +14,9 @@ <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> @@ -40,7 +38,11 @@ <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> @@ -56,7 +58,11 @@ </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"/> @@ -65,92 +71,186 @@ <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; } - .link { stroke: #999; stroke-opacity: .6; stroke-width: 1px; } + .node.TEXT.marked { stroke: red; } + .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) { - $.get(backendApiPrefix+"/text/" + encodeURIComponent(text_id), + function showText(text_id) { + $.get(backendApiPrefix+"/textandcommentaries/" + encodeURIComponent(text_id), function (data) { if (!data) return; - $("#title").text(data.title); - // $("#poster").attr("src","//neo4j-contrib.github.io/developer-resources/language-guides/assets/posters/"+encodeURIComponent(data.title)+".jpg"); + $("#title").text("Title: "+data.title); var $list = $("#info").empty(); - for (key in data.attrs) { - val = data.attrs[key]; + $list.append($("<li>Author: " + data.author.label + " [" + data.author.ismi_id + "]</li>") + .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() { - var query=$("#search").find("input[name=search]").val(); + function search(query, keep_detail_view) { + 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) - .click(function() { showMovie($(this).find("td.text_id").text());}) + var author = row.author; + $("#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"); + + // 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"); - d3.json(backendApiPrefix+"/graph", function(error, graph) { + // 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("r", 10) + .attr("class", function (d) { return "node "+d.label+" ismi-"+d.ismi_id}) + .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; }) @@ -162,6 +262,7 @@ .attr("cy", function(d) { return d.y; }); }); }); + </script> </body> </html>