@jbrowse/plugin-variants 2.17.0 → 2.18.0

package/esm/MultiLinearVariantDisplay/model.js

@@ -0,0 +1,206 @@
+import { lazy } from 'react';
+import { set1 } from '@jbrowse/core/ui/colors';
+import { getSession } from '@jbrowse/core/util';
+import { stopStopToken } from '@jbrowse/core/util/stopToken';
+import { linearBareDisplayStateModelFactory, } from '@jbrowse/plugin-linear-genome-view';
+import deepEqual from 'fast-deep-equal';
+import { isAlive, types } from 'mobx-state-tree';
+import { randomColor } from '../util';
+const Tooltip = lazy(() => import('../shared/Tooltip'));
+const SetColorDialog = lazy(() => import('../shared/SetColorDialog'));
+const ClusterDialog = lazy(() => import('../shared/ClusterDialog'));
+export function stateModelFactory(pluginManager, configSchema) {
+    return types
+        .compose('MultiLinearVariantDisplay', linearBareDisplayStateModelFactory(configSchema), types.model({
+        type: types.literal('MultiLinearVariantDisplay'),
+        layout: types.optional(types.frozen(), []),
+        rowHeightSetting: types.optional(types.number, 11),
+        autoHeight: false,
+        showSidebarLabelsSetting: true,
+    }))
+        .volatile(() => ({
+        sourcesLoadingStopToken: undefined,
+        featureUnderMouseVolatile: undefined,
+        sourcesVolatile: undefined,
+    }))
+        .actions(self => ({
+        setSourcesLoading(str) {
+            if (self.sourcesLoadingStopToken) {
+                stopStopToken(self.sourcesLoadingStopToken);
+            }
+            self.sourcesLoadingStopToken = str;
+        },
+        setLayout(layout) {
+            self.layout = layout;
+        },
+        clearLayout() {
+            self.layout = [];
+        },
+        setSources(sources) {
+            if (!deepEqual(sources, self.sourcesVolatile)) {
+                self.sourcesVolatile = sources;
+            }
+        },
+        setFeatureUnderMouse(f) {
+            self.featureUnderMouseVolatile = f;
+        },
+        setRowHeight(arg) {
+            self.rowHeightSetting = arg;
+        },
+        setAutoHeight(arg) {
+            self.autoHeight = arg;
+        },
+        setShowSidebarLabels(arg) {
+            self.showSidebarLabelsSetting = arg;
+        },
+    }))
+        .views(self => ({
+        get featureUnderMouse() {
+            return self.featureUnderMouseVolatile;
+        },
+        get TooltipComponent() {
+            return Tooltip;
+        },
+    }))
+        .views(self => ({
+        get rendererTypeName() {
+            return 'MultiVariantRenderer';
+        },
+        get sources() {
+            var _a;
+            const sources = Object.fromEntries(((_a = self.sourcesVolatile) === null || _a === void 0 ? void 0 : _a.map(s => [s.name, s])) || []);
+            const iter = self.layout.length ? self.layout : self.sourcesVolatile;
+            return iter === null || iter === void 0 ? void 0 : iter.map(s => ({
+                ...sources[s.name],
+                ...s,
+            })).map((s, i) => ({
+                ...s,
+                color: s.color || set1[i] || randomColor(s.name),
+            }));
+        },
+    }))
+        .views(self => ({
+        get rowHeight() {
+            const { autoHeight, sources, rowHeightSetting, height } = self;
+            return autoHeight ? height / ((sources === null || sources === void 0 ? void 0 : sources.length) || 1) : rowHeightSetting;
+        },
+    }))
+        .views(self => {
+        const { renderProps: superRenderProps } = self;
+        return {
+            get canDisplayLabels() {
+                return self.rowHeight > 8 && self.showSidebarLabelsSetting;
+            },
+            get totalHeight() {
+                var _a;
+                return self.rowHeight * (((_a = self.sources) === null || _a === void 0 ? void 0 : _a.length) || 1);
+            },
+            adapterProps() {
+                const superProps = superRenderProps();
+                return {
+                    ...superProps,
+                    displayModel: self,
+                    config: self.rendererConfig,
+                    rpcDriverName: self.rpcDriverName,
+                    sources: self.sources,
+                };
+            },
+        };
+    })
+        .views(self => ({
+        renderProps() {
+            const superProps = self.adapterProps();
+            return {
+                ...superProps,
+                notReady: superProps.notReady || !self.sources,
+                displayModel: self,
+                rpcDriverName: self.rpcDriverName,
+                height: self.height,
+                totalHeight: self.totalHeight,
+                rowHeight: self.rowHeight,
+                scrollTop: self.scrollTop,
+                onMouseMove: (_, f) => {
+                    self.setFeatureUnderMouse(f);
+                },
+                onMouseLeave: () => {
+                    self.setFeatureUnderMouse(undefined);
+                },
+            };
+        },
+    }))
+        .views(self => {
+        const { trackMenuItems: superTrackMenuItems } = self;
+        return {
+            trackMenuItems() {
+                return [
+                    ...superTrackMenuItems(),
+                    {
+                        label: 'Adjust to height of display?',
+                        type: 'checkbox',
+                        checked: self.autoHeight,
+                        onClick: () => {
+                            self.setAutoHeight(!self.autoHeight);
+                        },
+                    },
+                    {
+                        label: 'Show sidebar labels',
+                        type: 'checkbox',
+                        checked: self.showSidebarLabelsSetting,
+                        onClick: () => {
+                            self.setShowSidebarLabels(!self.showSidebarLabelsSetting);
+                        },
+                    },
+                    {
+                        label: 'Cluster by genotype',
+                        onClick: () => {
+                            getSession(self).queueDialog(handleClose => [
+                                ClusterDialog,
+                                {
+                                    model: self,
+                                    handleClose,
+                                },
+                            ]);
+                        },
+                    },
+                    {
+                        label: 'Edit colors/arrangement...',
+                        onClick: () => {
+                            getSession(self).queueDialog(handleClose => [
+                                SetColorDialog,
+                                {
+                                    model: self,
+                                    handleClose,
+                                },
+                            ]);
+                        },
+                    },
+                ];
+            },
+        };
+    })
+        .actions(self => {
+        const { renderSvg: superRenderSvg } = self;
+        return {
+            afterAttach() {
+                ;
+                (async () => {
+                    try {
+                        const { getMultiVariantSourcesAutorun } = await import('../getMultiVariantSourcesAutorun');
+                        getMultiVariantSourcesAutorun(self);
+                    }
+                    catch (e) {
+                        if (isAlive(self)) {
+                            console.error(e);
+                            getSession(self).notifyError(`${e}`, e);
+                        }
+                    }
+                })();
+            },
+            async renderSvg(opts) {
+                const { renderSvg } = await import('./renderSvg');
+                return renderSvg(self, opts, superRenderSvg);
+            },
+        };
+    });
+}
+export default stateModelFactory;

package/esm/MultiLinearVariantDisplay/renderSvg.d.ts

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

package/esm/MultiLinearVariantDisplay/renderSvg.js

@@ -0,0 +1,12 @@
+import React from 'react';
+import { getContainingView } from '@jbrowse/core/util';
+import { when } from 'mobx';
+import LegendBar from '../shared/LegendBar';
+export async function renderSvg(self, opts, superRenderSvg) {
+    await when(() => !!self.regionCannotBeRenderedText);
+    const { offsetPx } = getContainingView(self);
+    return (React.createElement(React.Fragment, null,
+        React.createElement("g", null, await superRenderSvg(opts)),
+        React.createElement("g", { transform: `translate(${Math.max(-offsetPx, 0)})` },
+            React.createElement(LegendBar, { model: self, orientation: "left", exportSVG: true }))));
+}

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

@@ -0,0 +1,7 @@
+import React from 'react';
+import type { MultiLinearVariantMatrixDisplayModel } from '../model';
+declare const LinesConnectingMatrixToGenomicPosition: ({ model, exportSVG, }: {
+    model: MultiLinearVariantMatrixDisplayModel;
+    exportSVG?: boolean;
+}) => React.JSX.Element | null;
+export default LinesConnectingMatrixToGenomicPosition;

package/esm/MultiLinearVariantMatrixDisplay/components/LinesConnectingMatrixToGenomicPosition.js

@@ -0,0 +1,37 @@
+import React from 'react';
+import { getContainingView, getSession } from '@jbrowse/core/util';
+import { observer } from 'mobx-react';
+const Wrapper = observer(function ({ children, model, exportSVG, }) {
+    const { height } = model;
+    const { width, offsetPx } = getContainingView(model);
+    const left = Math.max(0, -offsetPx);
+    return exportSVG ? (React.createElement("g", { transform: `translate(${left})` }, children)) : (React.createElement("svg", { style: {
+            position: 'absolute',
+            top: 0,
+            left,
+            pointerEvents: 'none',
+            height,
+            width,
+        } }, children));
+});
+const LinesConnectingMatrixToGenomicPosition = observer(function ({ model, exportSVG, }) {
+    var _a;
+    const { assemblyManager } = getSession(model);
+    const view = getContainingView(model);
+    const { 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 l = Math.max(offsetPx, 0);
+    return assembly && featuresVolatile ? (React.createElement(Wrapper, { exportSVG: exportSVG, model: model }, featuresVolatile.map((f, i) => {
+        var _a;
+        const ref = f.get('refName');
+        const c = (((_a = view.bpToPx({
+            refName: assembly.getCanonicalRefName(ref) || ref,
+            coord: f.get('start'),
+        })) === null || _a === void 0 ? void 0 : _a.offsetPx) || 0) - l;
+        return (React.createElement("line", { stroke: "black", key: f.id(), x1: i * w + w / 2, x2: c, y1: 20, y2: 0 }));
+    }))) : null;
+});
+export default LinesConnectingMatrixToGenomicPosition;

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

@@ -0,0 +1,6 @@
+import React from 'react';
+import type { MultiLinearVariantMatrixDisplayModel } from '../model';
+declare const MultiLinearVariantMatrixDisplayComponent: (props: {
+    model: MultiLinearVariantMatrixDisplayModel;
+}) => React.JSX.Element;
+export default MultiLinearVariantMatrixDisplayComponent;

package/esm/MultiLinearVariantMatrixDisplay/components/VariantDisplayComponent.js

@@ -0,0 +1,53 @@
+import React, { useRef, useState } from 'react';
+import { SanitizedHTML } from '@jbrowse/core/ui';
+import BaseTooltip from '@jbrowse/core/ui/BaseTooltip';
+import { getContainingView } from '@jbrowse/core/util';
+import { BaseLinearDisplayComponent } from '@jbrowse/plugin-linear-genome-view';
+import { observer } from 'mobx-react';
+import { makeStyles } from 'tss-react/mui';
+import LinesConnectingMatrixToGenomicPosition from './LinesConnectingMatrixToGenomicPosition';
+import LegendBar from '../../shared/LegendBar';
+const useStyles = makeStyles()({
+    cursor: {
+        pointerEvents: 'none',
+        zIndex: 1000,
+        position: 'relative',
+    },
+});
+const MultiLinearVariantMatrixDisplayComponent = observer(function (props) {
+    const { classes } = useStyles();
+    const { model } = props;
+    const { height, sources, rowHeight } = model;
+    const ref = useRef(null);
+    const [mouseY, setMouseY] = useState();
+    const [mouseX, setMouseX] = useState();
+    const { width } = getContainingView(model);
+    return (React.createElement("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);
+        } },
+        React.createElement("div", { style: { position: 'relative' } },
+            React.createElement(LinesConnectingMatrixToGenomicPosition, { model: model }),
+            React.createElement("div", { style: { position: 'absolute', top: 20 } },
+                React.createElement(LegendBar, { model: model }),
+                React.createElement(BaseLinearDisplayComponent, { ...props }))),
+        mouseY &&
+            mouseY > 20 &&
+            (sources === null || sources === void 0 ? void 0 : sources[Math.floor((mouseY - 20) / rowHeight)]) ? (React.createElement(React.Fragment, null,
+            React.createElement("svg", { className: classes.cursor, width: width, height: height },
+                React.createElement("line", { x1: 0, x2: width, y1: mouseY, y2: mouseY, stroke: "black" }),
+                React.createElement("line", { x1: mouseX, x2: mouseX, y1: 0, y2: height, stroke: "black" })),
+            React.createElement(BaseTooltip, null,
+                React.createElement(SanitizedHTML, { html: Object.entries(sources[Math.floor((mouseY - 20) / rowHeight)] || {})
+                        .filter(([key]) => key !== 'color')
+                        .map(([key, value]) => `${key}:${value}`)
+                        .join('\n') })))) : null));
+});
+export default MultiLinearVariantMatrixDisplayComponent;

package/esm/MultiLinearVariantMatrixDisplay/configSchema.d.ts

@@ -0,0 +1,37 @@
+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>>;
+    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<{
+    maxFeatureScreenDensity: {
+        type: string;
+        description: string;
+        defaultValue: number;
+    };
+    fetchSizeLimit: {
+        type: string;
+        defaultValue: number;
+        description: string;
+    };
+    height: {
+        type: string;
+        defaultValue: number;
+        description: string;
+    };
+    mouseover: {
+        type: string;
+        description: string;
+        defaultValue: string;
+        contextVariable: string[];
+    };
+    jexlFilters: {
+        type: string;
+        description: string;
+        defaultValue: never[];
+    };
+}, import("@jbrowse/core/configuration/configurationSchema").ConfigurationSchemaOptions<undefined, "displayId">>, undefined>>, undefined>>;

package/esm/MultiLinearVariantMatrixDisplay/configSchema.js

@@ -0,0 +1,16 @@
+import { ConfigurationSchema } from '@jbrowse/core/configuration';
+import { linearBasicDisplayConfigSchemaFactory } from '@jbrowse/plugin-linear-genome-view';
+import configSchema from '../MultiLinearVariantMatrixRenderer/configSchema';
+function x() { }
+export default function configSchemaF(pluginManager) {
+    return ConfigurationSchema('LinearVariantMatrixDisplay', {
+        renderer: configSchema,
+        height: {
+            type: 'number',
+            defaultValue: 250,
+        },
+    }, {
+        baseConfiguration: linearBasicDisplayConfigSchemaFactory(pluginManager),
+        explicitlyTyped: true,
+    });
+}

package/esm/MultiLinearVariantMatrixDisplay/index.d.ts

@@ -0,0 +1,2 @@
+import type PluginManager from '@jbrowse/core/PluginManager';
+export default function LinearVariantMatrixDisplayF(pluginManager: PluginManager): void;

package/esm/MultiLinearVariantMatrixDisplay/index.js

@@ -0,0 +1,18 @@
+import DisplayType from '@jbrowse/core/pluggableElementTypes/DisplayType';
+import MultiLinearVariantMatrixDisplayComponent from './components/VariantDisplayComponent';
+import configSchemaF from './configSchema';
+import stateModelFactory from './model';
+export default function LinearVariantMatrixDisplayF(pluginManager) {
+    pluginManager.addDisplayType(() => {
+        const configSchema = configSchemaF(pluginManager);
+        return new DisplayType({
+            name: 'LinearVariantMatrixDisplay',
+            displayName: 'Multi-variant display (matrix)',
+            configSchema,
+            stateModel: stateModelFactory(configSchema),
+            trackType: 'VariantTrack',
+            viewType: 'LinearGenomeView',
+            ReactComponent: MultiLinearVariantMatrixDisplayComponent,
+        });
+    });
+}