Implement RefNameAutocomplete view of the current session

Author: hextraza

jbrowse/package.json

@@ -19,6 +19,9 @@
     "assert": "^2.0.0",
     "browserify-zlib": "^0.2.0",
     "buffer": "^6.0.3",
+    "mobx": "^5.0.0",
+    "mobx-react": "^6.0.0",
+    "mobx-state-tree": "3.14.1",
     "node-polyfill-webpack-plugin": "1.1.0",
     "path-browserify": "^1.0.1",
     "pkg": "^5.3.2",
@@ -30,7 +33,6 @@
     "vm-browserify": "^1.1.2"
   },
   "devDependencies": {
-    "rimraf": "~3.0.2",
     "@labkey/build": "^4.0.1",
     "@types/enzyme": "^3.10.9",
     "@types/jest": "^27.0.1",
@@ -40,9 +42,10 @@
     "enzyme-adapter-react-16": "^1.15.6",
     "enzyme-to-json": "^3.6.2",
     "jest": "^27.2.0",
-    "jest-teamcity-reporter": "^0.9.0",
     "jest-cli": "^27.2.0",
+    "jest-teamcity-reporter": "^0.9.0",
     "react-test-renderer": "^17.0.2",
+    "rimraf": "~3.0.2",
     "ts-jest": "^27.0.5"
   },
   "browser": {

jbrowse/src/client/JBrowse/Browser/RefNameAutocompleteWrapper.tsx

@@ -0,0 +1,40 @@
+import React, { useState } from 'react'
+import { observer } from 'mobx-react'
+import { getSession } from '@jbrowse/core/util'
+import { RefNameAutocomplete } from '@jbrowse/plugin-linear-genome-view'
+import { ViewModel } from '@jbrowse/react-linear-genome-view'
+import BaseResult, { RefSequenceResult }from '@jbrowse/core/TextSearch/BaseResults'
+
+const RefNameAutocompleteWrapper = observer(({ viewState }: { viewState: ViewModel }) => {
+    const { session } = viewState
+    const { view } = session
+
+    const { assemblyNames, assemblyManager } = getSession(view)
+
+    const [selectedAsm, setSelectedAsm] = useState(assemblyNames[0])
+    const [op, setOption] = useState<BaseResult | undefined>()
+
+    const assembly = assemblyManager.get(selectedAsm)
+    const regions = assembly?.regions || []
+
+    const selectedRegion = op?.getLocation()
+    const message = !assemblyNames.length ? 'No configured assemblies' : ''
+
+    return (
+      <RefNameAutocomplete
+        model={view}
+        assemblyName={message ? undefined : selectedAsm}
+        value={selectedRegion}
+        onSelect={option => {
+          setOption(option)
+        }}
+        TextFieldProps={{
+          margin: 'normal',
+          variant: 'outlined',
+          helperText: 'Enter a sequence or location',
+        }}
+      />
+    )
+})
+
+export default RefNameAutocompleteWrapper

jbrowse/src/client/JBrowse/Browser/Search.tsx

@@ -0,0 +1,90 @@
+import React, {useState, useEffect} from 'react'
+//import 'fontsource-roboto'
+import {
+  createViewState,
+  createJBrowseTheme,
+  JBrowseLinearGenomeView,
+  loadPlugins,
+  ThemeProvider,
+} from '@jbrowse/react-linear-genome-view'
+
+import { PluginConstructor } from '@jbrowse/core/Plugin'
+import { Ajax, Utils, ActionURL } from '@labkey/api'
+import MyProjectPlugin from "./plugins/MyProjectPlugin/index"
+import LogSession from "./plugins/LogSession/index"
+import ExtendedVariantPlugin from "./plugins/ExtendedVariantPlugin/index"
+import RefNameAutocompleteWrapper from "./RefNameAutocompleteWrapper"
+
+const theme = createJBrowseTheme()
+const nativePlugins = [MyProjectPlugin, ExtendedVariantPlugin, LogSession]
+
+function generateViewState(genome, plugins){
+  return createViewState({
+      assembly: genome.assembly ?? genome.assemblies,
+      tracks: genome.tracks,
+      configuration: genome.configuration,
+      plugins: plugins.concat(nativePlugins),
+      location: genome.location,
+      defaultSession: genome.defaultSession,
+      onChange: genome.onChange
+  })
+}
+
+function Search(){
+    // Grab session + location information from URL params
+    const queryParam = new URLSearchParams(window.location.search);
+    const session = queryParam.get('session')
+    const location = queryParam.get('location')
+
+    const [state, setState] = useState(null);
+    const [plugins, setPlugins] = useState<PluginConstructor[]>();
+
+    // Get the LinearGenomeViewModel from the API, providing the session as a parameter
+    useEffect(() => {
+        Ajax.request({
+            url: ActionURL.buildURL('jbrowse', 'getSession.api'),
+            method: 'GET',
+            success: async function(res){
+                let jsonRes = JSON.parse(res.response);
+                if (location) {
+                    jsonRes.location = location;
+                }
+
+                var loadedPlugins = null
+                if (jsonRes.plugins != null){
+                    try {
+                        loadedPlugins = await loadPlugins(jsonRes.plugins);
+                    } catch (error) {
+                        console.error("Error: ", error)
+                    }
+                    setPlugins(loadedPlugins);
+                } else {
+                    loadedPlugins = []
+                }
+                setState(generateViewState(jsonRes, loadedPlugins));
+            },
+            failure: function(res){
+                setState("invalid");
+                console.log(res);
+            },
+            params: {session: session}
+        });
+    }, []);
+
+    // Error handle and then render the component
+    if(session === null){
+        return(<p>Error - no session provided.</p>)
+    }
+    else if (state === null){
+        return (<p>Loading...</p>)
+    }
+    else if (state == "invalid") {
+        return (<p>Error fetching config. See console for more details</p>)
+    }
+    return (
+        <RefNameAutocompleteWrapper viewState={state} />
+    )
+}
+
+export default Search
+

jbrowse/src/client/JBrowse/Browser/app.tsx

@@ -11,4 +11,4 @@ const session = queryParam.get('session')
 // Need to wait for container element to be available in labkey wrapper before render
 window.addEventListener('DOMContentLoaded', (event) => {
     ReactDOM.render(<View />, document.getElementById('app'))
-});
+});

jbrowse/src/client/entryPoints.js

@@ -11,4 +11,4 @@ module.exports = {
         template: 'app',
         path: './src/client/JBrowse/Browser'
     }]
-};
+};