Skip to content

Commit 21c8dfb

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

File tree

2 files changed

+172
-20
lines changed

2 files changed

+172
-20
lines changed

‎static/js/graphs_page.js‎

Lines changed: 144 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,91 @@ 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+
var edge_styles = _.uniq(_.map(graphPage.cyGraph.edges(), function(edge) {
1649+
return edge.style('line-style');
1650+
}));
1651+
$('#selectEdgeStyles').html('');
1652+
_.each(edge_styles, function(style) {
1653+
$('#selectEdgeStyles').append(
1654+
$('<label>', {class: "checkbox-inline"}).css({'margin-left': '10px'}).append(
1655+
$('<input>', {
1656+
id: style,
1657+
type: 'checkbox',
1658+
value: style,
1659+
name: 'edge-styles'
1660+
})).append(_.capitalize(style)));
1661+
1662+
});
1663+
1664+
$('input:checkbox[name=node-shapes], input:checkbox[name=node-colors] ').change(function () {
1665+
var selectedShapes = _.map($('input:checkbox[name=node-shapes]:checked'), function (elem) {
15821666
return $(elem).val();
15831667
});
1584-
var selectedColors = _.map($('input:checkbox[name=colors]:checked'), function (elem) {
1668+
var selectedColors = _.map($('input:checkbox[name=node-colors]:checked'), function (elem) {
15851669
return $(elem).val();
15861670
});
15871671

@@ -1615,6 +1699,46 @@ var graphPage = {
16151699
}
16161700
});
16171701
});
1702+
1703+
$('input:checkbox[name=edge-shapes], input:checkbox[name=edge-colors], input:checkbox[name=edge-styles] ').change(function () {
1704+
var selectedEdgeShapes = _.map($('input:checkbox[name=edge-shapes]:checked'), function (elem) {
1705+
return $(elem).val();
1706+
});
1707+
var selectedEdgeColors = _.map($('input:checkbox[name=edge-colors]:checked'), function (elem) {
1708+
return $(elem).val();
1709+
});
1710+
var selectedEdgeStyles = _.map($('input:checkbox[name=edge-styles]:checked'), function(elem) {
1711+
return $(elem).val();
1712+
});
1713+
1714+
var attributeValue = $(this).val();
1715+
var isSelected = $(this).is(":checked");
1716+
1717+
_.each(graphPage.cyGraph.edges(), function (edge) {
1718+
1719+
if ((selectedEdgeColors.length > 0 && _.indexOf(selectedEdgeColors, edge.style('line-color')) === -1) ||
1720+
(selectedEdgeStyles.length > 0 && _.indexOf(selectedEdgeStyles, edge.style('line-style')) === -1) ||
1721+
(selectedEdgeShapes.length > 0 && (_.indexOf(selectedEdgeShapes, edge.style('source-arrow-shape')) === -1) &&
1722+
(_.indexOf(selectedEdgeShapes, edge.style('target-arrow-shape')) === -1))) {
1723+
edge.unselect();
1724+
} else if (selectedEdgeColors.length > 0 || selectedEdgeShapes.length > 0 || selectedEdgeStyles.length > 0) {
1725+
edge.select();
1726+
} else {
1727+
edge.unselect();
1728+
}
1729+
1730+
});
1731+
1732+
graphPage.layoutEditor.undoRedoManager.update({
1733+
'action_type': 'select_widget_' + _.join(_.sortBy(_.concat(selectedEdgeColors, selectedEdgeShapes)), '_'),
1734+
'data': {
1735+
'style': cytoscapeGraph.getStylesheet(graphPage.cyGraph),
1736+
'positions': cytoscapeGraph.getRenderedNodePositionsMap(graphPage.cyGraph),
1737+
'selected_elements': graphPage.cyGraph.elements(':selected'),
1738+
'metadata': layoutLearner.computeLayoutMetadata(graphPage.cyGraph)
1739+
}
1740+
});
1741+
});
16181742
}
16191743
},
16201744
nodeEditor: {
@@ -1708,6 +1832,8 @@ var graphPage = {
17081832
});
17091833

17101834
$('#nodeLabel').on('input', function (e) {
1835+
console.log(!_.isEmpty($('#nodeLabel').val()));
1836+
console.log($('#nodeLabel').val());
17111837
if (!_.isEmpty($('#nodeLabel').val())) {
17121838

17131839
graphPage.layoutEditor.nodeEditor.updateNodeProperty({
@@ -2736,6 +2862,7 @@ var cytoscapeGraph = {
27362862
/*
27372863
Function to Show information about the graph that the layout editor hid from the users.
27382864
*/
2865+
console.log(cy.style().selector('node'));
27392866
cy.style()
27402867
.selector('node').style({
27412868
'text-opacity': function( ele ){

‎templates/graph/layout_editor_sidebar.html‎

Lines changed: 28 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -63,24 +63,49 @@
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+
<li class="text-center" data-intro='You can select multiple edges that have the same line style.' data-step='9'>
95+
<h4 class="text-center">Select edges by line style</h4>
96+
<div id="selectEdgeStyles" style="text-align: left"></div>
97+
98+
</li>
99+
100+
<li>
101+
<a id="unselectEdgesBtn" class="btn btn-sm" href="#" data-intro="This option unselects all selected edges."
102+
data-step="7">
103+
Unselect all edges
104+
</a>
105+
</li>
106+
107+
<hr class="margin-top-1 margin-bottom-1">
108+
84109
<li class="text-center">
85110
<h5 class="text-center">Arrange nodes</h5>
86111
<div class="btn-group">

0 commit comments

Comments
 (0)