Skip to content

Commit

Permalink
#1080. Can now enable and disable node coloring with PPIs where navba…
Browse files Browse the repository at this point in the history 
…r and side menu display the same status of node coloring and when node coloring disabled, the navbar and sidebar options for node coloring are hidden
  • Loading branch information
@ceciliazaragoza
ceciliazaragoza committed Oct 30, 2024
1 parent 533b879 commit 77189f3
Show file tree
Hide file tree
Showing 2 changed files with 46 additions and 55 deletions.
40 changes: 20 additions & 20 deletions web-client/public/js/graph.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -1529,18 +1529,18 @@ export var drawGraph = function (workbook) {
var selfReferringEdgeWidth = (selfReferringEdge ? getSelfReferringRadius(selfReferringEdge) +
selfReferringEdge.strokeWidth + 2 : 0);
var rightBoundary = width - (d.textWidth + OFFSET_VALUE) - BOUNDARY_MARGIN - selfReferringEdgeWidth;
// if (!adaptive) {
// rightBoundary =
// -xTranslation / graphZoom +
// BOUNDARY_MARGIN / 2 +
// width / graphZoom -
// BOUNDARY_MARGIN -
// (d.textWidth + OFFSET_VALUE) -
// selfReferringEdgeWidth;
// }
if (!adaptive) {
rightBoundary =
-xTranslation / graphZoom +
BOUNDARY_MARGIN / 2 +
width / graphZoom -
BOUNDARY_MARGIN -
(d.textWidth + OFFSET_VALUE) -
selfReferringEdgeWidth;
}
// currentXPos bounds the graph when toggle to !adaptive and moves each of the nodes to be in bounds
var currentXPos = Math.max(getLeftXBoundaryMargin(), Math.min(rightBoundary, d.x));
if (width < MAX_WIDTH &&
if (adaptive && width < MAX_WIDTH &&
(currentXPos === getLeftXBoundaryMargin() ||
currentXPos === rightBoundary)
) {
Expand All @@ -1567,19 +1567,19 @@ export var drawGraph = function (workbook) {
var selfReferringEdgeHeight = (selfReferringEdge ? getSelfReferringRadius(selfReferringEdge) +
selfReferringEdge.strokeWidth + SELF_REFERRING_Y_OFFSET + 0.5 : 0);
var bottomBoundary = height - nodeHeight - BOUNDARY_MARGIN - selfReferringEdgeHeight;
// if (!adaptive) {
// bottomBoundary =
// -yTranslation / graphZoom +
// BOUNDARY_MARGIN / 2 +
// height / graphZoom -
// BOUNDARY_MARGIN -
// nodeHeight -
// selfReferringEdgeHeight;
// }
if (!adaptive) {
bottomBoundary =
-yTranslation / graphZoom +
BOUNDARY_MARGIN / 2 +
height / graphZoom -
BOUNDARY_MARGIN -
nodeHeight -
selfReferringEdgeHeight;
}
// currentYPos bounds the graph when toggle to !adaptive and moves each of the nodes to be in bounds
var currentYPos = Math.max(getTopYBoundaryMargin(), Math.min(bottomBoundary, d.y));

if (height < MAX_HEIGHT &&
if (adaptive && height < MAX_HEIGHT &&
(currentYPos === getTopYBoundaryMargin() || currentYPos === bottomBoundary)) {
if (!d3.select(this).classed("fixed")) {
height += OFFSET_VALUE;
Expand Down
61 changes: 26 additions & 35 deletions web-client/public/js/update-app.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -378,7 +378,6 @@ 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 @@ -392,31 +391,20 @@ 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 @@ -520,14 +508,19 @@ const updatetoGridLayout = () => {};

// Node Coloring Functions
const showNodeColoringMenus = () => {
$(NODE_COLORING_SIDEBAR_BODY).removeClass("hidden");
$(NODE_COLORING_SIDEBAR_PANEL).removeClass("disabled");
// $(NODE_COLORING_SIDEBAR_PANEL).addClass("in");
$(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");
$(NODE_COLORING_MENU).removeClass("hidden");
$(NODE_COLORING_NAVBAR_OPTIONS).removeClass("hidden");
};

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) => {
Expand All @@ -549,16 +542,18 @@ const updateModeViews = () =>{
};

const checkWorkbookModeSettings = () => {
showNodeColoringMenus();

if (grnState.mode === NETWORK_PPI_MODE) {
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();
}
Expand Down Expand Up @@ -876,7 +871,6 @@ 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 All @@ -885,6 +879,10 @@ export const updateApp = grnState => {
$(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")) {
Expand All @@ -904,7 +902,6 @@ 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);
}
Expand All @@ -913,27 +910,22 @@ export const updateApp = grnState => {
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");
}
$(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");
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 @@ -950,18 +942,15 @@ 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")

}

if (grnState.mode === NETWORK_PPI_MODE) {
displayPPINodeColorWarning(grnState.ppiNodeColorWarningDisplayed);
grnState.ppiNodeColorWarningDisplayed = true;
}
}
} 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 @@ -1006,6 +995,8 @@ export const updateApp = grnState => {

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

updateLogFoldChangeMaxValue();
Expand Down

0 comments on commit 77189f3

Please sign in to comment.