added missing html files, minified some

marschall-lab · Aug 23, 2023 · cf1b08d · cf1b08d
1 parent 7b69e7b
commit cf1b08d
Show file tree

Hide file tree

Showing 18 changed files with 435 additions and 17 deletions.
diff --git a/Cargo.toml b/Cargo.toml
@@ -1,6 +1,6 @@
 [package]
 name        = "panacus"
-version     = "0.2.1"
+version     = "0.2.2"
 edition     = "2018"
 rust-version= "1.60"
 

diff --git a/README.md b/README.md
@@ -49,23 +49,23 @@ mamba install -c conda-forge -c bioconda panacus
 ### From binary release 
 #### Linux x86\_64
 ```shell
-wget --no-check-certificate -c https://github.com/marschall-lab/panacus/releases/download/0.2.1/panacus-0.2.1_linux_x86_64.tar.gz
-tar -xzvf panacus-0.2.1_linux_x86_64.tar.gz
+wget --no-check-certificate -c https://github.com/marschall-lab/panacus/releases/download/0.2.2/panacus-0.2.2_linux_x86_64.tar.gz
+tar -xzvf panacus-0.2.2_linux_x86_64.tar.gz
 
 # suggestion: add tool to path in your ~/.bashrc
-export PATH="$(readlink -f panacus-0.2.1_linux_x86_64/bin)":$PATH
+export PATH="$(readlink -f panacus-0.2.2_linux_x86_64/bin)":$PATH
 
 # you are ready to go! 
 panacus --help
 ```
 
 #### Mac OSX arm64
 ```shell
-wget --no-check-certificate -c https://github.com/marschall-lab/panacus/releases/download/0.2.1/panacus-0.2.1_macos_arm64.tar.gz
-tar -xzvf panacus-0.2.1_macos_arm64.tar.gz
+wget --no-check-certificate -c https://github.com/marschall-lab/panacus/releases/download/0.2.2/panacus-0.2.2_macos_arm64.tar.gz
+tar -xzvf panacus-0.2.2_macos_arm64.tar.gz
 
 # suggestion: add tool to path in your ~/.bashrc
-export PATH="$(readlink -f panacus-0.2.1_macos_arm64/bin)":$PATH
+export PATH="$(readlink -f panacus-0.2.2_macos_arm64/bin)":$PATH
 
 # you are ready to go! 
 panacus --help

diff --git a/etc/bootstrap.bundle.min.js b/etc/bootstrap.bundle.min.js
diff --git a/etc/bootstrap.custom.scss b/etc/bootstrap.custom.scss
@@ -0,0 +1,11 @@
+$primary: #375a7f;
+$secondary: #444;
+$success: #00bc8c;
+$info: #3498db;
+$warning: #f39c12;
+$danger: #e74c3c;
+$light: #adb5bd;
+$dark: #303030;
+
+@import "./node_modules/bootstrap/scss/bootstrap";
+
diff --git a/etc/bootstrap.min.css b/etc/bootstrap.min.css
diff --git a/etc/chart.js b/etc/chart.js
diff --git a/etc/color-modes.min.js b/etc/color-modes.min.js
diff --git a/etc/custom.css b/etc/custom.css
@@ -0,0 +1,10 @@
+.bi {
+    fill: currentColor;
+}
+.carousel-control-prev-icon {
+    background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='%23646668' viewBox='0 0 8 8'%3E%3Cpath d='M5.25 0l-4 4 4 4 1.5-1.5-2.5-2.5 2.5-2.5-1.5-1.5z'/%3E%3C/svg%3E") !important;
+}
+
+.carousel-control-next-icon {
+    background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='%23646668' viewBox='0 0 8 8'%3E%3Cpath d='M2.75 0l-1.5 1.5 2.5 2.5-2.5 2.5 1.5 1.5 4-4-4-4z'/%3E%3C/svg%3E") !important;
+}
diff --git a/etc/hook_after.js b/etc/hook_after.js
@@ -0,0 +1,147 @@
+/* global bootstrap: false */
+(() => {
+'use strict'
+const tooltipTriggerList = Array.from(document.querySelectorAll('[data-bs-toggle="tooltip"]'))
+tooltipTriggerList.forEach(tooltipTriggerEl => {
+new bootstrap.Tooltip(tooltipTriggerEl)
+})
+})()
+
+const plots = hists.concat(growths);
+
+const pluginCanvasBackgroundColor = {
+  id: 'customCanvasBackgroundColor',
+  beforeDraw: (chart, args, options) => {
+    const {ctx, chartArea: { top, bottom, left, right, width, height },
+        scales: {x, y}
+    } = chart;
+    ctx.save();
+    ctx.globalCompositeOperation = 'destination-over';
+    ctx.fillStyle = options.color || '#99ffff';
+    ctx.fillRect(left, top, width, height);
+    ctx.restore();
+  }
+}
+
+for (let i=0; i < hists.length; i++) {
+    var h = hists[i];
+    var ctx = document.getElementById('chart-hist-' + h.count);
+    var myChart = new Chart(ctx, {
+        type: 'bar',
+        data: {
+            labels: h.index,
+            datasets: [{
+                label: fname,
+                data: h.coverage,
+                borderWidth: 1,
+                backgroundColor: PCOLORS[0],
+                borderColor: '#FFFFFF'
+            }]
+        },
+        options: {
+            scales: {
+                y: {
+                    title: {
+                        display: true,
+                        text: '#' + h.count + 's',
+                    },
+                    beginAtZero: true,
+                    grid: {
+                        color: '#FFFFFF',
+                    }
+                },
+                x: {
+                    title: {
+                        display: true,
+                        text: 'taxa',
+                    },
+                    grid: {
+                        color: '#FFFFFF',
+                    },
+                    ticks: {
+                        maxRotation: 90,
+                        minRotation: 65
+                    }
+                },
+            },
+            plugins: {
+                customCanvasBackgroundColor: {
+                    color: '#E5E4EE',
+                }
+            }
+        },
+        plugins: [pluginCanvasBackgroundColor],
+    });
+    buildPlotDownload(myChart, h, fname);
+    buildHistTableDownload(myChart, h, fname);
+    buildLogToggle(myChart, h);
+}
+
+
+for (let i=0; i < growths.length; i++) {
+    var g = growths[i];
+    var ctx = document.getElementById('chart-growth-' + g.count);
+    var myChart = new Chart(ctx, {
+        type: 'bar',
+        data: {
+            labels: g.index,
+            datasets: Array.from(g.getThresholds().entries()).reverse().map(function([i, [c, q]]) {
+                return {
+                    label: 'coverage \u2265 ' + c + ', quorum \u2265 ' + (q*100).toFixed(0) + '%',
+                    data: g.getGrowthFor(c, q),
+                    borderWidth: 1,
+                    backgroundColor: PCOLORS[i % PCOLORS.length],
+                    borderColor: '#FFFFFF'
+                };
+            }),
+        },
+        options: {
+            scales: {
+                y: {
+                    title: {
+                        display: true,
+                        text: '#' + g.count + 's',
+                    },
+                    beginAtZero: true,
+                    grid: {
+                        color: '#FFFFFF',
+                    }, 
+                    stacked: false,
+                },
+                x: {
+                    title: {
+                        display: true,
+                        text: 'taxa',
+                    },
+                    grid: {
+                        color: '#FFFFFF',
+                    },
+                    ticks: {
+                        maxRotation: 90,
+                        minRotation: 65
+                    },
+                    stacked: true,
+                },
+            },
+            plugins: {
+                customCanvasBackgroundColor: {
+                    color: '#E5E4EE',
+                }
+            }
+        },
+        plugins: [pluginCanvasBackgroundColor],
+    });
+    buildPlotDownload(myChart, g, fname);
+    buildGrowthTableDownload(myChart, g, fname);
+}
+
+var tabs = document.querySelectorAll('button[data-bs-toggle="tab"]')
+tabs.forEach(function(tab) {
+    tab.addEventListener('show.bs.tab', function (event) {
+        document.querySelector(event.target.dataset.bsTarget).classList.remove('d-none');
+        document.querySelector(event.relatedTarget.dataset.bsTarget).classList.add('d-none');
+    });
+});
+
+
+
diff --git a/etc/hook_after.min.js b/etc/hook_after.min.js
diff --git a/etc/lib.js b/etc/lib.js
@@ -0,0 +1,122 @@
+/*!
+  * Panacus JS library 
+  */
+
+const PCOLORS = ['#f77189', '#bb9832', '#50b131', '#36ada4', '#3ba3ec', '#e866f4'];
+
+class Hist {
+    constructor(count_type, index, coverage) {
+        this.count = count_type;
+        this.index = index;
+        this.coverage = coverage;
+    }
+}
+
+
+class Growth {
+    constructor(count_type, index, coverage_t, quorum_t, growths) {
+        this.count = count_type; 
+        this.index = index;
+        this.growths = {};
+        var srt = [];
+        for (let i = 0; i < coverage_t.length; i++) {
+            let t = [coverage_t[i], quorum_t[i]];
+            srt[i] = [quorum_t[i], coverage_t[i]];
+            this.growths[t] = growths[i];
+        }
+        srt.sort();
+        this.coverage_t = srt.map(([q, c]) => c);
+        this.quorum_t = srt.map(([q, c]) => q);
+    }
+
+    getThresholds() {
+        let ts = [];
+        for (let i = 0; i < this.coverage_t.length; i++) {
+            ts[i] = [this.coverage_t[i], this.quorum_t[i]];
+        }
+
+        return ts;
+    }
+
+    getGrowthFor(c, q) {
+        return this.growths[[c, q]];
+    }
+}
+
+
+function buildPlotDownload(chart, obj, prefix) {
+    document.getElementById('btn-download-plot-' + obj.constructor.name.toLowerCase() + '-' + obj.count).onclick = function() {
+        var a = document.createElement('a');
+        a.href = chart.toBase64Image();
+        a.download = prefix + '_' + obj.constructor.name.toLowerCase() + '_' + obj.count + '.png';
+        a.click();
+    };
+}
+
+
+function buildHistTableDownload(chart, obj, prefix) {
+    document.getElementById('btn-download-table-hist-' + obj.count).onclick = function() {
+
+        var table = 'panacus\thist\ncount\t' + obj.count + '\n\t\n\t\n';
+
+        for (var i=0; i < obj.index.length; i++) {
+            table += obj.index[i] + '\t' + obj.coverage[i] + '\n';
+        }
+
+        let blob = new Blob([table], {type: 'text/plain'});
+        var a = document.createElement('a');
+        a.href = URL.createObjectURL(blob);
+        a.download = prefix + '_hist_' + obj.count + '.tsv';
+        a.click();
+    };
+}
+
+
+function buildGrowthTableDownload(chart, obj, prefix) {
+    document.getElementById('btn-download-table-growth-' + obj.count).onclick = function() {
+
+        var table = '';
+
+        var thresholds = obj.getThresholds();
+        var growths = 'panacus\tgrowth' 
+        var counts = '\ncount\t' + obj.count 
+        cs = '\ncoverage\t' + thresholds[0][0];
+        qs = '\nquorum\t' + thresholds[0][1];
+        zero = '\n0\tNaN'
+        for (var i=1; i < thresholds.length; i++) {
+            growths += '\tgrowth';
+            counts += '\t' + obj.count;
+            cs += '\t' + thresholds[i][0];
+            qs += '\t' + thresholds[i][1];
+            zero += '\tNaN';
+        }
+        table += growths + counts + cs + qs + zero + '\n';
+
+        for (var i=0; i < obj.index.length; i++) {
+            table += obj.index[i];
+            for (var j=0; j < thresholds.length; j++) {
+                table += '\t' + obj.getGrowthFor(thresholds[j][0], thresholds[j][1])[i];
+            }
+            table += '\n';
+        }
+
+        let blob = new Blob([table], {type: 'text/plain'});
+        var a = document.createElement('a');
+        a.href = URL.createObjectURL(blob);
+        a.download = prefix + '_growth_' + obj.count + '.tsv';
+        a.click();
+    };
+}
+
+
+function buildLogToggle(chart, obj) {
+    document.getElementById('btn-logscale-plot-' + obj.constructor.name.toLowerCase() + '-' + obj.count).addEventListener('change', function(event) {
+        if (event.currentTarget.checked) {
+            chart.options.scales.y.type = 'logarithmic';
+        } else {
+            chart.options.scales.y.type = 'linear';
+        }
+        chart.update();
+    });
+}
+
diff --git a/etc/lib.min.js b/etc/lib.min.js
diff --git a/etc/make_custom_bootstrap.sh b/etc/make_custom_bootstrap.sh
@@ -0,0 +1,13 @@
+#!/usr/bin/bash
+
+npm install bootstrap
+npm install -g sass
+npm install -g css-minify
+npm install -g uglify-js 
+
+sass bootstrap.custom.scss bootstrap.custom.css
+
+css-minfy -f bootstrap.custom.css 
+uglifyjs lib.js > lib.min.js
+uglifyjs hook_after.js > hook-after.min.js
+
diff --git a/etc/panacus-illustration-small.png b/etc/panacus-illustration-small.png