Hugging Face's logo

Spaces:
QCDevs
/
Selector
Running

App Files Community
Fanwang Meng commited on
Commit
f705b42
·
1 Parent(s): 8dc17f5

Use java script for fixing the scroll issue

Browse files
Files changed (1) hide show
  1. templates/index.html +358 -341
templates/index.html CHANGED
@@ -18,50 +18,60 @@
18
  --text-secondary: #64748b;
19
  }
20
 
 
 
 
 
 
 
 
 
21
  body {
22
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
23
  color: var(--text-primary);
24
  line-height: 1.6;
25
- height: 100vh;
26
- overflow-y: auto;
27
- margin: 0;
28
- padding: 0;
 
29
  }
30
 
31
  .wrapper {
32
  display: flex;
33
  width: 100%;
34
- align-items: stretch;
35
- min-height: 100vh;
36
- overflow-y: auto;
 
 
 
 
37
  }
38
 
39
  #sidebar {
40
  min-width: var(--sidebar-width);
41
  max-width: var(--sidebar-width);
42
- height: 100vh;
43
- position: sticky;
44
- top: 0;
45
  overflow-y: auto;
46
- transition: all 0.3s ease-out;
47
  background-color: var(--sidebar-bg);
48
  border-right: 1px solid var(--border-color);
49
- }
50
-
51
- #sidebar.active {
52
- margin-left: calc(-1 * var(--sidebar-width));
53
  }
54
 
55
  #content {
56
- width: 100%;
 
 
57
  padding: 2rem;
58
- min-height: 100vh;
59
- margin-left: 0;
60
- transition: all 0.3s ease-out;
61
  background-color: white;
62
- padding-bottom: 4rem;
 
 
 
 
63
  overflow-y: auto;
64
- flex: 1;
65
  }
66
 
67
  .sidebar-header {
@@ -413,10 +423,12 @@
413
  <script>
414
  // Initialize layout on page load
415
  document.addEventListener('DOMContentLoaded', function() {
416
- // Force layout recalculation
417
- document.body.style.display = 'none';
418
- document.body.offsetHeight; // Force reflow
419
- document.body.style.display = '';
 
 
420
 
421
  // Show initial section
422
  showSection('selection');
@@ -426,336 +438,89 @@
426
 
427
  // Load markdown content
428
  loadMarkdownContent();
 
 
 
 
 
 
 
 
429
  });
430
- </script>
431
- <!-- MathJax Loading -->
432
- <script type="text/javascript" src="https://cdn.mathjax.org/mathjax/latest/MathJax.js?config=TeX-AMS_HTML"></script>
433
- </head>
434
- <body>
435
- <button type="button" id="showSidebarBtn" class="btn">
436
- <i class="bi bi-chevron-right"></i>
437
- </button>
438
 
439
- <div class="wrapper">
440
- <!-- Sidebar -->
441
- <nav id="sidebar">
442
- <div class="sidebar-header">
443
- <h5 class="sidebar-title">Selector Server</h5>
444
- <button type="button" id="sidebarCollapse" class="btn">
445
- <i class="bi bi-chevron-left"></i>
446
- </button>
447
- </div>
448
- <ul class="nav flex-column">
449
- <li class="nav-item">
450
- <a href="#" class="nav-link active" data-section="selection">
451
- <i class="bi bi-grid-3x3-gap me-2"></i>Subset Selection
452
- </a>
453
- </li>
454
- <li class="nav-item">
455
- <a href="#" class="nav-link" data-section="diversity">
456
- <i class="bi bi-graph-up me-2"></i>Diversity Calculation
457
- </a>
458
- </li>
459
- <li class="nav-item">
460
- <a href="#" class="nav-link" data-section="about">
461
- <i class="bi bi-info-circle me-2"></i>About
462
- </a>
463
- </li>
464
- <li class="nav-item">
465
- <a href="#" class="nav-link" data-section="contact">
466
- <i class="bi bi-envelope me-2"></i>Contact
467
- </a>
468
- </li>
469
- </ul>
470
- </nav>
471
 
472
- <!-- Page Content -->
473
- <div id="content">
474
- <!-- Selection Section -->
475
- <div id="selection" class="section">
476
- <h2>Subset Selection</h2>
477
- <div class="card">
478
- <div class="card-body">
479
- <form id="selectionForm" enctype="multipart/form-data">
480
- <div class="mb-3">
481
- <label for="file" class="form-label">Upload Feature Matrix</label>
482
- <input type="file" class="form-control" id="file" name="file" accept=".txt,.npz,.xlsx,.xls">
483
- <small class="text-muted">Supported formats: .txt, .npz, .xlsx, .xls (max 32MB)</small>
484
- </div>
485
 
486
- <div class="mb-3">
487
- <label for="size" class="form-label">Subset Size</label>
488
- <input type="number" class="form-control" id="size" name="size" min="1" step="1" required>
489
- <small class="text-muted">Number of data points to select (integer)</small>
490
- </div>
 
 
491
 
492
- <div class="mb-3">
493
- <label for="distance_metric" class="form-label">Distance Function</label>
494
- <select class="form-select" id="distance_metric" name="distance_metric">
495
- <option value="euclidean">euclidean</option>
496
- <option value="cityblock">cityblock</option>
497
- <option value="cosine">cosine</option>
498
- <option value="l1">l1</option>
499
- <option value="l2">l2</option>
500
- <option value="manhattan">manhattan</option>
501
- <option value="braycurtis">braycurtis</option>
502
- <option value="canberra">canberra</option>
503
- <option value="chebyshev">chebyshev</option>
504
- <option value="correlation">correlation</option>
505
- <option value="dice">dice</option>
506
- <option value="hamming">hamming</option>
507
- <option value="jaccard">jaccard</option>
508
- <option value="kulsinski">kulsinski</option>
509
- <option value="mahalanobis">mahalanobis</option>
510
- <option value="minkowski">minkowski</option>
511
- <option value="rogerstanimoto">rogerstanimoto</option>
512
- <option value="russellrao">russellrao</option>
513
- <option value="seuclidean">seuclidean</option>
514
- <option value="sokalmichener">sokalmichener</option>
515
- <option value="sokalsneath">sokalsneath</option>
516
- <option value="sqeuclidean">sqeuclidean</option>
517
- <option value="yule">yule</option>
518
- </select>
519
- <small class="text-muted">Distance metric from scikit-learn's pairwise_distances (optional)</small>
520
- </div>
521
 
522
- <div class="mb-3">
523
- <label for="algorithm" class="form-label">Selection Method</label>
524
- <select class="form-select" id="algorithm" name="algorithm">
525
- <optgroup label="Distance-based Methods">
526
- <option value="MaxMin">MaxMin</option>
527
- <option value="MaxSum">MaxSum</option>
528
- <option value="OptiSim">OptiSim</option>
529
- <option value="DISE">DISE</option>
530
- </optgroup>
531
- <optgroup label="Partition-based Methods">
532
- <option value="GridPartition">Grid Partition</option>
533
- </optgroup>
534
- <optgroup label="Similarity-based Methods">
535
- <option value="NSimilarity">NSimilarity</option>
536
- </optgroup>
537
- </select>
538
- </div>
539
 
540
- <div class="mb-3" id="nbins_axis_container" style="display: none;">
541
- <label for="nbins_axis" class="form-label">Number of Bins per Axis</label>
542
- <input type="number" class="form-control" id="nbins_axis" name="nbins_axis" min="1" value="5">
543
- <small class="form-text text-muted">Number of bins to partition each axis into</small>
544
- </div>
545
 
546
- <div class="mb-3">
547
- <label for="parameters" class="form-label">Additional Parameters (JSON format)</label>
548
- <textarea class="form-control font-monospace" id="parameters" name="parameters" rows="10"></textarea>
549
- </div>
 
550
 
551
- <div class="d-grid gap-2">
552
- <button type="submit" class="btn btn-primary">
553
- <i class="bi bi-play-fill me-2"></i>Run Subset Selection
554
- </button>
555
- </div>
556
- </form>
557
- </div>
558
- </div>
559
 
560
- <div id="resultSection" class="mt-4" style="display: none;">
561
- <div class="card">
562
- <div class="card-body">
563
- <h5 class="card-title">Results</h5>
564
- <div id="warnings" class="alert alert-warning" style="display: none;"></div>
565
- <div id="error" class="alert alert-danger" style="display: none;"></div>
 
 
566
 
567
- <div id="success-content" style="display: none;">
568
- <h4>Selected Indices:</h4>
569
- <pre id="indices"></pre>
570
- <div class="mb-3">
571
- <label for="download-format" class="form-label">Download Format</label>
572
- <select class="form-select" id="download-format">
573
- <option value="txt">TXT</option>
574
- <option value="npz">NPZ</option>
575
- <option value="xlsx">Excel</option>
576
- </select>
577
- </div>
578
- <button class="btn btn-primary" onclick="downloadIndices()">Download Results</button>
579
- </div>
580
- </div>
581
- </div>
582
- </div>
583
- </div>
584
 
585
- <!-- Diversity Section -->
586
- <div id="diversity" class="section" style="display: none;">
587
- <h2>Diversity Calculation</h2>
588
- <div class="container mt-4">
589
- <form id="diversity-form" enctype="multipart/form-data">
590
- <div class="mb-3">
591
- <label for="feature_subset" class="form-label">Upload Feature Subset</label>
592
- <input type="file" class="form-control" id="feature_subset" name="feature_subset" accept=".csv,.txt,.xlsx,.xls,.npz">
593
- <small class="text-muted">Upload your feature subset matrix (supported formats: CSV, TXT, XLSX, NPZ)</small>
594
- </div>
595
 
596
- <div class="mb-3">
597
- <label for="features" class="form-label">Upload Features (Optional)</label>
598
- <input type="file" class="form-control" id="features" name="features" accept=".csv,.txt,.xlsx,.xls,.npz">
599
- <small class="text-muted">Upload your features matrix. It's only for hypersphere overlaping algorithm.</small>
600
- </div>
601
 
602
- <div class="mb-3">
603
- <label for="div_type" class="form-label">Diversity Type</label>
604
- <select class="form-select" id="div_type" name="div_type">
605
- <option value="logdet">Log Determinant</option>
606
- <option value="shannon_entropy">Shannon Entropy</option>
607
- <option value="explicit_diversity_index">Explicit Diversity Index</option>
608
- <option value="wdud">WDUD</option>
609
- <option value="hypersphere_overlap">Hypersphere Overlap</option>
610
- <option value="gini_coefficient">Gini Coefficient</option>
611
- </select>
612
- </div>
613
-
614
- <div class="mb-3">
615
- <label for="div_parameters" class="form-label">Additional Parameters (JSON format)</label>
616
- <textarea class="form-control font-monospace" id="div_parameters" name="div_parameters" rows="5"></textarea>
617
- <small class="text-muted">Specify normalize, truncation, and cs parameters in JSON format</small>
618
- </div>
619
-
620
- <div class="d-grid gap-2">
621
- <button type="submit" class="btn btn-primary">Calculate Diversity</button>
622
- </div>
623
-
624
- <!-- Results section -->
625
- <div id="diversity-results" class="mt-4" style="display: none;">
626
- <h3>Results</h3>
627
- <div class="card">
628
- <div class="card-body">
629
- <h5 class="card-title">Diversity Score</h5>
630
- <p class="card-text" id="diversity-score"></p>
631
- </div>
632
- </div>
633
- </div>
634
- </form>
635
- </div>
636
- </div>
637
-
638
- <!-- About Section -->
639
- <div id="about" class="section" style="display: none;">
640
- <h2>About</h2>
641
- <div class="content">
642
- <h2>Motivation</h2>
643
- <p>Selecting diverse and representative subsets is crucial for the data-driven models and machine learning applications in many science and engineering disciplines, especially for molecular design and drug discovery. Motivated by this, we develop the Selector package, a free and open-source Python library for selecting diverse subsets.</p>
644
- <p>The <code>Selector</code> library implements a range of existing algorithms for subset sampling based on the distance between and similarity of samples, as well as tools based on spatial partitioning. In addition, it includes seven diversity measures for quantifying the diversity of a given set. We also implemented various mathematical formulations to convert similarities into dissimilarities.</p>
645
-
646
- <h2>Selector Library</h2>
647
- <p>Selector is a free, open-source, and cross-platform Python library designed to help you effortlessly identify the most diverse subset of molecules from your dataset. Please use the following citation in any publication using Selector library:</p>
648
-
649
- <h2>Citation</h2>
650
- <p>Please use the following citation in any publication using the <code>Selector</code> library:</p>
651
- <p><strong>To be added</strong></p>
652
-
653
- <h2>More Information</h2>
654
- <p>For more information about the Selector library, please visit our <a href="https://github.com/theochem/selector" target="_blank">GitHub repository</a> and documentation at <a href="https://selector.qcdevs.org" target="_blank">https://selector.qcdevs.org</a>.</p>
655
-
656
- <h2>Acknowledgments</h2>
657
- <p>This webserver is supported by the DRI EDIA Champions Pilot Program. We are grateful to the <a href="https://alliancecan.ca/" target="_blank">Digital Research Alliance</a> for providing the computing resources.</p>
658
- </div>
659
- </div>
660
-
661
- <!-- Contact Section -->
662
- <div id="contact" class="section" style="display: none;">
663
- <h2>Contact</h2>
664
- <div class="content">
665
- <p>The <code>Selector</code> source code is hosted on <a href="https://github.com/theochem/Selector" target="_blank">GitHub</a> and is released under the <a href="https://github.com/theochem/Selector/blob/master/LICENSE" target="_blank">GNU General Public License v3.0</a>.</p>
666
-
667
- <p>We welcome any contributions to the Selector library in accordance with our Code of Conduct; please see our <a href="https://qcdevs.org/guidelines/" target="_blank">Contributing Guidelines</a>.</p>
668
-
669
- <p>Please report any issues you encounter while using Selector library on <a href="https://github.com/theochem/Selector/issues" target="_blank">GitHub Issues</a>.</p>
670
-
671
- <p>For further information and inquiries, please contact us at <a href="mailto:qcdevs@gmail.com">qcdevs@gmail.com</a>.</p>
672
- </div>
673
- </div>
674
- </div>
675
- </div>
676
-
677
- <!-- Footer -->
678
- <div class="footer">
679
- <div class="copyright">
680
- &copy; Copyright 2017-2024, The QC-Devs Community.
681
- </div>
682
- </div>
683
-
684
- <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js"></script>
685
- <script>
686
- let currentIndices = null; // Store the current indices globally
687
-
688
- // Sidebar toggle functionality
689
- const sidebar = document.getElementById('sidebar');
690
- const content = document.getElementById('content');
691
- const sidebarCollapse = document.getElementById('sidebarCollapse');
692
- const showSidebarBtn = document.getElementById('showSidebarBtn');
693
-
694
- function toggleSidebar() {
695
- sidebar.classList.toggle('active');
696
- content.classList.toggle('active');
697
- showSidebarBtn.classList.toggle('show', sidebar.classList.contains('active'));
698
- }
699
-
700
- sidebarCollapse.addEventListener('click', toggleSidebar);
701
- showSidebarBtn.addEventListener('click', toggleSidebar);
702
-
703
- function showSection(sectionId) {
704
- // Hide all sections
705
- document.querySelectorAll('.section').forEach(section => {
706
- section.style.display = 'none';
707
- });
708
-
709
- // Show selected section
710
- const selectedSection = document.getElementById(sectionId);
711
- if (selectedSection) {
712
- selectedSection.style.display = 'block';
713
-
714
- // Force layout recalculation
715
- selectedSection.style.opacity = '0';
716
- selectedSection.offsetHeight; // Force reflow
717
- selectedSection.style.opacity = '1';
718
-
719
- // Update active nav link
720
- document.querySelectorAll('.nav-link').forEach(link => {
721
- link.classList.remove('active');
722
- if (link.getAttribute('href') === '#' + sectionId) {
723
- link.classList.add('active');
724
- }
725
- });
726
-
727
- // Ensure proper scrolling
728
- window.scrollTo(0, 0);
729
- document.body.style.overflow = 'auto';
730
- }
731
- }
732
-
733
- // Handle navigation clicks
734
- document.querySelectorAll('.nav-link').forEach(link => {
735
- link.addEventListener('click', (e) => {
736
- e.preventDefault();
737
- const sectionId = link.getAttribute('data-section');
738
- showSection(sectionId);
739
- });
740
- });
741
-
742
- async function updateDefaultParams() {
743
- const algorithm = document.getElementById('algorithm').value;
744
- const parametersTextarea = document.getElementById('parameters');
745
- const nbinsInput = document.getElementById('nbins_axis');
746
-
747
- try {
748
- const response = await fetch(`/get_default_params/${algorithm}`);
749
- const data = await response.json();
750
-
751
- if (response.ok) {
752
- // Get base parameters
753
- const params = data;
754
-
755
- // Add nbins_axis for GridPartition
756
- if (algorithm === 'GridPartition') {
757
- params.nbins_axis = parseInt(nbinsInput.value) || 5;
758
- }
759
 
760
  // Format the parameters nicely
761
  parametersTextarea.value = JSON.stringify(params, null, 2);
@@ -975,5 +740,257 @@
975
  document.getElementById('div_parameters').value = JSON.stringify(defaultParams, null, 2);
976
  });
977
  </script>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
978
  </body>
979
  </html>
 
18
  --text-secondary: #64748b;
19
  }
20
 
21
+ html, body {
22
+ height: 100%;
23
+ width: 100%;
24
+ margin: 0;
25
+ padding: 0;
26
+ overflow: hidden;
27
+ }
28
+
29
  body {
30
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
31
  color: var(--text-primary);
32
  line-height: 1.6;
33
+ position: fixed;
34
+ top: 0;
35
+ left: 0;
36
+ right: 0;
37
+ bottom: 0;
38
  }
39
 
40
  .wrapper {
41
  display: flex;
42
  width: 100%;
43
+ height: 100%;
44
+ position: absolute;
45
+ top: 0;
46
+ left: 0;
47
+ right: 0;
48
+ bottom: 0;
49
+ overflow: hidden;
50
  }
51
 
52
  #sidebar {
53
  min-width: var(--sidebar-width);
54
  max-width: var(--sidebar-width);
55
+ height: 100%;
 
 
56
  overflow-y: auto;
 
57
  background-color: var(--sidebar-bg);
58
  border-right: 1px solid var(--border-color);
59
+ flex-shrink: 0;
 
 
 
60
  }
61
 
62
  #content {
63
+ flex: 1;
64
+ height: 100%;
65
+ overflow-y: auto;
66
  padding: 2rem;
 
 
 
67
  background-color: white;
68
+ position: relative;
69
+ }
70
+
71
+ .section {
72
+ height: 100%;
73
  overflow-y: auto;
74
+ padding-bottom: 4rem;
75
  }
76
 
77
  .sidebar-header {
 
423
  <script>
424
  // Initialize layout on page load
425
  document.addEventListener('DOMContentLoaded', function() {
426
+ // Handle iframe environment
427
+ if (window.self !== window.top) {
428
+ // We're in an iframe
429
+ document.documentElement.style.height = '100%';
430
+ document.body.style.height = '100%';
431
+ }
432
 
433
  // Show initial section
434
  showSection('selection');
 
438
 
439
  // Load markdown content
440
  loadMarkdownContent();
441
+
442
+ // Ensure proper layout in iframe
443
+ window.addEventListener('resize', function() {
444
+ if (window.self !== window.top) {
445
+ document.documentElement.style.height = '100%';
446
+ document.body.style.height = '100%';
447
+ }
448
+ });
449
  });
 
 
 
 
 
 
 
 
450
 
451
+ function showSection(sectionId) {
452
+ // Hide all sections
453
+ document.querySelectorAll('.section').forEach(section => {
454
+ section.style.display = 'none';
455
+ });
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
456
 
457
+ // Show selected section
458
+ const selectedSection = document.getElementById(sectionId);
459
+ if (selectedSection) {
460
+ selectedSection.style.display = 'block';
 
 
 
 
 
 
 
 
 
461
 
462
+ // Update active nav link
463
+ document.querySelectorAll('.nav-link').forEach(link => {
464
+ link.classList.remove('active');
465
+ if (link.getAttribute('href') === '#' + sectionId) {
466
+ link.classList.add('active');
467
+ }
468
+ });
469
 
470
+ // Reset scroll position
471
+ if (selectedSection.scrollTo) {
472
+ selectedSection.scrollTo(0, 0);
473
+ }
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
474
 
475
+ // Force layout recalculation in iframe
476
+ if (window.self !== window.top) {
477
+ selectedSection.style.height = '100%';
478
+ selectedSection.style.overflow = 'auto';
479
+ }
480
+ }
481
+ }
 
 
 
 
 
 
 
 
 
 
482
 
483
+ // Sidebar toggle functionality
484
+ const sidebar = document.getElementById('sidebar');
485
+ const content = document.getElementById('content');
486
+ const sidebarCollapse = document.getElementById('sidebarCollapse');
487
+ const showSidebarBtn = document.getElementById('showSidebarBtn');
488
 
489
+ function toggleSidebar() {
490
+ sidebar.classList.toggle('active');
491
+ content.classList.toggle('active');
492
+ showSidebarBtn.classList.toggle('show', sidebar.classList.contains('active'));
493
+ }
494
 
495
+ sidebarCollapse.addEventListener('click', toggleSidebar);
496
+ showSidebarBtn.addEventListener('click', toggleSidebar);
 
 
 
 
 
 
497
 
498
+ // Handle navigation clicks
499
+ document.querySelectorAll('.nav-link').forEach(link => {
500
+ link.addEventListener('click', (e) => {
501
+ e.preventDefault();
502
+ const sectionId = link.getAttribute('data-section');
503
+ showSection(sectionId);
504
+ });
505
+ });
506
 
507
+ async function updateDefaultParams() {
508
+ const algorithm = document.getElementById('algorithm').value;
509
+ const parametersTextarea = document.getElementById('parameters');
510
+ const nbinsInput = document.getElementById('nbins_axis');
 
 
 
 
 
 
 
 
 
 
 
 
 
511
 
512
+ try {
513
+ const response = await fetch(`/get_default_params/${algorithm}`);
514
+ const data = await response.json();
 
 
 
 
 
 
 
515
 
516
+ if (response.ok) {
517
+ // Get base parameters
518
+ const params = data;
 
 
519
 
520
+ // Add nbins_axis for GridPartition
521
+ if (algorithm === 'GridPartition') {
522
+ params.nbins_axis = parseInt(nbinsInput.value) || 5;
523
+ }
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
524
 
525
  // Format the parameters nicely
526
  parametersTextarea.value = JSON.stringify(params, null, 2);
 
740
  document.getElementById('div_parameters').value = JSON.stringify(defaultParams, null, 2);
741
  });
742
  </script>
743
+ </head>
744
+ <body>
745
+ <button type="button" id="showSidebarBtn" class="btn">
746
+ <i class="bi bi-chevron-right"></i>
747
+ </button>
748
+
749
+ <div class="wrapper">
750
+ <!-- Sidebar -->
751
+ <nav id="sidebar">
752
+ <div class="sidebar-header">
753
+ <h5 class="sidebar-title">Selector Server</h5>
754
+ <button type="button" id="sidebarCollapse" class="btn">
755
+ <i class="bi bi-chevron-left"></i>
756
+ </button>
757
+ </div>
758
+ <ul class="nav flex-column">
759
+ <li class="nav-item">
760
+ <a href="#" class="nav-link active" data-section="selection">
761
+ <i class="bi bi-grid-3x3-gap me-2"></i>Subset Selection
762
+ </a>
763
+ </li>
764
+ <li class="nav-item">
765
+ <a href="#" class="nav-link" data-section="diversity">
766
+ <i class="bi bi-graph-up me-2"></i>Diversity Calculation
767
+ </a>
768
+ </li>
769
+ <li class="nav-item">
770
+ <a href="#" class="nav-link" data-section="about">
771
+ <i class="bi bi-info-circle me-2"></i>About
772
+ </a>
773
+ </li>
774
+ <li class="nav-item">
775
+ <a href="#" class="nav-link" data-section="contact">
776
+ <i class="bi bi-envelope me-2"></i>Contact
777
+ </a>
778
+ </li>
779
+ </ul>
780
+ </nav>
781
+
782
+ <!-- Page Content -->
783
+ <div id="content">
784
+ <!-- Selection Section -->
785
+ <div id="selection" class="section">
786
+ <h2>Subset Selection</h2>
787
+ <div class="card">
788
+ <div class="card-body">
789
+ <form id="selectionForm" enctype="multipart/form-data">
790
+ <div class="mb-3">
791
+ <label for="file" class="form-label">Upload Feature Matrix</label>
792
+ <input type="file" class="form-control" id="file" name="file" accept=".txt,.npz,.xlsx,.xls">
793
+ <small class="text-muted">Supported formats: .txt, .npz, .xlsx, .xls (max 32MB)</small>
794
+ </div>
795
+
796
+ <div class="mb-3">
797
+ <label for="size" class="form-label">Subset Size</label>
798
+ <input type="number" class="form-control" id="size" name="size" min="1" step="1" required>
799
+ <small class="text-muted">Number of data points to select (integer)</small>
800
+ </div>
801
+
802
+ <div class="mb-3">
803
+ <label for="distance_metric" class="form-label">Distance Function</label>
804
+ <select class="form-select" id="distance_metric" name="distance_metric">
805
+ <option value="euclidean">euclidean</option>
806
+ <option value="cityblock">cityblock</option>
807
+ <option value="cosine">cosine</option>
808
+ <option value="l1">l1</option>
809
+ <option value="l2">l2</option>
810
+ <option value="manhattan">manhattan</option>
811
+ <option value="braycurtis">braycurtis</option>
812
+ <option value="canberra">canberra</option>
813
+ <option value="chebyshev">chebyshev</option>
814
+ <option value="correlation">correlation</option>
815
+ <option value="dice">dice</option>
816
+ <option value="hamming">hamming</option>
817
+ <option value="jaccard">jaccard</option>
818
+ <option value="kulsinski">kulsinski</option>
819
+ <option value="mahalanobis">mahalanobis</option>
820
+ <option value="minkowski">minkowski</option>
821
+ <option value="rogerstanimoto">rogerstanimoto</option>
822
+ <option value="russellrao">russellrao</option>
823
+ <option value="seuclidean">seuclidean</option>
824
+ <option value="sokalmichener">sokalmichener</option>
825
+ <option value="sokalsneath">sokalsneath</option>
826
+ <option value="sqeuclidean">sqeuclidean</option>
827
+ <option value="yule">yule</option>
828
+ </select>
829
+ <small class="text-muted">Distance metric from scikit-learn's pairwise_distances (optional)</small>
830
+ </div>
831
+
832
+ <div class="mb-3">
833
+ <label for="algorithm" class="form-label">Selection Method</label>
834
+ <select class="form-select" id="algorithm" name="algorithm">
835
+ <optgroup label="Distance-based Methods">
836
+ <option value="MaxMin">MaxMin</option>
837
+ <option value="MaxSum">MaxSum</option>
838
+ <option value="OptiSim">OptiSim</option>
839
+ <option value="DISE">DISE</option>
840
+ </optgroup>
841
+ <optgroup label="Partition-based Methods">
842
+ <option value="GridPartition">Grid Partition</option>
843
+ </optgroup>
844
+ <optgroup label="Similarity-based Methods">
845
+ <option value="NSimilarity">NSimilarity</option>
846
+ </optgroup>
847
+ </select>
848
+ </div>
849
+
850
+ <div class="mb-3" id="nbins_axis_container" style="display: none;">
851
+ <label for="nbins_axis" class="form-label">Number of Bins per Axis</label>
852
+ <input type="number" class="form-control" id="nbins_axis" name="nbins_axis" min="1" value="5">
853
+ <small class="form-text text-muted">Number of bins to partition each axis into</small>
854
+ </div>
855
+
856
+ <div class="mb-3">
857
+ <label for="parameters" class="form-label">Additional Parameters (JSON format)</label>
858
+ <textarea class="form-control font-monospace" id="parameters" name="parameters" rows="10"></textarea>
859
+ </div>
860
+
861
+ <div class="d-grid gap-2">
862
+ <button type="submit" class="btn btn-primary">
863
+ <i class="bi bi-play-fill me-2"></i>Run Subset Selection
864
+ </button>
865
+ </div>
866
+ </form>
867
+ </div>
868
+ </div>
869
+
870
+ <div id="resultSection" class="mt-4" style="display: none;">
871
+ <div class="card">
872
+ <div class="card-body">
873
+ <h5 class="card-title">Results</h5>
874
+ <div id="warnings" class="alert alert-warning" style="display: none;"></div>
875
+ <div id="error" class="alert alert-danger" style="display: none;"></div>
876
+
877
+ <div id="success-content" style="display: none;">
878
+ <h4>Selected Indices:</h4>
879
+ <pre id="indices"></pre>
880
+ <div class="mb-3">
881
+ <label for="download-format" class="form-label">Download Format</label>
882
+ <select class="form-select" id="download-format">
883
+ <option value="txt">TXT</option>
884
+ <option value="npz">NPZ</option>
885
+ <option value="xlsx">Excel</option>
886
+ </select>
887
+ </div>
888
+ <button class="btn btn-primary" onclick="downloadIndices()">Download Results</button>
889
+ </div>
890
+ </div>
891
+ </div>
892
+ </div>
893
+ </div>
894
+
895
+ <!-- Diversity Section -->
896
+ <div id="diversity" class="section" style="display: none;">
897
+ <h2>Diversity Calculation</h2>
898
+ <div class="container mt-4">
899
+ <form id="diversity-form" enctype="multipart/form-data">
900
+ <div class="mb-3">
901
+ <label for="feature_subset" class="form-label">Upload Feature Subset</label>
902
+ <input type="file" class="form-control" id="feature_subset" name="feature_subset" accept=".csv,.txt,.xlsx,.xls,.npz">
903
+ <small class="text-muted">Upload your feature subset matrix (supported formats: CSV, TXT, XLSX, NPZ)</small>
904
+ </div>
905
+
906
+ <div class="mb-3">
907
+ <label for="features" class="form-label">Upload Features (Optional)</label>
908
+ <input type="file" class="form-control" id="features" name="features" accept=".csv,.txt,.xlsx,.xls,.npz">
909
+ <small class="text-muted">Upload your features matrix. It's only for hypersphere overlaping algorithm.</small>
910
+ </div>
911
+
912
+ <div class="mb-3">
913
+ <label for="div_type" class="form-label">Diversity Type</label>
914
+ <select class="form-select" id="div_type" name="div_type">
915
+ <option value="logdet">Log Determinant</option>
916
+ <option value="shannon_entropy">Shannon Entropy</option>
917
+ <option value="explicit_diversity_index">Explicit Diversity Index</option>
918
+ <option value="wdud">WDUD</option>
919
+ <option value="hypersphere_overlap">Hypersphere Overlap</option>
920
+ <option value="gini_coefficient">Gini Coefficient</option>
921
+ </select>
922
+ </div>
923
+
924
+ <div class="mb-3">
925
+ <label for="div_parameters" class="form-label">Additional Parameters (JSON format)</label>
926
+ <textarea class="form-control font-monospace" id="div_parameters" name="div_parameters" rows="5"></textarea>
927
+ <small class="text-muted">Specify normalize, truncation, and cs parameters in JSON format</small>
928
+ </div>
929
+
930
+ <div class="d-grid gap-2">
931
+ <button type="submit" class="btn btn-primary">Calculate Diversity</button>
932
+ </div>
933
+
934
+ <!-- Results section -->
935
+ <div id="diversity-results" class="mt-4" style="display: none;">
936
+ <h3>Results</h3>
937
+ <div class="card">
938
+ <div class="card-body">
939
+ <h5 class="card-title">Diversity Score</h5>
940
+ <p class="card-text" id="diversity-score"></p>
941
+ </div>
942
+ </div>
943
+ </div>
944
+ </form>
945
+ </div>
946
+ </div>
947
+
948
+ <!-- About Section -->
949
+ <div id="about" class="section" style="display: none;">
950
+ <h2>About</h2>
951
+ <div class="content">
952
+ <h2>Motivation</h2>
953
+ <p>Selecting diverse and representative subsets is crucial for the data-driven models and machine learning applications in many science and engineering disciplines, especially for molecular design and drug discovery. Motivated by this, we develop the Selector package, a free and open-source Python library for selecting diverse subsets.</p>
954
+ <p>The <code>Selector</code> library implements a range of existing algorithms for subset sampling based on the distance between and similarity of samples, as well as tools based on spatial partitioning. In addition, it includes seven diversity measures for quantifying the diversity of a given set. We also implemented various mathematical formulations to convert similarities into dissimilarities.</p>
955
+
956
+ <h2>Selector Library</h2>
957
+ <p>Selector is a free, open-source, and cross-platform Python library designed to help you effortlessly identify the most diverse subset of molecules from your dataset. Please use the following citation in any publication using Selector library:</p>
958
+
959
+ <h2>Citation</h2>
960
+ <p>Please use the following citation in any publication using the <code>Selector</code> library:</p>
961
+ <p><strong>To be added</strong></p>
962
+
963
+ <h2>More Information</h2>
964
+ <p>For more information about the Selector library, please visit our <a href="https://github.com/theochem/selector" target="_blank">GitHub repository</a> and documentation at <a href="https://selector.qcdevs.org" target="_blank">https://selector.qcdevs.org</a>.</p>
965
+
966
+ <h2>Acknowledgments</h2>
967
+ <p>This webserver is supported by the DRI EDIA Champions Pilot Program. We are grateful to the <a href="https://alliancecan.ca/" target="_blank">Digital Research Alliance</a> for providing the computing resources.</p>
968
+ </div>
969
+ </div>
970
+
971
+ <!-- Contact Section -->
972
+ <div id="contact" class="section" style="display: none;">
973
+ <h2>Contact</h2>
974
+ <div class="content">
975
+ <p>The <code>Selector</code> source code is hosted on <a href="https://github.com/theochem/Selector" target="_blank">GitHub</a> and is released under the <a href="https://github.com/theochem/Selector/blob/master/LICENSE" target="_blank">GNU General Public License v3.0</a>.</p>
976
+
977
+ <p>We welcome any contributions to the Selector library in accordance with our Code of Conduct; please see our <a href="https://qcdevs.org/guidelines/" target="_blank">Contributing Guidelines</a>.</p>
978
+
979
+ <p>Please report any issues you encounter while using Selector library on <a href="https://github.com/theochem/Selector/issues" target="_blank">GitHub Issues</a>.</p>
980
+
981
+ <p>For further information and inquiries, please contact us at <a href="mailto:qcdevs@gmail.com">qcdevs@gmail.com</a>.</p>
982
+ </div>
983
+ </div>
984
+ </div>
985
+ </div>
986
+
987
+ <!-- Footer -->
988
+ <div class="footer">
989
+ <div class="copyright">
990
+ &copy; Copyright 2017-2024, The QC-Devs Community.
991
+ </div>
992
+ </div>
993
+
994
+ <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js"></script>
995
  </body>
996
  </html>