highlight tag when hovering it in legend + hide status legend of filt…

…ered stati + homogeneize zoom/unzoom ratio for nodes sizes (closes #459)
medialab · Aug 25, 2023 · 33efd2b · 33efd2b
1 parent 20ca478
commit 33efd2b
Show file tree

Hide file tree

Showing 2 changed files with 32 additions and 9 deletions.
diff --git a/hyphe_frontend/app/components/webentitiesNetworkWidget.html b/hyphe_frontend/app/components/webentitiesNetworkWidget.html
@@ -360,7 +360,11 @@ <h2 md-truncate flex>Network Viz Settings</h2>
           </md-select>
         </md-input-container>
 
-        <div layout="row" style="padding-bottom: 16px" ng-repeat="item in nodeColorMap">
+        <div layout="row" style="padding-bottom: 16px"
+          ng-repeat="item in nodeColorMap"
+          ng-mouseover="$parent.highlightGroup(item.name)"
+          ng-mouseleave="$parent.resetHighlight()"
+        >
           <div style="width: 48px" layout="column" layout-align="center center">
             <md-icon ng-style="{'color':item.color}">fiber_manual_record</md-icon>
           </div>
@@ -384,11 +388,11 @@ <h2 md-truncate flex>Network Viz Settings</h2>
             </md-select>
           </md-input-container>
           <div layout="row" layout-align="center center">
-            <md-button class="md-icon-button" style="margin: 0px" ng-click="$parent.nodeSizeBaseRatio = 1.2 * $parent.nodeSizeBaseRatio">
+            <md-button class="md-icon-button" style="margin: 0px" ng-click="$parent.nodeSizeBaseRatio = $parent.nodeSizeBaseRatio * 1.2">
               <md-icon>add_circle_outline</md-icon>
               <md-tooltip md-direction="top">Bigger nodes</md-tooltip>
             </md-button>
-            <md-button class="md-icon-button" style="margin: 0px" ng-click="$parent.nodeSizeBaseRatio = 0.8 * $parent.nodeSizeBaseRatio">
+            <md-button class="md-icon-button" style="margin: 0px" ng-click="$parent.nodeSizeBaseRatio = $parent.nodeSizeBaseRatio / 1.2">
               <md-icon>remove_circle_outline</md-icon>
               <md-tooltip md-direction="top">Smaller nodes</md-tooltip>
             </md-button>

diff --git a/hyphe_frontend/app/components/webentitiesNetworkWidget.js b/hyphe_frontend/app/components/webentitiesNetworkWidget.js
@@ -299,6 +299,21 @@ angular.module('hyphe.webentitiesNetworkWidgetComponent', [])
         $scope.$watch('nodeSizeMode', updateNodeSizes)
         $scope.$watch('nodeSizeBaseRatio', updateNodeSizes)
 
+        $scope.highlightGroup = function(selection) {
+          if ($scope.nodeColorMode === '')
+            return
+          g.forEachNode(function(nid, attrs){
+            var val = attrs.status
+            if ($scope.nodeColorMode !== '_webentitystatus')
+              val = (((attrs.tags || {}).USER || {})[$scope.nodeColorMode] || [""])[0];
+            g.setNodeAttribute(nid, 'color', val === selection ? attrs.color : "rgba(0,0,0, 0.15)")
+          })
+        }
+
+        $scope.resetHighlight = function() {
+          updateNodeColors();
+        }
+
         // Init
         $scope.applySettings()
 
@@ -331,12 +346,16 @@ angular.module('hyphe.webentitiesNetworkWidgetComponent', [])
               'OUT': '#FAA',
               'DISCOVERED': '#93BDE0'
             }
-            $scope.nodeColorMap = [
-              {color:colors.IN, name:'IN'},
-              {color:colors.UNDECIDED, name:'UNDECIDED'},
-              {color:colors.OUT, name:'OUT'},
-              {color:colors.DISCOVERED, name:'DISCOVERED'}
-            ]
+            $scope.nodeColorMap = []
+            if ($scope.settings.in)
+              $scope.nodeColorMap.push({color:colors.IN, name:'IN'})
+            if ($scope.settings.undecided)
+              $scope.nodeColorMap.push({color:colors.UNDECIDED, name:'UNDECIDED'})
+            if ($scope.settings.out)
+              $scope.nodeColorMap.push({color:colors.OUT, name:'OUT'})
+            if ($scope.settings.discovered)
+              $scope.nodeColorMap.push({color:colors.DISCOVERED, name:'DISCOVERED'})
+
             var g = $scope.network
             if (g === undefined) { return }
             g.nodes().forEach(function(nid){