Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Visualization for stores, events and relationships #91

Open
kiljee opened this issue May 1, 2019 · 11 comments
Open

Visualization for stores, events and relationships #91

kiljee opened this issue May 1, 2019 · 11 comments
Assignees
Labels
💵 Funded on Issuehunt This issue has been funded on Issuehunt enhancement New feature or request

Comments

@kiljee
Copy link

kiljee commented May 1, 2019

Issuehunt badges

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


IssueHunt Summary

Backers (Total: $100.00)

Become a backer now!

Or submit a pull request to get the deposits!

Tips


IssueHunt has been backed by the following sponsors. Become a sponsor

@kiljee kiljee added the question Further information is requested label May 1, 2019
@zerobias
Copy link
Member

zerobias commented May 4, 2019

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

@zerobias zerobias self-assigned this Jul 14, 2019
@zerobias zerobias changed the title Do you have library for visualization store? Visualization for stores, events and relationships Jul 14, 2019
@zerobias
Copy link
Member

zerobias commented Jul 14, 2019

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!

@zerobias zerobias added enhancement New feature or request and removed question Further information is requested labels Jul 14, 2019
@issuehunt-app
Copy link

issuehunt-app bot commented Jul 15, 2019

@issuehunt has funded $100.00 to this issue.


@issuehunt-app issuehunt-app bot added the 💵 Funded on Issuehunt This issue has been funded on Issuehunt label Jul 15, 2019
@Laiff
Copy link
Contributor

Laiff commented Jul 15, 2019

@zerobias How I can access to this representation?

@zerobias
Copy link
Member

zerobias commented Jul 15, 2019

@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
Copy link
Contributor

Laiff commented Jul 15, 2019

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
Copy link
Member

zerobias commented Jul 15, 2019

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
Copy link

PFight commented Sep 28, 2020

Any news in this?

@zerobias
Copy link
Member

zerobias commented Oct 2, 2020

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

image

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.
image

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

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

So this is a pretty long journey

@IssueHuntBot
Copy link

IssueHuntBot commented Jan 11, 2021

An anonymous user has funded $10.00 to this issue.


@PFight
Copy link

PFight commented Jan 12, 2021

For inattentive people like me, there is some logger and explorer available https://github.com/effector/logger

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
💵 Funded on Issuehunt This issue has been funded on Issuehunt enhancement New feature or request
Projects
None yet
Development

No branches or pull requests

5 participants