Performing searches within a react nextjs framework

[nhartwic]

It is currently possible with the jbrowse-webb app to query for a specific gene and reference using url arguments.

#4068

...I'm currently trying to implement this functionality into a website I've built that uses the JBrowseApp component. Is there any documentation anywhere for the various state related objects and API detailing how we are supposed to interact with them?

Does anyone have any clear idea on how I can get the desired behavior?

EDIT:

After digging around a bit more, I've found a function:

.session.addLinearGenomeViewOfAssembly

...that allows for adding a lineargenomeview to the assembly. I can't find documentation for this function anywhere other than the chrome console and it is all but useless...

ƒ () {
        var id = getNextActionId();
        var parentContext = currentActionContext;
        var parentActionContext = getParentActionContext(parentContext);
        return runWithActionContext…

<state>.session.addLinearGenomeViewOfAssembly(assemblyID) does in fact add a linear genome view for the assembly.

[cmdcolin]

hi there,
this is a bit of a tricky one. the jbrowse-web app has some 'magic sauce' that it uses to load data from the url and make a linear genome view

you can see the docs for that here
https://jbrowse.org/jb2/docs/urlparams/

the caveat though is that these url params are NOT available in the embedded components. I have considered trying to make an easy to use way to expose this functionality though (see issue #3722)

but, in the meantime, you can try to copy and paste some code the jbrowse-web does to replicate this functionality. i made an example that calls the LaunchView-LinearGenomeView 'extension point' which is what jbrowse-web uses. we use this because it is actually quite tricky to programmatically automate the "session snapshots". it is a longer term project to made that simpler, but hopefully the simplified LaunchView can help

here is a live storybook example

https://jbrowse.org/storybook/app/main/?path=/story/source-code-for-examples--with-launch-linear-genome-view

source code here https://github.com/GMOD/jbrowse-components/blob/main/products/jbrowse-react-app/stories/examples/WithLaunchLinearGenomeView.tsx

the "LaunchView" interface is somewhat simplified, but hopefully it can help! https://jbrowse.org/jb2/docs/developer_guides/extension_points/#launchview-lineargenomeview

[nhartwic]

Thank you for the help here. That actually worked well.

For reference for anyone finding this in the future, here is my current nextjs component that allows users to enter a gene and a reference and jump straight to the relevant location. This component probably isn't minimal and may even have weird issues with it that I don't understand. I'm not a nextjs or react or jbrowse expert.

"use client";

import React, { useEffect, useState } from "react";
import { useSearchParams } from "next/navigation";
import { createViewState, JBrowseApp } from "@jbrowse/react-app";
import { getEnv } from '@jbrowse/core/util'
import config from "./config"; // JBrowse configuration

type ViewModel = ReturnType<typeof createViewState>

function JBrowse() {
  const searchParams = useSearchParams();
  const reference = searchParams.get("reference"); // Reference from URL
  const gene = searchParams.get("gene"); // Gene from URL

  const [viewState, setViewState] = useState<ViewModel>();
  const [stateSnapshot, setStateSnapshot] = useState("");


  useEffect(() => {
    console.log(config);
    const state = createViewState({
      config: config,
    });
    const { pluginManager } = getEnv(state)
    setViewState(state)

    if(reference && gene){
      pluginManager.evaluateAsyncExtensionPoint(
        'LaunchView-LinearGenomeView',
        {
          tracks: [],
          loc: gene,
          assembly: reference,
          session: state.session,
        },
      )
    }
  }, []);

  if (!viewState) {
    return null;
  }

  return (
    <div className="p-4">
      <JBrowseApp viewState={viewState} />
    </div>
  );
}

export default JBrowse;