@jbrowse/plugin-linear-genome-view
Version:
JBrowse 2 linear genome view
43 lines (42 loc) • 2.05 kB
JavaScript
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import { SanitizedHTML } from '@jbrowse/core/ui';
import { getContainingView, getSession } from '@jbrowse/core/util';
import { getTrackName } from '@jbrowse/core/util/tracks';
import { cx, makeStyles } from '@jbrowse/core/util/tss-react';
import CloseIcon from '@mui/icons-material/Close';
import { IconButton, Paper, Typography, alpha } from '@mui/material';
import { observer } from 'mobx-react';
import TrackLabelDragHandle from "./TrackLabelDragHandle.js";
import TrackLabelMenu from "./TrackLabelMenu.js";
const useStyles = makeStyles()(theme => ({
root: {
zIndex: 200,
background: alpha(theme.palette.background.paper, 0.8),
'&:hover': {
background: theme.palette.background.paper,
},
},
trackName: {
margin: '0 auto',
width: '90%',
fontSize: '0.8rem',
pointerEvents: 'none',
},
iconButton: {
padding: theme.spacing(1),
},
}));
const TrackLabel = observer(function TrackLabel({ track, className }) {
const { classes } = useStyles();
const view = getContainingView(track);
const session = getSession(track);
const { minimized } = track;
const trackId = track.trackId;
const trackName = getTrackName(track.configuration, session);
return (_jsxs(Paper, { className: cx(className, classes.root), onClick: event => {
event.stopPropagation();
}, children: [_jsx(TrackLabelDragHandle, { track: track, trackId: trackId, view: view }), _jsx(IconButton, { onClick: () => view.hideTrack(trackId), className: classes.iconButton, title: "close this track", children: _jsx(CloseIcon, { fontSize: "small" }) }), _jsx(Typography, { variant: "body1", component: "span", className: classes.trackName, children: _jsx(SanitizedHTML, { html: [trackName, minimized ? '(minimized)' : '']
.filter(f => !!f)
.join(' ') }) }), _jsx(TrackLabelMenu, { track: track })] }));
});
export default TrackLabel;