Skip to content

Add tools to select edges by arrow-shapes, line-color and line-style #340

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
HitRam wants to merge 1 commit into
base: develop
Choose a base branch
from
Open

Add tools to select edges by arrow-shapes, line-color and line-style #340

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
155 changes: 138 additions & 17 deletions static/js/graphs_page.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -1410,16 +1410,38 @@ var graphPage = {

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

$("#unselectBtn").click(function (e) {
//Unselect all nodes/edges when button is clicked
$("#unselectNodesBtn").click(function (e) {
//Unselect all nodes when button is clicked
e.preventDefault();
cytoscapeGraph.unSelectAllNodes(graphPage.cyGraph);

$('input:checkbox[name=node-colors]').each(function (index) {
$(this).prop('checked', false);
});
$('input:checkbox[name=node-shapes]').each(function (index) {
$(this).prop('checked', false);
});

graphPage.layoutEditor.undoRedoManager.update({
'action_type': 'unselect_all',
'data': {
'style': cytoscapeGraph.getStylesheet(graphPage.cyGraph),
'positions': cytoscapeGraph.getRenderedNodePositionsMap(graphPage.cyGraph),
'selected_elements': graphPage.cyGraph.elements(':selected'),
'metadata': layoutLearner.computeLayoutMetadata(graphPage.cyGraph)
}
});
});

$("#unselectEdgesBtn").click(function (e) {
//Unselect all edges when button is clicked
e.preventDefault();
cytoscapeGraph.unSelectAllEdges(graphPage.cyGraph);

$('input:checkbox[name=colors]').each(function (index) {
$('input:checkbox[name=edge-colors]').each(function (index) {
$(this).prop('checked', false);
});
$('input:checkbox[name=shapes]').each(function (index) {
$('input:checkbox[name=edge-shapes]').each(function (index) {
$(this).prop('checked', false);
});

Expand Down Expand Up @@ -1542,12 +1564,12 @@ var graphPage = {
},
nodeSelector: {
init: function () {
var colors = _.uniq(_.map(graphPage.cyGraph.nodes(), function (node) {
var node_colors = _.uniq(_.map(graphPage.cyGraph.nodes(), function (node) {
return node.style('background-color');
}));
$('#selectColors').html('');
_.each(colors, function (color) {
$('#selectColors').append(
$('#selectNodeColors').html('');
_.each(node_colors, function (color) {
$('#selectNodeColors').append(
$('<label>', {class: "checkbox-inline zero-padding"}).css({
'margin-left': '10px',
'margin-right': '10px'
Expand All @@ -1556,32 +1578,91 @@ var graphPage = {
id: color,
type: 'checkbox',
value: color,
name: 'colors'
name: 'node-colors'
})).append($('<p>', {
class: 'select-color-box'
}).css('background', color)));
});

var shapes = _.uniq(_.map(graphPage.cyGraph.nodes(), function (node) {
var node_shapes = _.uniq(_.map(graphPage.cyGraph.nodes(), function (node) {
return node.style('shape');
}));
$('#selectShapes').html('');
_.each(shapes, function (shape) {
$('#selectShapes').append(
$('#selectNodeShapes').html('');
_.each(node_shapes, function (shape) {
$('#selectNodeShapes').append(
$('<label>', {class: "checkbox-inline"}).css({'margin-left': '10px'}).append(
$('<input>', {
id: shape,
type: 'checkbox',
value: shape,
name: 'node-shapes'
})).append(_.capitalize(shape)));
});

var edge_source_arrow_shapes = _.uniq(_.map(graphPage.cyGraph.edges(), function(edge) {
if(edge.style('source-arrow-shape')) {
return edge.style('source-arrow-shape');
}
}));
var edge_target_arrow_shapes = _.uniq(_.map(graphPage.cyGraph.edges(), function(edge) {
if(edge.style('target-arrow-shape')) {
return edge.style('target-arrow-shape');
}
}));
var edge_arrow_shapes = _.without((_.uniq(edge_source_arrow_shapes.concat(edge_target_arrow_shapes))), "none");
$('#selectEdgeShapes').html('');
_.each(edge_arrow_shapes, function (shape) {
$('#selectEdgeShapes').append(
$('<label>', {class: "checkbox-inline"}).css({'margin-left': '10px'}).append(
$('<input>', {
id: shape,
type: 'checkbox',
value: shape,
name: 'shapes'
name: 'edge-shapes'
})).append(_.capitalize(shape)));
});

$('input:checkbox[name=shapes], input:checkbox[name=colors] ').change(function () {
var selectedShapes = _.map($('input:checkbox[name=shapes]:checked'), function (elem) {
var edge_colors = _.uniq(_.map(graphPage.cyGraph.edges(), function(edge) {
return edge.style('line-color');
}));
$('#selectEdgeColors').html('');
_.each(node_colors, function (color) {
$('#selectEdgeColors').append(
$('<label>', {class: "checkbox-inline zero-padding"}).css({
'margin-left': '10px',
'margin-right': '10px'
}).append(
$('<input>', {
id: color,
type: 'checkbox',
value: color,
name: 'edge-colors'
})).append($('<p>', {
class: 'select-color-box'
}).css('background', color)));
});

var edge_styles = _.uniq(_.map(graphPage.cyGraph.edges(), function(edge) {
return edge.style('line-style');
}));
$('#selectEdgeStyles').html('');
_.each(edge_styles, function(style) {
$('#selectEdgeStyles').append(
$('<label>', {class: "checkbox-inline"}).css({'margin-left': '10px'}).append(
$('<input>', {
id: style,
type: 'checkbox',
value: style,
name: 'edge-styles'
})).append(_.capitalize(style)));

});

$('input:checkbox[name=node-shapes], input:checkbox[name=node-colors] ').change(function () {
var selectedShapes = _.map($('input:checkbox[name=node-shapes]:checked'), function (elem) {
return $(elem).val();
});
var selectedColors = _.map($('input:checkbox[name=colors]:checked'), function (elem) {
var selectedColors = _.map($('input:checkbox[name=node-colors]:checked'), function (elem) {
return $(elem).val();
});

Expand Down Expand Up @@ -1615,6 +1696,46 @@ var graphPage = {
}
});
});

$('input:checkbox[name=edge-shapes], input:checkbox[name=edge-colors], input:checkbox[name=edge-styles] ').change(function () {
var selectedEdgeShapes = _.map($('input:checkbox[name=edge-shapes]:checked'), function (elem) {
return $(elem).val();
});
var selectedEdgeColors = _.map($('input:checkbox[name=edge-colors]:checked'), function (elem) {
return $(elem).val();
});
var selectedEdgeStyles = _.map($('input:checkbox[name=edge-styles]:checked'), function(elem) {
return $(elem).val();
});

var attributeValue = $(this).val();
var isSelected = $(this).is(":checked");

_.each(graphPage.cyGraph.edges(), function (edge) {

if ((selectedEdgeColors.length > 0 && _.indexOf(selectedEdgeColors, edge.style('line-color')) === -1) ||
(selectedEdgeStyles.length > 0 && _.indexOf(selectedEdgeStyles, edge.style('line-style')) === -1) ||
(selectedEdgeShapes.length > 0 && (_.indexOf(selectedEdgeShapes, edge.style('source-arrow-shape')) === -1) &&
(_.indexOf(selectedEdgeShapes, edge.style('target-arrow-shape')) === -1))) {
edge.unselect();
} else if (selectedEdgeColors.length > 0 || selectedEdgeShapes.length > 0 || selectedEdgeStyles.length > 0) {
edge.select();
} else {
edge.unselect();
}

});

graphPage.layoutEditor.undoRedoManager.update({
'action_type': 'select_widget_' + _.join(_.sortBy(_.concat(selectedEdgeColors, selectedEdgeShapes)), '_'),
'data': {
'style': cytoscapeGraph.getStylesheet(graphPage.cyGraph),
'positions': cytoscapeGraph.getRenderedNodePositionsMap(graphPage.cyGraph),
'selected_elements': graphPage.cyGraph.elements(':selected'),
'metadata': layoutLearner.computeLayoutMetadata(graphPage.cyGraph)
}
});
});
}
},
nodeEditor: {
Expand Down
31 changes: 28 additions & 3 deletions templates/graph/layout_editor_sidebar.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -63,24 +63,49 @@

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

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

<li>
<a id="unselectBtn" class="btn btn-sm" href="#" data-intro="This option unselects all selected nodes."
<a id="unselectNodesBtn" class="btn btn-sm" href="#" data-intro="This option unselects all selected nodes."
data-step="7">
Unselect all nodes
</a>
</li>

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

<li class="text-center" data-intro='You can select multiple edges that have the same arrow shape.' data-step='9'>
<h4 class="text-center">Select edges by arrow shape</h4>
<div id="selectEdgeShapes" style="text-align: left"></div>

</li>
<li class="text-center" data-intro='You can select multiple edges that have the same line color.'
data-step='6'>
<h4 class="text-center">Select edges by color</h4>
<div id="selectEdgeColors" style="text-align: left; margin-left: 1.5em;"></div>
</li>
<li class="text-center" data-intro='You can select multiple edges that have the same line style.' data-step='9'>
<h4 class="text-center">Select edges by line style</h4>
<div id="selectEdgeStyles" style="text-align: left"></div>

</li>

<li>
<a id="unselectEdgesBtn" class="btn btn-sm" href="#" data-intro="This option unselects all selected edges."
data-step="7">
Unselect all edges
</a>
</li>

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

<li class="text-center">
<h5 class="text-center">Arrange nodes</h5>
<div class="btn-group">
Expand Down