UI Refresh also CodeMirror

neo4j-contrib · Apr 17, 2016 · 6d9fd63 · 6d9fd63
1 parent ee6fcf5
commit 6d9fd63
Show file tree

Hide file tree

Showing 10 changed files with 2,003 additions and 50 deletions.
diff --git a/.gitignore b/.gitignore
@@ -1,3 +1,8 @@
+.shell_history
+*.hprof
+*.patch
+data/
+neo4j-home
 target
 *.iml
 *.ipr

diff --git a/src/main/webapp/WEB-INF/web.xml b/src/main/webapp/WEB-INF/web.xml
@@ -16,7 +16,7 @@
         <filter-class>org.neo4j.community.console.CharsetFilter</filter-class>
     </filter>
 
-    <filter>
+    <!--filter>
         <filter-name>GuardFilter</filter-name>
         <filter-class>org.neo4j.community.console.GuardingRequestFilter</filter-class>
         <init-param>
@@ -27,7 +27,7 @@
             <param-name>maxOps</param-name>
             <param-value>1000000</param-value>
         </init-param>
-    </filter>
+    </filter-->
 
     <filter>
         <filter-name>ConsoleApplication</filter-name>
@@ -52,10 +52,10 @@
         <url-pattern>*</url-pattern>
     </filter-mapping>
 
-    <filter-mapping>
+    <!--filter-mapping>
         <filter-name>GuardFilter</filter-name>
         <url-pattern>/console/*</url-pattern>
-    </filter-mapping>
+    </filter-mapping-->
 
     <filter-mapping>
         <filter-name>ConsoleApplication</filter-name>

diff --git a/src/main/webapp/index.html b/src/main/webapp/index.html
@@ -5,11 +5,13 @@
     <link rel="icon" href="http://neo4j.org/favicon.ico"/>
     <link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/codemirror/5.11.0/codemirror.min.css">
     <link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/codemirror/5.11.0/theme/neo.min.css">
+    <link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/font-awesome/4.6.1/css/font-awesome.css">
     <title>Neo4j Console</title>
     <!-- don't remove "console_assets/" context prefix, needed for neo4j.org proxy disambiguation -->
     <script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
     <script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/d3/3.2.2/d3.min.js"></script>
-    <script type="text/javascript" src="console_assets/javascripts/visualization.js"></script>
+    <script type="text/javascript" src="console_assets/javascripts/neod3.js"></script>
+    <script type="text/javascript" src="console_assets/javascripts/neod3-visualization.js"></script>
     <script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/codemirror/5.11.0/codemirror.min.js"></script>
     <script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/codemirror/5.11.0/addon/runmode/runmode.min.js"></script>
     <script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/codemirror/5.11.0/mode/cypher/cypher.min.js"></script>
@@ -18,8 +20,9 @@
     <script type="text/javascript" src="console_assets/javascripts/console.js"></script>
     <style type="text/css">
         @import url("console_assets/stylesheets/main.css");
-        @import url("console_assets/stylesheets/highlight.css");
+        /* @import url("console_assets/stylesheets/highlight.css");*/
         @import url("console_assets/stylesheets/d3.css");
+        @import url("console_assets/stylesheets/neod3.css");
         @import url("console_assets/stylesheets/light.css");
         @import url("console_assets/stylesheets/datatable.css");
     </style>
@@ -63,13 +66,12 @@
             <option value="2.3 planner cost">Cypher compiler 2.3-cost</option>
             <option value="2.3 planner rule">Cypher compiler 2.3-rule</option>
         </select>
-        </span>
     </div>
 
     <div id="output" class="console cm-s-neo">
     </div>
     <form id="form" action="#"  >
-        <textarea id="input" data-lang="cypher" class="code form-control"></textarea>
+        <textarea id="input" data-lang="cypher" class="code form-control" rows="4" cols="120" ></textarea>
     </form>
     <!--div id="graph">
     </div-->
@@ -161,7 +163,8 @@ <h3 style="display: inline-block;">Version: </h3>
         <input type="url" id="share_iFrame" style="width:80%" onclick="this.select();"/><br/>
         If you nee a fresh, blank console, <a target="_blank" class="btn_pretty" href="http://console.neo4j.org/?init=&amp;no_root=true">click here</a>. 
     </div>
-    <div id="query_button" class="btn_pretty" onclick="query();return false;">Run</div>
+    <!--div id="query_button" class="btn_pretty" onclick="query();return false;">Run</div-->
+    <a href="#" title="Execute" id="execute" onclick="query();return false;"><i class="fa fa-play-circle-o"></i></a>
 </div>
 </body>
 </html>
diff --git a/src/main/webapp/javascripts/console.js b/src/main/webapp/javascripts/console.js
@@ -1,7 +1,9 @@
 'use strict';
 
 var inputeditor;
-var visualizer = new GraphVisualization();
+//var visualizer = new GraphVisualization();
+var visualizer = new Neod3Renderer();
+
 var graphgistWindow;
 
 function append(element, text, doHighlight) {
@@ -92,9 +94,16 @@ function viz(data) {
     }
     var output = $("#output");
     output.children('#graph').remove();
+    var container = $("<div id='graph'></div>");
+    output.append(container);
     if (data) {
         var h = output.height();
-        visualizer.visualize("output", output.width(), h, data);
+        var show_result_only = false; // todo
+        var style = null; // todo custom styles like from adoc
+        //if (style == "{style}") style = null;
+        var selectedVisualization = handleSelection(data, show_result_only);
+        visualizer.render("graph", container, selectedVisualization, style);
+        //visualizer.visualize("output", output.width(), h, data);
     }
     else {
         var query = getQuery();
@@ -106,7 +115,12 @@ function viz(data) {
             beforeSend: setSessionHeader,
             dataType: "json",
             success: function (data) {
-                visualizer.visualize("output", output.width(), output.height(),data)
+                var show_result_only = false; // todo
+                var style = null; // todo custom styles like from adoc
+                var selectedVisualization = handleSelection(data, show_result_only);
+                visualizer.render("graph", container, selectedVisualization, style);
+
+                //visualizer.visualize("output", output.width(), output.height(),data)
             }
         });
     }
@@ -456,16 +470,46 @@ function guid() {
         s4() + '-' + s4() + s4() + s4();
 }
 
+function handleSelection(data, show_result_only) {
+    if (!show_result_only) return data;
+    var nodes = [];
+    var links = [];
+    var i;
+    for (i = 0; i < data.nodes.length; i++) {
+        var node = data.nodes[i];
+        if (node.selected) {
+            node['$index'] = nodes.length;
+            nodes.push(node);
+        }
+    }
+    var hasSelectedRels = data.links.filter(function(link) { return link.selected; }).length > 0
+    for (i = 0; i < data.links.length; i++) {
+        var link = data.links[i];
+        if (link.selected || (!hasSelectedRels && data.nodes[link.source].selected && data.nodes[link.target].selected)) {
+            link.source = data.nodes[link.source]['$index'];
+            link.target = data.nodes[link.target]['$index'];
+            links.push(link);
+        }
+    }
+    return {nodes: nodes, links: links};
+}
+
 var session_id=guid();
 
 $(document).ready(
     function () {
         inputeditor = CodeMirror.fromTextArea(document.getElementById("input"), {
             lineNumbers: false,
             readOnly: false,
+            smartIndent: false,
+            lineWrapping:true,
+            scrollbarStyle:null,
+            allowDropFileTypes:["cypher","cql","cyp"],
             mode: "cypher",
-            theme: "neo",
+            theme: "neo" //,
+/*
             onKeyEvent: function (inputeditor, e) {
+                console.log(e);
                 if (e.type == 'keydown') {
                     // resize output while typing...
                     resizeOutput();
@@ -479,6 +523,13 @@ $(document).ready(
                     return false;
                 }
             }
+*/
+        });
+        inputeditor.setOption("extraKeys", {
+            "Enter": function(cm) {cm.execCommand("newlineAndIndent"); },
+            "Cmd-Enter": query,
+            "Shift-Enter": query,
+            "Ctrl-Enter": query
         });
         // set id to align with CSS from Neo4j Browser
         $("#form > div.CodeMirror").first().attr("id", "editor");
@@ -532,8 +583,8 @@ $(document).ready(
         $(".popup .btn_close").click(function () {
             close($(this).parent());
         });
-        $("code[type=cypher]").each(function() {
-	       var text=highlight($(this).text());
-	       $(this).html(text);
-		});
+        //$("code[type=cypher]").each(function() {
+	     //  var text=highlight($(this).text());
+	     //  $(this).html(text);
+		//});
     });