changeset 13:394bd5cfc508

new commentaries_authors.html visualisation.
author casties
date Mon, 05 Oct 2015 18:56:19 +0200
parents d67c5ad47709
children b33f35b57b93
files ismi-python-neo4jrestclient/ismi-vis.py ismi-python-neo4jrestclient/static/commentaries.html ismi-python-neo4jrestclient/static/commentaries_authors.html ismi-python-neo4jrestclient/static/index.html
diffstat 4 files changed, 279 insertions(+), 26 deletions(-) [+]
line wrap: on
line diff
--- a/ismi-python-neo4jrestclient/ismi-vis.py	Fri Oct 02 01:08:46 2015 -0400
+++ b/ismi-python-neo4jrestclient/ismi-vis.py	Mon Oct 05 18:56:19 2015 +0200
@@ -6,33 +6,39 @@
 from neo4jrestclient.client import GraphDatabase, Node, Relationship
 
 app = Flask(__name__, static_url_path='/static/')
+app.debug = True
 gdb = GraphDatabase("http://localhost:7474", username="neo4j", password="neo5j")
 
 
 @app.route("/")
 def get_index():
-    return app.send_static_file('index.html')
+    return app.send_static_file('commentaries.html')
 
 @app.route("/commentaries.html")
 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_authors.html')
 
 @app.route("/graph")
 def get_graph():
-    query = ("match (t1:TEXT)-[r:is_commentary_on]->(t2:TEXT) return t1,r,t2")
-    results = gdb.query(query, returns=(Node,Relationship,Node))
+    query = ("match (a1:PERSON)<-[:was_created_by]-(t1:TEXT)-[r:is_commentary_on]->(t2:TEXT)-[:was_created_by]->(a2:PERSON)"
+             " return a1,t1,t2,a2"
+             " limit 100")
+    results = gdb.query(query, returns=(Node,Node,Node,Node))
     n4j_nodes = {}
     node_idx = {}
     nodes = []
     rels = []
     i = 0
-    for node1, rel, node2 in results:
-        # source node
-        id1 = node1['ismi_id']
+    for author1, text1, text2, author2 in results:
+        # source text
+        id1 = text1['ismi_id']
         if id1 not in n4j_nodes:
-            n4j_nodes[id1] = node1
-            nodes.append({"title": node1['label'], "label": "TEXT"})
+            n4j_nodes[id1] = text1
+            nodes.append({"title": "%s [%s]"%(text1['label'],id1), "label": "TEXT"})
             node_idx[id1] = i
             source = i
             i += 1
@@ -40,11 +46,11 @@
         else:
             source = node_idx[id1]
 
-        # target node
-        id2 = node2['ismi_id']
+        # target text
+        id2 = text2['ismi_id']
         if id2 not in n4j_nodes:
-            n4j_nodes[id2] = node2
-            nodes.append({"title": node2['label'], "label": "TEXT"})
+            n4j_nodes[id2] = text2
+            nodes.append({"title": "%s [%s]"%(text2['label'],id2), "label": "TEXT"})
             node_idx[id2] = i
             target = i
             i += 1
@@ -52,9 +58,39 @@
         else:
             target = node_idx[id2]
 
-        # relation
+        # relation is_commentary_on
         rels.append({"source": source, "target": target})
 
+        # source author
+        id3 = author1['ismi_id']
+        if id3 not in n4j_nodes:
+            n4j_nodes[id3] = author1
+            nodes.append({"title": "%s [%s]"%(author1['label'],id3), "label": "PERSON"})
+            node_idx[id3] = i
+            s_author = i
+            i += 1
+
+        else:
+            s_author = node_idx[id3]
+
+        # relation was_created_by
+        rels.append({"source": source, "target": s_author})
+
+        # target author
+        id4 = author1['ismi_id']
+        if id4 not in n4j_nodes:
+            n4j_nodes[id4] = author2
+            nodes.append({"title": "%s [%s]"%(author2['label'],id4), "label": "PERSON"})
+            node_idx[id4] = i
+            t_author = i
+            i += 1
+
+        else:
+            t_author = node_idx[id4]
+
+        # relation was_created_by
+        rels.append({"source": source, "target": t_author})
+
     return Response(dumps({"nodes": nodes, "links": rels}),
                     mimetype="application/json")
 
@@ -66,15 +102,17 @@
     except KeyError:
         return []
     else:
-        query = ("MATCH (text:TEXT) "
-                 "WHERE text.label =~ {title} "
-                 "RETURN text")
+        query = ("MATCH (t:TEXT)-[:was_created_by]->(p:PERSON) "
+                 "WHERE p.ismi_id = {id} "
+                 "RETURN t,p")
         results = gdb.query(
             query,
-            returns=Node,
-            params={"title": "(?i).*" + q + ".*"}
+            returns=(Node,Node),
+            params={"id": int(q)}
         )
-        return Response(dumps([{"text": row.properties} for [row] in results]),
+        # {"name": "(?i).*" + q + ".*"}
+        print("search for %s returned %s results"%(repr(q),len(results)))
+        return Response(dumps([{"text": text.properties, "author": author.properties} for [text,author] in results]),
                         mimetype="application/json")
 
 
@@ -89,6 +127,33 @@
     return Response(dumps({"title": node['label'], "attrs": node.properties}),
                     mimetype="application/json")
 
+@app.route("/textandcommentaries/<text_id>")
+def get_textandcommentaries(text_id):
+    query = ("match (t:TEXT {ismi_id:{text_id}})"
+             " optional match (s:TEXT)<-[sr:is_commentary_on]-(t)"
+             " optional match (t)<-[cr:is_commentary_on]-(c:TEXT)" 
+             " return t,s.label, s.ismi_id,c.label,c.ismi_id")
+    print("query:%s"%query)
+    results = gdb.query(query, returns=(Node,str,str,str,str), 
+                        params={"text_id": int(text_id)})
+    
+    print("result:%s"%results)
+    text = None
+    scs = {}
+    cs = {}
+    for [t,s_label,s_id,c_label,c_id] in results:
+        text = t
+        if s_id is not None and s_id != "None":
+            scs[int(s_id)] = s_label
+            
+        if c_id is not None and c_id != "None":
+            cs[int(c_id)] = c_label
+        
+    print("text:%s scs:%s cs:%s"%(text, scs, cs))
+    return Response(dumps({"title": text['label'], "attrs": text.properties, 
+                           "commenting": scs, "commentaries": cs}),
+                    mimetype="application/json")
+
 
 if __name__ == '__main__':
     app.run(port=8080)
--- a/ismi-python-neo4jrestclient/static/commentaries.html	Fri Oct 02 01:08:46 2015 -0400
+++ b/ismi-python-neo4jrestclient/static/commentaries.html	Mon Oct 05 18:56:19 2015 +0200
@@ -81,9 +81,10 @@
 <!-- <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("/netvis-ismi/text/" + encodeURIComponent(text_id),
+            $.get(backendApiPrefix+"/text/" + encodeURIComponent(text_id),
                     function (data) {
                         if (!data) return;
                         $("#title").text(data.title);
@@ -101,7 +102,7 @@
         }
         function search() {
             var query=$("#search").find("input[name=search]").val();
-            $.get("/netvis-ismi/search?q=" + encodeURIComponent(query),
+            $.get(backendApiPrefix+"/search?q=" + encodeURIComponent(query),
                     function (data) {
                         var t = $("table#results tbody").empty();
                         if (!data || data.length == 0) return;
@@ -130,7 +131,7 @@
             .attr("width", "100%").attr("height", "100%")
             .attr("pointer-events", "all");
 
-    d3.json("/netvis-ismi/graph", function(error, graph) {
+    d3.json(backendApiPrefix+"/graph", function(error, graph) {
 		if (error) return;
 		
         force.nodes(graph.nodes).links(graph.links).start();
--- /dev/null	Thu Jan 01 00:00:00 1970 +0000
+++ b/ismi-python-neo4jrestclient/static/commentaries_authors.html	Mon Oct 05 18:56:19 2015 +0200
@@ -0,0 +1,185 @@
+<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="tusi" 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>
+                    <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();
+                        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 + " [<span class=\"text_id\">" + key + "</span>]" + "</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 + " [<span class=\"text_id\">" + key + "</span>]" + "</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/index.html	Fri Oct 02 01:08:46 2015 -0400
+++ b/ismi-python-neo4jrestclient/static/index.html	Mon Oct 05 18:56:19 2015 +0200
@@ -44,6 +44,7 @@
             <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>
@@ -73,7 +74,7 @@
 <style type="text/css">
     .node { stroke: #222; stroke-width: 1.5px; }
     .node.TEXT { fill: #888; }
-    .node.movie { fill: #BBB; }
+    .node.PERSON { fill: #BBB; }
     .link { stroke: #999; stroke-opacity: .6; stroke-width: 1px; }
 </style>
 
@@ -81,9 +82,10 @@
 <!-- <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("/netvis-ismi/text/" + encodeURIComponent(text_id),
+            $.get(backendApiPrefix+"/text/" + encodeURIComponent(text_id),
                     function (data) {
                         if (!data) return;
                         $("#title").text(data.title);
@@ -97,7 +99,7 @@
         }
         function search() {
             var query=$("#search").find("input[name=search]").val();
-            $.get("/netvis-ismi/search?q=" + encodeURIComponent(query),
+            $.get(backendApiPrefix+"/search?q=" + encodeURIComponent(query),
                     function (data) {
                         var t = $("table#results tbody").empty();
                         if (!data || data.length == 0) return;
@@ -126,7 +128,7 @@
             .attr("width", "100%").attr("height", "100%")
             .attr("pointer-events", "all");
 
-    d3.json("/netvis-ismi/graph", function(error, graph) {
+    d3.json(backendApiPrefix"/graph", function(error, graph) {
 		if (error) return;
 		
         force.nodes(graph.nodes).links(graph.links).start();