Visualization for stores, events and relationships

[kiljee]

Do you have some library for visualization store in browser, like redux-devtools-extensions or like desktop Reactotron

---

IssueHunt Summary

Backers (Total: $110.00)

• issuehunt ($100.00)
• $10.00 have been anonymously funded.

Submitted pull Requests

• #1334 Expose graph links through inspectGraph

---

Become a backer now!

Or submit a pull request to get the deposits!

Tips

• Checkout the Issuehunt explorer to discover more funded issues.
• Need some help from other developers? Add your repositories on IssueHunt to raise funds.

[zerobias]

We are working on it, this is one of the top priorities

[zerobias]

In effector 20 we introduced first part for that issue: internal updates for representing relationships between things as a ownership graph, so now we able to make first version for representing them directly as a graph: store by store, event by event.

And although it significantly harder task than just redux-alike devtools, we believe that it fits modern app development much more

Stay tuned!

[issuehunt-oss]

@issuehunt has funded $100.00 to this issue.

---

• Submit pull request via IssueHunt to receive this reward.
• Want to contribute? Chip in to this issue via IssueHunt.
• Checkout the IssueHunt Issue Explorer to see more funded issues.
• Need help from developers? Add your repository on IssueHunt to raise funds.

[Laiff]

@zerobias How I can access to this representation?

[zerobias]

@zerobias How I can access to this representation?

node

Each store/event/effect has its own graph node called graphite, e.g.:

import {createStore, createEvent} from 'effector'

const event = createEvent()
const store = createStore(0)
  .on(event, x => x + 1)

const computed = store.map(x => 'x = ' + x.toString())


console.log(store.graphite)
console.log(event.graphite)
console.log(computed.graphite)

https://share.effector.dev/skNRPZAM

Effector itself works only with it, to prevent name clashes between userland methods and internal structure.

/** node.graphite object */
type Node = {
  /** direct childrens of node in the dependency graph 
      (order of computations at runtime) */
  next: Node[],
  /** object for your own purposes */
  meta: {},
  /** representation of node in the ownership graph */
  family: Family,
}

node.family

In this nodes, .family property is made to represent the relationships graph.

/** node of the ownership graph */
type Family = {
  type: 'regular' | 'crosslink',
  /** parents who own this node
       (mean this node will be destroyed in case of 
        destroying any of those parents) */
  owners: Node[],
  /** childrens of this node
       (mean those nodes will be destroyed in case of 
        destroying this one) */
  links: Node[],
}

node.family.type

node.family.type represents the type of node in ownership graph: independent nodes, which have its own meaning (stores, events, and effects) are "regular" and intermediate nodes are "crosslink"

intermediate nodes

If node.family.type === 'crosslink', then it is an intermediate node, which has no meaning without its parents (owners).

import {createStore} from 'effector'

const store = createStore(0)

const computed = store.map(x => 'x = ' + x.toString())

const sourceNode = store.graphite.family
const targetNode = computed.graphite.family

console.log(sourceNode)
console.log(targetNode)

const intermediateNode = sourceNode.links[1]

console.log(intermediateNode === targetNode.links[1])

https://share.effector.dev/wXE0xBad

node.meta

As you'll have to traverse through the graph, you'll need some place to store your own metadata, so feel free to use a node.meta field for your own purposes, it's an empty object ({}) which was added exactly for such case.

import {createStore} from 'effector'

function addMetaTag(unit, name = unit.shortName) {
  unit.graphite.meta.name = name
}

const store = createStore(0)
const computed = store.map(x => 'x = ' + x.toString())

addMetaTag(store, 'store')
addMetaTag(computed, 'computed')

const sourceNode = store.graphite
const targetNode = computed.graphite

console.log(sourceNode.meta)
// => {name: "store"}
console.log(targetNode.meta)
// => {name: "computed"}

https://share.effector.dev/VX4mwGDE

[Laiff]

Great, this can be used for visualization. But why it isnt present in current typing for flow or ts? You think about that api as internal API, right?

[zerobias]

Yes and no: it is an advanced api for sure, which can and would overwhelm users which not interested in details of implementation, so property graphite is not typed, but this api still has public typings.
I forgot to add ownership graph to public typings, my bad, but usually these types are up to date.

Will update it in a next release

[PFight]

Any news in this?

[zerobias]

Work in progress, we aimed to visualize relationships between units in entire app, as it allows to comprehend dataflows and application architecture

Visualizing such huge graphs in meaningful way is still unsolved problem in general, for example, famous graphViz library is useless when you have hundreds of samples - real case.

If we not paying attention to visual aesthetic and readability, visualization will not be useful at all:

Therefore we have to implement precise edge routing, like here:

So this is a pretty long journey