Mercurial > hg > NetworkVis
changeset 35:9f0d4fd3a412
cleanup and layout tweaks.
| author | casties |
|---|---|
| date | Thu, 04 Feb 2016 15:23:15 +0100 |
| parents | 4bbb832c53ac |
| children | 810ea40a9ef8 |
| files | ismi-python-neo4jrestclient/ismi-vis.py ismi-python-neo4jrestclient/static/commentaries.html ismi-python-neo4jrestclient/static/commentaries1.html ismi-python-neo4jrestclient/static/commentaries_authors.html ismi-python-neo4jrestclient/static/commentaries_authors2.html ismi-python-neo4jrestclient/static/index.html ismi-python-neo4jrestclient/static/main.css |
| diffstat | 7 files changed, 15 insertions(+), 799 deletions(-) [+] |
line wrap: on
line diff
--- a/ismi-python-neo4jrestclient/ismi-vis.py Sat Dec 19 23:25:23 2015 -0500 +++ b/ismi-python-neo4jrestclient/ismi-vis.py Thu Feb 04 15:23:15 2016 +0100 @@ -26,10 +26,6 @@ def get_commentaries(): return app.send_static_file('commentaries.html') -@app.route("/commentaries_authors.html") -def get_commentaries_authors(): - return app.send_static_file('commentaries_authors2.html') - @app.route('/static/<filename>') def get_file(filename): return send_from_directory('static', filename)
--- a/ismi-python-neo4jrestclient/static/commentaries.html Sat Dec 19 23:25:23 2015 -0500 +++ b/ismi-python-neo4jrestclient/static/commentaries.html Thu Feb 04 15:23:15 2016 +0100 @@ -16,7 +16,7 @@ <div class="form-group"> <input type="text" value="jaghmini" placeholder="Search for person name" class="form-control" name="search"> </div> - <button class="btn btn-default" type="submit">Search for author id</button> + <button class="btn btn-default" type="submit">Search for author name</button> </form> </li> </ul> @@ -39,7 +39,7 @@ <div class="col-md-5"> <div class="panel panel-default"> <div class="panel-heading"> - <span id="author">Titles by this author</span> + <b id="author">Titles by this author</b> <span class="clickhide">(click to hide)</span> <span class="clickhide" style="display:none;">(click to show)</span> </div> @@ -59,7 +59,7 @@ <div class="col-md-7"> <div class="panel panel-default"> <div class="panel-heading"> - <span id="title">Text details</span> + <b id="title">Text details</b> <span class="clickhide">(click to hide)</span> <span class="clickhide" style="display:none;">(click to show)</span> </div> @@ -85,7 +85,7 @@ <div class="col-lg-12"> <div class="panel panel-default"> <div class="panel-heading"> - <span>Graph of commentaries</span> + <span><b>Graph of commentaries</b></span> <span class="clickhide">(click to hide)</span> <span class="clickhide" style="display:none;">(click to show)</span> </div> @@ -123,7 +123,7 @@ if (!data) return; $("#title").text("Title: "+data.title); var $list = $("#info").empty(); - $list.append($("<li>Author: " + data.author.label + " [" + data.author.ismi_id + "]</li>") + $list.append($("<li><b>Author:</b> " + data.author.label + " [" + data.author.ismi_id + "]</li>") .click(function() { search(data.author.label, true); })); @@ -133,7 +133,7 @@ if (key === "link") { val = "<a href=\"" + val + "\" target=\"_blank\">" + val + "</a>"; } - $list.append($("<li>" + key + ": " + val + "</li>")); + $list.append($("<li><b>" + key + ":</b> " + val + "</li>")); }; // re-set selected $("#graph .selected").each(function(){this.classList.remove("selected")});
--- a/ismi-python-neo4jrestclient/static/commentaries1.html Sat Dec 19 23:25:23 2015 -0500 +++ /dev/null Thu Jan 01 00:00:00 1970 +0000 @@ -1,167 +0,0 @@ -<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"> - <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"> - </div> - <button class="btn btn-default" type="submit">Search</button> - </form> - </li> - </ul> - </div> - <div class="navbar-header col-sm-6 col-md-6"> - <div class="logo-well"> - <a href="//neo4j.com/developer-resources"> - <img src="//neo4j-contrib.github.io/developer-resources/language-guides/assets/img/logo-white.svg" alt="Neo4j World's Leading Graph Database" id="logo"> - </a> - </div> - <div class="navbar-brand"> - <div class="brand">ISMI Commentary relations between Texts</div> - </div> - </div> - </div> - </div> -</div> - -<div class="row"> - <div class="col-md-5"> - <div class="panel panel-default"> - <div class="panel-heading">Search Results</div> - <table id="results" class="table table-striped table-hover"> - <thead> - <tr> - <th>Title (translit)</th> - <th>Title (arabic)</th> - <th>ismi_id</th> - </tr> - </thead> - <tbody> - </tbody> - </table> - </div> - </div> - <div class="col-md-7"> - <div class="panel panel-default"> - <div class="panel-heading" id="title">Details</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> - </div> - </div> - </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; } -</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 = ""; - $(function () { - function showMovie(text_id) { - $.get(backendApiPrefix+"/text/" + 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"); - var $list = $("#info").empty(); - for (key in data.attrs) { - val = data.attrs[key]; - if (key === "link") { - val = "<a href=\"" + val + "\" target=\"_blank\">" + val + "</a>"; - } - $list.append($("<li>" + key + ": " + val + "</li>")); - }; - }, "json"); - return false; - } - function search() { - var 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; - 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());}) - }); - showMovie(data[0].text.ismi_id); - }, "json"); - return false; - } - - $("#search").submit(search); - search(); - }) -</script> - -<script type="text/javascript"> - var width = 800, height = 800; - - var force = d3.layout.force() - .charge(-200).linkDistance(30).size([width, height]); - - var svg = d3.select("#graph").append("svg") - .attr("width", "100%").attr("height", "100%") - .attr("pointer-events", "all"); - - d3.json(backendApiPrefix+"/graph", 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"); - - var node = svg.selectAll(".node") - .data(graph.nodes).enter() - .append("circle") - .attr("class", function (d) { return "node "+d.label }) - .attr("r", 10) - .call(force.drag); - - // 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; }) - .attr("y2", function(d) { return d.target.y; }); - - node.attr("cx", function(d) { return d.x; }) - .attr("cy", function(d) { return d.y; }); - }); - }); -</script> -</body> -</html>
--- a/ismi-python-neo4jrestclient/static/commentaries_authors.html Sat Dec 19 23:25:23 2015 -0500 +++ /dev/null Thu Jan 01 00:00:00 1970 +0000 @@ -1,187 +0,0 @@ -<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"> - <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="7437" placeholder="Search for person-id" class="form-control" name="search"> - </div> - <button class="btn btn-default" type="submit">Search</button> - </form> - </li> - </ul> - </div> - <div class="navbar-header col-sm-6 col-md-6"> - <div class="logo-well"> - <a href="//neo4j.com/developer-resources"> - <img src="//neo4j-contrib.github.io/developer-resources/language-guides/assets/img/logo-white.svg" alt="Neo4j World's Leading Graph Database" id="logo"> - </a> - </div> - <div class="navbar-brand"> - <div class="brand">ISMI Commentary relations between Texts</div> - </div> - </div> - </div> - </div> -</div> - -<div class="row"> - <div class="col-md-5"> - <div class="panel panel-default"> - <div class="panel-heading">Search Results</div> - <table id="results" class="table table-striped table-hover"> - <thead> - <tr> - <th>Author (translit)</th> - <th>Title (translit)</th> - <th>Title (arabic)</th> - <th>ismi_id</th> - </tr> - </thead> - <tbody> - </tbody> - </table> - </div> - </div> - <div class="col-md-7"> - <div class="panel panel-default"> - <div class="panel-heading" id="title">Details</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> -<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; } -</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 = ""; - $(function () { - function showText(text_id) { - $.get(backendApiPrefix+"/textandcommentaries/" + encodeURIComponent(text_id), - function (data) { - if (!data) return; - $("#title").text(data.title); - var $list = $("#info").empty(); - $list.append($("<li> author: " + data.author + "</li>")); - 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>")); - }; - 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(); - $.get(backendApiPrefix+"/search?q=" + encodeURIComponent(query), - function (data) { - var t = $("table#results tbody").empty(); - if (!data || data.length == 0) return; - data.forEach(function (row) { - var text = row.text; - var author = row.author; - $("<tr><td>" + author.label + "</td><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());}) - }); - showText(data[0].text.ismi_id); - }, "json"); - return false; - } - - $("#search").submit(search); - search(); - }) -</script> - -<script type="text/javascript"> - var width = 800, height = 800; - - var force = d3.layout.force() - .charge(-200).linkDistance(30).size([width, height]); - - var svg = d3.select("#graph").append("svg") - .attr("width", "100%").attr("height", "100%") - .attr("pointer-events", "all"); - - d3.json(backendApiPrefix+"/graph", 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"); - - var node = svg.selectAll(".node") - .data(graph.nodes).enter() - .append("circle") - .attr("class", function (d) { return "node "+d.label }) - .attr("r", 10) - .call(force.drag); - - // 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; }) - .attr("y2", function(d) { return d.target.y; }); - - node.attr("cx", function(d) { return d.x; }) - .attr("cy", function(d) { return d.y; }); - }); - }); -</script> -</body> -</html>
--- a/ismi-python-neo4jrestclient/static/commentaries_authors2.html Sat Dec 19 23:25:23 2015 -0500 +++ /dev/null Thu Jan 01 00:00:00 1970 +0000 @@ -1,262 +0,0 @@ -<html> -<head> - <meta name="viewport" content="width=device-width, initial-scale=1.0"> - <link rel="stylesheet" href="static/main.css"> - <title>ISMI commentary relations</title> -</head> - -<body style="background:none;"> -<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="jaghmini" placeholder="Search for person name" class="form-control" name="search"> - </div> - <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 class="logo-well"> - <a href="//neo4j.com/developer-resources"> - <img src="//neo4j-contrib.github.io/developer-resources/language-guides/assets/img/logo-white.svg" alt="Neo4j World's Leading Graph Database" id="logo"> - </a> - </div> - <div class="navbar-brand"> - <div class="brand">ISMI Commentary relations between Texts</div> - </div> - </div> - </div> - </div> -</div> - -<div class="row"> - <div class="col-md-5"> - <div class="panel panel-default"> - <div class="panel-heading"> - <span>Texts 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>Author (translit)</th> - <th>Title (translit)</th> - <th>Title (arabic)</th> - <th>ismi_id</th> - </tr> - </thead> - <tbody> - </tbody> - </table> - </div> - </div> - <div class="col-md-7"> - <div class="panel panel-default"> - <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.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"> - // make panels roll-up - $(".panel-heading").on("click", function() { - $(this).find(".clickhide").toggle(); - $(this).next().slideToggle(); - }); - // provide search and graph - backendApiPrefix = ""; - searchApi = {}; - $(function () { - function showText(text_id) { - $.get(backendApiPrefix+"/textandcommentaries/" + encodeURIComponent(text_id), - function (data) { - if (!data) return; - $("#title").text("Title: "+data.title); - var $list = $("#info").empty(); - $list.append($("<li> author: " + data.author.label + "</li>")); - for (var key in data.attrs) { - if (key[0] === "_") continue; - 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")}); - 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(); - $.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 list of texts - data.forEach(function (row) { - var text = row.text; - var author = row.author; - var comm = row.is_commentary || row.has_commentaries; - var $row = $("<tr><td>" + author.label + "</td><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")}); - }); - // show details of the first text - 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 = 1400, height = 1400; - - var force = d3.layout.force() - .charge(-100) // -200 - .linkDistance(20) // 30 - .size([width, height]); - - var svg = d3.select("#graph").append("svg") - .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"); - - // 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", - "marker-end": "url(#arrow)" - }); - - var node = svg.selectAll(".node") - .data(graph.nodes).enter() - .append("circle") - .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() { - console.log("click on ", this); - 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; }) - .attr("y2", function(d) { return d.target.y; }); - - node.attr("cx", function(d) { return d.x; }) - .attr("cy", function(d) { return d.y; }); - }); - }); - -</script> -</body> -</html>
--- a/ismi-python-neo4jrestclient/static/index.html Sat Dec 19 23:25:23 2015 -0500 +++ /dev/null Thu Jan 01 00:00:00 1970 +0000 @@ -1,164 +0,0 @@ -<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"> - <title>Neo4j Movies</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"> - </div> - <button class="btn btn-default" type="submit">Search</button> - </form> - </li> - </ul> - </div> - <div class="navbar-header col-sm-6 col-md-6"> - <div class="logo-well"> - <a href="//neo4j.com/developer-resources"> - <img src="//neo4j-contrib.github.io/developer-resources/language-guides/assets/img/logo-white.svg" alt="Neo4j World's Leading Graph Database" id="logo"> - </a> - </div> - <div class="navbar-brand"> - <div class="brand">ISMI Commentary relations between Texts</div> - </div> - </div> - </div> - </div> -</div> - -<div class="row"> - <div class="col-md-5"> - <div class="panel panel-default"> - <div class="panel-heading">Search Results</div> - <table id="results" class="table table-striped table-hover"> - <thead> - <tr> - <th>Author (translit)</th> - <th>Title (translit)</th> - <th>Title (arabic)</th> - <th>ismi_id</th> - </tr> - </thead> - <tbody> - </tbody> - </table> - </div> - </div> - <div class="col-md-7"> - <div class="panel panel-default"> - <div class="panel-heading" id="title">Details</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> - </div> - </div> - </div> - </div> -</div> -<style type="text/css"> - .node { stroke: #222; stroke-width: 1.5px; } - .node.TEXT { fill: #888; } - .node.PERSON { fill: #BBB; } - .link { stroke: #999; stroke-opacity: .6; stroke-width: 1px; } -</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 = ""; - $(function () { - function showMovie(text_id) { - $.get(backendApiPrefix+"/text/" + 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"); - var $list = $("#info").empty(); - for (key in data.attrs) { - $list.append($("<li>" + key + ": " + data.attrs[key] + "</li>")); - }; - }, "json"); - return false; - } - function search() { - var 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; - 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());}) - }); - showMovie(data[0].text.ismi_id); - }, "json"); - return false; - } - - $("#search").submit(search); - search(); - }) -</script> - -<script type="text/javascript"> - var width = 800, height = 800; - - var force = d3.layout.force() - .charge(-200).linkDistance(30).size([width, height]); - - var svg = d3.select("#graph").append("svg") - .attr("width", "100%").attr("height", "100%") - .attr("pointer-events", "all"); - - d3.json(backendApiPrefix"/graph", 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"); - - var node = svg.selectAll(".node") - .data(graph.nodes).enter() - .append("circle") - .attr("class", function (d) { return "node "+d.label }) - .attr("r", 10) - .call(force.drag); - - // 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; }) - .attr("y2", function(d) { return d.target.y; }); - - node.attr("cx", function(d) { return d.x; }) - .attr("cy", function(d) { return d.y; }); - }); - }); -</script> -</body> -</html>
--- a/ismi-python-neo4jrestclient/static/main.css Sat Dec 19 23:25:23 2015 -0500 +++ b/ismi-python-neo4jrestclient/static/main.css Thu Feb 04 15:23:15 2016 +0100 @@ -266,7 +266,7 @@ } body { font-family: "Helvetica Neue", Helvetica, Arial, sans-serif; - font-size: 14px; + font-size: 12px; line-height: 1.428571429; color: #333333; background-color: #ffffff; @@ -424,7 +424,7 @@ } h4, .h4 { - font-size: 18px; + font-size: 16px; } h5, .h5 { @@ -1618,7 +1618,7 @@ output { display: block; padding-top: 7px; - font-size: 14px; + font-size: 12px; line-height: 1.428571429; color: #555555; vertical-align: middle; @@ -1628,7 +1628,7 @@ width: 100%; height: 34px; padding: 6px 12px; - font-size: 14px; + font-size: 12px; line-height: 1.428571429; color: #555555; vertical-align: middle; @@ -1910,7 +1910,7 @@ border: 1px solid transparent; white-space: nowrap; padding: 6px 12px; - font-size: 14px; + font-size: 12px; line-height: 1.428571429; border-radius: 4px; -webkit-user-select: none; @@ -2924,7 +2924,7 @@ padding: 5px 0; margin: 2px 0 0; list-style: none; - font-size: 14px; + font-size: 12px; background-color: #ffffff; border: 1px solid #cccccc; border: 1px solid rgba(0, 0, 0, 0.15); @@ -3306,7 +3306,7 @@ } .input-group-addon { padding: 6px 12px; - font-size: 14px; + font-size: 12px; font-weight: normal; line-height: 1; color: #555555; @@ -6091,7 +6091,7 @@ /* Content */ .table th, .table td { padding: 8px 12px; -font-size: 14px; +font-size: 12px; } /* Footer */ @@ -6352,7 +6352,7 @@ font-size: 20px; } h4 { - font-size: 16px; + font-size: 14px; } h5 { font-size: 13px;