Mercurial > hg > NetworkVis

diff ismi-python-neo4jrestclient/static/commentaries_authors2.html @ 16:ad3eefa2cb80

Find changesets by keywords (author, files, the commit message), revision number or hash, or revset expression.
pimped commentaries_authors.html visualisation.
author casties
date Tue, 06 Oct 2015 19:26:46 +0200
parents
children 09c0a9ceb778
line wrap: on
line diff
--- /dev/null	Thu Jan 01 00:00:00 1970 +0000
+++ b/ismi-python-neo4jrestclient/static/commentaries_authors2.html	Tue Oct 06 19:26:46 2015 +0200
@@ -0,0 +1,198 @@
+<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="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>
+<div class="col-lg-12">
+<div id="graph" class="panel panel-default">
+</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: 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>"));
+                        };
+                        // 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")});
+                        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());});
+                            // set mark
+                            $("#graph .ismi-"+text.ismi_id).each(function(){this.classList.add("marked")});
+                        });
+                        showText(data[0].text.ismi_id);
+                    }, "json");
+            return false;
+        }
+
+        $("#search").submit(search);
+        search();
+    })
+</script>
+
+<script type="text/javascript">
+    var width = 1800, height = 1800;
+
+    var force = d3.layout.force()
+            .charge(-200).linkDistance(30).size([width, height]);
+
+    var svg = d3.select("#graph").append("svg")
+            .attr("width", "1800px").attr("height", "1800px")
+            .attr("pointer-events", "all");
+
+    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");
+
+        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", 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>