From cd1ede511e044e92459a21ba43e87956e5b10297 Mon Sep 17 00:00:00 2001 From: Tony Boyles Date: Wed, 12 Dec 2018 11:43:43 -0500 Subject: [PATCH 01/22] Made Recall interface a little less terrible. Added Stash deletion. --- index.html | 49 ++++++++++++++++++++++++++++++++++++------------- 1 file changed, 36 insertions(+), 13 deletions(-) diff --git a/index.html b/index.html index f85a5be4..21a9e031 100644 --- a/index.html +++ b/index.html @@ -392,14 +392,12 @@
Recall Stashes
-
-
- -
-
+
- + + +
@@ -584,20 +582,31 @@ }); $('#stash-data').on('click', function(){ - localforage.setItem('stash-'+$('#stash-name').val(), JSON.stringify(session)); + localforage.setItem('stash-'+Date.now()+'-'+$('#stash-name').val(), JSON.stringify(session)); }); + var table; $('#RecallDataTab').on('click', function(){ + table = new Tabulator('#recall-stashes-available', { + height: '100%', + layout: "fitColumns", + selectable: 1, + columns: [ + {title:"Name", field:"name"}, + {title:"Date", field:"date", align:"right", sorter:"date"} + ] + }); localforage.keys().then(function(keys){ - var h = $('#recall-stashes-available'); + var rows = []; keys.forEach(function(k){ if(!k.substring(0, 5) === 'stash') return; - $('' + k.slice(6) + '').on('click', function(){ - localforage.getItem($(this).data('stash')).then(function(json){ - app.applySession(JSON.parse(json)); - }); - }).appendTo(h); + rows.push({ + fullname: k, + name: k.substring(20), + date: (new Date(parseFloat(k.substring(6,19)))).toISOString() + }); }); + table.setData(rows); $('#session-recall-modal').modal('show'); }).catch(function(err){ // This code runs if there were any errors @@ -605,6 +614,20 @@ }); }); + $('#recall-delete-stash').on('click', function(){ + var key = table.getSelectedData()[0].fullname; + localforage.removeItem(key).then(function(){ + alertify.success('That stash has been deleted.'); + }); + }); + + $('#recall-load-stash').on('click', function(){ + var key = table.getSelectedData()[0].fullname; + localforage.getItem(key).then(function(json){ + app.applySession(JSON.parse(json)); + $('#session-recall-modal').modal('hide'); + }); + }); $('#OpenTab').on('change', function(e){ if(e.target.files.length > 0){ From 0021164f06bd78a59e8a8f0654ddef7608c48d0a Mon Sep 17 00:00:00 2001 From: Tony Boyles Date: Wed, 12 Dec 2018 14:23:49 -0500 Subject: [PATCH 02/22] Reordered index for slightly more orderly loading --- index.html | 77 +++++++++++++++++++++++++----------------------------- 1 file changed, 35 insertions(+), 42 deletions(-) diff --git a/index.html b/index.html index 21a9e031..2f8792be 100644 --- a/index.html +++ b/index.html @@ -476,31 +476,15 @@ $(function(){ 'use strict'; - $.getJSON('package.json', function(r){ - app.manifest = r; - $('#version').html(r.version); - }); - - $.get('.git/HEAD', function(ref){ - var branch = ref.split('/').pop(); - $('#branch') - .attr('href', 'https://github.com/CDCgov/MicrobeTRACE/tree/' + branch) - .text(branch); - $.get('.git/' + ref.split(' ').pop(), function(r){ - $('#commit') - .attr('href', 'https://github.com/CDCgov/MicrobeTrace/commit/' + r) - .text(r.slice(0,7)); + // Before anything else gets done, ask the user to accept the legal agreement + if(!localStorage.getItem('licenseAccepted')){ + $('#acceptAgreement').on('click', function(){ + localStorage.setItem('licenseAccepted', new Date()); + }); + $('#licenseAgreement').modal({ + backdrop: 'static', + keyboard: false }); - }).fail(function(){ - $('#branch').parent().remove(); - }); - - if(window.navigator.onLine){ - $('#HelpTab') - .removeClass('viewbutton') - .attr('href', 'https://github.com/CDCgov/MicrobeTrace/wiki') - .attr('target', '_blank'); - $('.ifOnline').show(); } if ('serviceWorker' in window.navigator) { @@ -529,24 +513,6 @@ app.launchView('files'); - // Before anything else gets done, ask the user to accept the legal agreement - if(!localStorage.getItem('licenseAccepted')){ - $('#acceptAgreement').on('click', function(){ - // Set that agreement in localStorage - localStorage.setItem('licenseAccepted', new Date()); - }); - // $('#rejectAgreement').on('click', function(){ - // // If you don't agree, no app for you! - // //TODO: Show a message indicating you are not permitted to use the app without agreeing to the terms of use. - // window.location.href = "https://www.cdc.gov"; - // }); - // No hacking around the agreement. - $('#licenseAgreement').modal({ - backdrop: 'static', - keyboard: false - }); - } - // Let's set up the Nav Bar $('#FileTab').on('click', function(){ $('#exit-button').on('click', app.reset); @@ -902,6 +868,33 @@ } }); + if(window.navigator.onLine){ + $('#HelpTab') + .removeClass('viewbutton') + .attr('href', 'https://github.com/CDCgov/MicrobeTrace/wiki') + .attr('target', '_blank'); + $('.ifOnline').show(); + } + + $.getJSON('package.json', function(r){ + app.manifest = r; + $('#version').html(r.version); + }); + + $.get('.git/HEAD', function(ref){ + var branch = ref.split('/').pop(); + $('#branch') + .attr('href', 'https://github.com/CDCgov/MicrobeTRACE/tree/' + branch) + .text(branch); + $.get('.git/' + ref.split(' ').pop(), function(r){ + $('#commit') + .attr('href', 'https://github.com/CDCgov/MicrobeTrace/commit/' + r) + .text(r.slice(0,7)); + }); + }).fail(function(){ + $('#branch').parent().remove(); + }); + $('#group-key-wrapper').on('contextmenu', function(e){ e.preventDefault(); $('#group-key-context').css({ From 4478a3ef70d6fe0385f55de3a293138110274e60 Mon Sep 17 00:00:00 2001 From: Tony Boyles Date: Wed, 12 Dec 2018 14:25:36 -0500 Subject: [PATCH 03/22] Implemented Autostashing (resolves #72) --- components/files.html | 41 +++++++++++++++++++++++++++++++++++++++++ index.html | 39 ++++++++++++++++++++++----------------- 2 files changed, 63 insertions(+), 17 deletions(-) diff --git a/components/files.html b/components/files.html index 1b0e9602..027b642f 100644 --- a/components/files.html +++ b/components/files.html @@ -172,6 +172,21 @@ +
+
+ +
+
+
+ + +
+
+
@@ -438,6 +453,19 @@ } }); + $('#stash-auto-yes').parent().on('click', function(){ + localStorage.setItem('stash-auto', 'true'); + }); + + if(localStorage.getItem('stash-auto') === 'true'){ + $('#stash-auto-yes').parent().trigger('click'); + } + + $('#stash-auto-no').parent().on('click', function(){ + if(temp.autostash) clearInterval(temp.autostash.interval); + localStorage.setItem('stash-auto', 'false'); + }); + if(localStorage.getItem('default-View')){ $('#default-View').val(localStorage.getItem('default-View')); } @@ -883,6 +911,19 @@ }] }, true); } + if(localStorage.getItem('stash-auto') === 'true'){ + temp.autostash = { + time: Date.now(), + interval: setInterval(function(){ + var newTime = Date.now(); + localforage.setItem('stash-' + newTime + '-autostash', JSON.stringify(session)).then(function(){ + localforage.removeItem('stash-' + temp.autostash.time + '-autostash').then(function(){ + temp.autostash.time = newTime; + }); + }); + }, 60000) + }; + } $('.hideForHIVTrace').css('display', 'flex'); setTimeout(function(){ let files = layout.contentItems.find(function(item){ return item.componentName === 'files'; }); diff --git a/index.html b/index.html index 2f8792be..9f6b31ed 100644 --- a/index.html +++ b/index.html @@ -32,10 +32,10 @@
  • - Save Stash -
    Recall +
    + Save @@ -548,20 +548,14 @@ }); $('#stash-data').on('click', function(){ - localforage.setItem('stash-'+Date.now()+'-'+$('#stash-name').val(), JSON.stringify(session)); + localforage.setItem('stash-'+Date.now()+'-'+$('#stash-name').val(), JSON.stringify(session)).then(function(){ + alertify.success('Session Stashed Successfully!'); + }); }); var table; - $('#RecallDataTab').on('click', function(){ - table = new Tabulator('#recall-stashes-available', { - height: '100%', - layout: "fitColumns", - selectable: 1, - columns: [ - {title:"Name", field:"name"}, - {title:"Date", field:"date", align:"right", sorter:"date"} - ] - }); + + function updateTable(){ localforage.keys().then(function(keys){ var rows = []; keys.forEach(function(k){ @@ -573,16 +567,27 @@ }); }); table.setData(rows); - $('#session-recall-modal').modal('show'); - }).catch(function(err){ - // This code runs if there were any errors - console.log(err); }); + } + + $('#RecallDataTab').on('click', function(){ + table = new Tabulator('#recall-stashes-available', { + height: '100%', + layout: "fitColumns", + selectable: 1, + columns: [ + {title:"Name", field:"name"}, + {title:"Date", field:"date", align:"right", sorter:"date"} + ] + }); + updateTable(); + $('#session-recall-modal').modal('show'); }); $('#recall-delete-stash').on('click', function(){ var key = table.getSelectedData()[0].fullname; localforage.removeItem(key).then(function(){ + updateTable(); alertify.success('That stash has been deleted.'); }); }); From ac42295b5f5a6fadb2abda2f3bc2d52ec017c60a Mon Sep 17 00:00:00 2001 From: Tony Boyles Date: Wed, 12 Dec 2018 15:41:38 -0500 Subject: [PATCH 04/22] Updated Clipboard to latest version --- components/2d_network.html | 4 +++- package.json | 2 +- 2 files changed, 4 insertions(+), 2 deletions(-) diff --git a/components/2d_network.html b/components/2d_network.html index ab2dbfcb..75121fc5 100644 --- a/components/2d_network.html +++ b/components/2d_network.html @@ -502,7 +502,9 @@
    Export Network Image
    $(window).trigger('node-selected'); } - new Clipboard('#copyID, #copySeq'); + var clipboard = new ClipboardJS('#copyID, #copySeq'); + + clipboard.on('success', hideContextMenu); function showContextMenu(d){ d3.event.preventDefault(); diff --git a/package.json b/package.json index 8ce5feaf..24a51b43 100644 --- a/package.json +++ b/package.json @@ -17,7 +17,7 @@ "bioseq": "^0.1.3", "bootstrap": "^4.1.1", "chosen-js": "^1.8.5", - "clipboard": "^1.7.1", + "clipboard": "^2.0.4", "d3": "^5.1.0", "d3-force-attract": "^0.1.1", "d3-sankey": "^0.7.1", From 23c9489016aa6942ce8dc3ebd398aab1d50e8bcd Mon Sep 17 00:00:00 2001 From: Tony Boyles Date: Wed, 12 Dec 2018 15:50:48 -0500 Subject: [PATCH 05/22] Update Packages --- package-lock.json | 302 +++++++++++++++++++++++++++++++++++++--------- package.json | 10 +- 2 files changed, 253 insertions(+), 59 deletions(-) diff --git a/package-lock.json b/package-lock.json index 4cae2297..6d1f63f0 100644 --- a/package-lock.json +++ b/package-lock.json @@ -5,16 +5,16 @@ "requires": true, "dependencies": { "3d-force-graph": { - "version": "1.42.3", - "resolved": "https://registry.npmjs.org/3d-force-graph/-/3d-force-graph-1.42.3.tgz", - "integrity": "sha512-GO0c0+bf/VEbHLMgLHSRxUS2d/QVgN6ApTgI4Jy3NEovXdHCGQNlMasw8NCJhuxl10vLoRmh5u8KMvtS6X1H/g==", + "version": "1.43.2", + "resolved": "https://registry.npmjs.org/3d-force-graph/-/3d-force-graph-1.43.2.tgz", + "integrity": "sha512-kvmXB+OFvekD4TAZlIO2oP/VAmMDSvzIRBKzkYqQURlD/uuKz5MmFQDLSyVAROvabYdOx7NVQ8l9C7wXviuLmw==", "requires": { "accessor-fn": "^1.2.2", "kapsule": "^1.9.2", - "three": "^0.97.0", + "three": "^0.99.0", "three-dragcontrols": "^0.88.2", "three-forcegraph": "^1.16.2", - "three-render-objects": "^1.2.7" + "three-render-objects": "^1.3.1" } }, "3d-view": { @@ -41,9 +41,9 @@ } }, "@babel/runtime": { - "version": "7.1.5", - "resolved": "https://registry.npmjs.org/@babel/runtime/-/runtime-7.1.5.tgz", - "integrity": "sha512-xKnPpXG/pvK1B90JkwwxSGii90rQGKtzcMt2gI5G6+M0REXaq6rOHsGC2ay6/d0Uje7zzvSzjEzfR3ENhFlrfA==", + "version": "7.2.0", + "resolved": "https://registry.npmjs.org/@babel/runtime/-/runtime-7.2.0.tgz", + "integrity": "sha512-oouEibCbHMVdZSDlJBO6bZmID/zA/G/Qx3H1d3rSNPTD+L8UNKvCat7aKWSJ74zYbm5zWGh0GQN0hKj8zYFTCg==", "requires": { "regenerator-runtime": "^0.12.0" } @@ -291,6 +291,12 @@ "resolved": "https://registry.npmjs.org/array-rearrange/-/array-rearrange-2.2.2.tgz", "integrity": "sha512-UfobP5N12Qm4Qu4fwLDIi2v6+wZsSf6snYSxAMeKhrh37YGnNWZPRmVEKc/2wfms53TLQnzfpG8wCx2Y/6NG1w==" }, + "async": { + "version": "1.5.2", + "resolved": "http://registry.npmjs.org/async/-/async-1.5.2.tgz", + "integrity": "sha1-7GphrlZIDAw8skHJVhjiCJL5Zyo=", + "dev": true + }, "atob-lite": { "version": "1.0.0", "resolved": "https://registry.npmjs.org/atob-lite/-/atob-lite-1.0.0.tgz", @@ -658,11 +664,13 @@ } }, "cfb": { - "version": "1.0.8", - "resolved": "https://registry.npmjs.org/cfb/-/cfb-1.0.8.tgz", - "integrity": "sha1-d/ITST1pfXVP2cD1UR6rWtctAs8=", + "version": "1.1.0", + "resolved": "https://registry.npmjs.org/cfb/-/cfb-1.1.0.tgz", + "integrity": "sha512-ZqfxNGWTMKhd0a/n6YKJLq8hWbd5kR3cA4kXwUj9vVEdHlwJ09werR8gN15Z7Y1FTXqdD6dE3GGCxv4uc28raA==", "requires": { - "commander": "^2.14.1", + "adler-32": "~1.2.0", + "commander": "^2.16.0", + "crc-32": "~1.2.0", "printj": "~1.1.2" } }, @@ -718,9 +726,9 @@ } }, "clipboard": { - "version": "1.7.1", - "resolved": "https://registry.npmjs.org/clipboard/-/clipboard-1.7.1.tgz", - "integrity": "sha1-Ng1taUbpmnof7zleQrqStem1oWs=", + "version": "2.0.4", + "resolved": "https://registry.npmjs.org/clipboard/-/clipboard-2.0.4.tgz", + "integrity": "sha512-Vw26VSLRpJfBofiVaFb/I8PVfdI1OxKcYShe6fm0sP/DtmiWQNCjhM/okTvdCo0G+lMMm1rMYbk4IK4x1X+kgQ==", "requires": { "good-listener": "^1.2.2", "select": "^1.1.2", @@ -843,6 +851,12 @@ "lerp": "^1.0.3" } }, + "colors": { + "version": "1.0.3", + "resolved": "http://registry.npmjs.org/colors/-/colors-1.0.3.tgz", + "integrity": "sha1-BDP0TYCWgP3rYO0mDxsMJi6CpAs=", + "dev": true + }, "commander": { "version": "2.19.0", "resolved": "https://registry.npmjs.org/commander/-/commander-2.19.0.tgz", @@ -967,6 +981,12 @@ "resolved": "https://registry.npmjs.org/core-util-is/-/core-util-is-1.0.2.tgz", "integrity": "sha1-tf1UIgqivFq1eqtxQMlAdUUDwac=" }, + "corser": { + "version": "2.0.1", + "resolved": "https://registry.npmjs.org/corser/-/corser-2.0.1.tgz", + "integrity": "sha1-jtolLsqrWEDc2XXOuQ2TcMgZ/4c=", + "dev": true + }, "country-regex": { "version": "1.1.0", "resolved": "https://registry.npmjs.org/country-regex/-/country-regex-1.1.0.tgz", @@ -1536,6 +1556,26 @@ "resolved": "https://registry.npmjs.org/earcut/-/earcut-2.1.3.tgz", "integrity": "sha512-AxdCdWUk1zzK/NuZ7e1ljj6IGC+VAdC3Qb7QQDsXpfNrc5IM8tL9nNXUmEGE6jRHTfZ10zhzRhtDmWVsR5pd3A==" }, + "ecstatic": { + "version": "3.3.0", + "resolved": "https://registry.npmjs.org/ecstatic/-/ecstatic-3.3.0.tgz", + "integrity": "sha512-EblWYTd+wPIAMQ0U4oYJZ7QBypT9ZUIwpqli0bKDjeIIQnXDBK2dXtZ9yzRCOlkW1HkO8gn7/FxLK1yPIW17pw==", + "dev": true, + "requires": { + "he": "^1.1.1", + "mime": "^1.6.0", + "minimist": "^1.1.0", + "url-join": "^2.0.5" + }, + "dependencies": { + "mime": { + "version": "1.6.0", + "resolved": "https://registry.npmjs.org/mime/-/mime-1.6.0.tgz", + "integrity": "sha512-x0Vn8spI+wuJ1O6S7gnbaQg8Pxh4NNHb7KSINmEWKiPE4RKOplvijn+NkmYmmRgP68mc70j2EbeTFRsrswaQeg==", + "dev": true + } + } + }, "edges-to-adjacency-list": { "version": "1.0.0", "resolved": "https://registry.npmjs.org/edges-to-adjacency-list/-/edges-to-adjacency-list-1.0.0.tgz", @@ -1676,6 +1716,12 @@ "resolved": "https://registry.npmjs.org/etag/-/etag-1.8.1.tgz", "integrity": "sha1-Qa4u62XvpiJorr/qg6x9eSmbCIc=" }, + "eventemitter3": { + "version": "3.1.0", + "resolved": "https://registry.npmjs.org/eventemitter3/-/eventemitter3-3.1.0.tgz", + "integrity": "sha512-ivIvhpq/Y0uSjcHDcOIccjmYjGLcP09MFGE7ysAwkAvkXfpZlC985pH2/ui64DKazbTW/4kN3yqozUxlXzI6cA==", + "dev": true + }, "events": { "version": "1.1.1", "resolved": "http://registry.npmjs.org/events/-/events-1.1.1.tgz", @@ -1803,6 +1849,26 @@ "dtype": "^2.0.0" } }, + "follow-redirects": { + "version": "1.5.10", + "resolved": "https://registry.npmjs.org/follow-redirects/-/follow-redirects-1.5.10.tgz", + "integrity": "sha512-0V5l4Cizzvqt5D44aTXbFZz+FtyXV1vrDN6qrelxtfYQKW0KO0W2T/hkE8xvGa/540LkZlkaUjO4ailYTFtHVQ==", + "dev": true, + "requires": { + "debug": "=3.1.0" + }, + "dependencies": { + "debug": { + "version": "3.1.0", + "resolved": "https://registry.npmjs.org/debug/-/debug-3.1.0.tgz", + "integrity": "sha512-OX8XqP7/1a9cqkxYw2yXss15f26NKWBpDXQd0/uK/KPqdQhxbPa994hnzjcE2VqQpDslf55723cKPUOGSmMY3g==", + "dev": true, + "requires": { + "ms": "2.0.0" + } + } + } + }, "font-atlas": { "version": "2.1.0", "resolved": "https://registry.npmjs.org/font-atlas/-/font-atlas-2.1.0.tgz", @@ -1907,9 +1973,9 @@ "integrity": "sha1-1ue1C8TkyGNXzTnyJkeoS3NgHpM=" }, "gl-axes3d": { - "version": "1.4.0", - "resolved": "https://registry.npmjs.org/gl-axes3d/-/gl-axes3d-1.4.0.tgz", - "integrity": "sha512-aakup65ywK7Bo0k/2IAq8AdvtZYHJANskePJpElcmuC1vm0l+4sRKmXevdR9AYBDNh5KEULFSnTe9RHVPvBtxQ==", + "version": "1.4.2", + "resolved": "https://registry.npmjs.org/gl-axes3d/-/gl-axes3d-1.4.2.tgz", + "integrity": "sha512-gDqYKiMYEUpF6DQ7i7qrRkI09c5DUdQLG75rDDO3bPZA57XDCh7DqbQCdyBzxSqOCOSF9v53mSI/dlmM3bzuEQ==", "requires": { "bit-twiddle": "^1.0.0", "dup": "^1.0.0", @@ -2113,13 +2179,13 @@ } }, "gl-plot3d": { - "version": "1.6.0", - "resolved": "https://registry.npmjs.org/gl-plot3d/-/gl-plot3d-1.6.0.tgz", - "integrity": "sha512-SWUXVuWlBE+GIQWysB5HmoqBDkkaCydT8JJl5CWyApau3bTtHzEEafMEBBfkc4THmk/3YXgmjmSlXF5vefTo/g==", + "version": "1.6.1", + "resolved": "https://registry.npmjs.org/gl-plot3d/-/gl-plot3d-1.6.1.tgz", + "integrity": "sha512-w93IiAm1xM+VIRunFs6opcLIgnbrdCSg9Lfg4jLp7m3e3qHCn3LyUCrG8qT1qW2HMLje9dCWnZmZyMb7Vbx24g==", "requires": { "3d-view-controls": "^2.2.0", "a-big-triangle": "^1.0.0", - "gl-axes3d": "^1.4.0", + "gl-axes3d": "^1.4.2", "gl-fbo": "^2.0.3", "gl-mat4": "^1.1.2", "gl-select-static": "^2.0.2", @@ -2179,9 +2245,9 @@ } }, "gl-select-static": { - "version": "2.0.2", - "resolved": "http://registry.npmjs.org/gl-select-static/-/gl-select-static-2.0.2.tgz", - "integrity": "sha1-8+GQHfAxgdUy55WFMjBnnUr1fuk=", + "version": "2.0.3", + "resolved": "https://registry.npmjs.org/gl-select-static/-/gl-select-static-2.0.3.tgz", + "integrity": "sha512-lV+Bne1q771KUGFJOeHM15dnouzO9IV/amlmGhq3xRxdKABFtfzPEuunm4IOF4HJvbRBz0fY/KTb0yz9QpzrZg==", "requires": { "bit-twiddle": "^1.0.2", "cwise": "^1.0.3", @@ -2205,9 +2271,9 @@ "integrity": "sha1-ys2y09vNICuFNFLoUAqLB3lJzAM=" }, "gl-spikes3d": { - "version": "1.0.6", - "resolved": "https://registry.npmjs.org/gl-spikes3d/-/gl-spikes3d-1.0.6.tgz", - "integrity": "sha512-mXRG+3iCs4bDH7if2aOr1G5UpbNqKxfWpy7GR/afOHDSNsrq2ZjnWAwPmIJG7KdClPNPgiK30cVo7XisLt8PCQ==", + "version": "1.0.7", + "resolved": "https://registry.npmjs.org/gl-spikes3d/-/gl-spikes3d-1.0.7.tgz", + "integrity": "sha512-i/JW5kqAGUSSvPhypDpCc5dBBaT2NkgqEmNAjpaepQrBvxQ9qKBn3jpywGMsPhVBUbEWb626BDSfmoe84bE0TQ==", "requires": { "gl-buffer": "^2.1.2", "gl-shader": "^4.0.4", @@ -2642,6 +2708,12 @@ "resolved": "https://registry.npmjs.org/has-symbols/-/has-symbols-1.0.0.tgz", "integrity": "sha1-uhqPGvKg/DllD1yFA2dwQSIGO0Q=" }, + "he": { + "version": "1.2.0", + "resolved": "https://registry.npmjs.org/he/-/he-1.2.0.tgz", + "integrity": "sha512-F/1DnUGPopORZi0ni+CvrCgHQ5FyEAHRLSApuYWMmrbSwoN2Mn/7k+Gl38gJnR7yyDZk6WLXwiGod1JOWNDKGw==", + "dev": true + }, "hsluv": { "version": "0.0.3", "resolved": "https://registry.npmjs.org/hsluv/-/hsluv-0.0.3.tgz", @@ -2666,6 +2738,33 @@ "statuses": ">= 1.4.0 < 2" } }, + "http-proxy": { + "version": "1.17.0", + "resolved": "https://registry.npmjs.org/http-proxy/-/http-proxy-1.17.0.tgz", + "integrity": "sha512-Taqn+3nNvYRfJ3bGvKfBSRwy1v6eePlm3oc/aWVxZp57DQr5Eq3xhKJi7Z4hZpS8PC3H4qI+Yly5EmFacGuA/g==", + "dev": true, + "requires": { + "eventemitter3": "^3.0.0", + "follow-redirects": "^1.0.0", + "requires-port": "^1.0.0" + } + }, + "http-server": { + "version": "0.11.1", + "resolved": "https://registry.npmjs.org/http-server/-/http-server-0.11.1.tgz", + "integrity": "sha512-6JeGDGoujJLmhjiRGlt8yK8Z9Kl0vnl/dQoQZlc4oeqaUoAKQg94NILLfrY3oWzSyFaQCVNTcKE5PZ3cH8VP9w==", + "dev": true, + "requires": { + "colors": "1.0.3", + "corser": "~2.0.0", + "ecstatic": "^3.0.0", + "http-proxy": "^1.8.1", + "opener": "~1.4.0", + "optimist": "0.6.x", + "portfinder": "^1.0.13", + "union": "~0.4.3" + } + }, "iconv-lite": { "version": "0.4.24", "resolved": "https://registry.npmjs.org/iconv-lite/-/iconv-lite-0.4.24.tgz", @@ -3149,6 +3248,23 @@ "resolved": "http://registry.npmjs.org/minimist/-/minimist-1.2.0.tgz", "integrity": "sha1-o1AIsg9BOD7sH7kU9M1d95omQoQ=" }, + "mkdirp": { + "version": "0.5.1", + "resolved": "http://registry.npmjs.org/mkdirp/-/mkdirp-0.5.1.tgz", + "integrity": "sha1-MAV0OOrGz3+MR2fzhkjWaX11yQM=", + "dev": true, + "requires": { + "minimist": "0.0.8" + }, + "dependencies": { + "minimist": { + "version": "0.0.8", + "resolved": "http://registry.npmjs.org/minimist/-/minimist-0.0.8.tgz", + "integrity": "sha1-hX/Kv8M5fSYluCKCYuhqp6ARsF0=", + "dev": true + } + } + }, "moment": { "version": "2.22.2", "resolved": "https://registry.npmjs.org/moment/-/moment-2.22.2.tgz", @@ -3312,6 +3428,10 @@ "resolved": "https://registry.npmjs.org/negotiator/-/negotiator-0.6.1.tgz", "integrity": "sha1-KzJxhOiZIQEXeyhWP7XnECrNDKk=" }, + "neighborjoining": { + "version": "git+https://github.com/CDCgov/neighborjoining.git#9e4967106401587572771a64e18436236a0e187e", + "from": "git+https://github.com/CDCgov/neighborjoining.git" + }, "next-tick": { "version": "1.0.0", "resolved": "http://registry.npmjs.org/next-tick/-/next-tick-1.0.0.tgz", @@ -3529,11 +3649,41 @@ "resolved": "https://registry.npmjs.org/open-iconic/-/open-iconic-1.1.1.tgz", "integrity": "sha1-nc/Ix808Yc20ojaxo0eJTJetwMY=" }, + "opener": { + "version": "1.4.3", + "resolved": "https://registry.npmjs.org/opener/-/opener-1.4.3.tgz", + "integrity": "sha1-XG2ixdflgx6P+jlklQ+NZnSskLg=", + "dev": true + }, "optical-properties": { "version": "1.0.0", "resolved": "https://registry.npmjs.org/optical-properties/-/optical-properties-1.0.0.tgz", "integrity": "sha512-XnBQYbIIzDVr7U3L7d3xyAEqp1W+HTkqmw/G4L/Ae/+dq57bT1jqW2uDwV0wCUzO8gsTDIZhGQsGrMb17VSkEA==" }, + "optimist": { + "version": "0.6.1", + "resolved": "https://registry.npmjs.org/optimist/-/optimist-0.6.1.tgz", + "integrity": "sha1-2j6nRob6IaGaERwybpDrFaAZZoY=", + "dev": true, + "requires": { + "minimist": "~0.0.1", + "wordwrap": "~0.0.2" + }, + "dependencies": { + "minimist": { + "version": "0.0.10", + "resolved": "http://registry.npmjs.org/minimist/-/minimist-0.0.10.tgz", + "integrity": "sha1-3j+YVD2/lggr5IrRoMfNqDYwHc8=", + "dev": true + }, + "wordwrap": { + "version": "0.0.3", + "resolved": "https://registry.npmjs.org/wordwrap/-/wordwrap-0.0.3.tgz", + "integrity": "sha1-o9XabNXAvAAI03I0u68b7WMFkQc=", + "dev": true + } + } + }, "optionator": { "version": "0.8.2", "resolved": "https://registry.npmjs.org/optionator/-/optionator-0.8.2.tgz", @@ -3622,6 +3772,10 @@ "resolved": "https://registry.npmjs.org/path-to-regexp/-/path-to-regexp-0.1.7.tgz", "integrity": "sha1-32BBeABfUi8V60SQ5yR6G/qmf4w=" }, + "patristic": { + "version": "git+https://github.com/CDCgov/patristic.git#1d8f5eaf600056edd1df383ef0d23fc89b04eae7", + "from": "git+https://github.com/CDCgov/patristic.git" + }, "pbf": { "version": "3.1.0", "resolved": "https://registry.npmjs.org/pbf/-/pbf-3.1.0.tgz", @@ -3790,9 +3944,9 @@ } }, "polished": { - "version": "2.3.0", - "resolved": "https://registry.npmjs.org/polished/-/polished-2.3.0.tgz", - "integrity": "sha512-G2yD9LhJy5HBuU+Im5qe70ubaJI/ZTTOIJO6GRMwJ2WSoAiPzlm8+LjAXMnm9/K0E0NumRVHvQu2HHPKQSYQjw==", + "version": "2.3.1", + "resolved": "https://registry.npmjs.org/polished/-/polished-2.3.1.tgz", + "integrity": "sha512-0mGyvVrHVRN92wfohriBWmMF4JLEnGgpZbpwPrNDhpB8NrX6lYI8GGWXEfrmrF+ZXg52Jkwd+D0rxViOvXM9RQ==", "requires": { "@babel/runtime": "^7.0.0" } @@ -3811,9 +3965,20 @@ } }, "popper.js": { - "version": "1.14.5", - "resolved": "https://registry.npmjs.org/popper.js/-/popper.js-1.14.5.tgz", - "integrity": "sha512-fs4Sd8bZLgEzrk8aS7Em1qh+wcawtE87kRUJQhK6+LndyV1HerX7+LURzAylVaTyWIn5NTB/lyjnWqw/AZ6Yrw==" + "version": "1.14.6", + "resolved": "https://registry.npmjs.org/popper.js/-/popper.js-1.14.6.tgz", + "integrity": "sha512-AGwHGQBKumlk/MDfrSOf0JHhJCImdDMcGNoqKmKkU+68GFazv3CQ6q9r7Ja1sKDZmYWTckY/uLyEznheTDycnA==" + }, + "portfinder": { + "version": "1.0.20", + "resolved": "https://registry.npmjs.org/portfinder/-/portfinder-1.0.20.tgz", + "integrity": "sha512-Yxe4mTyDzTd59PZJY4ojZR8F+E5e97iq2ZOHPz3HDgSvYC5siNad2tLooQ5y5QHyQhc3xVqvyk/eNA3wuoa7Sw==", + "dev": true, + "requires": { + "async": "^1.5.2", + "debug": "^2.2.0", + "mkdirp": "0.5.x" + } }, "prelude-ls": { "version": "1.1.2", @@ -4144,6 +4309,12 @@ "resolved": "https://registry.npmjs.org/repeat-string/-/repeat-string-1.6.1.tgz", "integrity": "sha1-jcrkcOHIirwtYA//Sndihtp15jc=" }, + "requires-port": { + "version": "1.0.0", + "resolved": "https://registry.npmjs.org/requires-port/-/requires-port-1.0.0.tgz", + "integrity": "sha1-kl0mAdOaxIXgkc8NpcbmlNw9yv8=", + "dev": true + }, "resolve": { "version": "1.7.1", "resolved": "https://registry.npmjs.org/resolve/-/resolve-1.7.1.tgz", @@ -4790,9 +4961,9 @@ } }, "tabulator-tables": { - "version": "4.1.2", - "resolved": "https://registry.npmjs.org/tabulator-tables/-/tabulator-tables-4.1.2.tgz", - "integrity": "sha512-IOYnuBUY2SqP6nyLCbDQqkIhS5yzZ6mGy6w2r0j42/oWS2doO/tzjHhqL0eZr42kk30Vp4Asy2fBm+Jer6N/yg==" + "version": "4.1.3", + "resolved": "https://registry.npmjs.org/tabulator-tables/-/tabulator-tables-4.1.3.tgz", + "integrity": "sha512-aBtxW8jvtcfvGoLu430CdkNUwPQFL4RLsI6/HC3czHIUsX3rpI7NTQ9psXOB1NPNYmgkMJIT2Iw5YXrPI8k2vw==" }, "tape": { "version": "4.9.1", @@ -4823,9 +4994,9 @@ } }, "three": { - "version": "0.97.0", - "resolved": "https://registry.npmjs.org/three/-/three-0.97.0.tgz", - "integrity": "sha512-ctZF79O1R2aMIDnz9cV5GUIONyFnYvfQKg4+EAwEVaEr1mgy99rglstH6hhRdIThu3SOa4Ns5da/Ee5fTbWc9A==" + "version": "0.99.0", + "resolved": "https://registry.npmjs.org/three/-/three-0.99.0.tgz", + "integrity": "sha512-DmNNq6H6nRGaqxScJ8x7v5VjdtDZR72oTVwDdKbB2BYNFxCkAoo9vdFAznEsMu9YzTV2yFvbVs7qHRzvJZzTIg==" }, "three-dragcontrols": { "version": "0.88.2", @@ -4858,9 +5029,9 @@ "integrity": "sha1-EafzPQog7OyY8Jizd4D2U3N0+rQ=" }, "three-render-objects": { - "version": "1.2.7", - "resolved": "https://registry.npmjs.org/three-render-objects/-/three-render-objects-1.2.7.tgz", - "integrity": "sha512-kTTd7tI+OIDDkkJW1rZAj7hbWRz2VPq8+xqcBoaGqZ1+UvozFupdXd83giypONB+ium8FvaRLqrEitDLoQHVvg==", + "version": "1.3.1", + "resolved": "https://registry.npmjs.org/three-render-objects/-/three-render-objects-1.3.1.tgz", + "integrity": "sha512-n/zj6BSBNRn72hnPwCNeuV3+izvGhgLSi96AzOKwisca8A2y2XEibJB4cAcC2gjzx3Lqh385tFGRUHLBKjNK3g==", "requires": { "@tweenjs/tween.js": "^17.2.0", "accessor-fn": "^1.2.2", @@ -5075,6 +5246,23 @@ "resolved": "https://registry.npmjs.org/unicode-property-aliases-ecmascript/-/unicode-property-aliases-ecmascript-1.0.4.tgz", "integrity": "sha512-2WSLa6OdYd2ng8oqiGIWnJqyFArvhn+5vgx5GTxMbUYjCYKUcuKS62YLFF0R/BDGlB1yzXjQOLtPAfHsgirEpg==" }, + "union": { + "version": "0.4.6", + "resolved": "http://registry.npmjs.org/union/-/union-0.4.6.tgz", + "integrity": "sha1-GY+9rrolTniLDvy2MLwR8kopWeA=", + "dev": true, + "requires": { + "qs": "~2.3.3" + }, + "dependencies": { + "qs": { + "version": "2.3.3", + "resolved": "http://registry.npmjs.org/qs/-/qs-2.3.3.tgz", + "integrity": "sha1-6eha2+ddoLvkyOBHaghikPhjtAQ=", + "dev": true + } + } + }, "union-find": { "version": "1.0.2", "resolved": "https://registry.npmjs.org/union-find/-/union-find-1.0.2.tgz", @@ -5100,6 +5288,12 @@ "resolved": "https://registry.npmjs.org/update-diff/-/update-diff-1.1.0.tgz", "integrity": "sha1-9RAYLYHugZ+4LDprIrYrve2ngI8=" }, + "url-join": { + "version": "2.0.5", + "resolved": "https://registry.npmjs.org/url-join/-/url-join-2.0.5.tgz", + "integrity": "sha1-WvIvGMBSoACkjXuCxenC4v7tpyg=", + "dev": true + }, "util-deprecate": { "version": "1.0.2", "resolved": "https://registry.npmjs.org/util-deprecate/-/util-deprecate-1.0.2.tgz", @@ -5191,30 +5385,30 @@ "integrity": "sha1-tSQ9jz7BqjXxNkYFvA0QNuMKtp8=" }, "xlsx": { - "version": "0.13.5", - "resolved": "https://registry.npmjs.org/xlsx/-/xlsx-0.13.5.tgz", - "integrity": "sha512-AQo8Anyuv8ZxegAH2EUJ9ZauLf3lIDPfmV7OpJi79LNW6jO4gsviJyQCjNCJY7Deu1SLCrr7LY6rM9N91ixaDQ==", + "version": "0.14.1", + "resolved": "https://registry.npmjs.org/xlsx/-/xlsx-0.14.1.tgz", + "integrity": "sha512-7hjB5YuyJo1fuuzXQjwuxD8LSUzE4Rxu5ToC3fB5JSunZxGjLcgKg69bEFG9GYoxeVDx5GL0k1dUodlvaQNRQw==", "requires": { "adler-32": "~1.2.0", - "cfb": "~1.0.8", + "cfb": "^1.1.0", "codepage": "~1.14.0", - "commander": "~2.15.1", + "commander": "~2.17.1", "crc-32": "~1.2.0", "exit-on-epipe": "~1.0.1", "ssf": "~0.10.2" }, "dependencies": { "commander": { - "version": "2.15.1", - "resolved": "http://registry.npmjs.org/commander/-/commander-2.15.1.tgz", - "integrity": "sha512-VlfT9F3V0v+jr4yxPc5gg9s62/fIVWsd2Bk2iD435um1NlGMYdVCq+MjcXnhYq2icNOizHr1kK+5TI6H0Hy0ag==" + "version": "2.17.1", + "resolved": "https://registry.npmjs.org/commander/-/commander-2.17.1.tgz", + "integrity": "sha512-wPMUt6FnH2yzG95SA6mzjQOEKUU3aLaDEmzs1ti+1E9h+CsrZghRlqEM/EJ4KscsQVG8uNN4uVreUeT8+drlgg==" } } }, "xss": { - "version": "0.3.8", - "resolved": "https://registry.npmjs.org/xss/-/xss-0.3.8.tgz", - "integrity": "sha512-OCD6A7FaqZt7tUAnIpAlpcMlZpWUrfV+nBYrBfrgtcYf2eEv2qnCBqpkmxWR479piPSyTsFAKO/+LckiWpCXsQ==", + "version": "1.0.3", + "resolved": "https://registry.npmjs.org/xss/-/xss-1.0.3.tgz", + "integrity": "sha512-LTpz3jXPLUphMMmyufoZRSKnqMj41OVypZ8uYGzvjkMV9C1EdACrhQl/EM8Qfh5htSAuMIQFOejmKAZGkJfaCg==", "requires": { "commander": "^2.9.0", "cssfilter": "0.0.10" diff --git a/package.json b/package.json index 24a51b43..335c9f1a 100644 --- a/package.json +++ b/package.json @@ -11,7 +11,7 @@ "start": "node index.js" }, "dependencies": { - "3d-force-graph": "^1.31.2", + "3d-force-graph": "^1.43.2", "alertifyjs": "^1.11.1", "alignment-viewer": "^0.3.0", "bioseq": "^0.1.3", @@ -37,13 +37,13 @@ "papaparse": "^4.4.0", "patristic": "git+https://github.com/CDCgov/patristic.git", "plotly.js": "^1.37.1", - "popper.js": "^1.14.3", + "popper.js": "^1.14.6", "screenfull": "^3.3.2", - "tabulator-tables": "^4.0.5", + "tabulator-tables": "^4.1.3", "tn93": "^0.2.2", "underscore": "^1.9.0", - "xlsx": "^0.13.2", - "xss": "^0.3.8" + "xlsx": "^0.14.1", + "xss": "^1.0.3" }, "devDependencies": { "http-server": "^0.11.1" From 2e66874e015ef7d9ac024d59a031ae1ac54fa65a Mon Sep 17 00:00:00 2001 From: Tony Boyles Date: Thu, 13 Dec 2018 11:06:34 -0500 Subject: [PATCH 06/22] Recompute color table when circumstances change Hopefully resolves #71 --- index.html | 14 ++++++++++++-- scripts/common.js | 12 ++++++++++-- 2 files changed, 22 insertions(+), 4 deletions(-) diff --git a/index.html b/index.html index 9f6b31ed..404121ed 100644 --- a/index.html +++ b/index.html @@ -788,7 +788,7 @@ table.append('Node '+app.titleize(variable)+'Color'); var values = app.createNodeColorMap(); values.forEach(function(value, i){ - var input = $('') + var input = $('') .on('change', function(evt){ session.style.nodeColors.splice(i, 1, evt.target.value); temp.style.nodeColorMap = d3.scaleOrdinal(session.style.nodeColors).domain(values); @@ -825,7 +825,7 @@ var table = $('').appendTo('#group-key'); table.append('Link '+app.titleize(variable)+'Color'); values.forEach(function(value, i){ - var input = $('') + var input = $('') .on('change', function(evt){ session.style.linkColors.splice(i, 1, evt.target.value); temp.style.linkColorMap = d3.scaleOrdinal(session.style.linkColors).domain(values); @@ -951,6 +951,16 @@ .on('click', function(){ $('#network-statistics-context, #group-key-context').hide(); }) + .on('link-threshold-change', function(){ + if(session.style.widgets['link-color-variable'] !== 'None'){ + $('#link-color-variable').trigger('change'); + } + }) + .on('node-visibility', function(){ + if(session.style.widgets['node-color-variable'] !== 'None'){ + $('#node-color-variable').trigger('change'); + } + }) .on('resize', function(){ layout.root.setSize(); }) diff --git a/scripts/common.js b/scripts/common.js index 60847834..84a9b062 100644 --- a/scripts/common.js +++ b/scripts/common.js @@ -586,7 +586,11 @@ app.createNodeColorMap = function(){ temp.style.nodeColorMap = function(){ return session.style.widgets['node-color']; }; return []; } - values = _.chain(session.data.nodes).pluck(variable).uniq().value(); + values = _.chain(session.data.nodes) + .filter(function(d){return d.visible;}) + .pluck(variable) + .uniq() + .value(); if(_.isNumber(session.data.nodes[0][variable])){ values.sort(function(a, b){ return a - b; }); } else { @@ -616,7 +620,11 @@ app.createLinkColorMap = function(){ }); }); } else { - values = _.chain(session.data.links).pluck(variable).uniq().value(); + values = _.chain(session.data.links) + .filter(function(l){ return l.visible; }) + .pluck(variable) + .uniq() + .value(); } if(_.isNumber(session.data.links[0][variable])){ values.sort(function(a, b){ return a - b; }); From 29a27013a84250c851c81d662a4b0d9d2c6444f4 Mon Sep 17 00:00:00 2001 From: Tony Boyles Date: Thu, 13 Dec 2018 12:05:31 -0500 Subject: [PATCH 07/22] Set Global Settings Modal to allow clicks behind it --- stylesheets/main.css | 6 ++++++ 1 file changed, 6 insertions(+) diff --git a/stylesheets/main.css b/stylesheets/main.css index 5d70c882..07460eb6 100644 --- a/stylesheets/main.css +++ b/stylesheets/main.css @@ -283,6 +283,12 @@ a.btn, button.btn, .btn-group{ border-top: 1px solid rgba(0,0,0,.1); z-index: 1030; } +#global-settings-modal{ + pointer-events: none; +} +#global-settings-modal .modal-content{ + background: rgba(255,255,255,0.8); +} /* 2D NETWORK */ #nodes path { From 470427b62f0a6c288066ba165a494e879db9b8bf Mon Sep 17 00:00:00 2001 From: Tony Boyles Date: Fri, 14 Dec 2018 15:16:00 -0500 Subject: [PATCH 08/22] Refashioned session.files to subsume the File object --- components/files.html | 408 ++++++++++++++++++++---------------------- index.html | 1 + package-lock.json | 5 + package.json | 1 + 4 files changed, 197 insertions(+), 218 deletions(-) diff --git a/components/files.html b/components/files.html index 027b642f..0e057c64 100644 --- a/components/files.html +++ b/components/files.html @@ -229,12 +229,12 @@ $('#main-submit').css('display', 'inline').focus(); }); - function addFileToTable(file){ - var extension = file.name.split('.').pop().toLowerCase(); + function addFileToTable(rawfile){ + var extension = rawfile.name.split('.').pop().toLowerCase(); if(extension === 'zip'){ var new_zip = new JSZip(); new_zip - .loadAsync(file) + .loadAsync(rawfile) .then(function(zip){ zip.forEach(function(relativePath, zipEntry){ extension = zipEntry.name.split('.').pop(); @@ -250,44 +250,40 @@ reader.onloadend = function(out){ app.processJSON(out.target.result, extension); }; - reader.readAsText(file, 'UTF-8'); + reader.readAsText(rawfile, 'UTF-8'); } - session.files.push(file); - var isFasta = (extension === 'fasta'); var isXL = (extension === 'xlsx' || extension === 'xls'); - var isNode = file.name.toLowerCase().includes('node'); - if(isXL){ - var reader = new FileReader(); - reader.onload = function(e){ - var data = e.target.result; - var workbook = XLSX.read(data, {type: 'array'}); + fileto.promise(rawfile, isXL ? 'ArrayBuffer' : 'Text').then(function(file){ + session.files.push(file); + var isFasta = (extension === 'fasta'); + var isNode = file.name.toLowerCase().includes('node'); + if(isXL){ + var workbook = XLSX.read(file.contents, {type: 'array'}); var data = XLSX.utils.sheet_to_json(workbook.Sheets[workbook.SheetNames[0]]); var headers = Object.keys(data[0]).map(filterXSS); addTableTile(headers); - }; - reader.readAsArrayBuffer(file); - } else { - Papa.parse(file, { - dynamicTyping: true, - header: true, - preview: 1, - complete: function(output){ - var headers = output.meta.fields.map(filterXSS); - addTableTile(headers); - } - }); - } - var addTableTile = function(headers){ - var root = $('
    '); - var fnamerow = $('
    '); - $('
    ') + } else { + Papa.parse(file.contents, { + dynamicTyping: true, + header: true, + preview: 1, + complete: function(output){ + var headers = output.meta.fields.map(filterXSS); + addTableTile(headers); + } + }); + } + function addTableTile(headers){ + var root = $('
    '); + var fnamerow = $('
    '); + $('
    ') .append($('    ').click(function(e){ session.files.splice(session.files.indexOf(file.name), 1); root.slideUp(function(){ root.remove(); }); })) .append(` ${file.name}`) .appendTo(fnamerow); - fnamerow.append(` + fnamerow.append(`
    - `); - fnamerow.appendTo(root); - var optionsrow = $('
    '); - var options = '' + headers.map(function(h){ return ''; }).join('\n'); - optionsrow.append(` + `); + fnamerow.appendTo(root); + var optionsrow = $('
    '); + var options = '' + headers.map(function(h){ return ''; }).join('\n'); + optionsrow.append(` - `); - optionsrow.appendTo(root); - - function matchHeaders(type){ - var a = type === 'node' ? ['ID', 'Id', 'id'] : ['SOURCE', 'Source', 'source'], - b = type === 'node' ? ['SEQUENCE', 'SEQ', 'Sequence', 'sequence', 'seq'] : ['TARGET', 'Target', 'target'], - these = $(`[data-file='${file.name}'] select`); - [a, b].forEach(function(list, i){ - list.forEach(function(title){ - if(headers.includes(title)){ - $(these.get(i)).val(title); + `); + optionsrow.appendTo(root); + + function matchHeaders(type){ + var a = type === 'node' ? ['ID', 'Id', 'id'] : ['SOURCE', 'Source', 'source'], + b = type === 'node' ? ['SEQUENCE', 'SEQ', 'Sequence', 'sequence', 'seq'] : ['TARGET', 'Target', 'target'], + these = $(`[data-file='${file.name}'] select`); + [a, b].forEach(function(list, i){ + list.forEach(function(title){ + if(headers.includes(title)){ + $(these.get(i)).val(title); + } + }); + if($(these.get(i)).val() === 'None'){ + if(!(i === 1 && type === 'node')){ + $(these.get(i)).val(headers[i]); + } } }); - if($(these.get(i)).val() === 'None'){ - if(!(i === 1 && type === 'node')){ - $(these.get(i)).val(headers[i]); - } - } - }); - } + } - root.appendTo('#file-table'); - matchHeaders($(`[name="options-${file.name}"]:checked`).data('type')); - - function refit(e){ - var type = $(e ? e.target : `[name="options-${file.name}"]:checked`).data('type'), - these = $(`[data-file='${file.name}']`), - first = $(these.get(0)), - second = $(these.get(1)); - if(type === 'node'){ - first.slideDown().find('label').text('ID'); - second.slideDown().find('label').text('Sequence'); - matchHeaders(type); - } else if(type === 'link'){ - first.slideDown().find('label').text('Source'); - second.slideDown().find('label').text('Target'); - matchHeaders(type); - } else { - these.slideUp(); + root.appendTo('#file-table'); + matchHeaders($(`[name="options-${file.name}"]:checked`).data('type')); + + function refit(e){ + var type = $(e ? e.target : `[name="options-${file.name}"]:checked`).data('type'), + these = $(`[data-file='${file.name}']`), + first = $(these.get(0)), + second = $(these.get(1)); + if(type === 'node'){ + first.slideDown().find('label').text('ID'); + second.slideDown().find('label').text('Sequence'); + matchHeaders(type); + } else if(type === 'link'){ + first.slideDown().find('label').text('Source'); + second.slideDown().find('label').text('Target'); + matchHeaders(type); + } else { + these.slideUp(); + } } - } - $(`[name="options-${file.name}"]`).change(refit); - refit(); - }; + $(`[name="options-${file.name}"]`).change(refit); + refit(); + } + }); } function readFastas(){ var read = 0, data = []; - var fastas = session.files.filter(function(f){ return f.name.includes('fas'); }); - if(fastas.length < 1) return; + var fastas = session.files.filter(function(f){ return f.name.split('.').pop().includes('fas'); }); + if(fastas.length === 0) return; fastas.forEach(function(fasta){ - var reader = new FileReader(); - reader.onloadend = function(e){ - app - .parseFASTA(e.target.result) - .forEach(function(node){ - node.id = filterXSS(node.id); - node.seq = filterXSS(node.seq); - data.push(node); - }); - if(++read === fastas.length) updatePreview(data); - }; - reader.readAsText(fasta, 'UTF-8'); + app + .parseFASTA(fasta.contents) + .forEach(function(node){ + node.id = filterXSS(node.id); + node.seq = filterXSS(node.seq); + data.push(node); + }); + if(++read === fastas.length) updatePreview(data); }); } @@ -498,57 +491,49 @@ alertify.warning('If you stare long enough, you can reverse the DNA Molecule\'s spin direction'); }, 20000); - var files = []; $('#file-panel .file-table-row').each(function(i, el){ var $el = $(el); var fname = $el.find('.file-name').text().trim(); var selects = $el.find('select'); - files.push({ - file: session.files.find(function(file){ return file.name === fname; }), - type: $el.find('input[type="radio"]:checked').data('type'), - field1: selects.get(0).value, - field2: selects.get(1).value - }); + var f = session.files.find(function(file){ return file.name === fname; }); + f.format = $el.find('input[type="radio"]:checked').data('type'); + f.field1 = selects.get(0).value; + f.field2 = selects.get(1).value; }); - session.files = files; var hierarchy = ['distmat', 'link', 'node', 'fasta']; var anySequences = false; session.state.metrics = $('#distance-metrics').val(); session.data.linkFields = session.data.linkFields.concat(session.state.metrics); - var check = files.length > 1; + var check = session.files.length > 1; - files.sort(function(a, b){ return hierarchy.indexOf(a.type) - hierarchy.indexOf(b.type); }); + session.files.sort(function(a, b){ return hierarchy.indexOf(a.format) - hierarchy.indexOf(b.format); }); //First Pass: Read all files, identify all distinct nodes. - files.forEach(function(file, fileNum){ - var filename = file.file.name; + session.files.forEach(function(file, fileNum){ + var filename = file.name; var extension = filename.split('.').pop().toLowerCase(); - if(file.type === 'fasta'){ + if(file.format === 'fasta'){ message(`Parsing ${filename} as FASTA...`); - var reader = new FileReader(); - reader.onloadend = function(e){ - anySequences = true; - var newNodes = 0; - var seqs = app.parseFASTA(e.target.result); - var n = seqs.length; - for(var i = 0; i < n; i++){ - var node = seqs[i]; - if(!node) continue; - node.id = filterXSS(node.id); - node.seq = filterXSS(node.seq); - node.origin = [filename]; - n += app.addNode(node); - } - message(` - Parsed ${newNodes} New, ${seqs.length} Total Nodes from FASTA.`); - if(fileNum === files.length - 1) nextStuff(); - }; - reader.readAsText(file.file, 'UTF-8'); + anySequences = true; + var newNodes = 0; + var seqs = app.parseFASTA(file.contents); + var n = seqs.length; + for(var i = 0; i < n; i++){ + var node = seqs[i]; + if(!node) continue; + node.id = filterXSS(node.id); + node.seq = filterXSS(node.seq); + node.origin = [filename]; + n += app.addNode(node); + } + message(` - Parsed ${newNodes} New, ${seqs.length} Total Nodes from FASTA.`); + if(fileNum === session.files.length - 1) nextStuff(); - } else if(file.type === 'link'){ + } else if(file.format === 'link'){ message(`Parsing ${filename} as Link List...`); var l = 0; @@ -572,39 +557,34 @@ if(extension == 'xls' || extension == 'xlsx'){ - var reader = new FileReader(); - reader.onload = function(e){ - var data = e.target.result; - var workbook = XLSX.read(data, {type: 'array'}); - var data = XLSX.utils.sheet_to_json(workbook.Sheets[workbook.SheetNames[0]]); - data.map(forEachLink); - message(` - Parsed ${l} New, ${data.length} Total Links from Link Excel Table.`); - Object.keys(data[0]).forEach(function(key){ - key = filterXSS(key); - if(!session.data.linkFields.includes(key)){ - session.data.linkFields.push(key); - } - }); - var n = 0; - var nodeIDs = _.union( - _.map(data, function(l){ return l[file.field1]; }), - _.map(data, function(l){ return l[file.field2]; }) - ); - var t = nodeIDs.length; - nodeIDs.forEach(function(d){ - n += app.addNode({ - id: '' + d, - origin: [filename] - }); + var workbook = XLSX.read(file.contents, {type: 'array'}); + var data = XLSX.utils.sheet_to_json(workbook.Sheets[workbook.SheetNames[0]]); + data.map(forEachLink); + message(` - Parsed ${l} New, ${data.length} Total Links from Link Excel Table.`); + Object.keys(data[0]).forEach(function(key){ + key = filterXSS(key); + if(!session.data.linkFields.includes(key)){ + session.data.linkFields.push(key); + } + }); + var n = 0; + var nodeIDs = _.union( + _.map(data, function(l){ return l[file.field1]; }), + _.map(data, function(l){ return l[file.field2]; }) + ); + var t = nodeIDs.length; + nodeIDs.forEach(function(d){ + n += app.addNode({ + id: '' + d, + origin: [filename] }); - message(` - Parsed ${n} New, ${t} Total Nodes from Link Excel Table.`); - if(fileNum === files.length - 1) nextStuff(); - }; - reader.readAsArrayBuffer(file.file); + }); + message(` - Parsed ${n} New, ${t} Total Nodes from Link Excel Table.`); + if(fileNum === session.files.length - 1) nextStuff(); } else { - Papa.parse(file.file, { + Papa.parse(file.contents, { header: true, worker: true, dynamicTyping: true, @@ -632,11 +612,11 @@ }); }); message(` - Parsed ${n} New, ${t} Total Nodes from Link CSV.`); - if(fileNum === files.length - 1) nextStuff(); + if(fileNum === session.files.length - 1) nextStuff(); } }); } - } else if(file.type === 'node'){ + } else if(file.format === 'node'){ message(`Parsing ${filename} as Node List...`); @@ -646,32 +626,27 @@ if(extension == 'xls' || extension == 'xlsx'){ - var reader = new FileReader(); - reader.onload = function(e){ - var data = e.target.result; - var workbook = XLSX.read(data, {type: 'array'}); - var data = XLSX.utils.sheet_to_json(workbook.Sheets[workbook.SheetNames[0]]); - Object.keys(data[0]).forEach(function(key){ - key = filterXSS(key); - if(!session.data.nodeFields.includes(key)){ - session.data.nodeFields.push(key); - } - }); - data.forEach(function(results){ - node = JSON.parse(filterXSS(JSON.stringify(results))); - node.id = '' + node[file.field1]; - if(file.field2 !== 'None') node.seq = node[file.field2]; - node['origin'] = [filename]; - m += app.addNode(node); - }); - message(` - Parsed ${m} New, ${n} Total Nodes from Node Excel Table.`); - if(fileNum === files.length - 1) nextStuff(); - }; - reader.readAsArrayBuffer(file.file); + var workbook = XLSX.read(file.contents, {type: 'array'}); + var data = XLSX.utils.sheet_to_json(workbook.Sheets[workbook.SheetNames[0]]); + Object.keys(data[0]).forEach(function(key){ + key = filterXSS(key); + if(!session.data.nodeFields.includes(key)){ + session.data.nodeFields.push(key); + } + }); + data.forEach(function(results){ + node = JSON.parse(filterXSS(JSON.stringify(results))); + node.id = '' + node[file.field1]; + if(file.field2 !== 'None') node.seq = node[file.field2]; + node['origin'] = [filename]; + m += app.addNode(node); + }); + message(` - Parsed ${m} New, ${n} Total Nodes from Node Excel Table.`); + if(fileNum === session.files.length - 1) nextStuff(); } else { - Papa.parse(file.file, { + Papa.parse(file.contents, { header: true, worker: true, dynamicTyping: true, @@ -693,7 +668,7 @@ }, complete: function(){ message(` - Parsed ${m} New, ${n} Total Nodes from Node CSV.`); - if(fileNum === files.length - 1) nextStuff(); + if(fileNum === session.files.length - 1) nextStuff(); } }); } @@ -704,54 +679,51 @@ var defaultMetric = $('#default-distance-metric').val(); if(extension == 'xls' || extension == 'xlsx'){ - var reader = new FileReader(); - reader.onload = function(e){ - var data = e.target.result; - var workbook = XLSX.read(data, {type: 'array'}); - var data = XLSX.utils.sheet_to_json(workbook.Sheets[workbook.SheetNames[0]], {header: 1}); - var nodeIDs = [], nn = 0, nl = 0; - data.forEach(function(row, i){ - if(i == 0){ - nodeIDs = row.map(filterXSS); - nodeIDs.forEach(function(cell, k){ - if(k > 0){ - nn += app.addNode({ - id: '' + cell, - origin: [filename] - }); - } - }); - } else { - row.forEach(function(cell, j){ - if(j > i){ - var base = { - source: '' + nodeIDs[i], - target: '' + nodeIDs[j], - origin: [filename] - }; - session.state.metrics.forEach(function(metric){ - metric = metric.toLowerCase(); - base[metric] = 0; - }); - base[defaultMetric] = parseFloat(cell), - nl += app.addLink(base, check); - } - }); - } - }); - message(` - Parsed ${m} New, ${n} Total Nodes from Node Excel Table.`); - if(fileNum === files.length - 1) nextStuff(); - }; - reader.readAsArrayBuffer(file.file); + + var workbook = XLSX.read(file.contents, {type: 'array'}); + var data = XLSX.utils.sheet_to_json(workbook.Sheets[workbook.SheetNames[0]], {header: 1}); + var nodeIDs = [], nn = 0, nl = 0; + data.forEach(function(row, i){ + if(i == 0){ + nodeIDs = row.map(filterXSS); + nodeIDs.forEach(function(cell, k){ + if(k > 0){ + nn += app.addNode({ + id: '' + cell, + origin: [filename] + }); + } + }); + } else { + row.forEach(function(cell, j){ + if(j > i){ + var base = { + source: '' + nodeIDs[i], + target: '' + nodeIDs[j], + origin: [filename] + }; + session.state.metrics.forEach(function(metric){ + metric = metric.toLowerCase(); + base[metric] = 0; + }); + base[defaultMetric] = parseFloat(cell), + nl += app.addLink(base, check); + } + }); + } + }); + message(` - Parsed ${m} New, ${n} Total Nodes from Node Excel Table.`); + if(fileNum === session.files.length - 1) nextStuff(); } else { - Papa.parse(file.file, { + + Papa.parse(file.contents, { worker: true, skipEmptyLines: true, complete: function(results){ var nodeIDs = []; var nn = 0, nl = 0; - let check = files.length > 1; + let check = session.files.length > 1; results.data.forEach(function(row, i){ if(i == 0){ nodeIDs = row.map(filterXSS); @@ -783,7 +755,7 @@ }); message(` - Parsed ${nn} New, ${results.data.length - 1} Total Nodes from Distance Matrix.`); message(` - Parsed ${nl} New, ${(Math.pow(results.data.length-1, 2) - results.data.length + 1)/2} Total Links from Distance Matrix.`); - if(fileNum === files.length - 1) nextStuff(); + if(fileNum === session.files.length - 1) nextStuff(); } }); } diff --git a/index.html b/index.html index 404121ed..fd79d229 100644 --- a/index.html +++ b/index.html @@ -450,6 +450,7 @@ + diff --git a/package-lock.json b/package-lock.json index 6d1f63f0..884b9b7c 100644 --- a/package-lock.json +++ b/package-lock.json @@ -1818,6 +1818,11 @@ "resolved": "https://registry.npmjs.org/fast-levenshtein/-/fast-levenshtein-2.0.6.tgz", "integrity": "sha1-PYpcZog6FqMMqGQ+hR8Zuqd5eRc=" }, + "fileto": { + "version": "0.0.1", + "resolved": "https://registry.npmjs.org/fileto/-/fileto-0.0.1.tgz", + "integrity": "sha512-jluBm3JbY+Vm00Gfyx4nNXyoSREl8nFf5p43zgWcHcFTSsg9R2PPkkeTyDcFQxzX7/Q/EWpuSx3befiuZ6lLNQ==" + }, "filtered-vector": { "version": "1.2.4", "resolved": "https://registry.npmjs.org/filtered-vector/-/filtered-vector-1.2.4.tgz", diff --git a/package.json b/package.json index 335c9f1a..fe0c191d 100644 --- a/package.json +++ b/package.json @@ -23,6 +23,7 @@ "d3-sankey": "^0.7.1", "d3-symbol-extra": "^0.1.0", "express": "^4.16.3", + "fileto": "0.0.1", "golden-layout": "^1.5.9", "html2canvas": "^1.0.0-alpha.12", "jquery": "^3.3.1", From a95c001495d024f52ec79a7206c2e18787854a00 Mon Sep 17 00:00:00 2001 From: Tony Boyles Date: Fri, 14 Dec 2018 16:30:20 -0500 Subject: [PATCH 09/22] Adding data is back! Untested and buggy, but back! --- components/files.html | 209 ++++++++++++++++++++++-------------------- index.html | 98 ++++++++++---------- 2 files changed, 162 insertions(+), 145 deletions(-) diff --git a/components/files.html b/components/files.html index 0e057c64..fa83bb1f 100644 --- a/components/files.html +++ b/components/files.html @@ -204,10 +204,15 @@ throw new Error('MicrobeTrace does not work on Internet Explorer.'); } + if(session.files.length > 0){ + $('#file-prompt').remove(); + session.files.forEach(addToTable); + } + $('#data-files').on('change', function(e){ var files = e.target.files; $('#file-prompt').remove(); - for(var i = 0, f; f = files[i]; i++) addFileToTable(f); + for(var i = 0, f; f = files[i]; i++) processFile(f); $('#main-submit').css('display', 'inline').focus(); }).filestyle({ text: 'Add File(s)', @@ -225,11 +230,11 @@ var files = evt.originalEvent.dataTransfer.files; var n = files.length; $('#file-prompt').remove(); - for(var i = 0, f; f = files[i]; i++) addFileToTable(f); + for(var i = 0, f; f = files[i]; i++) processFile(f); $('#main-submit').css('display', 'inline').focus(); }); - function addFileToTable(rawfile){ + function processFile(rawfile){ var extension = rawfile.name.split('.').pop().toLowerCase(); if(extension === 'zip'){ var new_zip = new JSZip(); @@ -255,108 +260,114 @@ var isXL = (extension === 'xlsx' || extension === 'xls'); fileto.promise(rawfile, isXL ? 'ArrayBuffer' : 'Text').then(function(file){ session.files.push(file); - var isFasta = (extension === 'fasta'); - var isNode = file.name.toLowerCase().includes('node'); - if(isXL){ - var workbook = XLSX.read(file.contents, {type: 'array'}); - var data = XLSX.utils.sheet_to_json(workbook.Sheets[workbook.SheetNames[0]]); - var headers = Object.keys(data[0]).map(filterXSS); - addTableTile(headers); - } else { - Papa.parse(file.contents, { - dynamicTyping: true, - header: true, - preview: 1, - complete: function(output){ - var headers = output.meta.fields.map(filterXSS); - addTableTile(headers); + addToTable(file); + }); + } + + function addToTable(file){ + var extension = file.name.split('.').pop(); + var isFasta = extension.indexOf('fas') > -1; + var isXL = (extension === 'xlsx' || extension === 'xls'); + var isNode = file.name.toLowerCase().includes('node'); + if(isXL){ + var workbook = XLSX.read(file.contents, {type: 'array'}); + var data = XLSX.utils.sheet_to_json(workbook.Sheets[workbook.SheetNames[0]]); + var headers = Object.keys(data[0]).map(filterXSS); + addTableTile(headers); + } else { + Papa.parse(file.contents, { + dynamicTyping: true, + header: true, + preview: 1, + complete: function(output){ + var headers = output.meta.fields.map(filterXSS); + addTableTile(headers); + } + }); + } + function addTableTile(headers){ + var root = $('
    '); + var fnamerow = $('
    '); + $('
    ') + .append($('').click(function(e){ + session.files.splice(session.files.indexOf(file.name), 1); + root.slideUp(function(){ root.remove(); }); + })) + .append(` ${file.name}`) + .appendTo(fnamerow); + fnamerow.append(` +
    + + + + +
    + `); + fnamerow.appendTo(root); + var optionsrow = $('
    '); + var options = '' + headers.map(function(h){ return ''; }).join('\n'); + optionsrow.append(` + + + `); + optionsrow.appendTo(root); + + function matchHeaders(type){ + var a = type === 'node' ? ['ID', 'Id', 'id'] : ['SOURCE', 'Source', 'source'], + b = type === 'node' ? ['SEQUENCE', 'SEQ', 'Sequence', 'sequence', 'seq'] : ['TARGET', 'Target', 'target'], + these = $(`[data-file='${file.name}'] select`); + [a, b].forEach(function(list, i){ + list.forEach(function(title){ + if(headers.includes(title)){ + $(these.get(i)).val(title); + } + }); + if($(these.get(i)).val() === 'None'){ + if(!(i === 1 && type === 'node')){ + $(these.get(i)).val(headers[i]); + } } }); } - function addTableTile(headers){ - var root = $('
    '); - var fnamerow = $('
    '); - $('
    ') - .append($('').click(function(e){ - session.files.splice(session.files.indexOf(file.name), 1); - root.slideUp(function(){ root.remove(); }); - })) - .append(` ${file.name}`) - .appendTo(fnamerow); - fnamerow.append(` -
    - - - - -
    - `); - fnamerow.appendTo(root); - var optionsrow = $('
    '); - var options = '' + headers.map(function(h){ return ''; }).join('\n'); - optionsrow.append(` - - - `); - optionsrow.appendTo(root); - - function matchHeaders(type){ - var a = type === 'node' ? ['ID', 'Id', 'id'] : ['SOURCE', 'Source', 'source'], - b = type === 'node' ? ['SEQUENCE', 'SEQ', 'Sequence', 'sequence', 'seq'] : ['TARGET', 'Target', 'target'], - these = $(`[data-file='${file.name}'] select`); - [a, b].forEach(function(list, i){ - list.forEach(function(title){ - if(headers.includes(title)){ - $(these.get(i)).val(title); - } - }); - if($(these.get(i)).val() === 'None'){ - if(!(i === 1 && type === 'node')){ - $(these.get(i)).val(headers[i]); - } - } - }); - } - root.appendTo('#file-table'); - matchHeaders($(`[name="options-${file.name}"]:checked`).data('type')); - - function refit(e){ - var type = $(e ? e.target : `[name="options-${file.name}"]:checked`).data('type'), - these = $(`[data-file='${file.name}']`), - first = $(these.get(0)), - second = $(these.get(1)); - if(type === 'node'){ - first.slideDown().find('label').text('ID'); - second.slideDown().find('label').text('Sequence'); - matchHeaders(type); - } else if(type === 'link'){ - first.slideDown().find('label').text('Source'); - second.slideDown().find('label').text('Target'); - matchHeaders(type); - } else { - these.slideUp(); - } + root.appendTo('#file-table'); + matchHeaders($(`[name="options-${file.name}"]:checked`).data('type')); + + function refit(e){ + var type = $(e ? e.target : `[name="options-${file.name}"]:checked`).data('type'), + these = $(`[data-file='${file.name}']`), + first = $(these.get(0)), + second = $(these.get(1)); + if(type === 'node'){ + first.slideDown().find('label').text('ID'); + second.slideDown().find('label').text('Sequence'); + matchHeaders(type); + } else if(type === 'link'){ + first.slideDown().find('label').text('Source'); + second.slideDown().find('label').text('Target'); + matchHeaders(type); + } else { + these.slideUp(); } - - $(`[name="options-${file.name}"]`).change(refit); - refit(); } - }); + + $(`[name="options-${file.name}"]`).change(refit); + refit(); + } } function readFastas(){ diff --git a/index.html b/index.html index fd79d229..90212c7f 100644 --- a/index.html +++ b/index.html @@ -40,7 +40,9 @@ - New +
    + Add Data + New
  • @@ -512,49 +514,22 @@ layout.contentItems = []; - app.launchView('files'); - // Let's set up the Nav Bar - $('#FileTab').on('click', function(){ - $('#exit-button').on('click', app.reset); - $('#exit-modal').modal(); - }); - - $('#save-data').on('click', function(){ - var name = $('#save-file-name').val(); - var format = $('#save-file-format').val(); - var data; - if(format === 'microbetracestyle'){ - data = JSON.stringify(session.style); - } else if(format === 'hivtrace'){ - data = app.exportHIVTRACE(); - } else { - data = JSON.stringify(session); - } - if($('#save-file-compress').is(':checked')){ - var zip = new JSZip(); - zip.file(name + '.' + format, data); - zip.generateAsync({ - type:"blob", - compression: "DEFLATE", - compressionOptions: { - level: 9 - }}).then(function(content) { - saveAs(content, name + '.zip'); - }); - } else { - var blob = new Blob([data], {type: 'application/json;charset=utf-8'}); - saveAs(blob, name + '.' + format); - } - }); - $('#stash-data').on('click', function(){ localforage.setItem('stash-'+Date.now()+'-'+$('#stash-name').val(), JSON.stringify(session)).then(function(){ alertify.success('Session Stashed Successfully!'); }); }); - var table; + var table = new Tabulator('#recall-stashes-available', { + height: '100%', + layout: "fitColumns", + selectable: 1, + columns: [ + {title:"Name", field:"name"}, + {title:"Date", field:"date", align:"right", sorter:"date"} + ] + }); function updateTable(){ localforage.keys().then(function(keys){ @@ -572,15 +547,6 @@ } $('#RecallDataTab').on('click', function(){ - table = new Tabulator('#recall-stashes-available', { - height: '100%', - layout: "fitColumns", - selectable: 1, - columns: [ - {title:"Name", field:"name"}, - {title:"Date", field:"date", align:"right", sorter:"date"} - ] - }); updateTable(); $('#session-recall-modal').modal('show'); }); @@ -601,6 +567,34 @@ }); }); + $('#save-data').on('click', function(){ + var name = $('#save-file-name').val(); + var format = $('#save-file-format').val(); + var data; + if(format === 'microbetracestyle'){ + data = JSON.stringify(session.style); + } else if(format === 'hivtrace'){ + data = app.exportHIVTRACE(); + } else { + data = JSON.stringify(session); + } + if($('#save-file-compress').is(':checked')){ + var zip = new JSZip(); + zip.file(name + '.' + format, data); + zip.generateAsync({ + type:"blob", + compression: "DEFLATE", + compressionOptions: { + level: 9 + }}).then(function(content) { + saveAs(content, name + '.zip'); + }); + } else { + var blob = new Blob([data], {type: 'application/json;charset=utf-8'}); + saveAs(blob, name + '.' + format); + } + }); + $('#OpenTab').on('change', function(e){ if(e.target.files.length > 0){ var extension = e.target.files[0].name.split('.').pop().toLowerCase(); @@ -625,6 +619,16 @@ } }); + $('#AddDataTab').on('click', function(){ + app.launchView('files'); + }); + + $('#NewTab').on('click', function(){ + $('#exit-modal').modal(); + }); + + $('#exit-button').on('click', app.reset); + $('.viewbutton').on('click', function(){ app.launchView($(this).data('href')); }); $('#ReloadTab').on('click', function(){ @@ -932,6 +936,8 @@ $(window).trigger('node-selected'); }); + app.launchView('files'); + $(document).on('keydown', function(e){ if(e.ctrlKey && e.key === 'f'){ e.preventDefault(); From 3657c0c971929cfc7dec495e22f94ce3d98d3e89 Mon Sep 17 00:00:00 2001 From: Tony Boyles Date: Fri, 14 Dec 2018 16:33:27 -0500 Subject: [PATCH 10/22] Added fileto to cache --- microbetrace.appcache | 3 ++- sw.js | 3 ++- 2 files changed, 4 insertions(+), 2 deletions(-) diff --git a/microbetrace.appcache b/microbetrace.appcache index bc773956..7af6f368 100644 --- a/microbetrace.appcache +++ b/microbetrace.appcache @@ -1,5 +1,5 @@ CACHE MANIFEST -# 2018-12-12 +# 2018-12-14 CACHE: index.html @@ -38,6 +38,7 @@ node_modules/bootstrap/dist/js/bootstrap.min.js node_modules/alertifyjs/build/alertify.min.js node_modules/golden-layout/dist/goldenlayout.min.js node_modules/chosen-js/chosen.jquery.min.js +node_modules/fileto/index.js node_modules/screenfull/dist/screenfull.js node_modules/clipboard/dist/clipboard.min.js node_modules/moment/min/moment-with-locales.min.js diff --git a/sw.js b/sw.js index 490ec001..812b82e8 100644 --- a/sw.js +++ b/sw.js @@ -1,4 +1,4 @@ -var CACHE = 'MicrobeTraceD2018-12-12'; +var CACHE = 'MicrobeTraceD2018-12-14'; self.addEventListener('install', function(event) { event.waitUntil( @@ -39,6 +39,7 @@ self.addEventListener('install', function(event) { 'node_modules/alertifyjs/build/alertify.min.js', 'node_modules/golden-layout/dist/goldenlayout.min.js', 'node_modules/chosen-js/chosen.jquery.min.js', + 'node_modules/fileto/index.js', 'node_modules/screenfull/dist/screenfull.js', 'node_modules/clipboard/dist/clipboard.min.js', 'node_modules/moment/min/moment-with-locales.min.js', From c39c3cb9673b4839dd9521856af79f4786f3a557 Mon Sep 17 00:00:00 2001 From: Tony Boyles Date: Fri, 14 Dec 2018 16:49:25 -0500 Subject: [PATCH 11/22] Hid Network Statistics on Add Data --- index.html | 1 + 1 file changed, 1 insertion(+) diff --git a/index.html b/index.html index 90212c7f..783e367c 100644 --- a/index.html +++ b/index.html @@ -620,6 +620,7 @@ }); $('#AddDataTab').on('click', function(){ + $('#network-statistics-hide').trigger('click'); app.launchView('files'); }); From 86b468b6f8b15d2673dff2627f4801e1ef8823b6 Mon Sep 17 00:00:00 2001 From: Tony Boyles Date: Fri, 14 Dec 2018 17:00:17 -0500 Subject: [PATCH 12/22] Added a little button to enable saving Original files from MicrobeTrace Sessions --- components/files.html | 4 ++++ 1 file changed, 4 insertions(+) diff --git a/components/files.html b/components/files.html index fa83bb1f..0f29cf7f 100644 --- a/components/files.html +++ b/components/files.html @@ -293,6 +293,10 @@ session.files.splice(session.files.indexOf(file.name), 1); root.slideUp(function(){ root.remove(); }); })) + .append($('').on('click', function(e){ + let blob = new Blob([file.contents], {type: file.type | 'text'}); + saveAs(blob, file.name); + })) .append(` ${file.name}`) .appendTo(fnamerow); fnamerow.append(` From 4d05806809137a01883e81f79d0316b203e83bd3 Mon Sep 17 00:00:00 2001 From: Tony Boyles Date: Mon, 17 Dec 2018 10:37:34 -0500 Subject: [PATCH 13/22] Got Link List Distances partially working --- components/files.html | 20 +++++++++++++++----- scripts/common.js | 2 +- 2 files changed, 16 insertions(+), 6 deletions(-) diff --git a/components/files.html b/components/files.html index 0f29cf7f..25eed6b4 100644 --- a/components/files.html +++ b/components/files.html @@ -319,22 +319,27 @@ var optionsrow = $('
    '); var options = '' + headers.map(function(h){ return ''; }).join('\n'); optionsrow.append(` -
  • - Coloring + Styling
    • @@ -267,7 +267,7 @@
    Global Configurations
    -
    +
    From 522210938d12988bcb3603bfffb8e0b313677ba1 Mon Sep 17 00:00:00 2001 From: Tony Boyles Date: Mon, 17 Dec 2018 16:49:57 -0500 Subject: [PATCH 18/22] Switched overflowing radio list for select --- components/2d_network.html | 61 ++++++++++++++++++++++++++++++++++---- 1 file changed, 55 insertions(+), 6 deletions(-) diff --git a/components/2d_network.html b/components/2d_network.html index d24f1187..c8c70e79 100644 --- a/components/2d_network.html +++ b/components/2d_network.html @@ -40,12 +40,24 @@
    -
    +
    +
    +
    Orientation
    +
    + +
    +
    @@ -151,6 +163,8 @@
    +
    +
    @@ -164,8 +178,6 @@
    - -
    @@ -733,10 +745,42 @@
    Export Network Image
    if(labelVar === 'None'){ nodes.text(''); } else { - let size = session.style.widgets['node-label-size']; + let size = session.style.widgets['node-label-size'], + orientation = session.style.widgets['node-label-orientation']; nodes .text(n => n[labelVar]) .style('font-size', size + 'px'); + switch(orientation){ + case 'Left': + nodes + .attr('text-anchor', 'end') + .attr('dx', -8) + .attr('dy', size/2); + break; + case 'Top': + nodes + .attr('text-anchor', 'middle') + .attr('dx', 0) + .attr('dy', -size); + break; + case 'Bottom': + nodes + .attr('text-anchor', 'middle') + .attr('dx', 0) + .attr('dy', size); + break; + case 'Middle': + nodes + .attr('text-anchor', 'middle') + .attr('dx', 0) + .attr('dy', size/2); + break; + default: //'right' + nodes + .attr('text-anchor', 'start') + .attr('dx', 8) + .attr('dy', size/2); + } } } @@ -752,9 +796,9 @@
    Export Network Image
    $('#node-label-variable').on('change', e => { session.style.widgets['node-label-variable'] = e.target.value; if(e.target.value === 'None'){ - $('#node-label-row').slideUp(); + $('.node-label-row').slideUp(); } else { - $('#node-label-row').css('display', 'flex'); + $('.node-label-row').css('display', 'flex'); } redrawLabels(); }); @@ -764,6 +808,11 @@
    Export Network Image
    redrawLabels(); }); + $('#node-label-orientation').on('change', e => { + session.style.widgets['node-label-orientation'] = e.target.value; + redrawLabels(); + }); + $('#node-tooltip-variable').on('change', e => { session.style.widgets['node-tooltip-variable'] = e.target.value; }); From 8058523a21328e194bc2b97be43e6260fc3f3e46 Mon Sep 17 00:00:00 2001 From: Tony Boyles Date: Tue, 18 Dec 2018 09:43:17 -0500 Subject: [PATCH 19/22] Removed network autofitting on layoutchange Per request from @billswitzer2 --- components/2d_network.html | 1 - 1 file changed, 1 deletion(-) diff --git a/components/2d_network.html b/components/2d_network.html index c8c70e79..ecb0797b 100644 --- a/components/2d_network.html +++ b/components/2d_network.html @@ -1083,7 +1083,6 @@
    Export Network Image
    let wrapper = $('#network').parent(); $('#network-export-width' ).val(wrapper.width()); $('#network-export-height').val(wrapper.height()); - setTimeout(fit, 1200); }); if(session.files.length > 1) $('#link-color-variable').val('origin').change(); From 3236c92ccd8bf2b7a0535100d6af167bd7aa0ebb Mon Sep 17 00:00:00 2001 From: Tony Boyles Date: Tue, 18 Dec 2018 11:20:37 -0500 Subject: [PATCH 20/22] Added Link Labels Resolves #45 --- components/2d_network.html | 73 +++++++++++++++++++++++++++++++------- scripts/common.js | 1 + 2 files changed, 61 insertions(+), 13 deletions(-) diff --git a/components/2d_network.html b/components/2d_network.html index ecb0797b..76eef76a 100644 --- a/components/2d_network.html +++ b/components/2d_network.html @@ -121,6 +121,10 @@
    +
    +
    +
    +
    Color
    @@ -150,6 +154,10 @@
    +
    +
    +
    +
    @@ -179,20 +187,16 @@
    -
    -
    -
    -
    -
    -
    +
    +
    -
    -
    +
    +
    @@ -341,11 +345,11 @@
    Export Network Image
    height = $('#network').parent().parent().parent().height(); d3.select('svg#network') - .html(null) //Let's make sure the canvas is blank. - .attr('height', height) - .attr('width', width) - .on('click', hideContextMenu) - .call(zoom); + .html(null) //Let's make sure the canvas is blank. + .attr('height', height) + .attr('width', width) + .on('click', hideContextMenu) + .call(zoom); d3.select('svg#network') .append('g') @@ -450,8 +454,17 @@
    Export Network Image
    .on('mouseenter', showLinkToolTip) .on('mouseout', hideTooltip); + let llinks = getLLinks(); + let linklabel = svg.select('g#links').selectAll('text').data(llinks); + linklabel.exit().remove(); + linklabel.enter().append('text') + .attr('text-anchor', 'middle') + .attr('dy', session.style.widgets['link-width'] + 2) + .text(l => l[session.style.widgets['link-label-variable']]); + let nodes = svg.select('g#nodes').selectAll('g.node').data(session.network.nodes); let links = svg.select('g#links').selectAll('line').data(vlinks); + let linklabels = svg.select('g#links').selectAll('text').data(llinks); force.nodes(session.network.nodes).on('tick', function(){ nodes .attr('transform', d => d.fixed ? `translate(${d.fx}, ${d.fy})` : `translate(${d.x}, ${d.y})`); @@ -460,6 +473,12 @@
    Export Network Image
    .attr('y1', l => l.source.y) .attr('x2', l => l.target.x) .attr('y2', l => l.target.y); + if(session.style.widgets['link-label-variable'] !== 'None'){ + linklabels + .attr('x', l => (l.source.x + l.target.x)/2) + .attr('y', l => (l.source.y + l.target.y)/2) + .attr('transform', l => 'rotate('+calcAngle(l.source, l.target)+' '+(l.source.x + l.target.x)/2+' '+(l.source.y + l.target.y)/2+')'); + } }); force.force('link').links(vlinks); @@ -470,6 +489,13 @@
    Export Network Image
    force.alpha(0.3).alphaTarget(0).restart(); } + function calcAngle(source, target){ + let opposite = source.x - target.x; + let adjacent = source.y - target.y; + let degrees = Math.atan(opposite / adjacent) * 180 / Math.PI; + return (degrees < 180) ? 90-degrees : 270-degrees; + } + function getVLinks(){ let vlinks = app.getVisibleLinks(true); let output = []; @@ -507,6 +533,16 @@
    Export Network Image
    return output; } + function getLLinks(){ + let vlinks = app.getVisibleLinks(true); + let n = vlinks.length; + for(let i = 0; i < n; i++){ + vlinks[i].source = session.network.nodes.find(d => d.id === vlinks[i].source); + vlinks[i].target = session.network.nodes.find(d => d.id === vlinks[i].target); + } + return vlinks; + } + let selected, multidrag = false; function dragstarted(n){ @@ -891,6 +927,17 @@
    Export Network Image
    session.style.widgets['link-directed'] = false; }); + $('#link-label-variable').on('change', e => { + let label = e.target.value; + session.style.widgets['link-label-variable'] = label; + if(label === 'None'){ + svg.select('g#links').selectAll('text').text(''); + } else { + svg.select('g#links').selectAll('text').data(getLLinks()).text(l => l[label]); + force.alpha(0.01).alphaTarget(0).restart(); + } + }); + $('#link-length').on('input', e => { let v = parseFloat(e.target.value); force.force('link').distance(e.target.value); diff --git a/scripts/common.js b/scripts/common.js index eba2607e..77eebbcb 100644 --- a/scripts/common.js +++ b/scripts/common.js @@ -43,6 +43,7 @@ app.defaultWidgets = { 'link-color': '#a6cee3', 'link-color-variable': 'None', 'link-directed': false, + 'link-label-variable': 'None', 'link-length': 0.125, 'link-opacity': 0, 'link-tooltip-variable': 'None', From d80dc01d3b166b90b993068229de19e9a02dc244 Mon Sep 17 00:00:00 2001 From: Tony Boyles Date: Tue, 18 Dec 2018 12:21:49 -0500 Subject: [PATCH 21/22] Set Link Lists to cast their distance Columns as session.state.linkSortVariable --- components/files.html | 10 +++++----- scripts/common.js | 2 +- 2 files changed, 6 insertions(+), 6 deletions(-) diff --git a/components/files.html b/components/files.html index 25eed6b4..ad2531cb 100644 --- a/components/files.html +++ b/components/files.html @@ -319,15 +319,15 @@ var optionsrow = $('
    '); var options = '' + headers.map(function(h){ return ''; }).join('\n'); optionsrow.append(` -