GRNsight's Embedding and Web Service Approach - dondi/GRNsight GitHub Wiki

On the deployed version of GRNsight, the graph page content (the graph, graph navbar, and graph sidebar) is contained in an html element, known as the client, and is embedded in an iframe element. iframe elements are HTML elements that are used to load another HTML page, essentially displaying another webpage within the parent page. For GRNsight, the parent page contains the navbar, the header, and the footer. When one works on GRNsight locally, GRNsight is not embedded in an iframe element, and the client is the parent html element that is displayed. This means that for functionality like Fit to Window, there is asynchronous communication between the iframe and the parent HTML element to find out the dimensions of the browser window in relation to the iframe dimensions. Asynchronous communication is facilitated by adding an eventListener to the window, like window.addEventListener, and using postMessage to communicate to the iframe. To simulate hosting GRNsight in an iframe element, users can create a “dummy-website” which contains an iframe element with the src attribute as their locally hosted GRNsight, and the HOST_SITE in GRNsight must be changed to the locally hosted GRNsight. An example of that can be found in the sample-deployment folder of the GRNsight-archive.