Added ROI Set name to the ROI menu (#1875)

* Added ROI Set name to the ROI menu * Removed description label * Refactored based on review * Added max-width to popup
igvteam · Aug 16, 2024 · b3460f0 · b3460f0
1 parent 5baebc5
commit b3460f0
Show file tree

Hide file tree

Showing 5 changed files with 13 additions and 12 deletions.
diff --git a/css/_igv-menu-popup.scss b/css/_igv-menu-popup.scss
@@ -11,7 +11,8 @@ $igv-menu-popup-grey: #7F7F7F;
 
   //min-width: 132px;
   width: max-content;
-
+  max-width: 400px; 
+
   //z-index: 4096;
   z-index: 512;
 

diff --git a/css/igv.css b/css/igv.css
diff --git a/js/embedCss.js b/js/embedCss.js
diff --git a/js/roi/ROIManager.js b/js/roi/ROIManager.js
@@ -198,7 +198,6 @@ class ROIManager {
             if (features) {
 
                 for (let feature of features) {
-
                     const regionKey = createRegionKey(chr, feature.start, feature.end)
 
                     const {
@@ -243,8 +242,7 @@ class ROIManager {
             event.stopPropagation()
 
             const {x, y} = DOMUtils.translateMouseCoordinates(event, columnContainer)
-            const isUserDefined = roiSet.isUserDefined
-            this.roiMenu.present(feature, isUserDefined, event, this, columnContainer, regionElement)
+            this.roiMenu.present(feature, roiSet, event, this, columnContainer, regionElement)
         })
 
 

diff --git a/js/roi/ROIMenu.js b/js/roi/ROIMenu.js
@@ -30,16 +30,17 @@ class ROIMenu {
 
     }
 
-    async present(feature, isUserDefined, event, roiManager, columnContainer, regionElement) {
-        const menuItems = this.menuItems(feature, isUserDefined, event, roiManager, columnContainer, regionElement)
+    async present(feature, roiSet, event, roiManager, columnContainer, regionElement) {
+        const menuItems = this.menuItems(feature, roiSet, event, roiManager, columnContainer, regionElement)
         this.browser.menuPopup.presentTrackContextMenu(event, menuItems)
     }
 
-    menuItems(feature, isUserDefined, event, roiManager, columnContainer, regionElement) {
+    menuItems(feature, roiSet, event, roiManager, columnContainer, regionElement) {
+        const items = feature.name ? [`<b>${feature.name}</b><br/>`]  : []
+        if ('name' in roiSet) items.push(`<b>ROI Set: ${roiSet.name}</b>`)
+        if (items.length > 0) items.push(`<hr/>`)
 
-        const items = [`<b>${feature.name || ''}</b>`,]
-
-        if (isUserDefined) {
+        if (roiSet.isUserDefined) {
             items.push(
                 {
                     label: 'Set description ...',
@@ -103,7 +104,7 @@ class ROIMenu {
         }
 
 
-        if (isUserDefined) {
+        if (roiSet.isUserDefined) {
             items.push(
                 '<hr/>',
                 {