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 · 7 comments
Open

Visualization for stores, events and relationships #91

kiljee opened this issue May 1, 2019 · 7 comments

Comments

@kiljee
Copy link

@kiljee 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 label May 1, 2019
@zerobias

This comment has been minimized.

Copy link
Owner

@zerobias 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

This comment has been minimized.

Copy link
Owner

@zerobias 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 and removed question labels Jul 14, 2019
@issuehunt-app

This comment has been minimized.

Copy link

@issuehunt-app issuehunt-app bot commented Jul 15, 2019

@issuehunt has funded $100.00 to this issue.


@Laiff

This comment has been minimized.

Copy link
Contributor

@Laiff Laiff commented Jul 15, 2019

@zerobias How I can access to this representation?

@zerobias

This comment has been minimized.

Copy link
Owner

@zerobias 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

This comment has been minimized.

Copy link
Contributor

@Laiff 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

This comment has been minimized.

Copy link
Owner

@zerobias 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

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
3 participants
You can’t perform that action at this time.