Skip to content

Commit b4855ed

Browse files
HitRamHitRam
committed
Add tools to select edges by arrow-shapes and line-color.
1 parent 96bdff3 commit b4855ed

File tree

2 files changed

+147
-20
lines changed

2 files changed

+147
-20
lines changed

‎static/js/graphs_page.js‎

Lines changed: 124 additions & 17 deletions
Original file line numberDiff line numberDiff line change
@@ -1332,6 +1332,9 @@ var graphPage = {
13321332
original_opacity: {},
13331333
undoRedoManager: null,
13341334
init: function () {
1335+
cytoscapeGraph.hideGraphInformation(graphPage.cyGraph);
1336+
cytoscapeGraph.showGraphInformation(graphPage.cyGraph);
1337+
13351338
cytoscapeGraph.contextMenu.init(graphPage.cyGraph);
13361339

13371340
graphPage.layoutEditor.undoRedoManager = new UndoManager(
@@ -1410,16 +1413,38 @@ var graphPage = {
14101413

14111414
$('#undoBtn').addClass('disabled');
14121415

1413-
$("#unselectBtn").click(function (e) {
1414-
//Unselect all nodes/edges when button is clicked
1416+
$("#unselectNodesBtn").click(function (e) {
1417+
//Unselect all nodes when button is clicked
14151418
e.preventDefault();
14161419
cytoscapeGraph.unSelectAllNodes(graphPage.cyGraph);
1420+
1421+
$('input:checkbox[name=node-colors]').each(function (index) {
1422+
$(this).prop('checked', false);
1423+
});
1424+
$('input:checkbox[name=node-shapes]').each(function (index) {
1425+
$(this).prop('checked', false);
1426+
});
1427+
1428+
graphPage.layoutEditor.undoRedoManager.update({
1429+
'action_type': 'unselect_all',
1430+
'data': {
1431+
'style': cytoscapeGraph.getStylesheet(graphPage.cyGraph),
1432+
'positions': cytoscapeGraph.getRenderedNodePositionsMap(graphPage.cyGraph),
1433+
'selected_elements': graphPage.cyGraph.elements(':selected'),
1434+
'metadata': layoutLearner.computeLayoutMetadata(graphPage.cyGraph)
1435+
}
1436+
});
1437+
});
1438+
1439+
$("#unselectEdgesBtn").click(function (e) {
1440+
//Unselect all edges when button is clicked
1441+
e.preventDefault();
14171442
cytoscapeGraph.unSelectAllEdges(graphPage.cyGraph);
14181443

1419-
$('input:checkbox[name=colors]').each(function (index) {
1444+
$('input:checkbox[name=edge-colors]').each(function (index) {
14201445
$(this).prop('checked', false);
14211446
});
1422-
$('input:checkbox[name=shapes]').each(function (index) {
1447+
$('input:checkbox[name=edge-shapes]').each(function (index) {
14231448
$(this).prop('checked', false);
14241449
});
14251450

@@ -1542,12 +1567,12 @@ var graphPage = {
15421567
},
15431568
nodeSelector: {
15441569
init: function () {
1545-
var colors = _.uniq(_.map(graphPage.cyGraph.nodes(), function (node) {
1570+
var node_colors = _.uniq(_.map(graphPage.cyGraph.nodes(), function (node) {
15461571
return node.style('background-color');
15471572
}));
1548-
$('#selectColors').html('');
1549-
_.each(colors, function (color) {
1550-
$('#selectColors').append(
1573+
$('#selectNodeColors').html('');
1574+
_.each(node_colors, function (color) {
1575+
$('#selectNodeColors').append(
15511576
$('<label>', {class: "checkbox-inline zero-padding"}).css({
15521577
'margin-left': '10px',
15531578
'margin-right': '10px'
@@ -1556,32 +1581,75 @@ var graphPage = {
15561581
id: color,
15571582
type: 'checkbox',
15581583
value: color,
1559-
name: 'colors'
1584+
name: 'node-colors'
15601585
})).append($('<p>', {
15611586
class: 'select-color-box'
15621587
}).css('background', color)));
15631588
});
15641589

1565-
var shapes = _.uniq(_.map(graphPage.cyGraph.nodes(), function (node) {
1590+
var node_shapes = _.uniq(_.map(graphPage.cyGraph.nodes(), function (node) {
15661591
return node.style('shape');
15671592
}));
1568-
$('#selectShapes').html('');
1569-
_.each(shapes, function (shape) {
1570-
$('#selectShapes').append(
1593+
$('#selectNodeShapes').html('');
1594+
_.each(node_shapes, function (shape) {
1595+
$('#selectNodeShapes').append(
15711596
$('<label>', {class: "checkbox-inline"}).css({'margin-left': '10px'}).append(
15721597
$('<input>', {
15731598
id: shape,
15741599
type: 'checkbox',
15751600
value: shape,
1576-
name: 'shapes'
1601+
name: 'node-shapes'
15771602
})).append(_.capitalize(shape)));
15781603
});
15791604

1580-
$('input:checkbox[name=shapes], input:checkbox[name=colors] ').change(function () {
1581-
var selectedShapes = _.map($('input:checkbox[name=shapes]:checked'), function (elem) {
1605+
var edge_source_arrow_shapes = _.uniq(_.map(graphPage.cyGraph.edges(), function(edge) {
1606+
if(edge.style('source-arrow-shape')) {
1607+
return edge.style('source-arrow-shape');
1608+
}
1609+
}));
1610+
var edge_target_arrow_shapes = _.uniq(_.map(graphPage.cyGraph.edges(), function(edge) {
1611+
if(edge.style('target-arrow-shape')) {
1612+
return edge.style('target-arrow-shape');
1613+
}
1614+
}));
1615+
var edge_arrow_shapes = _.without((_.uniq(edge_source_arrow_shapes.concat(edge_target_arrow_shapes))), "none");
1616+
$('#selectEdgeShapes').html('');
1617+
_.each(edge_arrow_shapes, function (shape) {
1618+
$('#selectEdgeShapes').append(
1619+
$('<label>', {class: "checkbox-inline"}).css({'margin-left': '10px'}).append(
1620+
$('<input>', {
1621+
id: shape,
1622+
type: 'checkbox',
1623+
value: shape,
1624+
name: 'edge-shapes'
1625+
})).append(_.capitalize(shape)));
1626+
});
1627+
1628+
var edge_colors = _.uniq(_.map(graphPage.cyGraph.edges(), function(edge) {
1629+
return edge.style('line-color');
1630+
}));
1631+
$('#selectEdgeColors').html('');
1632+
_.each(node_colors, function (color) {
1633+
$('#selectEdgeColors').append(
1634+
$('<label>', {class: "checkbox-inline zero-padding"}).css({
1635+
'margin-left': '10px',
1636+
'margin-right': '10px'
1637+
}).append(
1638+
$('<input>', {
1639+
id: color,
1640+
type: 'checkbox',
1641+
value: color,
1642+
name: 'edge-colors'
1643+
})).append($('<p>', {
1644+
class: 'select-color-box'
1645+
}).css('background', color)));
1646+
});
1647+
1648+
$('input:checkbox[name=node-shapes], input:checkbox[name=node-colors] ').change(function () {
1649+
var selectedShapes = _.map($('input:checkbox[name=node-shapes]:checked'), function (elem) {
15821650
return $(elem).val();
15831651
});
1584-
var selectedColors = _.map($('input:checkbox[name=colors]:checked'), function (elem) {
1652+
var selectedColors = _.map($('input:checkbox[name=node-colors]:checked'), function (elem) {
15851653
return $(elem).val();
15861654
});
15871655

@@ -1615,6 +1683,42 @@ var graphPage = {
16151683
}
16161684
});
16171685
});
1686+
1687+
$('input:checkbox[name=edge-shapes], input:checkbox[name=edge-colors] ').change(function () {
1688+
var selectedEdgeShapes = _.map($('input:checkbox[name=edge-shapes]:checked'), function (elem) {
1689+
return $(elem).val();
1690+
});
1691+
var selectedEdgeColors = _.map($('input:checkbox[name=edge-colors]:checked'), function (elem) {
1692+
return $(elem).val();
1693+
});
1694+
1695+
var attributeValue = $(this).val();
1696+
var isSelected = $(this).is(":checked");
1697+
1698+
_.each(graphPage.cyGraph.edges(), function (edge) {
1699+
1700+
if ((selectedEdgeColors.length > 0 && _.indexOf(selectedEdgeColors, edge.style('line-color')) === -1) ||
1701+
(selectedEdgeShapes.length > 0 && (_.indexOf(selectedEdgeShapes, edge.style('source-arrow-shape')) === -1) &&
1702+
(_.indexOf(selectedEdgeShapes, edge.style('source-arrow-shape')) === -1))) {
1703+
edge.unselect();
1704+
} else if (selectedEdgeColors.length > 0 || selectedEdgeShapes.length > 0) {
1705+
edge.select();
1706+
} else {
1707+
edge.unselect();
1708+
}
1709+
1710+
});
1711+
1712+
graphPage.layoutEditor.undoRedoManager.update({
1713+
'action_type': 'select_widget_' + _.join(_.sortBy(_.concat(selectedEdgeColors, selectedEdgeShapes)), '_'),
1714+
'data': {
1715+
'style': cytoscapeGraph.getStylesheet(graphPage.cyGraph),
1716+
'positions': cytoscapeGraph.getRenderedNodePositionsMap(graphPage.cyGraph),
1717+
'selected_elements': graphPage.cyGraph.elements(':selected'),
1718+
'metadata': layoutLearner.computeLayoutMetadata(graphPage.cyGraph)
1719+
}
1720+
});
1721+
});
16181722
}
16191723
},
16201724
nodeEditor: {
@@ -1708,6 +1812,8 @@ var graphPage = {
17081812
});
17091813

17101814
$('#nodeLabel').on('input', function (e) {
1815+
console.log(!_.isEmpty($('#nodeLabel').val()));
1816+
console.log($('#nodeLabel').val());
17111817
if (!_.isEmpty($('#nodeLabel').val())) {
17121818

17131819
graphPage.layoutEditor.nodeEditor.updateNodeProperty({
@@ -2736,6 +2842,7 @@ var cytoscapeGraph = {
27362842
/*
27372843
Function to Show information about the graph that the layout editor hid from the users.
27382844
*/
2845+
console.log(cy.style().selector('node'));
27392846
cy.style()
27402847
.selector('node').style({
27412848
'text-opacity': function( ele ){

‎templates/graph/layout_editor_sidebar.html‎

Lines changed: 23 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -63,24 +63,44 @@
6363

6464
<li class="text-center" data-intro='You can select multiple nodes that have the same shape.' data-step='5'>
6565
<h4 class="text-center">Select nodes by shape</h4>
66-
<div id="selectShapes" style="text-align: left"></div>
66+
<div id="selectNodeShapes" style="text-align: left"></div>
6767

6868
</li>
6969
<li class="text-center" data-intro='You can select multiple nodes that have the same background color.'
7070
data-step='6'>
7171
<h4 class="text-center">Select nodes by color</h4>
72-
<div id="selectColors" style="text-align: left; margin-left: 1.5em;"></div>
72+
<div id="selectNodeColors" style="text-align: left; margin-left: 1.5em;"></div>
7373
</li>
7474

7575
<li>
76-
<a id="unselectBtn" class="btn btn-sm" href="#" data-intro="This option unselects all selected nodes."
76+
<a id="unselectNodesBtn" class="btn btn-sm" href="#" data-intro="This option unselects all selected nodes."
7777
data-step="7">
7878
Unselect all nodes
7979
</a>
8080
</li>
8181

8282
<hr class="margin-top-1 margin-bottom-1">
8383

84+
<li class="text-center" data-intro='You can select multiple edges that have the same arrow shape.' data-step='9'>
85+
<h4 class="text-center">Select edges by arrow shape</h4>
86+
<div id="selectEdgeShapes" style="text-align: left"></div>
87+
88+
</li>
89+
<li class="text-center" data-intro='You can select multiple edges that have the same line color.'
90+
data-step='6'>
91+
<h4 class="text-center">Select edges by color</h4>
92+
<div id="selectEdgeColors" style="text-align: left; margin-left: 1.5em;"></div>
93+
</li>
94+
95+
<li>
96+
<a id="unselectEdgesBtn" class="btn btn-sm" href="#" data-intro="This option unselects all selected edges."
97+
data-step="7">
98+
Unselect all edges
99+
</a>
100+
</li>
101+
102+
<hr class="margin-top-1 margin-bottom-1">
103+
84104
<li class="text-center">
85105
<h5 class="text-center">Arrange nodes</h5>
86106
<div class="btn-group">

0 commit comments

Comments
 (0)