commitd/components-graph

Committed Components Graph library

commitd

Committed commitd

components-graph's Issues

Ideas for future work

• 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

Update build system

Should change to monorepo build system and esbuild

probably:

• tsup
• turbo

Attribute viewer squashes when list of attributes is large

What happened?

Opening the attributes view by double clicking a node lists attribute values.
When the list is large, this can become squashed on the screen.

What did you expect to happen?

The modal should support scrolling for when the list overspills.

Add support for using JSONGraph specification

Should be able to use as a raw format to import into a ContentModel

Fix packaginf of scripts

Built packages have problems with other loaders, i.e. webpack used by storybook and with create-react-app

Update to use components beta

Update dependencies

Update build to use rolpkg

tsdx is not getting updated to newer typescript versions
so look sensible to move to rolpkg. This uses the version of ts installed
and is used in components

Error for dblclick not a function

What happened?

TypeError
cytoscape.dblclick is not a function
Call Stack
 undefined
  vendors~main.eed3e4c86cb2b0752c6e.bundle.js:335957:23
 commitHookEffectListMount
  vendors~main.eed3e4c86cb2b0752c6e.bundle.js:256709:26
 commitPassiveHookEffects
  vendors~main.eed3e4c86cb2b0752c6e.bundle.js:256747:11
 HTMLUnknownElement.callCallback
  vendors~main.eed3e4c86cb2b0752c6e.bundle.js:237166:14
 Object.invokeGuardedCallbackDev
  vendors~main.eed3e4c86cb2b0752c6e.bundle.js:237215:16
 invokeGuardedCallback
  vendors~main.eed3e4c86cb2b0752c6e.bundle.js:237270:31
 flushPassiveEffectsImpl
  vendors~main.eed3e4c86cb2b0752c6e.bundle.js:259831:9
 unstable_runWithPriority
  vendors~main.eed3e4c86cb2b0752c6e.bundle.js:279938:12
 runWithPriority$1
  vendors~main.eed3e4c86cb2b0752c6e.bundle.js:248017:10
 flushPassiveEffects

What did you expect to happen?

Graph should work

Allow for node sizing by attribute

What problem do you want to solve?

Want to be able to decorate the graph node sizes to use an attribute.

What do you think is the correct solution to this problem?

Either using the current decorator system to do it, or adding a new feature akin to a layout, but affects the decoration

Change to using npm

Decoration not being applied to RDF graph

On storybook - colors not applied when testing U38 examples

Assignees: stuarthendren
Labels:

Make modules public

the modules are not marked as public (private: false( and the README is out of date.

Extract RDF and JSON graph generation into modules

Then we don't have dependencies we don't need it we don't want them.

cola and custom layouts not being registered

What happened?

In amulet the cola and custom layouts don't work.
Complains the layouts are not registered.
Can workaround by calling cytoscpace.use manually for cola but the custom is not exported.

Separate front and back end

What problem do you want to solve?

So the graph code can be used with out the UI in the backend of applications and then server to a UI for visualisation.

What do you think is the correct solution to this problem?

Use a monorepo to separate out the parts of the project to, at least front and back, but possible further granularity for, e.g. rdf, cytoscape, react.