Merge pull request #104 from BimberLab/21.7_fb_isolate_search

Isolated search component

Author: Sebastian Benjamin

SequenceAnalysis/src/org/labkey/sequenceanalysis/pipeline/ReadsetCreationTask.java

@@ -607,3 +607,4 @@ private SequencePipelineSettings getSettings()
         return _settings;
     }
 }
+

jbrowse/package-lock.json

@@ -14,11 +14,14 @@
   },
   "dependencies": {
     "@jbrowse/cli": "^1.4.4",
-    "@jbrowse/react-linear-genome-view": "^1.4.4",
+    "@jbrowse/react-linear-genome-view": "^1.5.0",
     "@labkey/components": "2.67.1",
     "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/package.json

@@ -0,0 +1,52 @@
+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, sessionParam }: { viewState: ViewModel, sessionParam: any}) => {
+  function navigate() {
+    if (op) {
+      window.location.href = location.pathname.split('/').slice(0,-1).join('/') + '/jbrowse-jbrowse.view?session=' + sessionParam + '&location=' + op.getLocation()
+    }
+  }
+
+  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 (
+    <span>
+      <RefNameAutocomplete
+        model={view}
+        assemblyName={message ? undefined : selectedAsm}
+        value={selectedRegion}
+        onSelect={option => {
+          setOption(option)
+        }}
+        TextFieldProps={{
+          margin: 'normal',
+          variant: 'outlined',
+          helperText: 'Enter a sequence or location',
+        }}
+      />
+
+      <button onClick={navigate}>
+          Open
+      </button>
+    </span>
+  )
+})
+
+export default RefNameAutocompleteWrapper

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

@@ -0,0 +1,87 @@
+import React, {useState, useEffect} from 'react'
+//import 'fontsource-roboto'
+import {
+  createViewState,
+  JBrowseLinearGenomeView,
+  loadPlugins,
+} from '@jbrowse/react-linear-genome-view'
+
+import { PluginConstructor } from '@jbrowse/core/Plugin'
+import { Ajax, 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 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} sessionParam={session}/>
+    )
+}
+
+export default Search
+

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

@@ -0,0 +1,14 @@
+import React from 'react';
+import ReactDOM from 'react-dom';
+
+import Search from '../Search'
+import { Ajax, Utils, ActionURL } from '@labkey/api'
+
+const queryParam = new URLSearchParams(window.location.search);
+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(<Search />, document.getElementById('app'))
+});

jbrowse/src/client/JBrowse/Browser/Search/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/JBrowse/Browser/app.tsx

@@ -10,5 +10,12 @@ module.exports = {
         permission: 'read',
         template: 'app',
         path: './src/client/JBrowse/Browser'
+    },
+    {
+        name: 'search',
+        title: 'JBrowse Search',
+        permission: 'read',
+        template: 'app',
+        path: './src/client/JBrowse/Browser/Search'
     }]
-};
+};

jbrowse/src/client/entryPoints.js

@@ -15,6 +15,7 @@
  */
 package org.labkey.test.tests.external.labModules;
 
+import org.apache.commons.lang3.StringUtils;
 import org.junit.Assert;
 import org.junit.Test;
 import org.junit.experimental.categories.Category;
@@ -38,6 +39,7 @@
 import org.labkey.test.util.ext4cmp.Ext4FieldRef;
 import org.labkey.test.util.external.labModules.LabModuleHelper;
 import org.openqa.selenium.By;
+import org.openqa.selenium.Keys;
 import org.openqa.selenium.WebElement;
 import org.openqa.selenium.interactions.Actions;
 
@@ -89,6 +91,12 @@ private void testDemoNoSession()
         waitForElement(Locator.tagWithText("p", "Error - no session provided."));
     }
 
+    private void testDemoSearchNoSession()
+    {
+        beginAt("/home/jbrowse-search.view?");
+        waitForElement(Locator.tagWithText("p", "Error - no session provided."));
+    }
+
     private void testDemoUi()
     {
         beginAt("/home/jbrowse-jbrowse.view?session=demo");
@@ -384,6 +392,10 @@ private void testOutputFileProcessing() throws Exception
         dr = DataRegionTable.findDataRegionWithinWebpart(this, "Additional Tracks Provided By The Base Genome");
         Assert.assertEquals("Incorrect row count", 3, dr.getDataRowCount());
 
+        // Store session ID for later use
+        String sessionId = StringUtils.trimToNull(getUrlParam("databaseId"));
+        Assert.assertNotNull("Missing session ID on URL", sessionId);
+
         // Now ensure default tracks appear:
         beginAt("/project/" + getContainerId() + "/begin.view");
         _helper.clickNavPanelItemAndWait("JBrowse Sessions:", 1);
@@ -392,6 +404,32 @@ private void testOutputFileProcessing() throws Exception
         waitAndClick(Locator.tagContainingText("span", "Show all regions in assembly").withClass("MuiButton-label"));
         waitForElement(Locator.tagWithText("span", "fakeData.gff").withClass("MuiTypography-root"));
         waitForElement(Locator.tagWithText("span", "fakeData.bed").withClass("MuiTypography-root"));
+
+        //Now test search:
+        beginAt("/jbrowse/" + getContainerId() + "/search.view?session=" + sessionId);
+        String search = "Ga";
+        String optionText = "Gag";
+        String expected = "SIVmac239_Test:10373..10493";
+
+        Locator searchLocator = Locator.tagWithClass("input", "MuiInputBase-input");
+        waitForElement(searchLocator);
+        WebElement searchBox = searchLocator.findElement(getDriver());
+        searchBox.sendKeys(search);
+
+        Locator optionLocator = Locator.tagWithText("li", optionText);
+        waitForElement(optionLocator);
+        WebElement locator = optionLocator.findElement(getDriver());
+        int locatorIndex = Integer.parseInt(locator.getAttribute("data-option-index"));
+
+        for (int i = 0; i <= locatorIndex; i++)
+        {
+            searchBox.sendKeys(Keys.ARROW_DOWN);
+        }
+
+        searchBox.sendKeys(Keys.ENTER);
+
+        waitForElement(searchLocator);
+        Assert.assertEquals("Correct ID selected", expected, searchBox.getAttribute("value"));
     }
 
     public static <T> Collector<T, ?, T> toSingleton() {