Bug Fixes (#306)

* Do not convert chromosome names to lower case

* Bug fix: change to html to allow presentation of Dropbox chooser from Juicebox panel

* css tweaks

* IGV and Juicebox panels: dropdown menu css tweaks

* CNDB bug fix: support loading from ensemble group list

* Ensemble Group List: now properly sorted

index.html

@@ -452,9 +452,15 @@
             <!-- Hi-C map file chooser -->
             <li id="hic-file-chooser-dropdown" class="list-group-item mx-auto py-1 ps-1">
               <div class="dropdown">
-                <button id="hic-contact-map-dropdown" class="btn btn-sm btn-outline-secondary dropdown-toggle" type="button" data-bs-toggle="dropdown">
+
+<!--                <button id="hic-contact-map-dropdown" class="dropdown-toggle btn btn-sm btn-outline-secondary" type="button" data-bs-toggle="dropdown">-->
+<!--                  Load Hi-C Map-->
+<!--                </button>-->
+
+                <a id="hic-contact-map-dropdown" class="dropdown-toggle" data-bs-toggle="dropdown">
                   Load Hi-C Map
-                </button>
+                </a>
+
                 <ul class="dropdown-menu">
 
                   <!-- ENCODE Maps -->

js/datasource/CNDBDatasource.js

@@ -24,7 +24,7 @@ class CNDBDatasource extends DataSourceBase {
 
         this.isPointCloud = await isPointCloud(hdf5, this.replicaKeys)
 
-        await this.updateWithReplicaKey(this.replicaKeys[ 0 ])
+        await this.updateWithEnsembleGroupKey(this.replicaKeys[ 0 ])
 
         hideGlobalSpinner()
 
@@ -43,7 +43,7 @@ class CNDBDatasource extends DataSourceBase {
         return { sample: 'Unspecified Sample', genomeAssembly }
     }
 
-    async updateWithReplicaKey(replicaKey) {
+    async updateWithEnsembleGroupKey(replicaKey) {
 
         this.currentReplicaKey = replicaKey
 

js/juicebox/juiceboxPanel.js

@@ -298,7 +298,8 @@ function juiceboxMouseHandler({ xBP, yBP, startXBP, startYBP, endXBP, endYBP, in
 function isLiveMapSupported() {
 
     const { chr } = ensembleManager.locus
-    const chromosome = igvPanel.browser.genome.getChromosome(chr.toLowerCase())
+    // const chromosome = igvPanel.browser.genome.getChromosome(chr.toLowerCase())
+    const chromosome = igvPanel.browser.genome.getChromosome(chr)
     if (undefined === chromosome) {
         console.warn(`Live Maps are not available for chromosome ${ chr }. No associated genome found`)
         return false

js/juicebox/liveMapState.js

@@ -20,7 +20,8 @@ class LiveMapState extends hic.State {
        const [ xBin, yBin] = [ genomicStart / binSize, genomicStart / binSize ]
 
        // chromosome index
-       const chromosome = igvPanel.browser.genome.getChromosome(chr.toLowerCase())
+       // const chromosome = igvPanel.browser.genome.getChromosome(chr.toLowerCase())
+       const chromosome = igvPanel.browser.genome.getChromosome(chr)
        let { order } = chromosome
 
        super(1 + order, 1 + order, 0, xBin, yBin, width, height, pixelSize, 'NONE')

js/panel.js

@@ -1,4 +1,3 @@
-import igv from 'igv'
 import SpacewalkEventBus from './spacewalkEventBus.js'
 import { makeDraggable } from "./utils/draggable.js"
 

js/spacewalkFileLoadWidgetServices.js

@@ -173,7 +173,21 @@ function createAndConfigureEnsembleGroupSelectModal(parentElement, ensembleGroup
 
         selectElement.appendChild(createPlaceholderOptionElement())
 
-        for (const key of data ) {
+        // sort
+        const sorted = data.sort((a, b) => {
+            // Extract the first number after the initial string
+            const firstNumberA = parseInt(a.match(/^\D+(\d+)/)?.[1] || 0, 10);
+            const firstNumberB = parseInt(b.match(/^\D+(\d+)/)?.[1] || 0, 10);
+
+            // Extract the second number, whether it's foo23, foo_23, or foo_03
+            const secondNumberA = parseInt(a.match(/\D(\d+)$/)?.[1] || 0, 10);
+            const secondNumberB = parseInt(b.match(/\D(\d+)$/)?.[1] || 0, 10);
+
+            // Sort by the first number, then by the second number
+            return firstNumberA - firstNumberB || secondNumberA - secondNumberB;
+        });
+
+        for (const key of sorted ) {
             const html = `<option value=\"${ key }\">${ key }</option>`
             const fragment = document.createRange().createContextualFragment(html)
             selectElement.appendChild(fragment.firstChild)

js/utils/liveMapUtils.js

@@ -4,7 +4,9 @@ import SWBDatasource from "../datasource/SWBDatasource.js"
 async function enableLiveMaps() {
 
     const { chr } = ensembleManager.locus
-    const chromosome = igvPanel.browser.genome.getChromosome(chr.toLowerCase())
+
+    // let chromosome = igvPanel.browser.genome.getChromosome(chr.toLowerCase())
+    const chromosome = igvPanel.browser.genome.getChromosome(chr)
 
     if (chromosome) {
         if (ensembleManager.datasource instanceof SWBDatasource) {

styles/_igv_panel.scss

@@ -84,6 +84,16 @@ $spacewalk_igv_panel_heigth: 256px;
 
       a.dropdown-toggle {
         color: unset;
+        text-decoration-line: unset;
+        cursor: pointer;
+      }
+
+      a.dropdown-toggle:hover {
+        border-color: rgba(0, 0, 0, 0.3);
+        border-style: solid;
+        border-width: thin;
+        border-radius: 2px;
+        padding: 4px;
       }
     }
 

styles/_juicebox_panel.scss

@@ -22,6 +22,22 @@
     .list-group {
       width: 100%;
       background-color: white;
+
+      #hic-contact-map-dropdown.dropdown-toggle {
+        color: unset;
+        text-decoration-line: unset;
+        cursor: pointer;
+      }
+
+      #hic-contact-map-dropdown.dropdown-toggle:hover {
+        border-color: rgba(0, 0, 0, 0.3);
+        border-style: solid;
+        border-width: thin;
+        border-radius: 2px;
+        padding: 4px;
+      }
+
+
       #hic-live-contact-frequency-map-threshold-widget.list-group-item {
         div.input-group {
           width: 200px;