grnsight 6.0.4 → 7.1.1

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

@@ -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) {
@@ -389,7 +394,7 @@ const loadExpressionDatabase = function (isTopDataset) {
         queryExpressionDatabase({
             type:"ExpressionData",
             dataset,
-            genes : grnState.workbook.genes.map(x => {return x.name;}).join(","),
+            genes : grnState.workbook.genes.map(gene => {return gene.name;}).join(","),
             timepoints: timepointsResponse[dataset]
         }).then(function (response) {
             if (isTopDataset) {
@@ -417,13 +422,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 +436,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 +502,9 @@ const toggleLayout = (on, off) => {
     }
 };
 
-const updatetoForceGraph = () => {
-    $(LOCK_SLIDERS_BUTTON).removeAttr("disabled");
-    toggleLayout(FORCE_GRAPH_MENU, GRID_LAYOUT_MENU);
-};
+const updatetoForceGraph = () => {};
 
-const updatetoGridLayout = () => {
-    $(LOCK_SLIDERS_BUTTON).attr("disabled", true);
-    toggleLayout(GRID_LAYOUT_MENU, FORCE_GRAPH_MENU);
-};
+const updatetoGridLayout = () => {};
 
 // Node Coloring Functions
 const showNodeColoringMenus = () => {
@@ -510,8 +518,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,6 +527,61 @@ const isNewWorkbook = (name) => {
     return grnState.nodeColoring.lastDataset === null || grnState.nodeColoring.lastDataset !== 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 checkWorkbookModeSettings = () => {
+    if (grnState.mode === NETWORK_PPI_MODE) {
+        grnState.nodeColoring.nodeColoringEnabled = false;
+        grnState.colorOptimal = false;
+        disableNodeColoringMenus();
+        hideEdgeWeightOptions();
+        updateModeViews();
+    } else if (grnState.mode === NETWORK_GRN_MODE) {
+        grnState.nodeColoring.nodeColoringEnabled = true;
+        grnState.colorOptimal = true;
+        showNodeColoringMenus();
+        showEdgeWeightOptions();
+        updateModeViews();
+    }
+};
+
+$("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;
@@ -628,7 +691,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 +779,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 +876,8 @@ 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.database.expressionDatasets.includes(grnState.nodeColoring.topDataset) &&
         grnState.workbook.expression[grnState.nodeColoring.topDataset] === undefined) {
             if ($(NODE_COLORING_TOGGLE_SIDEBAR).prop("checked")) {
@@ -871,6 +936,8 @@ export const updateApp = grnState => {
         }
     } 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);
     }