Change in view location and useState

[adampowell1astrazeneca]

I'm currently doing something like this previous post (#2544). I want to use the current viewed location to do some filtering on results in a separate component (i.e. a table showing the results that are visible in the JBrowse component). I'm using the onChange approach. I've also tried the mobx observe way and hit similar problems.

In general, this is all fine if I give it a trivial function (e.g. console.log). However, once I give it the state update function from useState, the JBrowse component resets (nearly) every time the visible region is changed (either by dragging or zooming). Am I missing something in the approaches? Looking at the React profiler, it's not immediately obvious if its the actual component being redrawn or if it's something happening within JBrowse itself. Any insight would be great. Thanks!

Reduced example:

Parent component:

const [test, setTest] = useState("");

return (
<>
     <div>Visible region: {test}</div>
     <JBrowseInstance setTest={setTest}
</>
)

JBrowseInstance where I'm running createViewState.

const state: ViewState = createViewState({
		assembly,
		tracks,
		plugins,
		location,
		defaultSession,
		configuration,
		onChange: () => {
			if (!state.session.views[0] || !state.session.views[0].initialized) {
				return;
			}

			const region = state.session.views[0].coarseDynamicBlocks[0];

			if (region) {
				setTest(
					`${region.refName}:${region.start}-${region.end}`,
				);
			}
		},
	});

[cmdcolin]

hi there,
basically I think what you'll want to do is "memoize" the return value of createViewState. this isn't covered well in our docs but it probably should be :)

without memoizing, the view state will be 'reset' on each re-render which will be very slow which is what you were seeing most likely

example code change

export function WithObserveVisibleRegionsHook() {
  const [test, setTest] = useState('')

  return (
    <>
      <div>Visible region: {test}</div>
      <JBrowseInstance setTest={setTest} />
    </>
  )
}

function JBrowseInstance({ setTest }: { setTest: (arg: string) => void }) {
  const state = useMemo(() => {
    const { assembly, tracks } = getVolvoxConfig()
    return createViewState({
      assembly,
      tracks,
      onChange: () => {
        if (!state.session.views[0]?.initialized) {
          return
        }

        const region = state.session.views[0].coarseDynamicBlocks[0]

        if (region) {
          setTest(
            `${region.refName}:${Math.floor(region.start)}-${Math.floor(region.end)}`,
          )
        }
      },
    })
  }, [setTest])
  return <JBrowseLinearGenomeView viewState={state} />
}

it's a little technical but the above uses 'useMemo' but there are other approaches (useEffect+setState, useRef, and useState callback all). there are a bunch of methods with different uses and needs. see for example here https://tkdodo.eu/blog/use-state-for-one-time-initializations

[cmdcolin]

can you paste your full code (or something to that effect :))?

[adampowell1astrazeneca]

Sure thing. Bear in the mind, there's a fair amount of unrelated (I believe) things here. This component is being reused in a couple of different ways, hence some of the rather random props.

JBrowseInstance.tsx

"use client";

import React, { Dispatch, SetStateAction, useMemo } from "react";
import { PluginConstructor } from "@jbrowse/core/Plugin";
import {
	createViewState,
	JBrowseLinearGenomeView,
} from "@jbrowse/react-linear-genome-view";

import { getAssembly } from "./config/assembly";
import configuration from "./config/configuration";
import getDefaultSession from "./config/getDefaultSession";
import { getFeatureTracks } from "./config/getTracksForOrganism";
import { HighlightRegionPlugin } from "./plugins/HighlightRegionPlugin";
import {
	ConfigSet,
	FromConfigFeature,
	FromConfigSequenceAdapter,
	Organism,
	Track,
} from "./types";

const DefaultAssembly = "hg38";

interface Props {
	assembly?: Organism;
	configSet: ConfigSet;
	useAbsolutePath?: boolean;
	location: string | null;
	onSelect?: (value: string) => void;
	setTest: Dispatch<SetStateAction<string>>;
	additionalFeatures?: FromConfigFeature[];
}

export default function JBrowseInstance({
	assembly = DefaultAssembly,
	configSet,
	useAbsolutePath = false,
	location = null,
	onSelect,
	setTest,
	additionalFeatures,
}: Props) {
	const state = useMemo(() => {
		class HighlightRegionPluginInstance extends HighlightRegionPlugin {
			constructor() {
				super(onSelect);
			}
		}

		const tracks = getFeatureTracks(assembly, useAbsolutePath, configSet);
		let additionalTrack: Track | undefined;

		if (additionalFeatures) {
			const configAdapter: FromConfigSequenceAdapter = {
				type: "FromConfigAdapter",
				features: [...additionalFeatures],
			};
			additionalTrack = {
				type: "FeatureTrack",
				trackId: `${assembly}-additional`,
				name: "Results",
				height: 300,
				adapter: configAdapter,
				category: ["Results"],
				assemblyNames: [assembly],
				configSets: [configSet],
			};

			tracks.push(additionalTrack);
		}

		const plugins: PluginConstructor[] = onSelect
			? [HighlightRegionPluginInstance]
			: [];

		return createViewState({
			assembly: getAssembly(assembly, useAbsolutePath),
			tracks,
			plugins,
			location: location ?? undefined,
			defaultSession: getDefaultSession(
				assembly,
				configSet,
				useAbsolutePath,
				additionalTrack,
			),
			configuration,
			onChange: () => {
				if (!state.session.views[0] || !state.session.views[0].initialized) {
					return;
				}

				const region = state.session.views[0].coarseDynamicBlocks[0];

				if (region) {
					setTest(
						`${region.refName}:${Math.floor(region.start)}-${Math.floor(region.end)}`,
					);
				}
			},
		});
	}, [
		additionalFeatures,
		assembly,
		configSet,
		location,
		onSelect,
		setTest,
		useAbsolutePath,
	]);

	if (!state || !assembly || !location) {
		return null;
	}

	return <JBrowseLinearGenomeView viewState={state} />;
}

[adampowell1astrazeneca]

On a related note, this is just the approach I'm attempting. Is there a way to achieve a similar thing with a plugin? As you can see, I'm using an inline plugin there to do a similar thing (HighlightRegionPluginInstance adds onSelect to a rubberband menu item).

[cmdcolin]

For debugging the re-rendering or slowness, you might try to run console.log in the useMemo callback to see if it is running more frequently than you expect perhaps (you probably just want it to run once when the browser starts up, and any more than that, just reconsider how it is memoized). for example, it might be that the onSelect or setTest functions are changing on each render (e.g. they are not stable references, and themselves need to be memoized with e.g. useCallback or something, or something like that)

as far as your goals of showing a table of features, we have an example in our docs of this here. it shows how it uses an "rpc" call to fetch the features

live example 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

[adampowell1astrazeneca]

That's a good point. Ultimately, I've removed the setTest from the useMemo dependency array and that seems to be okay. It should be a stable reference as it's coming from useState, but clearly something isn't too happy with it.