From ac88f29cde2ff88b039e81e9b8fdecff51a802ae Mon Sep 17 00:00:00 2001 From: ceciliazaragoza Date: Sat, 26 Oct 2024 19:13:42 -0700 Subject: [PATCH] #1080. fixing lint errors and can enable and disable nav and sidebar correctly for node coloring. investigating why when load a database, it says it's NETWORK_PPI_MODE and even though node coloring enabled, node coloring doesn't display on node until change dataset and len of timepoints array is 0, so not querying expression database correctly --- web-client/public/js/graph.js | 8 +--- web-client/public/js/setup-handlers.js | 4 -- web-client/public/js/update-app.js | 53 ++++++++++++++++++-------- web-client/public/js/warnings.js | 15 +++----- 4 files changed, 45 insertions(+), 35 deletions(-) diff --git a/web-client/public/js/graph.js b/web-client/public/js/graph.js index 39a3574d..ce22c556 100644 --- a/web-client/public/js/graph.js +++ b/web-client/public/js/graph.js @@ -54,7 +54,6 @@ export var drawGraph = function (workbook) { /* eslint-enable no-unused-vars */ var $container = $(".grnsight-container"); var CURSOR_CLASSES = "cursorGrab cursorGrabbing"; - console.log("draw graph again") d3.selectAll("svg").remove(); $container.removeClass(CURSOR_CLASSES).addClass("cursorGrab"); // allow graph dragging right away @@ -245,7 +244,6 @@ export var drawGraph = function (workbook) { d3.select("svg").on("dblclick.zoom", null); // disables double click zooming // this controls the D-pad - console.log("scroll button") d3.selectAll(".scrollBtn").on("click", null); // Remove event handlers, if there were any. var arrowMovement = [ "Up", "Left", "Right", "Down" ]; arrowMovement.forEach(function (direction) { @@ -313,8 +311,7 @@ export var drawGraph = function (workbook) { ) ) { zoomDisplay = grnState.zoomValue; - } - else { + } else { grnState.zoomValue = prevGrnstateZoomVal; zoomDisplay = grnState.zoomValue; } @@ -467,7 +464,6 @@ export var drawGraph = function (workbook) { restrictGraphToViewport(fixed); }); - console.log("viewport change") d3.selectAll("input[name=viewport]").on("change", function () { var fixed = $(this).prop("checked"); restrictGraphToViewport(fixed); @@ -1122,7 +1118,7 @@ export var drawGraph = function (workbook) { .style("fill", function (d) { d = d || 0; // missing values are changed to 0 if (d === 0) { - return "white" + return "white"; } var scale = d3.scaleLinear() .domain([-logFoldChangeMaxValue, logFoldChangeMaxValue]) diff --git a/web-client/public/js/setup-handlers.js b/web-client/public/js/setup-handlers.js index 21620549..c8bec3f7 100644 --- a/web-client/public/js/setup-handlers.js +++ b/web-client/public/js/setup-handlers.js @@ -227,12 +227,9 @@ export const setupHandlers = grnState => { // Node Coloring const updateTopDatasetSelection = (selection) => { grnState.nodeColoring.topDataset = selection; - console.log("new dataset selection", selection); if (grnState.nodeColoring.bottomDataSameAsTop) { - console.log("bottom dataset same as top") grnState.nodeColoring.bottomDataset = selection; } - console.log("update app called") updateApp(grnState); }; @@ -255,7 +252,6 @@ export const setupHandlers = grnState => { $(TOP_DATASET_SELECTION_SIDEBAR).change(() => { const selection = $(TOP_DATASET_SELECTION_SIDEBAR).find(":selected").attr("value"); - console.log("update Top Dataset Selection"); updateTopDatasetSelection(selection); }); diff --git a/web-client/public/js/update-app.js b/web-client/public/js/update-app.js index ec96570d..30a1b803 100644 --- a/web-client/public/js/update-app.js +++ b/web-client/public/js/update-app.js @@ -127,12 +127,9 @@ queryExpressionDatabase({type:"ExpressionDatasets"}).then(function (response) { }); const refreshApp = () => { - console.log("refreshApp"); if (uploadState && uploadState.currentWorkbook) { - console.log("uploadState and uploadState.currentWorkbook not null"); drawGraph(uploadState.currentWorkbook); } - console.log('finish refresh app') }; const displayworkbook = (workbook, name) => { @@ -381,6 +378,7 @@ const stopLoadingIcon = function () { $(EXPRESSION_DB_LOADER_TEXT).css("display", "none"); }; const enableNodeColoringUI = function () { + console.log("node coloring UI enabled") grnState.nodeColoring.nodeColoringEnabled = true; $(LOG_FOLD_CHANGE_MAX_VALUE_CLASS).removeClass("hidden"); $(LOG_FOLD_CHANGE_MAX_VALUE_SIDEBAR_BUTTON).removeClass("hidden"); @@ -394,6 +392,14 @@ const loadExpressionDatabase = function (isTopDataset) { type: "ExpressionTimePoints", dataset }).then(function (timepointsResponse) { + console.log( + "genes", + grnState.workbook.genes + .map((gene) => { + return gene.name; + }) + .join(",") + ); queryExpressionDatabase({ type:"ExpressionData", dataset, @@ -401,13 +407,16 @@ const loadExpressionDatabase = function (isTopDataset) { timepoints: timepointsResponse[dataset] }).then(function (response) { if (isTopDataset) { + console.log("query expresison database response", response); grnState.workbook.expression[grnState.nodeColoring.topDataset] = response; } else { grnState.workbook.expression[grnState.nodeColoring.bottomDataset] = response; } + console.log("try to update top dataset") enableNodeColoringUI(); stopLoadingIcon(); updaters.renderNodeColoring(); + console.log("render node coloring") }).catch(function (error) { console.log(error.stack); console.log(error.name); @@ -518,13 +527,13 @@ const showNodeColoringMenus = () => { $(NODE_COLORING_SIDEBAR_HEADER_LINK).attr("data-toggle", "collapse"); }; -const disableNodeColoringMenus = () => { - $(NODE_COLORING_SIDEBAR_PANEL).addClass("disabled"); - $(NODE_COLORING_SIDEBAR_PANEL).removeClass("in"); - $(NODE_COLORING_MENU_CLASS).addClass("disabled"); - $(NODE_COLORING_MENU).addClass("disabled"); - $(NODE_COLORING_SIDEBAR_HEADER_LINK).attr("data-toggle", ""); -}; +// const disableNodeColoringMenus = () => { +// $(NODE_COLORING_SIDEBAR_PANEL).addClass("disabled"); +// $(NODE_COLORING_SIDEBAR_PANEL).removeClass("in"); +// $(NODE_COLORING_MENU_CLASS).addClass("disabled"); +// $(NODE_COLORING_MENU).addClass("disabled"); +// $(NODE_COLORING_SIDEBAR_HEADER_LINK).attr("data-toggle", ""); +// }; const isNewWorkbook = (name) => { return grnState.nodeColoring.lastDataset === null || grnState.nodeColoring.lastDataset !== name; @@ -546,16 +555,16 @@ const updateModeViews = () =>{ }; const checkWorkbookModeSettings = () => { + showNodeColoringMenus(); + 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(); } @@ -828,7 +837,6 @@ export const updateApp = grnState => { // 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; - console.log("finished update app") } synchronizeNormalizationValues(grnState.normalizationMax); @@ -874,6 +882,7 @@ export const updateApp = grnState => { if (grnState.workbook !== null && grnState.nodeColoring.nodeColoringEnabled && hasExpressionData(grnState.workbook.expression)) { grnState.nodeColoring.showMenu = true; + console.log("enable node coloring but with expression data") $(AVG_REPLICATE_VALS_TOP_SIDEBAR).prop("checked", true); $(AVG_REPLICATE_VALS_BOTTOM_SIDEBAR).prop("checked", true); $(`${NODE_COLORING_TOGGLE_MENU} span`).addClass("glyphicon-ok"); @@ -901,24 +910,37 @@ export const updateApp = grnState => { if ((grnState.workbook.expression[grnState.nodeColoring.topDataset] === undefined) || (!grnState.nodeColoring.bottomDataSameAsTop && grnState.workbook.expression[grnState.nodeColoring.bottomDataset] === undefined)) { + console.log("remove node coloring and reset data dropdowns") updaters.removeNodeColoring(); resetDatasetDropdownMenus(grnState.workbook); } + console.log("enable node coloring no expression data") grnState.nodeColoring.showMenu = true; grnState.nodeColoring.topDataset = grnState.nodeColoring.topDataset ? grnState.nodeColoring.topDataset : "Dahlquist_2018_wt"; grnState.nodeColoring.bottomDataset = grnState.nodeColoring.bottomDataset ? grnState.nodeColoring.bottomDataset : "Dahlquist_2018_wt"; + if (grnState.mode = NETWORK_PPI_MODE) { + console.log("network ppi mode") + $(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"); + } $(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) { + console.log('load expression database 1') loadExpressionDatabase(true); } else if (!grnState.nodeColoring.bottomDataSameAsTop && grnState.workbook.expression[grnState.nodeColoring.bottomDataset] === undefined) { + console.log("load expression database 2") loadExpressionDatabase(false); } else { + console.log("else statement called") 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), @@ -935,12 +957,13 @@ 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); + console.log("set timeout") } } } else if (grnState.workbook !== null && !grnState.nodeColoring.nodeColoringEnabled) { + console.log("disable node coloring") $(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); @@ -982,8 +1005,6 @@ export const updateApp = grnState => { if (grnState.nodeColoring.showMenu) { showNodeColoringMenus(); - } else { - disableNodeColoringMenus(); } updateLogFoldChangeMaxValue(); diff --git a/web-client/public/js/warnings.js b/web-client/public/js/warnings.js index 91c7ed37..b229603b 100644 --- a/web-client/public/js/warnings.js +++ b/web-client/public/js/warnings.js @@ -43,7 +43,6 @@ export var displayWarnings = function (warnings) { index++; } - var screenHeight = $(window).height(); var MIN_SCREEN_HEIGHT = 600; var BORDER = 425; @@ -58,17 +57,15 @@ export var displayWarnings = function (warnings) { $("#warningsModal").modal("show"); }; -export var displayPPINodeColorWarning = function(warningDisplayed) { +export var displayPPINodeColorWarning = function (warningDisplayed) { if (warningDisplayed) { - return + return; } $("#warningIntro").html("Protein-protein interaction node coloring warning."); $("#warningsList").html( - [ - "You are displaying mRNA-level expression data on a protein-protein interaction network.", - "Please note that this may not be the most appropriate representation of the data." - ].join(" ") + ["You are displaying mRNA-level expression data on a protein-protein interaction network.", + "Please note that this may not be the most appropriate representation of the data."].join(" ") ); var screenHeight = $(window).height(); @@ -77,9 +74,9 @@ export var displayPPINodeColorWarning = function(warningDisplayed) { var setPanel = screenHeight - BORDER + "px"; var minPanel = MIN_SCREEN_HEIGHT - BORDER + "px"; if (screenHeight > MIN_SCREEN_HEIGHT) { - $("#list-frame").css({ height: setPanel }); + $("#list-frame").css({ height: setPanel }); } else { - $("#list-frame").css({ height: minPanel }); + $("#list-frame").css({ height: minPanel }); } $("#warningsModal").modal("show");