Merge pull request #2349 from merenlab/lib-to-npm

Lib to npm
merenlab · Oct 4, 2024 · 4451fc6 · 4451fc6
2 parents eac8ba7 + 9a99979
commit 4451fc6
Show file tree

Hide file tree

Showing 119 changed files with 247 additions and 292 deletions.
diff --git a/.gitignore b/.gitignore
@@ -8,6 +8,8 @@
 /build/
 /dist/
 test-output/
+node_modules/
+package-lock.json
 /*.egg-info/
 anvio/__pycache__/
 anvio/extensions/concoct/vbgmm.c

diff --git a/.gitmodules b/.gitmodules
diff --git a/anvio/data/interactive/charts.html b/anvio/data/interactive/charts.html
@@ -10,27 +10,26 @@
         <meta http-equiv="pragma" content="no-cache" />
         <meta name="google" value="notranslate">
         <link rel="stylesheet" type="text/css" href="css/loading.css" />
-        <link rel="stylesheet" href="lib/bootstrap/dist/css/bootstrap.css" />
+        <link rel="stylesheet" href="./node_modules/bootstrap/dist/css/bootstrap.css" />
         <link rel="stylesheet" type="text/css" href="css/charts.css" />
-        <link rel="stylesheet" href="lib/toastr/build/toastr.min.css" type="text/css" />
+        <link rel="stylesheet" href="./node_modules/toastr/build/toastr.min.css" type="text/css" />
         <link rel="stylesheet" type="text/css" href="css/popover.css" />
         <link rel="stylesheet" href="lib/colpick/colpick.css" type="text/css" />
         <link rel="shortcut icon" href="#" />
         <link href='https://fonts.googleapis.com/css?family=Lato:300,700' rel='stylesheet' type='text/css' />
         <link rel="stylesheet" type="text/css" href="css/inspection.css" /> 
         <!--[if lte IE 8]><style>.main{display:none;} .support-note .note-ie{display:block;}</style><![endif]-->
          <script type="text/javascript" src="js/utils.js"></script>
-        <script type="text/javascript" src="lib/jquery/dist/jquery.min.js"></script>
-        <script type="text/javascript" src="lib/d3.js/d3.min.js"></script>
-        <script type="text/javascript" src="lib/popperjs/popper.min.js"></script>
-        <script type="text/javascript" src="lib/bootstrap/dist/js/bootstrap.bundle.min.js"></script>
+        <script type="text/javascript" src="./node_modules/jquery/dist/jquery.min.js"></script>
+        <script type="text/javascript" src="./node_modules/d3/d3.min.js"></script>
+        <script type="text/javascript" src="./node_modules/bootstrap/dist/js/bootstrap.bundle.min.js"></script>
         <script type="text/javascript" src="lib/colpick/colpick.js"></script>
         <script type="text/javascript" src="js/charts.js"></script>
         <script type="text/javascript" src="js/inspectionutils.js"></script>
-        <script type="text/javascript" src="lib/toastr/build/toastr.min.js"></script>
-        <script type="text/javascript" src="lib/bootstrap-waitingfor/build/bootstrap-waitingfor.js"></script>
+        <script type="text/javascript" src="./node_modules/toastr/build/toastr.min.js"></script>
+        <script type="text/javascript" src="./node_modules/bootstrap-waitingfor/build/bootstrap-waitingfor.js"></script>
         <script type="text/javascript" src="js/constants.js"></script>
-        <link rel="stylesheet" href="lib/bootstrap-icons/font/bootstrap-icons.min.css" type="text/css">
+        <link rel="stylesheet" href="./node_modules/bootstrap-icons/font/bootstrap-icons.min.css" type="text/css">
         <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css">
     </head>
     <body onload="loadAll();">

diff --git a/anvio/data/interactive/contigs.html b/anvio/data/interactive/contigs.html
@@ -3,12 +3,12 @@
 <head>
     <title>Contigs DB Stats</title>
     <meta name="google" value="notranslate">
-    <script type="text/javascript" src="lib/jquery/dist/jquery.min.js"></script>
+    <script type="text/javascript" src="./node_modules/jquery/dist/jquery.min.js"></script>
     <script type='text/javascript' src='js/utils.js'></script>
-    <script type='text/javascript' src='lib/d3.js/d3.min.js'></script>
+    <script type='text/javascript' src='./node_modules/d3/d3.min.js'></script>
     <script type='text/javascript' src='js/contigs-plot.js'></script>
-    <link rel="stylesheet" href="lib/bootstrap/dist/css/bootstrap.css" />
-    <script type="text/javascript" src="lib/bootstrap/dist/js/bootstrap.bundle.js"></script>
+    <link rel="stylesheet" href="./node_modules/bootstrap/dist/css/bootstrap.css" />
+    <script type="text/javascript" src="./node_modules/bootstrap/dist/js/bootstrap.bundle.min.js"></script>
     <link rel="stylesheet" type="text/css" href="css/contigs-plot.css" />
     <script type="text/javascript">
         var contigs_stats;

diff --git a/anvio/data/interactive/css/main.css b/anvio/data/interactive/css/main.css
@@ -293,6 +293,7 @@ html, body, #wrapper {
 
 .toggle-panel-left-pos {
     left: 560px;
+    z-index: 1;
 }
 
 #toggle-panel-left:hover {
@@ -1183,6 +1184,11 @@ position: relative;
 @include btn-border-drawing(#58afd1, #ffe593, 4px, bottom, right);
 }
 
+.disabled{
+    pointer-events:none;
+    opacity:0.6;
+}
+
 @media only screen and (min-width:1440px){
     /* styles for browsers larger than 1460px; */
     *:not(text) {

diff --git a/anvio/data/interactive/geneclusters.html b/anvio/data/interactive/geneclusters.html
@@ -9,21 +9,19 @@
         <meta http-equiv="pragma" content="no-cache" />
         <meta name="google" value="notranslate">
         <link rel="stylesheet" type="text/css" href="css/loading.css" />
-        <link rel="stylesheet" href="lib/bootstrap/dist/css/bootstrap.css" />
+        <link rel="stylesheet" href="./node_modules/bootstrap/dist/css/bootstrap.css" />
         <link rel="stylesheet" type="text/css" href="css/geneclusters.css" />
-        <link rel="stylesheet" href="lib/toastr/build/toastr.min.css" type="text/css" />
-        <link rel="stylesheet" href="lib/bootstrap-icons/font/bootstrap-icons.min.css" type="text/css">
+        <link rel="stylesheet" href="./node_modules/toastr/build/toastr.min.css" type="text/css" />
         <link href='https://fonts.googleapis.com/css?family=Lato:300,700' rel='stylesheet' type='text/css' />
         <!--[if lte IE 8]><style>.main{display:none;} .support-note .note-ie{display:block;}</style><![endif]-->	
          <script type="text/javascript" src="js/utils.js"></script>
-        <script type="text/javascript" src="lib/jquery/dist/jquery.min.js"></script>
-        <script type="text/javascript" src="lib/d3.js/d3.min.js"></script>
-        <script type="text/javascript" src="lib/popperjs/popper.min.js"></script>
-        <script type="text/javascript" src="lib/bootstrap/dist/js/bootstrap.bundle.js"></script>
+        <script type="text/javascript" src="./node_modules/jquery/dist/jquery.min.js"></script>
+        <script type="text/javascript" src="./node_modules/d3/d3.min.js"></script>
+        <script type="text/javascript" src="./node_modules/bootstrap/dist/js/bootstrap.bundle.js"></script>
         <script type="text/javascript" src="js/color-coding.js"></script>
         <script type="text/javascript" src="js/geneclusters.js"></script>
         <script type="text/javascript" src="js/inspectionutils.js"></script>
-        <script type="text/javascript" src="lib/toastr/build/toastr.min.js"></script>
+        <script type="text/javascript" src="./node_modules/toastr/build/toastr.min.js"></script>
         <script type="text/javascript" src="js/constants.js"></script>
     </head>
     <body onload="loadAll();">

diff --git a/anvio/data/interactive/index.html b/anvio/data/interactive/index.html
@@ -11,37 +11,38 @@
     <meta http-equiv="pragma" content="no-cache" />
     <meta name="google" value="notranslate">
     <meta name="viewport" content="width=device-width, initial-scale=1">
-    <link rel="stylesheet" href="lib/bootstrap/dist/css/bootstrap.css" />
+    <link rel="stylesheet" href="./node_modules/bootstrap/dist/css/bootstrap.css" />
     <link rel="stylesheet" href="lib/colpick/colpick.css" type="text/css" />
-    <link rel="stylesheet" href="lib/bootstrap-icons/font/bootstrap-icons.min.css" type="text/css">
-    <link rel="stylesheet" href="lib/toastr/build/toastr.min.css" type="text/css" />
+
+    <!-- Import packages from node_modules -->
+    <link rel="stylesheet" href="./node_modules/bootstrap-icons/font/bootstrap-icons.min.css" />
+    <link rel="stylesheet" href="./node_modules/toastr/build/toastr.min.css" type="text/css" />
     <link rel="icon" type="image/png" href="images/logo-simple.png">
     <script type="text/javascript" src="js/error.js"></script>
 
-    <script type="text/javascript" src="lib/jquery/dist/jquery.min.js" onerror='alertDependencyError("jquery-core")'></script>
-    <link href="lib/jquery-ui/themes/base/all.css" rel="stylesheet">
-    <script type="text/javascript" src="lib/popperjs/popper.min.js"></script>
-    <script type="text/javascript" src="lib/bootstrap/dist/js/bootstrap.bundle.js" onerror='alertDependencyError("bootstrap-core")'></script>
+    <script type="text/javascript" src="./node_modules/jquery/dist/jquery.min.js" onerror='alertDependencyError("jquery-core")'></script>
+    <script type="text/javascript" src="./node_modules/bootstrap/dist/js/bootstrap.bundle.js" onerror='alertDependencyError("bootstrap-core")'></script>
     <link rel="stylesheet" href="css/main.css" type="text/css" />
     <link rel="preconnect" href="https://fonts.googleapis.com">
     <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
 
+    <script>$.uiBackCompat = false; //Do not change the order of jquery-ui files</script>
+    <script type="text/javascript" src="./node_modules/jquery-ui/ui/widget.js" onerror='alertDependencyError("jquery-widget")'></script>
+    <script type="text/javascript" src="./node_modules/jquery-ui/ui/widgets/mouse.js" onerror='alertDependencyError("jquery-mouse")'></script>
+    <script type="text/javascript" src="./node_modules/jquery-ui/ui/plugin.js" onerror='alertDependencyError("jquery-plugin")'></script>
+    <script type="text/javascript" src="./node_modules/jquery-ui/ui/widgets/draggable.js" onerror='alertDependencyError("jquery-draggable")'></script>
+    <script type="text/javascript" src="./node_modules/jquery-ui/ui/widgets/resizable.js" onerror='alertDependencyError("jquery-core")'></script>
+    <script type="text/javascript" src="./node_modules/jquery-ui/ui/widgets/sortable.js" onerror='alertDependencyError("jquery-sortable")'></script>
+    <script type="text/javascript" src="./node_modules/jquery-ui/ui/position.js" onerror='alertDependencyError("jquery-position")'></script>
+
     <script type="text/javascript" src="lib/jquery-svgpan/jquery-svgpan.js" onerror='alertDependencyError("jquery-svg")'></script>
-    <script type="text/javascript" src="lib/jquery-ui/ui/core.js" onerror='alertDependencyError("jquery-core")'></script>
-    <script type="text/javascript" src="lib/jquery-ui/ui/widget.js" onerror='alertDependencyError("jquery-widget")'></script>
-    <script type="text/javascript" src="lib/jquery-ui/ui/mouse.js" onerror='alertDependencyError("jquery-mouse")'></script>
-    <script type="text/javascript" src="lib/jquery-ui/ui/sortable.js" onerror='alertDependencyError("jquery-sortable")'></script>
-    <script type="text/javascript" src="lib/jquery-ui/ui/draggable.js" onerror='alertDependencyError("jquery-draggable")'></script>
-    <script type="text/javascript" src="lib/jquery-ui/ui/accordion.js" onerror='alertDependencyError("jquery-accordian")'></script>
-    <script type="text/javascript" src="lib/jquery-ui/ui/resizable.js" onerror='alertDependencyError("jquery-resizable")'></script>
-    <script type="text/javascript" src="lib/jquery-ui/ui/button.js" onerror='alertDependencyError("jquery-button")'></script>
-    <script type="text/javascript" src="lib/jquery-ui/ui/position.js" onerror='alertDependencyError("jquery-position")'></script>
-    <script type="text/javascript" src="lib/randomColor/randomColor.js" onerror='alertDependencyError("random-color")'></script>
+    <script type="text/javascript" src="./node_modules/html5sortable/dist/html5sortable.min.js" onerror='alertDependencyError("html5sortable")'></script>
+    <script type="text/javascript" src="./node_modules/randomcolor/randomColor.js" onerror='alertDependencyError("random-color")'></script>
     <script type="text/javascript" src="lib/svg-crowbar/svg-crowbar.js"onerror='alertDependencyError("svg-crowbar")'></script>
-    <script type="text/javascript" src="lib/bootstrap-waitingfor/build/bootstrap-waitingfor.js" onerror='alertDependencyError("bootstrap-waitingfor")'></script>
-    <script type="text/javascript" src="lib/JavaScript-MD5/js/md5.js" onerror='alertDependencyError("md5")'></script>
+    <script type="text/javascript" src="./node_modules/bootstrap-waitingfor/build/bootstrap-waitingfor.js" onerror='alertDependencyError("bootstrap-waitingfor")'></script>
+    <script type="text/javascript" src="./node_modules/blueimp-md5/js/md5.js" onerror='alertDependencyError("md5")'></script>
     <script type="text/javascript" src="lib/colpick/colpick.js" onerror='alertDependencyError("col-picker")'></script>
-    <script type="text/javascript" src="lib/toastr/build/toastr.min.js" onerror='alertDependencyError("toastr")'></script>
+    <script type="text/javascript" src="./node_modules/toastr/build/toastr.min.js" onerror='alertDependencyError("toastr")'></script>
 
     <script type="text/javascript" src="js/utils.js"></script>
     <script type="text/javascript" src="js/main.js"></script>
@@ -66,14 +67,14 @@
     <script type="text/javascript" src="js/migrations.js"></script>
     <script type="text/javascript" src="js/inspectionutils.js"></script>
 
-    <!-- Table sorter, source: https://github.com/drvic10k/bootstrap-sortable -->
-    <script type="text/javascript" src="lib/bootstrap-sortable/Scripts/bootstrap-sortable.js" onerror='alertDependencyError("bootstrap-sortable")' defer></script>
-    <link href="lib/bootstrap-sortable/Contents/bootstrap-sortable.css" rel="stylesheet">
+    <!-- Table sorter -->
+    <link href="./node_modules/sortable-tablesort/sortable.min.css" rel="stylesheet">
+    <script type="text/javascript" src="./node_modules/sortable-tablesort/sortable.min.js" onerror='alertDependencyError("table-sorter")'></script>
     <!-- /Table sorter -->
 
-    <script type="text/javascript" src="lib/marked/lib/marked.js" onerror='alertDependencyError("marked")'></script>
-    <link rel="stylesheet" href="lib/bootstrap-markdown/css/bootstrap-markdown.min.css" type="text/css" />
-    <script type="text/javascript" src="lib/bootstrap-markdown/js/bootstrap-markdown.js" onerror='alertDependencyError("bootstrap-markdown", true)' onload='alertDependencyError(null, true)'></script>
+    <script type="text/javascript" src="./node_modules/marked/marked.min.js" onerror='alertDependencyError("marked")'></script>
+    <link rel="stylesheet" href="./node_modules/bootstrap-markdown/css/bootstrap-markdown.min.css" type="text/css" />
+    <script type="text/javascript" src="./node_modules/bootstrap-markdown/js/bootstrap-markdown.js" onerror='alertDependencyError("bootstrap-markdown", true)' onload='alertDependencyError(null, true)'></script>
     <link rel="stylesheet" href="css/markdown-local.css" type="text/css" />
     <link rel="stylesheet" type="text/css" href="css/loading.css" />
     <link rel="stylesheet" type="text/css" href="css/glowing-button.css" />
@@ -854,7 +855,7 @@ <h5 class="modal-title" id="define-range-modal-label">Define multiple threshold
                                     </p>
                                 </div>
 
-                                <table class="table sortable" id="bins-table">
+                                <table class="table" id="bins-table">
                                     <thead id="thead_bins">
                                         <tr>
                                             <th data-defaultsort='disabled'><span class="new-bin-icon bi bi-plus-circle-fill fa-lg" aria-hidden="true" alt="Add bins" title="Add bins" onClick="bins.NewBin();"></span></th>

diff --git a/anvio/data/interactive/js/bin.js b/anvio/data/interactive/js/bin.js
@@ -93,7 +93,7 @@ Bins.prototype.NewBin = function(id, binState) {
                        `}
                        <td><center><span class="default-bin-icon bi bi-trash-fill fa-lg" aria-hidden="true" alt="Delete this bin" title="Delete this bin" onClick="bins.DeleteBin(${id});"></span></center></td>
                     </tr>
-                    ${ mode === 'full' || mode === 'refine' || mode === 'manual' ? `<tr style="${ $('#estimate_taxonomy').is(':checked') ? `` : `display: none;`}" data-parent="${id}">
+                    ${ mode === 'full' || mode === 'refine' || mode === 'manual' || mode === 'pan' ? `<tr style="${ $('#estimate_taxonomy').is(':checked') ? `` : `display: none;`}" data-parent="${id}">
                     <td style="border-top: 0px;">&nbsp;</td>
                     <td style="border-top: 0px;">&nbsp;</td>
                     <td colspan="6" style="border-top: 0px; padding-top: 0px;">

diff --git a/anvio/data/interactive/js/error.js b/anvio/data/interactive/js/error.js
@@ -16,8 +16,8 @@ let ERROR_COUNT = 0
 const issueCategories = [
     {
         'category' : 'Dependencies failed to load',
-        'content' : `This can occur when git submodules that Anvi'o relies on fail to load. If you are tracking the main development branch of Anvi'o,
-        try running <b> git submodule update --init </b>`
+        'content' : `This can occur when npm packages that Anvi'o relies on fail to load. 
+        Try running <b> npm install </b> in the <b>anvio/data/interactive</b> directory.`
     },
     {
         'category' : 'ReferenceError - ___ is not defined',