#863 separated options into User-Uploaded and Expression Database

dondi · Feb 26, 2025 · 8d8ca9e · 8d8ca9e
1 parent 702183d
commit 8d8ca9e
Show file tree

Hide file tree

Showing 2 changed files with 41 additions and 18 deletions.
diff --git a/web-client/public/js/grnstate.js b/web-client/public/js/grnstate.js
@@ -84,7 +84,10 @@ export const grnState = {
         bottomDataset: undefined,
         lastDataset: null,
         bottomDataSameAsTop: true,
-        nodeColoringOptions: [],
+        nodeColoringOptions: {
+            workbookExpressions: [],
+            databaseExpressions: [],
+        },
         ppiNodeColorWarningDisplayed: false,
     },
 

diff --git a/web-client/public/js/update-app.js b/web-client/public/js/update-app.js
@@ -700,16 +700,17 @@ const resetDatasetDropdownMenus = (workbook) => {
             </li>`;
     };
 
-    grnState.nodeColoring.nodeColoringOptions = [];
-    for (var property in workbook.expression) {
+    grnState.nodeColoring.nodeColoringOptions.workbookExpressions = [];
+    grnState.nodeColoring.nodeColoringOptions.databaseExpressions = [];
+        for (var property in workbook.expression) {
         if (property.match(ENDS_IN_EXPRESSION_REGEXP)) {
-            grnState.nodeColoring.nodeColoringOptions.push({value: property});
+            grnState.nodeColoring.nodeColoringOptions.workbookExpressions.push({value: property});
         }
     }
 
     // Add expression database options
     grnState.database.expressionDatasets.forEach( option =>
-        grnState.nodeColoring.nodeColoringOptions.push({value: [option]}));
+        grnState.nodeColoring.nodeColoringOptions.databaseExpressions.push({value: [option]}));
 
     $(BOTTOM_DATASET_SELECTION_SIDEBAR).append($("<option>")
             .attr("value", "Same as Top Dataset").text("Same as Top Dataset"));
@@ -718,19 +719,38 @@ const resetDatasetDropdownMenus = (workbook) => {
 
     // $(DATA_SET_SELECT).append($("<option>").attr("value", "Dahlquist").text("Dahlquist"));
 
-    grnState.nodeColoring.nodeColoringOptions.forEach(function (option) {
-        var shortenedSheetName = shortenExpressionSheetName(option.value);
-        $(TOP_DATASET_SELECTION_SIDEBAR).append($("<option>")
-              .addClass("dataset-option")
-              .attr("value", option.value).text(shortenedSheetName));
-        $(TOP_DATASET_SELECTION_MENU)
-              .append(createHTMLforDataset(option.value));
-        $(BOTTOM_DATASET_SELECTION_SIDEBAR).append($("<option>")
-              .addClass("dataset-option")
-              .attr("value", option.value).text(shortenedSheetName));
-        $(BOTTOM_DATASET_SELECTION_MENU)
-              .append(createHTMLforDataset(option.value));
-    });
+    const addOptionsToDropdown = (options, groupLabel) => {
+        let topOptgroup = $("<optgroup>").attr("label", groupLabel);
+        let bottomOptgroup = $("<optgroup>").attr("label", groupLabel);
+
+        options.forEach(option => {
+            var shortenedSheetName = shortenExpressionSheetName(option.value);
+
+            let topOption = $("<option>")
+                .addClass("dataset-option")
+                .attr("value", option.value).text(shortenedSheetName);
+
+            let bottomOption = $("<option>")
+                .addClass("dataset-option")
+                .attr("value", option.value).text(shortenedSheetName);
+
+            topOptgroup.append(topOption);
+            bottomOptgroup.append(bottomOption);
+
+            $(TOP_DATASET_SELECTION_MENU).append(createHTMLforDataset(option.value));
+            $(BOTTOM_DATASET_SELECTION_MENU).append(createHTMLforDataset(option.value));
+        });
+
+        $(TOP_DATASET_SELECTION_SIDEBAR).append(topOptgroup);
+        $(BOTTOM_DATASET_SELECTION_SIDEBAR).append(bottomOptgroup);
+    };
+
+    // Add Workbook Expressions
+    addOptionsToDropdown(grnState.nodeColoring.nodeColoringOptions.workbookExpressions, "User-Uploaded");
+
+    // Add Database Expressions
+    addOptionsToDropdown(grnState.nodeColoring.nodeColoringOptions.databaseExpressions, "Expression Database");
+
 
     $("#topDatasetDropdownMenu li a span").first().addClass("glyphicon-ok");
     $("#bottomDatasetDropdownMenu li a span").first().addClass("glyphicon-ok");