diff --git a/static/js/graphs_page.js b/static/js/graphs_page.js
index d644f1da..104065cb 100644
--- a/static/js/graphs_page.js
+++ b/static/js/graphs_page.js
@@ -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);
                 });
 
@@ -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'
@@ -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();
                     });
 
@@ -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: {
diff --git a/templates/graph/layout_editor_sidebar.html b/templates/graph/layout_editor_sidebar.html
index dd4f4864..5e48a6d5 100644
--- a/templates/graph/layout_editor_sidebar.html
+++ b/templates/graph/layout_editor_sidebar.html
@@ -63,17 +63,17 @@
 
     <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>
@@ -81,6 +81,31 @@ <h4 class="text-center">Select nodes by color</h4>
 
     <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">