@mmsb/genomic-card - npm Package Compare versions

Comparing version 2.0.4 to 3.0.0

dist/cjs/loader.cjs.js

@@ -5,7 +5,7 @@ 'use strict';
 
-const __chunk_1 = require('./chunk-945d3548.js');
+const core = require('./core-ddf4973c.js');
 
 const defineCustomElements = (win, options) => {
-  return __chunk_1.patchEsm().then(() => {
-    __chunk_1.bootstrapLazy([["genomic-card_2.cjs",[[1,"genomic-card",{"org_names":[1],"diagonal_svg":[2],"all_data":[1],"gene":[1],"size":[1],"show_data":[32],"allSgrna":[32],"genomeRef":[32],"allSize":[32],"subSgrna":[32],"selectedSection":[32],"orgSelected":[32],"refSelected":[32],"sgrnaSelected":[32],"sizeSelected":[32]},[[0,"changeOrgCard","handleChangeOrg"],[8,"changeOrgRefSgrna","handleChangeOrgRefSgrna"],[0,"changeRefCard","handleChangeRef"],[8,"sectionSelected","handleSectionSelected"],[8,"sectionSelectedSG","handleSectionSelectedSG"],[0,"mmsb-select.select","handleChangeSgrna"]]],[1,"mmsb-select",{"data":[16],"multiple":[4],"label":[1],"selected":[16],"is_open":[4],"height":[1],"internal_data":[32],"search_content":[32],"getSelected":[64]}]]]], options);
+  return core.patchEsm().then(() => {
+    core.bootstrapLazy([["mmsb-select.cjs",[[1,"mmsb-select",{"data":[16],"multiple":[4],"label":[1],"selected":[16],"is_open":[4],"height":[1],"internal_data":[32],"search_content":[32],"getSelected":[64]}]]],["genomic-card.cjs",[[1,"genomic-card",{"org_names":[1],"all_data":[1],"size":[1],"all_data_json":[16],"size_json":[16],"orgSelected":[1,"org-selected"],"refSelected":[1,"ref-selected"],"genomeRef":[16],"subSgrna":[16],"allSgrna":[16],"sgrnaSelected":[1,"sgrna-selected"],"diagonal_svg":[2],"show_data":[16],"sizeSelected":[2,"size-selected"],"selectedSection":[2,"selected-section"],"gene":[1],"error_msg":[1],"state":[32]},[[0,"changeOrgCard","handleChangeOrg"],[0,"changeRefCard","handleChangeRef"],[0,"mmsb-select.select","handleChangeSgrna"],[8,"sectionSelected","handleSectionSelected"],[8,"sectionSelectedSG","handleSectionSelectedSG"]]]]]], options);
   });
@@ -12,0 +12,0 @@ };

dist/cjs/mycomponent.cjs.js

 'use strict';
 
-const __chunk_1 = require('./chunk-945d3548.js');
+const core = require('./core-ddf4973c.js');
 
-__chunk_1.patchBrowser().then(resourcesUrl => {
-  return __chunk_1.bootstrapLazy([["genomic-card_2.cjs",[[1,"genomic-card",{"org_names":[1],"diagonal_svg":[2],"all_data":[1],"gene":[1],"size":[1],"show_data":[32],"allSgrna":[32],"genomeRef":[32],"allSize":[32],"subSgrna":[32],"selectedSection":[32],"orgSelected":[32],"refSelected":[32],"sgrnaSelected":[32],"sizeSelected":[32]},[[0,"changeOrgCard","handleChangeOrg"],[8,"changeOrgRefSgrna","handleChangeOrgRefSgrna"],[0,"changeRefCard","handleChangeRef"],[8,"sectionSelected","handleSectionSelected"],[8,"sectionSelectedSG","handleSectionSelectedSG"],[0,"mmsb-select.select","handleChangeSgrna"]]],[1,"mmsb-select",{"data":[16],"multiple":[4],"label":[1],"selected":[16],"is_open":[4],"height":[1],"internal_data":[32],"search_content":[32],"getSelected":[64]}]]]], { resourcesUrl });
+core.patchBrowser().then(options => {
+  return core.bootstrapLazy([["mmsb-select.cjs",[[1,"mmsb-select",{"data":[16],"multiple":[4],"label":[1],"selected":[16],"is_open":[4],"height":[1],"internal_data":[32],"search_content":[32],"getSelected":[64]}]]],["genomic-card.cjs",[[1,"genomic-card",{"org_names":[1],"all_data":[1],"size":[1],"all_data_json":[16],"size_json":[16],"orgSelected":[1,"org-selected"],"refSelected":[1,"ref-selected"],"genomeRef":[16],"subSgrna":[16],"allSgrna":[16],"sgrnaSelected":[1,"sgrna-selected"],"diagonal_svg":[2],"show_data":[16],"sizeSelected":[2,"size-selected"],"selectedSection":[2,"selected-section"],"gene":[1],"error_msg":[1],"state":[32]},[[0,"changeOrgCard","handleChangeOrg"],[0,"changeRefCard","handleChangeRef"],[0,"mmsb-select.select","handleChangeSgrna"],[8,"sectionSelected","handleSectionSelected"],[8,"sectionSelectedSG","handleSectionSelectedSG"]]]]]], options);
 });

dist/collection/collection-manifest.json

@@ -7,4 +7,4 @@ {
     "name": "@stencil/core",
-    "version": "1.1.7",
-    "typescriptVersion": "3.5.2"
+    "version": "1.8.1",
+    "typescriptVersion": "3.7.2"
   },
@@ -11,0 +11,0 @@ "collections": [

dist/collection/components/my-component/my-component.js

@@ -1,5 +0,4 @@
-import { h } from '@stencil/core';
+import { h } from "@stencil/core";
+import * as dspl from './displayPlot';
 import * as d3 from "d3";
-import * as clTree from './clusteringTree';
-import * as dspl from './displayPlot';
 export class MyComponent {
@@ -9,49 +8,7 @@ constructor() {
         this.selectedSection = -1;
-        this.sizeSelected = 4518734;
-        this.handleChangeOrg = this.handleChangeOrg.bind(this);
-        this.handleChangeRef = this.handleChangeRef.bind(this);
-        this.handleChangeSgrna = this.handleChangeSgrna.bind(this);
+        this.state = "initialize";
+        this.error_msg = '';
         this.emitOrgChange = this.emitOrgChange.bind(this);
         this.emitRefChange = this.emitRefChange.bind(this);
-        this.emitSgrnaChange = this.emitSgrnaChange.bind(this);
     }
-    // *************************** CLICK ***************************
-    handleChangeOrg(event) {
-        this.orgSelected = event.detail;
-        this.refSelected = this.genomeRef[0];
-        this.updateDataOrg();
-        console.log(`CLICK on ${this.orgSelected}`);
-    }
-    handleChangeOrgRefSgrna(event) {
-        var tmp_name = event.detail.axis.split("$");
-        this.orgSelected = tmp_name[0];
-        this.sgrnaSelected = event.detail.sgrna;
-        this.updateDataOrg(tmp_name[1]);
-    }
-    updateDataOrg(ref = undefined) {
-        this.subSgrna = undefined;
-        this.selectedSection = -1;
-        let all_data = JSON.parse(this.all_data);
-        this.genomeRef = Object.keys(all_data[this.orgSelected]);
-        this.refSelected = (ref === undefined) ? this.genomeRef[0] : ref;
-        this.show_data = all_data[this.orgSelected][this.refSelected];
-        this.allSgrna = Object.keys(all_data[this.orgSelected][this.refSelected]);
-        (this.allSize == undefined) ? this.sizeSelected = 4518734 : this.sizeSelected = this.allSize[this.orgSelected][this.refSelected];
-        new clTree.TreeClustering(this.sizeSelected, this.show_data, 4, 5);
-    }
-    handleChangeRef(event) {
-        this.refSelected = event.detail;
-        this.updateDataOrg();
-    }
-    handleSectionSelected(event) {
-        this.subSgrna = event.detail["sgRNA"];
-        this.selectedSection = event.detail["section"];
-        this.sgrnaSelected = this.subSgrna[0];
-    }
-    handleSectionSelectedSG(event) {
-        this.emitsgData(event.detail["sgRNA"], event.detail["min"], event.detail["max"]);
-    }
-    handleChangeSgrna(event) {
-        this.sgrnaSelected = event.detail;
-    }
     emitOrgChange(event) {
@@ -65,6 +22,2 @@ let val = event.currentTarget.innerText;
     }
-    emitSgrnaChange(event) {
-        let val = event.currentTarget.value;
-        this.changeSgrnaCard.emit(val);
-    }
     emitsgData(event, min, max) {
@@ -83,31 +36,51 @@ let geneParsed = JSON.parse(this.gene);
     }
-    // *************************** DISPLAY ***************************
-    /**
-    * Set all coordinates of a given sgRNA if the state is not undefined
-    */
-    showCoord() {
-        if (this.sgrnaSelected == undefined) {
-            return "";
-        }
-        let dataOneSgrna = this.show_data[this.sgrnaSelected];
-        let text = "<div id='coordBoxHeader'>" + this.sgrnaSelected + " : " + dataOneSgrna.length + "</div><div id='coordBoxText'>";
-        dataOneSgrna.forEach(coord => {
-            text += coord + "\n";
-        });
-        text += "</div>";
-        this.element.shadowRoot.querySelector(".coordBox").innerHTML = text;
+    handleChangeOrg(event) {
+        this.orgSelected = event.detail;
+        this.updateDataOrg();
     }
-    /**
-    * Display the genome by a blue circle
-    * @param {string} ref The selector where the tooltip must appear
-    * @param {string} target The selector of the tooltip
-    */
-    styleHelp(ref, target) {
-        if (this.element.shadowRoot.querySelector(ref) != null) {
-            var coordGen = this.element.shadowRoot.querySelector(ref).getBoundingClientRect();
-            this.element.shadowRoot.querySelector(target).style.top = coordGen.top.toString() + "px";
-            this.element.shadowRoot.querySelector(target).style.left = coordGen.left.toString() + "px";
+    handleChangeRef(event) {
+        this.updateDataOrg(event.detail);
+    }
+    handleChangeSgrna(event) {
+        this.sgrnaSelected = event.detail;
+    }
+    handleSectionSelected(event) {
+        this.subSgrna = event.detail["sgRNA"];
+        this.selectedSection = event.detail["section"];
+        this.sgrnaSelected = this.subSgrna[0];
+    }
+    handleSectionSelectedSG(event) {
+        this.emitsgData(event.detail["sgRNA"], event.detail["min"], event.detail["max"]);
+    }
+    componentWillLoad() {
+        let stop = 0;
+        this.error_msg = 'ERROR : ';
+        if (this.org_names == undefined) {
+            stop = 1;
+            this.error_msg += "org_names undefined ";
         }
+        if (this.all_data == undefined) {
+            stop = 1;
+            this.error_msg += "all_data undefined ";
+        }
+        if (this.size == undefined) {
+            stop = 1;
+            this.error_msg += "size undefined ";
+        }
+        if (this.diagonal_svg == undefined) {
+            this.diagonal_svg = 700;
+        }
+        if (stop) {
+            this.state = "stop";
+        }
+        else {
+            this.orgSelected = this.org_names.split("&")[0];
+            this.all_data_json = JSON.parse(this.all_data);
+            this.size_json = JSON.parse(this.size);
+            this.updateDataOrg();
+        }
     }
-    componentDidUpdate() {
+    componentDidRender() {
+        dspl.generateGenomicCard(DisplayGenome, this.diagonal_svg, this.sizeSelected, this.element.shadowRoot, this.show_data[this.sgrnaSelected], this.sgrnaSelected);
+        dspl.generateSunburst(this.sizeSelected, this.show_data, this.diagonal_svg, this.element.shadowRoot.querySelector('#displayGenomicCard'), this.selectedSection, this.gene != undefined ? true : false);
         this.element.shadowRoot.querySelector('.genomeCircle').addEventListener("click", () => {
@@ -117,2 +90,3 @@ this.subSgrna = undefined;
             this.sgrnaSelected = this.allSgrna[0];
+            this.emitsgData(this.all_data_json[this.orgSelected][this.refSelected], 0, this.sizeSelected);
         });
@@ -122,115 +96,102 @@ this.styleHelp(".genomeCircle>path", ".help-gen");
         this.styleHelp("#notif>.material-icons", "#notif-text");
-        this.showCoord();
     }
-    componentDidLoad() {
-        if (this.size != undefined) {
-            this.allSize = JSON.parse(this.size);
-            this.sizeSelected = this.allSize[this.orgSelected][this.refSelected];
+    styleHelp(ref, target) {
+        if (this.element.shadowRoot.querySelector(ref) != null) {
+            var coordGen = this.element.shadowRoot.querySelector(ref).getBoundingClientRect();
+            this.element.shadowRoot.querySelector(target).style.top = coordGen.top.toString() + "px";
+            this.element.shadowRoot.querySelector(target).style.left = coordGen.left.toString() + "px";
         }
+    }
+    updateDataOrg(ref = undefined) {
+        this.genomeRef = Object.keys(this.all_data_json[this.orgSelected]);
+        this.refSelected = (ref === undefined) ? this.genomeRef[0] : ref;
+        this.sizeSelected = this.size_json[this.orgSelected][this.refSelected];
+        this.show_data = this.all_data_json[this.orgSelected][this.refSelected];
+        this.allSgrna = Object.keys(this.show_data).sort((a, b) => (this.show_data[a].length < this.show_data[b].length) ? 1 : -1);
+        console.log(this.allSgrna);
+        this.sgrnaSelected = this.allSgrna[0];
+        this.selectedSection = -1;
+    }
+    showCoordHeader() {
+        if (this.sgrnaSelected == undefined) {
+            return "";
+        }
         else {
-            this.sizeSelected = 4518734;
+            let dataOneSgrna = this.show_data[this.sgrnaSelected];
+            return this.sgrnaSelected + " : " + dataOneSgrna.length;
         }
-        DisplayGenome(this.element.shadowRoot, this.diagonal_svg, this.diagonal_svg);
-        dspl.generateGenomicCard(DisplayGenome, this.diagonal_svg, this.sizeSelected, this.element.shadowRoot, this.show_data[this.sgrnaSelected], this.sgrnaSelected);
-        dspl.generateSunburst(this.sizeSelected, this.show_data, this.diagonal_svg, this.element.shadowRoot.querySelector('#displayGenomicCard'), this.selectedSection, this.gene != undefined ? true : false);
-        if (this.element.shadowRoot.querySelector('.genomeCircle') != null) {
-            this.element.shadowRoot.querySelector('.genomeCircle').addEventListener("click", () => {
-                this.subSgrna = undefined;
+    }
+    showCoordText() {
+        if (this.sgrnaSelected == undefined) {
+            return "";
+        }
+        else {
+            let dataOneSgrna = this.show_data[this.sgrnaSelected];
+            let text = '';
+            dataOneSgrna.forEach(coord => {
+                text += coord + "\n";
             });
+            return text;
         }
-        this.styleHelp(".genomeCircle>path", ".help-gen");
-        this.styleHelp(".sunburst>path", ".help-section");
-        this.styleHelp("#notif>.material-icons", "#notif-text");
-        this.showCoord();
     }
     render() {
+        console.log("RENDER GENOMIC-CARD");
+        if (this.state == "stop") {
+            return this.error_msg;
+        }
         let tabOrgName = this.org_names.split("&");
-        let styleDisplay, all_data;
-        if (this.all_data == undefined) {
-            styleDisplay = ['block', 'none'];
-        }
-        else {
-            styleDisplay = ['none', 'block'];
-            all_data = JSON.parse(this.all_data);
-            if (this.orgSelected == undefined) {
-                this.orgSelected = tabOrgName[0];
-                this.genomeRef = Object.keys(all_data[this.orgSelected]);
-                this.refSelected = this.genomeRef[0];
-                this.show_data = all_data[this.orgSelected][this.refSelected];
-                this.allSgrna = Object.keys(all_data[this.orgSelected][this.refSelected]);
-                this.sgrnaSelected = this.allSgrna[0];
-            }
-        }
-        console.log(this.subSgrna == undefined);
-        let displayLoad = styleDisplay[0], displayGenomeCard = styleDisplay[1];
-        if (this.all_data == undefined) {
-            return ([
-                //@ts-ignore
-                h("link", { rel: "stylesheet", href: "https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css", integrity: "sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T", crossorigin: "anonymous" }),
-                h("div", { style: { display: displayLoad } },
-                    h("strong", null, " Loading ... "),
-                    h("div", { class: "spinner-grow text-info", role: "status" },
-                        h("span", { class: "sr-only" }, "Loading...")))
-            ]);
-        }
-        else {
-            return ([
-                h("head", null,
-                    h("link", { rel: "stylesheet", href: "https://fonts.googleapis.com/icon?family=Material+Icons" })
-                //@ts-ignore
-                ,
-                    "//@ts-ignore",
-                    h("link", { rel: "stylesheet", href: "https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css", integrity: "sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T", crossorigin: "anonymous" })),
-                /* ************************************************************* */
-                /* ************* Main component with menu and card ************* */
-                /* ************************************************************* */
-                /* ************* Menu ************* */
-                h("div", { class: "main-genome-card", style: { display: displayGenomeCard } },
-                    h("ul", { class: "nav nav-tabs", id: "myTab", role: "tablist" }, tabOrgName.map(name => {
-                        let classTag = "nav-link", bool = "false";
-                        if (name == this.orgSelected) {
-                            classTag = "nav-link active";
-                            bool = "true";
-                        }
-                        return h("li", { class: "nav-item" },
+        return ([
+            h("head", null,
+                h("link", { rel: "stylesheet", href: "https://fonts.googleapis.com/icon?family=Material+Icons" })
+            //@ts-ignore
+            ,
+                "//@ts-ignore",
+                h("link", { rel: "stylesheet", href: "https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css", integrity: "sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T", crossorigin: "anonymous" })),
+            h("div", { class: "main-genome-card" },
+                h("ul", { class: "nav nav-tabs", id: "myTab", role: "tablist" }, tabOrgName.map(name => {
+                    let classTag = "nav-link", bool = "false";
+                    if (name == this.orgSelected) {
+                        classTag = "nav-link active";
+                        bool = "true";
+                    }
+                    return h("li", { class: "nav-item" },
+                        " ",
+                        h("a", { class: classTag, "data-toggle": "tab", role: "tab", "aria-selected": bool, href: "#", onClick: this.emitOrgChange },
                             " ",
-                            h("a", { class: classTag, "data-toggle": "tab", role: "tab", "aria-selected": bool, href: "#", onClick: this.emitOrgChange },
-                                " ",
-                                name,
-                                " "),
-                            " ");
-                    })),
-                    h("div", { class: "tab-content genomeGraph", id: "myTabContent" },
-                        h("div", { class: "test", style: { float: "left" } },
-                            h("div", { class: "select-menu" },
-                                h("span", null, "References"),
-                                h("select", { class: "custom-select", onChange: e => this.emitRefChange(e) }, this.genomeRef.map(ref => h("option", null, ref)))),
-                            h("div", { class: "select-menu" },
-                                h("span", null, "sgRNA"),
-                                (this.subSgrna === undefined) ?
-                                    "" : h("div", { id: "notif" },
-                                    h("i", { class: "material-icons" }, "  notifications "),
-                                    h("div", { id: "notif-text" },
-                                        "Only sgRNA on the selected ",
-                                        h("br", null),
-                                        "sector are shown")),
-                                h("mmsb-select", { label: "Select sgRNA", data: this.subSgrna === undefined ? this.allSgrna.map(sgRna => [sgRna, sgRna]) : this.subSgrna.map(sgRna => [sgRna, sgRna]) }))),
-                        h("div", null,
-                            h("p", { style: { padding: "12px 0px 0px 230px", marginBottom: "0px" } },
-                                " ",
-                                h("strong", null, " Coordinates Box ")),
-                            h("p", { class: "coordBox" })),
-                        h("div", { class: "help" },
-                            h("i", { class: "material-icons", style: { cursor: "help" } }, "help"),
-                            h("div", { class: "help-text help-gen" }, " Click on me to reinitialize sgRNA "),
-                            h("div", { class: "help-text help-section" }, " Click on me to display only sgRNA which are on me ")),
-                        h("svg", { id: 'displayGenomicCard', width: this.diagonal_svg, height: this.diagonal_svg },
-                            dspl.generateGenomicCard(DisplayGenome, this.diagonal_svg, this.sizeSelected, this.element.shadowRoot, this.show_data[this.sgrnaSelected], this.sgrnaSelected),
-                            h("text", { transform: `translate(${this.diagonal_svg / 2 - 30} , ${this.diagonal_svg / 2})` },
-                                " ",
-                                this.sizeSelected,
-                                " pb ")),
-                        dspl.generateSunburst(this.sizeSelected, this.show_data, this.diagonal_svg, this.element.shadowRoot.querySelector('#displayGenomicCard'), this.selectedSection, this.gene != undefined ? true : false))),
-            ]);
-        }
+                            name,
+                            " "),
+                        " ");
+                })),
+                h("div", { class: "tab-content genomeGraph", id: "myTabContent" },
+                    h("div", { class: "selection", style: { float: "left" } },
+                        h("div", { class: "select-menu" },
+                            h("span", null, "References"),
+                            h("select", { class: "custom-select", onChange: e => this.emitRefChange(e) }, this.genomeRef.map(ref => h("option", null, ref)))),
+                        h("div", { class: "select-menu" },
+                            h("span", null, "sgRNA"),
+                            (this.subSgrna === undefined) ?
+                                "" : h("div", { id: "notif" },
+                                h("i", { class: "material-icons" }, "  notifications_active "),
+                                h("div", { id: "notif-text" },
+                                    "Only sgRNA on the selected ",
+                                    h("br", null),
+                                    "sector are shown")),
+                            h("mmsb-select", { label: "Select sgRNA", data: this.subSgrna === undefined ? this.allSgrna.map(sgRna => [sgRna, sgRna]) : this.subSgrna.map(sgRna => [sgRna, sgRna]), selected: [this.sgrnaSelected] }, " "))),
+                    h("div", null,
+                        h("p", { style: { padding: "12px 0px 0px 230px", marginBottom: "0px" } },
+                            " ",
+                            h("strong", null, " Coordinates Box ")),
+                        h("p", { class: "coordBox" },
+                            h("div", { id: 'coordBoxHeader' }, this.showCoordHeader()),
+                            h("div", { id: 'coordBoxText' }, this.showCoordText()))),
+                    h("div", { class: "help" },
+                        h("i", { class: "material-icons", style: { cursor: "help" } }, "help"),
+                        h("div", { class: "help-text help-gen" }, " Click on me to reinitialize sgRNA "),
+                        h("div", { class: "help-text help-section" }, " Click on me to display only sgRNA which are on me ")),
+                    h("svg", { id: 'displayGenomicCard', width: this.diagonal_svg, height: this.diagonal_svg },
+                        h("text", { transform: `translate(${this.diagonal_svg / 2 - 30} , ${this.diagonal_svg / 2})` },
+                            " ",
+                            this.sizeSelected,
+                            " pb "))))
+        ]);
     }
@@ -263,2 +224,163 @@ static get is() { return "genomic-card"; }
         },
+        "all_data": {
+            "type": "string",
+            "mutable": false,
+            "complexType": {
+                "original": "string",
+                "resolved": "string",
+                "references": {}
+            },
+            "required": false,
+            "optional": false,
+            "docs": {
+                "tags": [],
+                "text": ""
+            },
+            "attribute": "all_data",
+            "reflect": false
+        },
+        "size": {
+            "type": "string",
+            "mutable": false,
+            "complexType": {
+                "original": "string",
+                "resolved": "string",
+                "references": {}
+            },
+            "required": false,
+            "optional": false,
+            "docs": {
+                "tags": [],
+                "text": ""
+            },
+            "attribute": "size",
+            "reflect": false
+        },
+        "all_data_json": {
+            "type": "unknown",
+            "mutable": false,
+            "complexType": {
+                "original": "{}",
+                "resolved": "{}",
+                "references": {}
+            },
+            "required": false,
+            "optional": false,
+            "docs": {
+                "tags": [],
+                "text": ""
+            }
+        },
+        "size_json": {
+            "type": "unknown",
+            "mutable": false,
+            "complexType": {
+                "original": "{}",
+                "resolved": "{}",
+                "references": {}
+            },
+            "required": false,
+            "optional": false,
+            "docs": {
+                "tags": [],
+                "text": ""
+            }
+        },
+        "orgSelected": {
+            "type": "string",
+            "mutable": false,
+            "complexType": {
+                "original": "string",
+                "resolved": "string",
+                "references": {}
+            },
+            "required": false,
+            "optional": false,
+            "docs": {
+                "tags": [],
+                "text": ""
+            },
+            "attribute": "org-selected",
+            "reflect": false
+        },
+        "refSelected": {
+            "type": "string",
+            "mutable": false,
+            "complexType": {
+                "original": "string",
+                "resolved": "string",
+                "references": {}
+            },
+            "required": false,
+            "optional": false,
+            "docs": {
+                "tags": [],
+                "text": ""
+            },
+            "attribute": "ref-selected",
+            "reflect": false
+        },
+        "genomeRef": {
+            "type": "unknown",
+            "mutable": false,
+            "complexType": {
+                "original": "string[]",
+                "resolved": "string[]",
+                "references": {}
+            },
+            "required": false,
+            "optional": false,
+            "docs": {
+                "tags": [],
+                "text": ""
+            }
+        },
+        "subSgrna": {
+            "type": "unknown",
+            "mutable": false,
+            "complexType": {
+                "original": "string[]",
+                "resolved": "string[]",
+                "references": {}
+            },
+            "required": false,
+            "optional": false,
+            "docs": {
+                "tags": [],
+                "text": ""
+            }
+        },
+        "allSgrna": {
+            "type": "unknown",
+            "mutable": false,
+            "complexType": {
+                "original": "string[]",
+                "resolved": "string[]",
+                "references": {}
+            },
+            "required": false,
+            "optional": false,
+            "docs": {
+                "tags": [],
+                "text": ""
+            },
+            "defaultValue": "[]"
+        },
+        "sgrnaSelected": {
+            "type": "string",
+            "mutable": false,
+            "complexType": {
+                "original": "string",
+                "resolved": "string",
+                "references": {}
+            },
+            "required": false,
+            "optional": false,
+            "docs": {
+                "tags": [],
+                "text": ""
+            },
+            "attribute": "sgrna-selected",
+            "reflect": false
+        },
         "diagonal_svg": {
@@ -281,8 +403,8 @@ "type": "number",
         },
-        "all_data": {
-            "type": "string",
+        "show_data": {
+            "type": "unknown",
             "mutable": false,
             "complexType": {
-                "original": "string",
-                "resolved": "string",
+                "original": "{}",
+                "resolved": "{}",
                 "references": {}
@@ -295,6 +417,39 @@ },
                 "text": ""
+            }
+        },
+        "sizeSelected": {
+            "type": "number",
+            "mutable": false,
+            "complexType": {
+                "original": "number",
+                "resolved": "number",
+                "references": {}
             },
-            "attribute": "all_data",
+            "required": false,
+            "optional": false,
+            "docs": {
+                "tags": [],
+                "text": ""
+            },
+            "attribute": "size-selected",
             "reflect": false
         },
+        "selectedSection": {
+            "type": "number",
+            "mutable": false,
+            "complexType": {
+                "original": "number",
+                "resolved": "number",
+                "references": {}
+            },
+            "required": false,
+            "optional": false,
+            "docs": {
+                "tags": [],
+                "text": ""
+            },
+            "attribute": "selected-section",
+            "reflect": false,
+            "defaultValue": "-1"
+        },
         "gene": {
@@ -317,3 +472,3 @@ "type": "string",
         },
-        "size": {
+        "error_msg": {
             "type": "string",
@@ -332,17 +487,9 @@ "mutable": false,
             },
-            "attribute": "size",
-            "reflect": false
+            "attribute": "error_msg",
+            "reflect": false,
+            "defaultValue": "''"
         }
     }; }
     static get states() { return {
-        "show_data": {},
-        "allSgrna": {},
-        "genomeRef": {},
-        "allSize": {},
-        "subSgrna": {},
-        "selectedSection": {},
-        "orgSelected": {},
-        "refSelected": {},
-        "sgrnaSelected": {},
-        "sizeSelected": {}
+        "state": {}
     }; }
@@ -380,17 +527,2 @@ static get events() { return [{
         }, {
-            "method": "changeSgrnaCard",
-            "name": "changeSgrnaCard",
-            "bubbles": true,
-            "cancelable": true,
-            "composed": true,
-            "docs": {
-                "tags": [],
-                "text": ""
-            },
-            "complexType": {
-                "original": "any",
-                "resolved": "any",
-                "references": {}
-            }
-        }, {
             "method": "sgDataSection",
@@ -419,10 +551,10 @@ "name": "sgDataSection",
         }, {
-            "name": "changeOrgRefSgrna",
-            "method": "handleChangeOrgRefSgrna",
-            "target": "window",
+            "name": "changeRefCard",
+            "method": "handleChangeRef",
+            "target": undefined,
             "capture": false,
             "passive": false
         }, {
-            "name": "changeRefCard",
-            "method": "handleChangeRef",
+            "name": "mmsb-select.select",
+            "method": "handleChangeSgrna",
             "target": undefined,
@@ -443,8 +575,2 @@ "capture": false,
             "passive": false
-        }, {
-            "name": "mmsb-select.select",
-            "method": "handleChangeSgrna",
-            "target": undefined,
-            "capture": false,
-            "passive": false
         }]; }
@@ -451,0 +577,0 @@ }

dist/esm/polyfills/css-shim.js

@@ -379,3 +379,9 @@ /*
     // computes the css scopes that might affect this particular element
-    var scopes = globalScopes.concat(getScopesForElement(hostScopeMap, hostEl));
+    // avoiding using spread arrays to avoid ts helper fns when in es5
+    var scopes = [];
+    var scopesForElement = getScopesForElement(hostScopeMap, hostEl);
+    // globalScopes are always took into account
+    globalScopes.forEach(function (s) { return scopes.push(s); });
+    // the parent scopes are computed by walking parent dom until <html> is reached
+    scopesForElement.forEach(function (s) { return scopes.push(s); });
     // each scope might have an array of associated selectors
@@ -431,5 +437,9 @@ // let's flatten the complete array of selectors from all the scopes
 function addGlobalStyle(globalScopes, styleEl) {
-    var css = parseCSS(styleEl.innerHTML);
+    if (globalScopes.some(function (css) { return css.styleEl === styleEl; })) {
+        return false;
+    }
+    var css = parseCSS(styleEl.textContent);
     css.styleEl = styleEl;
     globalScopes.push(css);
+    return true;
 }
@@ -441,3 +451,3 @@ function updateGlobalScopes(scopes) {
         if (scope.usesCssVars) {
-            scope.styleEl.innerHTML = executeTemplate(scope.template, props);
+            scope.styleEl.textContent = executeTemplate(scope.template, props);
         }
@@ -453,5 +463,5 @@ });
     var selectors = scope.selectors.map(function (sel) {
-        return Object.assign({}, sel, { selector: replaceScope(sel.selector, scope.scopeId, scopeId) });
+        return Object.assign(Object.assign({}, sel), { selector: replaceScope(sel.selector, scope.scopeId, scopeId) });
     });
-    return Object.assign({}, scope, { template: template,
+    return Object.assign(Object.assign({}, scope), { template: template,
         selectors: selectors,
@@ -471,5 +481,13 @@ scopeId: scopeId });
 }
+function startWatcher(doc, globalScopes) {
+    var mutation = new MutationObserver(function () {
+        if (loadDocumentStyles(doc, globalScopes)) {
+            updateGlobalScopes(globalScopes);
+        }
+    });
+    mutation.observe(document.head, { childList: true });
+}
 function loadDocumentLinks(doc, globalScopes) {
     var promises = [];
-    var linkElms = doc.querySelectorAll('link[rel="stylesheet"][href]');
+    var linkElms = doc.querySelectorAll('link[rel="stylesheet"][href]:not([data-no-shim])');
     for (var i = 0; i < linkElms.length; i++) {
@@ -481,6 +499,6 @@ promises.push(addGlobalLink(doc, globalScopes, linkElms[i]));
 function loadDocumentStyles(doc, globalScopes) {
-    var styleElms = doc.querySelectorAll('style:not([data-styles])');
-    for (var i = 0; i < styleElms.length; i++) {
-        addGlobalStyle(globalScopes, styleElms[i]);
-    }
+    var styleElms = Array.from(doc.querySelectorAll('style:not([data-styles]):not([data-no-shim])'));
+    return styleElms
+        .map(function (style) { return addGlobalStyle(globalScopes, style); })
+        .some(Boolean);
 }
@@ -496,3 +514,3 @@ function addGlobalLink(doc, globalScopes, linkElm) {
             styleEl.setAttribute('data-styles', '');
-            styleEl.innerHTML = text;
+            styleEl.textContent = text;
             addGlobalStyle(globalScopes, styleEl);
@@ -521,3 +539,3 @@ linkElm.parentNode.insertBefore(styleEl, linkElm);
 // This regexp find all url() usages with relative urls
-var CSS_URL_REGEXP = /url[\s]*\([\s]*['"]?(?![http|/])([^\'\"\)]*)[\s]*['"]?\)[\s]*/gim;
+var CSS_URL_REGEXP = /url[\s]*\([\s]*['"]?(?!(?:https?|data)\:|\/)([^\'\"\)]*)[\s]*['"]?\)[\s]*/gim;
 function hasRelativeUrls(css) {
@@ -547,10 +565,18 @@ CSS_URL_REGEXP.lastIndex = 0;
         this.scopesMap = new Map();
+        this.didInit = false;
     }
     CustomStyle.prototype.initShim = function () {
         var _this = this;
-        return new Promise(function (resolve) {
-            _this.win.requestAnimationFrame(function () {
-                loadDocument(_this.doc, _this.globalScopes).then(function () { return resolve(); });
+        if (this.didInit) {
+            return Promise.resolve();
+        }
+        else {
+            this.didInit = true;
+            return new Promise(function (resolve) {
+                _this.win.requestAnimationFrame(function () {
+                    startWatcher(_this.doc, _this.globalScopes);
+                    loadDocument(_this.doc, _this.globalScopes).then(function () { return resolve(); });
+                });
             });
-        });
+        }
     };
@@ -564,4 +590,5 @@ CustomStyle.prototype.addLink = function (linkEl) {
     CustomStyle.prototype.addGlobalStyle = function (styleEl) {
-        addGlobalStyle(this.globalScopes, styleEl);
-        this.updateGlobal();
+        if (addGlobalStyle(this.globalScopes, styleEl)) {
+            this.updateGlobal();
+        }
     };
@@ -574,5 +601,6 @@ CustomStyle.prototype.createHostStyle = function (hostEl, cssScopeId, cssText, isScoped) {
         var styleEl = this.doc.createElement('style');
+        styleEl.setAttribute('data-no-shim', '');
         if (!baseScope.usesCssVars) {
             // This component does not use (read) css variables
-            styleEl.innerHTML = cssText;
+            styleEl.textContent = cssText;
         }
@@ -582,3 +610,3 @@ else if (isScoped) {
             styleEl['s-sc'] = cssScopeId = baseScope.scopeId + "-" + this.count;
-            styleEl.innerHTML = '/*needs update*/';
+            styleEl.textContent = '/*needs update*/';
             this.hostStyleMap.set(hostEl, styleEl);
@@ -592,3 +620,3 @@ this.hostScopeMap.set(hostEl, reScope(baseScope, cssScopeId));
             if (!baseScope.usesCssVars) {
-                styleEl.innerHTML = executeTemplate(baseScope.template, {});
+                styleEl.textContent = executeTemplate(baseScope.template, {});
             }
@@ -616,3 +644,3 @@ this.globalScopes.push(baseScope);
                 var props = resolveValues(selectors);
-                styleEl.innerHTML = executeTemplate(scope.template, props);
+                styleEl.textContent = executeTemplate(scope.template, props);
             }
@@ -619,0 +647,0 @@ }

dist/esm/polyfills/dom.js

 (function(){
   /*
-
     Copyright (c) 2016 The Polymer Project Authors. All rights reserved.
@@ -93,7 +92,25 @@ This code may only be used under the BSD style license found at http://polymer.github.io/LICENSE.txt
 (function(a){"function"!==typeof a.matches&&(a.matches=a.msMatchesSelector||a.mozMatchesSelector||a.webkitMatchesSelector||function(a){a=(this.document||this.ownerDocument).querySelectorAll(a);for(var b=0;a[b]&&a[b]!==this;)++b;return!!a[b]});"function"!==typeof a.closest&&(a.closest=function(a){for(var b=this;b&&1===b.nodeType;){if(b.matches(a))return b;b=b.parentNode}return null})})(window.Element.prototype);
+
 /*!
 Element.getRootNode()
 */
-(function(c){function d(a){a=b(a);return 11===a.nodeType?d(a.host):a}function b(a){return a.parentNode?b(a.parentNode):a}"function"!==typeof c.getRootNode&&(c.getRootNode=function(a){return a&&a.composed?d(this):b(this)})})(Element.prototype);
+(function(c){function d(a){a=b(a);return a&&11===a.nodeType?d(a.host):a}function b(a){return a&&a.parentNode?b(a.parentNode):a}"function"!==typeof c.getRootNode&&(c.getRootNode=function(a){return a&&a.composed?d(this):b(this)})})(Element.prototype);
+
 /*!
+Element.isConnected()
+*/
+(function(prototype) {
+  if (!("isConnected" in prototype)) {
+    Object.defineProperty(prototype, 'isConnected', {
+      configurable: true,
+      enumerable: true,
+      get: function() {
+        var root = this.getRootNode({composed: true});
+        return root && root.nodeType === 9;
+      }
+    })
+  }
+})(Element.prototype);
+
+/*!
 Element.remove()
@@ -108,1 +125,24 @@ */
 
+/*!
+DOMTokenList
+*/
+(function(prototype){
+  try {
+    document.body.classList.add();
+  } catch (e) {
+    var originalAdd = prototype.add;
+    var originalRemove = prototype.remove;
+
+    prototype.add = function() {
+      for (var i = 0; i < arguments.length; i++) {
+        originalAdd.call(this, arguments[i]);
+      }
+    };
+
+    prototype.remove = function() {
+      for (var i = 0; i < arguments.length; i++) {
+        originalRemove.call(this, arguments[i]);
+      }
+    };
+  }
+}(DOMTokenList.prototype));

dist/esm/polyfills/index.js

 export function applyPolyfills() {
   var win = window;
-  /*!
-  es6-promise - a tiny implementation of Promises/A+.
-  Copyright (c) 2014 Yehuda Katz, Tom Dale, Stefan Penner and contributors (Conversion to ES6 API by Jake Archibald)
-  Licensed under MIT license
-  See https://raw.githubusercontent.com/stefanpenner/es6-promise/master/LICENSE
-  v4.2.4+314e4831
-  */
-  (win.ES6Promise=function(){function t(){var t=setTimeout;return function(){return t(r,1)}}function r(){for(var t=0;t<y;t+=2)(0,C[t])(C[t+1]),C[t]=void 0,C[t+1]=void 0;y=0}function e(t,r){var e=this,n=new this.constructor(o);void 0===n[O]&&_(n);var i=e._state;if(i){var s=arguments[i-1];g(function(){return v(i,n,s,e._result)})}else l(e,n,t,r);return n}function n(t){if(t&&"object"==typeof t&&t.constructor===this)return t;var r=new this(o);return u(r,t),r}function o(){}function i(t){try{return t.then}catch(t){return q.error=t,q}}function s(t,r,o){r.constructor===t.constructor&&o===e&&r.constructor.resolve===n?function(t,r){r._state===x?a(t,r._result):r._state===F?f(t,r._result):l(r,void 0,function(r){return u(t,r)},function(r){return f(t,r)})}(t,r):o===q?(f(t,q.error),q.error=null):void 0===o?a(t,r):"function"==typeof o?function(t,r,e){g(function(t){var n=!1,o=function(t,r,e,n){try{t.call(r,e,n)}catch(t){return t}}(e,r,function(e){n||(n=!0,r!==e?u(t,e):a(t,e))},function(r){n||(n=!0,f(t,r))},t._label);!n&&o&&(n=!0,f(t,o))},t)}(t,r,o):a(t,r)}function u(t,r){if(t===r)f(t,new TypeError("cannot resolve promise w/ itself"));else{var e=typeof r;null===r||"object"!==e&&"function"!==e?a(t,r):s(t,r,i(r))}}function c(t){t._onerror&&t._onerror(t._result),h(t)}function a(t,r){t._state===P&&(t._result=r,t._state=x,0!==t._subscribers.length&&g(h,t))}function f(t,r){t._state===P&&(t._state=F,t._result=r,g(c,t))}function l(t,r,e,n){var o=t._subscribers,i=o.length;t._onerror=null,o[i]=r,o[i+x]=e,o[i+F]=n,0===i&&t._state&&g(h,t)}function h(t){var r=t._subscribers,e=t._state;if(0!==r.length){for(var n,o,i=t._result,s=0;s<r.length;s+=3)n=r[s],o=r[s+e],n?v(e,n,o,i):o(i);t._subscribers.length=0}}function v(t,r,e,n){var o="function"==typeof e,i=void 0,s=void 0,c=void 0,l=void 0;if(o){try{i=e(n)}catch(t){q.error=t,i=q}if(i===q?(l=!0,s=i.error,i.error=null):c=!0,r===i)return void f(r,new TypeError("Cannot return same promise"))}else i=n,c=!0;r._state===P&&(o&&c?u(r,i):l?f(r,s):t===x?a(r,i):t===F&&f(r,i))}function _(t){t[O]=U++,t._state=void 0,t._result=void 0,t._subscribers=[]}var p,d=Array.isArray?Array.isArray:function(t){return"[object Array]"===Object.prototype.toString.call(t)},y=0,w=void 0,m=void 0,g=function(t,e){C[y]=t,C[y+1]=e,2===(y+=2)&&(m?m(r):T())},b=(p="undefined"!=typeof window?window:void 0)||{},A=b.MutationObserver||b.WebKitMutationObserver;b="undefined"==typeof self;var E,S,M,j="undefined"!=typeof Uint8ClampedArray&&"undefined"!=typeof importScripts&&"undefined"!=typeof MessageChannel,C=Array(1e3),T=void 0;T=A?(E=0,S=new A(r),M=document.createTextNode(""),S.observe(M,{characterData:!0}),function(){M.data=E=++E%2}):j?function(){var t=new MessageChannel;return t.port1.onmessage=r,function(){return t.port2.postMessage(0)}}():void 0===p&&"function"==typeof require?function(){try{var e=Function("return this")().require("vertx");return void 0!==(w=e.runOnLoop||e.runOnContext)?function(){w(r)}:t()}catch(r){return t()}}():t();var O=Math.random().toString(36).substring(2),P=void 0,x=1,F=2,q={error:null},U=0,D=function(){function t(t,r){this._instanceConstructor=t,this.promise=new t(o),this.promise[O]||_(this.promise),d(r)?(this._remaining=this.length=r.length,this._result=Array(this.length),0===this.length?a(this.promise,this._result):(this.length=this.length||0,this._enumerate(r),0===this._remaining&&a(this.promise,this._result))):f(this.promise,Error("Array Methods must be provided an Array"))}return t.prototype._enumerate=function(t){for(var r=0;this._state===P&&r<t.length;r++)this._eachEntry(t[r],r)},t.prototype._eachEntry=function(t,r){var u=this._instanceConstructor,c=u.resolve;c===n?(c=i(t))===e&&t._state!==P?this._settledAt(t._state,r,t._result):"function"!=typeof c?(this._remaining--,this._result[r]=t):u===K?(s(u=new u(o),t,c),this._willSettleAt(u,r)):this._willSettleAt(new u(function(r){return r(t)}),r):this._willSettleAt(c(t),r)},t.prototype._settledAt=function(t,r,e){var n=this.promise;n._state===P&&(this._remaining--,t===F?f(n,e):this._result[r]=e),0===this._remaining&&a(n,this._result)},t.prototype._willSettleAt=function(t,r){var e=this;l(t,void 0,function(t){return e._settledAt(x,r,t)},function(t){return e._settledAt(F,r,t)})},t}(),K=function(){function t(r){if(this[O]=U++,this._result=this._state=void 0,this._subscribers=[],o!==r){if("function"!=typeof r)throw new TypeError("Must pass a resolver fn as 1st arg");if(!(this instanceof t))throw new TypeError("Failed to construct 'Promise': Use the 'new' operator.");!function(t,r){try{r(function(r){u(t,r)},function(r){f(t,r)})}catch(r){f(t,r)}}(this,r)}}return t.prototype.catch=function(t){return this.then(null,t)},t.prototype.finally=function(t){var r=this.constructor;return this.then(function(e){return r.resolve(t()).then(function(){return e})},function(e){return r.resolve(t()).then(function(){throw e})})},t}();return K.prototype.then=e,K.all=function(t){return new D(this,t).promise},K.race=function(t){var r=this;return d(t)?new r(function(e,n){for(var o=t.length,i=0;i<o;i++)r.resolve(t[i]).then(e,n)}):new r(function(t,r){return r(new TypeError("Must pass array to race"))})},K.resolve=n,K.reject=function(t){var r=new this(o);return f(r,t),r},K._setScheduler=function(t){m=t},K._setAsap=function(t){g=t},K._asap=g,K.polyfill=function(){var t=void 0;if("undefined"!=typeof global)t=global;else if("undefined"!=typeof self)t=self;else try{t=Function("return this")()}catch(t){throw Error("polyfill failed")}var r=t.Promise;if(r){var e=null;try{e=Object.prototype.toString.call(r.resolve())}catch(t){}if("[object Promise]"===e&&!r.cast)return}t.Promise=K},K.Promise=K,K.polyfill(),K}());
 
@@ -32,2 +24,3 @@ var promises = [];
     !String.prototype.startsWith || !String.prototype.endsWith ||
+    (win.NodeList && !win.NodeList.prototype.forEach) ||
     !win.fetch ||
@@ -39,6 +32,3 @@ !checkIfURLIsSupported() ||
   }
-  if (!(win.CSS && win.CSS.supports && win.CSS.supports('color', 'var(--c)'))) {
-    promises.push(import('./css-shim.js'));
-  }
   return Promise.all(promises);
 }

dist/esm/polyfills/system.js

@@ -1,4 +0,5 @@
-/*
-* SystemJS 3.1.3
-*/
-!function(){var e,n="undefined"!=typeof self,t=n?self:global;if("undefined"!=typeof location){var r=(e=location.href.split("#")[0].split("?")[0]).lastIndexOf("/");-1!==r&&(e=e.slice(0,r+1))}var i=/\\/g,o="undefined"!=typeof Symbol,u=o&&Symbol.toStringTag,f=o?Symbol():"@";function c(){this[f]={}}var l,s=c.prototype;s.import=function(e,n){var t=this;return Promise.resolve(t.resolve(e,n)).then(function(e){var n=function e(n,t,r){var i=n[f][t];if(i)return i;var o=[],c=Object.create(null);u&&Object.defineProperty(c,u,{value:"Module"});var l=Promise.resolve().then(function(){return n.instantiate(t,r)}).then(function(e){if(!e)throw new Error("Module "+t+" did not instantiate");var r=e[1](function(e,n){i.h=!0;var t=!1;if("object"!=typeof e)e in c&&c[e]===n||(c[e]=n,t=!0);else for(var r in e){var u=e[r];r in c&&c[r]===u||(c[r]=u,t=!0)}if(t)for(var f=0;f<o.length;f++)o[f](c);return n},2===e[1].length?{import:function(e){return n.import(e,t)},meta:n.createContext(t)}:void 0);return i.e=r.execute||function(){},[e[0],r.setters||[]]}),s=l.then(function(r){return Promise.all(r[0].map(function(i,o){var u=r[1][o];return Promise.resolve(n.resolve(i,t)).then(function(r){var i=e(n,r,t);return Promise.resolve(i.I).then(function(){return u&&(i.i.push(u),!i.h&&i.I||u(i.n)),i})})})).then(function(e){i.d=e})});return s.catch(function(e){i.e=null,i.er=e}),i=n[f][t]={id:t,i:o,n:c,I:l,L:s,h:!1,d:void 0,e:void 0,er:void 0,E:void 0,C:void 0}}(t,e);return n.C||function(e,n){return n.C=function e(n,t,r){if(!r[t.id])return r[t.id]=!0,Promise.resolve(t.L).then(function(){return Promise.all(t.d.map(function(t){return e(n,t,r)}))})}(e,n,{}).then(function(){return function e(n,t,r){if(!r[t.id]){if(r[t.id]=!0,!t.e){if(t.er)throw t.er;return t.E?t.E:void 0}var i;return t.d.forEach(function(t){var o=e(n,t,r);o&&(i=i||[]).push(o)}),i?Promise.all(i).then(o):o()}function o(){try{var e=t.e.call(d);if(e)return e=e.then(function(){t.C=t.n,t.E=null}),t.E=t.E||e;t.C=t.n}catch(e){throw t.er=e,e}finally{t.L=t.I=void 0,t.e=null}}}(e,n,{})}).then(function(){return n.n})}(t,n)})},s.createContext=function(e){return{url:e}},s.register=function(e,n){l=[e,n]},s.getRegister=function(){var e=l;return l=void 0,e};var a,d=Object.freeze(Object.create(null));t.System=new c,"undefined"!=typeof window&&window.addEventListener("error",function(e){a=e.error});var v=s.register;s.register=function(e,n){a=void 0,v.call(this,e,n)},s.instantiate=function(e,n){var t=this;return new Promise(function(r,i){var o=document.createElement("script");o.charset="utf-8",o.async=!0,o.crossOrigin="anonymous",o.addEventListener("error",function(){i(new Error("Error loading "+e+(n?" from "+n:"")))}),o.addEventListener("load",function(){if(document.head.removeChild(o),a)return i(a),a=void 0;r(t.getRegister())}),o.src=e,document.head.appendChild(o)})},n&&"function"==typeof importScripts&&(s.instantiate=function(e){var n=this;return new Promise(function(t,r){try{importScripts(e)}catch(e){r(e)}t(n.getRegister())})}),s.resolve=function(n,t){var r=function(e,n){if(-1!==e.indexOf("\\")&&(e=e.replace(i,"/")),"/"===e[0]&&"/"===e[1])return n.slice(0,n.indexOf(":")+1)+e;if("."===e[0]&&("/"===e[1]||"."===e[1]&&("/"===e[2]||2===e.length&&(e+="/"))||1===e.length&&(e+="/"))||"/"===e[0]){var t,r=n.slice(0,n.indexOf(":")+1);if(t="/"===n[r.length+1]?"file:"!==r?(t=n.slice(r.length+2)).slice(t.indexOf("/")+1):n.slice(8):n.slice(r.length+("/"===n[r.length])),"/"===e[0])return n.slice(0,n.length-t.length-1)+e;for(var o=t.slice(0,t.lastIndexOf("/")+1)+e,u=[],f=-1,c=0;c<o.length;c++)-1!==f?"/"===o[c]&&(u.push(o.slice(f,c+1)),f=-1):"."===o[c]?"."!==o[c+1]||"/"!==o[c+2]&&c+2!==o.length?"/"===o[c+1]||c+1===o.length?c+=1:f=c:(u.pop(),c+=2):f=c;return-1!==f&&u.push(o.slice(f)),n.slice(0,n.length-t.length)+u.join("")}}(n,t||e);if(!r){if(-1!==n.indexOf(":"))return Promise.resolve(n);throw new Error('Cannot resolve "'+n+(t?'" from '+t:'"'))}return Promise.resolve(r)}}();
+/**
+ * SystemJS 4.0.2
+ * MANUAL PATCH: remove script.crossOrigin = "anonymous"
+ */
+!function(){var e="undefined"!=typeof self,n=e?self:global;var t;if("undefined"!=typeof document){var e=document.querySelector("base[href]");e&&(t=e.href)}if(!t&&"undefined"!=typeof location){var e=(t=location.href.split("#")[0].split("?")[0]).lastIndexOf("/");-1!==e&&(t=t.slice(0,e+1))}var r=/\\/g,o="undefined"!=typeof Symbol,i=o&&Symbol.toStringTag,c=o?Symbol():"@";function u(){this[c]={}}var s=u.prototype;var l;s.import=function(e,n){var t=this;return Promise.resolve(t.resolve(e,n)).then(function(e){var n=function e(n,t,r){var o=n[c][t];if(o)return o;var u=[],s=Object.create(null);i&&Object.defineProperty(s,i,{value:"Module"});var l=Promise.resolve().then(function(){return n.instantiate(t,r)}).then(function(e){if(!e)throw Error("Module "+t+" did not instantiate");var r=e[1](function(e,n){o.h=!0;var t=!1;if("object"!=typeof e)e in s&&s[e]===n||(s[e]=n,t=!0);else for(var n in e){var r=e[n];n in s&&s[n]===r||(s[n]=r,t=!0)}if(t)for(var e=0;e<u.length;e++)u[e](s);return n},2===e[1].length?{import:function(e){return n.import(e,t)},meta:n.createContext(t)}:void 0);return o.e=r.execute||function(){},[e[0],r.setters||[]]});var f=l.then(function(r){return Promise.all(r[0].map(function(o,i){var c=r[1][i];return Promise.resolve(n.resolve(o,t)).then(function(r){var o=e(n,r,t);return Promise.resolve(o.I).then(function(){return c&&(o.i.push(c),!o.h&&o.I||c(o.n)),o})})})).then(function(e){o.d=e})});return f.catch(function(e){o.e=null,o.er=e}),o=n[c][t]={id:t,i:u,n:s,I:l,L:f,h:!1,d:void 0,e:void 0,er:void 0,E:void 0,C:void 0}}(t,e);return n.C||function(e,n){return n.C=function e(n,t,r){if(!r[t.id])return r[t.id]=!0,Promise.resolve(t.L).then(function(){return Promise.all(t.d.map(function(t){return e(n,t,r)}))})}(e,n,{}).then(function(){return function e(n,t,r){if(r[t.id])return;if(r[t.id]=!0,!t.e){if(t.er)throw t.er;return t.E?t.E:void 0}var o;return t.d.forEach(function(t){{var i=e(n,t,r);i&&(o=o||[]).push(i)}}),o?Promise.all(o).then(i):i();function i(){try{var e=t.e.call(f);if(e)return e=e.then(function(){t.C=t.n,t.E=null}),t.E=t.E||e;t.C=t.n}catch(e){throw t.er=e,e}finally{t.L=t.I=void 0,t.e=null}}}(e,n,{})}).then(function(){return n.n})}(t,n)})},s.createContext=function(e){return{url:e}},s.register=function(e,n){l=[e,n]},s.getRegister=function(){var e=l;return l=void 0,e};var f=Object.freeze(Object.create(null));n.System=new u;var d=s.register;s.register=function(e,n){d.call(this,e,n)},s.instantiate=function(e,n){var t=this;return".json"===e.substr(-5)?fetch(e).then(function(e){return e.text()}).then(function(e){return[[],function(n){return{execute:function(){n("default",JSON.parse(e))}}}]}):new Promise(function(r,o){var i;function c(n){n.filename===e&&(i=n.error)}window.addEventListener("error",c);var u=document.createElement("script");u.charset="utf-8",u.async=!0,u.addEventListener("error",function(){window.removeEventListener("error",c),o(Error("Error loading "+e+(n?" from "+n:"")))}),u.addEventListener("load",function(){window.removeEventListener("error",c),document.head.removeChild(u),i?o(i):r(t.getRegister())}),u.src=e,document.head.appendChild(u)})},e&&"function"==typeof importScripts&&(s.instantiate=function(e){var n=this;return new Promise(function(t,r){try{importScripts(e)}catch(e){r(e)}t(n.getRegister())})}),s.resolve=function(e,n){var o=function(e,n){if(-1!==e.indexOf("\\")&&(e=e.replace(r,"/")),"/"===e[0]&&"/"===e[1])return n.slice(0,n.indexOf(":")+1)+e;if("."===e[0]&&("/"===e[1]||"."===e[1]&&("/"===e[2]||2===e.length&&(e+="/"))||1===e.length&&(e+="/"))||"/"===e[0]){var t=n.slice(0,n.indexOf(":")+1);var r;if(r="/"===n[t.length+1]?"file:"!==t?(r=n.slice(t.length+2)).slice(r.indexOf("/")+1):n.slice(8):n.slice(t.length+("/"===n[t.length])),"/"===e[0])return n.slice(0,n.length-r.length-1)+e;var o=r.slice(0,r.lastIndexOf("/")+1)+e,i=[];var c=-1;for(var e=0;e<o.length;e++)-1!==c?"/"===o[e]&&(i.push(o.slice(c,e+1)),c=-1):"."===o[e]?"."!==o[e+1]||"/"!==o[e+2]&&e+2!==o.length?"/"===o[e+1]||e+1===o.length?e+=1:c=e:(i.pop(),e+=2):c=e;return-1!==c&&i.push(o.slice(c)),n.slice(0,n.length-r.length)+i.join("")}}(e,n||t);if(!o){if(-1!==e.indexOf(":"))return Promise.resolve(e);throw Error('Cannot resolve "'+e+(n?'" from '+n:'"'))}return Promise.resolve(o)}}();

dist/loader/package.json

@@ -9,3 +9,4 @@ {
   "es2015": "./index.es2017.mjs",
-  "es2017": "./index.es2017.mjs"
+  "es2017": "./index.es2017.mjs",
+  "unpkg": "./cdn.js"
 }

dist/mycomponent.js

@@ -16,4 +16,5 @@
   scriptElm.src = url + '/mycomponent.esm.js';
+  warn.push(scriptElm.outerHTML);
+  scriptElm.setAttribute('data-stencil-namespace', 'mycomponent');
   doc.head.appendChild(scriptElm);
-  warn.push(scriptElm.outerHTML);
 
@@ -23,4 +24,5 @@ scriptElm = doc.createElement('script');
   scriptElm.src = url + '/mycomponent.js';
+  warn.push(scriptElm.outerHTML);
+  scriptElm.setAttribute('data-stencil-namespace', 'mycomponent');
   doc.head.appendChild(scriptElm);
-  warn.push(scriptElm.outerHTML);
 
@@ -27,0 +29,0 @@ console.warn(warn.join('\n'));

dist/mycomponent/mycomponent.esm.js

@@ -1,1 +0,1 @@
-import{p as e,b as a}from"./p-e28d03f2.js";e().then(e=>a([["p-wxlhcexv",[[1,"genomic-card",{org_names:[1],diagonal_svg:[2],all_data:[1],gene:[1],size:[1],show_data:[32],allSgrna:[32],genomeRef:[32],allSize:[32],subSgrna:[32],selectedSection:[32],orgSelected:[32],refSelected:[32],sgrnaSelected:[32],sizeSelected:[32]},[[0,"changeOrgCard","handleChangeOrg"],[8,"changeOrgRefSgrna","handleChangeOrgRefSgrna"],[0,"changeRefCard","handleChangeRef"],[8,"sectionSelected","handleSectionSelected"],[8,"sectionSelectedSG","handleSectionSelectedSG"],[0,"mmsb-select.select","handleChangeSgrna"]]],[1,"mmsb-select",{data:[16],multiple:[4],label:[1],selected:[16],is_open:[4],height:[1],internal_data:[32],search_content:[32],getSelected:[64]}]]]],{resourcesUrl:e}));
+import{p as e,b as a}from"./p-95032717.js";e().then(e=>a([["p-iuvsmail",[[1,"mmsb-select",{data:[16],multiple:[4],label:[1],selected:[16],is_open:[4],height:[1],internal_data:[32],search_content:[32],getSelected:[64]}]]],["p-rhexrpvt",[[1,"genomic-card",{org_names:[1],all_data:[1],size:[1],all_data_json:[16],size_json:[16],orgSelected:[1,"org-selected"],refSelected:[1,"ref-selected"],genomeRef:[16],subSgrna:[16],allSgrna:[16],sgrnaSelected:[1,"sgrna-selected"],diagonal_svg:[2],show_data:[16],sizeSelected:[2,"size-selected"],selectedSection:[2,"selected-section"],gene:[1],error_msg:[1],state:[32]},[[0,"changeOrgCard","handleChangeOrg"],[0,"changeRefCard","handleChangeRef"],[0,"mmsb-select.select","handleChangeSgrna"],[8,"sectionSelected","handleSectionSelected"],[8,"sectionSelectedSG","handleSectionSelectedSG"]]]]]],e));

dist/types/components.d.ts

@@ -0,1 +1,2 @@
+/* eslint-disable */
 /* tslint:disable */
@@ -13,7 +14,19 @@ /**
   interface GenomicCard {
+    'allSgrna': string[];
     'all_data': string;
+    'all_data_json': {};
     'diagonal_svg': number;
+    'error_msg': string;
     'gene': string;
+    'genomeRef': string[];
+    'orgSelected': string;
     'org_names': string;
+    'refSelected': string;
+    'selectedSection': number;
+    'sgrnaSelected': string;
+    'show_data': {};
     'size': string;
+    'sizeSelected': number;
+    'size_json': {};
+    'subSgrna': string[];
   }
@@ -36,12 +49,23 @@ }
 declare namespace LocalJSX {
-  interface GenomicCard extends JSXBase.HTMLAttributes<HTMLGenomicCardElement> {
+  interface GenomicCard {
+    'allSgrna'?: string[];
     'all_data'?: string;
+    'all_data_json'?: {};
     'diagonal_svg'?: number;
+    'error_msg'?: string;
     'gene'?: string;
+    'genomeRef'?: string[];
     'onChangeOrgCard'?: (event: CustomEvent<any>) => void;
     'onChangeRefCard'?: (event: CustomEvent<any>) => void;
-    'onChangeSgrnaCard'?: (event: CustomEvent<any>) => void;
     'onSgDataSection'?: (event: CustomEvent<any>) => void;
+    'orgSelected'?: string;
     'org_names'?: string;
+    'refSelected'?: string;
+    'selectedSection'?: number;
+    'sgrnaSelected'?: string;
+    'show_data'?: {};
     'size'?: string;
+    'sizeSelected'?: number;
+    'size_json'?: {};
+    'subSgrna'?: string[];
   }
@@ -59,3 +83,5 @@
   export namespace JSX {
-    interface IntrinsicElements extends LocalJSX.IntrinsicElements {}
+    interface IntrinsicElements {
+      'genomic-card': LocalJSX.GenomicCard & JSXBase.HTMLAttributes<HTMLGenomicCardElement>;
+    }
   }
@@ -62,0 +88,0 @@ }

dist/types/components/my-component/my-component.d.ts

@@ -5,25 +5,21 @@ import { EventEmitter } from '../../stencil.core';
     private element;
-    show_data: any;
-    allSgrna: string[];
+    org_names: string;
+    all_data: string;
+    size: string;
+    all_data_json: {};
+    size_json: {};
+    orgSelected: string;
+    refSelected: string;
     genomeRef: string[];
-    allSize: Object;
     subSgrna: string[];
-    selectedSection: number;
-    orgSelected: string;
-    refSelected: string;
+    allSgrna: string[];
     sgrnaSelected: string;
+    diagonal_svg: number;
+    show_data: {};
     sizeSelected: number;
-    org_names: string;
-    diagonal_svg: number;
-    all_data: string;
+    selectedSection: number;
     gene: string;
-    size: string;
+    state: string;
+    error_msg: string;
     constructor();
-    handleChangeOrg(event: CustomEvent): void;
-    handleChangeOrgRefSgrna(event: CustomEvent): void;
-    updateDataOrg(ref?: any): void;
-    handleChangeRef(event: CustomEvent): void;
-    handleSectionSelected(event: CustomEvent): void;
-    handleSectionSelectedSG(event: CustomEvent): void;
-    handleChangeSgrna(event: CustomEvent): void;
     changeOrgCard: EventEmitter;
@@ -33,19 +29,16 @@ emitOrgChange(event: Event): void;
     emitRefChange(event: Event): void;
-    changeSgrnaCard: EventEmitter;
-    emitSgrnaChange(event: Event): void;
     sgDataSection: EventEmitter;
     emitsgData(event: Object, min: number, max: number): void;
-    /**
-    * Set all coordinates of a given sgRNA if the state is not undefined
-    */
-    showCoord(): string;
-    /**
-    * Display the genome by a blue circle
-    * @param {string} ref The selector where the tooltip must appear
-    * @param {string} target The selector of the tooltip
-    */
+    handleChangeOrg(event: CustomEvent): void;
+    handleChangeRef(event: CustomEvent): void;
+    handleChangeSgrna(event: CustomEvent): void;
+    handleSectionSelected(event: CustomEvent): void;
+    handleSectionSelectedSG(event: CustomEvent): void;
+    componentWillLoad(): void;
+    componentDidRender(): void;
     styleHelp(ref: string, target: string): void;
-    componentDidUpdate(): void;
-    componentDidLoad(): void;
-    render(): any[];
+    updateDataOrg(ref?: any): void;
+    showCoordHeader(): string;
+    showCoordText(): string;
+    render(): string | any[];
 }

dist/types/stencil.core.d.ts

@@ -463,2 +463,3 @@ /**
     name?: string;
+    referrerPolicy?: ReferrerPolicy;
     sandbox?: string;
@@ -1314,10 +1315,10 @@ scrolling?: string;
 export interface VNode {
-  $tag$?: string | number | Function;
-  $key$?: string | number;
-  $text$?: string;
-  $children$?: VNode[];
+  $flags$: number;
+  $tag$: string | number | Function;
+  $elm$: any;
+  $text$: string;
+  $children$: VNode[];
   $attrs$?: any;
   $name$?: string;
-  $flags$: number;
-  $elm$?: any;
+  $key$?: string | number;
 }
@@ -1324,0 +1325,0 @@

package.json

 {
   "name": "@mmsb/genomic-card",
-  "version": "2.0.4",
+  "version": "3.0.0",
   "description": "Stencil Component Starter",
@@ -20,3 +20,3 @@ "module": "dist/esm/index.js",
   "dependencies": {
-    "@mmsb/mmsb-select": "0.0.8",
+    "@mmsb/mmsb-select": "^0.0.9",
     "@types/d3": "^5.7.2",
@@ -31,3 +31,15 @@ "d3": "^5.9.7",
   },
-  "license": "MIT"
+  "license": "MIT",
+  "directories": {
+    "doc": "docs"
+  },
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/MMSB-MOBI/genomic-card.git"
+  },
+  "author": "S.Lematre, C.Hilpert",
+  "bugs": {
+    "url": "https://github.com/MMSB-MOBI/genomic-card/issues"
+  },
+  "homepage": "https://github.com/MMSB-MOBI/genomic-card#readme"
 }

New alerts

Major refactor

Supply chain risk

Package has recently undergone a major refactor. It may be unstable or indicate significant internal changes. Use caution when updating to versions that include significant changes.

Found 1 instance in 1 package

New author

Supply chain risk

A new npm collaborator published a version of the package for the first time. New collaborators are usually benign additions to a project, but do indicate a change to the security surface area of a package.

Found 1 instance in 1 package

Uses eval

Supply chain risk

Package uses dynamic code execution (e.g., eval()), which is a dangerous practice. This can prevent the code from running in certain environments and increases the risk that the code may contain exploits or malicious behavior.

Found 1 instance in 1 package

Fixed alerts

Uses eval

Supply chain risk

Package uses dynamic code execution (e.g., eval()), which is a dangerous practice. This can prevent the code from running in certain environments and increases the risk that the code may contain exploits or malicious behavior.

Found 1 instance in 1 package

Long strings

Supply chain risk

Contains long string literals, which may be a sign of obfuscated or packed code.

Found 1 instance in 1 package

No contributors or author data

Maintenance

Package does not specify a list of contributors or an author in package.json.

Found 1 instance in 1 package

No bug tracker

Maintenance

Package does not have a linked bug tracker in package.json.

Found 1 instance in 1 package

No repository

Supply chain risk

Package does not have a linked source code repository. Without this field, a package will have no reference to the location of the source code use to generate the package.

Found 1 instance in 1 package

No website

Quality

Package does not have a website.

Found 1 instance in 1 package

Improved metrics

Number of package files

75

increased by13.64%

Number of low maintenance alerts

1

decreased by-50%

Number of low supply chain risk alerts

9

decreased by-65.38%

Worsened metrics

Total package byte prevSize

1436754

decreased by-17.05%

Lines of code

26334

decreased by-15.89%

Dependency changes

• + Added@mmsb/mmsb-select@0.0.9(transitive)

• - Removed@mmsb/mmsb-select@0.0.8(transitive)

• Updated@mmsb/mmsb-select@^0.0.9