Description
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