grnsight 6.0.7 → 7.2.0

package/web-client/public/js/grnsight.js

@@ -1,13 +1,34 @@
+/* eslint-disable func-style */
 import { displayStatistics } from "./graph-statistics"; // eslint-disable-line no-unused-vars
 import { upload } from "./upload";
 import { generateNetwork } from "./generateNetwork";
 
 import { grnState } from "./grnstate";
+import { queryDefaultDataset } from "./api/grnsight-api.js";
 import { updateApp } from "./update-app";
 import { setupHandlers } from "./setup-handlers";
 
-setupHandlers(grnState);
-updateApp(grnState);
+async function updateDefaultDataset () {
+    try {
+        const response = await queryDefaultDataset({type:"DefaultDataset"});
+        grnState.database = response;
+        return response.defaultDataset.join();
+    } catch (error) {
+        console.log(error.stack);
+        console.log(error.name);
+        console.log(error.message);
+    }
+}
 
-upload();
-generateNetwork();
+async function initializeGrnsight () {
+    const defaultDataset = await updateDefaultDataset();
+    grnState.defaultDataset = defaultDataset;
+
+    setupHandlers(grnState);
+    updateApp(grnState);
+
+    upload();
+    generateNetwork();
+}
+
+initializeGrnsight();

package/web-client/public/js/grnstate.js

@@ -10,7 +10,8 @@ import {
   DEFAULT_MAX_LOG_FOLD_CHANGE,
   DEFAULT_ZOOM_VALUE,
   FORCE_GRAPH,
-  VIEWPORT_INIT
+  VIEWPORT_INIT,
+  NETWORK_GRN_MODE
 } from "./constants";
 let currentWorkbook = null;
 
@@ -41,6 +42,7 @@ const annotateLinks = workbook => {
 };
 
 export const grnState = {
+    mode: NETWORK_GRN_MODE,    // GRNsight will display GRN view unless specified
     name: null,
     simulation: undefined,
     newWorkbook: false,
@@ -83,6 +85,7 @@ export const grnState = {
         lastDataset: null,
         bottomDataSameAsTop: true,
         nodeColoringOptions: [],
+        ppiNodeColorWarningDisplayed: false,
     },
 
 

package/web-client/public/js/iframe-coordination.js

@@ -11,7 +11,7 @@
  *                loaded into the web browser when this script executes.
  */
 iFrameResize({
-  checkOrigin: ["https://dondi.github.io", "https://grnsight.cs.lmu.edu"],
+  checkOrigin: ["https://dondi.github.io", "https://grnsight.lmucs.org"],
   widthCalculationMethod: "taggedElement",
   heightCalculationMethod: "taggedElement",
   sizeWidth: true,
@@ -40,7 +40,7 @@ const sendDimensions = (destination, origin) => {
 };
 
 window.addEventListener("message", event => {
-  if (event.origin.indexOf("https://grnsight.cs.lmu.edu") !== 0) {
+  if (event.origin.indexOf("https://grnsight.lmucs.org") !== 0) {
     // Ignore any message that did not originate from the GRNsight web client server.
     return;
   }
@@ -51,5 +51,5 @@ window.addEventListener("message", event => {
 });
 
 window.addEventListener("resize", () => sendDimensions(
-  document.querySelector("iframe.embedded-demo").contentWindow, "https://grnsight.cs.lmu.edu"
+  document.querySelector("iframe.embedded-demo").contentWindow, "https://grnsight.lmucs.org"
 ));

package/web-client/public/js/setup-handlers.js

@@ -94,13 +94,11 @@ export const setupHandlers = grnState => {
         window.document.body.appendChild(emptySvg);
         var emptySvgDeclarationComputed = getComputedStyle(emptySvg);
 
-        const traverse = svg => {
-            var tree = [];
-            tree.push(svg);
-            // implement DFS
-            const visit = (node) => {
-                if (node && node.hasChildNodes()) {
-                    var child = node.firstChild;
+        const traverse = (node) => {
+            const tree = [];
+            const visit = (currentNode) => {
+                if (currentNode && currentNode.hasChildNodes()) {
+                    let child = currentNode.firstChild;
                     while (child) {
                         if (child.nodeType === 1 && child.nodeName !== "SCRIPT") {
                             tree.push(child);
@@ -110,38 +108,39 @@ export const setupHandlers = grnState => {
                     }
                 }
             };
-            visit(svg);
+            visit(node);
             return tree;
         };
 
         const explicitlySetStyle = element => {
-            const cSSStyleDeclarationComputed = window.getComputedStyle(element);
-            let i;
-            let len;
-            let key;
-            let value;
-            let computedStyleStr = "";
-
-            for (i = 0, len = cSSStyleDeclarationComputed.length; i < len; i++) {
-                key = cSSStyleDeclarationComputed[i];
-                value = cSSStyleDeclarationComputed.getPropertyValue(key);
+            const cssStyleDeclarationComputed = window.getComputedStyle(element);
+            const computedStyleObj = {};
+
+
+            for (let i = 0; i < cssStyleDeclarationComputed.length; i++) {
+                const key = cssStyleDeclarationComputed[i];
+                const value = cssStyleDeclarationComputed.getPropertyValue(key);
                 if (value !== emptySvgDeclarationComputed.getPropertyValue(key)) {
                     // Don't set computed style of width and height. Makes SVG elmements disappear.
                     if ((key !== "height") && (key !== "width")) {
-                        computedStyleStr += key + ":" + value + ";";
+                        computedStyleObj[key] = value;
                     }
 
                 }
             }
-            element.setAttribute("style", computedStyleStr);
+
+            if (element.classList.contains("weight")) {
+                computedStyleObj["visibility"] = "hidden";
+            }
+
+            if (computedStyleObj) {
+                Object.assign(element.style, computedStyleObj);
+            }
         };
 
         // hardcode computed css styles inside svg
         var allElements = traverse(svg);
-        var i = allElements.length;
-        while (i--) {
-            explicitlySetStyle(allElements[i]);
-        }
+        allElements.forEach(explicitlySetStyle);
     };
 
     const sourceAttributeSetter = (svg) => {
@@ -160,7 +159,7 @@ export const setupHandlers = grnState => {
     };
 
     const exportSVG = (svgElement, name) => {
-        let source = svgElement;
+        let source = svgElement.cloneNode(true);
 
         sourceAttributeSetter(source);
         setInlineStyles(source);
@@ -185,10 +184,30 @@ export const setupHandlers = grnState => {
         const imgData = canvas.toDataURL("image/png");
 
         const pdf = new jsPDF("l", "mm", "letter");
-        const width = pdf.internal.pageSize.getWidth();
-        const height = pdf.internal.pageSize.getHeight();
+        const pdfWidth = pdf.internal.pageSize.getWidth();
+        const pdfHeight = pdf.internal.pageSize.getHeight();
 
-        pdf.addImage(imgData, "PNG", 0, 0, width, height);
+        const svgWidth = canvas.width;
+        const svgHeight = canvas.height;
+
+        const aspectRatio = svgWidth / svgHeight;
+        let scaledWidth = pdfWidth;
+        // ratio = width/height --> height = width/ratio
+        let scaledHeight = scaledWidth / aspectRatio;
+
+        if (scaledHeight > pdfHeight) {
+            scaledHeight = pdfHeight;
+            scaledWidth = pdfHeight * aspectRatio;
+        }
+
+        pdf.addImage(
+            imgData,
+            "PNG",
+            (pdfWidth - scaledWidth) / 2,
+            (pdfHeight - scaledHeight) / 2,
+            scaledWidth,
+            scaledHeight
+        );
         pdf.save(name);
     };
 
@@ -209,7 +228,7 @@ export const setupHandlers = grnState => {
     $(EXPORT_TO_PNG).click(() => {
         var svgContainer = document.getElementById("exportContainer");
         var editedName = grnState.name.replace(determineFileType(grnState.name), "") + ".png";
-        saveSvgAsPng(svgContainer, editedName);
+        saveSvgAsPng(svgContainer, editedName, { backgroundColor: "white"});
     });
 
     $(EXPORT_TO_SVG).click(() => {
@@ -225,29 +244,40 @@ export const setupHandlers = grnState => {
     });
 
 // Node Coloring
-    $(NODE_COLORING_TOGGLE_CLASS).click(() => {
-        grnState.nodeColoring.nodeColoringEnabled = !grnState.nodeColoring.nodeColoringEnabled;
-        updateApp(grnState);
-    });
-
-    $(TOP_DATASET_SELECTION_SIDEBAR).change(() => {
-        var selection = $(TOP_DATASET_SELECTION_SIDEBAR).find(":selected").attr("value");
+    const updateTopDatasetSelection = (selection) => {
         grnState.nodeColoring.topDataset = selection;
         if (grnState.nodeColoring.bottomDataSameAsTop) {
             grnState.nodeColoring.bottomDataset = selection;
         }
         updateApp(grnState);
-    });
+    };
 
-    $(TOP_DATASET_SELECTION_MENU).click(() => {
-        var selection = $(this).attr("value");
-        grnState.nodeColoring.topDataset = selection;
-        if (grnState.nodeColoring.bottomDataSameAsTop) {
+    const updateBottomDatasetSelection = (selection) => {
+        grnState.nodeColoring.bottomDataset = selection;
+        if (selection === "Same as Top Dataset") {
+            grnState.nodeColoring.bottomDataset = grnState.nodeColoring.topDataset;
+            grnState.nodeColoring.bottomDataSameAsTop = true;
+        } else {
+            grnState.nodeColoring.bottomDataSameAsTop = false;
             grnState.nodeColoring.bottomDataset = selection;
         }
         updateApp(grnState);
+    };
+
+    $(NODE_COLORING_TOGGLE_CLASS).click(() => {
+        grnState.nodeColoring.nodeColoringEnabled = !grnState.nodeColoring.nodeColoringEnabled;
+        updateApp(grnState);
     });
 
+    $(TOP_DATASET_SELECTION_SIDEBAR).change(() => {
+        const selection = $(TOP_DATASET_SELECTION_SIDEBAR).find(":selected").attr("value");
+        updateTopDatasetSelection(selection);
+    });
+
+    $(TOP_DATASET_SELECTION_MENU).click((event) => {
+        const selection = event.target.dataset.expression;
+        updateTopDatasetSelection(selection);
+    });
     $(AVG_REPLICATE_VALS_TOP_SIDEBAR).change(() => {
         grnState.nodeColoring.averageTopDataset = !grnState.nodeColoring.averageTopDataset;
         updateApp(grnState);
@@ -259,28 +289,13 @@ export const setupHandlers = grnState => {
     });
 
     $(BOTTOM_DATASET_SELECTION_SIDEBAR).change(() => {
-        var selection = $(BOTTOM_DATASET_SELECTION_SIDEBAR).find(":selected").attr("value");
-        grnState.nodeColoring.bottomDataset = selection;
-        if (grnState.nodeColoring.bottomDataset === "Same as Top Dataset") {
-            grnState.nodeColoring.bottomDataset = grnState.nodeColoring.topDataset;
-            grnState.nodeColoring.bottomDataSameAsTop = true;
-        } else {
-            grnState.nodeColoring.bottomDataSameAsTop = false;
-        }
-        updateApp(grnState);
+        const selection = $(BOTTOM_DATASET_SELECTION_SIDEBAR).find(":selected").attr("value");
+        updateBottomDatasetSelection(selection);
     });
 
-    $(BOTTOM_DATASET_SELECTION_MENU).click(() => {
-        var selection = $(this).attr("value");
-        grnState.nodeColoring.bottomDataset = selection;
-        if (selection === "Same as Top Dataset") {
-            grnState.nodeColoring.bottomDataset = grnState.nodeColoring.topDataset;
-            grnState.nodeColoring.bottomDataSameAsTop = true;
-        } else {
-            grnState.nodeColoring.bottomDataSameAsTop = false;
-            grnState.nodeColoring.bottomDataset = selection;
-        }
-        updateApp(grnState);
+    $(BOTTOM_DATASET_SELECTION_MENU).click((event) => {
+        const selection = event.target.dataset.expression;
+        updateBottomDatasetSelection(selection);
     });
 
     $(AVG_REPLICATE_VALS_BOTTOM_SIDEBAR).change(() => {

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

@@ -10,6 +10,11 @@ import {
     UNWEIGHTED_DEMO_NAME,
     SCHADE_INPUT_NAME,
     SCHADE_OUTPUT_NAME,
+    PPI_DEMO_PATH,
+    PPI_DEMO_NAME,
+    FORCE_GRAPH,
+    NETWORK_PPI_MODE,
+    NETWORK_GRN_MODE
 } from "./constants";
 import { getWorkbookFromForm, getWorkbookFromUrl } from "./api/grnsight-api";
 
@@ -19,6 +24,7 @@ const demoFiles = [
     WEIGHTED_DEMO_PATH,
     SCHADE_INPUT_PATH,
     SCHADE_OUTPUT_PATH,
+    PPI_DEMO_PATH
 ];
 
 const submittedFilename = ($upload) => {
@@ -133,9 +139,21 @@ export const setupLoadAndImportHandlers = (grnState) => {
                         break;
                     case SCHADE_OUTPUT_PATH:
                         grnState.name = SCHADE_OUTPUT_NAME;
+                        break;
+                    case PPI_DEMO_PATH:
+                        grnState.name = PPI_DEMO_NAME;
+                        break;
                     }
                 }
                 grnState.workbook = workbook;
+
+                if (grnState.name.includes(".sif")) {
+                    grnState.mode = workbook.workbookType;
+                } else if (grnState.name.includes(".graphml")) {
+                    grnState.mode = NETWORK_GRN_MODE;
+                } else {
+                    grnState.mode = workbook.meta.data.workbookType;
+                }
                 grnState.workbook.expressionNames = Object.keys(workbook.expression);
                 if (uploadRoute !== "upload") {
                     grnState.annotateLinks();
@@ -153,8 +171,8 @@ export const setupLoadAndImportHandlers = (grnState) => {
      * for helping to resolve this.
      */
 
-    // $(".upload").change(uploadHandler(loadGrn));
     $("body").on("change", ".upload", uploadHandler(loadGrn));
+
     const loadDemo = (url, value) => {
         $("#demoSourceDropdown option[value='" + value.substring(1) + "']").prop(
             "selected",
@@ -162,14 +180,16 @@ export const setupLoadAndImportHandlers = (grnState) => {
         );
         loadGrn(url);
         reloader = () => loadGrn(url);
-
+        grnState.graphLayout = FORCE_GRAPH;
         $("a.upload > input[type=file]").val("");
     };
 
     const initializeDemoFile = (demoClass, demoPath, demoName) => {
-        // Deleted parameter `event`
-        $(demoClass).on("click", () => {
-            loadDemo(demoPath, demoClass, demoName);
+        $(".dropdown-menu li a").on("click", (event) => {
+            const selected = event.target.dataset.expression;
+            if (`.${selected}` === demoClass) {
+                loadDemo(demoPath, demoClass, demoName);
+            }
         });
         $("#demoSourceDropdown").on("change", () => {
             const selected = `.${$("#demoSourceDropdown").val()}`;
@@ -200,11 +220,16 @@ export const setupLoadAndImportHandlers = (grnState) => {
 export const responseCustomWorkbookData = (grnState, queryURL, name) => {
     const uploadRoute = queryURL;
     getWorkbookFromUrl(uploadRoute).done((workbook) => {
+        if (workbook.meta.data.workbookType === NETWORK_PPI_MODE) {
+            grnState.mode = workbook.meta.data.workbookType;
+        } else {
+            grnState.mode = NETWORK_GRN_MODE;
+        }
         grnState.name = name;
         grnState.workbook = workbook;
         // Reset the node coloring dataset selection
-        grnState.nodeColoring.topDataset = undefined;
-        grnState.nodeColoring.bottomDataset = undefined;
+        grnState.nodeColoring.topDataset = grnState.defaultDataset;
+        grnState.nodeColoring.bottomDataset = grnState.defaultDataset;
         grnState.annotateLinks();
         disableUpload(false);
         updateApp(grnState);

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

@@ -1,6 +1,6 @@
 import { drawGraph, updaters } from "./graph";
 import { uploadState } from "./upload";
-import { displayWarnings } from "./warnings";
+import { displayWarnings, displayPPINodeColorWarning } from "./warnings";
 import { max } from "d3-array";
 import { grnState } from "./grnstate";
 
@@ -45,12 +45,11 @@ import {
   CHARGE_SLIDER_SIDEBAR,
   CHARGE_MENU,
   CHARGE_VALUE,
-  GRID_LAYOUT_MENU,
-  FORCE_GRAPH_MENU,
   LAYOUT_SIDEBAR_PANEL,
   NODE_COLORING_MENU,
   NODE_COLORING_TOGGLE_MENU,
   NODE_COLORING_MENU_CLASS,
+  NODE_COLORING_NAVBAR_OPTIONS,
   NODE_COLORING_SIDEBAR_BODY,
   NODE_COLORING_SIDEBAR_PANEL,
   NODE_COLORING_SIDEBAR_HEADER_LINK,
@@ -104,6 +103,13 @@ import {
   VIEWPORT_SIZE_L_SIDEBAR,
   VIEWPORT_SIZE_FIT_SIDEBAR,
   VIEWPORT_INIT,
+  NETWORK_MODE_DROPDOWN,
+  NETWORK_MODE_CLASS,
+  NETWORK_MODE_PROTEIN_PHYS,
+  NETWORK_MODE_GRN,
+  EXPORT_TO_UNWEIGHTED_GML_MENU,
+  NETWORK_GRN_MODE,
+  NETWORK_PPI_MODE,
 //   EXPRESSION_SOURCE,
 } from "./constants";
 
@@ -128,7 +134,6 @@ const refreshApp = () => {
 
 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 (workbook.warnings.length > 0) {
@@ -379,6 +384,14 @@ const enableNodeColoringUI = function () {
     $(LOG_FOLD_CHANGE_MAX_VALUE_HEADER).removeClass("hidden");
 };
 
+const adjustGeneNameForExpression = function (gene) {
+    const geneName = gene.name;
+    return grnState.workbook.meta.data.workbookType === NETWORK_PPI_MODE &&
+        geneName.endsWith("p")
+        ? geneName.slice(0, -1)
+        : geneName;
+};
+
 const loadExpressionDatabase = function (isTopDataset) {
     const dataset = isTopDataset ? grnState.nodeColoring.topDataset : grnState.nodeColoring.bottomDataset;
     startLoadingIcon();
@@ -389,7 +402,9 @@ const loadExpressionDatabase = function (isTopDataset) {
         queryExpressionDatabase({
             type:"ExpressionData",
             dataset,
-            genes : grnState.workbook.genes.map(x => {return x.name;}).join(","),
+            genes: grnState.workbook.genes
+                    .map(adjustGeneNameForExpression)
+                    .join(","),
             timepoints: timepointsResponse[dataset]
         }).then(function (response) {
             if (isTopDataset) {
@@ -417,13 +432,11 @@ const loadExpressionDatabase = function (isTopDataset) {
 const updateSliderState = slidersLocked => {
     const forceGraphDisabled = grnState.graphLayout === GRID_LAYOUT || slidersLocked;
     if (forceGraphDisabled) {
-        $(`${LOCK_SLIDERS_MENU} span`).removeClass("invisible").addClass("glyphicon-ok");
         $(RESET_SLIDERS_MENU).parent().addClass("disabled");
         $(UNDO_SLIDERS_RESET_MENU).parent().addClass("disabled");
         $(LINK_DIST_CLASS).parent().addClass("disabled");
         $(CHARGE_CLASS).parent().addClass("disabled");
     } else {
-        $(`${LOCK_SLIDERS_MENU} span`).removeClass("glyphicon-ok").addClass("invisible");
         $(RESET_SLIDERS_MENU).parent().removeClass("disabled");
         $(UNDO_SLIDERS_RESET_MENU).parent().removeClass("disabled");
         $(LINK_DIST_CLASS).parent().removeClass("disabled");
@@ -433,6 +446,17 @@ const updateSliderState = slidersLocked => {
     $(LINK_DIST_SLIDER_SIDEBAR).prop("disabled", forceGraphDisabled);
     $(CHARGE_SLIDER_SIDEBAR).prop("disabled", forceGraphDisabled);
     $(RESET_SLIDERS_SIDEBAR).prop("disabled", forceGraphDisabled);
+
+    if (slidersLocked) {
+        $(`${LOCK_SLIDERS_MENU} span`)
+          .removeClass("invisible")
+          .addClass("glyphicon-ok");
+    } else {
+        $(`${LOCK_SLIDERS_MENU} span`)
+          .removeClass("glyphicon-ok")
+          .addClass("invisible");
+    }
+
     $(LOCK_SLIDERS_BUTTON).prop("checked", slidersLocked);
 
     if (!grnState.showUndoReset) {
@@ -488,15 +512,13 @@ const toggleLayout = (on, off) => {
     }
 };
 
-const updatetoForceGraph = () => {
-    $(LOCK_SLIDERS_BUTTON).removeAttr("disabled");
-    toggleLayout(FORCE_GRAPH_MENU, GRID_LAYOUT_MENU);
+export const hasExpressionData = (sheets) => {
+    return Object.keys(sheets).some(property => property.match(ENDS_IN_EXPRESSION_REGEXP));
 };
 
-const updatetoGridLayout = () => {
-    $(LOCK_SLIDERS_BUTTON).attr("disabled", true);
-    toggleLayout(GRID_LAYOUT_MENU, FORCE_GRAPH_MENU);
-};
+const updatetoForceGraph = () => {};
+
+const updatetoGridLayout = () => {};
 
 // Node Coloring Functions
 const showNodeColoringMenus = () => {
@@ -510,8 +532,8 @@ const showNodeColoringMenus = () => {
 const disableNodeColoringMenus = () => {
     $(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_MENU).addClass("disabled");
     $(NODE_COLORING_SIDEBAR_HEADER_LINK).attr("data-toggle", "");
 };
 
@@ -519,18 +541,67 @@ const isNewWorkbook = (name) => {
     return grnState.nodeColoring.lastDataset === null || grnState.nodeColoring.lastDataset !== name;
 };
 
-const shortenExpressionSheetName = (name) => {
-    return (name.length > MAX_NUM_CHARACTERS_DROPDOWN) ?
-      (name.slice(0, MAX_NUM_CHARACTERS_DROPDOWN) + "...") : name;
+// Workbook Mode Functions
+const updateModeViews = () =>{
+    // Select correct dropdown item
+    $(`${NETWORK_MODE_DROPDOWN} option`).removeAttr("selected");
+    $(`${NETWORK_MODE_DROPDOWN} option[value="${grnState.mode}"]`).prop("selected", true);
+    // Select the correct menu items
+    $(`${NETWORK_MODE_CLASS} option`).removeAttr("checked");
+    if (grnState.mode === NETWORK_GRN_MODE) {
+        toggleLayout(NETWORK_MODE_GRN, NETWORK_MODE_PROTEIN_PHYS);
+    } else if (grnState.mode === NETWORK_PPI_MODE) {
+        toggleLayout(NETWORK_MODE_PROTEIN_PHYS, NETWORK_MODE_GRN);
+    }
 };
 
-const hasExpressionData = (sheets) => {
-    for (var property in sheets) {
-        if (property.match(ENDS_IN_EXPRESSION_REGEXP)) {
-            return true;
-        }
+const checkWorkbookModeSettings = () => {
+    const hasExpression = hasExpressionData(grnState.workbook.expression);
+
+    if (grnState.mode === NETWORK_PPI_MODE || !hasExpression) {
+        grnState.nodeColoring.nodeColoringEnabled = false;
+        grnState.nodeColoring.showMenu = true;
+        grnState.colorOptimal = false;
+        showNodeColoringMenus();
+        hideEdgeWeightOptions();
+        updateModeViews();
+    } else if (grnState.mode === NETWORK_GRN_MODE) {
+        grnState.nodeColoring.nodeColoringEnabled = true;
+        grnState.nodeColoring.showMenu = true;
+        grnState.colorOptimal = true;
+        showNodeColoringMenus();
+        showEdgeWeightOptions();
+        updateModeViews();
     }
-    return false;
+};
+
+$("body").on("click", () => {
+    if (grnState.mode === NETWORK_PPI_MODE) {
+        $(EXPORT_TO_UNWEIGHTED_GML_MENU).addClass("disabled");
+    } else if (grnState.mode === NETWORK_GRN_MODE) {
+        $(EXPORT_TO_UNWEIGHTED_GML_MENU).removeClass("disabled");
+    }
+});
+
+$(NETWORK_MODE_DROPDOWN).on("change", () => {
+    grnState.mode = $(NETWORK_MODE_DROPDOWN).val();
+    checkWorkbookModeSettings();
+    refreshApp();
+});
+$(NETWORK_MODE_PROTEIN_PHYS).on("click", () => {
+    grnState.mode = NETWORK_PPI_MODE;
+    checkWorkbookModeSettings();
+    refreshApp();
+});
+$(NETWORK_MODE_GRN).on("click", () => {
+    grnState.mode = NETWORK_GRN_MODE;
+    checkWorkbookModeSettings();
+    refreshApp();
+});
+
+const shortenExpressionSheetName = (name) => {
+    return (name.length > MAX_NUM_CHARACTERS_DROPDOWN) ?
+      (name.slice(0, MAX_NUM_CHARACTERS_DROPDOWN) + "...") : name;
 };
 
 const updateSpeciesMenu = () => {
@@ -628,7 +699,7 @@ const resetDatasetDropdownMenus = (workbook) => {
     var createHTMLforDataset = function (name) {
         return `
             <li class=\"dataset-option node-coloring-menu\" value=\"${name}\">
-              <a>
+              <a data-expression=\"${name}\">
                 <span class=\"glyphicon\"></span>
                 &nbsp;${name}
               </a>
@@ -716,7 +787,7 @@ if (!grnState.genePageData.identified) {
 
 export const updateApp = grnState => {
     if (grnState.newWorkbook) {
-        grnState.nodeColoring.nodeColoringEnabled = true;
+        checkWorkbookModeSettings();
         grnState.normalizationMax = max(grnState.workbook.positiveWeights.concat(grnState.workbook.negativeWeights));
         displayworkbook(grnState.workbook, grnState.name);
         expandLayoutSidebar();
@@ -813,6 +884,12 @@ export const updateApp = grnState => {
         $(NODE_COLORING_TOGGLE_SIDEBAR).prop("checked", true);
         $(LOG_FOLD_CHANGE_MAX_VALUE_CLASS).val(DEFAULT_MAX_LOG_FOLD_CHANGE);
         $(NODE_COLORING_SIDEBAR_BODY).removeClass("hidden");
+        $(NODE_COLORING_MENU).removeClass("hidden");
+        $(NODE_COLORING_NAVBAR_OPTIONS).removeClass("hidden");
+        if (grnState.mode === NETWORK_PPI_MODE) {
+            displayPPINodeColorWarning(grnState.ppiNodeColorWarningDisplayed);
+            grnState.ppiNodeColorWarningDisplayed = true;
+        }
         if (grnState.database.expressionDatasets.includes(grnState.nodeColoring.topDataset) &&
         grnState.workbook.expression[grnState.nodeColoring.topDataset] === undefined) {
             if ($(NODE_COLORING_TOGGLE_SIDEBAR).prop("checked")) {
@@ -840,6 +917,12 @@ export const updateApp = grnState => {
         grnState.nodeColoring.topDataset : "Dahlquist_2018_wt";
         grnState.nodeColoring.bottomDataset = grnState.nodeColoring.bottomDataset ?
         grnState.nodeColoring.bottomDataset : "Dahlquist_2018_wt";
+        $(NODE_COLORING_TOGGLE_SIDEBAR).prop("checked", true);
+        $(`${NODE_COLORING_TOGGLE_MENU} span`).addClass("glyphicon-ok");
+        $(NODE_COLORING_SIDEBAR_BODY).removeClass("hidden");
+        $(NODE_COLORING_MENU).removeClass("hidden");
+        $(NODE_COLORING_NAVBAR_OPTIONS).removeClass("hidden");
+        $(LOG_FOLD_CHANGE_MAX_VALUE_CLASS).val(DEFAULT_MAX_LOG_FOLD_CHANGE);
         $(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");
@@ -866,13 +949,21 @@ export const updateApp = grnState => {
                 //   Investigate why a timeout is required in order for node coloring to take place
                 //   successfully in this case.
                 setTimeout(() => updaters.renderNodeColoring(), 250);
-
+            }
+            if (grnState.mode === NETWORK_PPI_MODE) {
+                displayPPINodeColorWarning(grnState.ppiNodeColorWarningDisplayed);
+                grnState.ppiNodeColorWarningDisplayed = true;
             }
         }
     } else if (grnState.workbook !== null && !grnState.nodeColoring.nodeColoringEnabled) {
         $(NODE_COLORING_SIDEBAR_BODY).addClass("hidden");
+        $(NODE_COLORING_MENU).addClass("disabled");
+        $(NODE_COLORING_NAVBAR_OPTIONS).addClass("hidden");
         $(`${NODE_COLORING_TOGGLE_MENU} span`).removeClass("glyphicon-ok");
         $(NODE_COLORING_TOGGLE_SIDEBAR).prop("checked", false);
+        if (grnState.mode === NETWORK_PPI_MODE) {
+            grnState.ppiNodeColorWarningDisplayed = false;
+        }
     }
 
     if (grnState.workbook !== null &&  grnState.workbook.sheetType === "weighted") {
@@ -943,4 +1034,4 @@ export const updateApp = grnState => {
 };
 
 
-export { stopLoadingIcon, startLoadingIcon};
+export { stopLoadingIcon, startLoadingIcon, adjustGeneNameForExpression};