Add a world layout.

Add checkboxes (using unicode characters). Add shiftKey handling for multiple checkbox selection. Add css for checkboxes.
arcusfelis · Dec 19, 2012 · 6b636c9 · 6b636c9
1 parent 6e46600
commit 6b636c9
Show file tree

Hide file tree

Showing 8 changed files with 2,608 additions and 1,367 deletions.
diff --git a/priv/css_src/relatio.css b/priv/css_src/relatio.css
@@ -11,7 +11,7 @@ body {
   overflow: hidden;
 }
 
-input {
+input#search-field {
   font-family: DejaVu Sans Mono, Arial;
   font-size: 11pt;
   width: 250px;
@@ -163,15 +163,6 @@ a {
   -moz-border-radius: 5px;
   border-radius: 5px;
 }
-.active-modules .overlay-node {
-  z-index: 9050;
-}
-.active-hover-modules .overlay-node:hover {
-  z-index: 9500;
-}
-.active-hover-modules #graph-modules { 
-  z-index: 9200;
-}
 
 .selected-elem-info {
     font-size: 14pt;
@@ -424,6 +415,28 @@ a {
     list-style-type: disc;
 }
 
+body.world li {
+    list-style-type: none;
+}
+
+.checkbox:before {
+    font-size: 16pt;
+    position: relative;
+    left: -6pt;
+    content: "\2610"; // &#9744;
+}
+.checkbox.selected:before {
+    content: "\2611"; // &#9744;
+}
+
+.checkbox:hover {
+    color: white;
+}
+
+body.shift-pressed .checkbox.will-be-selected {
+    color: white;
+}
+
 a:focus {
     outline-style: none;
     background: DarkSlateGray;

diff --git a/priv/html/detail.html b/priv/html/detail.html
@@ -0,0 +1,162 @@
+<!DOCTYPE html>
+<html>
+<head>
+<link href="css_src/relatio.css" rel="stylesheet" type="text/css"/>
+
+<script src="js_lib/sigma.min.js" type="text/javascript"></script>
+<script src="js_lib/sigma.parseGexf.js" type="text/javascript"></script>
+
+
+<script src="js_lib/jquery-latest.min.js" type="text/javascript"></script>
+<script src="js_lib/jquery.mousewheel.js" type="text/javascript"></script>
+<script src="js_lib/jquery.jscrollpane.js" type="text/javascript"></script>
+<script src="js_lib/mwheelIntent.js" type="text/javascript"></script>
+<script src="js_src/relatio.js" type="text/javascript"></script>
+<script src="js_src/relatio.detail.js" type="text/javascript"></script>
+<script type="text/javascript">
+<!--
+$(function() {
+    $(document).ready(function() {
+        relatio.initDetail();
+    });
+});
+-->
+</script>
+<script src="js_lib/jquery.noty.js" type="text/javascript"></script>
+<script src="js_lib/noty.layout.bottomCenter.js" type="text/javascript"></script>
+<script src="js_lib/noty.theme.default.js" type="text/javascript"></script>
+
+
+</head>
+<body class="source-color active-tip-switch main-selected">
+  <div id="container">
+
+    <div id="top-panel">
+        <span id="noise-switch" 
+              class="disable-mouse-selection active-block sub-block">
+          <a tabindex="0" class="header-closed"
+              title="Enable noise filter.">Noise</a>
+          <a tabindex="0" class="header-opened"
+              title="Disable noise filter.">Noise</a>
+        </span>
+        <span class="delim">|</span>
+        <span id="node-tip-switch" 
+              class="disable-mouse-selection active-block sub-block">
+          <a tabindex="0" class="header-closed"
+              title="Enable node tips.">Tips</a>
+          <a tabindex="0" class="header-opened"
+              title="Disable node tips.">Tips</a>
+        </span>
+        <span class="delim">|</span>
+        <span id="mm-edge-switch" 
+              class="disable-mouse-selection active-block sub-block">
+          <a tabindex="0" class="header-closed"
+              title="Show &quot;module-to-module&quot; edges.">MM</a>
+          <a tabindex="0" class="header-opened"
+              title="Hide &quot;module-to-module&quot; edges.">MM</a>
+        </span>
+        <span class="delim">|</span>
+        <span id="ff-edge-switch" 
+              class="disable-mouse-selection active-block sub-block">
+          <a tabindex="0" class="header-closed"
+              title="Show function call edges.">FF</a>
+          <a tabindex="0" class="header-opened"
+              title="Hide function call edges.">FF</a>
+        </span>
+        <span class="delim">|</span>
+        <span id="edge-direction-selector" class="disable-mouse-selection">
+          <a tabindex="0" id="source-color"
+              title="Set the edge color of the target node.">S</a>
+          <a tabindex="0" id="target-color"
+              title="Set the edge color of the source node.">T</a>
+        </span>
+    </div>
+
+    <div id="info-tip"></div>
+
+    <div id="graph-modules"></div>
+    <div id="graph-main"></div>
+    <div id="graph-directions" class="pane">
+        <div id="selected-function-elem-info" class="selected-elem-info">
+            Function <span class="function-name">FunctionName</span> 
+            <span class="misc">from 
+                <span class="module-name">ModuleName</span>
+            </span>
+        </div>
+
+        <div id="selected-module-elem-info" class="selected-elem-info">
+            Module <span class="module-name">ModuleName</span>
+        </div>
+
+        <!--
+        <div id="modules">
+            Modules:
+            <div id="modules-list"></div>
+        </div>
+        -->
+
+        <div id="functions" class="sub-block active-block">
+            <div class="sub-block-header">
+                <a tabindex="0" class="header-closed">Functions&hellip;</a>
+                <a tabindex="0" class="header-opened">Functions:</a>
+                <span class="function-count header-count-info"
+                    title="Exported function count / Total function count">
+                </span>
+            </div>
+            <div id="function-list" class="content-block"></div>
+        </div>
+
+        <div id="directions-out" class="sub-block active-block">
+            <div class="sub-block-header">
+                <a tabindex="0" class="header-closed">Calls to&hellip;</a>
+                <a tabindex="0" class="header-opened">Calls to:</a>
+                <span class="direction-out-count header-count-info"></span>
+            </div>
+            <div id="directions-list-out" class="content-block"></div>
+        </div>
+
+        <div id="directions-in" class="sub-block active-block">
+            <div class="sub-block-header">
+                <a tabindex="0" class="header-closed">Called from&hellip;</a>
+                <a tabindex="0" class="header-opened">Called from:</a>
+                <span class="direction-in-count header-count-info"></span>
+            </div>
+            <div id="directions-list-in" class="content-block"></div>
+        </div>
+    </div>
+
+    <input type="text" id="search-field" />
+    <div id="search-pane" class="pane">
+        <div id="search-results">
+            <div id="modules" class="sub-block active-block">
+                <div class="sub-block-header">
+                    <a tabindex="0" class="header-closed">Modules&hellip;</a>
+                    <a tabindex="0" class="header-opened">Modules:</a>
+                    <span class="module-count header-count-info"></span>
+                </div>
+                <div id="module-list" class="content-block"></div>
+            </div>
+
+            <div id="functions" class="sub-block active-block">
+                <div class="sub-block-header">
+                    <a tabindex="0" class="header-closed">Functions&hellip;</a>
+                    <a tabindex="0" class="header-opened">Functions:</a>
+                    <span class="function-count header-count-info"></span>
+                </div>
+                <div id="function-list" class="content-block"></div>
+            </div>
+        </div>
+    </div>
+
+    <div id="border-node"></div>
+    <div id="top-border-node"></div>
+    <div id="bottom-border-node"></div>
+    <div id="left-border-node"></div>
+    <div id="right-border-node"></div>
+
+    <div id="main-selected-mark"></div>
+    <div id="directions-selected-mark"></div>
+    <div id="searching-selected-mark"></div>
+  </div>
+</body>
+</html>
diff --git a/priv/html/index.html b/priv/html/index.html
@@ -12,11 +12,12 @@
 <script src="js_lib/jquery.jscrollpane.js" type="text/javascript"></script>
 <script src="js_lib/mwheelIntent.js" type="text/javascript"></script>
 <script src="js_src/relatio.js" type="text/javascript"></script>
+<script src="js_src/relatio.world.js" type="text/javascript"></script>
 <script type="text/javascript">
 <!--
 $(function() {
     $(document).ready(function() {
-        relatio.init();
+        relatio.initWorld();
     });
 });
 -->
@@ -27,20 +28,16 @@
 
 
 </head>
-<body class="source-color active-tip-switch main-selected">
+<body class="source-color active-tip-switch main-selected world">
   <div id="container">
 
     <div id="top-panel">
-        <span id="graph-modules-link" class="disable-mouse-selection sub-block">
+        <span id="noise-switch" 
-          <a tabindex="0" class="header-closed">Modules&hellip;</a>
+              class="disable-mouse-selection active-block sub-block">
-          <a tabindex="0" class="header-opened">Modules:</a>
+          <a tabindex="0" class="header-closed"
-        </span>
+              title="Enable noise filter.">Noise</a>
-        <span class="delim">|</span>
+          <a tabindex="0" class="header-opened"
-        <span id="edge-direction-selector" class="disable-mouse-selection">
+              title="Disable noise filter.">Noise</a>
-          <a tabindex="0" id="source-color"
-              title="Set the edge color of the target node.">S</a>
-          <a tabindex="0" id="target-color"
-              title="Set the edge color of the source node.">T</a>
         </span>
         <span class="delim">|</span>
         <span id="node-tip-switch" 
@@ -51,20 +48,27 @@
               title="Disable node tips.">Tips</a>
         </span>
         <span class="delim">|</span>
-        <span id="mm-edge-switch" 
+        <span id="aa-edge-switch" 
               class="disable-mouse-selection active-block sub-block">
           <a tabindex="0" class="header-closed"
-              title="Show &quot;module-to-module&quot; edges.">MM</a>
+              title="Show application call edges.">AA</a>
           <a tabindex="0" class="header-opened"
-              title="Hide &quot;module-to-module&quot; edges.">MM</a>
+              title="Hide application call edges.">AA</a>
         </span>
         <span class="delim">|</span>
-        <span id="ff-edge-switch" 
+        <span id="mm-edge-switch" 
               class="disable-mouse-selection active-block sub-block">
           <a tabindex="0" class="header-closed"
-              title="Show function call edges.">FF</a>
+              title="Show &quot;module-to-module&quot; edges.">MM</a>
           <a tabindex="0" class="header-opened"
-              title="Hide function call edges.">FF</a>
+              title="Hide &quot;module-to-module&quot; edges.">MM</a>
+        </span>
+        <span class="delim">|</span>
+        <span id="edge-direction-selector" class="disable-mouse-selection">
+          <a tabindex="0" id="source-color"
+              title="Set the edge color of the target node.">S</a>
+          <a tabindex="0" id="target-color"
+              title="Set the edge color of the source node.">T</a>
         </span>
     </div>
 
@@ -73,33 +77,26 @@
     <div id="graph-modules"></div>
     <div id="graph-main"></div>
     <div id="graph-directions" class="pane">
-        <div id="selected-function-elem-info" class="selected-elem-info">
+        <div id="selected-module-elem-info" class="selected-elem-info">
-            Function <span class="function-name">FunctionName</span> 
+            Module <span class="module-name">ModuleName</span> 
             <span class="misc">from 
-                <span class="module-name">ModuleName</span>
+                <span class="application-name">ApplicationName</span>
             </span>
         </div>
 
-        <div id="selected-module-elem-info" class="selected-elem-info">
+        <div id="selected-application-elem-info" class="selected-elem-info">
-            Module <span class="module-name">ModuleName</span>
+            Application <span class="application-name">ApplicationName</span>
-        </div>
-
-        <!--
-        <div id="modules">
-            Modules:
-            <div id="modules-list"></div>
         </div>
-        -->
 
-        <div id="functions" class="sub-block active-block">
+        <div id="modules" class="sub-block active-block">
             <div class="sub-block-header">
-                <a tabindex="0" class="header-closed">Functions&hellip;</a>
+                <a tabindex="0" class="header-closed">Modules&hellip;</a>
-                <a tabindex="0" class="header-opened">Functions:</a>
+                <a tabindex="0" class="header-opened">Modules:</a>
-                <span class="function-count header-count-info"
+                <span class="module-count header-count-info"
-                    title="Exported function count / Total function count">
+                    title="Total module count">
                 </span>
             </div>
-            <div id="function-list" class="content-block"></div>
+            <div id="module-list" class="content-block"></div>
         </div>
 
         <div id="directions-out" class="sub-block active-block">
@@ -124,6 +121,15 @@
     <input type="text" id="search-field" />
     <div id="search-pane" class="pane">
         <div id="search-results">
+            <div id="applications" class="sub-block active-block">
+                <div class="sub-block-header">
+                    <a tabindex="0" class="header-closed">Applications&hellip;</a>
+                    <a tabindex="0" class="header-opened">Applications:</a>
+                    <span class="application-count header-count-info"></span>
+                </div>
+                <div id="application-list" class="content-block"></div>
+            </div>
+
             <div id="modules" class="sub-block active-block">
                 <div class="sub-block-header">
                     <a tabindex="0" class="header-closed">Modules&hellip;</a>
@@ -132,19 +138,9 @@
                 </div>
                 <div id="module-list" class="content-block"></div>
             </div>
-
-            <div id="functions" class="sub-block active-block">
-                <div class="sub-block-header">
-                    <a tabindex="0" class="header-closed">Functions&hellip;</a>
-                    <a tabindex="0" class="header-opened">Functions:</a>
-                    <span class="function-count header-count-info"></span>
-                </div>
-                <div id="function-list" class="content-block"></div>
-            </div>
         </div>
     </div>
 
-    <div id="overlay-nodes"></div>
     <div id="border-node"></div>
     <div id="top-border-node"></div>
     <div id="bottom-border-node"></div>