From 52cd39dba92c9ab2baad7d85cd516c3ed814c4e9 Mon Sep 17 00:00:00 2001
From: jxr8142 <jxr8142@g.rit.edu>
Date: Sun, 3 Jun 2018 10:22:09 -0400
Subject: [PATCH] Update the gaph to hide other nodes that are not their
 friends when you click on a node.

---
 website/graph.html | 115 +++++++++++++++++++++++++++++++++++++++------
 1 file changed, 100 insertions(+), 15 deletions(-)
diff --git a/website/graph.html b/website/graph.html
index 80a78fd..f5973a3 100644
--- a/website/graph.html
+++ b/website/graph.html
@@ -56,6 +56,12 @@
     <script src="src/misc/sigma.misc.drawHovers.js"></script>
 
 
+
+    <script src="src/plugins/sigma.plugins.neighborhoods/sigma.plugins.neighborhoods.js"></script>
+    <script src="src/plugins/sigma.layout.forceAtlas2/supervisor.js"></script>
+    <script src="src/plugins/sigma.layout.forceAtlas2/worker.js"></script>
+    <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
+
 </head>
 <body>
 <div class="navbar navbar-expand-lg fixed-top navbar-dark bg-primary">
@@ -88,12 +94,27 @@
 <div id="container">
     <style>
         #graph-container {
-            top: 5%;
+            top: 0;
             bottom: 0;
             left: 0;
             right: 0;
-            z-index: 0;
             position: absolute;
+            /*background-color: #455660;*/
+        }
+        .sigma-edge {
+            /*stroke: #14191C;*/
+        }
+        .sigma-node {
+            /*fill: green;*/
+            /*stroke: #14191C;*/
+            /*stroke-width: 2px;*/
+        }
+        .sigma-node:hover {
+            fill: blue;
+        }
+        .muted {
+            fill-opacity: 0.1;
+            stroke-opacity: 0.1;
         }
     </style>
     <div id="graph-container" style="width:100%; height:100%"></div>
@@ -102,7 +123,6 @@
 <script>
 
     var s,
-        r,
         g = {
             nodes: [],
             edges: []
@@ -114,28 +134,28 @@
             '#b956af'
         ];
 
+    // Instantiate sigma:
     s = new sigma({
         graph: g,
-        renderer: {
-            container: document.getElementById('graph-container'),
-            type: 'canvas'
-        },
         settings: {
-            minNodeSize: 8,
-            maxNodeSize: 16,
+            enableHovering: false
         }
     });
 
+    s.addRenderer({
+        id: 'main',
+        type: 'svg',
+        container: document.getElementById('graph-container'),
+        freeStyle: true
+    });
+
     getData = getUrlVars();
 
-    connection = new WebSocket('ws://jrtechs.student.rit.edu:4444');
+    connection = new WebSocket('ws://localhost:4444');
 
     connection.onopen = function ()
     {
         console.log('Connected!');
-
-        console.log(r);
-
         if(getData["id"] != undefined && getData["id"] != "")
         {
             connection.send("{id:'" + getData["id"] + "', graph:" + getData["graph"] + "}");
@@ -206,6 +226,73 @@
         }
     };
 
+
+
+
+
+    //jquery stuff for hiding and displaying users when clicked
+    s.bind('clickNode doubleClickNode rightClickNode', function(e)
+    {
+        console.log(e.type, e);
+        $('.sigma-node, .sigma-edge').each(function()
+        {
+            mute(this);
+        });
+
+        var neighbors = s.graph.neighborhood(e.data.node.id);
+        neighbors.nodes.forEach(function(node)
+        {
+            unmute($('[data-node-id="' + node.id + '"]')[0]);
+        });
+
+        neighbors.edges.forEach(function(edge) {
+            unmute($('[data-edge-id="' + edge.id + '"]')[0]);
+        });
+    });
+
+    // Binding silly interactions
+    function mute(node)
+    {
+        if (!~node.getAttribute('class').search(/muted/))
+            node.setAttributeNS(null, 'class', node.getAttribute('class') + ' muted');
+    }
+
+    function unmute(node)
+    {
+        node.setAttributeNS(null, 'class', node.getAttribute('class').replace(/(\s|^)muted(\s|$)/g, '$2'));
+    }
+
+    $('.sigma-node').click(function()
+    {
+
+        console.log("click");
+        $('.sigma-node, .sigma-edge').each(function()
+        {
+            mute(this);
+        });
+
+        // Unmuting neighbors
+        var neighbors = s.graph.neighborhood($(this).attr('data-node-id'));
+        neighbors.nodes.forEach(function(node)
+        {
+            unmute($('[data-node-id="' + node.id + '"]')[0]);
+        });
+
+        neighbors.edges.forEach(function(edge)
+        {
+            unmute($('[data-edge-id="' + edge.id + '"]')[0]);
+        });
+    });
+
+    s.bind('clickStage', function()
+    {
+        $('.sigma-node, .sigma-edge').each(function()
+        {
+            unmute(this);
+        });
+    });
+
+
 </script>
 
 
@@ -235,8 +322,6 @@ https://github.com/jrtechs
 
 -->
 
-
-<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
 <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script>
 <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js" integrity="sha384-smHYKdLADwkXOn1EmN1qk/HfnUcbVRZyYmZ4qpPea6sjB/pTJ0euyQp0Mk8ck+5T" crossorigin="anonymous"></script>
 </body>
