Skip to content

Commit

Permalink
#1080. fixing lint errors and can enable and disable nav and sidebar …
Browse files Browse the repository at this point in the history 
…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
  • Loading branch information
@ceciliazaragoza
ceciliazaragoza committed Oct 27, 2024
1 parent 793dea1 commit ac88f29
Show file tree
Hide file tree
Showing 4 changed files with 45 additions and 35 deletions.
8 changes: 2 additions & 6 deletions web-client/public/js/graph.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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
Expand Down Expand Up @@ -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) {
Expand Down Expand Up @@ -313,8 +311,7 @@ export var drawGraph = function (workbook) {
)
) {
zoomDisplay = grnState.zoomValue;
}
else {
} else {
grnState.zoomValue = prevGrnstateZoomVal;
zoomDisplay = grnState.zoomValue;
}
Expand Down Expand Up @@ -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);
Expand Down Expand Up @@ -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])
Expand Down
4 changes: 0 additions & 4 deletions web-client/public/js/setup-handlers.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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);
};

Expand All @@ -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);
});

Expand Down
53 changes: 37 additions & 16 deletions web-client/public/js/update-app.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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) => {
Expand Down Expand Up @@ -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");
Expand All @@ -394,20 +392,31 @@ 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,
genes : grnState.workbook.genes.map(gene => {return gene.name;}).join(","),
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);
Expand Down Expand Up @@ -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;
Expand All @@ -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();
}
Expand Down Expand Up @@ -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);
Expand Down Expand Up @@ -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");
Expand Down Expand Up @@ -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),
Expand All @@ -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);
Expand Down Expand Up @@ -982,8 +1005,6 @@ export const updateApp = grnState => {

if (grnState.nodeColoring.showMenu) {
showNodeColoringMenus();
} else {
disableNodeColoringMenus();
}

updateLogFoldChangeMaxValue();
Expand Down
15 changes: 6 additions & 9 deletions web-client/public/js/warnings.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -43,7 +43,6 @@ export var displayWarnings = function (warnings) {
index++;
}


var screenHeight = $(window).height();
var MIN_SCREEN_HEIGHT = 600;
var BORDER = 425;
Expand All @@ -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();
Expand All @@ -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");
Expand Down

0 comments on commit ac88f29

Please sign in to comment.