grnsight 4.0.0 → 6.0.0

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

@@ -5,6 +5,7 @@ import { max } from "d3-array";
 import { grnState } from "./grnstate";
 
 import {
+  HOST_SITE,
   FORCE_GRAPH,
   GRID_LAYOUT,
   GREY_EDGES_DASHED_MENU,
@@ -26,8 +27,8 @@ import {
   SHOW_WEIGHTS_MOUSEOVER,
   SHOW_ALL_WEIGHTS,
   HIDE_ALL_WEIGHTS,
-  COLOR_EDGES,
-  BLACK_EDGES,
+  COLOR_EDGES_MENU,
+  COLOR_EDGES_SIDEBAR,
   ACTIVE_COLOR_OPTION,
   GRAVITY_LENGTH_WITHOUT_ZERO,
   LOCK_SLIDERS_MENU,
@@ -44,12 +45,15 @@ import {
   CHARGE_SLIDER_SIDEBAR,
   CHARGE_MENU,
   CHARGE_VALUE,
-  GRID_LAYOUT_BUTTON,
-  GRID_LAYOUT_CLASS,
-  FORCE_GRAPH_CLASS,
+  GRID_LAYOUT_MENU,
+  FORCE_GRAPH_MENU,
+  LAYOUT_SIDEBAR_PANEL,
   NODE_COLORING_MENU,
   NODE_COLORING_TOGGLE_MENU,
   NODE_COLORING_MENU_CLASS,
+  NODE_COLORING_SIDEBAR_BODY,
+  NODE_COLORING_SIDEBAR_PANEL,
+  NODE_COLORING_SIDEBAR_HEADER_LINK,
   NODE_COLORING_TOGGLE_SIDEBAR,
   AVG_REPLICATE_VALS_TOP_MENU,
   AVG_REPLICATE_VALS_TOP_SIDEBAR,
@@ -65,28 +69,61 @@ import {
   BOTTOM_DATASET_SELECTION_SIDEBAR,
   BOTTOM_DATASET_SELECTION_MENU,
   LOG_FOLD_CHANGE_MAX_VALUE_CLASS,
+  LOG_FOLD_CHANGE_MAX_VALUE_SIDEBAR_BUTTON,
+  LOG_FOLD_CHANGE_MAX_VALUE_HEADER,
   MAX_NUM_CHARACTERS_DROPDOWN,
   ENDS_IN_EXPRESSION_REGEXP,
-  ZOOM_CONTROL
+  ZOOM_CONTROL,
+  ZOOM_DISPLAY_MIDDLE,
+  ZOOM_ADAPTIVE_MAX_SCALE,
+  ZOOM_INPUT,
+  ZOOM_SLIDER,
+  EXPORT_WEIGHTED_CLASS,
+  EDGE_WEIGHT_MENU_CLASS,
+  EDGE_WEIGHT_SIDEBAR,
+  EDGE_WEIGHT_SIDEBAR_HEADER_LINK,
+  SPECIES_DISPLAY,
+  EXPRESSION_DB_LOADER,
+  EXPRESSION_DB_LOADER_TEXT,
+  SPECIES_BUTTON_CRESS,
+  SPECIES_BUTTON_FLY,
+  SPECIES_BUTTON_HUMAN,
+  SPECIES_BUTTON_MOUSE,
+  SPECIES_BUTTON_NEMATODE,
+  SPECIES_BUTTON_YEAST,
+  VIEWPORT_FIT,
+  VIEWPORT_S,
+  VIEWPORT_M,
+  VIEWPORT_L,
+  VIEWPORT_SIZE_S_DROPDOWN,
+  VIEWPORT_SIZE_M_DROPDOWN,
+  VIEWPORT_SIZE_L_DROPDOWN,
+  VIEWPORT_SIZE_FIT_DROPDOWN,
+  VIEWPORT_SIZE_S_SIDEBAR,
+  VIEWPORT_SIZE_M_SIDEBAR,
+  VIEWPORT_SIZE_L_SIDEBAR,
+  VIEWPORT_SIZE_FIT_SIDEBAR,
+  VIEWPORT_INIT,
+//   EXPRESSION_SOURCE,
 } from "./constants";
 
+import { queryExpressionDatabase } from "./api/grnsight-api.js";
+
 // In this transitory state, updateApp might get called before things are completely set up, so for now
 // we define this wrapper function that guards against uninitialized values.
 const refreshApp = () => {
-    if (uploadState && uploadState.currentNetwork) {
-        drawGraph(uploadState.currentNetwork);
+    if (uploadState && uploadState.currentWorkbook) {
+        drawGraph(uploadState.currentWorkbook);
     }
 };
 
-const displayNetwork = (network, name) => {
-    $(ZOOM_CONTROL).prop({ disabled: false });
-
-    uploadState.currentNetwork = network;
-    console.log("Network: ", network); // Display the network in the console
-    $("#graph-metadata").html(network.genes.length + " nodes<br>" + network.links.length + " edges");
+const displayworkbook = (workbook, name) => {
+    uploadState.currentWorkbook = workbook;
+    // console.log("workbook: ", workbook); // Display the workbook in the console
+    $("#graph-metadata").html(workbook.genes.length + " nodes<br>" + workbook.links.length + " edges");
 
-    if (network.warnings.length > 0) {
-        displayWarnings(network.warnings);
+    if (workbook.warnings.length > 0) {
+        displayWarnings(workbook.warnings);
     }
 
     $("#fileName").text(name); // Set the name of the file to display in the top bar
@@ -125,15 +162,28 @@ const logFoldChangeMaxValueInputValidation = value => {
     }
 };
 
-//
+// Weight Visualization Function
+const showEdgeWeightOptions = () => {
+    $(EDGE_WEIGHT_MENU_CLASS).removeClass("disabled");
+    $(EXPORT_WEIGHTED_CLASS).removeClass("startDisabled").removeClass("disabled");
+    $(EDGE_WEIGHT_SIDEBAR).removeClass("disabled");
+    $(EDGE_WEIGHT_SIDEBAR_HEADER_LINK).attr("data-toggle", "collapse");
+};
+
+const hideEdgeWeightOptions = () => {
+    $(EDGE_WEIGHT_MENU_CLASS).addClass("disabled");
+    $(EXPORT_WEIGHTED_CLASS).removeClass("startDisabled").addClass("disabled");
+    $(EDGE_WEIGHT_SIDEBAR).addClass("disabled");
+    $(EDGE_WEIGHT_SIDEBAR_HEADER_LINK).attr("data-toggle", "");
+};
+
 const synchronizeGrayEdgeValues = value => {
     var validatedInput = grayEdgeInputValidator(value);
-    $(GREY_EDGE_THRESHOLD_TEXT_SIDEBAR).text(validatedInput + "%");
     $(GREY_EDGE_THRESHOLD_MENU).val(validatedInput);
+    $(GREY_EDGE_THRESHOLD_TEXT_SIDEBAR).text(validatedInput + "%");
     $(GREY_EDGE_THRESHOLD_SLIDER_SIDEBAR).val(validatedInput / 100);
 };
 
-// Weight Visualization Functions
 const synchronizeShowWeightsMouseover = () => {
     $(WEIGHTS_SHOW_MOUSE_OVER_MENU + " span").addClass("glyphicon-ok");
     $(WEIGHTS_SHOW_ALWAYS_MENU + " span").removeClass("glyphicon-ok");
@@ -176,32 +226,172 @@ const synchronizeHideAllWeights = () => {
     $(WEIGHTS_HIDE_CLASS).addClass("selected");
 };
 
-// Toggle Weighted Functions
-const enableColorOptimal = () => {
-    $(BLACK_EDGES).removeClass(ACTIVE_COLOR_OPTION);
-    $(BLACK_EDGES + ">span").removeClass("glyphicon-ok");
-    $(COLOR_EDGES).addClass(ACTIVE_COLOR_OPTION);
-    $(COLOR_EDGES + ">span").addClass("glyphicon-ok");
+// Viewport
+const synchronizeViewportSizeSmall = () => {
+    $(VIEWPORT_SIZE_S_DROPDOWN + " span").removeClass("glyphicon-ok");
+    $(VIEWPORT_SIZE_M_DROPDOWN + " span").removeClass("glyphicon-ok");
+    $(VIEWPORT_SIZE_L_DROPDOWN + " span").removeClass("glyphicon-ok");
+    $(VIEWPORT_SIZE_FIT_DROPDOWN + " span").removeClass("glyphicon-ok");
+
+    $(VIEWPORT_SIZE_S_SIDEBAR).removeProp("checked");
+    $(VIEWPORT_SIZE_M_SIDEBAR).removeProp("checked");
+    $(VIEWPORT_SIZE_L_SIDEBAR).removeProp("checked");
+    $(VIEWPORT_SIZE_FIT_SIDEBAR).removeProp("checked");
+
+    $(VIEWPORT_SIZE_S_SIDEBAR).prop("checked", "checked");
+    $(VIEWPORT_SIZE_S_DROPDOWN + " span").addClass("glyphicon-ok");
 };
 
-const disableColorOptimal = () => {
-    $(COLOR_EDGES).removeClass(ACTIVE_COLOR_OPTION);
-    $(COLOR_EDGES + ">span").removeClass("glyphicon-ok");
-    $(BLACK_EDGES).addClass(ACTIVE_COLOR_OPTION);
-    $(BLACK_EDGES + ">span").addClass("glyphicon-ok");
+const synchronizeViewportSizeMedium = () => {
+    $(VIEWPORT_SIZE_S_DROPDOWN + " span").removeClass("glyphicon-ok");
+    $(VIEWPORT_SIZE_M_DROPDOWN + " span").removeClass("glyphicon-ok");
+    $(VIEWPORT_SIZE_L_DROPDOWN + " span").removeClass("glyphicon-ok");
+    $(VIEWPORT_SIZE_FIT_DROPDOWN + " span").removeClass("glyphicon-ok");
+
+    $(VIEWPORT_SIZE_S_SIDEBAR).removeProp("checked");
+    $(VIEWPORT_SIZE_M_SIDEBAR).removeProp("checked");
+    $(VIEWPORT_SIZE_L_SIDEBAR).removeProp("checked");
+    $(VIEWPORT_SIZE_FIT_SIDEBAR).removeProp("checked");
+
+    $(VIEWPORT_SIZE_M_SIDEBAR).prop("checked", "checked");
+    $(VIEWPORT_SIZE_M_DROPDOWN + " span").addClass("glyphicon-ok");
 };
 
-// Sliders Functions
-export const modifyChargeParameter = (value) => {
-    grnState.simulation.force("charge").strength(value);
-    grnState.simulation.alpha(1);
+const synchronizeViewportSizeLarge = () => {
+    $(VIEWPORT_SIZE_S_DROPDOWN + " span").removeClass("glyphicon-ok");
+    $(VIEWPORT_SIZE_M_DROPDOWN + " span").removeClass("glyphicon-ok");
+    $(VIEWPORT_SIZE_L_DROPDOWN + " span").removeClass("glyphicon-ok");
+    $(VIEWPORT_SIZE_FIT_DROPDOWN + " span").removeClass("glyphicon-ok");
+
+    $(VIEWPORT_SIZE_S_SIDEBAR).removeProp("checked");
+    $(VIEWPORT_SIZE_M_SIDEBAR).removeProp("checked");
+    $(VIEWPORT_SIZE_L_SIDEBAR).removeProp("checked");
+    $(VIEWPORT_SIZE_FIT_SIDEBAR).removeProp("checked");
+
+    $(VIEWPORT_SIZE_L_SIDEBAR).prop("checked", "checked");
+    $(VIEWPORT_SIZE_L_DROPDOWN + " span").addClass("glyphicon-ok");
 };
 
-export const modifyLinkDistanceParameter = (value) => {
-    grnState.simulation.force("link").distance(value);
-    grnState.simulation.alpha(1);
+const synchronizeViewportSizeFit = () => {
+    $(VIEWPORT_SIZE_S_DROPDOWN + " span").removeClass("glyphicon-ok");
+    $(VIEWPORT_SIZE_M_DROPDOWN + " span").removeClass("glyphicon-ok");
+    $(VIEWPORT_SIZE_L_DROPDOWN + " span").removeClass("glyphicon-ok");
+    $(VIEWPORT_SIZE_FIT_DROPDOWN + " span").removeClass("glyphicon-ok");
+
+    $(VIEWPORT_SIZE_S_SIDEBAR).removeProp("checked");
+    $(VIEWPORT_SIZE_M_SIDEBAR).removeProp("checked");
+    $(VIEWPORT_SIZE_L_SIDEBAR).removeProp("checked");
+    $(VIEWPORT_SIZE_FIT_SIDEBAR).removeProp("checked");
+
+    $(VIEWPORT_SIZE_FIT_SIDEBAR).prop("checked", "checked");
+    $(VIEWPORT_SIZE_FIT_DROPDOWN + " span").addClass("glyphicon-ok");
 };
 
+const updateViewportSize = (currentValue) => {
+    // These values are bound to the layout dimensions of the GRNsight website.
+    const WIDTH_OFFSET = 250;
+    const HEIGHT_OFFSET = 53;
+
+    let container = $(".grnsight-container");
+
+    // from jquery
+    const fitContainer = dimensions => {
+        if (!dimensions) {
+            return; // First call; the next one should have dimensions filled in.
+        }
+
+        const fitWidth = dimensions.width - WIDTH_OFFSET;
+        const fitHeight = dimensions.height - dimensions.top - HEIGHT_OFFSET;
+        if (fitWidth !== container.width() || fitHeight !== container.height()) {
+            container.css({
+                width: fitWidth,
+                height: fitHeight
+            });
+        }
+    };
+
+    const fitContainerToWindow = () => {
+        fitContainer({
+            width: $(window).width(),
+            height: $(window).height(),
+            top: 0
+        });
+    };
+
+    const requestWindowDimensions = () => {
+        // We send a message if we are in an iframe, and manipulate directly if we aren’t.
+        if (window === window.top) {
+            fitContainerToWindow();
+        } else {
+            window.top.postMessage("dimensions", HOST_SITE);
+        }
+    };
+
+    let grnsightContainerClass = `grnsight-container ${currentValue}`;
+    if (!container.hasClass(currentValue)) {
+        container.attr("class", grnsightContainerClass);
+        if (currentValue === VIEWPORT_FIT) {
+            requestWindowDimensions();
+        } else {
+            container.css({ width: "", height: "" });
+        }
+    }
+
+    // Added synchronization
+    if (currentValue === VIEWPORT_S) {
+        synchronizeViewportSizeSmall();
+    } else if (currentValue === VIEWPORT_M) {
+        synchronizeViewportSizeMedium();
+    } else if (currentValue === VIEWPORT_L) {
+        synchronizeViewportSizeLarge();
+    } else if (currentValue === VIEWPORT_FIT) {
+        fitContainer(grnState.dimensions);
+        synchronizeViewportSizeFit();
+    } else if (currentValue === VIEWPORT_INIT) {
+        // First time around: initialize.
+        requestWindowDimensions();
+    }
+};
+
+
+// Expression DB Functions
+const startLoadingIcon = function () {
+    $(EXPRESSION_DB_LOADER).css("display", "block");
+    $(EXPRESSION_DB_LOADER_TEXT).css("display", "block");
+};
+const stopLoadingIcon = function () {
+    $(EXPRESSION_DB_LOADER).css("display", "none");
+    $(EXPRESSION_DB_LOADER_TEXT).css("display", "none");
+};
+const enableNodeColoringUI = function () {
+    grnState.nodeColoring.nodeColoringEnabled = true;
+    $(LOG_FOLD_CHANGE_MAX_VALUE_CLASS).removeClass("hidden");
+    $(LOG_FOLD_CHANGE_MAX_VALUE_SIDEBAR_BUTTON).removeClass("hidden");
+    $(LOG_FOLD_CHANGE_MAX_VALUE_HEADER).removeClass("hidden");
+};
+const loadExpressionDatabase = function (isTopDataset) {
+    startLoadingIcon();
+    queryExpressionDatabase({
+        dataset: isTopDataset ? grnState.nodeColoring.topDataset : grnState.nodeColoring.bottomDataset,
+        genes : grnState.workbook.genes
+    }).then(function (response) {
+        if (isTopDataset) {
+            grnState.workbook.expression[grnState.nodeColoring.topDataset] = response;
+        } else {
+            grnState.workbook.expression[grnState.nodeColoring.bottomDataset] = response;
+        }
+        enableNodeColoringUI();
+        stopLoadingIcon();
+        updaters.renderNodeColoring();
+    }).catch(function (error) {
+        console.log(error.stack);
+        console.log(error.name);
+        console.log(error.message);
+    });
+};
+
+
+// Sliders Functions
 const updateSliderState = slidersLocked => {
     const forceGraphDisabled = grnState.graphLayout === GRID_LAYOUT || slidersLocked;
     if (forceGraphDisabled) {
@@ -228,27 +418,45 @@ const updateSliderState = slidersLocked => {
     }
 };
 
+export const modifyChargeParameter = (value) => {
+    grnState.simulation.force("charge").strength(value);
+    grnState.simulation.alpha(1);
+};
+
+export const modifyLinkDistanceParameter = (value) => {
+    grnState.simulation.force("link").distance(value);
+    grnState.simulation.alpha(1);
+};
+
 const updateChargeSliderValues = () => {
-    modifyChargeParameter(grnState.chargeSlider.currentVal);
+    if (grnState.workbook !== null) {
+        modifyChargeParameter(grnState.chargeSlider.currentVal);
+    }
     $(CHARGE_VALUE).text(grnState.chargeSlider.currentVal);
     $(CHARGE_MENU).val(grnState.chargeSlider.currentVal);
     $(CHARGE_SLIDER_SIDEBAR).val(grnState.chargeSlider.currentVal);
     $(CHARGE_SLIDER_SIDEBAR).html(grnState.chargeSlider.currentVal +
-      ((grnState.chargeSlider.needsAppendedZeros
-          && grnState.chargeSlider.currentVal.toString().length === GRAVITY_LENGTH_WITHOUT_ZERO) ? "0" : ""));
+        ((grnState.chargeSlider.needsAppendedZeros &&
+            grnState.chargeSlider.currentVal.toString().length === GRAVITY_LENGTH_WITHOUT_ZERO) ? "0" : ""));
 };
 
 const updateLinkDistanceSliderValues = () => {
-    modifyLinkDistanceParameter(grnState.linkDistanceSlider.currentVal);
+    if (grnState.workbook !== null) {
+        modifyLinkDistanceParameter(grnState.linkDistanceSlider.currentVal);
+    }
     $(LINK_DIST_VALUE).text(grnState.linkDistanceSlider.currentVal);
     $(LINK_DIST_MENU).val(grnState.linkDistanceSlider.currentVal);
     $(LINK_DIST_SLIDER_SIDEBAR).val(grnState.linkDistanceSlider.currentVal);
     $(LINK_DIST_SLIDER_SIDEBAR).html(grnState.linkDistanceSlider.currentVal +
-      ((grnState.linkDistanceSlider.needsAppendedZeros
-        && grnState.linkDistanceSlider.currentVal.toString().length === GRAVITY_LENGTH_WITHOUT_ZERO) ? "0" : ""));
+        ((grnState.linkDistanceSlider.needsAppendedZeros &&
+            grnState.linkDistanceSlider.currentVal.toString().length === GRAVITY_LENGTH_WITHOUT_ZERO) ? "0" : ""));
 };
 
 // Grid Layout Functions
+const expandLayoutSidebar = () => {
+    $(LAYOUT_SIDEBAR_PANEL).addClass("in");
+};
+
 const toggleLayout = (on, off) => {
     if (!$(on).prop("checked")) {
         $(on).prop("checked", true);
@@ -259,32 +467,30 @@ const toggleLayout = (on, off) => {
 };
 
 const updatetoForceGraph = () => {
-    $(GRID_LAYOUT_BUTTON).val("Use Grid Layout");
     $(LOCK_SLIDERS_BUTTON).removeAttr("disabled");
-    toggleLayout(FORCE_GRAPH_CLASS, GRID_LAYOUT_CLASS);
-    updaters.setNodesToForceGraph();
+    toggleLayout(FORCE_GRAPH_MENU, GRID_LAYOUT_MENU);
 };
 
 const updatetoGridLayout = () => {
-    $(GRID_LAYOUT_BUTTON).val("Use Force Graph");
     $(LOCK_SLIDERS_BUTTON).attr("disabled", true);
-    toggleLayout(GRID_LAYOUT_CLASS, FORCE_GRAPH_CLASS);
-    updaters.setNodesToGrid();
+    toggleLayout(GRID_LAYOUT_MENU, FORCE_GRAPH_MENU);
 };
 
 // Node Coloring Functions
 const showNodeColoringMenus = () => {
-    if ($(NODE_COLORING_MENU).hasClass("hidden")) {
-        $(NODE_COLORING_MENU).removeClass("hidden");
-    }
-    if ($(NODE_COLORING_MENU_CLASS).hasClass("disabled")) {
-        $(NODE_COLORING_MENU_CLASS).removeClass("disabled");
-    }
+    $(NODE_COLORING_SIDEBAR_PANEL).removeClass("disabled");
+    $(NODE_COLORING_SIDEBAR_PANEL).addClass("in");
+    $(NODE_COLORING_MENU).removeClass("disabled");
+    $(NODE_COLORING_MENU_CLASS).removeClass("disabled");
+    $(NODE_COLORING_SIDEBAR_HEADER_LINK).attr("data-toggle", "collapse");
 };
 
 const disableNodeColoringMenus = () => {
-    $(NODE_COLORING_MENU).addClass("hidden");
+    $(NODE_COLORING_SIDEBAR_PANEL).addClass("disabled");
+    $(NODE_COLORING_SIDEBAR_PANEL).removeClass("in");
+    $(NODE_COLORING_MENU).addClass("disabled");
     $(NODE_COLORING_MENU_CLASS).addClass("disabled");
+    $(NODE_COLORING_SIDEBAR_HEADER_LINK).attr("data-toggle", "");
 };
 
 const isNewWorkbook = (name) => {
@@ -299,11 +505,90 @@ const shortenExpressionSheetName = (name) => {
 const hasExpressionData = (sheets) => {
     for (var property in sheets) {
         if (property.match(ENDS_IN_EXPRESSION_REGEXP)) {
-            grnState.nodeColoring.showMenu = true;
             return true;
         }
     }
-    grnState.nodeColoring.showMenu = false;
+    return false;
+};
+
+const updateSpeciesMenu = () => {
+    $(SPECIES_DISPLAY).val(grnState.genePageData.species);
+    $(SPECIES_BUTTON_CRESS + " span").removeClass("glyphicon-ok");
+    $(SPECIES_BUTTON_FLY + " span").removeClass("glyphicon-ok");
+    $(SPECIES_BUTTON_HUMAN + " span").removeClass("glyphicon-ok");
+    $(SPECIES_BUTTON_YEAST + " span").removeClass("glyphicon-ok");
+    $(SPECIES_BUTTON_NEMATODE + " span").removeClass("glyphicon-ok");
+    $(SPECIES_BUTTON_MOUSE + " span").removeClass("glyphicon-ok");
+    if ($(SPECIES_DISPLAY).val() === "Arabidopsis_thaliana") {
+        $(SPECIES_BUTTON_CRESS + " span").addClass("glyphicon-ok");
+    }
+    if ($(SPECIES_DISPLAY).val() === "Drosophila_melanogaster") {
+        $(SPECIES_BUTTON_FLY + " span").addClass("glyphicon-ok");
+    }
+    if ($(SPECIES_DISPLAY).val() === "Caenorhabditis_elegans") {
+        $(SPECIES_BUTTON_NEMATODE + " span").addClass("glyphicon-ok");
+    }
+    if ($(SPECIES_DISPLAY).val() === "Homo_sapiens") {
+        $(SPECIES_BUTTON_HUMAN + " span").addClass("glyphicon-ok");
+    }
+    if ($(SPECIES_DISPLAY).val() === "Mus_musculus") {
+        $(SPECIES_BUTTON_MOUSE + " span").addClass("glyphicon-ok");
+    }
+    if ($(SPECIES_DISPLAY).val() === "Saccharomyces_cerevisiae") {
+        $(SPECIES_BUTTON_YEAST + " span").addClass("glyphicon-ok");
+    }
+};
+
+// helper method to check if the given data, a taxon id or a species name
+// is contained within the identified species, if it exists at all.
+export const identifySpeciesMenu = (data) => {
+    var nameTax = grnState.nameToTaxon;
+    for (var n in nameTax) {
+        if (Object.values(nameTax[n]).includes(data.toString())) {
+            grnState.genePageData.commonName = n;
+            grnState.genePageData.species = nameTax[n].spec;
+            grnState.genePageData.taxonJaspar = nameTax[n].jaspar;
+            grnState.genePageData.taxonUniprot = nameTax[n].uniprot;
+            grnState.genePageData.ensembl = nameTax[n].ensembl;
+            grnState.genePageData.mine = nameTax[n].mine;
+            $(SPECIES_DISPLAY).val(grnState.genePageData.species);
+            updateSpeciesMenu();
+            return grnState.genePageData.identified;
+        }
+    }
+    return false;
+};
+
+const identifySpeciesOrTaxon = (data) => {
+    var nameTax = grnState.nameToTaxon;
+    for (var n in nameTax) {
+        if (n === data) { // <-- change if to work
+            grnState.genePageData.commonName = n;
+            grnState.genePageData.species = nameTax[n].spec;
+            grnState.genePageData.taxonJaspar = nameTax[n].jaspar.toString();
+            grnState.genePageData.taxonUniprot = nameTax[n].uniprot.toString();
+            grnState.genePageData.identified = true;
+            grnState.genePageData.ensembl = nameTax[n].ensembl;
+            grnState.genePageData.mine = nameTax[n].mine;
+            $(SPECIES_DISPLAY).val(grnState.genePageData.species);
+            updateSpeciesMenu();
+            return grnState.genePageData.identified;
+        }
+        for (var t in Object.values(nameTax[n])) {
+            if (Object.values(nameTax[n])[t] === data) {
+                grnState.genePageData.commonName = n;
+                grnState.genePageData.species = nameTax[n].spec;
+                grnState.genePageData.taxonJaspar = nameTax[n].jaspar.toString();
+                grnState.genePageData.taxonUniprot = nameTax[n].uniprot.toString();
+                grnState.genePageData.identified = true;
+                grnState.genePageData.ensembl = nameTax[n].ensembl;
+                grnState.genePageData.mine = nameTax[n].mine;
+                $(SPECIES_DISPLAY).val(grnState.genePageData.species);
+                updateSpeciesMenu();
+                return grnState.genePageData.identified;
+            }
+        }
+    }
     return false;
 };
 
@@ -314,7 +599,11 @@ const clearDropdownMenus = () => {
     $(BOTTOM_DATASET_SELECTION_SIDEBAR).html("");
 };
 
-const resetDatasetDropdownMenus = (network) => {
+const expressionDBDatasets = ["Barreto_2012_wt", "Dahlquist_2018_dcin5",
+    "Dahlquist_2018_dgln3", "Dahlquist_2018_dhap4", "Dahlquist_2018_dzap1",
+    "Dahlquist_2018_wt", "Kitagawa_2002_wt", "Thorsen_2007_wt"];
+
+const resetDatasetDropdownMenus = (workbook) => {
     clearDropdownMenus();
     $(".dataset-option").remove(); // clear all menu dataset options
 
@@ -328,17 +617,23 @@ const resetDatasetDropdownMenus = (network) => {
             </li>`;
     };
 
-    for (var property in network.expression) {
+    grnState.nodeColoring.nodeColoringOptions = [];
+    for (var property in workbook.expression) {
         if (property.match(ENDS_IN_EXPRESSION_REGEXP)) {
             grnState.nodeColoring.nodeColoringOptions.push({value: property});
         }
     }
 
+    // Add expression database options
+    expressionDBDatasets.forEach(option => grnState.nodeColoring.nodeColoringOptions.push({value: [option]}));
+
     $(BOTTOM_DATASET_SELECTION_SIDEBAR).append($("<option>")
             .attr("value", "Same as Top Dataset").text("Same as Top Dataset"));
 
     $(BOTTOM_DATASET_SELECTION_MENU).append(createHTMLforDataset("Same as Top Dataset"));
 
+    // $(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>")
@@ -377,7 +672,6 @@ const updateTopDataset = () => {
     removeAllChecksFromMenuDatasetOptions(TOP_DATASET_SELECTION_MENU);
     $(`${TOP_DATASET_SELECTION_MENU} li[value='${grnState.nodeColoring.topDataset}'] a span`).addClass("glyphicon-ok");
     updaters.renderNodeColoring();
-    // TO DO: If bottomDataSameAsTop make bottom selction "Same As Top"
 };
 
 const updateBottomDataset = () => {
@@ -393,18 +687,37 @@ const updateBottomDataset = () => {
             .addClass("glyphicon-ok");
         /* eslint-enable max-len */
     }
+
     updaters.renderNodeColoring();
 };
 
-export const updateApp = grnState => {
+if (!grnState.genePageData.identified) {
+    $(SPECIES_DISPLAY).val(grnState.genePageData.species);
+}
 
-    if (grnState.newNetwork) {
-        grnState.normalizationMax = max(grnState.network.positiveWeights.concat(grnState.network.negativeWeights));
-        displayNetwork(grnState.network, grnState.name);
+export const updateApp = grnState => {
+    if (grnState.newWorkbook) {
+        grnState.normalizationMax = max(grnState.workbook.positiveWeights.concat(grnState.workbook.negativeWeights));
+        displayworkbook(grnState.workbook, grnState.name);
+        expandLayoutSidebar();
         clearDropdownMenus();
-        if (hasExpressionData(grnState.network.expression)) {
-            resetDatasetDropdownMenus(grnState.network);
-            grnState.nodeColoring.nodeColoringEnabled = true;
+        // check if the species has been identified yet, if not try to identify it
+        // also checks if the areas have been populated at all
+        var workbookSpecies = grnState.workbook.meta.species;
+        var workbookTaxon = grnState.workbook.meta.taxon_id;
+        if (identifySpeciesOrTaxon(workbookSpecies) || identifySpeciesOrTaxon(workbookTaxon)) {
+            identifySpeciesOrTaxon(workbookSpecies);
+            identifySpeciesOrTaxon(workbookTaxon);
+        }
+
+        // nodeColoringEnabled will only be set the very first time; because otherwise the user will have
+        // made a choice and we will let the choice stick.
+        if (hasExpressionData(grnState.workbook.expression)) {
+            resetDatasetDropdownMenus(grnState.workbook);
+            if (grnState.nodeColoring.nodeColoringEnabled === undefined) {
+                grnState.nodeColoring.nodeColoringEnabled = true;
+            }
+
             if (isNewWorkbook(name)) {
                 grnState.nodeColoring.showMenu = true;
                 grnState.nodeColoring.lastDataset = name;
@@ -420,13 +733,15 @@ export const updateApp = grnState => {
                 grnState.nodeColoring.bottomDataSameAsTop = false;
             }
         } else {
-            grnState.nodeColoringEnabled = false;
+            if (grnState.nodeColoring.nodeColoringEnabled === undefined) {
+                grnState.nodeColoringEnabled = false;
+            }
         }
         refreshApp();
 
-        // Rare exception to the MVC cycle: right now we have no way of knowing whether the network has changed
-        // (which is what necessitates displayNetwork), so we mark the model here.
-        grnState.newNetwork = false;
+        // Rare exception to the MVC cycle: right now we have no way of knowing whether the workbook has changed
+        // (which is what necessitates displayworkbook), so we mark the model here.
+        grnState.newWorkbook = false;
     }
 
     synchronizeNormalizationValues(grnState.normalizationMax);
@@ -437,12 +752,10 @@ export const updateApp = grnState => {
         $(GREY_EDGES_DASHED_MENU + " span").addClass("glyphicon-ok");
         $(GREY_EDGES_DASHED_MENU).prop("checked", "checked");
         $(GREY_EDGES_DASHED_SIDEBAR).prop("checked", "checked");
-        refreshApp();
     } else {
         $(GREY_EDGES_DASHED_MENU + " span").removeClass("glyphicon-ok");
         $(GREY_EDGES_DASHED_MENU).removeProp("checked");
         $(GREY_EDGES_DASHED_SIDEBAR).removeProp("checked");
-        refreshApp();
     }
 
 // Weights functions
@@ -455,11 +768,10 @@ export const updateApp = grnState => {
     }
 
 // Enable/Disable Colored edges
-    if (grnState.colorOptimal) {
-        enableColorOptimal();
-    } else {
-        disableColorOptimal();
-    }
+    $(COLOR_EDGES_SIDEBAR).prop("checked", grnState.colorOptimal);
+    const classFunction = `${grnState.colorOptimal ? "add" : "remove"}Class`;
+    $(COLOR_EDGES_MENU)[classFunction](ACTIVE_COLOR_OPTION);
+    $(`${COLOR_EDGES_MENU}>span`)[classFunction]("glyphicon-ok");
 
 // Graph Layout
     if (grnState.graphLayout === FORCE_GRAPH) {
@@ -468,19 +780,87 @@ export const updateApp = grnState => {
         updatetoGridLayout();
     }
 
-// Node Coloring
-    if (grnState.network !== null && grnState.nodeColoring.nodeColoringEnabled
-      && hasExpressionData(grnState.network.expression)) {
+// Viewport
+    updateViewportSize(grnState.viewportSize);
+
+    // Node Coloring
+    if (grnState.workbook !== null && grnState.nodeColoring.nodeColoringEnabled
+    && hasExpressionData(grnState.workbook.expression)) {
+        grnState.nodeColoring.showMenu = true;
         $(AVG_REPLICATE_VALS_TOP_SIDEBAR).prop("checked", true);
         $(AVG_REPLICATE_VALS_BOTTOM_SIDEBAR).prop("checked", true);
-        $(NODE_COLORING_TOGGLE_MENU + " span").removeClass("glyphicon-ok");
-        $(NODE_COLORING_TOGGLE_SIDEBAR).val("Disable Node Coloring");
+        $(`${NODE_COLORING_TOGGLE_MENU} span`).addClass("glyphicon-ok");
+        $(NODE_COLORING_TOGGLE_SIDEBAR).prop("checked", true);
         $(LOG_FOLD_CHANGE_MAX_VALUE_CLASS).val(DEFAULT_MAX_LOG_FOLD_CHANGE);
-        updaters.renderNodeColoring();
+        $(NODE_COLORING_SIDEBAR_BODY).removeClass("hidden");
+        if (expressionDBDatasets.includes(grnState.nodeColoring.topDataset) &&
+        grnState.workbook.expression[grnState.nodeColoring.topDataset] === undefined) {
+            if ($(NODE_COLORING_TOGGLE_SIDEBAR).prop("checked")) {
+                loadExpressionDatabase(true);
+            }
+        } else if (expressionDBDatasets.includes(grnState.nodeColoring.bottomDataset) &&
+        !grnState.nodeColoring.bottomDataSameAsTop &&
+        grnState.workbook.expression[grnState.nodeColoring.bottomDataset] === undefined) {
+            if (!grnState.nodeColoring.bottomDataSameAsTop) {
+                loadExpressionDatabase(false);
+            }
+        } else {
+            updaters.renderNodeColoring();
+        }
+    } else if (grnState.workbook !== null && !hasExpressionData(grnState.workbook.expression)
+    && grnState.nodeColoring.nodeColoringEnabled) {
+        if ((grnState.workbook.expression[grnState.nodeColoring.topDataset] === undefined) ||
+        (!grnState.nodeColoring.bottomDataSameAsTop &&
+        grnState.workbook.expression[grnState.nodeColoring.bottomDataset] === undefined)) {
+            updaters.removeNodeColoring();
+            resetDatasetDropdownMenus(grnState.workbook);
+        }
+        grnState.nodeColoring.showMenu = true;
+        grnState.nodeColoring.topDataset = grnState.nodeColoring.topDataset ?
+        grnState.nodeColoring.topDataset : "Barreto_2012_wt";
+        grnState.nodeColoring.bottomDataset = grnState.nodeColoring.bottomDataset ?
+        grnState.nodeColoring.bottomDataset : "Barreto_2012_wt";
+        $(LOG_FOLD_CHANGE_MAX_VALUE_CLASS).addClass("hidden");
+        $(LOG_FOLD_CHANGE_MAX_VALUE_SIDEBAR_BUTTON).addClass("hidden");
+        $(LOG_FOLD_CHANGE_MAX_VALUE_HEADER).addClass("hidden");
+        if ($(NODE_COLORING_TOGGLE_SIDEBAR).prop("checked")) {
+            if (grnState.workbook.expression[grnState.nodeColoring.topDataset] === undefined) {
+                loadExpressionDatabase(true);
+            } else if (!grnState.nodeColoring.bottomDataSameAsTop &&
+            grnState.workbook.expression[grnState.nodeColoring.bottomDataset] === undefined) {
+                loadExpressionDatabase(false);
+            } else {
+                enableNodeColoringUI();
+                // There is as problem here! When a dataset from the database is used to do node coloring,
+                // but then the layout of the graph is changed (force graph to grid layout, for instance),
+                // node coloring goes away, seemingly inexplicably.
+                // !!!!! TEMPORARY WORKAROUND:
+                //   Calling `updaters.renderNodeColoring()` inline does not succeed; instead, a delay
+                //   has to take place, done here via `setTimeout`.
+                //
+                //   The delay is built-in to the cases where a query has to happen first.
+                //
+                //   For some reason, calling updates.renderNodeColoring() _synchronously_ does not
+                //   actually perform the node coloring.
+                //
+                //   Investigate why a timeout is required in order for node coloring to take place
+                //   successfully in this case.
+                setTimeout(() => updaters.renderNodeColoring(), 250);
+
+            }
+        }
+    } else if (grnState.workbook !== null && !grnState.nodeColoring.nodeColoringEnabled) {
+        $(NODE_COLORING_SIDEBAR_BODY).addClass("hidden");
+        $(`${NODE_COLORING_TOGGLE_MENU} span`).removeClass("glyphicon-ok");
+        $(NODE_COLORING_TOGGLE_SIDEBAR).prop("checked", false);
+    }
+
+    if (grnState.workbook !== null &&  grnState.workbook.sheetType === "weighted") {
+        showEdgeWeightOptions();
+    } else if (grnState.workbook !== null &&  grnState.workbook.sheetType === "unweighted") {
+        hideEdgeWeightOptions();
     } else {
-        $(NODE_COLORING_TOGGLE_MENU + " span").addClass("glyphicon-ok");
-        $(NODE_COLORING_TOGGLE_SIDEBAR).val("Enable Node Coloring");
-        updaters.removeNodeColoring();
+        hideEdgeWeightOptions();
     }
 
     if (grnState.nodeColoring.averageTopDataset) {
@@ -499,11 +879,13 @@ export const updateApp = grnState => {
         $(AVG_REPLICATE_VALS_BOTTOM_MENU + " span").addClass("glyphicon-ok");
         $(AVG_REPLICATE_VALS_BOTTOM_MENU).prop("checked", "checked");
         $(AVG_REPLICATE_VALS_BOTTOM_SIDEBAR).prop("checked", "checked");
+
         updaters.renderNodeColoring();
     } else {
         $(AVG_REPLICATE_VALS_BOTTOM_MENU + " span").removeClass("glyphicon-ok");
         $(AVG_REPLICATE_VALS_BOTTOM_MENU).removeProp("checked");
         $(AVG_REPLICATE_VALS_BOTTOM_SIDEBAR).removeProp("checked");
+
         updaters.renderNodeColoring();
     }
 
@@ -526,11 +908,19 @@ export const updateApp = grnState => {
         $(UNDO_SLIDERS_RESET_MENU).parent().addClass("disabled");
     }
 
-    if (grnState.network !== null) {
-        updateChargeSliderValues();
-        updateLinkDistanceSliderValues();
-    }
+    updateChargeSliderValues();
+    updateLinkDistanceSliderValues();
 
-// Refresh graph
+    $(ZOOM_CONTROL).prop({ disabled: !grnState.workbook });
+    if (!grnState.workbook) {
+        // Set initial values when there is no workbook: this is necessarily explicit because Firefox
+        // preserves these values even upon a browser reload.
+        $(ZOOM_INPUT).val(ZOOM_DISPLAY_MIDDLE);
+        $(ZOOM_SLIDER).val(ZOOM_ADAPTIVE_MAX_SCALE);
+    }
     refreshApp();
+
 };
+
+
+export { stopLoadingIcon, startLoadingIcon};