provide for multiple canvases

[touretzkyds]

Find a way to display multiple canvases so we can have several graph views present at once. Ideally we should be able to drag these canvases around and put a close box in the corner to dismiss them.

[deyaliao]

I’ve been working on a test in a new file called demo2e.html, which I've pushed to the github. I haven’t inputted the actual ranks (I’m planning to update the ontology file first so we can write an updated query to get as much information as we want), but I’ve played around with opening a new canvas when the property rank is clicked. As of right now, demo2e.html opens another nested cytoscape container when the rank is clicked, which contains a button to easily close this container when necessary. However, since this container is nested within the larger container, it does take up some of the “height” of the original container, rendering the graph unscrollable past the nested container (see image below). I’m still doing research to see if this is fixable, but I am a bit stuck.

To fix this problem, I could resize the original container (put it to the page’s right side) and put this new container on the left side, but the containers wouldn’t overlap––and this seems to be a more manual solution that might be a problem if we were to open multiple canvases.

I was doing some research, and I came across this. If you click on the pink boxes, there is a button in the left corner to collapse and expand this box; it almost seems like a sectioned off mini canvas. I wanted to know your thoughts.

[touretzkyds]

This pink box demo seems like a promising solution. Let's pursue this and see how it works out.

[deyaliao]

I was planning my algorithm for making the pink box demo work, and I was also looking into the Cola.js link you sent in the other issue. I was wondering if you wanted to pursue both implementations? They're quite similar but still slightly different.

[touretzkyds]

I didn't think of them as alternatives. cola.js just lays out nodes based on constraints. The pink boxes are something else. Depending on how you implement things, maybe:

• You make a pink box according to your own algorithm and then tell cola.js to do the layout inside the box
• You have cola.js lay out the nodes and then you make a pink box that contains them
• You use cola.js to determine the size and position of the pink boxes in addition to laying out the nodes

I'm not sure which of these alternatives is the right choice, or will even work. I'll leave that to you to determine.

[deyaliao]

I pushed a file called demo2e.html; just a warning, it's still extremely janky. Only "Animalia" slightly works right now (some elements are hard-coded for now). Clicking the rank will open up a new box (although extremely zoomed out, I'm not sure why still, but follow the red circle and you'll find the nodes). The ranks within the box aren't rendered correctly, but I did retrieve all the nodes from a query. It also doesn't close properly yet, but I'll work on that.

[touretzkyds]

It's crashing on load, due to an undefined function:

Uncaught (in promise) TypeError: cy.expandCollapse is not a function
    at display_hierarchy (demo2e.html:2794:12)
    at demo2e.html:2656:9
display_hierarchy @ demo2e.html:2794
(anonymous) @ demo2e.html:2656
Promise.then (async)
exec @ demo2e.html:2655
(anonymous) @ demo2e.html:3541

[touretzkyds]

It's crashing ebcause cytoscape-expand-collapse.js and cytoscape-fcose.js are missing.

[touretzkyds]

Thanks for uploading the missing files. I got the demo to work for "Animal". This looks promising.