more use of css to style svg, fixes, better link w complex

colin-combe · Jul 8, 2020 · 0458642 · 0458642
1 parent b1b6c3f
commit 0458642
Show file tree

Hide file tree

Showing 20 changed files with 696 additions and 382 deletions.
diff --git a/README.md b/README.md
@@ -48,11 +48,7 @@ npm run build-dev
 
 4.  Choose how to annotate proteins (this will prob, because of https://github.com/MICommunity/ComplexViewer/issues/80):
 
-                myComplexViewer.setAnnotations("MI features");	//show features from MI data 
-                myComplexViewer.setAnnotations("UniprotKB");	//show annotations from uniprot
-                myComplexViewer.setAnnotations("SuperFamily");	//from SuperFamily
-                myComplexViewer.setAnnotations("None");			//no annotations
-                myComplexViewer.setAnnotations("Interactor");	//colour bars and circles according to interactor (may help indicate stoichiometry)
+                // todo doc - see index.html for example, old way of doing should still be working
 
 5. 	To change dataset without creating a new instance of the app, 
     call the clear function, then call the readMijson() function with the new data:

diff --git a/css/style.css b/css/style.css
@@ -57,54 +57,54 @@
 }
 
 /*tables*/
-table {
-    width: 100%;
-    font-size: 0.9em;
-    left: auto;
-    position: relative;
-    margin-left: auto;
-    margin-right: auto;
-    border-collapse: collapse;
-    /*
-        background-color: rgba(255, 255, 255, 1);
-    */
-    text-align: left;
-}
+/*table {*/
+/*    width: 100%;*/
+/*    font-size: 0.9em;*/
+/*    left: auto;*/
+/*    position: relative;*/
+/*    margin-left: auto;*/
+/*    margin-right: auto;*/
+/*    border-collapse: collapse;*/
+/*    !**/
+/*        background-color: rgba(255, 255, 255, 1);*/
+/*    *!*/
+/*    text-align: left;*/
+/*}*/
 
-thead {
-    margin-top: 10px;
-    margin-bottom: 10px;
-}
+/*thead {*/
+/*    margin-top: 10px;*/
+/*    margin-bottom: 10px;*/
+/*}*/
 
-th {
-    padding-left: 5px;
-    padding-right: 5px;
-    vertical-align: middle;
-    height: 30px;
-}
+/*th {*/
+/*    padding-left: 5px;*/
+/*    padding-right: 5px;*/
+/*    vertical-align: middle;*/
+/*    height: 30px;*/
+/*}*/
 
-td {
-    padding-left: 5px;
-    padding-right: 5px;
-    vertical-align: middle;
-    text-align: left;
-}
+/*td {*/
+/*    padding-left: 5px;*/
+/*    padding-right: 5px;*/
+/*    vertical-align: middle;*/
+/*    text-align: left;*/
+/*}*/
 
-th:first-child {
-    padding-left: 10px;
-}
+/*th:first-child {*/
+/*    padding-left: 10px;*/
+/*}*/
 
-th:last-child {
-    padding-right: 10px;
-}
+/*th:last-child {*/
+/*    padding-right: 10px;*/
+/*}*/
 
-td:first-child {
-    padding-left: 10px;
-}
+/*td:first-child {*/
+/*    padding-left: 10px;*/
+/*}*/
 
-td:last-child {
-    padding-right: 10px;
-}
+/*td:last-child {*/
+/*    padding-right: 10px;*/
+/*}*/
 
 /* fa */
 
@@ -152,19 +152,19 @@ body, input, select, textarea, button {
     color: #fff;
 }
 
-.tableContainer a {
-    color: #091D42;
-    text-decoration: underline;
-    -webkit-transition: all 200ms ease-in-out;
-    -moz-transition: all 200ms ease-in-out;
-    -o-transition: all 200ms ease-in-out;
-    transition: all 200ms ease-in-out;
-}
+/*.tableContainer a {*/
+/*    color: #091D42;*/
+/*    text-decoration: underline;*/
+/*    -webkit-transition: all 200ms ease-in-out;*/
+/*    -moz-transition: all 200ms ease-in-out;*/
+/*    -o-transition: all 200ms ease-in-out;*/
+/*    transition: all 200ms ease-in-out;*/
+/*}*/
 
-.tableContainer a:hover {
-    color: #ffffff !important;
-    background-color: #091D42;
-}
+/*.tableContainer a:hover {*/
+/*    color: #ffffff !important;*/
+/*    background-color: #091D42;*/
+/*}*/
 
 
 #main {
@@ -184,49 +184,6 @@ body, input, select, textarea, button {
     padding-left: 10px;
 }
 
-
-/*
-#networkDiv {
-    width:100%;
-    height:100%;
-    display:block;
-}
-*/
-
-/*.bar rect {
-    fill: steelblue;
-}
-
-.bar text {
-    fill: #fff;
-}
-
-.resize path {
-    fill: #888;
-    stroke: #000;
-    stroke-width: 2px;
-}
-
-.axis path, .axis line {
-    fill: none;
-    stroke: #000;
-    stroke-width: 1px;
-}
-
-.panelInner th {
-    font-weight: 400;
-    color: #039;
-    height: 30px;
-}
-
-.panelInner thead td {
-    color: #091D42;
-}
-
-.panelInner td, .helpPanel td {
-    color: #777;
-}*/
-
 .controls {
     background: #ecedf2;
     color: #091D42;
@@ -240,33 +197,27 @@ body, input, select, textarea, button {
 /*    margin-right: 0.5em;*/
 /*}*/
 
-label.horizontalFlow input[type=number] {
-    margin-left: 0.2em;
-}
-
-/* See http://jsfiddle.net/7jx02upg/1/ */
-label.horizontalFlow input[type=radio], label.horizontalFlow input[type=checkbox] {
-    /*vertical-align: normal;*/
-}
+/*label.horizontalFlow input[type=number] {*/
+/*    margin-left: 0.2em;*/
+/*}*/
 
-/* <label class='horizontalFlow'><span class='noBreak'>stuff you dont want split over multiple lines</span></label><more labels n spans...>
+/*!* See http://jsfiddle.net/7jx02upg/1/ *!*/
+/*label.horizontalFlow input[type=radio], label.horizontalFlow input[type=checkbox] {*/
+/*    !*vertical-align: normal;*!*/
+/*}*/
 
-/* span.noBreak asks for no line-breaks internally */
+/*!* <label class='horizontalFlow'><span class='noBreak'>stuff you dont want split over multiple lines</span></label><more labels n spans...>*/
 
-span.noBreak select {
-    margin-left: 0.5em;
-}
+/*!* span.noBreak asks for no line-breaks internally *!*/
 
-/* and then put spaces after labels to give a known place for content to break */
+/*span.noBreak select {*/
+/*    margin-left: 0.5em;*/
+/*}*/
 
-A.btn {
-    text-decoration: none;
-}
+/*!* and then put spaces after labels to give a known place for content to break *!*/
 
-/* For use with Split.js */
+/*A.btn {*/
+/*    text-decoration: none;*/
+/*}*/
 
-.btn:disabled {
-    color: gray;
-    border-color: gray;
-}
 
diff --git a/data/index.js b/data/index.js
@@ -1,5 +1,10 @@
 // eslint-disable-next-line no-unused-vars
 const exampleIndex = [
+    {
+        "ac": "CPX-1920",
+        "name": "~CPX-1920",
+        "url": "https://www.ebi.ac.uk/complexportal/complex/CPX-1920",
+    },
     {
         "ac": "EBI-9008420",
         "name": "Hemoglobin HbA complex",
@@ -10,11 +15,6 @@ const exampleIndex = [
         "name": "EBI-12598622",
         "url": "https://ebi-intact.github.io/intact-view/details/interaction/EBI-12598622",
     },
-    {
-        "ac": "CPX-1920",
-        "name": "~CPX-1920",
-        "url": "https://www.ebi.ac.uk/complexportal/complex/CPX-1920",
-    },
     {
         "ac": "EBI-4371590",
         "name": "EBI-4371590",

diff --git a/dist/complexviewer.js b/dist/complexviewer.js
diff --git a/index.html b/index.html
@@ -168,7 +168,7 @@ <h1><a href="https://doi.org/10.1093/bioinformatics/btx497" target="_blank"
     for (let example of exampleIndex) {
         const dataSetsSelect = document.getElementById("dataSets");
         const opt = document.createElement("option");
-        opt.value = "./data/" + example.ac + ".json";
+        opt.value = example.ac;
         opt.innerHTML = example.name;
         dataSetsSelect.appendChild(opt);
     }
@@ -178,7 +178,7 @@ <h1><a href="https://doi.org/10.1093/bioinformatics/btx497" target="_blank"
     function loadData() {
         cv.clear();
         const dataSetsSelect = document.getElementById("dataSets");
-        const path = dataSetsSelect.options[dataSetsSelect.selectedIndex].value;
+        const path = "./data/" + dataSetsSelect.options[dataSetsSelect.selectedIndex].value + ".json";
         d3.json(path, function (data) {
             cv.readMIJSON(data);//, matrixExpansion);
             resetAnnotations();
@@ -196,17 +196,88 @@ <h1><a href="https://doi.org/10.1093/bioinformatics/btx497" target="_blank"
         cv.showAnnotations(checkbox.value, checkbox.checked);
     }
 
-    function setAnnotations(checkbox){
+    function setAnnotations(checkbox) {
         cv.showAnnotations(checkbox.value, checkbox.checked);
     }
 
     function exportSVG() {
         // todo
-        const xml = cv.getSVG();
-        let xmlAsUrl = "data:image/svg;filename=xiNET-output.svg,";
-        xmlAsUrl += encodeURIComponent(xml);
-        alert("Downloading as SVG. You may need to change the file extension to '.svg' before opening.");
-        window.open(xmlAsUrl, "xiNET-output.svg");
+        const svgXML = cv.getSVG();
+        const dataSetsSelect = document.getElementById("dataSets");
+        download(svgXML, "application/svg", dataSetsSelect.options[dataSetsSelect.selectedIndex].value + ".svg");
+    }
+
+    function download(content, contentType, fileName) {
+        var oldToNewTypes = {
+            "application/svg": "image/svg+xml;charset=utf-8",
+            "plain/text": "plain/text;charset=utf-8",
+        };
+        var newContentType = oldToNewTypes[contentType] || contentType;
+
+        function dataURItoBlob(binary) {
+            var array = [];
+            var te;
+
+            try {
+                te = new TextEncoder("utf-8");
+            } catch (e) {
+                te = undefined;
+            }
+
+            if (te) {
+                array = te.encode(binary); // html5 encoding api way
+            } else {
+                // https://stackoverflow.com/a/18729931/368214
+                // fixes unicode bug
+                for (var i = 0; i < binary.length; i++) {
+                    var charcode = binary.charCodeAt(i);
+                    if (charcode < 0x80) array.push(charcode);
+                    else if (charcode < 0x800) {
+                        array.push(0xc0 | (charcode >> 6),
+                            0x80 | (charcode & 0x3f));
+                    } else if (charcode < 0xd800 || charcode >= 0xe000) {
+                        array.push(0xe0 | (charcode >> 12),
+                            0x80 | ((charcode >> 6) & 0x3f),
+                            0x80 | (charcode & 0x3f));
+                    }
+                    // surrogate pair
+                    else {
+                        i++;
+                        // UTF-16 encodes 0x10000-0x10FFFF by
+                        // subtracting 0x10000 and splitting the
+                        // 20 bits of 0x0-0xFFFFF into two halves
+                        charcode = 0x10000 + (((charcode & 0x3ff) << 10) |
+                            (binary.charCodeAt(i) & 0x3ff));
+                        array.push(0xf0 | (charcode >> 18),
+                            0x80 | ((charcode >> 12) & 0x3f),
+                            0x80 | ((charcode >> 6) & 0x3f),
+                            0x80 | (charcode & 0x3f));
+                    }
+                }
+            }
+
+            return new Blob([new Uint8Array(array)], {
+                type: newContentType
+            });
+        }
+
+        var blob = dataURItoBlob(content);
+
+        if (navigator.msSaveOrOpenBlob) {
+            navigator.msSaveOrOpenBlob(blob, fileName);
+        } else {
+            var a = document.createElement("a");
+            a.href = window.URL.createObjectURL(blob);
+            // Give filename you wish to download
+            a.download = fileName;
+            a.style.display = "none";
+            document.body.appendChild(a);
+            a.click();
+            document.body.removeChild(a);
+            window.URL.revokeObjectURL(a.href); // clear up url reference to blob so it can be g.c.'ed
+        }
+
+        blob = null;
     }
 
     //]]>