diff --git a/dev/index.html b/dev/index.html
new file mode 100644
index 0000000..b5512a4
--- /dev/null
+++ b/dev/index.html
@@ -0,0 +1,3908 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+
+    <!-- Google tag (gtag.js) -->
+    <script async src="https://www.googletagmanager.com/gtag/js?id=G-VNXC3S1LH2"></script>
+    <script>
+        window.dataLayer = window.dataLayer || [];
+        function gtag() { dataLayer.push(arguments); }
+        gtag('js', new Date());
+
+        gtag('config', 'G-VNXC3S1LH2');
+    </script>
+
+    <!-- Google Tag Manager -->
+    <script>(function (w, d, s, l, i) {
+            w[l] = w[l] || []; w[l].push({
+                'gtm.start':
+                    new Date().getTime(), event: 'gtm.js'
+            }); var f = d.getElementsByTagName(s)[0],
+                j = d.createElement(s), dl = l != 'dataLayer' ? '&l=' + l : ''; j.async = true; j.src =
+                    'https://www.googletagmanager.com/gtm.js?id=' + i + dl; f.parentNode.insertBefore(j, f);
+        })(window, document, 'script', 'dataLayer', 'GTM-N5RW3TB3');</script>
+    <!-- End Google Tag Manager -->
+
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Snipe SRA Exploration Dashboard</title>
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/PapaParse/5.3.0/papaparse.min.js"></script>
+    <script src="https://cdn.plot.ly/plotly-2.35.2.min.js"></script>
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/jspdf/2.5.1/jspdf.umd.min.js"></script>
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/lz-string/1.4.4/lz-string.min.js"></script>
+    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.6.0/css/all.min.css">
+    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
+    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/noUiSlider/14.6.3/nouislider.min.css">
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/noUiSlider/14.6.3/nouislider.min.js"></script>
+
+
+    <!-- Driver.js CSS and JS -->
+    <script src="https://cdn.jsdelivr.net/npm/driver.js@1.0.1/dist/driver.js.iife.js"></script>
+    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/driver.js@1.0.1/dist/driver.css" />
+
+    <style>
+        body {
+            font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
+            margin: 0;
+            padding: 0;
+            background: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%);
+            min-height: 100vh;
+        }
+
+        .container {
+            background-color: white;
+            padding: 2rem;
+            border-radius: 15px;
+            box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
+            width: 90%;
+            max-width: 1200px;
+            margin: 2rem auto;
+        }
+
+        h1,
+        h2 {
+            color: #2c3e50;
+            text-align: center;
+            margin-bottom: 2rem;
+            font-size: 2.5rem;
+            text-transform: uppercase;
+            letter-spacing: 2px;
+        }
+
+        h2 {
+            font-size: 1.8rem;
+            margin-top: 2rem;
+        }
+
+
+        select[multiple] {
+            height: auto;
+        }
+
+        /* Adjust the plot container to accommodate the controls */
+        .plot-container {
+            margin-top: 1rem;
+            margin-bottom: 3rem;
+        }
+
+
+
+        /* END: CHECKBOXES in Assay type */
+
+
+
+        label {
+            font-weight: bold;
+            margin-bottom: 0.5rem;
+            color: #34495e;
+        }
+
+        select {
+            padding: 10px;
+            font-size: 16px;
+            border-radius: 8px;
+            border: 1px solid #bdc3c7;
+            background-color: #ecf0f1;
+            transition: all 0.3s ease;
+        }
+
+        select:focus {
+            outline: none;
+            box-shadow: 0 0 0 2px #3498db;
+        }
+
+        .plot {
+            width: 100%;
+            height: 600px;
+            border-radius: 8px;
+            overflow: hidden;
+            box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
+            margin-bottom: 2rem;
+        }
+
+        .table-container {
+            width: 100%;
+            overflow-x: auto;
+        }
+
+        table {
+            width: 100%;
+            border-collapse: collapse;
+            margin-top: 2rem;
+        }
+
+        th,
+        td {
+            border: 1px solid #ddd;
+            padding: 8px;
+            text-align: left;
+        }
+
+        th {
+            background-color: #f2f2f2;
+            font-weight: bold;
+        }
+
+        tr:nth-child(even) {
+            background-color: #f9f9f9;
+        }
+
+        #plots-container {
+            margin-bottom: 2rem;
+        }
+
+        #data-selection-section {
+            margin-top: 2rem;
+            padding-top: 2rem;
+            border-top: 2px solid #3498db;
+        }
+
+        #table-container {
+            max-height: 400px;
+            overflow-y: auto;
+            margin-top: 1rem;
+        }
+
+        .additional-inputs {
+            margin-top: 1.5rem;
+            padding: 1rem;
+            background-color: #f9fbfd;
+            border: 1px solid #dce1e6;
+            border-radius: 8px;
+        }
+
+        .title-input,
+        .notes-textarea {
+            width: 100%;
+            padding: 12px;
+            font-size: 14px;
+            border: 1px solid #bdc3c7;
+            border-radius: 5px;
+            transition: all 0.3s ease;
+            font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
+        }
+
+        .title-input:focus,
+        .notes-textarea:focus {
+            outline: none;
+            border-color: #3498db;
+            box-shadow: 0 0 5px rgba(52, 152, 219, 0.5);
+        }
+
+        .notes-textarea {
+            min-height: 100px;
+            resize: vertical;
+        }
+
+
+
+
+
+        .notes-container label {
+            display: block;
+            margin-bottom: 0.5rem;
+            font-weight: bold;
+        }
+
+        /* Updated styling for the search bar */
+        .search-container {
+            display: flex;
+            align-items: center;
+            margin-bottom: 1rem;
+        }
+
+        .search-container input[type="text"] {
+            flex: 1;
+            padding: 10px;
+            font-size: 16px;
+            border: 1px solid #bdc3c7;
+            border-radius: 5px;
+            margin-right: 10px;
+        }
+
+        .search-container button {
+            /* Existing styles */
+            padding: 10px 20px;
+            font-size: 16px;
+            color: white;
+            background-color: #3498db;
+            border: none;
+            border-radius: 5px;
+            cursor: pointer;
+            /* Add pulse animation */
+            animation: pulse 2s infinite;
+        }
+
+        .search-container button:hover {
+            background-color: #2980b9;
+        }
+
+
+        #search-input {
+            flex: 1;
+            padding: 10px;
+            font-size: 16px;
+            border: 1px solid #bdc3c7;
+            border-radius: 5px;
+            margin-right: 10px;
+        }
+
+        #search-button {
+            padding: 10px 20px;
+            font-size: 16px;
+            color: white;
+            background-color: #0beac5;
+            border: none;
+            border-radius: 5px;
+            cursor: pointer;
+        }
+
+        #search-button:hover {
+            background-color: #2980b9;
+        }
+
+        .export-buttons {
+            display: flex;
+            justify-content: space-between;
+            margin-top: 1rem;
+        }
+
+        /* Enhanced button styles */
+        .button {
+            padding: 10px 20px;
+            font-size: 14px;
+            color: white;
+            background-color: #3498db;
+            border: none;
+            border-radius: 5px;
+            cursor: pointer;
+            transition: all 0.3s ease;
+            margin-right: 10px;
+            display: inline-flex;
+            align-items: center;
+            justify-content: center;
+            text-transform: uppercase;
+            font-weight: 600;
+            letter-spacing: 0.5px;
+            box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
+        }
+
+        .button:hover {
+            background-color: #2980b9;
+            box-shadow: 0 4px 6px rgba(0, 0, 0, 0.15);
+        }
+
+        .button::before {
+            font-family: "Font Awesome 5 Free";
+            font-weight: 900;
+            margin-right: 8px;
+        }
+
+
+        /* START: FLOATING BUTTON*/
+
+        /* Floating Buttons Container */
+        .floating-buttons {
+            position: fixed;
+
+            /* Floating Button Style */
+            .floating-button {
+                background-color: #e74c3c;
+                /* Default color, overridden per button */
+                color: white;
+                border: none;
+                padding: 10px;
+                border-radius: 50%;
+                /* Make it circular */
+                cursor: pointer;
+                display: flex;
+                align-items: center;
+                justify-content: flex-start;
+                transition: width 0.3s ease, border-radius 0.3s ease;
+                width: 50px;
+                /* Initial width to fit the icon */
+                height: 50px;
+                /* Fixed height */
+                overflow: hidden;
+                /* Hide text initially */
+                position: relative;
+            }
+
+            .floating-button i {
+                font-size: 24px;
+                /* Icon size */
+                /* margin-left: 10px; */
+                margin: 0;
+                /* Center the icon */
+
+            }
+
+            .floating-button span {
+                opacity: 0;
+                /* Hide text initially */
+                margin-left: 10px;
+                transition: opacity 0.3s ease;
+                white-space: nowrap;
+            }
+
+            .floating-button:hover {
+                width: 200px;
+                /* Expand width on hover */
+                border-radius: 25px;
+                /* Rounded rectangle when expanded */
+            }
+
+            .floating-button:hover span {
+                opacity: 1;
+                /* Show text on hover */
+            }
+
+            /* Individual Button Styles */
+            #clear-selections {
+                background-color: #e74c3c;
+            }
+
+            #clear-selections:hover {
+                background-color: #c0392b;
+            }
+
+            #export-table {
+                background-color: #f39c12;
+            }
+
+            #export-table:hover {
+                background-color: #d35400;
+            }
+
+            #export-pdf {
+                background: linear-gradient(-45deg, #405de6, #5851db, #833ab4, #c13584);
+                background-size: 400% 400%;
+                animation: gradientAnimation 15s ease infinite;
+            }
+
+            #export-pdf:hover {
+                background-size: 200% 200%;
+            }
+
+            #scroll-to-table {
+                background-color: #9b59b6;
+            }
+
+            #scroll-to-table:hover {
+                background-color: #8e44ad;
+            }
+
+            right: 20px;
+            top: 50%;
+            transform: translateY(-50%);
+            display: flex;
+            flex-direction: column;
+            gap: 10px;
+            z-index: 1000;
+            align-items: flex-end;
+        }
+
+
+        /* Floating Button Style */
+        .floating-button {
+            background-color: #e74c3c;
+            /* Default color, overridden per button */
+            color: white;
+            border: none;
+            padding: 10px;
+            border-radius: 50%;
+            /* Make it circular */
+            cursor: pointer;
+            display: flex;
+            align-items: center;
+            justify-content: flex-start;
+            transition: width 0.3s ease, border-radius 0.3s ease;
+            width: 50px;
+            /* Initial width to fit the icon */
+            height: 50px;
+            /* Fixed height */
+            overflow: hidden;
+            /* Hide text initially */
+            position: relative;
+        }
+
+        .floating-button i {
+            font-size: 20px;
+            /* Icon size */
+            margin-left: 10px;
+        }
+
+        .floating-button span {
+            opacity: 0;
+            /* Hide text initially */
+            margin-left: 10px;
+            transition: opacity 0.3s ease;
+            white-space: nowrap;
+        }
+
+        .floating-button:hover {
+            width: 200px;
+            /* Expand width on hover */
+            border-radius: 25px;
+            /* Rounded rectangle when expanded */
+        }
+
+        .floating-button:hover span {
+            opacity: 1;
+            /* Show text on hover */
+        }
+
+        /* Individual Button Styles */
+        #clear-selections {
+            background-color: #e74c3c;
+        }
+
+        #clear-selections:hover {
+            background-color: #c0392b;
+        }
+
+        #export-table {
+            background-color: #f39c12;
+        }
+
+        #export-table:hover {
+            background-color: #d35400;
+        }
+
+        #export-pdf {
+            background: linear-gradient(-45deg, #405de6, #5851db, #833ab4, #c13584);
+            background-size: 400% 400%;
+            animation: gradientAnimation 15s ease infinite;
+        }
+
+        #export-pdf:hover {
+            background-size: 200% 200%;
+        }
+
+        #scroll-to-table {
+            background-color: #9b59b6;
+        }
+
+        #scroll-to-table:hover {
+            background-color: #8e44ad;
+        }
+
+        #help-button {
+            background-color: #3498db;
+        }
+
+        /* Gradient Animation */
+        @keyframes gradientAnimation {
+            0% {
+                background-position: 0% 50%;
+            }
+
+            50% {
+                background-position: 100% 50%;
+            }
+
+            100% {
+                background-position: 0% 50%;
+            }
+        }
+
+        /* Responsive Adjustments */
+        @media (max-width: 768px) {
+            .floating-buttons {
+                right: 10px;
+            }
+
+            .floating-button:hover {
+                width: 160px;
+                /* Reduce expansion width */
+            }
+        }
+
+        @media (max-width: 480px) {
+            .floating-buttons {
+                right: 5px;
+            }
+
+            .floating-button:hover {
+                width: 140px;
+                /* Further reduce expansion */
+            }
+        }
+
+
+        @keyframes gradientAnimation {
+            0% {
+                background-position: 0% 50%;
+            }
+
+            50% {
+                background-position: 100% 50%;
+            }
+
+            100% {
+                background-position: 0% 50%;
+            }
+        }
+
+        /* DRIVERJS */
+
+
+        .driver-popover.driverjs-theme {
+            background-color: #fde047;
+            color: #000;
+        }
+
+        .driver-popover.driverjs-theme .driver-popover-title {
+            font-size: 20px;
+        }
+
+        .driver-popover.driverjs-theme .driver-popover-title,
+        .driver-popover.driverjs-theme .driver-popover-description,
+        .driver-popover.driverjs-theme .driver-popover-progress-text {
+            color: #000;
+        }
+
+        .driver-popover.driverjs-theme button {
+            flex: 1;
+            text-align: center;
+            background-color: #000;
+            color: #ffffff;
+            border: 2px solid #000;
+            text-shadow: none;
+            font-size: 14px;
+            padding: 5px 8px;
+            border-radius: 6px;
+        }
+
+        .driver-popover.driverjs-theme button:hover {
+            background-color: #000;
+            color: #ffffff;
+        }
+
+        .driver-popover.driverjs-theme .driver-popover-navigation-btns {
+            justify-content: space-between;
+            gap: 3px;
+        }
+
+        /* Hide the close button */
+        .driver-popover.driverjs-theme .driver-popover-close-btn {
+            display: none;
+        }
+
+        .driver-popover.driverjs-theme .driver-popover-arrow-side-left.driver-popover-arrow {
+            border-left-color: #fde047;
+        }
+
+        .driver-popover.driverjs-theme .driver-popover-arrow-side-right.driver-popover-arrow {
+            border-right-color: #fde047;
+        }
+
+        .driver-popover.driverjs-theme .driver-popover-arrow-side-top.driver-popover-arrow {
+            border-top-color: #fde047;
+        }
+
+        .driver-popover.driverjs-theme .driver-popover-arrow-side-bottom.driver-popover-arrow {
+            border-bottom-color: #fde047;
+        }
+
+        /* END: DRIVERJS */
+
+        /* START: HELP AREA */
+
+        /* Modal overlay */
+        .modal {
+            display: none;
+            /* Hidden by default */
+            position: fixed;
+            z-index: 1001;
+            left: 0;
+            top: 0;
+            width: 100%;
+            height: 100%;
+            backdrop-filter: blur(5px);
+            background-color: rgba(0, 0, 0, 0.5);
+            align-items: center;
+            justify-content: center;
+            overflow: hidden;
+            flex-direction: column;
+            /* Ensure column layout for centering */
+        }
+
+        /* Modal content */
+        .modal-content {
+            background: rgba(255, 255, 255, 0.95);
+            padding: 30px;
+            border-radius: 15px;
+            width: 80%;
+            max-width: 800px;
+            font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
+            box-shadow: 0 15px 30px rgba(0, 0, 0, 0.2);
+            position: relative;
+            text-align: left;
+            /* Center content */
+        }
+
+        /* Close button */
+        .close-button {
+            color: #aaa;
+            position: absolute;
+            top: 20px;
+            right: 25px;
+            font-size: 30px;
+            font-weight: bold;
+            cursor: pointer;
+            transition: color 0.3s ease;
+        }
+
+        .close-button:hover,
+        .close-button:focus {
+            color: #333;
+            text-decoration: none;
+            cursor: pointer;
+        }
+
+        /* Modal header */
+        .modal-content h2 {
+            margin-top: 0;
+            color: #2c3e50;
+            font-size: 2rem;
+            text-transform: uppercase;
+            letter-spacing: 1px;
+        }
+
+        /* Styling for the help button */
+        /* Styling for the help button */
+        .help-button {
+            background-color: #426b5f;
+            border: none;
+            border-radius: 25px;
+            cursor: pointer;
+            color: white;
+            font-size: 18px;
+            font-weight: bold;
+            padding: 10px 20px;
+            transition: background-color 0.3s ease, transform 0.2s ease;
+            box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            /* Center the text and icon inside the button */
+            height: 50px;
+            /* Set a fixed height for consistent appearance */
+        }
+
+        .help-button i {
+            font-size: 24px;
+            margin-right: 8px;
+        }
+
+        .help-button:hover {
+            background-color: #2980b9;
+            transform: scale(1.05);
+            box-shadow: 0 6px 12px rgba(0, 0, 0, 0.3);
+        }
+
+        .help-button:focus {
+            outline: none;
+            box-shadow: 0 0 5px 2px rgba(52, 152, 219, 0.5);
+        }
+
+
+        .control-group .help-button {
+            margin-left: 20px;
+            /* Space it out from the rest of the controls */
+            width: auto;
+            /* Auto width for better flexibility */
+            height: auto;
+        }
+
+
+
+        /* Column definitions inside modal */
+        #modal-column-definitions {
+            margin-top: 2rem;
+            max-height: 70vh;
+            overflow-y: auto;
+        }
+
+        /* Styles for the definitions list */
+        #modal-column-definitions dl {
+            margin: 0;
+        }
+
+        #modal-column-definitions dt {
+            font-weight: bold;
+            color: #34495e;
+            font-size: 1.1rem;
+            margin-top: 1rem;
+        }
+
+        #modal-column-definitions dd {
+            margin: 0 0 1rem 0;
+            color: #2c3e50;
+            font-size: 1rem;
+            line-height: 1.5;
+        }
+
+        /* Scrollbar styling (for WebKit browsers) */
+        #modal-column-definitions::-webkit-scrollbar {
+            width: 8px;
+        }
+
+        #modal-column-definitions::-webkit-scrollbar-track {
+            background: #f1f1f1;
+        }
+
+        #modal-column-definitions::-webkit-scrollbar-thumb {
+            background: #888;
+            border-radius: 4px;
+        }
+
+        #modal-column-definitions::-webkit-scrollbar-thumb:hover {
+            background: #555;
+        }
+
+        /* END: HELP AREA */
+
+        /* Styles for Species Selection */
+        .species-selection {
+            display: flex;
+            flex-wrap: wrap;
+            align-items: flex-start;
+            background-color: #f8f9fa;
+            padding: 1rem;
+            border-radius: 8px;
+            box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
+            margin-bottom: 2rem;
+        }
+
+        .species-selection .control-group {
+            flex: 1;
+            margin-right: 1rem;
+            min-width: 150px;
+            display: flex;
+            flex-direction: column;
+        }
+
+        .species-selection .control-group:last-child {
+            margin-right: 0;
+        }
+
+        .species-selection .control-group label {
+            margin-bottom: 0.5rem;
+            font-weight: 600;
+            color: #495057;
+            font-size: 0.9rem;
+        }
+
+        .species-selection .control-group select,
+        .species-selection button {
+            width: 100%;
+            padding: 0.5rem;
+            border: 1px solid #ced4da;
+            border-radius: 4px;
+            background-color: #fff;
+            font-size: 1rem;
+            color: #495057;
+            transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
+        }
+
+        .species-selection button {
+            margin-top: 1rem;
+            background-color: #3498db;
+            color: white;
+            cursor: pointer;
+            font-weight: bold;
+            text-transform: uppercase;
+            letter-spacing: 1px;
+        }
+
+        .species-selection button:disabled {
+            background-color: #bdc3c7;
+            cursor: not-allowed;
+        }
+
+        .species-selection select:focus,
+        .species-selection button:focus {
+            border-color: #80bdff;
+            outline: 0;
+            box-shadow: 0 0 0 0.2rem rgba(0, 123, 255, 0.25);
+        }
+
+        /* Gentle pulsing animation for Load Data button */
+        @keyframes gentlePulse {
+            0% {
+                transform: scale(1);
+                box-shadow: 0 0 0 0 rgba(46, 204, 113, 0.4);
+            }
+
+            50% {
+                transform: scale(1.05);
+                box-shadow: 0 0 15px 5px rgba(46, 204, 113, 0.3);
+            }
+
+            100% {
+                transform: scale(1);
+                box-shadow: 0 0 0 0 rgba(46, 204, 113, 0);
+            }
+        }
+
+        #load-data-button:not(:disabled) {
+            animation: gentlePulse 2.5s infinite;
+            transition: background-color 0.3s ease;
+            background-color: #2ecc71;
+            /* Professional green color */
+            padding: 10px 20px;
+            border: none;
+            border-radius: 5px;
+            cursor: pointer;
+            /*move the button a bit to down*/
+            margin-top: 25px;
+        }
+
+        #load-data-button:hover {
+            background-color: #27ae60;
+            /* Darken the color slightly on hover */
+        }
+
+        /* if disabled, also margin-top: 25px; */
+        #load-data-button:disabled {
+            background-color: #bdc3c7;
+            cursor: not-allowed;
+            margin-top: 25px;
+        }
+
+        /* Styles for Import/Export Floating Buttons */
+        #import-session,
+        #export-session,
+        #export-session-url {
+            background-color: #16a085;
+        }
+
+        #import-session:hover,
+        #export-session:hover,
+        #export-session-url:hover {
+            background-color: #138d75;
+        }
+
+        #add-view-container {
+            margin: 2rem 0;
+            text-align: center;
+            width: 100%;
+            position: relative;
+        }
+
+        .add-view-button {
+            display: inline-flex;
+            align-items: center;
+            justify-content: center;
+            background-color: transparent;
+            color: #3442db;
+            font-size: 1.2rem;
+            font-weight: bold;
+            padding: 10px 20px;
+            border: none;
+            cursor: pointer;
+            position: relative;
+            z-index: 1;
+            transition: color 0.3s ease;
+            background-color: white;
+            /* Added to avoid text overlap */
+            box-shadow: 0 0 5px rgba(0, 0, 0, 0.1);
+            /* Subtle shadow for button */
+            border-radius: 50px;
+            /* Rounded button for a more elegant look */
+        }
+
+        .add-view-button:hover {
+            color: #2980b9;
+            background-color: #ecf0f1;
+            /* Slight background color change on hover */
+        }
+
+        /* Horizontal divider line extending on both sides */
+        .add-view-button::before,
+        .add-view-button::after {
+            content: '';
+            position: absolute;
+            top: 50%;
+            width: 100px;
+            height: 1px;
+            background-color: #ccc;
+            transform: translateY(-50%);
+        }
+
+        .add-view-button::before {
+            left: -110px;
+            /* Adjust to move before the button */
+        }
+
+        .add-view-button::after {
+            right: -110px;
+            /* Adjust to move after the button */
+        }
+
+        /* Add the icon before the text */
+        .add-view-button i {
+            margin-right: 8px;
+            font-size: 1.5rem;
+        }
+
+
+
+
+        /* Notification Styles */
+        .notification {
+            background-color: #2ecc71;
+            color: white;
+            padding: 15px 25px;
+            border-radius: 5px;
+            margin-bottom: 10px;
+            font-size: 16px;
+            opacity: 0.9;
+            transition: opacity 0.5s ease-in-out;
+        }
+
+        .log-info {
+            font-family: monospace;
+            font-size: 14px;
+            background-color: #f9f9f9;
+            padding: 10px;
+            height: auto;
+            /* Adjusted height */
+            overflow-y: auto;
+            border: 1px solid #ccc;
+            white-space: pre-wrap;
+            width: 100%;
+            /* Ensure full width */
+        }
+
+
+        .controls-grid {
+            display: grid;
+            grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
+            gap: 1rem;
+            margin-bottom: 1rem;
+        }
+
+        .control-subgrid {
+            display: grid;
+            grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
+            gap: 0.5rem;
+        }
+
+        .control-item {
+            display: flex;
+            flex-direction: column;
+        }
+
+        .checkbox-group {
+            display: flex;
+            flex-wrap: wrap;
+            gap: 0.5rem;
+        }
+
+        .checkbox-label {
+            display: flex;
+            align-items: center;
+            font-size: 0.9rem;
+        }
+
+        .checkbox-label input {
+            margin-right: 0.25rem;
+        }
+
+        .plot-title {
+            text-align: center;
+            margin-bottom: 0.5rem;
+        }
+
+        .plot-container {
+            margin-bottom: 2rem;
+        }
+
+        .notes-container {
+            margin-top: 1rem;
+        }
+
+        .title-input,
+        .notes-textarea {
+            width: 100%;
+            padding: 8px;
+            font-size: 14px;
+            border: 1px solid #ccc;
+            border-radius: 4px;
+        }
+
+        .search-container {
+            display: flex;
+            align-items: center;
+            margin-top: 1rem;
+        }
+
+        .search-container input {
+            flex: 1;
+            padding: 8px;
+            font-size: 14px;
+            border: 1px solid #ccc;
+            border-radius: 4px;
+        }
+
+        .search-container .button {
+            margin-left: 0.5rem;
+        }
+
+        .button {
+            padding: 8px 12px;
+            font-size: 14px;
+            color: white;
+            background-color: #3498db;
+            border: none;
+            border-radius: 4px;
+            cursor: pointer;
+        }
+
+        .button:hover {
+            background-color: #2980b9;
+        }
+
+        /* Styles for the floating search button */
+
+        /* Styles for the floating search button */
+        .plot-area {
+            position: relative;
+        }
+
+
+        /* Styles for noUiSlider */
+        .range-slider {
+            margin-top: 10px;
+            margin-bottom: 10px;
+        }
+
+        .noUi-target {
+            background: #ecf0f1;
+            border-radius: 4px;
+        }
+
+
+        /* Styles for the floating search button */
+        .floating-search-button {
+            position: absolute;
+            top: 10px;
+            left: 10px;
+            z-index: 10;
+            display: flex;
+            align-items: center;
+        }
+
+        .search-button {
+            background-color: #2b2377;
+            color: white;
+            border: none;
+            padding: 8px;
+            border-radius: 4px 0 0 4px;
+            cursor: pointer;
+            transition: background-color 0.3s;
+        }
+
+        .search-input {
+            width: 0;
+            opacity: 0;
+            padding: 5px;
+            font-size: 14px;
+            border: 1px solid #bdc3c7;
+            border-left: none;
+            border-radius: 0 4px 4px 0;
+            transition: width 0.3s ease, opacity 0.3s ease;
+        }
+
+        .floating-search-button:hover .search-input {
+            width: 200px;
+            opacity: 1;
+        }
+    </style>
+</head>
+
+
+<!-- Help Modal -->
+<div id="help-modal" class="modal">
+    <div class="modal-content">
+        <span id="close-modal" class="close-button">&times;</span>
+        <h2>Snipe metrics description</h2>
+        <div id="modal-column-definitions">
+            <!-- Column definitions will be inserted here -->
+        </div>
+    </div>
+</div>
+
+<body>
+    <!-- Google Tag Manager (noscript) -->
+    <noscript><iframe src="https://www.googletagmanager.com/ns.html?id=GTM-N5RW3TB3" height="0" width="0"
+            style="display:none;visibility:hidden"></iframe></noscript>
+    <!-- End Google Tag Manager (noscript) -->
+
+    <!-- Updated Species and Reference Selection with Amplicon -->
+    <div class="container">
+        <h1>Snipe SRA Exploration Dashboard</h1>
+        <div id="data-selection-container" class="species-selection">
+            <div class="control-group">
+                <label for="species-select">Species:</label>
+                <select id="species-select">
+                    <option value="">Select Species</option>
+                    <!-- Options will be populated dynamically -->
+                </select>
+            </div>
+            <div class="control-group">
+                <label for="reference-select">Reference Genome:</label>
+                <select id="reference-select" disabled>
+                    <option value="">Select Reference Genome</option>
+                    <!-- Options will be populated dynamically -->
+                </select>
+            </div>
+            <div class="control-group">
+                <label for="amplicon-select">Amplicon (Optional):</label>
+                <select id="amplicon-select" disabled>
+                    <option value="">Select Amplicon (Optional)</option>
+                    <!-- Options will be populated dynamically -->
+                </select>
+            </div>
+            <div class="control-group">
+                <button id="load-data-button" disabled>Load Data</button>
+            </div>
+            <div id="log-info" class="log-info" style="display: none;">
+                <!-- Log information will be displayed here -->
+            </div>
+        </div>
+
+
+
+
+
+
+        <div id="plots-container"></div>
+        <!--<div class="export-buttons"><button id="add-view" class="button">Add View</button></div> -->
+
+        <div id="add-view-container" style="display: none;">
+            <button id="add-view" class="add-view-button">
+                <i class="fa fa-plus-circle"></i> Add View
+            </button>
+        </div>
+
+        <!-- <div class="export-buttons">
+            <button id="add-view" class="button">Add View</button>
+            <button id="clear-selections" class="button">Clear Selections</button>
+            <button id="export-table" class="button">Export Table (TSV)</button>
+        </div>
+    -->
+        <div id="data-selection-section">
+            <h2>Selected Data Points</h2>
+            <!-- <button id="export-pdf">Export Snipe Report</button> -->
+            <div id="table-container" class="table-container"></div>
+        </div>
+    </div>
+
+
+    <div class="floating-buttons">
+        <!-- ... existing floating buttons ... -->
+        <button id="clear-selections" class="floating-button">
+            <i class="fa fa-eraser"></i>
+            <span>Clear Selections</span>
+        </button>
+        <button id="export-table" class="floating-button">
+            <i class="fa fa-file-export"></i>
+            <span>Export Table (TSV)</span>
+        </button>
+        <button id="export-pdf" class="floating-button">
+            <i class="fa fa-file-pdf"></i>
+            <span>Export Snipe Report</span>
+        </button>
+        <button id="scroll-to-table" class="floating-button">
+            <i class="fa fa-arrow-down"></i>
+            <span>Scroll to Table</span>
+        </button>
+
+        <button id="help-button" class="floating-button">
+            <i class="fa-solid fa-circle-question"></i>
+            <span>Snipe metrics definitions</span>
+        </button>
+
+        <!-- driverJS -->
+        <button id="start-tour" class="floating-button">
+            <i class="fa fa-book"></i>
+            <span>Start Tour</span>
+        </button>
+        <!-- New Import/Export Session Buttons -->
+        <button id="export-session" class="floating-button">
+            <i class="fa fa-download"></i>
+            <span>Export Session</span>
+        </button>
+        <button id="import-session" class="floating-button">
+            <i class="fa fa-upload"></i>
+            <span>Import Session</span>
+        </button>
+
+        <button id="export-session-url" class="floating-button">
+            <i class="fa fa-link"></i>
+            <span>Export Session to URL</span>
+        </button>
+        <button id="upload-data" class="floating-button">
+            <i class="fa fa-upload"></i>
+            <span>Upload Data</span>
+        </button>
+
+    </div>
+
+    <script>
+        let data;
+        let currentPlotData;
+        let selectedPoints = [];
+        let plotsContainer, tableContainer, exportTableButton, clearSelectionsButton, addViewButton;
+        let plotCounter = 0;
+        let snipe_metadata = {};
+
+        const species_genome_amplicon_path = {
+            'Canine': {
+                'CanFam3.1': {
+                    'Exome': 'https://raw.githubusercontent.com/snipe-bio/dbs/refs/heads/main/qc_tables/Dog/canfam31_ychr_exome_rna_gtdb.tsv'
+                }
+            },
+            'Human': {
+                'GRCh38': {
+                    '': ''
+                },
+                'CHM13V2.0': {
+                    '': ''
+                }
+            },
+            'Zebrafish': {
+                'GRCz11': {
+                    '': ''
+                }
+            }
+        };
+
+        document.addEventListener('DOMContentLoaded', function () {
+            // Get references to the elements
+            const speciesSelect = document.getElementById('species-select');
+            const referenceSelect = document.getElementById('reference-select');
+            const ampliconSelect = document.getElementById('amplicon-select');
+            const loadDataButton = document.getElementById('load-data-button');
+            const dataSelectionContainer = document.getElementById('data-selection-container');
+
+            plotsContainer = document.getElementById('plots-container');
+            tableContainer = document.getElementById('table-container');
+            exportTableButton = document.getElementById('export-table');
+            clearSelectionsButton = document.getElementById('clear-selections');
+            addViewButton = document.getElementById('add-view');
+
+            exportTableButton.addEventListener('click', exportTableToTSV);
+            clearSelectionsButton.addEventListener('click', clearSelections);
+            addViewButton.addEventListener('click', addNewPlot);
+            document.getElementById('export-pdf').addEventListener('click', exportAllDataAsPDF);
+            document.getElementById('scroll-to-table').addEventListener('click', scrollToTable);
+
+            // Populate species options
+            for (const species in species_genome_amplicon_path) {
+                const option = document.createElement('option');
+                option.value = species;
+                option.textContent = species;
+                speciesSelect.appendChild(option);
+            }
+
+            // Set default selected species
+            speciesSelect.value = 'Canine';
+
+            // Event listener for species select
+            speciesSelect.addEventListener('change', function () {
+                const selectedSpecies = speciesSelect.value;
+
+                // Clear previous reference options
+                referenceSelect.innerHTML = '<option value="">Select Reference Genome</option>';
+                referenceSelect.disabled = true;
+
+                // Clear amplicon options
+                ampliconSelect.innerHTML = '<option value="">Select Amplicon (Optional)</option>';
+                ampliconSelect.disabled = true;
+
+                loadDataButton.disabled = true;
+
+                // Clear data and plots
+                clearAllData();
+
+                if (selectedSpecies) {
+                    const references = species_genome_amplicon_path[selectedSpecies];
+                    for (const reference in references) {
+                        const option = document.createElement('option');
+                        option.value = reference;
+                        option.textContent = reference;
+                        referenceSelect.appendChild(option);
+                    }
+                    referenceSelect.disabled = false;
+
+                    // Set default selected reference
+                    referenceSelect.value = 'CanFam3.1';
+
+                    // Trigger change event to populate amplicon
+                    referenceSelect.dispatchEvent(new Event('change'));
+                }
+            });
+
+            // Event listener for reference select
+            referenceSelect.addEventListener('change', function () {
+                const selectedSpecies = speciesSelect.value;
+                const selectedReference = referenceSelect.value;
+
+                // Clear previous amplicon options
+                ampliconSelect.innerHTML = '<option value="">Select Amplicon (Optional)</option>';
+                ampliconSelect.disabled = true;
+
+                loadDataButton.disabled = true;
+
+                // Clear data and plots
+                clearAllData();
+
+                if (selectedReference) {
+                    const amplicons = species_genome_amplicon_path[selectedSpecies][selectedReference];
+                    for (const amplicon in amplicons) {
+                        const option = document.createElement('option');
+                        option.value = amplicon;
+                        option.textContent = amplicon === '' ? 'No Amplicon' : amplicon;
+                        ampliconSelect.appendChild(option);
+                    }
+                    ampliconSelect.disabled = false;
+
+                    // Set default selected amplicon
+                    ampliconSelect.value = 'Amplicon';
+
+                    // Trigger change event to enable load data button
+                    ampliconSelect.dispatchEvent(new Event('change'));
+                }
+            });
+
+            // Event listener for amplicon select
+            ampliconSelect.addEventListener('change', function () {
+                const selectedSpecies = speciesSelect.value;
+                const selectedReference = referenceSelect.value;
+                const selectedAmplicon = ampliconSelect.value;
+
+                const dataFilePath = species_genome_amplicon_path[selectedSpecies][selectedReference][selectedAmplicon];
+
+                // Clear data and plots
+                clearAllData();
+
+                if (dataFilePath) {
+                    loadDataButton.disabled = false;
+                } else {
+                    loadDataButton.disabled = true;
+                }
+            });
+
+            // Event listener for load data button
+            loadDataButton.addEventListener('click', function () {
+                const selectedSpecies = speciesSelect.value;
+                const selectedReference = referenceSelect.value;
+                const selectedAmplicon = ampliconSelect.value;
+
+                const dataFilePath = species_genome_amplicon_path[selectedSpecies][selectedReference][selectedAmplicon];
+
+                if (dataFilePath) {
+                    loadData(dataFilePath);
+                } else {
+                    alert('Data not available for selected species, reference genome, and amplicon.');
+                }
+            });
+
+            // Event listeners for the new buttons
+            document.getElementById('export-session').addEventListener('click', exportSession);
+
+            // Event listener for the Export Session to URL button
+            document.getElementById('export-session-url').addEventListener('click', exportSessionToURL);
+
+            // Check if there's session data or user data in the URL
+            const urlParams = new URLSearchParams(window.location.search);
+            const sessionDataEncoded = urlParams.get('session');
+            const dataEncoded = urlParams.get('data');
+
+            let userData = null;
+            if (dataEncoded) {
+                const dataJSON = LZString.decompressFromEncodedURIComponent(dataEncoded);
+                if (dataJSON) {
+                    userData = JSON.parse(dataJSON);
+                } else {
+                    alert('Failed to load data from URL.');
+                }
+            }
+
+            if (sessionDataEncoded) {
+                // Case 1 or 3: Session URL present
+                const sessionDataJSON = LZString.decompressFromEncodedURIComponent(sessionDataEncoded);
+                if (sessionDataJSON) {
+                    importSession(sessionDataJSON, userData);
+                    if (userData) {
+                        // Hide data selection since user data is provided
+                        dataSelectionContainer.style.display = 'none';
+                    }
+                } else {
+                    alert('Failed to load session from URL.');
+                }
+            } else if (userData) {
+                // Case 2: Only data URL present
+                dataSelectionContainer.style.display = 'none'; // Hide data selection
+                loadUserData(userData);
+            } else {
+                // No session or data parameter, proceed as normal
+                // Show species selection, etc.
+                // Trigger initial species change to set defaults
+                speciesSelect.dispatchEvent(new Event('change'));
+            }
+
+            // Attach event listener to the "Start Tour" button
+            const startTourButton = document.getElementById('start-tour');
+            startTourButton.addEventListener('click', function () {
+                startTour();
+            });
+
+            const helpButton = document.getElementById('help-button');
+            const helpModal = document.getElementById('help-modal');
+            const closeModalButton = document.getElementById('close-modal');
+
+            helpButton.addEventListener('click', function () {
+                helpModal.style.display = 'flex'; // Show the modal using flex layout
+            });
+
+            closeModalButton.addEventListener('click', function () {
+                helpModal.style.display = 'none'; // Hide the modal
+            });
+
+            window.addEventListener('click', function (event) {
+                if (event.target === helpModal) {
+                    helpModal.style.display = 'none'; // Hide modal when clicking outside the content
+                }
+            });
+
+            // Event listener for the Import Session button
+            document.getElementById('import-session').addEventListener('click', function () {
+                const importSessionModal = document.getElementById('import-session-modal');
+                importSessionModal.style.display = 'flex';
+            });
+
+            // Event listener for the close button in the modal
+            document.getElementById('import-session-close').addEventListener('click', function () {
+                const importSessionModal = document.getElementById('import-session-modal');
+                importSessionModal.style.display = 'none';
+            });
+
+            // Event listener for the Import Session confirm button
+            document.getElementById('import-session-confirm').addEventListener('click', function () {
+                const fileInput = document.getElementById('session-file-input');
+                const textarea = document.getElementById('session-textarea');
+                if (fileInput.files.length > 0) {
+                    // Read the file
+                    const file = fileInput.files[0];
+                    const reader = new FileReader();
+                    reader.onload = function (e) {
+                        const jsonData = e.target.result;
+                        importSession(jsonData);
+                        // Close the modal
+                        document.getElementById('import-session-modal').style.display = 'none';
+
+                        // Show notification
+                        showNotification('Session imported successfully.');
+                    };
+                    reader.readAsText(file);
+                } else if (textarea.value.trim() !== '') {
+                    // Use the pasted data
+                    const jsonData = textarea.value.trim();
+                    importSession(jsonData);
+                    // Close the modal
+                    document.getElementById('import-session-modal').style.display = 'none';
+
+                    // Show notification
+                    showNotification('Session imported successfully.');
+                } else {
+                    alert('Please upload a session file or paste session data.');
+                }
+            });
+
+            // Close modal when clicking outside of it
+            window.addEventListener('click', function (event) {
+                const importSessionModal = document.getElementById('import-session-modal');
+                if (event.target === importSessionModal) {
+                    importSessionModal.style.display = 'none';
+                }
+            });
+
+            // Event listener for the Export Session to URL button
+            document.getElementById('export-session-url').addEventListener('click', exportSessionToURL);
+
+            // Event listener for the close button in the modal
+            document.getElementById('export-session-url-close').addEventListener('click', function () {
+                const exportSessionUrlModal = document.getElementById('export-session-url-modal');
+                exportSessionUrlModal.style.display = 'none';
+            });
+
+            // Event listener for the copy to clipboard button
+            document.getElementById('copy-session-url').addEventListener('click', function () {
+                const sessionUrlInput = document.getElementById('session-url-input');
+                sessionUrlInput.select();
+                sessionUrlInput.setSelectionRange(0, 99999); // For mobile devices
+
+                document.execCommand('copy');
+
+                // Show a notification
+                showNotification('Session URL copied to clipboard.');
+            });
+
+            // Close modal when clicking outside of it
+            window.addEventListener('click', function (event) {
+                const exportSessionUrlModal = document.getElementById('export-session-url-modal');
+                if (event.target === exportSessionUrlModal) {
+                    exportSessionUrlModal.style.display = 'none';
+                }
+            });
+
+            // Event listener for the Upload Data button
+            document.getElementById('upload-data').addEventListener('click', function () {
+                const uploadDataModal = document.getElementById('upload-data-modal');
+                uploadDataModal.style.display = 'flex';
+            });
+
+            // Event listener for the close button in the upload data modal
+            document.getElementById('upload-data-close').addEventListener('click', function () {
+                const uploadDataModal = document.getElementById('upload-data-modal');
+                uploadDataModal.style.display = 'none';
+            });
+
+            // Close modal when clicking outside of it
+            window.addEventListener('click', function (event) {
+                const uploadDataModal = document.getElementById('upload-data-modal');
+                if (event.target === uploadDataModal) {
+                    uploadDataModal.style.display = 'none';
+                }
+            });
+
+
+
+            // Event listener for the Upload Data confirm button
+            document.getElementById('upload-data-confirm').addEventListener('click', function () {
+                const fileInput = document.getElementById('upload-data-file-input');
+                const uploadMode = document.querySelector('input[name="upload-data-mode"]:checked').value;
+
+                if (fileInput.files.length > 0) {
+                    // Read the file
+                    const file = fileInput.files[0];
+                    const reader = new FileReader();
+                    reader.onload = function (e) {
+                        const tsvData = e.target.result;
+                        parseAndLoadUserData(tsvData, uploadMode);
+                        // Close the modal
+                        document.getElementById('upload-data-modal').style.display = 'none';
+
+                        // Show notification
+                        showNotification('Custom data uploaded successfully.');
+                    };
+                    reader.readAsText(file);
+                } else {
+                    alert('Please select a TSV file to upload.');
+                }
+            });
+
+            // Close modal when clicking outside of it
+            window.addEventListener('click', function (event) {
+                const uploadDataModal = document.getElementById('upload-data-modal');
+                if (event.target === uploadDataModal) {
+                    uploadDataModal.style.display = 'none';
+                }
+            });
+
+
+        });
+
+        function parseAndLoadUserData(tsvData, uploadMode) {
+            // Parse the TSV data using PapaParse
+            const results = Papa.parse(tsvData, {
+                header: true,
+                delimiter: "\t",
+            });
+            const userDataArray = results.data.filter(row => Object.values(row).some(value => value !== null && value !== ''));
+
+            if (uploadMode === 'replace') {
+                // Clear existing data and plots
+                clearAllData();
+                // Load user data only
+                loadUserData(userDataArray);
+            } else if (uploadMode === 'append') {
+                // Integrate user data with existing data
+                integrateUserData(userDataArray);
+
+                // Add user data points to selectedPoints
+                selectedPoints = selectedPoints.concat(userDataArray);
+
+                // Update plots and table
+                for (let i = 1; i <= plotCounter; i++) {
+                    const plotId = `plot-${i}`;
+                    updatePlot(plotId);
+                }
+                updateTable();
+                highlightSelectedPoints();
+            }
+            displayDataStatistics();
+        }
+
+
+        function scrollToTable() {
+            const tableSection = document.getElementById('data-selection-section');
+            tableSection.scrollIntoView({ behavior: 'smooth' });
+        }
+
+        // Function to clear plots and data
+        function clearAllData() {
+            data = null;
+            currentPlotData = null;
+            selectedPoints = [];
+            plotsContainer.innerHTML = '';
+            tableContainer.innerHTML = '';
+            plotCounter = 0;
+
+            // Hide the add-view button
+            document.getElementById('add-view-container').style.display = 'none';
+        }
+
+        const hoverColumns = [
+            'Experiment ID', 'BioProject', 'Assay type', 'Genome coverage index',
+            'Amplicon coverage index', 'Genomic k-mers mean abundance', 'Amplicon k-mers mean abundance',
+            'Mapping index', 'Predicted contamination index', 'Empirical contamination index',
+            'Sequencing errors index', 'Autosomal k-mer mean abundance CV', 'Amplicon enrichment score',
+            'Predicted Assay type', 'chrX Ploidy score', 'chrY Coverage score'
+        ];
+
+        // Function to parse the metadata from the header line
+        function parseMetadata(headerLine) {
+            try {
+                // Parse the JSON part from the header line
+                const parsedHeader = JSON.parse(headerLine);
+
+                // Decompress the metadata
+                const decompressedMetadata = decompressMetadata(parsedHeader.metadata);
+
+                // Parse the decompressed metadata into an object
+                const metadataObject = JSON.parse(decompressedMetadata);
+
+                return {
+                    snipe_version: parsedHeader["snipe-version"],
+                    metadata: metadataObject
+                };
+            } catch (e) {
+                console.error('Error parsing metadata:', e);
+                return {};
+            }
+        }
+
+
+        // Function to decompress metadata using LZString
+        function decompressMetadata(base64String) {
+            return LZString.decompressFromBase64(base64String);
+        }
+
+
+        // Updated loadData function to avoid triggering the tour again
+        function loadData(filePath, callback, addInitialPlot = true) {
+            dataFilePath = filePath; // Set the global dataFilePath
+
+            // Show loading modal
+            document.getElementById('loading-modal').style.display = 'flex';
+
+            Papa.parse(dataFilePath, {
+                download: true,
+                header: false, // Disable header parsing to handle it manually
+                delimiter: "\t",
+                skipEmptyLines: true, // Skip empty lines
+                complete: function (results) {
+                    let dataRows = results.data;
+
+                    // Check if the first row is a metadata comment
+                    if (dataRows.length > 0 && typeof dataRows[0][0] === 'string' && dataRows[0][0].startsWith('#')) {
+                        const metadataLine = dataRows[0][0].slice(1); // Remove the leading '#'
+                        snipe_metadata = parseMetadata(metadataLine);
+                        console.log('Metadata:', snipe_metadata);
+                        dataRows.shift(); // Remove the metadata row from data
+                    }
+
+                    if (dataRows.length > 0) {
+                        const headers = dataRows.shift(); // Extract headers from the second row
+                        // Convert data rows into objects using the headers
+                        const parsedData = dataRows.map(row => {
+                            const obj = {};
+                            headers.forEach((header, index) => {
+                                obj[header] = row[index];
+                            });
+                            return obj;
+                        });
+
+                        // Filter out any empty rows
+                        const newData = parsedData.filter(row => Object.values(row).some(value => value !== null && value !== ''));
+
+                        // Assign a unique ID to each data point based on a unique field
+                        newData.forEach(row => {
+                            row._uniqueId = row['Experiment ID']; // Use a unique field
+                        });
+
+                        if (data) {
+                            data = data.concat(newData);
+                        } else {
+                            data = newData;
+                        }
+                    }
+
+                    // Populate column definitions in the modal
+                    populateModalColumnDefinitions();
+
+                    // Now that data is loaded, set up the rest of the UI
+                    plotsContainer = document.getElementById('plots-container');
+                    tableContainer = document.getElementById('table-container');
+                    exportTableButton = document.getElementById('export-table');
+                    clearSelectionsButton = document.getElementById('clear-selections');
+                    addViewButton = document.getElementById('add-view');
+
+                    exportTableButton.addEventListener('click', exportTableToTSV);
+                    clearSelectionsButton.addEventListener('click', clearSelections);
+                    addViewButton.addEventListener('click', addNewPlot);
+                    document.getElementById('export-pdf').addEventListener('click', exportAllDataAsPDF);
+                    document.getElementById('scroll-to-table').addEventListener('click', scrollToTable);
+
+                    // Initialize variables
+                    plotCounter = 0;
+
+                    // Show the add-view button
+                    document.getElementById('add-view-container').style.display = 'block';
+
+                    // Initialize and start the tour after data is loaded
+                    initOnboardingTour();
+
+                    // Hide loading modal
+                    document.getElementById('loading-modal').style.display = 'none';
+
+                    // Show notification
+                    showNotification('Data loaded successfully.');
+
+                    if (callback) callback();
+
+                    displayDataStatistics();
+                },
+                error: function (error) {
+                    console.error('Error parsing TSV:', error);
+                    document.getElementById('loading-modal').style.display = 'none';
+                    showNotification('Failed to load data.');
+                }
+            });
+        }
+
+
+        function displayDataStatistics() {
+            const logInfoDiv = document.getElementById('log-info');
+            if (!logInfoDiv) return;
+        
+            // Show the log info box
+            logInfoDiv.style.display = 'block';
+        
+            const totalPoints = data.length;
+            const assayTypes = [...new Set(data.map(row => row["Assay type"] || 'Unknown').filter(type => type))];
+            const assayTypeCounts = assayTypes.map(type => {
+                const count = data.filter(row => row["Assay type"] === type).length;
+                return `\t- ${type}: ${count}`;
+            }).join('\n'); // Join with newline characters for line breaks
+        
+            const uniqueBioProjects = new Set(data.map(row => row["BioProject"])).size;
+            const uniqueExperiments = new Set(data.map(row => row["Experiment ID"])).size;
+        
+            // Prepare metadata information
+            let metadataInfo = '';
+            if (snipe_metadata && Object.keys(snipe_metadata).length > 0) {
+                metadataInfo = `<details style="margin-top: 0px;">
+                    <summary><strong>Metadata (click to expand)</strong></summary>
+                    <pre>${JSON.stringify(snipe_metadata.metadata, null, 2)}</pre></details>
+                `;
+            }
+        
+            // Prepare the main stats as plain text within a <div>
+            const logContent = `
+- Total Data Points: ${totalPoints}
+- BioProjects: ${uniqueBioProjects}
+- Experiments: ${uniqueExperiments}
+<details style="margin-top: 0px;">
+                    <summary>Assay types (click to expand)</summary>
+                    <pre>${assayTypeCounts}</pre>
+                </details>${metadataInfo}`;
+        
+            logInfoDiv.innerHTML = `
+Data Statistics: ${logContent}
+            `.trim();
+        }
+
+        function loadUserData(userDataArray) {
+            // Show loading modal
+            document.getElementById('loading-modal').style.display = 'flex';
+
+            data = [];
+            integrateUserData(userDataArray);
+
+            // Select user data points
+            selectedPoints = userDataArray.slice();
+
+            // Now set up the dashboard
+            plotsContainer = document.getElementById('plots-container');
+            tableContainer = document.getElementById('table-container');
+            exportTableButton = document.getElementById('export-table');
+            clearSelectionsButton = document.getElementById('clear-selections');
+            addViewButton = document.getElementById('add-view');
+
+            exportTableButton.addEventListener('click', exportTableToTSV);
+            clearSelectionsButton.addEventListener('click', clearSelections);
+            addViewButton.addEventListener('click', addNewPlot);
+            document.getElementById('export-pdf').addEventListener('click', exportAllDataAsPDF);
+            document.getElementById('scroll-to-table').addEventListener('click', scrollToTable);
+
+            // Initialize variables
+            plotCounter = 0;
+
+            // Now, add the first plot
+            // addNewPlot();
+
+            // Show the add-view button
+            document.getElementById('add-view-container').style.display = 'block';
+
+            // Initialize and start the tour after data is loaded
+            // initOnboardingTour();
+            // startTour();
+
+            // Update the table and highlight selected points
+            updateTable();
+            highlightSelectedPoints();
+
+            // Hide loading modal
+            document.getElementById('loading-modal').style.display = 'none';
+
+            // Show notification
+            showNotification('User data loaded successfully.');
+        }
+
+
+
+
+        // Column Definitions
+        const columnDefinitions = {
+            "Total unique k-mers": "It represents the unique genetic content in the sample",
+            "Genomic unique k-mers": "It represents the unique genetic content in the sample that matches the reference genome",
+            "Amplicon unique k-mers": "It represents the unique genetic content in the sample that matches the exome",
+            "Genome coverage index": "It shows how much of the genome bases are covered",
+            "Amplicon coverage index": "It shows how much of the exome bases are covered",
+            "k-mer total abundance": "It correlates with the total amount of sequencing",
+            "Genomic k-mers total abundance": "It correlates with the total amount of sequencing that aligns to the reference genome",
+            "Amplicon k-mers total abundance": "It correlates with the total amount of sequencing that aligns to the exome",
+            "Mapping index": "Genomic k-mers total Abundance as a fraction of all k-mer total abundance. It correlates with the mapped sequencing bases to the genomes",
+            "Predicted contamination index": "The fraction abundance of non-genomic k-mers if the k-mer count > 1. It represent genetic variance and increase if there is sequence contamination",
+            "Empirical contamination index": "The fraction of k-mers matching microbial sequences. It is calcuted by Sourmash software and expected to correlate with Snipe's predicted contamination index",
+            "Sequencing errors index": "The fraction abundance of non-genomic k-mers if the k-mer count = 1 (i.e., singletons). It represents sequecning errors",
+            "Autosomal k-mer mean abundance CV": "The coefficient of variation (CV) for the mean abundance of k-mers specific to each autosome. A high CV suggests variability, potentially pointing to uneven sequencing",
+            "Amplicon enrichment score": "A composite metric for quantifying amplicon enrichment in a sequencing experiment",
+            "chrX Ploidy score": "The ratio of the mean abundance of chrX-specific k-mers to autosomal-specific k-mers. It correlates with X chromosome ploidy",
+            "chrY Coverage score": "The ratio of sequence coverage for chrY and autosomal chromosomes.",
+            "Coverage of 1fold more sequencing": "Expected coverage with 1 fold more sequecning"
+        };
+
+        // Function to populate the modal with column definitions
+        function populateModalColumnDefinitions() {
+            const columnDefinitionsDiv = document.getElementById('modal-column-definitions');
+            if (!columnDefinitionsDiv) return;
+
+            let htmlContent = '<dl>';
+
+            const columns = Object.keys(data[0]).filter(col => !col.startsWith('_'));
+
+            // This will show metrics w/o definitions as "No definition available."
+            {
+                {/*  columns.forEach(col => {
+                const definition = columnDefinitions[col] || "No definition available.";
+                htmlContent += `<dt>${col}</dt><dd>${definition}</dd>`;
+            });  */}
+            }
+
+            // for only columns in columnDefinitions
+            columns.forEach(col => {
+                if (col in columnDefinitions) {
+                    const definition = columnDefinitions[col] || "No definition available.";
+                    htmlContent += `<dt>${col}</dt><dd>${definition}</dd>`;
+                }
+            });
+
+            htmlContent += '</dl>';
+            columnDefinitionsDiv.innerHTML = htmlContent;
+        }
+
+
+
+        // Updated addNewPlot function
+        function addNewPlot(config = {}) {
+            plotCounter++;
+            const plotId = `plot-${plotCounter}`;
+            let plotHTML = `
+                <div class="plot-container mt-4" id="container-${plotId}">
+                    <!-- Plot Frame -->
+                    <div class="card">
+                        <!-- Title Bar -->
+                        <div class="card-header d-flex justify-content-between align-items-center bg-primary text-white">
+                            <!-- File Dropdown on the Left -->
+                            <div class="dropdown">
+                                <button class="btn btn-light btn-lg dropdown-toggle" type="button" id="file-menu-${plotId}" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
+                                    Options
+                                </button>
+                                <div class="dropdown-menu" aria-labelledby="file-menu-${plotId}">
+                                    <button class="dropdown-item" id="save-as-png-${plotId}">Save as PNG</button>
+                                    <button class="dropdown-item" id="export-tsv-${plotId}">Export table for current view</button>
+                                    <button class="dropdown-item" id="export-selected-tsv-${plotId}">Export table for selected points in current view</button>
+                                </div>
+                            </div>
+                            <!-- Plot Title in the Center -->
+                            <h5 id="plot-title-display-${plotId}" class="mb-0 text-center">Plot ${plotCounter}</h5>
+                            <!-- Title Bar Buttons (Right-Aligned) -->
+                            <div class="plot-window-controls">
+                                <button id="minimize-plot-${plotId}" class="btn btn-light btn-sm" title="Minimize">
+                                    <i class="fa fa-minus"></i>
+                                </button>
+                                <button id="maximize-plot-${plotId}" class="btn btn-light btn-sm d-none" title="Maximize">
+                                    <i class="fa fa-window-maximize"></i>
+                                </button>
+                                <button id="clone-plot-${plotId}" class="btn btn-light btn-sm" title="Clone">
+                                    <i class="fa fa-clone"></i>
+                                </button>
+                                <button id="close-plot-${plotId}" class="btn btn-danger btn-sm" title="Close">
+                                    <i class="fa fa-times"></i>
+                                </button>
+                            </div>
+                        </div>
+                        <!-- Plot Type Selection -->
+                        <div class="card-body" id="body-${plotId}">
+                            <div class="row">
+                                <div class="col-md-10">
+                                    <label for="plot-type-${plotId}">Plot Type:</label>
+                                    <select id="plot-type-${plotId}" class="form-control">
+                                        <option value="scatter">Scatter Plot</option>
+                                        <option value="histogram">Histogram</option>
+                                        <option value="boxplot">Boxplot</option>
+                                    </select>
+                                </div>
+                                <div class="col-md-2 d-flex align-items-end">
+                                    <button id="help-button-${plotId}" class="btn btn-info btn-block">Help</button>
+                                </div>
+                            </div>
+                            <!-- Dynamic Controls will be rendered here -->
+                            <div id="dynamic-controls-${plotId}" class="mt-3"></div>
+                            <!-- Plot Area -->
+                            <div class="plot-area" style="position: relative;">
+                                <div id="${plotId}" class="plot"></div>
+                                <!-- Floating Search Button -->
+                                <div class="floating-search-button" id="floating-search-button-${plotId}">
+                                    <button class="search-button" id="search-button-${plotId}">
+                                        <i class="fa fa-search"></i> Search by accession
+                                    </button>
+                                    <input type="text" class="search-input" id="search-input-${plotId}" placeholder="Search...">
+                                </div>
+                            </div>
+                            <!-- Title, Notes, and Export Button -->
+                            <div class="row mt-3">
+                                <div class="col-md-6">
+                                    <label for="title-${plotId}">Plot Title:</label>
+                                    <input type="text" id="title-${plotId}" class="form-control" placeholder="Enter plot title...">
+                                </div>
+                                <div class="col-md-6">
+                                    <label for="notes-${plotId}">Notes:</label>
+                                    <textarea id="notes-${plotId}" class="form-control" placeholder="Enter your notes here..."></textarea>
+                                </div>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+            `;
+            plotsContainer.insertAdjacentHTML('beforeend', plotHTML);
+
+            const plotTypeSelect = document.getElementById(`plot-type-${plotId}`);
+            const titleInput = document.getElementById(`title-${plotId}`);
+            const plotTitleDisplay = document.getElementById(`plot-title-display-${plotId}`);
+
+            // Set initial values if config is provided
+            if (config.plotType) {
+                plotTypeSelect.value = config.plotType;
+            }
+
+            // Attach event listeners
+            plotTypeSelect.addEventListener('change', () => renderDynamicControls(plotId, config));
+            titleInput.addEventListener('input', () => {
+                plotTitleDisplay.textContent = titleInput.value || `Plot ${plotCounter}`;
+            });
+
+            // Set title if provided
+            if (config.title) {
+                titleInput.value = config.title;
+                plotTitleDisplay.textContent = config.title;
+            }
+
+            // Render dynamic controls with or without config
+            renderDynamicControls(plotId, config);
+
+            // Attach event listener to the dropdown items
+            document.getElementById(`save-as-png-${plotId}`).addEventListener('click', () => savePlotAsPNG(plotId));
+            document.getElementById(`export-tsv-${plotId}`).addEventListener('click', () => exportCurrentViewAsTSV(plotId));
+            document.getElementById(`export-selected-tsv-${plotId}`).addEventListener('click', () => exportSelectedPointsAsTSV(plotId));
+
+            document.getElementById(`search-button-${plotId}`).addEventListener('click', () => searchAndSelectPoints(plotId));
+            document.getElementById(`search-input-${plotId}`).addEventListener('keyup', function (event) {
+                if (event.key === 'Enter') {
+                    searchAndSelectPoints(plotId);
+                }
+            });
+
+            // Event listeners for control buttons
+            document.getElementById(`minimize-plot-${plotId}`).addEventListener('click', () => minimizePlot(plotId));
+            document.getElementById(`maximize-plot-${plotId}`).addEventListener('click', () => maximizePlot(plotId));
+            document.getElementById(`close-plot-${plotId}`).addEventListener('click', () => closePlot(plotId));
+            document.getElementById(`clone-plot-${plotId}`).addEventListener('click', () => clonePlot(plotId));
+
+            // Initialize plot
+            if (!config.plotType) {
+                updatePlot(plotId);
+            }
+        }
+
+        function clonePlot(plotId) {
+            // Gather the configuration of the plot with id plotId
+            const plotType = document.getElementById(`plot-type-${plotId}`).value;
+
+            const config = {
+                plotType: plotType,
+                title: document.getElementById(`title-${plotId}`).value,
+                notes: document.getElementById(`notes-${plotId}`).value,
+            };
+
+            if (plotType === 'scatter') {
+                config.xAxis = document.getElementById(`x-axis-${plotId}`).value;
+                config.yAxis = document.getElementById(`y-axis-${plotId}`).value;
+                config.xLogScale = document.getElementById(`x-log-scale-${plotId}`).checked;
+                config.yLogScale = document.getElementById(`y-log-scale-${plotId}`).checked;
+                config.hue = document.getElementById(`hue-${plotId}`).value;
+                config.palette = document.getElementById(`palette-${plotId}`).value;
+
+                // Assay types
+                const assayTypeCheckboxes = document.querySelectorAll(`#assay-type-checkboxes-${plotId} input[name="assay-type-${plotId}"]`);
+                config.assayTypes = Array.from(assayTypeCheckboxes).map(checkbox => ({ value: checkbox.value, checked: checkbox.checked }));
+
+                // Sliders: x-range and y-range
+                const xSlider = document.getElementById(`x-range-slider-${plotId}`);
+                if (xSlider && xSlider.noUiSlider) {
+                    config.xRange = xSlider.noUiSlider.get();
+                }
+
+                const ySlider = document.getElementById(`y-range-slider-${plotId}`);
+                if (ySlider && ySlider.noUiSlider) {
+                    config.yRange = ySlider.noUiSlider.get();
+                }
+
+                // Hue slider
+                const hueSlider = document.getElementById(`hue-range-slider-${plotId}`);
+                if (hueSlider && hueSlider.noUiSlider) {
+                    config.hueRange = hueSlider.noUiSlider.get();
+                }
+            }
+            else if (plotType === 'histogram' || plotType === 'boxplot') {
+                // Selected numerical columns
+                const numColumnCheckboxes = document.querySelectorAll(`#checkbox-group-${plotId} input[name="num-columns-${plotId}"]`);
+                config.numColumns = Array.from(numColumnCheckboxes).map(checkbox => ({ value: checkbox.value, checked: checkbox.checked }));
+
+                // Group By
+                config.groupBy = document.getElementById(`group-by-${plotId}`).value;
+
+                // Assay types
+                const assayTypeCheckboxes = document.querySelectorAll(`#assay-type-checkboxes-${plotId} input[name="assay-type-${plotId}"]`);
+                config.assayTypes = Array.from(assayTypeCheckboxes).map(checkbox => ({ value: checkbox.value, checked: checkbox.checked }));
+            }
+
+            // Now add new plot with this configuration
+            addNewPlot(config);
+
+            // Scroll to the new plot
+            const newPlotId = `plot-${plotCounter}`; // Assuming plotCounter has been incremented in addNewPlot
+            const newPlotContainer = document.getElementById(`container-${newPlotId}`);
+            if (newPlotContainer) {
+                newPlotContainer.scrollIntoView({ behavior: 'smooth' });
+            }
+        }
+
+
+
+        function savePlotAsPNG(plotId) {
+            const plotDiv = document.getElementById(plotId);
+            Plotly.toImage(plotDiv, { format: 'png', width: 1200, height: 800 }).then(function (dataUrl) {
+                const link = document.createElement('a');
+                link.download = `${plotId}.png`;
+                link.href = dataUrl;
+                link.click();
+            });
+        }
+
+        function exportCurrentViewAsTSV(plotId) {
+            // Retrieve current plot data, which is filtered by axes, range sliders, etc.
+            let currentViewData = getFilteredData(plotId);
+
+            if (currentViewData.length === 0) {
+                alert('No data to export. Please apply filters or selections first.');
+                return;
+            }
+
+            const columns = Object.keys(currentViewData[0]).filter(col => !col.startsWith('_'));
+            let tsvContent = columns.join('\t') + '\n';
+
+            currentViewData.forEach(point => {
+                const row = columns.map(col => point[col]).join('\t');
+                tsvContent += row + '\n';
+            });
+
+            const blob = new Blob([tsvContent], { type: 'text/tab-separated-values;charset=utf-8;' });
+            const link = document.createElement('a');
+            link.href = URL.createObjectURL(blob);
+            link.download = `current_view_${plotId}.tsv`;
+            link.click();
+        }
+
+        function exportSelectedPointsAsTSV(plotId) {
+            // Get the current view's filtered data
+            let filteredData = getFilteredData(plotId);
+
+            // Intersect filteredData with selectedPoints
+            let selectedFilteredData = filteredData.filter(row => selectedPoints.some(p => p._uniqueId === row._uniqueId));
+
+            if (selectedFilteredData.length === 0) {
+                alert('No selected points to export for the current view.');
+                return;
+            }
+
+            const columns = Object.keys(selectedFilteredData[0]).filter(col => !col.startsWith('_'));
+            let tsvContent = columns.join('\t') + '\n';
+
+            selectedFilteredData.forEach(point => {
+                const row = columns.map(col => point[col]).join('\t');
+                tsvContent += row + '\n';
+            });
+
+            const blob = new Blob([tsvContent], { type: 'text/tab-separated-values;charset=utf-8;' });
+            const link = document.createElement('a');
+            link.href = URL.createObjectURL(blob);
+            link.download = `selected_points_${plotId}.tsv`;
+            link.click();
+        }
+
+        function getFilteredData(plotId) {
+            const xAxis = document.getElementById(`x-axis-${plotId}`).value;
+            const yAxis = document.getElementById(`y-axis-${plotId}`).value;
+
+            const xSlider = document.getElementById(`x-range-slider-${plotId}`);
+            const ySlider = document.getElementById(`y-range-slider-${plotId}`);
+
+            let xMin = null, xMax = null, yMin = null, yMax = null;
+
+            if (xSlider && xSlider.noUiSlider) {
+                const xRange = xSlider.noUiSlider.get();
+                xMin = parseFloat(xRange[0]);
+                xMax = parseFloat(xRange[1]);
+            }
+
+            if (ySlider && ySlider.noUiSlider) {
+                const yRange = ySlider.noUiSlider.get();
+                yMin = parseFloat(yRange[0]);
+                yMax = parseFloat(yRange[1]);
+            }
+
+            // Filter data based on X and Y ranges and selection
+            return currentPlotData.filter(row => {
+                const xValue = parseFloat(row[xAxis]);
+                const yValue = parseFloat(row[yAxis]);
+                return !isNaN(xValue) && xValue >= xMin && xValue <= xMax && !isNaN(yValue) && yValue >= yMin && yValue <= yMax;
+            });
+        }
+
+        function minimizePlot(plotId) {
+            const body = document.getElementById(`body-${plotId}`);
+            const minimizeButton = document.getElementById(`minimize-plot-${plotId}`);
+            const maximizeButton = document.getElementById(`maximize-plot-${plotId}`);
+
+            body.style.display = 'none';
+            minimizeButton.classList.add('d-none');
+            maximizeButton.classList.remove('d-none');
+        }
+
+        function maximizePlot(plotId) {
+            const body = document.getElementById(`body-${plotId}`);
+            const minimizeButton = document.getElementById(`minimize-plot-${plotId}`);
+            const maximizeButton = document.getElementById(`maximize-plot-${plotId}`);
+
+            body.style.display = 'block';
+            minimizeButton.classList.remove('d-none');
+            maximizeButton.classList.add('d-none');
+        }
+
+        function closePlot(plotId) {
+            const plotContainer = document.getElementById(`container-${plotId}`);
+            plotContainer.remove();
+        }
+
+
+
+
+
+        function renderDynamicControls(plotId, config = {}) {
+            const plotType = document.getElementById(`plot-type-${plotId}`).value;
+            const dynamicControlsDiv = document.getElementById(`dynamic-controls-${plotId}`);
+
+            const columns = Object.keys(data[0]).filter(col => !col.startsWith('_'));
+            const numericalColumns = columns.filter(col => data.some(row => isNumeric(row[col])));
+            const categoricalColumns = columns.filter(col => !numericalColumns.includes(col));
+
+            const cols_for_colorby = columns.filter(col => col !== 'Experiment ID');
+            const cols_for_groupby = categoricalColumns.filter(col => col !== 'Experiment ID' && col !== 'BioSample accession');
+
+            let controlsHTML = '';
+
+            if (plotType === 'scatter') {
+                controlsHTML += `
+                    <div class="row">
+                        <!-- X-Axis Control -->
+                        <div class="col-md-3">
+                            <label for="x-axis-${plotId}">X-Axis:</label>
+                            <div class="input-group">
+                                <select id="x-axis-${plotId}" class="form-control">
+                                    <option value="">Select X-Axis</option>
+                                    ${numericalColumns.map(col => `<option value="${col}">${col}</option>`).join('')}
+                                </select>
+                                <div class="input-group-append">
+                                    <div class="input-group-text">
+                                        <input type="checkbox" id="x-log-scale-${plotId}">
+                                        <label for="x-log-scale-${plotId}" class="mb-0 ml-1">Log</label>
+                                    </div>
+                                </div>
+                            </div>
+                        </div>
+                        <!-- Y-Axis Control -->
+                        <div class="col-md-3">
+                            <label for="y-axis-${plotId}">Y-Axis:</label>
+                            <div class="input-group">
+                                <select id="y-axis-${plotId}" class="form-control">
+                                    <option value="">Select Y-Axis</option>
+                                    ${numericalColumns.map(col => `<option value="${col}">${col}</option>`).join('')}
+                                </select>
+                                <div class="input-group-append">
+                                    <div class="input-group-text">
+                                        <input type="checkbox" id="y-log-scale-${plotId}">
+                                        <label for="y-log-scale-${plotId}" class="mb-0 ml-1">Log</label>
+                                    </div>
+                                </div>
+                            </div>
+                        </div>
+                        <!-- Color By Control -->
+                        <div class="col-md-3">
+                            <label for="hue-${plotId}">Color By:</label>
+                            <select id="hue-${plotId}" class="form-control">
+                                <option value="">Select Color</option>
+                                ${cols_for_colorby.map(col => `<option value="${col}">${col}</option>`).join('')}
+                            </select>
+                        </div>
+                        <!-- Color Palette Selection -->
+                        <div class="col-md-3">
+                            <label for="palette-${plotId}">Color Palette:</label>
+                            <select id="palette-${plotId}" class="form-control">
+                                <option value="Spectral">Spectral</option>
+                                <option value="Viridis">Viridis</option>
+                                <option value="Cividis">Cividis</option>
+                                <option value="Hot">Hot</option>
+                                <option value="Jet">Jet</option>
+                                <option value="Rainbow">Rainbow</option>
+                                <option value="Bluered">Bluered</option>
+                            </select>
+                        </div>
+                    </div>
+                    <!-- SRA Assay Type -->
+                    <div class="row mt-2 align-items-center">
+                        <label class="col-auto mb-0">Assay type:</label>
+                        <div id="assay-type-checkboxes-${plotId}" class="col form-inline">
+                            ${[...new Set(data.map(row => row["Assay type"]).filter(type => type))].map((type, index) => `
+                                <div class="form-check form-check-inline">
+                                    <input class="form-check-input" type="checkbox" id="assay-type-${plotId}-${index}" name="assay-type-${plotId}" value="${type}" checked>
+                                    <label class="form-check-label" for="assay-type-${plotId}-${index}">
+                                        ${type}
+                                    </label>
+                                </div>
+                            `).join('')}
+                        </div>
+                    </div>
+                    <!-- Range Sliders with Input Boxes in Compact Layout -->
+                    <div class="container-fluid">
+                        <!-- X-Axis Range Slider -->
+                        <div class="row mt-3 p-3 border rounded" style="background-color: #f9f9f9;">
+                            <div class="col-2 d-flex align-items-center">
+                                <label for="x-range-slider-${plotId}" class="mb-0">X-Axis Range:</label>
+                            </div>
+                            <div class="col-2">
+                                <input type="number" id="x-range-min-input-${plotId}" class="form-control" placeholder="Min">
+                            </div>
+                            <div class="col-6">
+                                <div id="x-range-slider-${plotId}" class="range-slider"></div>
+                            </div>
+                            <div class="col-2">
+                                <input type="number" id="x-range-max-input-${plotId}" class="form-control" placeholder="Max">
+                            </div>
+                        </div>
+                        <!-- Y-Axis Range Slider -->
+                        <div class="row mt-3 p-3 border rounded" style="background-color: #f9f9f9;">
+                            <div class="col-2 d-flex align-items-center">
+                                <label for="y-range-slider-${plotId}" class="mb-0">Y-Axis Range:</label>
+                            </div>
+                            <div class="col-2">
+                                <input type="number" id="y-range-min-input-${plotId}" class="form-control" placeholder="Min">
+                            </div>
+                            <div class="col-6">
+                                <div id="y-range-slider-${plotId}" class="range-slider"></div>
+                            </div>
+                            <div class="col-2">
+                                <input type="number" id="y-range-max-input-${plotId}" class="form-control" placeholder="Max">
+                            </div>
+                        </div>
+                        <!-- Hue Range Slider -->
+                        <div id="hue-range-slider-container-${plotId}" class="row mt-3 p-3 border rounded" style="background-color: #f9f9f9; display: none;">
+                            <div class="col-2 d-flex align-items-center">
+                                <label for="hue-range-slider-${plotId}" class="mb-0">Color Range:</label>
+                            </div>
+                            <div class="col-2">
+                                <input type="number" id="hue-range-min-input-${plotId}" class="form-control" placeholder="Min">
+                            </div>
+                            <div class="col-6">
+                                <div id="hue-range-slider-${plotId}" class="range-slider"></div>
+                            </div>
+                            <div class="col-2">
+                                <input type="number" id="hue-range-max-input-${plotId}" class="form-control" placeholder="Max">
+                            </div>
+                        </div>
+                    </div>
+                `;
+
+            } else if (plotType === 'histogram' || plotType === 'boxplot') {
+                controlsHTML = `
+                    <div class="row">
+                        <!-- Numerical Columns -->
+                        <div class="col-md-6">
+                            <label>Select Numerical Columns:</label>
+                            <div id="checkbox-group-${plotId}" class="form-group" style="height: 150px; overflow-y: auto;">
+                                ${numericalColumns.map((col, index) => `
+                                    <div class="form-check">
+                                        <input class="form-check-input" type="checkbox" id="num-column-${col}-${plotId}" name="num-columns-${plotId}" value="${col}">
+                                        <label class="form-check-label" for="num-column-${col}-${plotId}">
+                                            ${col}
+                                        </label>
+                                    </div>
+                                `).join('')}
+                            </div>
+                        </div>
+                        <!-- Group By Control -->
+                        <div class="col-md-3">
+                            <label for="group-by-${plotId}">Group By (Optional):</label>
+                            <select id="group-by-${plotId}" class="form-control">
+                                <option value="">No Grouping</option>
+                                ${cols_for_groupby.map(col => `<option value="${col}">${col}</option>`).join('')}
+                            </select>
+                        </div>
+                        <!-- SRA Assay Type -->
+                        <div class="col-md-3 align-items-center">
+                            <label class="mb-0">Assay type:</label>
+                            <div id="assay-type-checkboxes-${plotId}" class="form-inline">
+                                ${[...new Set(data.map(row => row["Assay type"]).filter(type => type))].map((type, index) => `
+                                    <div class="form-check form-check-inline">
+                                        <input class="form-check-input" type="checkbox" id="assay-type-${plotId}-${index}" name="assay-type-${plotId}" value="${type}" checked>
+                                        <label class="form-check-label" for="assay-type-${plotId}-${index}">
+                                            ${type}
+                                        </label>
+                                    </div>
+                                `).join('')}
+                            </div>
+                        </div>
+                    </div>
+                `;
+            }
+
+            dynamicControlsDiv.innerHTML = controlsHTML;
+
+            // Attach event listeners to new controls
+            const controls = dynamicControlsDiv.querySelectorAll('select, input[type=checkbox]');
+            controls.forEach(control => {
+                control.addEventListener('change', () => updatePlot(plotId));
+            });
+
+            // Update plot title display
+            const titleInput = document.getElementById(`title-${plotId}`);
+            const plotTitleDisplay = document.getElementById(`plot-title-display-${plotId}`);
+            titleInput.addEventListener('input', () => {
+                plotTitleDisplay.textContent = titleInput.value || `Plot ${plotId.split('-')[1]}`;
+            });
+
+            // Initialize sliders when xAxis and yAxis change
+            const xAxisSelect = document.getElementById(`x-axis-${plotId}`);
+            const yAxisSelect = document.getElementById(`y-axis-${plotId}`);
+            const hueSelect = document.getElementById(`hue-${plotId}`);
+
+            if (xAxisSelect) {
+                xAxisSelect.addEventListener('change', () => {
+                    initializeXAxisSlider(plotId);
+                    updatePlot(plotId);
+                });
+            }
+
+            if (yAxisSelect) {
+                yAxisSelect.addEventListener('change', () => {
+                    initializeYAxisSlider(plotId);
+                    updatePlot(plotId);
+                });
+            }
+
+            if (hueSelect) {
+                hueSelect.addEventListener('change', () => {
+                    initializeHueSlider(plotId);
+                    updatePlot(plotId);
+                });
+            }
+
+            // Set control values based on config
+            if (config) {
+                if (plotType === 'scatter') {
+                    if (config.xAxis) xAxisSelect.value = config.xAxis;
+                    if (config.yAxis) yAxisSelect.value = config.yAxis;
+                    if (config.xLogScale !== undefined) document.getElementById(`x-log-scale-${plotId}`).checked = config.xLogScale;
+                    if (config.yLogScale !== undefined) document.getElementById(`y-log-scale-${plotId}`).checked = config.yLogScale;
+                    if (config.hue) hueSelect.value = config.hue;
+                    if (config.palette) document.getElementById(`palette-${plotId}`).value = config.palette;
+
+                    // Assay types
+                    if (config.assayTypes) {
+                        config.assayTypes.forEach(assayType => {
+                            const checkbox = document.querySelector(`#assay-type-checkboxes-${plotId} input[value="${assayType.value}"]`);
+                            if (checkbox) {
+                                checkbox.checked = assayType.checked;
+                            }
+                        });
+                    }
+
+                    // Initialize sliders
+                    if (config.xAxis) {
+                        xAxisSelect.dispatchEvent(new Event('change'));
+                        if (config.xRange) {
+                            const xSlider = document.getElementById(`x-range-slider-${plotId}`);
+                            if (xSlider && xSlider.noUiSlider) {
+                                xSlider.noUiSlider.set(config.xRange);
+                            }
+                        }
+                    }
+
+                    if (config.yAxis) {
+                        yAxisSelect.dispatchEvent(new Event('change'));
+                        if (config.yRange) {
+                            const ySlider = document.getElementById(`y-range-slider-${plotId}`);
+                            if (ySlider && ySlider.noUiSlider) {
+                                ySlider.noUiSlider.set(config.yRange);
+                            }
+                        }
+                    }
+
+                    if (config.hue) {
+                        hueSelect.dispatchEvent(new Event('change'));
+                        if (config.hueRange) {
+                            const hueSlider = document.getElementById(`hue-range-slider-${plotId}`);
+                            if (hueSlider && hueSlider.noUiSlider) {
+                                hueSlider.noUiSlider.set(config.hueRange);
+                            }
+                        }
+                    }
+                } else if (plotType === 'histogram' || plotType === 'boxplot') {
+                    // Numerical columns
+                    if (config.numColumns) {
+                        config.numColumns.forEach(numCol => {
+                            const checkbox = document.querySelector(`#checkbox-group-${plotId} input[value="${numCol.value}"]`);
+                            if (checkbox) {
+                                checkbox.checked = numCol.checked;
+                            }
+                        });
+                    }
+
+                    // Group By
+                    if (config.groupBy) {
+                        document.getElementById(`group-by-${plotId}`).value = config.groupBy;
+                    }
+
+                    // Assay types
+                    if (config.assayTypes) {
+                        config.assayTypes.forEach(assayType => {
+                            const checkbox = document.querySelector(`#assay-type-checkboxes-${plotId} input[value="${assayType.value}"]`);
+                            if (checkbox) {
+                                checkbox.checked = assayType.checked;
+                            }
+                        });
+                    }
+                }
+            }
+
+            // Help button event listener
+            const helpButton = document.getElementById(`help-button-${plotId}`);
+            helpButton.addEventListener('click', function () {
+                const helpModal = document.getElementById('help-modal');
+                helpModal.style.display = 'flex';
+            });
+
+            // Update the plot
+            updatePlot(plotId);
+        }
+
+
+        // Function to initialize a slider for a given axis
+        function initializeSlider(plotId, axis, axisSliderId, axisMinInputId, axisMaxInputId, axisColumn, callback) {
+            const axisValue = document.getElementById(`${axis}-${plotId}`).value;
+            const axisSlider = document.getElementById(`${axisSliderId}-${plotId}`);
+            const axisMinInput = document.getElementById(`${axisMinInputId}-${plotId}`);
+            const axisMaxInput = document.getElementById(`${axisMaxInputId}-${plotId}`);
+
+            if (axisValue && axisSlider) {
+                const axisValues = data.map(row => parseFloat(row[axisValue])).filter(val => !isNaN(val));
+                const axisMin = Math.min(...axisValues);
+                const axisMax = Math.max(...axisValues);
+
+                if (axisSlider.noUiSlider) {
+                    axisSlider.noUiSlider.updateOptions({
+                        range: {
+                            'min': axisMin,
+                            'max': axisMax
+                        },
+                        start: [axisMin, axisMax]
+                    });
+                } else {
+                    noUiSlider.create(axisSlider, {
+                        start: [axisMin, axisMax],
+                        connect: true,
+                        range: {
+                            'min': axisMin,
+                            'max': axisMax
+                        }
+                    });
+
+                    axisSlider.noUiSlider.on('update', function (values, handle) {
+                        axisMinInput.value = parseFloat(values[0]).toFixed(2);
+                        axisMaxInput.value = parseFloat(values[1]).toFixed(2);
+
+                        // Debounce plot update
+                        clearTimeout(axisSlider.updateTimeout);
+                        axisSlider.updateTimeout = setTimeout(function () {
+                            callback(plotId);
+                        }, 500);
+                    });
+
+                    // Synchronize input boxes with slider
+                    axisMinInput.addEventListener('change', function () {
+                        axisSlider.noUiSlider.set([this.value, null]);
+                    });
+                    axisMaxInput.addEventListener('change', function () {
+                        axisSlider.noUiSlider.set([null, this.value]);
+                    });
+                }
+            }
+        }
+
+        // Wrapper for X-axis slider initialization
+        function initializeXAxisSlider(plotId) {
+            initializeSlider(plotId, 'x-axis', 'x-range-slider', 'x-range-min-input', 'x-range-max-input', 'xAxis', updatePlot);
+        }
+
+        // Wrapper for Y-axis slider initialization
+        function initializeYAxisSlider(plotId) {
+            initializeSlider(plotId, 'y-axis', 'y-range-slider', 'y-range-min-input', 'y-range-max-input', 'yAxis', updatePlot);
+        }
+
+        // Wrapper for Hue slider initialization
+        function initializeHueSlider(plotId) {
+            const hueColumn = document.getElementById(`hue-${plotId}`).value;
+            const hueSliderContainer = document.getElementById(`hue-range-slider-container-${plotId}`);
+            const hueSlider = document.getElementById(`hue-range-slider-${plotId}`);
+            const hueMinInput = document.getElementById(`hue-range-min-input-${plotId}`);
+            const hueMaxInput = document.getElementById(`hue-range-max-input-${plotId}`);
+
+            if (hueColumn && hueSlider) {
+                const hueValues = data.map(row => parseFloat(row[hueColumn])).filter(val => !isNaN(val));
+                const hueMin = Math.min(...hueValues);
+                const hueMax = Math.max(...hueValues);
+                const isHueNumeric = data.some(row => isNumeric(row[hueColumn]));
+
+                if (isHueNumeric) {
+                    hueSliderContainer.style.display = 'flex';
+                    initializeSlider(plotId, 'hue', 'hue-range-slider', 'hue-range-min-input', 'hue-range-max-input', 'hueColumn', updatePlot);
+                } else {
+                    hueSliderContainer.style.display = 'none';
+                    if (hueSlider.noUiSlider) {
+                        hueSlider.noUiSlider.destroy();
+                    }
+                }
+            } else {
+                hueSliderContainer.style.display = 'none';
+                if (hueSlider.noUiSlider) {
+                    hueSlider.noUiSlider.destroy();
+                }
+            }
+        }
+
+
+        function searchAndSelectPoints(plotId) {
+            const searchInput = document.getElementById(`search-input-${plotId}`);
+            let searchText = searchInput.value.trim().toLowerCase();
+
+            if (searchText === '') {
+                return;
+            }
+
+            const matchingPoints = data.filter(row => {
+                return ['BioProject', 'BioSample accession', 'Experiment ID', '_uniqueId'].some(col => {
+                    return row[col] && row[col].toString().toLowerCase() === searchText;
+                });
+            });
+
+            if (matchingPoints.length === 0) {
+                alert('No matching data points found.');
+                return;
+            }
+
+            matchingPoints.forEach(point => {
+                if (!selectedPoints.some(p => p._uniqueId === point._uniqueId)) {
+                    selectedPoints.push(point);
+                }
+            });
+
+            updateTable();
+            highlightSelectedPoints();
+        }
+
+
+
+
+
+
+        function isNumeric(n) {
+            return !isNaN(parseFloat(n)) && isFinite(n);
+        }
+
+
+
+        function updatePlot(plotId) {
+            const plotDiv = document.getElementById(plotId);
+            const plotType = document.getElementById(`plot-type-${plotId}`).value;
+
+            const assayTypeCheckboxes = document.querySelectorAll(`#assay-type-checkboxes-${plotId} input[name="assay-type-${plotId}"]:checked`);
+            const selectedAssayTypes = Array.from(assayTypeCheckboxes).map(checkbox => checkbox.value);
+            currentPlotData = selectedAssayTypes.length > 0 ? data.filter(row => {
+                const assayType = row["Assay type"] || 'Unknown';
+                return selectedAssayTypes.includes(assayType);
+            }) : data;
+
+            currentPlotData = selectedAssayTypes.length > 0 ? data.filter(row => selectedAssayTypes.includes(row["Assay type"])) : data;
+
+            if (plotType === 'scatter') {
+                const xAxis = document.getElementById(`x-axis-${plotId}`).value;
+                const yAxis = document.getElementById(`y-axis-${plotId}`).value;
+                const hueColumn = document.getElementById(`hue-${plotId}`).value;
+                const palette = document.getElementById(`palette-${plotId}`).value || 'Spectral';
+
+                // Get the state of the log scale checkboxes
+                const xLogScale = document.getElementById(`x-log-scale-${plotId}`).checked;
+                const yLogScale = document.getElementById(`y-log-scale-${plotId}`).checked;
+
+                if (!xAxis || !yAxis) {
+                    plotDiv.innerHTML = '<p style="text-align: center; color: #7f8c8d;">Please select values for X-Axis and Y-Axis.</p>';
+                    return;
+                }
+
+                // Apply X and Y range filters
+                const xSlider = document.getElementById(`x-range-slider-${plotId}`);
+                const ySlider = document.getElementById(`y-range-slider-${plotId}`);
+
+                let xMin = null, xMax = null, yMin = null, yMax = null;
+
+                if (xSlider && xSlider.noUiSlider) {
+                    const xRange = xSlider.noUiSlider.get();
+                    xMin = parseFloat(xRange[0]);
+                    xMax = parseFloat(xRange[1]);
+                }
+
+                if (ySlider && ySlider.noUiSlider) {
+                    const yRange = ySlider.noUiSlider.get();
+                    yMin = parseFloat(yRange[0]);
+                    yMax = parseFloat(yRange[1]);
+                }
+
+                const isHueNumeric = hueColumn && currentPlotData.some(row => isNumeric(row[hueColumn]));
+
+                // Filter data based on X and Y ranges
+                let filteredData = currentPlotData.filter(row => {
+                    const xValue = parseFloat(row[xAxis]);
+                    const yValue = parseFloat(row[yAxis]);
+
+                    return (
+                        !isNaN(xValue) && xValue >= xMin && xValue <= xMax &&
+                        !isNaN(yValue) && yValue >= yMin && yValue <= yMax
+                    );
+                });
+
+                let traces = [];
+
+                if (isHueNumeric && hueColumn) {
+                    // Apply hue range filter
+                    const hueSlider = document.getElementById(`hue-range-slider-${plotId}`);
+                    let hueMin = null, hueMax = null;
+                    if (hueSlider && hueSlider.noUiSlider) {
+                        const hueRange = hueSlider.noUiSlider.get();
+                        hueMin = parseFloat(hueRange[0]);
+                        hueMax = parseFloat(hueRange[1]);
+                    } else {
+                        // If hue slider is not initialized, set default min and max
+                        const hueValues = filteredData.map(row => parseFloat(row[hueColumn])).filter(val => !isNaN(val));
+                        hueMin = Math.min(...hueValues);
+                        hueMax = Math.max(...hueValues);
+                    }
+
+                    // Create arrays for in-range and out-of-range points
+                    const inRangeData = {
+                        x: [],
+                        y: [],
+                        text: [],
+                        ids: [],
+                        hue: []
+                    };
+                    const outOfRangeData = {
+                        x: [],
+                        y: [],
+                        text: [],
+                        ids: [],
+                        hue: []
+                    };
+
+                    filteredData.forEach(row => {
+                        const hueValue = parseFloat(row[hueColumn]);
+                        const xValue = parseFloat(row[xAxis]);
+                        const yValue = parseFloat(row[yAxis]);
+
+                        if (hueValue >= hueMin && hueValue <= hueMax) {
+                            inRangeData.x.push(xValue);
+                            inRangeData.y.push(yValue);
+                            inRangeData.text.push(
+                                `X (${xAxis}): ${xValue}<br>Y (${yAxis}): ${yValue}<br>` +
+                                hoverColumns.map(col => `${col}: ${row[col]}`).join('<br>')
+                            );
+                            inRangeData.ids.push(row._uniqueId);
+                            inRangeData.hue.push(hueValue);
+                        } else {
+                            outOfRangeData.x.push(xValue);
+                            outOfRangeData.y.push(yValue);
+                            outOfRangeData.text.push(
+                                `X (${xAxis}): ${xValue}<br>Y (${yAxis}): ${yValue}<br>` +
+                                hoverColumns.map(col => `${col}: ${row[col]}`).join('<br>')
+                            );
+                            outOfRangeData.ids.push(row._uniqueId);
+                            outOfRangeData.hue.push(hueValue);
+                        }
+                    });
+
+                    // Trace for points within hue range
+                    const traceInRange = {
+                        x: inRangeData.x,
+                        y: inRangeData.y,
+                        text: inRangeData.text,
+                        customdata: inRangeData.ids,
+                        ids: inRangeData.ids,
+                        mode: 'markers',
+                        type: 'scatter',
+                        marker: {
+                            color: inRangeData.hue,
+                            colorscale: palette,
+                            colorbar: { title: hueColumn, titleside: 'right' },
+                            cmin: hueMin,
+                            cmax: hueMax,
+                            size: 6,
+                            opacity: 1
+                        },
+                        showlegend: false,
+                        hoverinfo: 'text',
+                        selected: {
+                            marker: {
+                                color: 'black',
+                                size: 12,
+                            }
+                        }
+                    };
+
+                    // Trace for points outside hue range (faded)
+                    const traceOutOfRange = {
+                        x: outOfRangeData.x,
+                        y: outOfRangeData.y,
+                        text: outOfRangeData.text,
+                        customdata: outOfRangeData.ids,
+                        ids: outOfRangeData.ids,
+                        mode: 'markers',
+                        type: 'scatter',
+                        marker: {
+                            color: outOfRangeData.hue,
+                            colorscale: palette,
+                            cmin: hueMin,
+                            cmax: hueMax,
+                            size: 4,
+                            opacity: 0.2,
+                            showscale: false,
+                        },
+                        showlegend: false,
+                        hoverinfo: 'text',
+                        selected: {
+                            marker: {
+                                color: 'black',
+                                size: 12,
+                            }
+                        }
+                    };
+
+                    traces = [traceInRange, traceOutOfRange];
+                } else {
+                    // For categorical hue or no hue
+                    const categories = hueColumn ? [...new Set(filteredData.map(row => row[hueColumn]))] : ['Data'];
+
+                    traces = categories.map(category => {
+                        const categoryData = hueColumn ? filteredData.filter(row => row[hueColumn] === category) : filteredData;
+
+                        return {
+                            x: categoryData.map(row => parseFloat(row[xAxis])),
+                            y: categoryData.map(row => parseFloat(row[yAxis])),
+                            text: categoryData.map(row =>
+                                hoverColumns.map(col => `${col}: ${row[col]}`).join('<br>')
+                            ),
+                            customdata: categoryData.map(row => row._uniqueId),
+                            ids: categoryData.map(row => row._uniqueId),
+                            mode: 'markers',
+                            type: 'scatter',
+                            name: category,
+                            marker: {
+                                size: 6,
+                            },
+                            hoverinfo: 'text',
+                            selected: {
+                                marker: {
+                                    color: 'black',
+                                    size: 12
+                                }
+                            }
+                        };
+                    });
+                }
+
+                const layout = {
+                    xaxis: { title: xAxis, type: xLogScale ? 'log' : 'linear' },
+                    yaxis: { title: yAxis, type: yLogScale ? 'log' : 'linear' },
+                    hovermode: 'closest',
+                    showlegend: true,
+                    margin: { t: 50 },
+                    plot_bgcolor: '#f8f9fa',
+                    paper_bgcolor: '#f8f9fa'
+                };
+
+                Plotly.newPlot(plotDiv, traces, layout).then(() => {
+                    plotDiv.on('plotly_click', (eventData) => onPointClick(eventData, plotId));
+                    // Handle multiple points selection (lasso/box selection)
+                    //plotDiv.on('plotly_selected', (eventData) => onPointsSelected(eventData, plotId));
+                    highlightSelectedPoints();
+                });
+
+            } else if (plotType === 'boxplot') {
+                // Updated retrieval of selected numerical columns
+                const numColumns = Array.from(document.querySelectorAll(`#checkbox-group-${plotId} input[name="num-columns-${plotId}"]:checked`)).map(checkbox => checkbox.value);
+                const groupBy = document.getElementById(`group-by-${plotId}`).value;
+
+                if (numColumns.length === 0) {
+                    plotDiv.innerHTML = '<p style="text-align: center; color: #7f8c8d;">Please select at least one numerical column to generate the boxplot.</p>';
+                    return;
+                }
+
+                let traces = [];
+
+                numColumns.forEach(numCol => {
+                    if (groupBy) {
+                        const categories = [...new Set(currentPlotData.map(row => row[groupBy]))];
+
+                        categories.forEach(category => {
+                            const filteredData = currentPlotData.filter(row => row[groupBy] === category);
+
+                            traces.push({
+                                y: filteredData.map(row => parseFloat(row[numCol])),
+                                type: 'box',
+                                name: `${numCol} - ${category}`,
+                                boxpoints: 'outliers',
+                                hoverinfo: 'y',
+                            });
+                        });
+                    } else {
+                        traces.push({
+                            y: currentPlotData.map(row => parseFloat(row[numCol])),
+                            type: 'box',
+                            name: numCol,
+                            boxpoints: 'outliers',
+                            hoverinfo: 'y',
+                        });
+                    }
+                });
+
+                const layout = {
+                    yaxis: { title: 'Value' },
+                    xaxis: { title: 'Variables' },
+                    margin: { t: 50 },
+                    plot_bgcolor: '#f8f9fa',
+                    paper_bgcolor: '#f8f9fa'
+                };
+
+                Plotly.newPlot(plotDiv, traces, layout);
+
+            } else if (plotType === 'histogram') {
+                // Updated retrieval of selected numerical columns
+                const numColumns = Array.from(document.querySelectorAll(`#checkbox-group-${plotId} input[name="num-columns-${plotId}"]:checked`)).map(checkbox => checkbox.value);
+                const groupBy = document.getElementById(`group-by-${plotId}`).value;
+
+                if (numColumns.length === 0) {
+                    plotDiv.innerHTML = '<p style="text-align: center; color: #7f8c8d;">Please select at least one numerical column to generate the histogram.</p>';
+                    return;
+                }
+
+                let traces = [];
+
+                numColumns.forEach(numCol => {
+                    if (groupBy) {
+                        const categories = [...new Set(currentPlotData.map(row => row[groupBy]))];
+
+                        categories.forEach(category => {
+                            const filteredData = currentPlotData.filter(row => row[groupBy] === category);
+                            traces.push({
+                                x: filteredData.map(row => parseFloat(row[numCol])),
+                                type: 'histogram',
+                                name: `${numCol} - ${category}`,
+                                opacity: 0.75,
+                                marker: { opacity: 0.75 },
+                                hoverinfo: 'x+y',
+                            });
+                        });
+                    } else {
+                        traces.push({
+                            x: currentPlotData.map(row => parseFloat(row[numCol])),
+                            type: 'histogram',
+                            name: numCol,
+                            opacity: 0.75,
+                            marker: { opacity: 0.75 },
+                            hoverinfo: 'x+y',
+                        });
+                    }
+                });
+
+                const layout = {
+                    xaxis: { title: 'Value' },
+                    yaxis: { title: 'Count' },
+                    barmode: groupBy ? 'group' : 'overlay',
+                    margin: { t: 50 },
+                    plot_bgcolor: '#f8f9fa',
+                    paper_bgcolor: '#f8f9fa',
+                    // bar width
+                    bargap: 0.1,
+                };
+
+                Plotly.newPlot(plotDiv, traces, layout);
+
+            }
+            else {
+                plotDiv.innerHTML = '<p style="text-align: center; color: #e74c3c;">Invalid plot type selected.</p>';
+            }
+        }
+
+
+        function onPointClick(eventData, plotId) {
+            const pt = eventData.points[0];
+            const clickedId = pt.customdata;
+
+            const clickedPoint = data.find(row => row._uniqueId === clickedId);
+
+            if (!clickedPoint) return;
+
+            const index = selectedPoints.findIndex(p => p._uniqueId === clickedId);
+
+            if (index === -1) {
+                selectedPoints.push(clickedPoint);
+            } else {
+                selectedPoints.splice(index, 1);
+            }
+            updateTable();
+            highlightSelectedPoints();
+        }
+
+        function highlightSelectedPoints() {
+            const selectedIds = new Set(selectedPoints.map(p => p._uniqueId));
+
+            // Use requestAnimationFrame for better performance
+            requestAnimationFrame(() => {
+                for (let i = 1; i <= plotCounter; i++) {
+                    const plotId = `plot-${i}`;
+                    const plotDiv = document.getElementById(plotId);
+                    if (plotDiv && plotDiv.data) {
+                        const update = {
+                            selectedpoints: [],
+                            selected: {
+                                marker: {
+                                    zorder: 99999999,
+                                    size: 8,
+                                    symbol: 'circle',
+                                    color: 'black',
+                                    opacity: 1,
+                                    line: {
+                                        color: 'red',
+                                        width: 1,
+                                    }
+                                },
+                            },
+                            unselected: {
+                                marker: {
+                                    zorder: 1,
+                                    opacity: 0.9,
+                                }
+                            }
+                        };
+
+                        plotDiv.data.forEach((trace) => {
+                            const selectedIndices = [];
+                            if (trace.ids) {
+                                trace.ids.forEach((id, index) => {
+                                    if (selectedIds.has(id)) {
+                                        selectedIndices.push(index);
+                                    }
+                                });
+                                update.selectedpoints.push(selectedIndices);
+                            } else {
+                                update.selectedpoints.push(null);
+                            }
+                        });
+                        Plotly.restyle(plotDiv, update);
+                    }
+                }
+            });
+        }
+
+
+        function updateTable() {
+            const columns = data && data.length > 0 ? Object.keys(data[0]).filter(col => !col.startsWith('_')) : [];
+
+            let tableHTML = '<table><tr>';
+            columns.forEach(col => {
+                tableHTML += `<th>${col}</th>`;
+            });
+            tableHTML += '</tr>';
+
+            if (selectedPoints.length === 0) {
+                tableHTML += '<tr><td colspan="' + columns.length + '" style="text-align: center;">No points selected. Click on points in the plot to add them to the table.</td></tr>';
+            } else {
+                selectedPoints.forEach(point => {
+                    tableHTML += '<tr>';
+                    columns.forEach(col => {
+                        tableHTML += `<td>${point[col]}</td>`;
+                    });
+                    tableHTML += '</tr>';
+                });
+            }
+
+            tableHTML += '</table>';
+            tableContainer.innerHTML = tableHTML;
+        }
+
+
+        function clearSelections() {
+            selectedPoints = [];
+            updateTable();
+            highlightSelectedPoints();
+
+            // Show notification
+            showNotification('Selections cleared.');
+        }
+
+        function exportTableToTSV() {
+            if (selectedPoints.length === 0) {
+                alert('No data to export. Please select some points first.');
+                return;
+            }
+
+            const columns = Object.keys(selectedPoints[0]).filter(col => !col.startsWith('_'));
+            let csvContent = columns.join('\t') + '\n';
+
+            selectedPoints.forEach(point => {
+                const row = columns.map(col => point[col]).join('\t');
+                csvContent += row + '\n';
+            });
+
+            const blob = new Blob([csvContent], { type: 'text/tab-separated-values;charset=utf-8;' });
+            const link = document.createElement('a');
+            link.href = URL.createObjectURL(blob);
+            link.download = 'selected_points.tsv';
+            link.click();
+
+            // Show notification
+            showNotification('Table exported successfully.');
+        }
+
+        function exportPlot(plotId) {
+            const plotDiv = document.getElementById(plotId);
+            Plotly.toImage(plotDiv, { format: 'png', width: 1200, height: 800 }).then(function (dataUrl) {
+                const link = document.createElement('a');
+                link.download = `${plotId}.png`;
+                link.href = dataUrl;
+                link.click();
+            });
+        }
+
+        function exportAllDataAsPDF() {
+            const { jsPDF } = window.jspdf;
+            const doc = new jsPDF('portrait', 'pt', 'a4');
+            const pageWidth = doc.internal.pageSize.getWidth();
+            const pageHeight = doc.internal.pageSize.getHeight();
+
+            // Add Company Logo (Replace 'logo.png' with your logo file path)
+            const logoImg = new Image();
+            logoImg.src = 'https://avatars.githubusercontent.com/u/163611200?s=400&u=d20c621ec8b0ebe1bb072c19b26726e95712d971&v=4'; // Ensure the logo is accessible
+            logoImg.onload = () => {
+                doc.addImage(logoImg, 'PNG', 40, 40, 100, 50);
+
+                // Cover Page
+                doc.setFont('helvetica', 'bold');
+                doc.setFontSize(24);
+                doc.text("Snipe SRA Exploration Dashboard?", pageWidth / 2, 120, null, null, 'center');
+
+                // Date and Time
+                doc.setFont('helvetica', 'normal');
+                doc.setFontSize(12);
+                doc.text(`Export Date: ${new Date().toLocaleString()}`, pageWidth / 2, 140, null, null, 'center');
+
+                // Move to next page for TOC
+                doc.addPage();
+
+                // Table of Contents
+                doc.setFont('helvetica', 'bold');
+                doc.setFontSize(18);
+                doc.text("Table of Contents", 40, 80);
+
+                let tocYPosition = 110;
+                const plotPageNumbers = [];
+
+                // Collect promises for images and build TOC
+                const promises = [];
+                for (let i = 1; i <= plotCounter; i++) {
+                    const plotId = `plot-${i}`;
+                    const plotDiv = document.getElementById(plotId);
+                    const plotTitleInput = document.getElementById(`title-${plotId}`);
+                    const plotTitle = plotTitleInput && plotTitleInput.value.trim() !== '' ? plotTitleInput.value : `Plot ${i}`;
+                    const pageNum = doc.internal.getNumberOfPages() + promises.length + 1;
+                    plotPageNumbers.push(pageNum);
+
+                    // Add entry to TOC
+                    doc.setFont('helvetica', 'normal');
+                    doc.setFontSize(12);
+                    doc.text(plotTitle, 60, tocYPosition);
+                    doc.text(`Page ${pageNum}`, pageWidth - 60, tocYPosition, null, null, 'right');
+                    tocYPosition += 20;
+
+                    if (tocYPosition > pageHeight - 80) {
+                        doc.addPage();
+                        tocYPosition = 80;
+                    }
+
+                    if (plotDiv) {
+                        const promise = Plotly.toImage(plotDiv, { format: 'png', width: 1200, height: 800 })
+                            .then(function (dataUrl) {
+                                // Add a new page for the plot
+                                doc.addPage();
+
+                                // Add plot title
+                                doc.setFont('helvetica', 'bold');
+                                doc.setFontSize(16);
+                                doc.text(plotTitle, pageWidth / 2, 50, null, null, 'center');
+
+                                // Add plot image
+                                const imgWidth = pageWidth - 80;
+                                const imgHeight = (imgWidth * 800) / 1200; // Maintain aspect ratio
+                                doc.addImage(dataUrl, 'PNG', 40, 70, imgWidth, imgHeight);
+
+                                // Add plot details
+                                doc.setFont('helvetica', 'normal');
+                                doc.setFontSize(12);
+                                const plotType = document.getElementById(`plot-type-${plotId}`).value;
+                                let detailsYPosition = 80 + imgHeight + 20;
+
+                                // Add plot type
+                                doc.text(`Plot Type: ${plotType}`, 60, detailsYPosition);
+
+                                if (plotType === 'scatter') {
+                                    const xAxisValue = document.getElementById(`x-axis-${plotId}`).value;
+                                    const yAxisValue = document.getElementById(`y-axis-${plotId}`).value;
+                                    const hueValue = document.getElementById(`hue-${plotId}`).value;
+                                    const xLogScale = document.getElementById(`x-log-scale-${plotId}`).checked ? 'Yes' : 'No';
+                                    const yLogScale = document.getElementById(`y-log-scale-${plotId}`).checked ? 'Yes' : 'No';
+
+                                    doc.text(`X-Axis: ${xAxisValue} (Log Scale: ${xLogScale})`, 60, detailsYPosition + 20);
+                                    doc.text(`Y-Axis: ${yAxisValue} (Log Scale: ${yLogScale})`, 60, detailsYPosition + 40);
+                                    doc.text(`Color By: ${hueValue}`, 60, detailsYPosition + 60);
+                                }
+                                else if (plotType === 'histogram' || plotType === 'boxplot') {
+                                    // Updated retrieval of selected numerical columns
+                                    const numColumns = Array.from(document.querySelectorAll(`#checkbox-group-${plotId} input[name="num-columns-${plotId}"]:checked`)).map(checkbox => checkbox.value).join(', ');
+                                    const groupBy = document.getElementById(`group-by-${plotId}`).value || 'None';
+                                    doc.text(`Numerical Columns: ${numColumns}`, 60, detailsYPosition + 20);
+                                    doc.text(`Group By: ${groupBy}`, 60, detailsYPosition + 40);
+                                }
+
+                                const assayTypeCheckboxes = document.querySelectorAll(`#assay-type-checkboxes-${plotId} input[name="assay-type-${plotId}"]:checked`);
+                                const selectedAssayTypes = Array.from(assayTypeCheckboxes).map(checkbox => checkbox.value);
+                                const assayTypeValue = Array.from(assayTypeCheckboxes).map(checkbox => checkbox.value).join(', ') || 'All';
+
+                                currentPlotData = data.filter(row => {
+                                    const assayType = row["Assay type"] || 'Unknown';
+                                    return selectedAssayTypes.includes(assayType);
+                                });
+
+                                doc.text(`Assay type: ${assayTypeValue}`, 60, detailsYPosition + 80);
+
+                                // Add user's notes
+                                const notesValue = document.getElementById(`notes-${plotId}`).value;
+                                if (notesValue.trim() !== '') {
+                                    doc.setFont('helvetica', 'bolditalic');
+                                    doc.text("Notes:", 60, detailsYPosition + 90);
+                                    doc.setFont('helvetica', 'normal');
+                                    // Handle multi-line notes
+                                    const lines = doc.splitTextToSize(notesValue, pageWidth - 120);
+                                    doc.text(lines, 60, detailsYPosition + 110);
+                                }
+                            });
+                        promises.push(promise);
+                    }
+                }
+
+                // Add Selected Data Table if any points are selected
+                /*
+                if (selectedPoints.length > 0) {
+                    const pageNum = doc.internal.getNumberOfPages() + promises.length + 1;
+                    doc.setFont('helvetica', 'normal');
+                    doc.setFontSize(12);
+                    doc.text("Selected Data Points", 60, tocYPosition);
+                    doc.text(`Page ${pageNum}`, pageWidth - 60, tocYPosition, null, null, 'right');
+ 
+                    const promise = new Promise((resolve) => {
+                        doc.addPage();
+                        addSelectedDataTable(doc);
+                        resolve();
+                    });
+                    promises.push(promise);
+                }*/
+
+                Promise.all(promises).then(() => {
+                    // Add page numbers
+                    const pageCount = doc.internal.getNumberOfPages();
+                    for (let i = 1; i <= pageCount; i++) {
+                        doc.setPage(i);
+                        doc.setFontSize(10);
+                        doc.text(`Page ${i} of ${pageCount}`, pageWidth / 2, pageHeight - 30, null, null, 'center');
+                    }
+
+                    // Save the PDF
+                    doc.save("snipe_visualization_report.pdf");
+                });
+            };
+        }
+
+
+
+
+        function addSelectedDataTable(doc) {
+            doc.addPage();
+            doc.setFontSize(16);
+            doc.text("Selected Data Points", 20, 20);
+
+            const columns = Object.keys(selectedPoints[0]);
+            let yOffset = 30;
+            const pageWidth = doc.internal.pageSize.width;
+
+            // Calculate column widths
+            const columnWidths = columns.map(col =>
+                Math.min(40, Math.max(...selectedPoints.map(row => doc.getTextWidth(String(row[col])))))
+            );
+            const totalWidth = columnWidths.reduce((a, b) => a + b, 0);
+            const scaleFactor = (pageWidth - 40) / totalWidth;
+            const scaledWidths = columnWidths.map(w => w * scaleFactor);
+
+            // Add headers
+            doc.setFontSize(10);
+            doc.setTextColor(100);
+            columns.forEach((col, index) => {
+                doc.text(col, 20 + scaledWidths.slice(0, index).reduce((a, b) => a + b, 0), yOffset);
+            });
+            yOffset += 10;
+
+            // Add data rows
+            doc.setTextColor(0);
+            selectedPoints.forEach((point, rowIndex) => {
+                if (yOffset > 280) {
+                    doc.addPage();
+                    yOffset = 20;
+                }
+                columns.forEach((col, colIndex) => {
+                    doc.text(String(point[col]), 20 + scaledWidths.slice(0, colIndex).reduce((a, b) => a + b, 0), yOffset);
+                });
+                yOffset += 7;
+            });
+
+            // Save the PDF
+            doc.save("snipe_visualization_report.pdf");
+        }
+
+
+        let driverInstance;
+        function initOnboardingTour() {
+            // Access the Driver class from the window object
+            const driver = window.driver.js.driver; // For Driver.js version 1.0.1
+
+            const steps = [
+                {
+                    element: '.container h1',
+                    popover: {
+                        title: 'Welcome to Snipe SRA Exploration Dashboard',
+                        description: 'This dashboard helps you visualize and analyze the SRA experiments.',
+                        position: 'bottom'
+                    }
+                },
+                {
+                    element: '.floating-buttons',
+                    popover: {
+                        title: 'Control Buttons',
+                        description: 'Use these buttons to clear selections, export data, and access help.',
+                        position: 'left'
+                    }
+                },
+                {
+                    element: '.search-container',
+                    popover: {
+                        title: 'Search Bar',
+                        description: 'Search for specific data points by BioProject, BioSample, or Experiment.',
+                        position: 'bottom'
+                    }
+                },
+                {
+                    element: '.controls',
+                    popover: {
+                        title: 'Plot Controls',
+                        description: 'Use these controls to customize your plot.',
+                        position: 'bottom'
+                    }
+                },
+                {
+                    element: '.additional-inputs',
+                    popover: {
+                        title: 'Plot Details',
+                        description: 'Add a title and notes for your plot here.',
+                        position: 'bottom'
+                    }
+                }
+            ];
+
+            driverInstance = driver({
+                animate: true,
+                opacity: 0.75,
+                padding: 10,
+                allowClose: true,
+                overlayClickNext: false,
+                doneBtnText: 'Finish',
+                closeBtnText: 'Close',
+                nextBtnText: '→',
+                prevBtnText: '←',
+                showButtons: false,
+                keyboardControl: true,
+                showProgress: true,
+                steps: steps,
+            });
+
+        }
+
+        function startTour() {
+            driverInstance.drive();
+        }
+
+        // ========================================
+        // END OF STEP BY STEP TOUR
+        // ========================================
+
+        // ========================================
+        // IMPORT/EXPORT SESSIONS
+        // ========================================
+
+        function exportSession() {
+            const sessionData = collectSessionData();
+
+            // Convert session data to JSON string
+            const jsonData = JSON.stringify(sessionData, null, 2);
+
+            // Create a blob and trigger download
+            const blob = new Blob([jsonData], { type: 'application/json' });
+            const link = document.createElement('a');
+            link.href = URL.createObjectURL(blob);
+            link.download = 'session_data.json';
+            link.click();
+
+            // Show notification
+            showNotification('Session exported successfully.');
+        }
+
+        // Function to import a session from JSON
+
+        // Updated importSession function
+        function importSession(jsonData, userData = null) {
+            try {
+                // Show loading modal
+                document.getElementById('loading-modal').style.display = 'flex';
+
+                const sessionData = JSON.parse(jsonData);
+
+                // Clear existing data and plots
+                clearAllData();
+                plotsContainer.innerHTML = '';
+                plotCounter = 0;
+                selectedPoints = [];
+
+                // Restore species, reference, and amplicon selections
+                document.getElementById('species-select').value = sessionData.selectedSpecies;
+                document.getElementById('species-select').dispatchEvent(new Event('change'));
+
+                document.getElementById('reference-select').value = sessionData.selectedReference;
+                document.getElementById('reference-select').dispatchEvent(new Event('change'));
+
+                document.getElementById('amplicon-select').value = sessionData.selectedAmplicon;
+                document.getElementById('amplicon-select').dispatchEvent(new Event('change'));
+
+                // Load data file
+                const filePath = sessionData.metadata.dataFilePath;
+                loadData(filePath, () => {
+                    // After data is loaded, integrate session userData if present
+                    if (sessionData.userData) {
+                        integrateUserData(sessionData.userData);
+                    }
+
+                    // Integrate user data from URL if present
+                    if (userData) {
+                        integrateUserData(userData);
+                    }
+
+                    // Restore plots
+                    sessionData.plots.forEach(plotConfig => {
+                        addNewPlot();
+
+                        // Restore plot type
+                        document.getElementById(`plot-type-${plotConfig.plotId}`).value = plotConfig.plotType;
+                        renderDynamicControls(plotConfig.plotId);
+
+                        // Restore controls
+                        if (plotConfig.plotType === 'scatter') {
+                            document.getElementById(`x-axis-${plotConfig.plotId}`).value = plotConfig.controls.xAxis;
+                            document.getElementById(`y-axis-${plotConfig.plotId}`).value = plotConfig.controls.yAxis;
+                            document.getElementById(`hue-${plotConfig.plotId}`).value = plotConfig.controls.hue;
+                            document.getElementById(`x-log-scale-${plotConfig.plotId}`).checked = plotConfig.controls.xLogScale;
+                            document.getElementById(`y-log-scale-${plotConfig.plotId}`).checked = plotConfig.controls.yLogScale;
+                            document.getElementById(`palette-${plotConfig.plotId}`).value = plotConfig.controls.palette || 'Spectral';
+
+                            // Initialize sliders
+                            initializeXAxisSlider(plotConfig.plotId);
+                            initializeYAxisSlider(plotConfig.plotId);
+                            initializeHueSlider(plotConfig.plotId);
+
+                            // Restore slider positions
+                            const xSlider = document.getElementById(`x-range-slider-${plotConfig.plotId}`);
+                            const ySlider = document.getElementById(`y-range-slider-${plotConfig.plotId}`);
+                            const hueSlider = document.getElementById(`hue-range-slider-${plotConfig.plotId}`);
+
+                            if (xSlider.noUiSlider && plotConfig.controls.xRange) {
+                                xSlider.noUiSlider.set(plotConfig.controls.xRange);
+                            }
+                            if (ySlider.noUiSlider && plotConfig.controls.yRange) {
+                                ySlider.noUiSlider.set(plotConfig.controls.yRange);
+                            }
+                            if (hueSlider && hueSlider.noUiSlider && plotConfig.controls.hueRange) {
+                                hueSlider.noUiSlider.set(plotConfig.controls.hueRange);
+                            }
+                        } else if (plotConfig.plotType === 'histogram' || plotConfig.plotType === 'boxplot') {
+                            plotConfig.controls.numColumns.forEach(col => {
+                                const checkbox = document.getElementById(`num-column-${col}-${plotConfig.plotId}`);
+                                if (checkbox) {
+                                    checkbox.checked = true;
+                                }
+                            });
+                            document.getElementById(`group-by-${plotConfig.plotId}`).value = plotConfig.controls.groupBy;
+                        }
+
+                        // Restore selected assay types
+                        const assayTypeCheckboxes = document.querySelectorAll(
+                            `#assay-type-checkboxes-${plotConfig.plotId} input[name="assay-type-${plotConfig.plotId}"]`
+                        );
+                        assayTypeCheckboxes.forEach(checkbox => {
+                            checkbox.checked = plotConfig.controls.selectedAssayTypes.includes(checkbox.value);
+                        });
+
+                        // Restore title and notes
+                        document.getElementById(`title-${plotConfig.plotId}`).value = plotConfig.title;
+                        document.getElementById(`plot-title-display-${plotConfig.plotId}`).textContent = plotConfig.title || `Plot ${plotConfig.plotId.split('-')[1]}`;
+                        document.getElementById(`notes-${plotConfig.plotId}`).value = plotConfig.notes;
+
+                        // Update the plot
+                        updatePlot(plotConfig.plotId);
+                    });
+
+                    // After all data is loaded and plots are restored, set selectedPoints
+                    const sessionSelectedIds = sessionData.selectedPoints;
+
+                    let userDataIds = [];
+                    if (userData) {
+                        userDataIds = userData.map(row => {
+                            if (row['Experiment ID']) {
+                                return 'user_' + row['Experiment ID'];
+                            } else {
+                                return 'user_' + row._uniqueId;
+                            }
+                        });
+                    }
+
+                    const allSelectedIds = sessionSelectedIds.concat(userDataIds);
+
+                    selectedPoints = data.filter(row => allSelectedIds.includes(row._uniqueId));
+
+                    // Update the table and highlight selected points
+                    updateTable();
+                    highlightSelectedPoints();
+
+                    // Show notification
+                    showNotification('Session imported successfully.');
+
+                    // Hide loading modal
+                    document.getElementById('loading-modal').style.display = 'none';
+                }, false);
+            } catch (error) {
+                alert('Failed to import session: ' + error.message);
+                // Hide loading modal in case of error
+                document.getElementById('loading-modal').style.display = 'none';
+            }
+        }
+
+
+        function integrateUserData(userDataArray) {
+            userDataArray.forEach(row => {
+                // Assign a unique ID with a 'user_' prefix
+                if (row['Experiment ID']) {
+                    row._uniqueId = 'user_' + row['Experiment ID'];
+                } else {
+                    // Generate a unique ID for user data if the field is missing
+                    row._uniqueId = 'user_' + Math.random().toString(36).substr(2, 9);
+                }
+                row._isUserData = true;
+
+                // Assign 'Unknown' to missing 'Assay type'
+                if (!row['Assay type']) {
+                    row['Assay type'] = 'Unknown';
+                }
+            });
+            data = data.concat(userDataArray);
+        }
+
+
+        // Function to export the session data to the URL
+        function collectSessionData() {
+            const sessionData = {
+                metadata: {
+                    exportDate: new Date().toISOString(),
+                    dataFilePath: dataFilePath,
+                },
+                selectedSpecies: document.getElementById('species-select').value,
+                selectedReference: document.getElementById('reference-select').value,
+                selectedAmplicon: document.getElementById('amplicon-select').value,
+                plots: [],
+                selectedPoints: selectedPoints.map(p => p._uniqueId),
+            };
+
+            // Collect data for each plot
+            for (let i = 1; i <= plotCounter; i++) {
+                const plotId = `plot-${i}`;
+                const plotType = document.getElementById(`plot-type-${plotId}`).value;
+                const plotConfig = {
+                    plotId: plotId,
+                    plotType: plotType,
+                    controls: {},
+                    title: document.getElementById(`title-${plotId}`).value,
+                    notes: document.getElementById(`notes-${plotId}`).value,
+                };
+
+                // Collect control values based on plot type
+                if (plotType === 'scatter') {
+                    plotConfig.controls.xAxis = document.getElementById(`x-axis-${plotId}`).value;
+                    plotConfig.controls.yAxis = document.getElementById(`y-axis-${plotId}`).value;
+                    plotConfig.controls.hue = document.getElementById(`hue-${plotId}`).value;
+                    plotConfig.controls.xLogScale = document.getElementById(`x-log-scale-${plotId}`).checked;
+                    plotConfig.controls.yLogScale = document.getElementById(`y-log-scale-${plotId}`).checked;
+                    plotConfig.controls.palette = document.getElementById(`palette-${plotId}`).value;
+
+                    // Save range slider values
+                    const xSlider = document.getElementById(`x-range-slider-${plotId}`);
+                    const ySlider = document.getElementById(`y-range-slider-${plotId}`);
+                    const hueSlider = document.getElementById(`hue-range-slider-${plotId}`);
+
+                    if (xSlider.noUiSlider) {
+                        plotConfig.controls.xRange = xSlider.noUiSlider.get();
+                    }
+                    if (ySlider.noUiSlider) {
+                        plotConfig.controls.yRange = ySlider.noUiSlider.get();
+                    }
+                    if (hueSlider && hueSlider.noUiSlider) {
+                        plotConfig.controls.hueRange = hueSlider.noUiSlider.get();
+                    }
+                } else if (plotType === 'histogram' || plotType === 'boxplot') {
+                    plotConfig.controls.numColumns = Array.from(
+                        document.querySelectorAll(
+                            `#checkbox-group-${plotId} input[name="num-columns-${plotId}"]:checked`
+                        )
+                    ).map(checkbox => checkbox.value);
+                    plotConfig.controls.groupBy = document.getElementById(`group-by-${plotId}`).value;
+                }
+
+                // Collect selected assay types
+                plotConfig.controls.selectedAssayTypes = Array.from(
+                    document.querySelectorAll(
+                        `#assay-type-checkboxes-${plotId} input[name="assay-type-${plotId}"]:checked`
+                    )
+                ).map(checkbox => checkbox.value);
+
+                sessionData.plots.push(plotConfig);
+            }
+
+            // Include user data if present
+            const userDataPoints = data.filter(row => row._isUserData);
+            if (userDataPoints.length > 0) {
+                sessionData.userData = userDataPoints.map(row => {
+                    const newRow = {};
+                    for (let key in row) {
+                        if (!key.startsWith('_')) {
+                            newRow[key] = row[key];
+                        }
+                    }
+                    return newRow;
+                });
+            }
+
+            return sessionData;
+        }
+
+        function exportSessionToURL() {
+            const sessionData = collectSessionData();
+
+            // Convert session data to JSON string
+            const jsonData = JSON.stringify(sessionData);
+
+            // Compress and encode the JSON string
+            const compressedData = LZString.compressToEncodedURIComponent(jsonData);
+
+            // Create the shareable URL
+            const newURL = window.location.protocol + "//" + window.location.host + window.location.pathname + '?session=' + compressedData;
+
+            // Display the URL in the modal
+            const sessionUrlInput = document.getElementById('session-url-input');
+            sessionUrlInput.value = newURL;
+
+            // Show the modal
+            const exportSessionUrlModal = document.getElementById('export-session-url-modal');
+            exportSessionUrlModal.style.display = 'flex';
+        }
+
+
+        // Helper function to collect session data
+        function collectSessionData() {
+            const sessionData = {
+                metadata: {
+                    exportDate: new Date().toISOString(),
+                    dataFilePath: dataFilePath,
+                },
+                selectedSpecies: document.getElementById('species-select').value,
+                selectedReference: document.getElementById('reference-select').value,
+                selectedAmplicon: document.getElementById('amplicon-select').value,
+                plots: [],
+                selectedPoints: selectedPoints.map(p => p._uniqueId),
+            };
+
+            // Collect data for each plot
+            for (let i = 1; i <= plotCounter; i++) {
+                const plotId = `plot-${i}`;
+                const plotType = document.getElementById(`plot-type-${plotId}`).value;
+                const plotConfig = {
+                    plotId: plotId,
+                    plotType: plotType,
+                    controls: {},
+                    title: document.getElementById(`title-${plotId}`).value,
+                    notes: document.getElementById(`notes-${plotId}`).value,
+                };
+
+                // Collect control values based on plot type
+                if (plotType === 'scatter') {
+                    plotConfig.controls.xAxis = document.getElementById(`x-axis-${plotId}`).value;
+                    plotConfig.controls.yAxis = document.getElementById(`y-axis-${plotId}`).value;
+                    plotConfig.controls.hue = document.getElementById(`hue-${plotId}`).value;
+                    plotConfig.controls.xLogScale = document.getElementById(`x-log-scale-${plotId}`).checked;
+                    plotConfig.controls.yLogScale = document.getElementById(`y-log-scale-${plotId}`).checked;
+                    plotConfig.controls.palette = document.getElementById(`palette-${plotId}`).value;
+
+                    // Save range slider values
+                    const xSlider = document.getElementById(`x-range-slider-${plotId}`);
+                    const ySlider = document.getElementById(`y-range-slider-${plotId}`);
+                    const hueSlider = document.getElementById(`hue-range-slider-${plotId}`);
+
+                    if (xSlider.noUiSlider) {
+                        plotConfig.controls.xRange = xSlider.noUiSlider.get();
+                    }
+                    if (ySlider.noUiSlider) {
+                        plotConfig.controls.yRange = ySlider.noUiSlider.get();
+                    }
+                    if (hueSlider && hueSlider.noUiSlider) {
+                        plotConfig.controls.hueRange = hueSlider.noUiSlider.get();
+                    }
+                } else if (plotType === 'histogram' || plotType === 'boxplot') {
+                    plotConfig.controls.numColumns = Array.from(
+                        document.querySelectorAll(
+                            `#checkbox-group-${plotId} input[name="num-columns-${plotId}"]:checked`
+                        )
+                    ).map(checkbox => checkbox.value);
+                    plotConfig.controls.groupBy = document.getElementById(`group-by-${plotId}`).value;
+                }
+
+                // Collect selected assay types
+                plotConfig.controls.selectedAssayTypes = Array.from(
+                    document.querySelectorAll(
+                        `#assay-type-checkboxes-${plotId} input[name="assay-type-${plotId}"]:checked`
+                    )
+                ).map(checkbox => checkbox.value);
+
+                sessionData.plots.push(plotConfig);
+            }
+
+            // Include user data if present
+            const userDataPoints = data.filter(row => row._isUserData);
+            if (userDataPoints.length > 0) {
+                sessionData.userData = userDataPoints.map(row => {
+                    const newRow = {};
+                    for (let key in row) {
+                        if (!key.startsWith('_')) {
+                            newRow[key] = row[key];
+                        }
+                    }
+                    return newRow;
+                });
+            }
+
+            return sessionData;
+        }
+
+        function showNotification(message, type = 'success') {
+            const notificationContainer = document.getElementById('notification-container');
+            const notification = document.createElement('div');
+            notification.className = 'notification';
+            if (type === 'error') {
+                notification.style.backgroundColor = '#e74c3c';
+            } else if (type === 'warning') {
+                notification.style.backgroundColor = '#f39c12';
+            } else {
+                notification.style.backgroundColor = '#2ecc71';
+            }
+            notification.textContent = message;
+
+            notificationContainer.appendChild(notification);
+
+            // Auto-fade and remove the notification after 3 seconds
+            setTimeout(() => {
+                notification.style.opacity = '0';
+                setTimeout(() => {
+                    notificationContainer.removeChild(notification);
+                }, 500);
+            }, 3000);
+        }
+
+    </script>
+
+    <!-- Import Session Modal -->
+    <div id="import-session-modal" class="modal">
+        <div class="modal-content">
+            <span id="import-session-close" class="close-button">&times;</span>
+            <h2>Import Session</h2>
+            <p>You can upload a session JSON file or paste the session data below.</p>
+            <input type="file" id="session-file-input" accept=".json">
+            <textarea id="session-textarea" placeholder="Paste session JSON data here..." rows="10"
+                style="width: 100%;"></textarea>
+            <button id="import-session-confirm" class="button">Import Session</button>
+        </div>
+    </div>
+
+    <!-- Export Session URL Modal -->
+    <div id="export-session-url-modal" class="modal">
+        <div class="modal-content">
+            <span id="export-session-url-close" class="close-button">&times;</span>
+            <h2>Shareable Session URL</h2>
+            <p>You can copy the URL below to share your session.</p>
+            <input type="text" id="session-url-input" readonly style="width: 100%; font-size: 14px; padding: 10px;">
+            <button id="copy-session-url" class="button">Copy to Clipboard</button>
+        </div>
+    </div>
+
+    <!-- Loading Modal -->
+    <div id="loading-modal" class="modal">
+        <div class="modal-content" style="text-align: center;">
+            <h2>Loading...</h2>
+            <p>Please wait while the data is being processed.</p>
+        </div>
+    </div>
+
+    <!-- Upload Data Modal -->
+    <div id="upload-data-modal" class="modal">
+        <div class="modal-content">
+            <span id="upload-data-close" class="close-button">&times;</span>
+            <h2>Upload Custom Data</h2>
+            <p>You can upload a custom TSV file containing your data.</p>
+            <input type="file" id="upload-data-file-input" accept=".tsv,.txt">
+            <p>
+                <label>
+                    <input type="radio" name="upload-data-mode" value="replace" checked>
+                    Plot only my data
+                </label>
+                <label>
+                    <input type="radio" name="upload-data-mode" value="append">
+                    Append to current data
+                </label>
+            </p>
+            <button id="upload-data-confirm" class="button">Upload Data</button>
+        </div>
+    </div>
+
+
+    <div id="notification-container" style="position: fixed; top: 20px; right: 20px; z-index: 10000;"></div>
+
+
+    <script src="https://code.jquery.com/jquery-3.5.1.slim.min.js"></script>
+    <script src="https://cdn.jsdelivr.net/npm/bootstrap@4.5.2/dist/js/bootstrap.bundle.min.js"></script>
+</body>
\ No newline at end of file
