-1

I have an article in the middle column, and on the sides two graphs generated with cytoscape of "ancestors" and "descendants".

I'd like to show an "edges" from the articles in the last generation of "ancestors" to the article in the middle, that is to the border of the cytoscape graph.

This is how it looks right now:

This is how it looks right now:

This is how it should look:

This is how it should look:

troricleba
  • 151
  • 1
  • 3
  • 12
  • 1
    I didn't understand what are you trying to do. Can you provide code snippet that represents what you have done so far? At least a screenshot would be helpful. – user3140972 Nov 26 '18 at 21:31
  • The cytoscape canvas is just that, a canvas. You don't know anything about the outside in cytoscape, so you are probably bound to using cytoscape without this middle column. (I will add a possible alternative as an answer, so take a look) – Stephan T. Nov 27 '18 at 05:14
  • @StephaT. it doesn't have to know anything about the outside, just draw a straight line from all the nodes in the last generation to the right border. – troricleba Nov 27 '18 at 13:10
  • The border is just a box that you see, the cytoscape graph is much larger than that, the viewport will not be sufficient, and you can't draw an edge to the border, you need two nodes to create an edge... – Stephan T. Nov 29 '18 at 05:18
  • Please clarify what you want with a [Minimal, Complete, and Verifiable](https://stackoverflow.com/help/mcve) example of your current efforts and possibly an image with your concept. Otherwise we can't tell if your goal is achievable or not. Thanks – Stephan T. Nov 29 '18 at 05:38
  • @user3140972 See my edited question for pictures of how it looks right now and how it should look. – troricleba Nov 29 '18 at 19:05
  • @StephanT. See my edited question for pictures of how it looks right now and how it should look. – troricleba Nov 29 '18 at 19:05

2 Answers2

2

I'm not sure if it is a good idea to add another HTML content on top of Cytoscape.js div. I also don't know if you have one or two Cytoscape.js instances (one for each graph).

In any case, you have the following options: add a dummy node and make its style transparent so that it is not visible. Then place it on the side of the article and add an edge from order-by-length to this dummy node. You can lock this node and make it un-grabbable so that users won't be able to interact with it.

One main problem with this approach is that, some layouts do not respect lock state, so the dummy nodes will move around on layout. But you can bring them back when layout stops.

Another option is to add another canvas on top of Cytoscape.js canvas, and draw the edges yourself.

user3140972
  • 995
  • 6
  • 11
  • Good points, but how do you plan on different screen sizes? Wouldn't this be a pain in the ass to handle any size changes and user interactions? especially with the article div in the middle – Stephan T. Dec 03 '18 at 06:07
  • How do Cytoscape.js extensions that use extra canvas handle resize? You will need to listen for window resize event, and update the dimensions of your canvas according to the Cytoscape.js container. – user3140972 Dec 03 '18 at 21:38
0

Cytoscape gives us some amazing tools, but it shouldn't be used together with html elements to display a hierarchy.

A solution to this? The main approach to this should be a single/multiple instance dagre graph with the images-layout and some form of qTip HTML:

Layout with images

Dagre layout

Multiple instances

qTip with HTML/Ajax

//instead of qTip you can also use popper.js with tippy

With these tools, you should try to build the graph step by step :

  • get all extensions to run
  • build a dagre graph with your data (layout: root is article, top tree are ancestors, bottom tree are children)
  • add the images to your graph
  • add a qTip to your root
Community
  • 1
  • 1
Stephan T.
  • 5,843
  • 3
  • 20
  • 42
  • I tried this, but the problem I have here is that cytoscape captures hover and click events, so that links, fields and buttons in the article don't work. – troricleba Dec 04 '18 at 14:24