Mercurial > hg > NetworkVis

changeset 9:0f4846255b20

Find changesets by keywords (author, files, the commit message), revision number or hash, or revset expression.
updated for ismi-dev.
author casties
date Thu, 01 Oct 2015 17:35:56 +0200
parents 45dad9e38c82
children 04b69bcf4be5
files ismi-python-neo4jrestclient/ismi-vis.py ismi-python-neo4jrestclient/static/commentaries.html ismi-python-neo4jrestclient/static/index.html popoto/js/app-template.js
diffstat 4 files changed, 182 insertions(+), 11 deletions(-) [+]
line wrap: on
line diff
--- a/ismi-python-neo4jrestclient/ismi-vis.py	Thu Oct 01 14:39:56 2015 +0200
+++ b/ismi-python-neo4jrestclient/ismi-vis.py	Thu Oct 01 17:35:56 2015 +0200
@@ -13,6 +13,10 @@
 def get_index():
     return app.send_static_file('index.html')
 
+@app.route("/commentaries.html")
+def get_commentaries():
+    return app.send_static_file('commentaries.html')
+
 
 @app.route("/graph")
 def get_graph():
--- /dev/null	Thu Jan 01 00:00:00 1970 +0000
+++ b/ismi-python-neo4jrestclient/static/commentaries.html	Thu Oct 01 17:35:56 2015 +0200
@@ -0,0 +1,166 @@
+<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">
+    $(function () {
+        function showMovie(text_id) {
+            $.get("/netvis-ismi/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("/netvis-ismi/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("/netvis-ismi/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	Thu Oct 01 14:39:56 2015 +0200
+++ b/ismi-python-neo4jrestclient/static/index.html	Thu Oct 01 17:35:56 2015 +0200
@@ -1,11 +1,11 @@
 <html>
 <head>
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <link rel="stylesheet" href="http://neo4j-contrib.github.io/developer-resources/language-guides/assets/css/main.css">
+    <link rel="stylesheet" href="//neo4j-contrib.github.io/developer-resources/language-guides/assets/css/main.css">
     <title>Neo4j Movies</title>
 </head>
 
-<body>
+<body style="background:none;">
 <div id="graph">
 </div>
 <div role="navigation" class="navbar navbar-default navbar-static-top">
@@ -25,8 +25,8 @@
             </div>
             <div class="navbar-header col-sm-6 col-md-6">
                 <div class="logo-well">
-                    <a href="http://neo4j.com/developer-resources">
-                    <img src="http://neo4j-contrib.github.io/developer-resources/language-guides/assets/img/logo-white.svg" alt="Neo4j World's Leading Graph Database" id="logo">
+                    <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">
@@ -45,8 +45,8 @@
                 <thead>
                 <tr>
                     <th>Title (translit)</th>
+                    <th>Title (arabic)</th>
                     <th>ismi_id</th>
-                    <th>Title (arabic)</th>
                 </tr>
                 </thead>
                 <tbody>
@@ -78,15 +78,16 @@
 </style>
 
 <script type="text/javascript" src="//code.jquery.com/jquery-1.11.0.min.js"></script>
-<script src="http://d3js.org/d3.v3.min.js" type="text/javascript"></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">
     $(function () {
         function showMovie(text_id) {
-            $.get("/text/" + encodeURIComponent(text_id),
+            $.get("/netvis-ismi/text/" + encodeURIComponent(text_id),
                     function (data) {
                         if (!data) return;
                         $("#title").text(data.title);
-                        // $("#poster").attr("src","http://neo4j-contrib.github.io/developer-resources/language-guides/assets/posters/"+encodeURIComponent(data.title)+".jpg");
+                        // $("#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>"));
@@ -96,7 +97,7 @@
         }
         function search() {
             var query=$("#search").find("input[name=search]").val();
-            $.get("/search?q=" + encodeURIComponent(query),
+            $.get("/netvis-ismi/search?q=" + encodeURIComponent(query),
                     function (data) {
                         var t = $("table#results tbody").empty();
                         if (!data || data.length == 0) return;
@@ -125,7 +126,7 @@
             .attr("width", "100%").attr("height", "100%")
             .attr("pointer-events", "all");
 
-    d3.json("/graph", function(error, graph) {
+    d3.json("/netvis-ismi/graph", function(error, graph) {
 		if (error) return;
 		
         force.nodes(graph.nodes).links(graph.links).start();
--- a/popoto/js/app-template.js	Thu Oct 01 14:39:56 2015 +0200
+++ b/popoto/js/app-template.js	Thu Oct 01 17:35:56 2015 +0200
@@ -4,7 +4,7 @@
  *
  * For more information on Neo4J REST API the documentation is available here: http://neo4j.com/docs/stable/rest-api-cypher.html
  */
-popoto.rest.CYPHER_URL = "https://ismi-dev.mpiwg-berlin.mpg.de:7473/db/data/transaction/commit";
+popoto.rest.CYPHER_URL = "https://ismi-dev.mpiwg-berlin.mpg.de/neo4j-ismi/db/data/transaction/commit";
 
 /**
  * Add this authorization property if your Neo4j server uses basic HTTP authentication.