Question: jbrowse2 state store

[alpapan]

Good day Colin

Not sure the better way to ask you this but i reckon an issue on this repo is not the worst idea.

For my sins, I'm making a web app using nextjs that brings together data from APIs and passes them on to front end tools.

So i'm trying to think of how to manage state in react in a more generic way and i was thinking of using valtio.

I gave it a shot (with jbrowse) but i didn't get very far and not sure if it's even a good idea/feasible.

Would you have any experience or recommendations?

thank you,
alexie

[cmdcolin]

that's an interesting question. i could probably write a small essay on it. some notes

• (IMO) "state management library landscape" is pretty hard to deal with, and i am not even well versed in all the stuff

• jbrowse 2 uses mobx-state-tree internally https://mobx-state-tree.js.org/intro/welcome and i think it does some things well, but there are rough edges you can run into also.

• mobx-state-tree's strength is that the state of the whole app can kind of be turned into a single object that can be saved and reloaded, and you can have "sub-stores" (branches of the tree, imagine, a track has a part of the state inside the view state tree)

• you can hypothetically, thus, make jbrowse just a smaller branch of your larger application, but in practice, this can actually be tricky (jbrowse's NPM package api are a bit procedural making it hard to actually get this type of behavior)

• but, you don't have to use mobx-state-tree directly, you can use any state management that works for you, including "no state management" (e.g. just using react context, useState hooks, etc)

• i have also tried valtio in a recent project on my graphgenomeviewer (https://github.com/cmdcolin/graphgenomeviewer) and it is not bad either

• valtio tries to do some "magic" to allow you to directly manipulate variables but the magic feeling is a bit weird

• many people like zustand but it is a bit cumbersome IMO, but, really, all these libraries come with a lot of baggage. none of them are as "as good as react itself is" (e.g. react has proven itself to millions of devs, the state mangaement landscape is more fragmented)

• a poll with some discussion https://www.reddit.com/r/reactjs/comments/1autn8t/poll_redux_vs_zustand_vs_mobx_vs_valtio_vs_jotai/

[cmdcolin]

all that said, if you have any code samples you want me to look at let me know :) note that jbrowse isn't really able to take advantage of any of the 'server side rendering' aspects of nextjs

[alpapan]

thank you

• nextjs: no worries, will make sure i write any jbrowse components as client only & dynamic

• i think what i'm hearing is that i could use mbox-state as my global app engine but it wouldn't be trivial, better than using valtio and still have mbox in any page that has a jb component.

The use case I'm trying to explore is aligning the output of a separate graphing component (or more) with info from the jb view (dynamically, without UI interaction) and thought the best way would be to populate a global store. So with mbox i could just set whatever shared data with makeObservable?

What would be the effect of the jb2 component having an mbox-state object? will it be hierarchally integrated to a parent document's (the app's) mbox-state object? sorry if this is a dumb question

[cmdcolin]

with jbrowse, sometimes it is best to use the "observer" concept. here are two examples we have

this one observes the "currently visible region" and just prints it out (as well as the "static blocks", which is just a rendering thing we do)

live link https://jbrowse.org/storybook/lgv/main/?path=/story/source-code-for-examples--with-observe-visible-regions
source code https://github.com/GMOD/jbrowse-components/blob/main/products/jbrowse-react-linear-genome-view/stories/examples/WithObserveVisibleRegions.tsx

this one fetches all the features. it's a bit involved as it actually has to request the features in your code
https://jbrowse.org/storybook/lgv/main/?path=/story/source-code-for-examples--with-observe-visible-features
source code https://github.com/GMOD/jbrowse-components/blob/main/products/jbrowse-react-linear-genome-view/stories/examples/WithObserveVisibleFeatures.tsx

the secret is making your components wrapped in an "observer". so this component for example
https://github.com/GMOD/jbrowse-components/blob/main/products/jbrowse-react-linear-genome-view/stories/examples/WithObserveVisibleRegions.tsx#L16-L24

it is automatically re-rendered when the things that it accesses during rendering change, because it is wrapped in the mobx-react "observer" function (sometimes called "HOC" in react terms, it just wraps the function component)

those examples sort of show how you can start to try to "react to what jbrowse is showing"

i could try to anwer the other questions but it's possible the above links could be a start