From d56f7f186e6ba3bb27710c9d6d8fb41516a4da72 Mon Sep 17 00:00:00 2001 From: Colin Date: Fri, 13 Sep 2024 14:45:10 -0400 Subject: [PATCH] SV inspector working --- packages/core/assemblyManager/assembly.ts | 6 ++ .../CircularView/components/CircularView.tsx | 8 ++- .../src/CircularView/components/Controls.tsx | 56 +++++++------------ .../components/ImportWizard.tsx | 20 +++++-- .../SpreadsheetView/models/ImportWizard.ts | 28 +++++----- .../components/SvInspectorView.tsx | 6 +- .../SvInspectorView/models/SvInspectorView.ts | 42 +++++++------- 7 files changed, 85 insertions(+), 81 deletions(-) diff --git a/packages/core/assemblyManager/assembly.ts b/packages/core/assemblyManager/assembly.ts index 3e6ff3b895..09a816c0cc 100644 --- a/packages/core/assemblyManager/assembly.ts +++ b/packages/core/assemblyManager/assembly.ts @@ -294,6 +294,12 @@ export default function assemblyFactory( self.refNameAliases[refName] || self.lowerCaseRefNameAliases[refName] ) }, + /** + * #method + */ + getCanonicalRefNameOrDefault(refName: string) { + return this.getCanonicalRefName(refName) || refName + }, /** * #method */ diff --git a/plugins/circular-view/src/CircularView/components/CircularView.tsx b/plugins/circular-view/src/CircularView/components/CircularView.tsx index ce5a78f299..bf416f383b 100644 --- a/plugins/circular-view/src/CircularView/components/CircularView.tsx +++ b/plugins/circular-view/src/CircularView/components/CircularView.tsx @@ -23,7 +23,7 @@ const useStyles = makeStyles()(theme => ({ }, })) -const Slices = observer(({ model }: { model: CircularViewModel }) => { +const Slices = observer(function ({ model }: { model: CircularViewModel }) { return ( <> {model.staticSlices.map(slice => ( @@ -49,7 +49,11 @@ const Slices = observer(({ model }: { model: CircularViewModel }) => { ) }) -const CircularView = observer(({ model }: { model: CircularViewModel }) => { +const CircularView = observer(function ({ + model, +}: { + model: CircularViewModel +}) { const initialized = !!model.displayedRegions.length && !!model.figureWidth && diff --git a/plugins/circular-view/src/CircularView/components/Controls.tsx b/plugins/circular-view/src/CircularView/components/Controls.tsx index aad6d63fe4..81842bcb40 100644 --- a/plugins/circular-view/src/CircularView/components/Controls.tsx +++ b/plugins/circular-view/src/CircularView/components/Controls.tsx @@ -1,8 +1,9 @@ -import React, { useState } from 'react' +import React, { lazy } from 'react' import { observer } from 'mobx-react' import { IconButton } from '@mui/material' import { makeStyles } from 'tss-react/mui' -import JBrowseMenu from '@jbrowse/core/ui/Menu' +import CascadingMenuButton from '@jbrowse/core/ui/CascadingMenuButton' +import { getSession } from '@jbrowse/core/util' // icons import ZoomOutIcon from '@mui/icons-material/ZoomOut' @@ -17,8 +18,9 @@ import { TrackSelector as TrackSelectorIcon } from '@jbrowse/core/ui/Icons' // locals import { CircularViewModel } from '../models/model' -import { getSession } from '@jbrowse/core/util' -import ExportSvgDialog from './ExportSvgDialog' + +// lazies +const ExportSvgDialog = lazy(() => import('./ExportSvgDialog')) const useStyles = makeStyles()(theme => ({ controls: { @@ -32,7 +34,6 @@ const useStyles = makeStyles()(theme => ({ const Controls = observer(function ({ model }: { model: CircularViewModel }) { const { classes } = useStyles() - const [anchorEl, setAnchorEl] = useState(null) return (
: } - { - setAnchorEl(event.currentTarget) - }} + { + getSession(model).queueDialog(handleClose => [ + ExportSvgDialog, + { model, handleClose }, + ]) + }, + }, + ]} > - + {model.hideTrackSelectorButton ? null : ( )} - - {anchorEl ? ( - { - getSession(model).queueDialog(handleClose => [ - ExportSvgDialog, - { model, handleClose }, - ]) - }, - }, - ]} - onMenuItemClick={(_event, callback) => { - callback() - setAnchorEl(null) - }} - open={Boolean(anchorEl)} - onClose={() => { - setAnchorEl(null) - }} - /> - ) : null}
) }) diff --git a/plugins/spreadsheet-view/src/SpreadsheetView/components/ImportWizard.tsx b/plugins/spreadsheet-view/src/SpreadsheetView/components/ImportWizard.tsx index 9764461738..bff7fc45e4 100644 --- a/plugins/spreadsheet-view/src/SpreadsheetView/components/ImportWizard.tsx +++ b/plugins/spreadsheet-view/src/SpreadsheetView/components/ImportWizard.tsx @@ -39,13 +39,18 @@ function FormControl2({ children }: { children: React.ReactNode }) { ) } -const ImportWizard = observer(({ model }: { model: ImportWizardModel }) => { +const ImportWizard = observer(function ({ + model, +}: { + model: ImportWizardModel +}) { const session = getSession(model) const { classes } = useStyles() const { assemblyNames, assemblyManager } = session const { fileTypes, error, loading } = model - const [selected, setSelected] = useState(assemblyNames[0]) - const err = assemblyManager.get(selected || '')?.error || error + const a0 = assemblyNames[0] || '' + const [selectedAssemblyName, setSelectedAssemblyName] = useState(a0) + const err = assemblyManager.get(selectedAssemblyName || '')?.error || error const rootModel = getRoot(model) const [tmp, setTmp] = useState() const [fileType, setFileType] = useState(getFileType(tmp)) @@ -53,6 +58,10 @@ const ImportWizard = observer(({ model }: { model: ImportWizardModel }) => { setFileType(getFileType(tmp)) }, [tmp]) + useEffect(() => { + setSelectedAssemblyName(a0) + }, [a0]) + return (
{err ? : null} @@ -89,9 +98,9 @@ const ImportWizard = observer(({ model }: { model: ImportWizardModel }) => {
{ - setSelected(val) + setSelectedAssemblyName(val) }} />
@@ -102,6 +111,7 @@ const ImportWizard = observer(({ model }: { model: ImportWizardModel }) => { onClick={() => { model.setFileType(fileType) model.setSpreadsheetFilehandle(tmp) + model.setSelectedAssemblyName(selectedAssemblyName) }} > Open diff --git a/plugins/spreadsheet-view/src/SpreadsheetView/models/ImportWizard.ts b/plugins/spreadsheet-view/src/SpreadsheetView/models/ImportWizard.ts index fecd5807da..a2ef5f40ed 100644 --- a/plugins/spreadsheet-view/src/SpreadsheetView/models/ImportWizard.ts +++ b/plugins/spreadsheet-view/src/SpreadsheetView/models/ImportWizard.ts @@ -131,22 +131,22 @@ function stateModelFactory() { addDisposer( self, autorun(async () => { - const { spreadsheetFilehandle } = self - if (!spreadsheetFilehandle) { - return - } + try { + const { spreadsheetFilehandle } = self + if (!spreadsheetFilehandle) { + return + } - this.setLoading(true) - const typeParser = - await fileTypeParsers[ - self.fileType as keyof typeof fileTypeParsers - ]() + this.setLoading(true) + const typeParser = + await fileTypeParsers[ + self.fileType as keyof typeof fileTypeParsers + ]() - const { unzip } = await import('@gmod/bgzf-filehandle') - const { pluginManager } = getEnv(self) - const f = openLocation(spreadsheetFilehandle, pluginManager) - const stat = await maybeStat(f) - try { + const { unzip } = await import('@gmod/bgzf-filehandle') + const { pluginManager } = getEnv(self) + const f = openLocation(spreadsheetFilehandle, pluginManager) + const stat = await maybeStat(f) if (stat && stat.size > IMPORT_SIZE_LIMIT) { throw new Error( `File is too big. Tabular files are limited to at most ${( diff --git a/plugins/sv-inspector/src/SvInspectorView/components/SvInspectorView.tsx b/plugins/sv-inspector/src/SvInspectorView/components/SvInspectorView.tsx index c98b35539e..a21cc848bc 100644 --- a/plugins/sv-inspector/src/SvInspectorView/components/SvInspectorView.tsx +++ b/plugins/sv-inspector/src/SvInspectorView/components/SvInspectorView.tsx @@ -1,4 +1,4 @@ -import React, { useState } from 'react' +import React, { Suspense, useState } from 'react' import { observer } from 'mobx-react' import { makeStyles } from 'tss-react/mui' import { ResizeHandle } from '@jbrowse/core/ui' @@ -73,7 +73,9 @@ const SvInspectorView = observer(function ({ />
- + + +
asm.getCanonicalRefName(r) || r, - ) || [], - ) - circularView.setDisplayedRegions( - clone(regions.filter(r => refSet.has(r.refName))), - ) + if (asm) { + const { regions = [] } = asm || {} + if (onlyDisplayRelevantRegionsInCircularView) { + if (tracks.length === 1) { + // canonicalize the store's ref names if necessary + const refSet = new Set( + featureRefNames?.map(r => + asm.getCanonicalRefNameOrDefault(r), + ), + ) + circularView.setDisplayedRegions( + clone(regions.filter(r => refSet.has(r.refName))), + ) + } + } else { + circularView.setDisplayedRegions(regions) } - } else { - circularView.setDisplayedRegions(regions) } } catch (e) { console.error(e)