biojs-vis-pinpad - npm Package Compare versions

Comparing version 0.1.2 to 0.1.3

gulpfile.js

@@ -12,3 +12,3 @@ /*
 var buildDir = "build";
-var outputFile = "PinpadViewer";
+var outputFile = "PinPad";
 
@@ -27,2 +27,3 @@ // packages
 var mochaPhantomJS = require('gulp-mocha-phantomjs');
+var env = require('gulp-env');
 
@@ -67,3 +68,2 @@ // code coverage
 
-
 gulp.task('test-unit', ['test-env'], function () {
@@ -87,3 +87,3 @@ return gulp.src(['./src/**/*.js', './lib/**/*.js'])
         vars: {
-            XUNIT_FILE: 'reports/TEST-PinpadViewerTest.xml',
+            XUNIT_FILE: 'reports/TEST-PinPadTest.xml',
             LOG_XUNIT: true
@@ -90,0 +90,0 @@ }

lib/CategoryFactory.js

@@ -9,11 +9,10 @@ /*jslint node: true */
 
-var Category = function(pinPad, catTitle) {
+var Category = function(pinPadViewer, catTitle) {
     var category = this;
-    category.pinPad = pinPad;
+    category.pinPadViewer = pinPadViewer;
     category.title = catTitle;
     category.open = true;
-    category.data = [];
     category.elements = [];
 
-    var categoryContainer = category.pinPad.padContainer.append('div').classed('up_pp_category-container', true);
+    var categoryContainer = category.pinPadViewer.padContainer.append('div').classed('up_pp_category-container', true);
 
@@ -33,3 +32,3 @@ category.header = categoryContainer.append('div').classed('up_pp_category-header', true);
         .on('click', function() {
-            category.remove();
+            category.delegateCategoryRemoval(category.title);
         });
@@ -40,18 +39,9 @@
     category.remove = function() {
-        while (category.elements.length !== 0) {
-            category.elements[0].remove(category.data[0].id, category.title, false);
+        while (category.elements.length > 0) {
+            category.elements[0].remove(category.elements[0].id, category.title, false);
+            category.elements.splice(0, 1);
         }
+        categoryContainer.remove();
     };
 
-    category.removeDom = function() {
-        var index = _.findIndex(category.pinPad.categories, function(cat) {
-            return cat.title === category.title;
-        });
-        if (index !== -1) {
-            categoryContainer.remove();
-            category.pinPad.categories.splice(index, 1);
-            category.pinPad.dispatcher.remove({category: category.title});
-        }
-    };
-
     category.toggle = function() {
@@ -69,27 +59,34 @@ if (category.padContainer.style('display') === 'none') {
 
-    category.addElement = function(id, sections) {
-        var datum = {sortAttribute: sections[0].title, id: id, sections: sections};
-        var sortedIndex = _.sortedIndex(category.data, datum, 'sortAttribute');
-        datum.sortedIndex = sortedIndex;
-        category.data.splice(sortedIndex, 0, datum);
-        return sortedIndex;
-    };
-
-    category.displayElements = function(sortedIndex) {
+    category.addElement = function(elem, sortedIndex, allElements) {
         var newElem = undefined;
-        if (sortedIndex === (category.data.length-1)) {
-            newElem =  ElementFactory.createElement(category, category.data[category.data.length-1]);
+        if (sortedIndex > category.elements.length) {
+            newElem =  ElementFactory.createElement(category, elem);
             category.elements.push(newElem);
         } else {
             category.padContainer.selectAll('*').remove();
-            _.each(category.data, function(elem, index) {
-                var added = ElementFactory.createElement(category, elem);
+            _.each(allElements, function(elem, index) {
+                var open = index === sortedIndex ? undefined : category.elements[index].open;
+                var added = ElementFactory.createElement(category, elem, open);
                 if (index === sortedIndex) {
                     newElem = added;
+                    category.elements.splice(sortedIndex, 0, newElem);
                 }
             });
-            category.elements.splice(sortedIndex, 0, newElem);
         }
         return newElem;
-    }
+    };
+
+    category.removeElement = function(elIndex) {
+        var element = category.elements[elIndex];
+        category.elements.splice(elIndex, 1);
+        ElementFactory.removeElement(element);
+    };
+
+    category.delegateElementRemoval = function(elId) {
+        category.pinPadViewer.delegateElementRemoval(elId);
+    };
+
+    category.delegateCategoryRemoval = function(catTitle) {
+        category.pinPadViewer.delegateCategoryRemoval(catTitle);
+    };
 };
@@ -99,4 +96,4 @@
     return {
-        createCategory: function(pinPad, catTitle) {
-            return new Category(pinPad, catTitle);
+        createCategory: function(pinPadViewer, catTitle) {
+            return new Category(pinPadViewer, catTitle);
         },
@@ -106,8 +103,7 @@ removeCategory: function(category) {
         },
-        createElement: function(category, id, sections) {
-            var sortedIndex = category.addElement(id, sections);
-            return category.displayElements(sortedIndex);
+        createElement: function(category, elem, elIndex, allElements) {
+            return category.addElement(elem, elIndex, allElements);
         },
-        removeElement: function(category, index) {
-            ElementFactory.removeElement(category.elements[index]);
+        removeElement: function(category, elIndex) {
+            category.removeElement(elIndex);
         }
@@ -114,0 +110,0 @@ };

lib/ElementFactory.js

@@ -77,6 +77,7 @@ /*jslint node: true */
 
-var Element = function(category, elem) {
+var Element = function(category, elem, open) {
     var element = this;
+    element.id = elem.id;
     element.category = category;
-    element.content = elem;
+    element.open = open;
     element.header = undefined;
@@ -90,7 +91,7 @@ element.tableContainer = undefined;
             element.header.title.attr('class', 'up_pp_element-name up_pftv_arrow-down');
-            element.content.open = true;
+            element.open = true;
         } else {
             element.tableContainer.style('display', 'none');
             element.header.title.attr('class', 'up_pp_element-name up_pftv_arrow-right');
-            element.content.open = false;
+            element.open = false;
         }
@@ -100,8 +101,5 @@ };
     var elemContainer = element.category.padContainer.append('div').attr('id', 'pinned_elem_id_' + elem.id);
-    element.first(element.category.title, elemContainer, _.first(element.content.sections));
-    element.tail(element.table, _.tail(element.content.sections));
 
-    if (element.content.open === false) {
-        element.toggle();
-    }
+    element.first(element.category.title, elemContainer, _.first(elem.sections));
+    element.tail(element.table, _.tail(elem.sections));
 };
@@ -113,3 +111,9 @@
     element.header.title = element.header.append('a')
-        .attr('class', 'up_pp_element-name up_pftv_arrow-down')
+        .attr('class', function() {
+            if (element.open === false) {
+                return 'up_pp_element-name up_pftv_arrow-right';
+            } else {
+                return 'up_pp_element-name up_pftv_arrow-down';
+            }
+        })
         .text(section.title)
@@ -125,6 +129,9 @@ .on('click', function() {
         .on('click', function() {
-             element.remove(element.content.id);
+            element.category.delegateElementRemoval(element.id);
         });
 
     element.tableContainer = container.append('div');
+    if (element.open === false) {
+        element.tableContainer.style('display', 'none');
+    }
     element.table = element.tableContainer.append('table').attr('width', '100%');
@@ -146,20 +153,4 @@ addData(element.table, section.information);
 Element.prototype.remove = function(id) {
-    var element = this;
-    var index = _.findIndex(element.category.data, function(datum){
-        return datum.id === id;
-    });
-    if (index !== -1) {
-        var container = d3.select('#' + 'pinned_elem_id_' + id);
-        container.remove();
-        element.category.elements.splice(index, 1);
-        element.category.data.splice(index, 1);
-        element.category.pinPad.dispatcher.remove({element: {
-            category: element.category.title, id: element.content.id, sections: element.content.sections}
-        });
-        if (element.category.elements.length === 0) {
-            element.category.removeDom();
-        }
-    } else {
-        element.category.pinPad.dispatcher.unknown({element: {id: id}});
-    }
+    var container = d3.select('#' + 'pinned_elem_id_' + id);
+    container.remove();
 };
@@ -169,7 +160,7 @@
     return {
-        createElement: function(category, elem) {
-            return new Element(category, elem);
+        createElement: function(category, elem, open) {
+            return new Element(category, elem, open);
         },
         removeElement: function(element) {
-            element.remove(element.content.id);
+            element.remove(element.id);
         }
@@ -176,0 +167,0 @@ };

lib/PinpadViewer.js

@@ -13,3 +13,3 @@ /*jslint node: true */
 /**
-@class Pinpad
+@class PinPadViewer
  */
@@ -28,20 +28,20 @@ var d3 = require('d3');
 };
-var init = function(pinPad) {
-    var pinPadContainer = d3.select(pinPad.options.el)
+var init = function(pinPadViewer, toPin) {
+    var pinPadViewerContainer = d3.select(pinPadViewer.options.el)
       .text('')
       .append('div')
       .classed('up_pp_main-container', true)
-      .style('width', pinPad.options.width);
+      .style('width', pinPadViewer.options.width);
 
-    var mainTitle = pinPadContainer.append('div').classed('up_pp_mainTitle', true);
+    var mainTitle = pinPadViewerContainer.append('div').classed('up_pp_mainTitle', true);
     mainTitle.append('div').classed('up_pp_iconContainer', true)
         .append('div').classed('up-pp-icon-pin', true).classed('up_pp_icon', true);
-    pinPad.offsetTop = mainTitle.node().offsetHeight + mainTitle.node().offsetTop;
+    pinPadViewer.offsetTop = mainTitle.node().offsetHeight + mainTitle.node().offsetTop;
 
-    pinPad.padContainer = pinPadContainer.append('div')
+    pinPadViewer.padContainer = pinPadViewerContainer.append('div')
         .classed('up_pp_pad', true)
-        .style('height', pinPad.options.height);
+        .style('height', pinPadViewer.options.height);
 
-    if (pinPad.options.toPin) {
-        pinPad.addElement(pinPad.options.toPin);
+    if (pinPadViewer.options.toPin) {
+        pinPadViewer.addElement(toPin);
     }
@@ -53,99 +53,68 @@ };
  */
-var PinpadViewer = function(opts){
-    var pinPad = this;
-    pinPad.options = _.extend({}, defaultOpts, opts);
-    pinPad.offsetTop = undefined;
-    pinPad.categories = [];
-    pinPad.dispatcher = d3.dispatch("add", "duplication", "remove", "unknown");
+var PinPadViewer = function(opts, toPin, pinPad){
+    var pinPadViewer = this;
+    pinPadViewer.options = _.extend({}, defaultOpts, opts);
+    pinPadViewer.pinPad = pinPad;
+    pinPadViewer.offsetTop = undefined;
+    pinPadViewer.categories = [];
 
-    pinPad.getDispatcher = function() {
-        return pinPad.dispatcher;
-    };
-
-    init(pinPad);
-    //this.el.textContent = biojsVisPinpad.hello(opts.text);
+    init(pinPadViewer, toPin);
 };
 
-
-PinpadViewer.prototype.addCategory = function(category) {
-    return CategoryFactory.createCategory(this, category);
+var addCategory = function(pinPadViewer, category) {
+    return CategoryFactory.createCategory(pinPadViewer, category);
 };
 
-PinpadViewer.prototype.addElement = function(toPin) {
-    var pinPad = this;
-    //avoid duplicated ids
-    var exists = toPin.id && _.some(pinPad.categories, function(cat) {
-        return _.some(cat.data, function(elem) {
-            return elem.id === toPin.id
-        });
-    });
-    if (exists) {
-        pinPad.dispatcher.duplication({element: toPin});
-        return;
-    }
+PinPadViewer.prototype.addElement = function(toPin, catIndex, elIndex, allElements) {
+    var pinPadViewer = this;
     //add category
-    var category = _.find(pinPad.categories, function(cat) {return cat.title === toPin.category; });
-    if (category === undefined) {
-        pinPad.categories.push(pinPad.addCategory(toPin.category));
-        pinPad.dispatcher.add({category: toPin.category});
-        category = _.last(pinPad.categories);
+    var category;
+    if (catIndex >= pinPadViewer.categories.length) {
+        pinPadViewer.categories.push(addCategory(pinPadViewer, toPin.category));
+        category = _.last(pinPadViewer.categories);
+    } else {
+        category = pinPadViewer.categories[catIndex];
     }
-    if (toPin.sections && (toPin.sections.length !== 0)) {
-        if (!category.open) {
-            category.toggle();
-        }
-        var newElem = CategoryFactory.createElement(category, toPin.id, toPin.sections);
-        var elemY = newElem.header.node().offsetTop;
-        pinPad.padContainer.node().scrollTop = elemY - pinPad.offsetTop;
-        var color = newElem.header.style('background-color');
-        newElem.header
-            .transition()
-            .duration(1500)
-            .styleTween('background-color', function() {
-                return d3.interpolate(pinPad.options.highlightColor, color);
-            })
-        ;
-        pinPad.dispatcher.add({element: toPin});
-        return newElem;
+    if (!category.open) {
+        category.toggle();
     }
+    var newElem = CategoryFactory.createElement(category, toPin, elIndex, allElements);
+    var elemY = newElem.header.node().offsetTop;
+    pinPadViewer.padContainer.node().scrollTop = elemY - pinPadViewer.offsetTop;
+    var color = newElem.header.style('background-color');
+    newElem.header
+        .transition()
+        .duration(1500)
+        .styleTween('background-color', function() {
+            return d3.interpolate(pinPadViewer.options.highlightColor, color);
+        })
+    ;
+    return newElem;
 };
 
-PinpadViewer.prototype.removeElement = function(id) {
-    var pinPad = this;
-    var index = -1;
-    var category = _.find(pinPad.categories, function(cat) {
-        index = _.findIndex(cat.data, function(datum){
-            return datum.id === id;
-        });
-        return index !== -1;
-    });
-    if (category && (index !== -1)) {
-        CategoryFactory.removeElement(category, index);
-    } else {
-        pinPad.dispatcher.unknown({element: {id: id}});
+PinPadViewer.prototype.removeElement = function(catIndex, elIndex) {
+    var pinPadViewer = this;
+    CategoryFactory.removeElement(pinPadViewer.categories[catIndex], elIndex);
+    if (pinPadViewer.categories[catIndex].elements.length === 0) {
+        CategoryFactory.removeCategory(pinPadViewer.categories[catIndex]);
+        pinPadViewer.categories.splice(catIndex, 1);
     }
 };
 
-PinpadViewer.prototype.removeCategory = function(catTitle) {
-    var pinPad = this;
-    var category = _.find(pinPad.categories, function(cat) {
-        return cat.title === catTitle;
-    });
-    if (category) {
-        CategoryFactory.removeCategory(category);
-    }
+PinPadViewer.prototype.delegateElementRemoval = function(elId) {
+    var pinPadViewer = this;
+    pinPadViewer.pinPad.removeElement(elId);
 };
 
-/**
- * Method responsible to say Hello
- * @example
- *     biojsvispinpad.hello('biojs');
- * @method hello
- * @param {String} name Name of a person
- * @return {String} Returns hello name
- */
-PinpadViewer.hello = function (name) {
-    return 'hello ' + name;
+PinPadViewer.prototype.removeCategory = function(catIndex) {
+    var pinPadViewer = this;
+    CategoryFactory.removeCategory(pinPadViewer.categories[catIndex]);
+    pinPadViewer.categories.splice(catIndex, 1);
 };
 
-module.exports = PinpadViewer;
+PinPadViewer.prototype.delegateCategoryRemoval = function(catTitle) {
+    var pinPadViewer = this;
+    pinPadViewer.pinPad.removeCategory(catTitle);
+};
+
+module.exports = PinPadViewer;

package.json

 {
   "name": "biojs-vis-pinpad",
   "description": "A component to pin tootlip-like information",
-  "version": "0.1.2",
+  "version": "0.1.3",
   "homepage": "https://github.com/ebi-uniprot/biojs-vis-pinpad",
@@ -18,3 +18,3 @@ "author": {
   "license": "Apache-2.0",
-  "main": "lib/PinpadViewer.js",
+  "main": "lib/PinPad.js",
   "scripts": {
@@ -40,2 +40,3 @@ "test": "gulp test",
     "gulp-chmod": "^1.1.1",
+    "gulp-env": "^0.2.0",
     "gulp-gzip": "^0.0.8",
@@ -55,5 +56,5 @@ "gulp-istanbul": "^0.10.0",
     "sniper": "^0.2.16",
-    "underscore": "^1.8.3",
     "vinyl-source-stream": "^1.0.0",
-    "watchify": "^1.0.6"
+    "watchify": "^1.0.6",
+    "xunit-file": "0.0.9"
   },
@@ -64,7 +65,8 @@ "sniper": {
       "/build/external/underscore.min.js",
-      "/build/PinpadViewer.js",
+      "/build/PinPad.js",
       "/snippets/data/data.js"
     ],
     "exposed": [
-      "d3", "underscore"
+      "d3",
+      "underscore"
     ],
@@ -71,0 +73,0 @@ "css": [

snippets/data/data.js

 var site671 = {
     category: "Domains & sites",
     id: 'ft_14',
+    ordering: {
+        type: 'Site',
+        start: 671,
+        end: 672
+    },
     sections: [
@@ -110,2 +115,7 @@ {
     id: 'ft_18',
+    ordering: {
+        type: 'Site',
+        start: 680,
+        end: 680
+    },
     sections: [
@@ -130,2 +140,7 @@ {
     id: 'ft_1',
+    ordering: {
+        type: 'Site',
+        start: 342,
+        end: 342
+    },
     sections: [
@@ -140,5 +155,11 @@ {
 };
+
 var site425 = {
     category: "Domains & sites",
     id: 'ft_1',
+    ordering: {
+        type: 'Site',
+        start: 425,
+        end: 425
+    },
     sections: [
@@ -153,4 +174,9 @@ {
 };
+
 var catPTM = {
     category: "PTM",
+    id: 'ft_123',
+    ordering: {
+        type: 'res_mod'
+    },
     sections: [
@@ -168,2 +194,7 @@ {
     "id": "ft_206",
+    ordering: {
+        type: 'missense',
+        start: 301,
+        end: 301
+    },
     "sections": [{
@@ -170,0 +201,0 @@ "title": "missense 301-301",

snippets/simple.js

@@ -23,7 +23,9 @@ // if you don't specify a html file, the sniper will generate a div
 var instance = new app({
-    el: appDiv
-    , width: '220px'
-    , height: '320px'
-    , highlightColor: 'green'
-    , text: 'biojs'
+    ordering: ['type', 'start', 'end'],
+    options: {
+        el: appDiv
+        , width: '220px'
+        , height: '320px'
+        , highlightColor: 'green'
+    }
 });
@@ -50,3 +52,3 @@
 
-instance.getDispatcher().on('duplication', function(obj) {
+instance.dispatcher.on('duplication', function(obj) {
     console.log('Element already exist');
@@ -56,3 +58,3 @@ console.log(obj);
 
-instance.getDispatcher().on('add', function(obj) {
+instance.dispatcher.on('add', function(obj) {
     console.log('Something added');
@@ -62,5 +64,5 @@ console.log(obj);
 
-instance.getDispatcher().on('remove', function(obj) {
+instance.dispatcher.on('remove', function(obj) {
     console.log('Something removed');
     console.log(obj);
 });

test/dom/PinpadViewerFlowTest.js

@@ -20,6 +20,7 @@ /*
 // requires your main app (specified in index.js)
-var PinPadViewer = require('../..');
+var PinPad = require('../..');
+var TestData = require('../TestData');
 
 describe('PinPadViewerFlowTest', function(){
-    var instance;
+    var instance, data;
     var elemField = 'description';
@@ -35,8 +36,12 @@
     before(function(done) {
-        instance = new PinPadViewer({
-            el: yourDiv
-            , width: '250px'
-            , height: '300px'
-            , highlightColor: 'green'
+        instance = new PinPad({
+            ordering: ['type', 'start', 'end'],
+            options: {
+                el: yourDiv
+                , width: '250px'
+                , height: '300px'
+                , highlightColor: 'green'
+            }
         });
+        data = new TestData();
         done();
@@ -65,28 +70,17 @@ });
     describe('adding a first element and category', function() {
-        var addCat1Elem1 = {
-            category: "Domains & sites",
-            id: 'ft_1',
-            sections: [
-                {
-                    title: "Region of interest 181-188",
-                    information: {
-                        description: "Zinc-binding"
-                    }
-                }
-            ]
-        };
         var catContainer, element, pad;
         it('should add a new category and element data', function() {
-            var newElem = instance.addElement(addCat1Elem1);
-            assert.equal(instance.categories.length, 1, 'only one category');
-            assert.equal(instance.categories[0].title, addCat1Elem1.category, 'category title');
-            assert.equal(instance.categories[0].data.length, 1, 'only one element');
-            assert.equal(instance.categories[0].data[0].sortAttribute, addCat1Elem1.sections[0].title,
-                'element title');
-            assert.equal(instance.categories[0].data[0].id, addCat1Elem1.id,
-                'element id');
-            assert.equal(instance.categories[0].data[0].sections, addCat1Elem1.sections,
-                'element sections');
-            assert.equal(newElem.content, instance.categories[0].data[0], 'element content');
-            expect(newElem.content.open).to.be.undefined;
+            instance.addElement(data.addCat1Elem1);
+            assert.equal(instance.model.categories.length, 1, 'only one category in model');
+            assert.equal(instance.model.categories[0].title, data.addCat1Elem1.category, 'model category title');
+            assert.equal(instance.model.categories[0].elements.length, 1, 'only one element in model');
+            assert.equal(instance.model.categories[0].elements[0].id, data.addCat1Elem1.id, 'model element id');
+            assert.equal(instance.model.categories[0].elements[0].sections, data.addCat1Elem1.sections, 'model' +
+                ' element sections');
+
+            assert.equal(instance.viewer.categories.length, 1, 'only one category in view');
+            assert.equal(instance.viewer.categories[0].title, data.addCat1Elem1.category, 'view category title');
+            assert.equal(instance.viewer.categories[0].elements.length, 1, 'only one element in view');
+            assert.equal(instance.viewer.categories[0].elements[0].id, data.addCat1Elem1.id, 'model element id');
+            expect(instance.viewer.categories[0].elements[0].open).to.be.undefined;
         });
@@ -102,3 +96,3 @@ it('should add a new category to dom', function() {
                 'arrow class');
-            assert.equal(header.firstElementChild.innerText.toLowerCase(), addCat1Elem1.category.toLowerCase(),
+            assert.equal(header.firstElementChild.innerText.toLowerCase(), data.addCat1Elem1.category.toLowerCase(),
                 'category header text');
@@ -124,3 +118,3 @@ assert.equal(header.lastElementChild.getAttribute('class'), 'up_pp_iconContainer', 'lift icon container');
                 'element arrow class');
-            assert.equal(elHeader.firstElementChild.innerText.toLowerCase(), addCat1Elem1.sections[0].title.toLowerCase(),
+            assert.equal(elHeader.firstElementChild.innerText.toLowerCase(), data.addCat1Elem1.sections[0].title.toLowerCase(),
                 'element header text');
@@ -139,3 +133,3 @@ assert.equal(elHeader.lastElementChild.getAttribute('class'), 'up_pp_iconContainer', 'el lift icon container');
             var col2 = elContent.firstElementChild.firstElementChild.lastElementChild;
-            assert.equal(col2.innerText, addCat1Elem1.sections[0].information[elemField], 'row information');
+            assert.equal(col2.innerText, data.addCat1Elem1.sections[0].information[elemField], 'row information');
         });
@@ -153,3 +147,3 @@ });
 
-            assert.equal(instance.categories[0].elements[0].content.open, false, 'element is close');
+            assert.equal(instance.viewer.categories[0].elements[0].open, false, 'element is close');
             assert.equal(elArrow.getAttribute('class'), 'up_pp_element-name up_pftv_arrow-right', 'close class');
@@ -160,32 +154,18 @@ });
     describe('adding a second element to the same category', function() {
-        var addCat1Elem2 = {
-            category: "Domains & sites",
-            id: 'ft_2',
-            sections: [
-                {
-                    title: "Site 57-57",
-                    information: {
-                        description: "Reactive bond"
-                    }
-                }
-            ]
-        };
-        var newElem;
         it('should keep only one category', function() {
-            newElem = instance.addElement(addCat1Elem2);
-            assert.equal(instance.categories.length, 1, 'still only one category');
-            assert.equal(instance.categories[0].data.length, 2, 'two elements');
+            instance.addElement(data.addCat1Elem2);
+            assert.equal(instance.model.categories.length, 1, 'still only one category in model');
+            assert.equal(instance.viewer.categories.length, 1, 'still only one category in view');
         });
-        it('should add a second element', function() {
-            assert.equal(instance.categories[0].data[1].sortAttribute, addCat1Elem2.sections[0].title,
-                'element title');
-            assert.equal(instance.categories[0].data[1].id, addCat1Elem2.id,
-                'element id');
-            assert.equal(instance.categories[0].data[1].sections, addCat1Elem2.sections,
-                'element sections');
-            assert.equal(newElem.content, instance.categories[0].data[1], 'element content');
-            expect(newElem.content.open).to.be.undefined;
+        it('should have now a second element', function() {
+            assert.equal(instance.model.categories[0].elements.length, 2, 'two elements in model');
+            assert.equal(instance.model.categories[0].elements[1].id, data.addCat1Elem2.id, 'second element id in model');
+            assert.equal(instance.model.categories[0].elements[1].sections, data.addCat1Elem2.sections, 'element sections');
+
+            assert.equal(instance.viewer.categories[0].elements.length, 2, 'two elements in view');
+            assert.equal(instance.viewer.categories[0].elements[1].id, data.addCat1Elem2.id, 'second element id in view');
+            expect(instance.viewer.categories[0].elements[1].open).to.be.undefined;
         });
         it('should keep the first element closed', function() {
-            assert.equal(instance.categories[0].elements[0].content.open, false,
+            assert.equal(instance.viewer.categories[0].elements[0].open, false,
                 'first element is still closed');
@@ -204,3 +184,3 @@ });
 
-            assert.equal(instance.categories[0].open, false, 'category is close');
+            assert.equal(instance.viewer.categories[0].open, false, 'category is close');
             assert.equal(catArrow.getAttribute('class'), 'up_pp_category-name up_pftv_arrow-right', 'close class');
@@ -211,24 +191,12 @@ })
     describe('adding an element in the middle', function() {
-        var addCat1Elem3 = {
-            category: "Domains & sites",
-            id: 'ft_3',
-            sections: [
-                {
-                    title: "Site 1-2",
-                    information: {
-                        description: "Cleavage; by beta-secretase"
-                    }
-                }
-            ]
-        };
         it('should add a third element into the second position', function() {
-            var newElem = instance.addElement(addCat1Elem3);
-            assert.equal(instance.categories[0].data[1].sortAttribute, addCat1Elem3.sections[0].title,
-                'element title');
-            assert.equal(instance.categories[0].data[1].id, addCat1Elem3.id,
-                'element id');
-            assert.equal(instance.categories[0].data[1].sections, addCat1Elem3.sections,
-                'element sections');
-            assert.equal(newElem.content, instance.categories[0].data[1], 'element content');
-            expect(newElem.content.open).to.be.undefined;
+            instance.addElement(data.addCat1Elem3);
+
+            assert.equal(instance.model.categories[0].elements.length, 3, 'three elements in model');
+            assert.equal(instance.model.categories[0].elements[1].id, data.addCat1Elem3.id, 'middle element id in model');
+            assert.equal(instance.model.categories[0].elements[1].sections, data.addCat1Elem3.sections, 'element sections');
+
+            assert.equal(instance.viewer.categories[0].elements.length, 3, 'three elements in view');
+            assert.equal(instance.viewer.categories[0].elements[1].id, data.addCat1Elem3.id, 'middle element id in view');
+            expect(instance.viewer.categories[0].elements[1].open).to.be.undefined;
         });
@@ -238,8 +206,9 @@ it('should open the category after insertion', function() {
             assert.equal(catArrow.getAttribute('class'), 'up_pp_category-name up_pftv_arrow-down', 'open class');
-            assert.equal(instance.categories[0].open, true, 'category is open');
+            assert.equal(instance.viewer.categories[0].open, true, 'category is open');
         });
         it('should keep the first added element closed and the others undefined', function() {
             var allElArrows = document.querySelectorAll('.up_pp_element-name');
-            assert.equal(allElArrows[0].getAttribute('class'), 'up_pp_element-name up_pftv_arrow-right', 'close class');
-            assert.equal(instance.categories[0].elements[0].content.open, false,
+            assert.equal(allElArrows[0].getAttribute('class'), 'up_pp_element-name up_pftv_arrow-right', 'close' +
+                ' class');
+            assert.equal(instance.viewer.categories[0].elements[0].open, false,
                 'first element is still closed');
@@ -249,4 +218,4 @@
             assert.equal(allElArrows[2].getAttribute('class'), 'up_pp_element-name up_pftv_arrow-down', 'open class');
-            expect(instance.categories[0].elements[1].content.open).to.be.undefined;
-            expect(instance.categories[0].elements[2].content.open).to.be.undefined;
+            expect(instance.viewer.categories[0].elements[1].open).to.be.undefined;
+            expect(instance.viewer.categories[0].elements[2].open).to.be.undefined;
         });
@@ -256,17 +225,8 @@ });
     describe('unsuccessfully adding an element with a duplicated id', function() {
-        var addDuplicated = {
-            category: "Anything here",
-            id: 'ft_3',
-            sections: [
-                {
-                    title: "Domain 10-13",
-                    information: {
-                        description: "Not provided"
-                    }
-                }
-            ]
-        };
-        it('should not allow adding a duplicated id', function() {
-            instance.addElement(addDuplicated);
-
+        it('should not have a duplicated id', function() {
+            instance.addElement(data.addDuplicated);
+            assert.equal(instance.model.categories[0].elements.length, 3, 'still three elements in model');
+            assert.equal(instance.viewer.categories[0].elements.length, 3, 'still three elements in view');
+        });
+        it('should not have a duplicated id in DOM', function() {
             var allElArrows = document.querySelectorAll('.up_pp_element-name');
@@ -281,32 +241,19 @@ assert.equal(allElArrows.length, 3, "still three elements");
     describe('adding an element in a new category', function() {
-        var addElem1Cat2 = {
-            category: "Post translational modification",
-            id: 'ft_4',
-            sections: [
-                {
-                    title: "Modified residue",
-                    information: {
-                        description: "Phosphoserine; by CK1"
-                    }
-                }
-            ]
-        };
-        var newElem;
         it('should add a new category', function() {
-            newElem = instance.addElement(addElem1Cat2);
-            assert.equal(instance.categories.length, 2, 'two categories');
+            instance.addElement(data.addElem1Cat2);
+
+            assert.equal(instance.model.categories.length, 2, 'two categories in model');
+            assert.equal(instance.viewer.categories.length, 2, 'two categories in view');
+
             var allCats = document.querySelectorAll('.up_pp_category-container');
             assert.equal(allCats.length, 2, "two DOM categories");
-            assert.equal(instance.categories[0].data.length, 3, 'three elements');
-            assert.equal(instance.categories[1].data.length, 1, 'one element');
+            assert.equal(instance.viewer.categories[0].elements.length, 3, 'three elements');
+            assert.equal(instance.viewer.categories[1].elements.length, 1, 'one element');
         });
         it('should add a new element', function() {
-            assert.equal(instance.categories[1].data[0].sortAttribute, addElem1Cat2.sections[0].title,
-                'element title');
-            assert.equal(instance.categories[1].data[0].id, addElem1Cat2.id,
-                'element id');
-            assert.equal(instance.categories[1].data[0].sections, addElem1Cat2.sections,
-                'element sections');
-            assert.equal(newElem.content, instance.categories[1].data[0], 'element content');
-            expect(newElem.content.open).to.be.undefined;
+            assert.equal(instance.model.categories[1].elements[0].id, data.addElem1Cat2.id, 'element id');
+            assert.equal(instance.model.categories[1].elements[0].sections, data.addElem1Cat2.sections, 'element sections');
+
+            assert.equal(instance.viewer.categories[1].elements[0].id, data.addElem1Cat2.id, 'element id');
+            expect(instance.viewer.categories[1].elements[0].open).to.be.undefined;
         });
@@ -323,4 +270,4 @@ });
 
-            assert.equal(instance.categories[0].data.length, 2, 'only two elements in data list now');
-            assert.equal(instance.categories[0].elements.length, 2, 'only two elements in dom list now');
+            assert.equal(instance.model.categories[0].elements.length, 2, 'only two elements in model');
+            assert.equal(instance.viewer.categories[0].elements.length, 2, 'only two elements in view');
         });
@@ -345,47 +292,9 @@ it('should remove the element in the DOM', function() {
         it('should remove the category in the data', function() {
-            assert.equal(instance.categories.length, 1, 'only 1 category now');
-            assert.equal(instance.categories[0].data.length, 1, 'only 1 element in data list now');
-            assert.equal(instance.categories[0].elements.length, 1, 'only 1 element in dom list now');
-        })
-    });
+            assert.equal(instance.model.categories.length, 1, 'only 1 category now in model');
+            assert.equal(instance.model.categories[0].elements.length, 1, 'only 1 element in data list now');
 
-    describe('removing element with the API method', function() {
-        var addElem2Cat2 = {
-            category: "Post translational modification",
-            id: 'ft_41',
-            sections: [
-                {
-                    title: "Modified residue",
-                    information: {
-                        description: "Phosphoserine; by CK2"
-                    }
-                }
-            ]
-        };
-        it('should add ft_41 element', function() {
-            instance.addElement(addElem2Cat2);
-            assert.equal(instance.categories[0].data.length, 2, 'two elements');
+            assert.equal(instance.viewer.categories.length, 1, 'only 1 category now in view');
+            assert.equal(instance.viewer.categories[0].elements.length, 1, 'only 1 element in dom list now');
         });
-        it('should remove ft_4 element', function() {
-            instance.removeElement('ft_4');
-            assert.equal(instance.categories[0].elements.length, 1, 'only 1 element');
-            assert.equal(instance.categories[0].data.length, 1, 'only 1 element in data');
-
-            var elements = document.querySelectorAll('.up_pp_element-header');
-            assert.equal(elements.length, 1, 'only 1 element in DOM');
-        });
     });
-
-    describe('removing category with the API method', function() {
-        it('should remove category Post translational modification', function() {
-            instance.removeCategory('Post translational modification');
-            assert.equal(instance.categories.length, 0, 'no categories');
-
-            var category = document.querySelectorAll('.up_pp_category-header');
-            assert.equal(category.length, 0, 'no categories in DOM');
-
-            var elements = document.querySelectorAll('.up_pp_element-header');
-            assert.equal(elements.length, 0, 'no elements in DOM');
-        });
-    });
 });

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Minified code

Quality

This package contains minified code. This may be harmless in some cases where minified code is included in packaged libraries, however packages on npm should not minify code.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Minified code

Quality

This package contains minified code. This may be harmless in some cases where minified code is included in packaged libraries, however packages on npm should not minify code.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

892720

increased by22.37%

Number of package files

56

increased by51.35%

Lines of code

12741

increased by7.18%

Worsened metrics

Dev dependency count

23

increased by4.55%

No dependency changes