@jbrowse/plugin-linear-comparative-view 3.7.0 → 4.0.0

package/esm/LinearComparativeView/components/LinearComparativeRenderArea.js

@@ -2,9 +2,9 @@ import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-run
 import { getConf } from '@jbrowse/core/configuration';
 import { ResizeHandle } from '@jbrowse/core/ui';
 import { getEnv } from '@jbrowse/core/util';
+import { makeStyles } from '@jbrowse/core/util/tss-react';
 import { observer } from 'mobx-react';
 import { Fragment } from 'react/jsx-runtime';
-import { makeStyles } from 'tss-react/mui';
 const useStyles = makeStyles()({
     container: {
         display: 'grid',
@@ -23,17 +23,18 @@ function View({ view }) {
     const { ReactComponent } = pluginManager.getViewType(view.type);
     return _jsx(ReactComponent, { model: view });
 }
-const LinearComparativeRenderArea = observer(function ({ model, }) {
+const LinearComparativeRenderArea = observer(function LinearComparativeRenderArea({ model, }) {
     const { classes } = useStyles();
     const { views, levels } = model;
-    return (_jsx("div", { className: classes.container, children: views.map((view, i) => (_jsxs(Fragment, { children: [i > 0 ? (_jsxs(_Fragment, { children: [_jsx("div", { className: classes.container, children: _jsx(Overlays, { model: model, level: i - 1 }) }), _jsx(ResizeHandle, { onDrag: n => { var _a, _b; return (_a = levels[i - 1]) === null || _a === void 0 ? void 0 : _a.setHeight((((_b = levels[i - 1]) === null || _b === void 0 ? void 0 : _b.height) || 0) + n); }, className: classes.resizeHandle })] })) : null, _jsx(View, { view: view })] }, view.id))) }));
+    return (_jsx("div", { className: classes.container, children: views.map((view, i) => (_jsxs(Fragment, { children: [i > 0 ? (_jsxs(_Fragment, { children: [_jsx("div", { className: classes.container, children: _jsx(Overlays, { model: model, level: i - 1 }) }), _jsx(ResizeHandle, { onDrag: n => levels[i - 1]?.setHeight((levels[i - 1]?.height || 0) + n), className: classes.resizeHandle })] })) : null, _jsx(View, { view: view })] }, view.id))) }));
 });
-const Overlays = observer(function ({ model, level, }) {
-    var _a;
+const Overlays = observer(function Overlays({ model, level, }) {
     const { classes } = useStyles();
-    return (_jsx(_Fragment, { children: (_a = model.levels[level]) === null || _a === void 0 ? void 0 : _a.tracks.map(track => {
-            const [display] = track.displays;
-            const { RenderingComponent } = display;
+    const levelImpl = model.levels[level];
+    const tracks = levelImpl.tracks;
+    return (_jsx(_Fragment, { children: tracks.map(track => {
+            const display = track.displays[0];
+            const RenderingComponent = display?.RenderingComponent;
             const trackId = getConf(track, 'trackId');
             return RenderingComponent ? (_jsx("div", { className: classes.overlay, style: {
                     height: display.height,

package/esm/LinearComparativeView/components/LinearComparativeView.d.ts

@@ -1,4 +1,4 @@
-import type { LinearComparativeViewModel } from '../model';
+import type { LinearComparativeViewModel } from '../model.ts';
 declare const LinearComparativeView: ({ model, }: {
     model: LinearComparativeViewModel;
 }) => import("react/jsx-runtime").JSX.Element;

package/esm/LinearComparativeView/components/LinearComparativeView.js

@@ -1,9 +1,9 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { makeStyles } from '@jbrowse/core/util/tss-react';
 import { observer } from 'mobx-react';
-import { makeStyles } from 'tss-react/mui';
-import Header from './Header';
-import LinearComparativeRenderArea from './LinearComparativeRenderArea';
-import Rubberband from './Rubberband';
+import Header from "./Header.js";
+import LinearComparativeRenderArea from "./LinearComparativeRenderArea.js";
+import Rubberband from "./Rubberband.js";
 const useStyles = makeStyles()(theme => ({
     rubberbandContainer: {
         position: 'relative',
@@ -18,7 +18,7 @@ const useStyles = makeStyles()(theme => ({
         },
     },
 }));
-const LinearComparativeView = observer(function ({ model, }) {
+const LinearComparativeView = observer(function LinearComparativeView({ model, }) {
     const { classes } = useStyles();
     return (_jsxs("div", { className: classes.rubberbandContainer, children: [_jsx(Header, { model: model }), _jsx(Rubberband, { model: model, ControlComponent: _jsx("div", { className: classes.rubberbandDiv }) }), _jsx(LinearComparativeRenderArea, { model: model })] }));
 });

package/esm/LinearComparativeView/components/MinLengthSlider.d.ts

@@ -1,4 +1,4 @@
-import type { LinearComparativeViewModel } from '../model';
+import type { LinearComparativeViewModel } from '../model.ts';
 declare const MinLengthSlider: ({ model, }: {
     model: LinearComparativeViewModel;
 }) => import("react/jsx-runtime").JSX.Element;

package/esm/LinearComparativeView/components/MinLengthSlider.js

@@ -1,9 +1,10 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { useEffect, useState } from 'react';
+import { toLocale } from '@jbrowse/core/util';
+import { makeStyles } from '@jbrowse/core/util/tss-react';
 import { Box, Slider, Typography } from '@mui/material';
 import { observer } from 'mobx-react';
-import { makeStyles } from 'tss-react/mui';
-import SliderTooltip from './SliderTooltip';
+import SliderTooltip from "./SliderTooltip.js";
 const useStyles = makeStyles()({
     container: {
         display: 'flex',
@@ -13,12 +14,11 @@ const useStyles = makeStyles()({
         minWidth: 150,
     },
 });
-const MinLengthSlider = observer(function ({ model, }) {
-    var _a, _b, _c;
+const MinLengthSlider = observer(function MinLengthSlider({ model, }) {
     const { classes } = useStyles();
     const { levels } = model;
-    const firstDisplay = (_b = (_a = levels[0]) === null || _a === void 0 ? void 0 : _a.tracks[0]) === null || _b === void 0 ? void 0 : _b.displays[0];
-    const minAlignmentLength = (_c = firstDisplay === null || firstDisplay === void 0 ? void 0 : firstDisplay.minAlignmentLength) !== null && _c !== void 0 ? _c : 0;
+    const firstDisplay = levels[0]?.tracks[0]?.displays[0];
+    const minAlignmentLength = firstDisplay?.minAlignmentLength ?? 0;
     const [minLengthValue, setMinLengthValue] = useState(Math.log2(Math.max(1, minAlignmentLength)) * 100);
     useEffect(() => {
         setMinLengthValue(Math.log2(Math.max(1, minAlignmentLength)) * 100);
@@ -35,7 +35,7 @@ const MinLengthSlider = observer(function ({ model, }) {
                             }
                         }
                     }
-                }, min: 0, max: Math.log2(1000000) * 100, valueLabelDisplay: "auto", valueLabelFormat: newValue => Math.round(2 ** (newValue / 100)).toLocaleString(), size: "small", style: { minWidth: 100 }, slots: {
+                }, min: 0, max: Math.log2(1000000) * 100, valueLabelDisplay: "auto", valueLabelFormat: val => toLocale(Math.round(2 ** (val / 100))), size: "small", style: { minWidth: 100 }, slots: {
                     valueLabel: SliderTooltip,
                 } })] }));
 });

package/esm/LinearComparativeView/components/OpacitySlider.d.ts

@@ -1,4 +1,4 @@
-import type { LinearComparativeViewModel } from '../model';
+import type { LinearComparativeViewModel } from '../model.ts';
 declare const OpacitySlider: ({ model, }: {
     model: LinearComparativeViewModel;
 }) => import("react/jsx-runtime").JSX.Element;

package/esm/LinearComparativeView/components/OpacitySlider.js

@@ -1,8 +1,8 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { makeStyles } from '@jbrowse/core/util/tss-react';
 import { Box, Slider, Typography } from '@mui/material';
 import { observer } from 'mobx-react';
-import { makeStyles } from 'tss-react/mui';
-import SliderTooltip from './SliderTooltip';
+import SliderTooltip from "./SliderTooltip.js";
 const useStyles = makeStyles()({
     container: {
         display: 'flex',
@@ -12,12 +12,11 @@ const useStyles = makeStyles()({
         minWidth: 150,
     },
 });
-const OpacitySlider = observer(function ({ model, }) {
-    var _a, _b, _c;
+const OpacitySlider = observer(function OpacitySlider({ model, }) {
     const { classes } = useStyles();
     const { levels } = model;
-    const firstDisplay = (_b = (_a = levels[0]) === null || _a === void 0 ? void 0 : _a.tracks[0]) === null || _b === void 0 ? void 0 : _b.displays[0];
-    const alpha = (_c = firstDisplay === null || firstDisplay === void 0 ? void 0 : firstDisplay.alpha) !== null && _c !== void 0 ? _c : 1;
+    const firstDisplay = levels[0]?.tracks[0]?.displays[0];
+    const alpha = firstDisplay?.alpha ?? 1;
     const exponent = 3;
     const alphaToSlider = (a) => Math.pow(a, 1 / exponent);
     const sliderToAlpha = (s) => Math.pow(s, exponent);

package/esm/LinearComparativeView/components/Rubberband.d.ts

@@ -1,4 +1,4 @@
-import type { LinearComparativeViewModel } from '../model';
+import type { LinearComparativeViewModel } from '../model.ts';
 type LCV = LinearComparativeViewModel;
 declare const Rubberband: ({ model, ControlComponent, }: {
     model: LCV;

package/esm/LinearComparativeView/components/Rubberband.js

@@ -1,11 +1,11 @@
 import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
 import { useRef } from 'react';
 import { Menu } from '@jbrowse/core/ui';
+import { makeStyles } from '@jbrowse/core/util/tss-react';
 import { observer } from 'mobx-react';
-import { makeStyles } from 'tss-react/mui';
-import RubberbandSpan from './RubberbandSpan';
-import VerticalGuide from './VerticalGuide';
-import { useRangeSelect } from './useRangeSelect';
+import RubberbandSpan from "./RubberbandSpan.js";
+import VerticalGuide from "./VerticalGuide.js";
+import { useRangeSelect } from "./useRangeSelect.js";
 const useStyles = makeStyles()({
     rubberbandControl: {
         cursor: 'crosshair',
@@ -15,7 +15,7 @@ const useStyles = makeStyles()({
         zIndex: 900,
     },
 });
-const Rubberband = observer(function ({ model, ControlComponent = _jsx("div", {}), }) {
+const Rubberband = observer(function Rubberband({ model, ControlComponent = _jsx("div", {}), }) {
     const ref = useRef(null);
     const { classes } = useStyles();
     const { guideX, rubberbandOn, leftBpOffset, rightBpOffset, numOfBpSelected, width, left, anchorPosition, open, handleMenuItemClick, handleClose, mouseMove, mouseDown, mouseOut, } = useRangeSelect(ref, model);

package/esm/LinearComparativeView/components/RubberbandSpan.js

@@ -1,9 +1,9 @@
 import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
 import { useState } from 'react';
 import { getBpDisplayStr, stringify } from '@jbrowse/core/util';
+import { makeStyles } from '@jbrowse/core/util/tss-react';
 import { Typography, alpha } from '@mui/material';
-import { makeStyles } from 'tss-react/mui';
-import RubberbandTooltip from './RubberbandTooltip';
+import RubberbandTooltip from "./RubberbandTooltip.js";
 const useStyles = makeStyles()(theme => {
     const { tertiary } = theme.palette;
     const background = alpha(tertiary.light, 0.7);
@@ -23,9 +23,7 @@ const useStyles = makeStyles()(theme => {
 export default function RubberbandSpan({ leftBpOffset, rightBpOffset, numOfBpSelected, left, width, top = 0, sticky = false, }) {
     const { classes } = useStyles();
     const [anchorEl, setAnchorEl] = useState(null);
-    return (_jsxs(_Fragment, { children: [anchorEl ? (_jsxs(_Fragment, { children: [_jsx(RubberbandTooltip, { side: "left", anchorEl: anchorEl, text: leftBpOffset.map((l, idx) => (_jsx("div", { children: stringify(l, true) }, `${JSON.stringify(l)}-left-${idx}`))) }), _jsx(RubberbandTooltip, { side: "right", anchorEl: anchorEl, text: rightBpOffset.map((l, idx) => (_jsx("div", { children: stringify(l, true) }, `${JSON.stringify(l)}-right-${idx}`))) })] })) : null, _jsx("div", { className: classes.rubberband, style: { left, width }, children: numOfBpSelected ? (_jsx(Typography, { ref: el => {
-                        setAnchorEl(el);
-                    }, variant: "h6", className: classes.rubberbandText, style: {
+    return (_jsxs(_Fragment, { children: [anchorEl ? (_jsxs(_Fragment, { children: [_jsx(RubberbandTooltip, { side: "left", anchorEl: anchorEl, text: leftBpOffset.map((l, idx) => (_jsx("div", { children: stringify(l, true) }, `${JSON.stringify(l)}-left-${idx}`))) }), _jsx(RubberbandTooltip, { side: "right", anchorEl: anchorEl, text: rightBpOffset.map((l, idx) => (_jsx("div", { children: stringify(l, true) }, `${JSON.stringify(l)}-right-${idx}`))) })] })) : null, _jsx("div", { className: classes.rubberband, style: { left, width }, children: numOfBpSelected ? (_jsx(Typography, { ref: setAnchorEl, variant: "h6", className: classes.rubberbandText, style: {
                         top,
                         position: sticky ? 'sticky' : undefined,
                     }, children: numOfBpSelected.map((n, i) => (_jsx("div", { children: getBpDisplayStr(n) }, `bpSelectedRow-${i}`))) })) : null })] }));

package/esm/LinearComparativeView/components/VerticalGuide.d.ts

@@ -1,4 +1,4 @@
-import type { LinearComparativeViewModel } from '../model';
+import type { LinearComparativeViewModel } from '../model.ts';
 type LCV = LinearComparativeViewModel;
 declare const VerticalGuide: ({ model, coordX, }: {
     model: LCV;

package/esm/LinearComparativeView/components/VerticalGuide.js

@@ -1,8 +1,8 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import { stringify } from '@jbrowse/core/util';
+import { makeStyles } from '@jbrowse/core/util/tss-react';
 import { Tooltip } from '@mui/material';
 import { observer } from 'mobx-react';
-import { makeStyles } from 'tss-react/mui';
 const useStyles = makeStyles()({
     guide: {
         pointerEvents: 'none',
@@ -13,7 +13,7 @@ const useStyles = makeStyles()({
         zIndex: 1001,
     },
 });
-const VerticalGuide = observer(function ({ model, coordX, }) {
+const VerticalGuide = observer(function VerticalGuide({ model, coordX, }) {
     const { classes } = useStyles();
     return (_jsx(Tooltip, { open: true, placement: "top", title: model.views
             .map(view => view.pxToBp(coordX))

package/esm/LinearComparativeView/components/useRangeSelect.d.ts

@@ -1,5 +1,5 @@
 import type React from 'react';
-import type { LinearComparativeViewModel } from '../model';
+import type { LinearComparativeViewModel } from '../model.ts';
 interface AnchorPosition {
     offsetX: number;
     clientX: number;

package/esm/LinearComparativeView/components/useRangeSelect.js

@@ -1,6 +1,6 @@
 import { useCallback, useEffect, useState } from 'react';
 import { transaction } from 'mobx';
-import { getRelativeX } from './util';
+import { getRelativeX } from "./util.js";
 export function useRangeSelect(ref, model) {
     const [startX, setStartX] = useState();
     const [currentX, setCurrentX] = useState();

package/esm/LinearComparativeView/components/util.js

@@ -1,3 +1,3 @@
 export function getRelativeX(event, element) {
-    return event.clientX - ((element === null || element === void 0 ? void 0 : element.getBoundingClientRect().left) || 0);
+    return event.clientX - (element?.getBoundingClientRect().left || 0);
 }

package/esm/LinearComparativeView/index.js

@@ -1,6 +1,6 @@
 import { lazy } from 'react';
 import ViewType from '@jbrowse/core/pluggableElementTypes/ViewType';
-import modelFactory from './model';
+import modelFactory from "./model.js";
 export default function LinearComparativeViewF(pluginManager) {
     pluginManager.addViewType(() => {
         return new ViewType({
@@ -10,7 +10,7 @@ export default function LinearComparativeViewF(pluginManager) {
             },
             displayName: 'Linear comparative view',
             stateModel: modelFactory(pluginManager),
-            ReactComponent: lazy(() => import('./components/LinearComparativeView')),
+            ReactComponent: lazy(() => import("./components/LinearComparativeView.js")),
         });
     });
 }