diff --git a/packages/app-core/src/ui/App/ViewContainer.tsx b/packages/app-core/src/ui/App/ViewContainer.tsx index 88da586da3..d48826131b 100644 --- a/packages/app-core/src/ui/App/ViewContainer.tsx +++ b/packages/app-core/src/ui/App/ViewContainer.tsx @@ -1,20 +1,13 @@ -import React, { useEffect, useRef } from 'react' -import { IconButton, Paper, useTheme } from '@mui/material' +import React, { useEffect } from 'react' +import { Paper, useTheme } from '@mui/material' import { makeStyles } from 'tss-react/mui' import { observer } from 'mobx-react' import { getSession, useWidthSetter } from '@jbrowse/core/util' -import clsx from 'clsx' import { IBaseViewModel } from '@jbrowse/core/pluggableElementTypes/models' import { SessionWithFocusedViewAndDrawerWidgets } from '@jbrowse/core/util' -// icons -import CloseIcon from '@mui/icons-material/Close' -import MinimizeIcon from '@mui/icons-material/Minimize' -import AddIcon from '@mui/icons-material/Add' - // locals -import ViewMenu from './ViewMenu' -import ViewContainerTitle from './ViewContainerTitle' +import ViewHeader from './ViewHeader' const useStyles = makeStyles()(theme => ({ viewContainer: { @@ -22,12 +15,6 @@ const useStyles = makeStyles()(theme => ({ margin: theme.spacing(0.5), padding: `0 ${theme.spacing(1)} ${theme.spacing(1)}`, }, - icon: { - color: theme.palette.secondary.contrastText, - }, - grow: { - flexGrow: 1, - }, focusedView: { background: theme.palette.secondary.main, }, @@ -47,18 +34,11 @@ const ViewContainer = observer(function ({ onMinimize: () => void children: React.ReactNode }) { - const { classes } = useStyles() const theme = useTheme() const ref = useWidthSetter(view, theme.spacing(1)) - const scrollRef = useRef(null) + const { classes, cx } = useStyles() const session = getSession(view) as SessionWithFocusedViewAndDrawerWidgets - // scroll the view into view when first mounted. note: this effect will run - // only once, because of the empty array second param - useEffect(() => { - scrollRef.current?.scrollIntoView?.({ block: 'center' }) - }, []) - useEffect(() => { function handleSelectView(e: Event) { if (e.target instanceof Element) { @@ -80,30 +60,14 @@ const ViewContainer = observer(function ({ -
- -
- - -
- - {view.minimized ? ( - - ) : ( - - )} - - - - -
+ {children} ) diff --git a/packages/app-core/src/ui/App/ViewHeader.tsx b/packages/app-core/src/ui/App/ViewHeader.tsx new file mode 100644 index 0000000000..c4f641c5ed --- /dev/null +++ b/packages/app-core/src/ui/App/ViewHeader.tsx @@ -0,0 +1,66 @@ +import React, { useEffect, useRef } from 'react' +import { IconButton } from '@mui/material' +import { makeStyles } from 'tss-react/mui' +import { observer } from 'mobx-react' +import { IBaseViewModel } from '@jbrowse/core/pluggableElementTypes/models' + +// icons +import CloseIcon from '@mui/icons-material/Close' +import MinimizeIcon from '@mui/icons-material/Minimize' +import AddIcon from '@mui/icons-material/Add' + +// locals +import ViewMenu from './ViewMenu' +import ViewContainerTitle from './ViewContainerTitle' + +const useStyles = makeStyles()(theme => ({ + icon: { + color: theme.palette.secondary.contrastText, + }, + grow: { + flexGrow: 1, + }, + viewHeader: { + display: 'flex', + }, +})) + +const ViewHeader = observer(function ({ + view, + onClose, + onMinimize, +}: { + view: IBaseViewModel + onClose: () => void + onMinimize: () => void +}) { + const { classes } = useStyles() + const scrollRef = useRef(null) + + // scroll the view into view when first mounted. note: this effect will run + // only once, because of the empty array second param + useEffect(() => { + scrollRef.current?.scrollIntoView?.({ block: 'center' }) + }, []) + return ( +
+ +
+ + +
+ + {view.minimized ? ( + + ) : ( + + )} + + + + +
+ ) +}) + +export default ViewHeader diff --git a/packages/core/pluggableElementTypes/models/baseTrackConfig.ts b/packages/core/pluggableElementTypes/models/baseTrackConfig.ts index 0d1ad33991..1222f2cb8c 100644 --- a/packages/core/pluggableElementTypes/models/baseTrackConfig.ts +++ b/packages/core/pluggableElementTypes/models/baseTrackConfig.ts @@ -148,19 +148,19 @@ export function createBaseTrackConfig(pluginManager: PluginManager) { type: string displays: { type: string; displayId: string }[] } - const displayTypes = new Set() const { displays = [] } = snap if (snap.trackId !== 'placeholderId') { // Gets the displays on the track snapshot and the possible displays // from the track type and adds any missing possible displays to the // snapshot - displays.forEach(d => d && displayTypes.add(d.type)) - const trackType = pluginManager.getTrackType(snap.type) - trackType.displayTypes.forEach(displayType => { - if (!displayTypes.has(displayType.name)) { + const configDisplayTypes = new Set( + displays.filter(d => !!d).map(d => d.type), + ) + pluginManager.getTrackType(snap.type).displayTypes.forEach(d => { + if (!configDisplayTypes.has(d.name)) { displays.push({ - displayId: `${snap.trackId}-${displayType.name}`, - type: displayType.name, + displayId: `${snap.trackId}-${d.name}`, + type: d.name, }) } }) diff --git a/plugins/linear-genome-view/src/LinearGenomeView/components/LinearGenomeView.tsx b/plugins/linear-genome-view/src/LinearGenomeView/components/LinearGenomeView.tsx index 9b0e42483b..44d6ffb030 100644 --- a/plugins/linear-genome-view/src/LinearGenomeView/components/LinearGenomeView.tsx +++ b/plugins/linear-genome-view/src/LinearGenomeView/components/LinearGenomeView.tsx @@ -2,6 +2,7 @@ import React, { lazy, useEffect, useRef } from 'react' import { Button, Paper, Typography } from '@mui/material' import { makeStyles } from 'tss-react/mui' import { LoadingEllipses } from '@jbrowse/core/ui' +import { getSession } from '@jbrowse/core/util' import { observer } from 'mobx-react' // icons @@ -11,7 +12,6 @@ import { TrackSelector as TrackSelectorIcon } from '@jbrowse/core/ui/Icons' import { LinearGenomeViewModel } from '..' import TrackContainer from './TrackContainer' import TracksContainer from './TracksContainer' -import { getSession } from '@jbrowse/core/util' const ImportForm = lazy(() => import('./ImportForm')) @@ -23,16 +23,45 @@ const useStyles = makeStyles()(theme => ({ paddingTop: theme.spacing(1), paddingBottom: theme.spacing(1), }, + rel: { + position: 'relative', + }, })) +function NoTracksActive({ model }: { model: LinearGenomeViewModel }) { + const { classes } = useStyles() + const { hideNoTracksActive } = model + return ( + + {!hideNoTracksActive ? ( + <> + No tracks active. + + + ) : ( +
+ )} +
+ ) +} + const LinearGenomeView = observer(({ model }: { model: LGV }) => { const { tracks, error, initialized, hasDisplayedRegions } = model - const { classes } = useStyles() const ref = useRef(null) const session = getSession(model) + const { classes } = useStyles() useEffect(() => { - // sets the focused view id based on a click within the LGV; necessary for subviews to be focused properly + // sets the focused view id based on a click within the LGV; + // necessary for subviews to be focused properly function handleSelectView(e: Event) { if (e.target instanceof Element && ref?.current?.contains(e.target)) { session.setFocusedViewId?.(model.id) @@ -58,29 +87,12 @@ const LinearGenomeView = observer(({ model }: { model: LGV }) => { const HeaderComponent = model.HeaderComponent() return ( -
+
{!tracks.length ? ( - - {!model.hideNoTracksActive ? ( - <> - No tracks active. - - - ) : ( -
- )} -
+ ) : ( tracks.map(track => ( diff --git a/plugins/linear-genome-view/src/LinearGenomeView/components/OverviewRubberband.tsx b/plugins/linear-genome-view/src/LinearGenomeView/components/OverviewRubberband.tsx index e24d31a802..dd209ec183 100644 --- a/plugins/linear-genome-view/src/LinearGenomeView/components/OverviewRubberband.tsx +++ b/plugins/linear-genome-view/src/LinearGenomeView/components/OverviewRubberband.tsx @@ -25,6 +25,9 @@ const useStyles = makeStyles()({ position: 'absolute', zIndex: 10, }, + rel: { + position: 'relative', + }, }) const HoverTooltip = observer(function ({ @@ -155,7 +158,7 @@ const OverviewRubberband = observer(function OverviewRubberband({ if (startX === undefined) { return ( -
+
{guideX !== undefined ? ( +
{leftBpOffset && rightBpOffset ? (
renders successfully 1`] = ` class="MuiPaper-root MuiPaper-elevation MuiPaper-rounded MuiPaper-elevation1 css-1ps6pg7-MuiPaper-root" >