Interactions View Issues (QoL, UI, Architecture)

[VinLau]

Story: Yonah has been working on the interactions view (branch). I have reviewed his code and its functionality live. Herein I describe some issues and architectural overhauls needed. Particularly, these can get fixed after our routing PR gets merged since some functionality overlaps (such as loading genes and other views). @bdls-jamal, please note these for your summer project; we will talk more in detail ourselves

Issue 1:

Tooltips repeatedly call API (bar.utoronto.ca/eplant/cgi-bin/querygene.cgi) to loads its data for its tooltip content. Leading to many calls if a user hovers over the same nodes. NB: this isn't the case in the old ePlant. We cache the data.

To reproduce:

• Load interactions view branch
• Go to interactions view
• Load network tab
• Look at nodes' tooltip
• See all the same API calls be called

Technical note: API calls happens in handleNodeHover of 'ePlant/Eplant/views/InteractionsViewer/scripts/eventHandlers.ts'.
Solution: Add a cache where we add this data to the node directly when it is unpopulated, and check first if it exists.

Issue 2:

Query gene is not isolated or centred independently of the other nodes, particularly when there are DNA and protein nodes unlike ePlant2.

To reproduce:

• Load interactions view like above, see below:

Fix:
Add " cy.$('node[id $= "QUERY_NODE"]').position({x: -30, y: 20})" (or perhaps use the bounds of the cytoscape coordinate for better adjustments) to setLayout

See:

Issue 3:

Load gene in tooltip does not load any genes.

To reproduce:

• Load interactions view branch
• Go to interactions view
• Look at nodes' tooltip
• Try to load genes

NB: I think we should await until the routing PR is finished before fixing this as it'll use different helper functions.

Issue 4:

Tooltip CSS is not ideal. For example, there is no delay leading to annoying flashing of tooltips once one hovers. I tried adjusting the delay factor in the tippyFactory function (createTooltip in "ePlant/Eplant/views/InteractionsViewer/index.tsx") but no avail. I think Yonah used some custom styling which overrides tippy's functionality. We may need a complete tooltip overhaul.

To reproduce:

• Load interactions view branch
• Go to interactions view
• Look at nodes' tooltip and move the mouse around the node