Refreshing View on React State Change

[davegcodes]

Hi JBrowse devs!

I'm working on using an inline instance of JBrowse2 in a React page. I have a list of features available in a React state variable, and I'd love to have one of my tracks get redrawn as the state changes. I've been able to load in features from the state through a FromConfigAdapter, but I'm struggling to create a dynamic view - even though I can tell that the state variable is updating, the track is not redrawn. Here's the general idea of what I've tried, using the following adapter in a BasicTrack with an SvgFeatureRenderer:

const [features, setFeatures] = useState([])

useEffect(() => { setFeatures(createFeaturesFromSegments(segmentData)) }, segmentData)

adapter = { "type": "FromConfigAdapter", track: trackId, features: features }

The rendering is successful (though static) if I prepopulate the state variable by calling createFeaturesFromSegments in the first line, and a console.log in the useEffect function shows the features updating in my state. Therefore, I'm thinking it's a matter of not being able to trigger a redraw in JBrowse with the new features. I can dynamically load the data from a remote URL through a custom BaseFeatureDataAdapter, but given that I already have the data locally I'm a bit loathe to pull it down again and duplicate other client side transformations.

Any guidance you could give here as to whether this is possible and how to proceed? Thanks!

[garrettjstevens]

You should be able to get the track to update dynamically, but it'll have to be approached in a bit different way. The adapter in a track gets read once when JBrowse starts and populates its internal state, but then isn't used after that. That's why changing the adapter like that doesn't work, since it's already been read.

You can, however, update the internal state that gets created. Here's an example function that should add a feature to a FromConfigAdapter:

function addFeature(newFeature) {
  const currentFeatures = [
    ...viewState?.config.tracks[0].adapter.features.value,
  ]
  currentFeatures.push(newFeature)
  viewState?.config.tracks[0].adapter.features.set(currentFeatures)
}

In this function, viewState is from const viewState = createViewState(/* initialization here */) It also assumes that your track with a FromConfigAdapter is the first one in your tracks array that you pas to createViewState. The only way to update the features in a way that will be observed and reacted to is by using features.set(features), so that's why the above code grabs all the current features and adds the new one before calling that.

[davegcodes]

Thanks Garrett! This confirms what we were suspecting about the read-once behavior on initialization, and this is super helpful to steer us in the right direction. I'll give this a try and report back.

[davegcodes]

Update for any future readers - the proposed solution worked like a charm in a test example.

Started with an empty array of features in my React state "features" variable passed in as shown in the initial post. Added a button with an onClick that triggered Garrett's method above, and immediately saw the new feature in my track.

Thanks so much for the help, it is truly appreciated!
Dave

[garrettjstevens]

Glad to hear it worked!