Skip to content

Commit

Permalink
now nodes don't shrink down to size of one node, but get error in con…
Browse files Browse the repository at this point in the history 
…sole that width of grnstate.dimensions is undefined when run fitContainer
  • Loading branch information
@ceciliazaragoza
ceciliazaragoza committed Jan 15, 2025
1 parent 69ffe7b commit bcbff53
Show file tree
Hide file tree
Showing 4 changed files with 63 additions and 46 deletions.
2 changes: 1 addition & 1 deletion web-client/public/js/constants.js
View file
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
export const HOST_SITE = "http://localhost:8080/";
export const HOST_SITE = "http://localhost:8080";

export const FILE_NAME = "#fileName";

Expand Down
74 changes: 44 additions & 30 deletions web-client/public/js/iframe-coordination.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -26,6 +26,7 @@ const MEDIUM_HEIGHT = 840 + HEIGHT_OFFSET;
const LARGE_HEIGHT = 1080 + HEIGHT_OFFSET;
const FIT_MARGIN = 4; // A little space so that "fit" isn’t totally flush with window bounds.

// ********THIS IS STABLE
const sendDimensions = async (destination, origin) => {

console.log("***************DIMENSIONS SENT******************");
Expand All @@ -48,11 +49,11 @@ const sendDimensions = async (destination, origin) => {
);
};


// const sendDimensions = async (destination, origin) => {
// try {
// console.log("***************DIMENSIONS SENT******************");
// const iframeOffset = $("iframe.embedded-demo").offset();
// console.log("destination", destination, "origin", origin);
// console.log(
// "message posted to iframe: ",
// {
Expand All @@ -63,6 +64,12 @@ const sendDimensions = async (destination, origin) => {
// origin
// );

// const dimensions = {
// width: $(window).width() - iframeOffset.left,
// height: $(window).height() - FIT_MARGIN,
// top: iframeOffset.top
// }

// // Await response from the iframe
// const response = await sendMessageAndWaitForResponse(
// dimensions,
Expand All @@ -73,24 +80,16 @@ const sendDimensions = async (destination, origin) => {
// } catch (error) {
// console.error("Error sending dimensions: ", error);
// }

// // destination.postMessage(
// // {
// // width: $(window).width() - iframeOffset.left,
// // height: $(window).height() - FIT_MARGIN,
// // top: iframeOffset.top
// // },

// // origin
// // );
// };

// const sendMessageAndWaitForResponse = async (message, targetOrigin, targetWindow) => {
// const sendMessageAndWaitForResponse = async (dimensions, targetOrigin, targetWindow) => {
// return new Promise((resolve, reject) => {
// // Set up the message event listener
// function handleMessage(event) {
// console.log("HANDLEMESSAGE IS RUNNING");
// if (event.origin !== targetOrigin) return; // Ignore messages from unexpected origins

// console.log("EVENT.DATA ===", event.data, "EVENT", event)
// if (event.data.type === "dimensionsResponse") {
// window.removeEventListener("message", handleMessage); // Clean up the listener
// resolve(event.data); // Resolve with the response data
Expand All @@ -100,7 +99,7 @@ const sendDimensions = async (destination, origin) => {
// window.addEventListener("message", handleMessage);

// // Send the message
// targetWindow.postMessage(message, targetOrigin);
// targetWindow.postMessage(dimensions, targetOrigin);

// // Add a timeout to reject if no response is received
// setTimeout(() => {
Expand All @@ -110,20 +109,6 @@ const sendDimensions = async (destination, origin) => {
// });
// };

window.addEventListener("message", async event => {
console.log("event.origin: ", event.origin, "event.data", event.data);
// if (event.origin.indexOf("http://localhost:8080/") !== 0) {
// // Ignore any message that did not originate from the GRNsight web client server.
// console.log("we do not send message from iframe-coordination");
// return;
// }

if (event.data === "dimensions") {
console.log("***************DIMENSIONS SENT******************")
sendDimensions(event.source, event.origin);
}
});

// window.addEventListener("message", async (event) => {
// console.log("event.origin: ", event.origin, "event.data", event.data);
// // if (event.origin.indexOf("http://localhost:8080/") !== 0) {
Expand All @@ -138,6 +123,35 @@ window.addEventListener("message", async event => {
// }
// });

window.addEventListener("resize", () => sendDimensions(
document.querySelector("iframe.embedded-demo").contentWindow, "http://localhost:5001/"
));


// ***************** THIS IS STABLE
window.addEventListener("message", event => {
console.log(
"event.origin: ",
event.origin,
"event.data",
event.data,
"event.origin.indexOf localhost 8080",
event.origin.indexOf("http://localhost:8080/"),
"event.origin.indexOf localhost 5001",
event.origin.indexOf("http://localhost:5001/")
);
if (event.origin != "http://localhost:8080" && event.origin != "http://localhost:5001") {
// Ignore any message that did not originate from the GRNsight web client server.
console.log("we do not send message from iframe-coordination");
return;
}

if (event.data === "dimensions") {
console.log("***************DIMENSIONS SENT******************")
sendDimensions(event.source, event.origin);
}
});

window.addEventListener("resize", () =>
sendDimensions(
document.querySelector("iframe.embedded-demo").contentWindow,
"http://localhost:5001/"
)
);
10 changes: 5 additions & 5 deletions web-client/public/js/setup-handlers.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -581,11 +581,11 @@ export const setupHandlers = grnState => {
} else {
window.addEventListener("message", event => {
console.log("EVENT.ORIGIN IN SETUP HANDLERS", event.origin)
// if (event.origin.indexOf("http://localhost:5001") !== 0) {
// console.log("WE TRY TO SET UP HOST SITE WITH LISTENER", HOST_SITE, )
// return;
// }
// console.log("WE SUCCESSFULLY PROCEED WITH SET UP OF HOST SITE INSTEAD OF RETURNING")
if (event.origin != HOST_SITE) {
console.log("WE TRY TO SET UP HOST SITE WITH LISTENER", HOST_SITE)
return;
}
console.log("WE SUCCESSFULLY PROCEED WITH SET UP OF HOST SITE INSTEAD OF RETURNING")

// Also filter out all but dimensions messages.
const { data } = event;
Expand Down
23 changes: 13 additions & 10 deletions web-client/public/js/update-app.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -287,7 +287,6 @@ const synchronizeViewportSizeLarge = () => {
};

const synchronizeViewportSizeFit = () => {
console.log("synchronizeViewportSizeFit called");
$(VIEWPORT_SIZE_S_DROPDOWN + " span").removeClass("glyphicon-ok");
$(VIEWPORT_SIZE_M_DROPDOWN + " span").removeClass("glyphicon-ok");
$(VIEWPORT_SIZE_L_DROPDOWN + " span").removeClass("glyphicon-ok");
Expand Down Expand Up @@ -340,17 +339,17 @@ const updateViewportSize = (currentValue) => {
if (window === window.top) {
fitContainerToWindow();
} else {
console.log("dimensions requested")
console.log("dimensions request posted FROM IFRAME to HOST_SITE")
window.top.postMessage("dimensions", HOST_SITE);
console.log("dimensions request complete")
console.log("try printing grnState.dimensions after posting to iframe", grnState.dimensions)
}
};

let grnsightContainerClass = `grnsight-container ${currentValue}`;
if (!container.hasClass(currentValue)) {
container.attr("class", grnsightContainerClass);
if (currentValue === VIEWPORT_FIT) {
console.log("Requesting window dimensions");
console.log("***************Requesting window dimensions in check for current value*******************");
requestWindowDimensions();
} else {
container.css({ width: "", height: "" });
Expand All @@ -367,15 +366,19 @@ const updateViewportSize = (currentValue) => {
} else if (currentValue === VIEWPORT_FIT) {
console.log("updating viewport size in update-app.js");
// fitContainer is called before the dimensions are set
synchronizeViewportSizeSmall();
if (grnState.dimensions) {
console.log("dimensions are set", grnState.dimensions);
fitContainer(grnState.dimensions);
synchronizeViewportSizeFit();
}
// NEED TO WAIT FOR GRNSTATE.DIMENSIONS HERE because this continues running fitContainer without dimensions
// if (grnState.dimensions) {
console.log("dimensions are set", grnState.dimensions);
// console.log("REQUESTED DIMENSIONS NOW ")
// fit container will NOT work. this functionality needs to be done somewhere else
fitContainer(grnState.dimensions);
synchronizeViewportSizeFit();
// }
} else if (currentValue === VIEWPORT_INIT) {
// First time around: initialize.
console.log("REQUESTING DIMENSIONS INIT")
requestWindowDimensions();
console.log("FINISH REQUESTING DIMENSIONS")
}

console.log("UPDATE VIEWPORT SIZE FINISHED BUT MOVE ON TO RELOADING ALL NODES AND PATHS ON GRAPH, AND THEY ARE NOT SURE WHAT SIZE THEY ARE SUPPOSED TO FIT")
Expand Down

0 comments on commit bcbff53

Please sign in to comment.