#863 Separated options into user-uploaded and expression database

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,
     },
 
@@ -148,4 +151,7 @@ export const grnState = {
 
 // Viewport Size Parameter
     viewportSize: VIEWPORT_INIT,
+
+// Demo Dropdown Selection
+    demoDropdownValue: null,
 };

web-client/public/js/setup-load-and-import-handlers.js

@@ -196,6 +196,7 @@
             if (selected === demoClass) {
                 loadDemo(demoPath, demoClass, demoName);
             }
+            grnState.demoDropdownValue = selected;
         });
     };
 
@@ -227,12 +228,14 @@
         }
         grnState.name = name;
         grnState.workbook = workbook;
+        grnState.demoDropdownValue = null;
         // Reset the node coloring dataset selection
         grnState.nodeColoring.topDataset = grnState.defaultDataset;
         grnState.nodeColoring.bottomDataset = grnState.defaultDataset;
         grnState.annotateLinks();
         disableUpload(false);
         updateApp(grnState);
         reloader = () => responseCustomWorkbookData(grnState, queryURL, name);
+
     });
 };

web-client/public/js/update-app.js

@@ -549,6 +549,11 @@
     }
 };
 
+const resetDemoDropdown = () =>{
+    $("#demoSourceDropdown option").removeAttr("selected");
+    $("#demoSourceDropdown").val("none");
+};
+
 const checkWorkbookModeSettings = () => {
     const hasExpression = hasExpressionData(grnState.workbook.expression);
 
@@ -700,16 +705,17 @@
             </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 +724,38 @@
 
     // $(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");
@@ -822,6 +847,10 @@
                 grnState.nodeColoringEnabled = false;
             }
         }
+        if (!(grnState.demoDropdownValue)){
+            resetDemoDropdown();
+        }
+
         refreshApp();
 
         // Rare exception to the MVC cycle: right now we have no way of knowing whether the workbook has changed