@jbrowse/plugin-linear-genome-view
Version:
JBrowse 2 linear genome view
51 lines (50 loc) • 1.93 kB
JavaScript
;
Object.defineProperty(exports, "__esModule", { value: true });
const jsx_runtime_1 = require("react/jsx-runtime");
const util_1 = require("@jbrowse/core/util");
const colord_1 = require("@jbrowse/core/util/colord");
const mobx_react_1 = require("mobx-react");
const mui_1 = require("tss-react/mui");
const useStyles = (0, mui_1.makeStyles)()(theme => ({
highlight: {
height: '100%',
position: 'absolute',
background: (0, colord_1.colord)(theme.palette.highlight.main).alpha(0.35).toRgbString(),
borderLeft: `1px solid ${theme.palette.highlight.main}`,
borderRight: `1px solid ${theme.palette.highlight.main}`,
},
}));
const OverviewHighlight = (0, mobx_react_1.observer)(function OverviewHighlight({ model, overview, }) {
const { classes } = useStyles();
const { highlight, cytobandOffset } = model;
const session = (0, util_1.getSession)(model);
const { assemblyManager } = session;
return highlight
.map(r => {
var _a;
const asm = assemblyManager.get(r.assemblyName);
const refName = (_a = asm === null || asm === void 0 ? void 0 : asm.getCanonicalRefName(r.refName)) !== null && _a !== void 0 ? _a : r.refName;
const s = overview.bpToPx({
...r,
refName,
coord: r.start,
});
const e = overview.bpToPx({
...r,
refName,
coord: r.end,
});
return s !== undefined && e !== undefined
? {
width: Math.abs(e - s),
left: s + cytobandOffset,
}
: undefined;
})
.filter(util_1.notEmpty)
.map(({ left, width }, idx) => ((0, jsx_runtime_1.jsx)("div", { className: classes.highlight, style: {
width: width,
left: left,
} }, `${left}_${width}_${idx}`)));
});
exports.default = OverviewHighlight;