@jbrowse/plugin-variants 3.7.0 → 4.0.0

package/esm/MultiLinearVariantDisplay/model.js

@@ -1,12 +1,9 @@
-import { getSession } from '@jbrowse/core/util';
-import { isAlive, types } from 'mobx-state-tree';
-import MultiVariantBaseModelF from '../shared/MultiVariantBaseModel';
+import { types } from '@jbrowse/mobx-state-tree';
+import MultiVariantBaseModelF from "../shared/MultiVariantBaseModel.js";
 export function stateModelFactory(configSchema) {
     return types
         .compose('MultiLinearVariantDisplay', MultiVariantBaseModelF(configSchema), types.model({
         type: types.literal('MultiLinearVariantDisplay'),
-        rowHeightSetting: types.optional(types.number, 11),
-        minorAlleleFrequencyFilter: types.optional(types.number, 0),
     }))
         .views(() => ({
         get rendererTypeName() {
@@ -16,25 +13,8 @@ export function stateModelFactory(configSchema) {
         .actions(self => {
         const { renderSvg: superRenderSvg } = self;
         return {
-            afterAttach() {
-                ;
-                (async () => {
-                    try {
-                        const { getMultiVariantSourcesAutorun } = await import('../getMultiVariantSourcesAutorun');
-                        const { getMultiVariantFeaturesAutorun } = await import('../getMultiVariantFeaturesAutorun');
-                        getMultiVariantSourcesAutorun(self);
-                        getMultiVariantFeaturesAutorun(self);
-                    }
-                    catch (e) {
-                        if (isAlive(self)) {
-                            console.error(e);
-                            getSession(self).notifyError(`${e}`, e);
-                        }
-                    }
-                })();
-            },
             async renderSvg(opts) {
-                const { renderSvg } = await import('./renderSvg');
+                const { renderSvg } = await import("./renderSvg.js");
                 return renderSvg(self, opts, superRenderSvg);
             },
         };

package/esm/MultiLinearVariantDisplay/renderSvg.d.ts

@@ -1,3 +1,3 @@
-import type { MultiLinearVariantDisplayModel } from './model';
+import type { MultiLinearVariantDisplayModel } from './model.ts';
 import type { ExportSvgDisplayOptions } from '@jbrowse/plugin-linear-genome-view';
 export declare function renderSvg(self: MultiLinearVariantDisplayModel, opts: ExportSvgDisplayOptions, superRenderSvg: (opts: ExportSvgDisplayOptions) => Promise<React.ReactNode>): Promise<import("react/jsx-runtime").JSX.Element>;

package/esm/MultiLinearVariantDisplay/renderSvg.js

@@ -1,9 +1,9 @@
 import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
-import { getContainingView } from '@jbrowse/core/util';
 import { when } from 'mobx';
-import LegendBar from '../shared/components/MultiVariantLegendBar';
+import { makeSidebarSvg } from "../shared/makeSidebarSvg.js";
 export async function renderSvg(self, opts, superRenderSvg) {
     await when(() => !!self.regionCannotBeRenderedText);
-    const { offsetPx } = getContainingView(self);
-    return (_jsxs(_Fragment, { children: [_jsx("g", { children: await superRenderSvg(opts) }), _jsx("g", { transform: `translate(${Math.max(-offsetPx, 0)})`, children: _jsx(LegendBar, { model: self, orientation: "left", exportSVG: true }) })] }));
+    const dataSvg = await superRenderSvg(opts);
+    const legendSvg = await makeSidebarSvg(self);
+    return (_jsxs(_Fragment, { children: [_jsx("g", { id: "data-layer", children: dataSvg }), legendSvg] }));
 }

package/esm/MultiLinearVariantMatrixDisplay/components/LinesConnectingMatrixToGenomicPosition.d.ts

@@ -1,6 +1,12 @@
-import type { MultiLinearVariantMatrixDisplayModel } from '../model';
+import type { Feature } from '@jbrowse/core/util';
+interface MinimalModel {
+    setLineZoneHeight: (arg: number) => number;
+    height: number;
+    lineZoneHeight: number;
+    featuresVolatile: Feature[] | undefined;
+}
 declare const LinesConnectingMatrixToGenomicPosition: ({ model, exportSVG, }: {
-    model: MultiLinearVariantMatrixDisplayModel;
+    model: MinimalModel;
     exportSVG?: boolean;
 }) => import("react/jsx-runtime").JSX.Element | null;
 export default LinesConnectingMatrixToGenomicPosition;

package/esm/MultiLinearVariantMatrixDisplay/components/LinesConnectingMatrixToGenomicPosition.js

@@ -1,19 +1,23 @@
+import { createElement as _createElement } from "react";
 import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
 import { forwardRef, isValidElement, useState } from 'react';
 import { ResizeHandle, SanitizedHTML } from '@jbrowse/core/ui';
 import BaseTooltip from '@jbrowse/core/ui/BaseTooltip';
-import { getContainingView, getSession } from '@jbrowse/core/util';
+import { getContainingView, getSession, getStrokeProps, } from '@jbrowse/core/util';
+import { makeStyles } from '@jbrowse/core/util/tss-react';
+import { alpha, useTheme } from '@mui/material';
 import { observer } from 'mobx-react';
-import { makeStyles } from 'tss-react/mui';
-const useStyles = makeStyles()({
+const useStyles = makeStyles()(theme => ({
     resizeHandle: {
-        height: 4,
-        background: '#ccc',
+        height: 5,
         boxSizing: 'border-box',
-        borderTop: '1px solid #fafafa',
+        background: 'transparent',
+        '&:hover': {
+            background: theme.palette.divider,
+        },
     },
-});
-const Wrapper = observer(function ({ children, model, exportSVG, }) {
+}));
+const Wrapper = observer(function Wrapper({ children, model, exportSVG, }) {
     const { height } = model;
     const { width, offsetPx } = getContainingView(model);
     const left = Math.max(0, -offsetPx);
@@ -25,8 +29,7 @@ const Wrapper = observer(function ({ children, model, exportSVG, }) {
             width,
         }, children: children }));
 });
-const LinesConnectingMatrixToGenomicPosition = observer(function ({ model, exportSVG, }) {
-    var _a;
+const LinesConnectingMatrixToGenomicPosition = observer(function LinesConnectingMatrixToGenomicPosition({ model, exportSVG, }) {
     const { classes } = useStyles();
     const { assemblyManager } = getSession(model);
     const view = getContainingView(model);
@@ -34,8 +37,8 @@ const LinesConnectingMatrixToGenomicPosition = observer(function ({ model, expor
     const { lineZoneHeight, featuresVolatile } = model;
     const { assemblyNames, dynamicBlocks } = view;
     const assembly = assemblyManager.get(assemblyNames[0]);
-    const b0 = ((_a = dynamicBlocks.contentBlocks[0]) === null || _a === void 0 ? void 0 : _a.widthPx) || 0;
-    const w = b0 / ((featuresVolatile === null || featuresVolatile === void 0 ? void 0 : featuresVolatile.length) || 1);
+    const b0 = dynamicBlocks.contentBlocks[0]?.widthPx || 0;
+    const w = b0 / (featuresVolatile?.length || 1);
     return assembly && featuresVolatile ? (_jsxs(_Fragment, { children: [_jsxs(Wrapper, { exportSVG: exportSVG, model: model, children: [_jsx(AllLines, { model: model, setMouseOverLine: setMouseOverLine }), mouseOverLine ? (_jsxs(_Fragment, { children: [_jsx("line", { stroke: "#f00c", strokeWidth: 2, style: {
                                     pointerEvents: 'none',
                                 }, x1: mouseOverLine.idx * w + w / 2, x2: mouseOverLine.c, y1: lineZoneHeight, y2: 0, onMouseLeave: () => {
@@ -48,31 +51,31 @@ const LinesConnectingMatrixToGenomicPosition = observer(function ({ model, expor
 const TooltipContents = forwardRef(function TooltipContents2({ message }, ref) {
     return (_jsx("div", { ref: ref, children: isValidElement(message) ? (message) : message ? (_jsx(SanitizedHTML, { html: String(message) })) : null }));
 });
-const LineTooltip = observer(function ({ contents }) {
+const LineTooltip = observer(function LineTooltip({ contents, }) {
     return contents ? (_jsx(BaseTooltip, { children: _jsx(TooltipContents, { message: contents }) })) : null;
 });
-const AllLines = observer(function ({ model, setMouseOverLine, }) {
-    var _a;
+const AllLines = observer(function AllLines({ model, setMouseOverLine, }) {
+    const theme = useTheme();
     const { assemblyManager } = getSession(model);
     const view = getContainingView(model);
     const { lineZoneHeight, featuresVolatile } = model;
     const { offsetPx, assemblyNames, dynamicBlocks } = view;
     const assembly = assemblyManager.get(assemblyNames[0]);
-    const b0 = ((_a = dynamicBlocks.contentBlocks[0]) === null || _a === void 0 ? void 0 : _a.widthPx) || 0;
-    const w = b0 / ((featuresVolatile === null || featuresVolatile === void 0 ? void 0 : featuresVolatile.length) || 1);
+    const b0 = dynamicBlocks.contentBlocks[0]?.widthPx || 0;
+    const w = b0 / (featuresVolatile?.length || 1);
     const l = Math.max(offsetPx, 0);
+    const p = getStrokeProps(alpha(theme.palette.text.primary, 0.4));
     return assembly && featuresVolatile ? (_jsx(_Fragment, { children: featuresVolatile.map((f, i) => {
-            var _a;
             const ref = f.get('refName');
-            const c = (((_a = view.bpToPx({
-                refName: assembly.getCanonicalRefName(ref) || ref,
+            const c = (view.bpToPx({
+                refName: assembly.getCanonicalRefName2(ref),
                 coord: f.get('start'),
-            })) === null || _a === void 0 ? void 0 : _a.offsetPx) || 0) - l;
-            return (_jsx("line", { stroke: "#0004", strokeWidth: 1, x1: i * w + w / 2, x2: c, y1: lineZoneHeight, y2: 0, onMouseEnter: () => {
+            })?.offsetPx || 0) - l;
+            return (_createElement("line", { ...p, strokeWidth: 1, key: f.id(), x1: i * w + w / 2, x2: c, y1: lineZoneHeight, y2: 0, onMouseEnter: () => {
                     setMouseOverLine({ f, idx: i, c });
                 }, onMouseLeave: () => {
                     setMouseOverLine(undefined);
-                } }, f.id()));
+                } }));
         }) })) : null;
 });
 export default LinesConnectingMatrixToGenomicPosition;

package/esm/MultiLinearVariantMatrixDisplay/components/VariantDisplayComponent.d.ts

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

package/esm/MultiLinearVariantMatrixDisplay/components/VariantDisplayComponent.js

@@ -1,26 +1,15 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { useRef, useState } from 'react';
-import { BaseLinearDisplayComponent } from '@jbrowse/plugin-linear-genome-view';
+import { useRef } from 'react';
 import { observer } from 'mobx-react';
-import LinesConnectingMatrixToGenomicPosition from './LinesConnectingMatrixToGenomicPosition';
-import Crosshair from '../../shared/components/MultiVariantCrosshairs';
-import LegendBar from '../../shared/components/MultiVariantLegendBar';
-const MultiLinearVariantMatrixDisplayComponent = observer(function (props) {
+import LinesConnectingMatrixToGenomicPosition from "./LinesConnectingMatrixToGenomicPosition.js";
+import Crosshair from "../../shared/components/MultiVariantCrosshairs.js";
+import ScrollableVariantContainer from "../../shared/components/ScrollableVariantContainer.js";
+import { useMouseTracking } from "../../shared/hooks/useMouseTracking.js";
+const MultiLinearVariantMatrixDisplayComponent = observer(function MultiLinearVariantMatrixDisplayComponent(props) {
     const { model } = props;
-    const { lineZoneHeight } = model;
+    const { lineZoneHeight, height } = model;
     const ref = useRef(null);
-    const [mouseY, setMouseY] = useState();
-    const [mouseX, setMouseX] = useState();
-    return (_jsxs("div", { ref: ref, onMouseMove: event => {
-            var _a;
-            const rect = (_a = ref.current) === null || _a === void 0 ? void 0 : _a.getBoundingClientRect();
-            const top = (rect === null || rect === void 0 ? void 0 : rect.top) || 0;
-            const left = (rect === null || rect === void 0 ? void 0 : rect.left) || 0;
-            setMouseY(event.clientY - top);
-            setMouseX(event.clientX - left);
-        }, onMouseLeave: () => {
-            setMouseY(undefined);
-            setMouseX(undefined);
-        }, children: [_jsxs("div", { style: { position: 'relative' }, children: [_jsx(LinesConnectingMatrixToGenomicPosition, { model: model }), _jsxs("div", { style: { position: 'absolute', top: lineZoneHeight }, children: [_jsx(LegendBar, { model: model }), _jsx(BaseLinearDisplayComponent, { ...props })] })] }), mouseX && mouseY && mouseY > lineZoneHeight ? (_jsx(Crosshair, { mouseX: mouseX, mouseY: mouseY, model: model })) : null] }));
+    const { mouseState, handleMouseMove, handleMouseLeave } = useMouseTracking(ref);
+    return (_jsxs("div", { ref: ref, style: { position: 'relative', height }, onMouseMove: handleMouseMove, onMouseLeave: handleMouseLeave, children: [_jsx("div", { "data-testid": "connecting-lines", children: _jsx(LinesConnectingMatrixToGenomicPosition, { model: model }) }), _jsx(ScrollableVariantContainer, { model: model, topOffset: lineZoneHeight, testId: "matrix-display" }), mouseState && mouseState.y > lineZoneHeight ? (_jsx(Crosshair, { mouseX: mouseState.x, mouseY: mouseState.y, offsetX: mouseState.offsetX, offsetY: mouseState.offsetY, model: model })) : null] }));
 });
 export default MultiLinearVariantMatrixDisplayComponent;

package/esm/MultiLinearVariantMatrixDisplay/configSchema.d.ts

@@ -1,13 +1,13 @@
 import type PluginManager from '@jbrowse/core/PluginManager';
-export default function configSchemaF(pluginManager: PluginManager): import("@jbrowse/core/configuration/configurationSchema").ConfigurationSchemaType<{
-    renderer: import("@jbrowse/core/configuration/configurationSchema").ConfigurationSchemaType<{}, import("@jbrowse/core/configuration/configurationSchema").ConfigurationSchemaOptions<undefined, undefined>>;
+export default function configSchemaF(pluginManager: PluginManager): import("node_modules/@jbrowse/core/src/configuration/configurationSchema.ts").ConfigurationSchemaType<{
+    renderer: import("node_modules/@jbrowse/core/src/configuration/configurationSchema.ts").ConfigurationSchemaType<{}, import("node_modules/@jbrowse/core/src/configuration/configurationSchema.ts").ConfigurationSchemaOptions<undefined, undefined>>;
     height: {
         type: string;
         defaultValue: number;
     };
-}, import("@jbrowse/core/configuration/configurationSchema").ConfigurationSchemaOptions<import("@jbrowse/core/configuration/configurationSchema").ConfigurationSchemaType<{
-    renderer: import("mobx-state-tree").IAnyModelType;
-}, import("@jbrowse/core/configuration/configurationSchema").ConfigurationSchemaOptions<import("@jbrowse/core/configuration/configurationSchema").ConfigurationSchemaType<{
+}, import("node_modules/@jbrowse/core/src/configuration/configurationSchema.ts").ConfigurationSchemaOptions<import("node_modules/@jbrowse/core/src/configuration/configurationSchema.ts").ConfigurationSchemaType<{
+    renderer: import("@jbrowse/mobx-state-tree").IAnyModelType;
+}, import("node_modules/@jbrowse/core/src/configuration/configurationSchema.ts").ConfigurationSchemaOptions<import("node_modules/@jbrowse/core/src/configuration/configurationSchema.ts").ConfigurationSchemaType<{
     maxFeatureScreenDensity: {
         type: string;
         description: string;
@@ -34,4 +34,4 @@ export default function configSchemaF(pluginManager: PluginManager): import("@jb
         description: string;
         defaultValue: never[];
     };
-}, import("@jbrowse/core/configuration/configurationSchema").ConfigurationSchemaOptions<undefined, "displayId">>, undefined>>, undefined>>;
+}, import("node_modules/@jbrowse/core/src/configuration/configurationSchema.ts").ConfigurationSchemaOptions<undefined, "displayId">>, undefined>>, undefined>>;

package/esm/MultiLinearVariantMatrixDisplay/configSchema.js

@@ -1,6 +1,6 @@
 import { ConfigurationSchema } from '@jbrowse/core/configuration';
 import { linearBasicDisplayConfigSchemaFactory } from '@jbrowse/plugin-linear-genome-view';
-import configSchema from '../MultiLinearVariantMatrixRenderer/configSchema';
+import configSchema from "../MultiLinearVariantMatrixRenderer/configSchema.js";
 function x() { }
 export default function configSchemaF(pluginManager) {
     return ConfigurationSchema('LinearVariantMatrixDisplay', {

package/esm/MultiLinearVariantMatrixDisplay/index.js

@@ -1,18 +1,19 @@
+import { lazy } from 'react';
 import DisplayType from '@jbrowse/core/pluggableElementTypes/DisplayType';
-import MultiLinearVariantMatrixDisplayComponent from './components/VariantDisplayComponent';
-import configSchemaF from './configSchema';
-import stateModelFactory from './model';
+import configSchemaF from "./configSchema.js";
+import stateModelFactory from "./model.js";
 export default function LinearVariantMatrixDisplayF(pluginManager) {
     pluginManager.addDisplayType(() => {
         const configSchema = configSchemaF(pluginManager);
         return new DisplayType({
             name: 'LinearVariantMatrixDisplay',
             displayName: 'Multi-sample variant display (matrix)',
+            helpText: 'Draws multi-sample variant using a "matrix" where the visualization does not correspond to actual base pair coordinates, but uses lines to connect the columns of the matrix to their base pair coordinates',
             configSchema,
             stateModel: stateModelFactory(configSchema),
             trackType: 'VariantTrack',
             viewType: 'LinearGenomeView',
-            ReactComponent: MultiLinearVariantMatrixDisplayComponent,
+            ReactComponent: lazy(() => import("./components/VariantDisplayComponent.js")),
         });
     });
 }