###### tags: `workflow` `graph`

# Graph exploration

## Existing libs
<details><summary>Click to see more</summary>

* [d3JS](https://d3js.org/)
*used in angularJS surycat workflow graphs*
* [cytoscape.js](https://js.cytoscape.org/)
*used in Rudolf POC*
* [GoJS](https://gojs.net/latest/index.html)
*not free :(*
* [Mermaid](https://mermaid-js.github.io/mermaid/#/)
*Nice doc but strange use, you build the graph using text*
`
graph LR
a --> b & c--> d
`
will generate  as a svg object.

* [draw2d](https://github.com/freegroup/draw2d)
Nice live examples but API is not clear/obscure.
It is based on RaphaelJS. I tried to play a bit with it but the doc is not clear at all...
* [RaphaelJS](https://github.com/DmitryBaranovskiy/raphael/)
Seems to be something quite popular but doesn't feel like it's easy to use.
* [ReteJS](https://rete.js.org/#/)
Seems to be the most accurate lib for our use-case.
The lib is really well documented, with examples and a nice integration for Angular.
A first mini-POC has been done to explore the library and it seems promising.
* [SigmaJS](https://github.com/jacomyal/sigma.js)
Seems to have a good doc and many possibilities but examples are really far from what we want to do.
* [LitegraphJS](https://github.com/jagenjo/litegraph.js)
</details>

---

## Current workflow
<details><summary>Click to see more</summary>

* Validation function with subroutines:
- Acyclic graphe ? (Dagre)
- Empty graphe ?
- Tags validation
- Links between tasks
* Warning popup when closing window
* JSON Schema for each task (validated with tv4JS)
* Tasks with conditions (not validated with JSON schema as condition is written as a string) > Use angular form validators ?
- task selector
- transformation de données
- Tasks triggering other workflows (does it still exist ?)
* Different workflow backend (step functions...)
- use generic JSON format for graphes
* History with old graphe schemas > Lazy loading
* Actions not possible if unvalid graphe
</details>

---

## Talk
- task data model (step function?)
- migrate task forms ?
- workflow config (policy, trigger/connector)

---

# ReteJS graph exploration
This work can be followed with `rete-graph-feature` branch on github (wings-workflow repository).
[Here is a link to the current architecture used](https://draft.io/ye4zm).

<details><summary>Click to see more on to-do tasks</summary>

TO-DO:
- [x] Branch from master
- [x] Redo mini-POC without rete-angular-render-plugin (not reliable enough)
- [x] Deepen UX possibilities about multiple nodes selection
*One cool feature: graph rearrange to make a nice arrangement of nodes.*
*Selection box on drag not implemented*
*clone and delete multiple*
- [x] Deepen data use inside a component
*When creating the node, you can pass anything you want
`.createNode({key: value})` and is accessible via `node.data.key`*
- [x] Add a grid feature
*NB: It doesn't seem like there is an integrated dynamic grid. Now it's only static, it doesn't adapt when zooming in/out.*
*EDIT: First version of dynamic grid*
- [x] Deepen events/callbacks possibilities (when a node is created, when it's clicked...)
→ using events "selectnode"

- [x] current graph code architecture slide (components, services)
A draft.io can be seen [here](https://draft.io/ye4zm).
- [ ] try to avoid native DOM manipulation
- [x] use interface and enums
For `editor.on("someString",...)`, `someString` must be a key of a specific ReteJS interface `EventsTypes`. IDE already know which strings can be accepted.
- [x] copy nodes with selection links
- [x] lazy load workflow module
- [x] import/export graph
- [x] multi node selection
- [x] graph validation
- [x] prevent cyclic graph (avoid links that could create a loop)
- [ ] tasks validation
- [ ] task statut (follow up)
</details>

### Pros:
- Many advanced features
- Many browser supports
- Possibly new features/updates from maintainers
- Works well, no bugs
- Event system works well
- Many "out of the box" features (like auto-alignment), but non-essential
*/!\ graph arrange useful for old template support*

### Cons:
- We only need few features from the library
- Can be sometimes dark-magic/wordy/dirty
- Not much documentation
- Not 100% made for Angular yet
- Make us dependent to library updates/changes
- More production libs = heavier application
- Component creation complex and "re-implemented" (factoryResolver, injector, AngularComponent)
- Getters and setters <3
- Properties with !
- Async methods but we don't understand why
- Mysterious empty methods (aka : worker() {}), but mandatory !
- Types for components re-invent : the wheel

---

# Native graph exploration
This work can be followed with `native-graph-feature` branch on github (wings-workflow repository).
[Here is a link to the current architecture used](https://draft.io/85j3w).

### Pros:
- Everything is under control (architecture, style, interactions...)
- Lighter (only needed features)
- Angular native
- Less exposed to breaking changes as we have fewer dependencies (only D3JS / dagre)
- Clear node and connection lists that can be easily saved and manipulated using NgRx
- Useful interfaces (typing)
- Takes advantage of angular material CDK : library already embedded in our project and might also provide new features in the future
- Fully customizable components

### Cons:
- Multi browsers support must be done by us
- "simple" features can be tricky to implement properly (connections, drag...)
- Everything has to be done by us
- Large component classes (more logic)

---

# Graph integration with d3JS