From 457d86b8b2650669575621cd1382c24888d0c085 Mon Sep 17 00:00:00 2001
From: Vidar Tonaas Fauske <vidartf@gmail.com>
Date: Thu, 19 Jan 2017 18:28:49 +0000
Subject: [PATCH 1/5] Add initial version of tags celltoolbar

---
 .../notebook/js/celltoolbarpresets/tags.js    | 141 ++++++++++++++++++
 notebook/static/notebook/js/notebook.js       |   3 +
 notebook/static/notebook/less/style.less      |   1 +
 notebook/static/notebook/less/tagbar.less     |  25 ++++
 4 files changed, 170 insertions(+)
 create mode 100644 notebook/static/notebook/js/celltoolbarpresets/tags.js
 create mode 100644 notebook/static/notebook/less/tagbar.less

diff --git a/notebook/static/notebook/js/celltoolbarpresets/tags.js b/notebook/static/notebook/js/celltoolbarpresets/tags.js
new file mode 100644
index 0000000000..ae7ec53d3f
--- /dev/null
+++ b/notebook/static/notebook/js/celltoolbarpresets/tags.js
@@ -0,0 +1,141 @@
+// Copyright (c) Jupyter Development Team.
+// Distributed under the terms of the Modified BSD License.
+
+define([
+    'notebook/js/celltoolbar'
+], function(celltoolbar) {
+    "use strict";
+
+    var CellToolbar = celltoolbar.CellToolbar;
+
+    var remove_tag = function(cell) {
+        return function(tag_name) {
+            if (!cell.metadata || !cell.metadata.tags) {
+                // No tags to remove
+                return;
+            }
+            // Remove tag from tags list
+            var index = cell.metadata.tags.indexOf(tag_name);
+            if (index !== -1) {
+                cell.metadata.tags.splice(index, 1);
+            }
+            // If tags list is empty, remove it
+            if (cell.metadata.tags.length === 0) {
+                delete cell.metadata.tags;
+            }
+        };
+    };
+
+    var make_tag_container = function(cell, on_remove) {
+
+        var tag_container = $('<span/>').
+            addClass('tag-container');
+        var tag_list = cell.metadata.tags || [];
+        if (!Array.isArray(tag_list)) {
+            // We cannot make tags UI for this cell!
+            // Maybe someone else used "tags" for something?
+            return null;  // Fail gracefully
+        }
+        for (var i=0; i < tag_list.length; ++i) {
+            var tag_name = tag_list[i];
+            if (typeof tag_name !== 'string') {
+                // Unexpected type, disable toolbar for safety
+                return null;
+            }
+            var tag = make_tag(tag_name, on_remove);
+            tag_container.append(tag);
+        }
+        return tag_container;
+    };
+
+    var make_tag = function(name, on_remove) {
+        var tag_container = $('<span/>')
+            .addClass('cell-tag')
+            .text(name);
+
+        var remove_button = $('<a/>')
+            .addClass('remove-tag-btn')
+            .text('X')
+            .click( function(ev) {
+                if (ev.button === 0) {
+                    // Remove tag from container
+                    tag_container.remove();
+                    // Remove tag from cell
+                    if (on_remove) {
+                        on_remove(name);
+                    }
+                    return false;
+                }
+            });
+        tag_container.append(remove_button);
+        return tag_container;
+    };
+
+    // Single edit with button to add tags
+    var add_tag_edit = function(div, cell, on_add) {
+        var button_container = $(div);
+
+        var text = $('<input/>').attr('type', 'text');
+        var button = $('<button />')
+            .addClass('btn btn-default btn-xs')
+            .text('Add tag')
+            .click(function() {
+                on_add(text[0].value);
+                // Clear input after adding:
+                text[0].value = '';
+                return false;
+            });
+        // Wire enter in input to button click
+        text.keyup(function(event){
+            if(event.keyCode == 13){
+                button.click();
+            }
+        });
+        button_container.append(
+            $('<span/>')
+                .append(text)
+                .append(button)
+                .addClass('tags-input')
+            );
+        IPython.keyboard_manager.register_events(text);
+    };
+
+    var add_tags_cellbar = function(div, cell) {
+        var button_container = $(div);
+
+        button_container.addClass('tags_button_container');
+
+        var on_remove = remove_tag(cell);
+
+        var tag_container = make_tag_container(cell, on_remove);
+        if (tag_container === null) {
+            return;
+        }
+        button_container.append(tag_container);
+
+        add_tag_edit(div, cell, function(name) {
+            // Add to metadata
+            if (cell.metadata.tags === undefined) {
+                cell.metadata.tags = [];
+            } else if (cell.metadata.tags.indexOf(name) !== -1) {
+                // Tag already exists
+                return;
+            }
+            cell.metadata.tags.push(name);
+            // Make tag visual
+            var tag = make_tag(name, on_remove);
+            tag_container.append(tag);
+        });
+    };
+
+    var register = function(notebook) {
+      CellToolbar.register_callback('tags.edit', add_tags_cellbar);
+
+      var tags_preset = [];
+      tags_preset.push('tags.edit');
+
+      CellToolbar.register_preset('Tags', tags_preset, notebook);
+
+    };
+    return {'register' : register};
+});
diff --git a/notebook/static/notebook/js/notebook.js b/notebook/static/notebook/js/notebook.js
index a0b019c071..e1d25835f7 100644
--- a/notebook/static/notebook/js/notebook.js
+++ b/notebook/static/notebook/js/notebook.js
@@ -28,6 +28,7 @@ define([
     './celltoolbarpresets/rawcell',
     './celltoolbarpresets/slideshow',
     './celltoolbarpresets/attachments',
+    './celltoolbarpresets/tags',
     './scrollmanager',
     './commandpalette',
     './shortcuteditor',
@@ -54,6 +55,7 @@ define([
     rawcell_celltoolbar,
     slideshow_celltoolbar,
     attachments_celltoolbar,
+    tags_celltoolbar,
     scrollmanager,
     commandpalette,
     shortcuteditor
@@ -190,6 +192,7 @@ define([
         rawcell_celltoolbar.register(this);
         slideshow_celltoolbar.register(this);
         attachments_celltoolbar.register(this);
+        tags_celltoolbar.register(this);
 
         var that = this;
 
diff --git a/notebook/static/notebook/less/style.less b/notebook/static/notebook/less/style.less
index 3d26c90d46..54b246c24b 100644
--- a/notebook/static/notebook/less/style.less
+++ b/notebook/static/notebook/less/style.less
@@ -7,6 +7,7 @@
 */
 @import "notebook.less";
 @import "celltoolbar.less";
+@import "tagbar.less";
 @import "completer.less";
 @import "kernelselector.less";
 @import "menubar.less";
diff --git a/notebook/static/notebook/less/tagbar.less b/notebook/static/notebook/less/tagbar.less
new file mode 100644
index 0000000000..2b7947981e
--- /dev/null
+++ b/notebook/static/notebook/less/tagbar.less
@@ -0,0 +1,25 @@
+
+
+.tags_button_container {
+    width: 100%;
+    display: flex;
+}
+
+.tag-container {
+    display: flex;
+    flex-direction: row;
+    flex-wrap: wrap;
+    flex-grow: 1;
+}
+
+.tag-container > * {
+    margin: 0 4px;
+}
+
+.remove-tag-btn {
+    margin-left: 4px;
+}
+
+.tags-input {
+    display: flex;
+}

From c49c8ea72ad2c86028bc4dae85bb536c536028b3 Mon Sep 17 00:00:00 2001
From: Vidar Tonaas Fauske <vidartf@gmail.com>
Date: Fri, 20 Jan 2017 12:28:17 +0000
Subject: [PATCH 2/5] Set dirty flag when changing tags

---
 .../notebook/js/celltoolbarpresets/tags.js    | 33 ++++++++++++-------
 1 file changed, 22 insertions(+), 11 deletions(-)

diff --git a/notebook/static/notebook/js/celltoolbarpresets/tags.js b/notebook/static/notebook/js/celltoolbarpresets/tags.js
index ae7ec53d3f..b2fbb54c1f 100644
--- a/notebook/static/notebook/js/celltoolbarpresets/tags.js
+++ b/notebook/static/notebook/js/celltoolbarpresets/tags.js
@@ -8,14 +8,24 @@ define([
 
     var CellToolbar = celltoolbar.CellToolbar;
 
-    var remove_tag = function(cell) {
-        return function(tag_name) {
+    var write_tag = function(cell, name, add) {
+        if (add) {
+            // Add to metadata
+            if (cell.metadata.tags === undefined) {
+                cell.metadata.tags = [];
+            } else if (cell.metadata.tags.indexOf(name) !== -1) {
+                // Tag already exists
+                return;
+            }
+            cell.metadata.tags.push(name);
+        } else {
+            // Remove from metadata
             if (!cell.metadata || !cell.metadata.tags) {
                 // No tags to remove
                 return;
             }
             // Remove tag from tags list
-            var index = cell.metadata.tags.indexOf(tag_name);
+            var index = cell.metadata.tags.indexOf(name);
             if (index !== -1) {
                 cell.metadata.tags.splice(index, 1);
             }
@@ -23,6 +33,13 @@ define([
             if (cell.metadata.tags.length === 0) {
                 delete cell.metadata.tags;
             }
+        }
+        cell.events.trigger('set_dirty.Notebook', {value: true});
+    }
+
+    var remove_tag = function(cell) {
+        return function(tag_name) {
+            return write_tag(cell, tag_name, false);
         };
     };
 
@@ -114,14 +131,8 @@ define([
         button_container.append(tag_container);
 
         add_tag_edit(div, cell, function(name) {
-            // Add to metadata
-            if (cell.metadata.tags === undefined) {
-                cell.metadata.tags = [];
-            } else if (cell.metadata.tags.indexOf(name) !== -1) {
-                // Tag already exists
-                return;
-            }
-            cell.metadata.tags.push(name);
+            // Write tag to metadata
+            write_tag(cell, name, true);
             // Make tag visual
             var tag = make_tag(name, on_remove);
             tag_container.append(tag);

From c0abae90fb7277c5f9fe2cbb27302faf9219dbc4 Mon Sep 17 00:00:00 2001
From: Vidar Tonaas Fauske <vidartf@gmail.com>
Date: Fri, 20 Jan 2017 12:50:40 +0000
Subject: [PATCH 3/5] Split input on whitespace

Don't allow whitespace in tags. Instead split on whitespace, such that
several tags can be added in one go.
---
 .../notebook/js/celltoolbarpresets/tags.js    | 21 +++++++++++++------
 1 file changed, 15 insertions(+), 6 deletions(-)

diff --git a/notebook/static/notebook/js/celltoolbarpresets/tags.js b/notebook/static/notebook/js/celltoolbarpresets/tags.js
index b2fbb54c1f..012414a39d 100644
--- a/notebook/static/notebook/js/celltoolbarpresets/tags.js
+++ b/notebook/static/notebook/js/celltoolbarpresets/tags.js
@@ -130,12 +130,21 @@ define([
         }
         button_container.append(tag_container);
 
-        add_tag_edit(div, cell, function(name) {
-            // Write tag to metadata
-            write_tag(cell, name, true);
-            // Make tag visual
-            var tag = make_tag(name, on_remove);
-            tag_container.append(tag);
+        add_tag_edit(div, cell, function(input) {
+            // Split on whitespace:
+            var names = input.split(/\s/);
+            for (var i=0; i < names.length; ++i) {
+                var name = names[i];
+                if (name === '') {
+                    // Skip empty strings
+                    continue;
+                }
+                // Write tag to metadata
+                write_tag(cell, name, true);
+                // Make tag visual
+                var tag = make_tag(name, on_remove);
+                tag_container.append(tag);
+            }
         });
     };
 

From 8072084111f29ddc13a9b8d96592bdd701b22ff7 Mon Sep 17 00:00:00 2001
From: Vidar Tonaas Fauske <vidartf@gmail.com>
Date: Fri, 20 Jan 2017 15:45:20 +0000
Subject: [PATCH 4/5] Add dialog for managing tags

This also meant some tags functionality needed to be refactored to avoid
multiple entry points for adding and removing tags.
---
 .../notebook/js/celltoolbarpresets/tags.js    | 184 +++++++++++++-----
 notebook/static/notebook/less/tagbar.less     |   4 +
 2 files changed, 141 insertions(+), 47 deletions(-)

diff --git a/notebook/static/notebook/js/celltoolbarpresets/tags.js b/notebook/static/notebook/js/celltoolbarpresets/tags.js
index 012414a39d..6289e7082f 100644
--- a/notebook/static/notebook/js/celltoolbarpresets/tags.js
+++ b/notebook/static/notebook/js/celltoolbarpresets/tags.js
@@ -2,12 +2,19 @@
 // Distributed under the terms of the Modified BSD License.
 
 define([
-    'notebook/js/celltoolbar'
-], function(celltoolbar) {
+    'notebook/js/celltoolbar',
+    'base/js/dialog',
+], function(celltoolbar, dialog) {
     "use strict";
 
     var CellToolbar = celltoolbar.CellToolbar;
 
+    var array_difference = function(a, b) {
+        return a.filter(function(n) {
+            return b.indexOf(n) === -1;
+        });
+    }
+
     var write_tag = function(cell, name, add) {
         if (add) {
             // Add to metadata
@@ -15,14 +22,14 @@ define([
                 cell.metadata.tags = [];
             } else if (cell.metadata.tags.indexOf(name) !== -1) {
                 // Tag already exists
-                return;
+                return false;
             }
             cell.metadata.tags.push(name);
         } else {
             // Remove from metadata
             if (!cell.metadata || !cell.metadata.tags) {
                 // No tags to remove
-                return;
+                return false;
             }
             // Remove tag from tags list
             var index = cell.metadata.tags.indexOf(name);
@@ -35,38 +42,72 @@ define([
             }
         }
         cell.events.trigger('set_dirty.Notebook', {value: true});
+        return true;
+    }
+
+    var preprocess_input = function(input) {
+        // Split on whitespace:
+        return input.split(/\s/);
     }
 
-    var remove_tag = function(cell) {
-        return function(tag_name) {
-            return write_tag(cell, tag_name, false);
+    var add_tag = function(cell, tag_container, on_remove) {
+        return function(name) {
+            if (name === '') {
+                // Skip empty strings
+                return;
+            }
+            // Write tag to metadata
+            var changed = write_tag(cell, name, true);
+
+            if (changed) {
+                // Make tag UI
+                var tag = make_tag(name, on_remove);
+                tag_container.append(tag);
+                var tag_map = jQuery.data(tag_container, "tag_map") || {};
+                tag_map[name] = tag;
+                jQuery.data(tag_container, 'tag_map', tag_map);
+            }
         };
     };
 
-    var make_tag_container = function(cell, on_remove) {
+    var remove_tag = function(cell, tag_container) {
+        return function(name) {
+            var changed = write_tag(cell, name, false);
+            if (changed) {
+                // Remove tag UI
+                var tag_map = jQuery.data(tag_container, "tag_map") || {};
+                var tag_UI = tag_map[name];
+                delete tag_map[name];
+                tag_UI.remove();
+            }
+        };
+    };
 
-        var tag_container = $('<span/>').
-            addClass('tag-container');
+    var init_tag_container = function(cell, tag_container, on_remove) {
         var tag_list = cell.metadata.tags || [];
         if (!Array.isArray(tag_list)) {
             // We cannot make tags UI for this cell!
             // Maybe someone else used "tags" for something?
-            return null;  // Fail gracefully
+            return false;  // Fail gracefully
         }
+
+        var tag_map = {};
         for (var i=0; i < tag_list.length; ++i) {
             var tag_name = tag_list[i];
             if (typeof tag_name !== 'string') {
                 // Unexpected type, disable toolbar for safety
-                return null;
+                return false;
             }
             var tag = make_tag(tag_name, on_remove);
             tag_container.append(tag);
+            tag_map[tag_name] = tag;
         }
-        return tag_container;
+        jQuery.data(tag_container, 'tag_map', tag_map);
+        return true;
     };
 
     var make_tag = function(name, on_remove) {
-        var tag_container = $('<span/>')
+        var tag_UI = $('<span/>')
             .addClass('cell-tag')
             .text(name);
 
@@ -75,21 +116,16 @@ define([
             .text('X')
             .click( function(ev) {
                 if (ev.button === 0) {
-                    // Remove tag from container
-                    tag_container.remove();
-                    // Remove tag from cell
-                    if (on_remove) {
-                        on_remove(name);
-                    }
+                    on_remove(name);
                     return false;
                 }
             });
-        tag_container.append(remove_button);
-        return tag_container;
+        tag_UI.append(remove_button);
+        return tag_UI;
     };
 
     // Single edit with button to add tags
-    var add_tag_edit = function(div, cell, on_add) {
+    var add_tag_edit = function(div, cell, on_add, on_remove) {
         var button_container = $(div);
 
         var text = $('<input/>').attr('type', 'text');
@@ -97,7 +133,10 @@ define([
             .addClass('btn btn-default btn-xs')
             .text('Add tag')
             .click(function() {
-                on_add(text[0].value);
+                var tags = preprocess_input(text[0].value);
+                for (var i=0; i < tags.length; ++i) {
+                    on_add(tags[i]);
+                }
                 // Clear input after adding:
                 text[0].value = '';
                 return false;
@@ -108,44 +147,95 @@ define([
                 button.click();
             }
         });
-        button_container.append(
-            $('<span/>')
+        var input_container = $('<span/>')
+            .addClass('tags-input')
+        add_dialog_button(input_container, cell, on_add, on_remove);
+        button_container.append(input_container
                 .append(text)
                 .append(button)
-                .addClass('tags-input')
             );
         IPython.keyboard_manager.register_events(text);
     };
 
+    var tag_dialog = function(cell, on_add, on_remove) {
+        var tag_list = cell.metadata.tags || [];
+
+        var message =
+            "Edit the list of tags below. All whitespace " +
+            "is treated as tag separators.";
+
+        var textarea = $('<textarea/>')
+            .attr('rows', '13')
+            .attr('cols', '80')
+            .attr('name', 'tags')
+            .text(tag_list.join('\n'));
+
+        var dialogform = $('<div/>').attr('title', 'Edit the tags')
+            .append(
+                $('<form/>').append(
+                    $('<fieldset/>').append(
+                        $('<label/>')
+                        .attr('for','tags')
+                        .text(message)
+                        )
+                    .append($('<br/>'))
+                    .append(textarea)
+                    )
+            );
+
+        var modal_obj = dialog.modal({
+            title: "Edit Tags",
+            body: dialogform,
+            default_button: "Cancel",
+            buttons: {
+                Cancel: {},
+                Edit: { class : "btn-primary",
+                    click: function() {
+                        var old_tags = cell.metadata.tags || [];
+                        var new_tags = preprocess_input(textarea[0].value);
+                        var added_tags = array_difference(new_tags, old_tags);
+                        var removed_tags = array_difference(old_tags, new_tags);
+                        for (var i=0; i < added_tags.length; ++i) {
+                            on_add(added_tags[i]);
+                        }
+                        for (var i=0; i < removed_tags.length; ++i) {
+                            on_remove(removed_tags[i]);
+                        }
+                    }
+                }
+            },
+            notebook: cell.notebook,
+            keyboard_manager: cell.keyboard_manager,
+        });
+    };
+
+    var add_dialog_button = function(container, cell, on_add, on_remove) {
+        var button = $('<button />')
+            .addClass('btn btn-default btn-xs tags-dialog-btn')
+            .text('...')
+            .click( function() {
+              tag_dialog(cell, on_add, on_remove);
+              return false;
+            });
+        container.append(button);
+    };
+
     var add_tags_cellbar = function(div, cell) {
         var button_container = $(div);
 
         button_container.addClass('tags_button_container');
 
-        var on_remove = remove_tag(cell);
-
-        var tag_container = make_tag_container(cell, on_remove);
-        if (tag_container === null) {
+        var tag_container = $('<span/>').
+            addClass('tag-container');
+        var on_remove = remove_tag(cell, tag_container);
+        var ok = init_tag_container(cell, tag_container, on_remove);
+        if (!ok) {
             return;
         }
         button_container.append(tag_container);
 
-        add_tag_edit(div, cell, function(input) {
-            // Split on whitespace:
-            var names = input.split(/\s/);
-            for (var i=0; i < names.length; ++i) {
-                var name = names[i];
-                if (name === '') {
-                    // Skip empty strings
-                    continue;
-                }
-                // Write tag to metadata
-                write_tag(cell, name, true);
-                // Make tag visual
-                var tag = make_tag(name, on_remove);
-                tag_container.append(tag);
-            }
-        });
+        var on_add = add_tag(cell, tag_container, on_remove);
+        add_tag_edit(div, cell, on_add, on_remove);
     };
 
     var register = function(notebook) {
diff --git a/notebook/static/notebook/less/tagbar.less b/notebook/static/notebook/less/tagbar.less
index 2b7947981e..c16dbfe8a4 100644
--- a/notebook/static/notebook/less/tagbar.less
+++ b/notebook/static/notebook/less/tagbar.less
@@ -23,3 +23,7 @@
 .tags-input {
     display: flex;
 }
+
+.tags-dialog-btn {
+    margin-right: 4px;
+}

From 946a4ac0a1360c3315c6368aa25f3fb68e532ee2 Mon Sep 17 00:00:00 2001
From: Vidar Tonaas Fauske <vidartf@gmail.com>
Date: Fri, 20 Jan 2017 15:46:23 +0000
Subject: [PATCH 5/5] Add fade-out on overflowing tags

The size of the cell toolbar header is fixed, meaning that overflow
needed to be handled. This also styles a fade out, to help indicate to
the user that the content is overflowing.
---
 notebook/static/notebook/less/tagbar.less | 13 ++++++++++++-
 1 file changed, 12 insertions(+), 1 deletion(-)

diff --git a/notebook/static/notebook/less/tagbar.less b/notebook/static/notebook/less/tagbar.less
index c16dbfe8a4..459776a08a 100644
--- a/notebook/static/notebook/less/tagbar.less
+++ b/notebook/static/notebook/less/tagbar.less
@@ -8,8 +8,9 @@
 .tag-container {
     display: flex;
     flex-direction: row;
-    flex-wrap: wrap;
     flex-grow: 1;
+    overflow: hidden;
+    position: relative;
 }
 
 .tag-container > * {
@@ -24,6 +25,16 @@
     display: flex;
 }
 
+.cell-tag:last-child:after {
+    content: "";
+    position: absolute;
+    right: 0;
+    width: 40px;
+    height: 100%;
+    /* Fade to background color of cell toolbar */
+    background: linear-gradient(to right, rgba(0,0,0,0), #EEE);
+}
+
 .tags-dialog-btn {
     margin-right: 4px;
 }