Ideas for future work

[jonnyelliot]

• More edge styling options (Bezier). CytoscapeRender renders edges as "Haystack" edges, a simple line from one node to another. Cytoscape supports more complex edges such as Bezier curves. They don't work (an internal error is thrown) possibly due to incompatibility between cytoscape js/react-cytoscape. Edge labels are supported but could do with styling.
• Hover tooltips. Though Cytoscape does not appear to support them, likely because they aren't mobile friendly. Same for double click listeners.
• Node & Edge dialogs. Nodes and edges can be selected but other than highlighting them no other behaviour is built in out the box.
  • We could add a option to display a dialog (either commitd/components dialog or a cytoscape Overlay) on click
  • Nodes and edges have attributes but they are not displayed anywhere. There is not currently a notion of attribute renderers/parsers. Attribute values are just arbitrary javascript values.
• Selection modes. Multi select / bounding box selection is supported by the CytoscapeRenderer. We could add controls/keyboard shortcuts for e.g.:
  • Select All
  • Select nodes/edges between
  • Select just nodes or just edges
• Adding nodes and edges to the graph. This is supported by the model and the renderer, there just isn't a react component that triggers it.
  • Could add to the existing GraphToolbar
  • Could add context menu support (iVis-at-Bilkent/cytoscape.js-context-menus)
• Performance optimisation for >1000 nodes and edges (probably less than 1000 on an old laptop or on mobile)
  • Dont layout automatically, at least when the graph is large
  • Avoid per-element selectors where possible - have tried to mitigate this but it still warns - I think due to the labels
  • Fallback to haystack edges (when we start using bezier curves)
  • Don't draw labels when zoomed out. min-zoomed-font-size
  • https://js.cytoscape.org/#performance/optimisations
• Support asynchronous Graph Layouts.
  • Web workers might allow layout calculation without locking the browser window
• Ontology. Nothing preventing someone rolling their own currently, the model is flexible enough - just that the library does not provide any help currently.
• Undo/redo stacks. GraphModel has been designed with them in mind .e.g. model.getCurrentContent(). GraphModel could store past ContentModel instances.
  • Cytoscape supports undo/redo so we could push it into the renderer, it just wouldn't be controllable programmatically
• Expand/collapse. There is a cytoscape plugin for it. Would require changes to the GraphModel.
• Test mobile support. Cytoscape supports touch events and I think the event listeners I'm using are generic enough for it to just work, but this is untested.
• Node icons. Nodes have an icon property (string). Cytoscape supports urls to images / data urls. We could look into how an icon library could be wired up (potentially non-trivial).
• Read Only mode (disable selection)
• Add features that cytoscape already supports (potentially quick wins):
  • Search https://js.cytoscape.org/#collection/search
  • Clustering https://js.cytoscape.org/#collection/clustering
  • Node traversal https://js.cytoscape.org/#collection/traversing
  • Filtering https://js.cytoscape.org/#collection/building--filtering
  • Scoring https://js.cytoscape.org/#collection/centrality