Mercurial > hg > NetworkVis

changeset 23:80010fb9dbce

Find changesets by keywords (author, files, the commit message), revision number or hash, or revset expression.
make new commentaries visualisation the default.
author casties
date Fri, 30 Oct 2015 15:37:43 +0100
parents b709419d4235
children eb0be386736f
files ismi-python-neo4jrestclient/ismi-vis.py ismi-python-neo4jrestclient/static/commentaries.html ismi-python-neo4jrestclient/static/commentaries1.html ismi-python-neo4jrestclient/static/commentaries_authors3.html
diffstat 4 files changed, 300 insertions(+), 300 deletions(-) [+]
line wrap: on
line diff
--- a/ismi-python-neo4jrestclient/ismi-vis.py	Fri Oct 09 15:12:34 2015 +0200
+++ b/ismi-python-neo4jrestclient/ismi-vis.py	Fri Oct 30 15:37:43 2015 +0100
@@ -20,7 +20,7 @@
 
 @app.route("/commentaries_authors.html")
 def get_commentaries_authors():
-    return app.send_static_file('commentaries_authors3.html')
+    return app.send_static_file('commentaries_authors2.html')
 
 @app.route('/static/<filename>')
 def get_file(filename):
--- 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>
--- /dev/null	Thu Jan 01 00:00:00 1970 +0000
+++ b/ismi-python-neo4jrestclient/static/commentaries1.html	Fri Oct 30 15:37:43 2015 +0100
@@ -0,0 +1,167 @@
+<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_authors3.html	Fri Oct 09 15:12:34 2015 +0200
+++ /dev/null	Thu Jan 01 00:00:00 1970 +0000
@@ -1,268 +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="7437" placeholder="Search for person-id" 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 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>
-                    <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 = "/netvis-ismi";
-    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 + " [" + 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(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;
-                            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")});
-                        });
-                        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 = 1400, height = 1400;
-
-    var force = d3.layout.force()
-            .charge(-100) // -200
-            .linkDistance(30) // 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() {
-                    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>