Skip to content

Commit

Permalink
Adding a div to search a webentity, color its links whether they are …
Browse files Browse the repository at this point in the history 
…IN, OUT or both. Adding the possibility to click on the background to unselect a node. #255, #286
  • Loading branch information
@2LaMa
2LaMa committed Oct 17, 2019
1 parent 772d815 commit 9a7d61b
Show file tree
Hide file tree
Showing 3 changed files with 164 additions and 27 deletions.
11 changes: 10 additions & 1 deletion hyphe_frontend/app/components/sigmaNetwork.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -15,7 +15,8 @@ angular.module('hyphe.sigmaNetworkComponent', [])
suspendLayout: '=', // Optional. Stops layout when suspendLayout becomes true
startLayoutOnShow: '=', // Optional. Starts layout when suspendLayout becomes false
startLayoutOnLoad: '=', // Optional. Default: true
onNodeClick: '='
onNodeClick: '=',
onStageClick: '='
}
,link: function($scope, el, attrs) {
var renderer
Expand Down Expand Up @@ -150,6 +151,14 @@ angular.module('hyphe.sigmaNetworkComponent', [])
})

}
if ($scope.onStageClick !== undefined) {
renderer.on('clickStage', function(e){
$timeout(function(){
$scope.onStageClick()

This comment has been minimized.

Sign in to view

Copy link
@boogheta

boogheta Oct 18, 2019

Member

like in other places, this could be more simply $timeout($scope.onStageClick) since we're just defining a new function which only calls another function
})
})
}

}

}
Expand Down
101 changes: 96 additions & 5 deletions hyphe_frontend/app/components/webentitiesNetworkWidget.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -170,9 +170,100 @@
network="network"
download-network="downloadNetwork"
on-node-click="networkNodeClick"
></sigma-network>
on-stage-click="networkStageClick"
>
</sigma-network>

<md-button
class="md-fab md-primary"
aria-label="Open network settings"
style="position: absolute; left: 16px; bottom: 16px;"
ng-click="toggleInfos()"
ng-show="!seeInfo"
>
<md-tooltip md-direction="right">Find a explore a web entity</md-tooltip>

This comment has been minimized.

Sign in to view

Copy link
@boogheta

boogheta Oct 18, 2019

Member

Weird text
<md-icon>find_in_page</md-icon>
</md-button>

<div style="width: 20%; height: auto; position: absolute; left: 0; top: 60%; bottom:0;" layout="column" ng-show="seeInfo" class="md-primary">
<md-toolbar class="md-primary">
<div class="md-toolbar-tools">
<h2 md-truncate flex>Find a Web Entity</h2>

<md-button
class="md-icon-button"
ng-click="toggleInfos()"
><md-icon>close</md-icon></md-button>
</div>
</md-toolbar>

<md-content layout-fill>

<div layout ="row" layout-align="center" style="height: 50px; margin: 5px">
<md-icon style="margin-left:0px;margin-right:0px;margin-top:25px">search</md-icon>
<md-autocomplete
md-item-text="WE"
md-items="WE in autoComplete(query)"
md-min-length=0
md-search-text="query"
md-selected-item="selectedItem"
md-floating-label="Search a WebEntity"
md-selected-item-change = "findNid(selectedItem)"
md-clear-button="true"
>
<md-item-template>
<span md-highlight-text="query">{{WE}}</span>
</md-item-template>
</md-autocomplete>
</div>

</div>
<div style="padding: 15px; margin-top:0px" layout="column">
<div layout = "row" >
<md-button class="md-raised"
flex
target="_blank"
ng-href="#/project/{{corpusId}}/webentity/{{WEId}}"
ng-click="$event.stopPropagation();"
ng-disabled="!selectedItem">
<md-tooltip md-direction="up">Edit this WebEntity</md-tooltip>
EDIT &nbsp;
<md-icon cstyle="margin-bottom: 3px">navigate_next</md-icon>
</md-button>
<md-button
class="md-raised"
flex
target="_blank"
ng-href="{{WEHomepage}}"
ng-click="$event.stopPropagation();"
ng-disabled="!selectedItem">
<md-tooltip md-direction="up">Visit the homepage</md-tooltip>
VISIT &nbsp;
<md-icon style="margin-bottom: 3px">link</md-icon>
</md-button>
</div>

<p class="md-title" style="margin-bottom: 0px">Links</p>
<p layout="column" style="margin-top: 0px">
<div>
<md-icon style="transform: rotate(-30deg); color: #0053c2; font-size: 40px" role="img" aria-label="remove">remove</md-icon>
&nbsp; &nbsp; &nbsp;IN LINKS : &nbsp;
<span>{{inDegree}}</span>
</div>
<div>
<md-icon style="transform: rotate(-30deg); color: #f3419c; font-size: 40px" role="img" aria-label="remove">remove</md-icon>
&nbsp; &nbsp; &nbsp; OUT LINKS : &nbsp;
<span>{{outDegree}}</span>
</div>
<div>
<md-icon style="transform: rotate(-30deg); color: #6e246c
; font-size: 40px" role="img" aria-label="remove">remove</md-icon>
&nbsp; &nbsp; &nbsp;SYMMETRIC LINKS : &nbsp;
<span>{{bothDegree}}</span>
</div>
</div>
</div>
</md-content>
</div>

<!-- Side Nav -->
<md-sidenav
Expand Down Expand Up @@ -298,14 +389,14 @@ <h2 md-truncate flex>Network Viz Settings</h2>
</div>
</div>

<div layout="column" ng-if="network">
<div layout="column" ng-show="network">

<md-input-container>
<label>NODE COLOR</label>
<md-select ng-model="$parent.nodeColorMode">
<md-option value=""><em>No color</em></md-option>
<md-option value="_webentitystatus">Web entity status</md-option>
<md-option value="{{tagCat}}" ng-repeat="(tagCat, tagValues) in tagCategories" ng-if="tagCat != 'FREETAGS'">{{tagCat}} (tag)</md-option>
<md-option value="{{tagCat}}" ng-repeat="(tagCat, tagValues) in tagCategories" ng-show="tagCat != 'FREETAGS'">{{tagCat}} (tag)</md-option>
</md-select>
</md-input-container>

Expand All @@ -316,7 +407,7 @@ <h2 md-truncate flex>Network Viz Settings</h2>
<div flex layout="column" layout-align="center start" style="padding-left: 8px">
<div class="network-key-text">
{{item.name}}
<span ng-if="item.count">({{item.count}})</span>
<span ng-show="item.count">({{item.count}})</span>
</div>
</div>
</div>
Expand Down
79 changes: 58 additions & 21 deletions hyphe_frontend/app/components/webentitiesNetworkWidget.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -7,6 +7,7 @@ angular.module('hyphe.webentitiesNetworkWidgetComponent', [])
api,
utils,
autocompletion,
corpus,
$timeout,
$window
){
Expand All @@ -20,7 +21,7 @@ angular.module('hyphe.webentitiesNetworkWidgetComponent', [])
,link: function($scope, el, attrs) {
var pageSize = 5000
$scope.checkLoadAndUpdateCurrentToken = 0

$scope.corpusId = corpus.getId()
$scope.statuses = {in:true, out:false, undecided:true, discovered:false}
$scope.limitDiscovered = ''
$scope.limitAll = ''
Expand Down Expand Up @@ -89,9 +90,13 @@ angular.module('hyphe.webentitiesNetworkWidgetComponent', [])
$scope.nodeSizeMode = 'indegree'
$scope.nodeSizeBaseRatio = 1
$scope.tagCategories = {}
$scope.selectedItem=""
$scope.selectedItem=null
$scope.seeInfo = true;


$scope.toggleInfos = function(){
$scope.seeInfo = !$scope.seeInfo;
}
$scope.findNid = function(name){
g.forEachNode(function(node){
var n = g.getNodeAttributes(node)
Expand All @@ -101,33 +106,67 @@ angular.module('hyphe.webentitiesNetworkWidgetComponent', [])
});
}

function setEdgesToGrey(){
// Default color for edges
$scope.network.edges().forEach(function (eid) {
$scope.network.setEdgeAttribute(eid, 'color', '#DDD');
});

}

$scope.$watch('selectedItem', function(a, b ){
if ($scope.data.links.loaded && $scope.network){
setEdgesToGrey();
if (!a){
resetInfos();
}
}
});

$scope.networkNodeClick = function(nid) {
$scope.seeInfo = true;
var n = g.getNodeAttributes(nid);
$scope.WEId = nid;
$scope.WEName = n.name;
$scope.selectedItem = n.name;
$scope.WEHomepage = n.homepage;

// Default color for edges
g.edges().forEach(function(eid){
var e = g.getEdgeAttributes(eid)
e.color = '#DDD';
})
$scope.inDegree = 0;
$scope.outDegree = 0;
$scope.bothDegree = 0;

g.forEachEdge(nid, function(edge, attributes, source, target){
if (source === nid){
if (g.edge(target, source)){
g.setEdgeAttribute(edge, 'color', '#0F0')
g.setEdgeAttribute(edge, 'color', '#6e246c');
$scope.bothDegree++;
}
else
g.setEdgeAttribute(edge, 'color', '#00F')
g.setEdgeAttribute(edge, 'color', '#f3419c');
$scope.outDegree++;
}
else if(target === nid){
if (g.edge(target, source)) {
g.setEdgeAttribute(edge, 'color', '#0F0')
g.setEdgeAttribute(edge, 'color', '#6e246c');
$scope.bothDegree++;
}
else{
g.setEdgeAttribute(edge, 'color', '#0053c2');
$scope.inDegree++;
}
else
g.setEdgeAttribute(edge, 'color', '#F00')
}
});

};

$scope.networkStageClick = function(){
$scope.selectedItem = null;
}

function resetInfos(){
$scope.inDegree = null;
$scope.outDegree = null;
$scope.bothDegree = null;
}

//Search
$scope.autoComplete = function(query){
Expand All @@ -153,11 +192,13 @@ angular.module('hyphe.webentitiesNetworkWidgetComponent', [])
}

$scope.toggleSidenav = function() {
$mdSidenav('right').toggle()
$mdSidenav('right').toggle();
}

$scope.applySettings = function(){

$scope.selectedItem = null;

loadStatus(); // Get the number of IN / OUT / UND / DISC

for(var status in $scope.statuses){
Expand Down Expand Up @@ -236,8 +277,9 @@ angular.module('hyphe.webentitiesNetworkWidgetComponent', [])
/// Functions

function updateNetworkAppearance() {
updateNodeColors()
updateNodeSizes()
updateNodeColors();
updateNodeSizes();
setEdgesToGrey();
}

function updateNodeColors() {
Expand Down Expand Up @@ -578,11 +620,6 @@ angular.module('hyphe.webentitiesNetworkWidgetComponent', [])
// g.removeNodeAttribute(nid, "tags");
})

// Default color for edges
g.edges().forEach(function(eid){
var e = g.getEdgeAttributes(eid)
e.color = '#DDD'
})

// Make the graph global for console tinkering
window.g = g
Expand Down

1 comment on commit 9a7d61b

@boogheta
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Once the leftover todolist from #255 is done, we shall review together the whole logic of selectedWebentity, because currently when clicking a node, we go through the following process:

  • networkNodeClick
  • then the watcher on selectedWebentity activates
  • then findNode is also called (twice now) from the search inputs, which calls networkNodeClick twice more
    So we're recoloring the links once in color, then in grey, then twice in color

Please sign in to comment.