From 441b76cf4b2b9b17e1267bcca803d230109e69ea Mon Sep 17 00:00:00 2001 From: teresam856 Date: Fri, 22 Jan 2021 09:03:13 -0800 Subject: [PATCH 01/21] checkpoint --- .../components/ImportForm.tsx | 71 ++++++++++--------- .../components/RefNameAutocomplete.tsx | 5 +- .../src/LinearGenomeView/index.ts | 10 ++- 3 files changed, 50 insertions(+), 36 deletions(-) diff --git a/plugins/linear-genome-view/src/LinearGenomeView/components/ImportForm.tsx b/plugins/linear-genome-view/src/LinearGenomeView/components/ImportForm.tsx index 84c2e1bbf2..dfe3a8eafa 100644 --- a/plugins/linear-genome-view/src/LinearGenomeView/components/ImportForm.tsx +++ b/plugins/linear-genome-view/src/LinearGenomeView/components/ImportForm.tsx @@ -1,4 +1,3 @@ -/* eslint-disable no-nested-ternary */ import React, { useState, useEffect } from 'react' import { observer } from 'mobx-react' import { getSnapshot } from 'mobx-state-tree' @@ -26,7 +25,9 @@ const useStyles = makeStyles(theme => ({ const ImportForm = observer(({ model }: { model: LinearGenomeViewModel }) => { const classes = useStyles() const [selectedAssemblyIdx, setSelectedAssemblyIdx] = useState(0) - const [selectedRegion, setSelectedRegion] = useState() + const [selectedRegion, setSelectedRegion] = useState< + Region | String | undefined + >() const { assemblyNames, assemblyManager } = getSession(model) const error = !assemblyNames.length ? 'No configured assemblies' : '' const assemblyName = assemblyNames[selectedAssemblyIdx] @@ -34,12 +35,11 @@ const ImportForm = observer(({ model }: { model: LinearGenomeViewModel }) => { useEffect(() => { let done = false ;(async () => { - if (assemblyName) { - const assembly = await assemblyManager.waitForAssembly(assemblyName) + const assembly = await assemblyManager.waitForAssembly(assemblyName) - if (!done && assembly && assembly.regions) { - setSelectedRegion(getSnapshot(assembly.regions[0])) - } + if (!done && assembly && assembly.regions) { + // setSelectedRegion(assembly.regions[0].refName) + setSelectedRegion(getSnapshot(assembly.regions[0])) } })() return () => { @@ -54,9 +54,14 @@ const ImportForm = observer(({ model }: { model: LinearGenomeViewModel }) => { } function onOpenClick() { - if (selectedRegion) { + if (typeof selectedRegion === 'string') { + console.log(selectedRegion) + } else { model.setDisplayedRegions([selectedRegion]) } + // if (selectedRegion) { + // model.setDisplayedRegions([selectedRegion]) + // } } return ( @@ -83,32 +88,30 @@ const ImportForm = observer(({ model }: { model: LinearGenomeViewModel }) => { - {assemblyName ? ( - selectedRegion && model.volatileWidth ? ( - - ) : ( - - ) - ) : null} + {selectedRegion && model.volatileWidth ? ( + + ) : ( + + )} - + */} ) From 455bd06e64c370430614f5e6f2e3dd412708aec3 Mon Sep 17 00:00:00 2001 From: teresam856 Date: Wed, 27 Jan 2021 16:46:19 -0800 Subject: [PATCH 12/21] modified navToLocstring to enable navigation before displayed regions are set --- .../components/ImportForm.tsx | 21 +--- .../src/LinearGenomeView/index.ts | 104 ++++++++---------- 2 files changed, 52 insertions(+), 73 deletions(-) diff --git a/plugins/linear-genome-view/src/LinearGenomeView/components/ImportForm.tsx b/plugins/linear-genome-view/src/LinearGenomeView/components/ImportForm.tsx index 72d5031165..ebb6108bee 100644 --- a/plugins/linear-genome-view/src/LinearGenomeView/components/ImportForm.tsx +++ b/plugins/linear-genome-view/src/LinearGenomeView/components/ImportForm.tsx @@ -7,7 +7,6 @@ import { Region } from '@jbrowse/core/util/types/mst' // material ui import { makeStyles } from '@material-ui/core/styles' import CircularProgress from '@material-ui/core/CircularProgress' -import Button from '@material-ui/core/Button' import TextField from '@material-ui/core/TextField' import Container from '@material-ui/core/Container' import Grid from '@material-ui/core/Grid' @@ -43,8 +42,6 @@ const ImportForm = observer(({ model }: { model: LinearGenomeViewModel }) => { const assembly = await assemblyManager.waitForAssembly(assemblyName) if (!done && assembly && assembly.regions) { setAssemblyRegions(assembly.regions) - // default selectedRegion - // setSelectedRegion(assembly.regions[0].refName) } })() return () => { @@ -59,6 +56,10 @@ const ImportForm = observer(({ model }: { model: LinearGenomeViewModel }) => { } function setSelectedRegion(selectedRegion: string | undefined) { + /* + eventually handle more functionality to a search for generic feature + refseq names, locstrings, gene features + */ if (selectedRegion) { // check if selected region is found in selected assembly regions const newRegion: @@ -70,9 +71,7 @@ const ImportForm = observer(({ model }: { model: LinearGenomeViewModel }) => { model.setDisplayedRegions([getSnapshot(newRegion)]) } else { try { - // set default region and then navigate to specified locstring - model.setDisplayedRegions([getSnapshot(assemblyRegions[0])]) - model.navToLocString(selectedRegion) + model.navToLocString(selectedRegion, assemblyName) } catch (e) { console.warn(e) session.notify(`${e}`, 'warning') @@ -131,16 +130,6 @@ const ImportForm = observer(({ model }: { model: LinearGenomeViewModel }) => { ) ) : null} - {/* - - */} ) diff --git a/plugins/linear-genome-view/src/LinearGenomeView/index.ts b/plugins/linear-genome-view/src/LinearGenomeView/index.ts index f3abfd9959..4e742ed779 100644 --- a/plugins/linear-genome-view/src/LinearGenomeView/index.ts +++ b/plugins/linear-genome-view/src/LinearGenomeView/index.ts @@ -621,8 +621,7 @@ export function stateModelFactory(pluginManager: PluginManager) { } throw new Error(`invalid track selector type ${self.trackSelectorType}`) }, - - navToLocString(locString: string) { + navToLocString(locString: string, optAssemblyName?: string) { const { assemblyManager } = getSession(self) const { isValidRefName } = assemblyManager const locStrings = locString.split(';') @@ -633,80 +632,71 @@ export function stateModelFactory(pluginManager: PluginManager) { this.navToMultiple(locations) return } - const displayedRegion = self.displayedRegions[0] - const { assemblyName } = displayedRegion - let assembly = assemblyManager.get(assemblyName) + let assemblyName = optAssemblyName + let defaultRefName = '' + if (self.displayedRegions.length !== 0) { + // defaults + assemblyName = self.displayedRegions[0].assemblyName + defaultRefName = self.displayedRegions[0].refName + } + let assembly = assemblyName && assemblyManager.get(assemblyName) if (!assembly) { - throw new Error( - `Could not find assembly ${displayedRegion.assemblyName}`, - ) + throw new Error(`Could not find assembly ${assemblyName}`) } let { regions } = assembly if (!regions) { + throw new Error(`Regions for assembly ${assemblyName} not yet loaded`) + } + if (locStrings.length > 1) { throw new Error( - `Regions for assembly ${displayedRegion.assemblyName} not yet loaded`, + 'Navigating to multiple locations is not allowed when viewing a whole chromosome', ) } - const matchedRegion = regions.find( - region => - region.refName === displayedRegion.refName && - region.start === displayedRegion.start && - region.end === displayedRegion.end, + const parsedLocString = parseLocString(locStrings[0], refName => + isValidRefName(refName, assemblyName), ) - if (matchedRegion) { - if (locStrings.length > 1) { + let changedAssembly = false + if ( + parsedLocString.assemblyName && + parsedLocString.assemblyName !== assemblyName + ) { + const newAssembly = assemblyManager.get(parsedLocString.assemblyName) + if (!newAssembly) { throw new Error( - 'Navigating to multiple locations is not allowed when viewing a whole chromosome', + `Could not find assembly ${parsedLocString.assemblyName}`, ) } - const parsedLocString = parseLocString(locStrings[0], refName => - isValidRefName(refName, assemblyName), - ) - let changedAssembly = false - if ( - parsedLocString.assemblyName && - parsedLocString.assemblyName !== displayedRegion.assemblyName - ) { - const newAssembly = assemblyManager.get( - parsedLocString.assemblyName, + assembly = newAssembly + changedAssembly = true + const newRegions = newAssembly.regions + if (!newRegions) { + throw new Error( + `Regions for assembly ${parsedLocString.assemblyName} not yet loaded`, ) - if (!newAssembly) { - throw new Error( - `Could not find assembly ${parsedLocString.assemblyName}`, - ) - } - assembly = newAssembly - changedAssembly = true - const newRegions = newAssembly.regions - if (!newRegions) { - throw new Error( - `Regions for assembly ${parsedLocString.assemblyName} not yet loaded`, - ) - } - regions = newRegions } - const canonicalRefName = assembly.getCanonicalRefName( - parsedLocString.refName, + regions = newRegions + } + const canonicalRefName = assembly.getCanonicalRefName( + parsedLocString.refName, + ) + if (!canonicalRefName) { + throw new Error( + `Could not find refName ${parsedLocString.refName} in ${assembly.name}`, + ) + } + if (changedAssembly || canonicalRefName !== defaultRefName) { + const newDisplayedRegion = regions.find( + region => region.refName === canonicalRefName, ) - if (!canonicalRefName) { + if (newDisplayedRegion) { + this.setDisplayedRegions([getSnapshot(newDisplayedRegion)]) + } else { throw new Error( `Could not find refName ${parsedLocString.refName} in ${assembly.name}`, ) } - if (changedAssembly || canonicalRefName !== displayedRegion.refName) { - const newDisplayedRegion = regions.find( - region => region.refName === canonicalRefName, - ) - if (newDisplayedRegion) { - this.setDisplayedRegions([getSnapshot(newDisplayedRegion)]) - } else { - throw new Error( - `Could not find refName ${parsedLocString.refName} in ${assembly.name}`, - ) - } - } - this.navTo(parsedLocString) } + this.navTo(parsedLocString) }, /** From 7fc24332dcfe65d5fcefa92b1292149ecfac669a Mon Sep 17 00:00:00 2001 From: teresam856 Date: Wed, 27 Jan 2021 17:12:35 -0800 Subject: [PATCH 13/21] enable submitting on enter, remove open button for consistency with component, and update snap --- .../components/LinearGenomeView.test.js | 2 +- .../LinearGenomeView.test.js.snap | 18 ------------------ 2 files changed, 1 insertion(+), 19 deletions(-) diff --git a/plugins/linear-genome-view/src/LinearGenomeView/components/LinearGenomeView.test.js b/plugins/linear-genome-view/src/LinearGenomeView/components/LinearGenomeView.test.js index 26d7706af8..b1b6957896 100644 --- a/plugins/linear-genome-view/src/LinearGenomeView/components/LinearGenomeView.test.js +++ b/plugins/linear-genome-view/src/LinearGenomeView/components/LinearGenomeView.test.js @@ -34,7 +34,7 @@ describe('', () => { session.addView('LinearGenomeView', { id: 'lgv' }) const model = session.views[0] const { container, findByText } = render() - await findByText('Open') + await findByText('Select assembly to view') expect(container.firstChild).toMatchSnapshot() }) it('renders one track, one region', async () => { diff --git a/plugins/linear-genome-view/src/LinearGenomeView/components/__snapshots__/LinearGenomeView.test.js.snap b/plugins/linear-genome-view/src/LinearGenomeView/components/__snapshots__/LinearGenomeView.test.js.snap index cc0fffa03f..2a31cba6a7 100644 --- a/plugins/linear-genome-view/src/LinearGenomeView/components/__snapshots__/LinearGenomeView.test.js.snap +++ b/plugins/linear-genome-view/src/LinearGenomeView/components/__snapshots__/LinearGenomeView.test.js.snap @@ -658,24 +658,6 @@ exports[` renders setup wizard 1`] = ` -
- -
`; From 9b159221ff794158a2fa9e14738f438c23bb9452 Mon Sep 17 00:00:00 2001 From: teresam856 Date: Thu, 28 Jan 2021 11:17:12 -0800 Subject: [PATCH 14/21] enable onSelect on key press enter --- .../src/LinearGenomeView/components/RefNameAutocomplete.tsx | 6 ++++++ 1 file changed, 6 insertions(+) diff --git a/plugins/linear-genome-view/src/LinearGenomeView/components/RefNameAutocomplete.tsx b/plugins/linear-genome-view/src/LinearGenomeView/components/RefNameAutocomplete.tsx index 6781952f7e..32fb72268e 100644 --- a/plugins/linear-genome-view/src/LinearGenomeView/components/RefNameAutocomplete.tsx +++ b/plugins/linear-genome-view/src/LinearGenomeView/components/RefNameAutocomplete.tsx @@ -124,6 +124,12 @@ function RefNameAutocomplete({ {...params} {...TextFieldProps} helperText={helperText} + value={coarseVisibleLocStrings || value || ''} + onKeyPress={event => { + if (event.key === 'Enter') { + onSelect(event.target.value) + } + }} InputProps={TextFieldInputProps} placeholder="Search for location" /> From 7f1b72b90ebd4fee9dda29a7f8a991c68d69951b Mon Sep 17 00:00:00 2001 From: teresam856 Date: Thu, 28 Jan 2021 11:19:14 -0800 Subject: [PATCH 15/21] add test for import form and modify corresponding snap --- .../components/LinearGenomeView.test.js | 19 ++++- .../LinearGenomeView.test.js.snap | 77 +++++++++++++++---- 2 files changed, 79 insertions(+), 17 deletions(-) diff --git a/plugins/linear-genome-view/src/LinearGenomeView/components/LinearGenomeView.test.js b/plugins/linear-genome-view/src/LinearGenomeView/components/LinearGenomeView.test.js index b1b6957896..8293821179 100644 --- a/plugins/linear-genome-view/src/LinearGenomeView/components/LinearGenomeView.test.js +++ b/plugins/linear-genome-view/src/LinearGenomeView/components/LinearGenomeView.test.js @@ -1,5 +1,5 @@ import React from 'react' -import { render } from '@testing-library/react' +import { render, fireEvent } from '@testing-library/react' import { createTestSession } from '@jbrowse/web/src/rootModel' import sizeMe from 'react-sizeme' import 'requestidlecallback-polyfill' @@ -33,9 +33,24 @@ describe('', () => { session.addAssemblyConf(assemblyConf) session.addView('LinearGenomeView', { id: 'lgv' }) const model = session.views[0] - const { container, findByText } = render() + model.setWidth(800) + const { + container, + findByText, + findByTestId, + findByPlaceholderText, + } = render() await findByText('Select assembly to view') + const autocomplete = await findByTestId('autocomplete') + const inputBox = await findByPlaceholderText('Search for location') expect(container.firstChild).toMatchSnapshot() + + autocomplete.focus() + fireEvent.keyDown(autocomplete, { key: 'ArrowDown' }) + fireEvent.keyDown(autocomplete, { key: 'Enter', code: 'Enter' }) + expect((await findByPlaceholderText('Search for location')).value).toEqual( + expect.stringContaining('ctgA'), + ) }) it('renders one track, one region', async () => { const session = createTestSession() diff --git a/plugins/linear-genome-view/src/LinearGenomeView/components/__snapshots__/LinearGenomeView.test.js.snap b/plugins/linear-genome-view/src/LinearGenomeView/components/__snapshots__/LinearGenomeView.test.js.snap index 2a31cba6a7..9aef94bea1 100644 --- a/plugins/linear-genome-view/src/LinearGenomeView/components/__snapshots__/LinearGenomeView.test.js.snap +++ b/plugins/linear-genome-view/src/LinearGenomeView/components/__snapshots__/LinearGenomeView.test.js.snap @@ -639,23 +639,70 @@ exports[` renders setup wizard 1`] = ` class="MuiGrid-root MuiGrid-item" > From c80f761251e66eb3fddaaa59f139145384ce7deb Mon Sep 17 00:00:00 2001 From: teresam856 Date: Thu, 28 Jan 2021 11:50:41 -0800 Subject: [PATCH 16/21] remove unused component from test, fix typescript error --- .../src/LinearGenomeView/components/LinearGenomeView.test.js | 1 - .../src/LinearGenomeView/components/RefNameAutocomplete.tsx | 2 +- 2 files changed, 1 insertion(+), 2 deletions(-) diff --git a/plugins/linear-genome-view/src/LinearGenomeView/components/LinearGenomeView.test.js b/plugins/linear-genome-view/src/LinearGenomeView/components/LinearGenomeView.test.js index 8293821179..b76e2f41e5 100644 --- a/plugins/linear-genome-view/src/LinearGenomeView/components/LinearGenomeView.test.js +++ b/plugins/linear-genome-view/src/LinearGenomeView/components/LinearGenomeView.test.js @@ -42,7 +42,6 @@ describe('', () => { } = render() await findByText('Select assembly to view') const autocomplete = await findByTestId('autocomplete') - const inputBox = await findByPlaceholderText('Search for location') expect(container.firstChild).toMatchSnapshot() autocomplete.focus() diff --git a/plugins/linear-genome-view/src/LinearGenomeView/components/RefNameAutocomplete.tsx b/plugins/linear-genome-view/src/LinearGenomeView/components/RefNameAutocomplete.tsx index 32fb72268e..c523286cff 100644 --- a/plugins/linear-genome-view/src/LinearGenomeView/components/RefNameAutocomplete.tsx +++ b/plugins/linear-genome-view/src/LinearGenomeView/components/RefNameAutocomplete.tsx @@ -127,7 +127,7 @@ function RefNameAutocomplete({ value={coarseVisibleLocStrings || value || ''} onKeyPress={event => { if (event.key === 'Enter') { - onSelect(event.target.value) + onSelect((event.target as HTMLInputElement).value) } }} InputProps={TextFieldInputProps} From 2f3ab53edbd7fbab02d2d43a0ac0ec85fc961142 Mon Sep 17 00:00:00 2001 From: teresam856 Date: Thu, 28 Jan 2021 13:02:59 -0800 Subject: [PATCH 17/21] adding more tests --- .../components/LinearGenomeView.test.js | 14 ++++++++++---- 1 file changed, 10 insertions(+), 4 deletions(-) diff --git a/plugins/linear-genome-view/src/LinearGenomeView/components/LinearGenomeView.test.js b/plugins/linear-genome-view/src/LinearGenomeView/components/LinearGenomeView.test.js index b76e2f41e5..2e185abae2 100644 --- a/plugins/linear-genome-view/src/LinearGenomeView/components/LinearGenomeView.test.js +++ b/plugins/linear-genome-view/src/LinearGenomeView/components/LinearGenomeView.test.js @@ -41,15 +41,21 @@ describe('', () => { findByPlaceholderText, } = render() await findByText('Select assembly to view') + await findByText('Enter a sequence or locstring') + const autocomplete = await findByTestId('autocomplete') - expect(container.firstChild).toMatchSnapshot() + const inputBox = await findByPlaceholderText('Search for location') + expect(container.firstChild).toMatchSnapshot() + expect(model.displayedRegions.length).toEqual(0) autocomplete.focus() + fireEvent.change(inputBox, { + target: { value: 'ctgA:1..5' }, + }) + fireEvent.keyDown(autocomplete, { key: 'ArrowDown' }) fireEvent.keyDown(autocomplete, { key: 'ArrowDown' }) fireEvent.keyDown(autocomplete, { key: 'Enter', code: 'Enter' }) - expect((await findByPlaceholderText('Search for location')).value).toEqual( - expect.stringContaining('ctgA'), - ) + expect(model.displayedRegions.length).toEqual(1) }) it('renders one track, one region', async () => { const session = createTestSession() From 0a9f643e81ad697aafbfcb196d673cb964f3cc9e Mon Sep 17 00:00:00 2001 From: teresam856 Date: Tue, 2 Feb 2021 11:42:24 -0800 Subject: [PATCH 18/21] working with both enter and open click,need to refactor to avoid code duplication --- .../components/ImportForm.tsx | 23 ++++++++++++++-- .../components/RefNameAutocomplete.tsx | 27 ++++++++++++++++--- 2 files changed, 45 insertions(+), 5 deletions(-) diff --git a/plugins/linear-genome-view/src/LinearGenomeView/components/ImportForm.tsx b/plugins/linear-genome-view/src/LinearGenomeView/components/ImportForm.tsx index ebb6108bee..014908d0d7 100644 --- a/plugins/linear-genome-view/src/LinearGenomeView/components/ImportForm.tsx +++ b/plugins/linear-genome-view/src/LinearGenomeView/components/ImportForm.tsx @@ -6,6 +6,7 @@ import { getSession } from '@jbrowse/core/util' import { Region } from '@jbrowse/core/util/types/mst' // material ui import { makeStyles } from '@material-ui/core/styles' +import Button from '@material-ui/core/Button' import CircularProgress from '@material-ui/core/CircularProgress' import TextField from '@material-ui/core/TextField' import Container from '@material-ui/core/Container' @@ -29,6 +30,7 @@ const ImportForm = observer(({ model }: { model: LinearGenomeViewModel }) => { const session = getSession(model) const { assemblyNames, assemblyManager } = session const [selectedAssemblyIdx, setSelectedAssemblyIdx] = useState(0) + const [selectedRegion, setSelectedRegion] = useState() const [assemblyRegions, setAssemblyRegions] = useState< Instance[] >([]) @@ -41,6 +43,7 @@ const ImportForm = observer(({ model }: { model: LinearGenomeViewModel }) => { ;(async () => { const assembly = await assemblyManager.waitForAssembly(assemblyName) if (!done && assembly && assembly.regions) { + setSelectedRegion(assembly.regions[0].refName) setAssemblyRegions(assembly.regions) } })() @@ -55,7 +58,7 @@ const ImportForm = observer(({ model }: { model: LinearGenomeViewModel }) => { setSelectedAssemblyIdx(Number(event.target.value)) } - function setSelectedRegion(selectedRegion: string | undefined) { + function handleSelectedRegion(selectedRegion: string | undefined) { /* eventually handle more functionality to a search for generic feature refseq names, locstrings, gene features @@ -79,6 +82,12 @@ const ImportForm = observer(({ model }: { model: LinearGenomeViewModel }) => { } } } + function onOpenClick() { + if (selectedRegion) { + // model.setDisplayedRegions([selectedRegion]) + handleSelectedRegion(selectedRegion) + } + } return ( @@ -111,7 +120,7 @@ const ImportForm = observer(({ model }: { model: LinearGenomeViewModel }) => { assemblyName={ error ? undefined : assemblyNames[selectedAssemblyIdx] } - value={assemblyRegions[0] ? assemblyRegions[0].refName : ''} + value={selectedRegion} onSelect={setSelectedRegion} TextFieldProps={{ margin: 'normal', @@ -130,6 +139,16 @@ const ImportForm = observer(({ model }: { model: LinearGenomeViewModel }) => { ) ) : null} + + + ) diff --git a/plugins/linear-genome-view/src/LinearGenomeView/components/RefNameAutocomplete.tsx b/plugins/linear-genome-view/src/LinearGenomeView/components/RefNameAutocomplete.tsx index c523286cff..e76cb7ff54 100644 --- a/plugins/linear-genome-view/src/LinearGenomeView/components/RefNameAutocomplete.tsx +++ b/plugins/linear-genome-view/src/LinearGenomeView/components/RefNameAutocomplete.tsx @@ -42,7 +42,8 @@ function RefNameAutocomplete({ style?: React.CSSProperties TextFieldProps?: TFP }) { - const { assemblyManager } = getSession(model) + const session = getSession(model) + const { assemblyManager } = session const assembly = assemblyName && assemblyManager.get(assemblyName) const regions: Region[] = (assembly && assembly.regions) || [] const { coarseVisibleLocStrings } = model @@ -98,7 +99,7 @@ function RefNameAutocomplete({ }} ListboxProps={{ style: { maxHeight: 250 } }} onChange={(e, newRegion) => { - e.preventDefault() + // e.preventDefault() onChange(newRegion) }} renderInput={params => { @@ -127,7 +128,27 @@ function RefNameAutocomplete({ value={coarseVisibleLocStrings || value || ''} onKeyPress={event => { if (event.key === 'Enter') { - onSelect((event.target as HTMLInputElement).value) + const inputValue = (event.target as HTMLInputElement).value + onSelect(inputValue) + if (inputValue) { + const newRegion: + | Region + | undefined = model.displayedRegions.find( + region => inputValue === region.refName, + ) + // navigate to region or if region not found try navigating to locstring + if (newRegion) { + model.setDisplayedRegions([newRegion]) + } else { + try { + inputValue && + model.navToLocString(inputValue, assemblyName) + } catch (e) { + console.warn(e) + session.notify(`${e}`, 'warning') + } + } + } } }} InputProps={TextFieldInputProps} From 2d4db4d0596296961d676878a71e8008a977061d Mon Sep 17 00:00:00 2001 From: teresam856 Date: Tue, 2 Feb 2021 14:00:25 -0800 Subject: [PATCH 19/21] fix typecheck errors --- .../components/ImportForm.tsx | 45 +++++++++---------- .../components/RefNameAutocomplete.tsx | 30 +------------ 2 files changed, 23 insertions(+), 52 deletions(-) diff --git a/plugins/linear-genome-view/src/LinearGenomeView/components/ImportForm.tsx b/plugins/linear-genome-view/src/LinearGenomeView/components/ImportForm.tsx index 014908d0d7..5a9ac2b58c 100644 --- a/plugins/linear-genome-view/src/LinearGenomeView/components/ImportForm.tsx +++ b/plugins/linear-genome-view/src/LinearGenomeView/components/ImportForm.tsx @@ -30,7 +30,7 @@ const ImportForm = observer(({ model }: { model: LinearGenomeViewModel }) => { const session = getSession(model) const { assemblyNames, assemblyManager } = session const [selectedAssemblyIdx, setSelectedAssemblyIdx] = useState(0) - const [selectedRegion, setSelectedRegion] = useState() + const [selectedRegion, setSelectedRegion] = useState() const [assemblyRegions, setAssemblyRegions] = useState< Instance[] >([]) @@ -58,33 +58,24 @@ const ImportForm = observer(({ model }: { model: LinearGenomeViewModel }) => { setSelectedAssemblyIdx(Number(event.target.value)) } - function handleSelectedRegion(selectedRegion: string | undefined) { - /* - eventually handle more functionality to a search for generic feature - refseq names, locstrings, gene features - */ - if (selectedRegion) { - // check if selected region is found in selected assembly regions - const newRegion: - | Instance - | undefined = assemblyRegions.find( - region => selectedRegion === region.refName, - ) - if (newRegion) { - model.setDisplayedRegions([getSnapshot(newRegion)]) - } else { - try { - model.navToLocString(selectedRegion, assemblyName) - } catch (e) { - console.warn(e) - session.notify(`${e}`, 'warning') - } + function handleSelectedRegion(input: string) { + const newRegion: Instance | undefined = assemblyRegions.find( + region => selectedRegion === region.refName, + ) + if (newRegion) { + model.setDisplayedRegions([getSnapshot(newRegion)]) + } else { + try { + input && model.navToLocString(input, assemblyName) + } catch (e) { + console.warn(e) + session.notify(`${e}`, 'warning') } } } + function onOpenClick() { if (selectedRegion) { - // model.setDisplayedRegions([selectedRegion]) handleSelectedRegion(selectedRegion) } } @@ -114,7 +105,7 @@ const ImportForm = observer(({ model }: { model: LinearGenomeViewModel }) => { {assemblyName ? ( - model.volatileWidth ? ( + selectedRegion && model.volatileWidth ? ( { variant: 'outlined', className: classes.importFormEntry, helperText: 'Enter a sequence or locstring', + onKeyPress: event => { + const inputValue = (event.target as HTMLInputElement).value + if (event.key === 'Enter') { + handleSelectedRegion(inputValue) + } + }, }} /> ) : ( diff --git a/plugins/linear-genome-view/src/LinearGenomeView/components/RefNameAutocomplete.tsx b/plugins/linear-genome-view/src/LinearGenomeView/components/RefNameAutocomplete.tsx index e76cb7ff54..efd8eb9ceb 100644 --- a/plugins/linear-genome-view/src/LinearGenomeView/components/RefNameAutocomplete.tsx +++ b/plugins/linear-genome-view/src/LinearGenomeView/components/RefNameAutocomplete.tsx @@ -64,7 +64,6 @@ function RefNameAutocomplete({ if (typeof newRegionName === 'string') { newRegionValue = newRegionName } - // set selected region string onSelect(newRegionValue) } } @@ -78,6 +77,7 @@ function RefNameAutocomplete({ disableClearable freeSolo includeInputInList + clearOnBlur loading={loaded} selectOnFocus style={style} @@ -98,8 +98,7 @@ function RefNameAutocomplete({ return filtered }} ListboxProps={{ style: { maxHeight: 250 } }} - onChange={(e, newRegion) => { - // e.preventDefault() + onChange={(_, newRegion) => { onChange(newRegion) }} renderInput={params => { @@ -126,31 +125,6 @@ function RefNameAutocomplete({ {...TextFieldProps} helperText={helperText} value={coarseVisibleLocStrings || value || ''} - onKeyPress={event => { - if (event.key === 'Enter') { - const inputValue = (event.target as HTMLInputElement).value - onSelect(inputValue) - if (inputValue) { - const newRegion: - | Region - | undefined = model.displayedRegions.find( - region => inputValue === region.refName, - ) - // navigate to region or if region not found try navigating to locstring - if (newRegion) { - model.setDisplayedRegions([newRegion]) - } else { - try { - inputValue && - model.navToLocString(inputValue, assemblyName) - } catch (e) { - console.warn(e) - session.notify(`${e}`, 'warning') - } - } - } - } - }} InputProps={TextFieldInputProps} placeholder="Search for location" /> From 5d1cb87d0688d466fd5cb5c54e3ac30ded05e350 Mon Sep 17 00:00:00 2001 From: teresam856 Date: Tue, 2 Feb 2021 14:02:18 -0800 Subject: [PATCH 20/21] update the snap --- .../components/LinearGenomeView.test.js | 22 +++---------------- .../LinearGenomeView.test.js.snap | 18 +++++++++++++++ 2 files changed, 21 insertions(+), 19 deletions(-) diff --git a/plugins/linear-genome-view/src/LinearGenomeView/components/LinearGenomeView.test.js b/plugins/linear-genome-view/src/LinearGenomeView/components/LinearGenomeView.test.js index 2e185abae2..5717ea4a09 100644 --- a/plugins/linear-genome-view/src/LinearGenomeView/components/LinearGenomeView.test.js +++ b/plugins/linear-genome-view/src/LinearGenomeView/components/LinearGenomeView.test.js @@ -34,27 +34,11 @@ describe('', () => { session.addView('LinearGenomeView', { id: 'lgv' }) const model = session.views[0] model.setWidth(800) - const { - container, - findByText, - findByTestId, - findByPlaceholderText, - } = render() - await findByText('Select assembly to view') - await findByText('Enter a sequence or locstring') - - const autocomplete = await findByTestId('autocomplete') - const inputBox = await findByPlaceholderText('Search for location') - + const { container, findByText } = render() + const openButton = await findByText('Open') expect(container.firstChild).toMatchSnapshot() expect(model.displayedRegions.length).toEqual(0) - autocomplete.focus() - fireEvent.change(inputBox, { - target: { value: 'ctgA:1..5' }, - }) - fireEvent.keyDown(autocomplete, { key: 'ArrowDown' }) - fireEvent.keyDown(autocomplete, { key: 'ArrowDown' }) - fireEvent.keyDown(autocomplete, { key: 'Enter', code: 'Enter' }) + openButton.click() expect(model.displayedRegions.length).toEqual(1) }) it('renders one track, one region', async () => { diff --git a/plugins/linear-genome-view/src/LinearGenomeView/components/__snapshots__/LinearGenomeView.test.js.snap b/plugins/linear-genome-view/src/LinearGenomeView/components/__snapshots__/LinearGenomeView.test.js.snap index 9aef94bea1..e0cf221374 100644 --- a/plugins/linear-genome-view/src/LinearGenomeView/components/__snapshots__/LinearGenomeView.test.js.snap +++ b/plugins/linear-genome-view/src/LinearGenomeView/components/__snapshots__/LinearGenomeView.test.js.snap @@ -705,6 +705,24 @@ exports[` renders setup wizard 1`] = ` +
+ +
`; From 4a46da37e9f9bcaba9e54967dbd97686a26399e8 Mon Sep 17 00:00:00 2001 From: teresam856 Date: Tue, 2 Feb 2021 15:20:17 -0800 Subject: [PATCH 21/21] remove unused imports and modify onblur --- .../src/LinearGenomeView/components/ImportForm.tsx | 3 +++ .../src/LinearGenomeView/components/LinearGenomeView.test.js | 2 +- 2 files changed, 4 insertions(+), 1 deletion(-) diff --git a/plugins/linear-genome-view/src/LinearGenomeView/components/ImportForm.tsx b/plugins/linear-genome-view/src/LinearGenomeView/components/ImportForm.tsx index 5a9ac2b58c..8edf7558ed 100644 --- a/plugins/linear-genome-view/src/LinearGenomeView/components/ImportForm.tsx +++ b/plugins/linear-genome-view/src/LinearGenomeView/components/ImportForm.tsx @@ -118,6 +118,9 @@ const ImportForm = observer(({ model }: { model: LinearGenomeViewModel }) => { variant: 'outlined', className: classes.importFormEntry, helperText: 'Enter a sequence or locstring', + onBlur: event => { + setSelectedRegion((event.target as HTMLInputElement).value) + }, onKeyPress: event => { const inputValue = (event.target as HTMLInputElement).value if (event.key === 'Enter') { diff --git a/plugins/linear-genome-view/src/LinearGenomeView/components/LinearGenomeView.test.js b/plugins/linear-genome-view/src/LinearGenomeView/components/LinearGenomeView.test.js index 5717ea4a09..f8ee162db8 100644 --- a/plugins/linear-genome-view/src/LinearGenomeView/components/LinearGenomeView.test.js +++ b/plugins/linear-genome-view/src/LinearGenomeView/components/LinearGenomeView.test.js @@ -1,5 +1,5 @@ import React from 'react' -import { render, fireEvent } from '@testing-library/react' +import { render } from '@testing-library/react' import { createTestSession } from '@jbrowse/web/src/rootModel' import sizeMe from 'react-sizeme' import 'requestidlecallback-polyfill'