@jbrowse/plugin-linear-comparative-view 2.15.4 → 2.16.1

package/esm/SyntenyFeatureDetail/SyntenyFeatureDetail.js

@@ -0,0 +1,72 @@
+import React, { lazy } from 'react';
+import { Link, Paper } from '@mui/material';
+import { observer } from 'mobx-react';
+// locals
+import BaseCard from '@jbrowse/core/BaseFeatureWidget/BaseFeatureDetail/BaseCard';
+import BaseFeatureDetail from '@jbrowse/core/BaseFeatureWidget/BaseFeatureDetail';
+import { assembleLocString, getSession, SimpleFeature, } from '@jbrowse/core/util';
+// lazies
+const LaunchSyntenyViewDialog = lazy(() => import('../LGVSyntenyDisplay/components/LaunchSyntenyViewDialog'));
+const CustomLinker = observer(function ({ model, }) {
+    const { featureData, view, level, trackId } = model;
+    return (React.createElement("ul", null,
+        view.type === 'LinearSyntenyView' ? (React.createElement("li", null,
+            React.createElement(Link, { href: "#", onClick: event => {
+                    var _a, _b;
+                    event.preventDefault();
+                    const { views } = view;
+                    if (level !== undefined) {
+                        // level is "pre-known", and stored in the SyntenyFeatureWidget
+                        // model state e.g. when clicking on a feature from a
+                        // LinearSyntenyRendering
+                        (_a = views[level]) === null || _a === void 0 ? void 0 : _a.navTo(featureData);
+                        (_b = views[level + 1]) === null || _b === void 0 ? void 0 : _b.navTo(featureData.mate);
+                    }
+                    else {
+                        // best effort to find the right level. this is triggered for
+                        // example if a user clicks on a feature in a LGVSyntenyDisplay
+                        // in an existing LinearSyntenyView, there is no real proper
+                        // level "pre-known" to this situation
+                        const f1 = featureData;
+                        const f2 = featureData.mate;
+                        const r1 = f1.assemblyName;
+                        const r2 = f2.assemblyName;
+                        const v1 = views.find(view => view.assemblyNames[0] === r1);
+                        const v2 = views.find(view => view.assemblyNames[0] === r2);
+                        if (!v1 || !v2) {
+                            getSession(model).notify([
+                                v1
+                                    ? `Unable to find ${assembleLocString(f1)} in synteny view`
+                                    : '',
+                                v2
+                                    ? `Unable to find ${assembleLocString(f2)} in synteny view`
+                                    : '',
+                            ].join(' ... '));
+                        }
+                        v1 === null || v1 === void 0 ? void 0 : v1.navTo(f1);
+                        v2 === null || v2 === void 0 ? void 0 : v2.navTo(f2);
+                    }
+                } }, "Center view on this feature"))) : null,
+        React.createElement("li", null,
+            React.createElement(Link, { href: "#", onClick: event => {
+                    event.preventDefault();
+                    const session = getSession(model);
+                    const feature = new SimpleFeature(featureData);
+                    session.queueDialog(handleClose => [
+                        LaunchSyntenyViewDialog,
+                        {
+                            model,
+                            feature,
+                            trackId,
+                            handleClose,
+                        },
+                    ]);
+                } }, "Launch new linear synteny view on this feature"))));
+});
+const SyntenyFeatureDetail = observer(function ({ model, }) {
+    return (React.createElement(Paper, { "data-testid": "alignment-side-drawer" },
+        React.createElement(BaseFeatureDetail, { title: "Feature", model: model }),
+        React.createElement(BaseCard, { title: "Link to view" },
+            React.createElement(CustomLinker, { model: model }))));
+});
+export default SyntenyFeatureDetail;

package/esm/SyntenyFeatureDetail/index.d.ts

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

package/esm/SyntenyFeatureDetail/index.js

@@ -0,0 +1,27 @@
+import { lazy } from 'react';
+import { ConfigurationSchema } from '@jbrowse/core/configuration';
+import WidgetType from '@jbrowse/core/pluggableElementTypes/WidgetType';
+import { types } from 'mobx-state-tree';
+import { stateModelFactory as BaseFeatureWidgetStateModelF } from '@jbrowse/core/BaseFeatureWidget';
+const configSchema = ConfigurationSchema('SyntenyFeatureWidget', {});
+function stateModelF(pluginManager) {
+    return types.compose(BaseFeatureWidgetStateModelF(pluginManager), types.model('SyntenyFeatureWidget', {
+        /**
+         * #property
+         */
+        type: types.literal('SyntenyFeatureWidget'),
+        /**
+         * #property
+         */
+        level: types.maybe(types.number),
+    }));
+}
+export default function SyntenyFeatureWidgetF(pluginManager) {
+    pluginManager.addWidgetType(() => new WidgetType({
+        name: 'SyntenyFeatureWidget',
+        heading: 'Synteny feature details',
+        configSchema,
+        stateModel: stateModelF(pluginManager),
+        ReactComponent: lazy(() => import('./SyntenyFeatureDetail')),
+    }));
+}

package/esm/index.js

@@ -6,19 +6,23 @@ import LinearComparativeViewF from './LinearComparativeView';
 import LinearSyntenyDisplayF from './LinearSyntenyDisplay';
 import LGVSyntenyDisplayF from './LGVSyntenyDisplay';
 import LinearSyntenyViewF from './LinearSyntenyView';
+import LinearSyntenyViewHelperF from './LinearSyntenyViewHelper';
 import LaunchLinearSyntenyViewF from './LaunchLinearSyntenyView';
 import SyntenyTrackF from './SyntenyTrack';
 import LinearReadVsRefMenuItemF from './LinearReadVsRef';
+import SyntenyFeatureWidgetF from './SyntenyFeatureDetail';
 export default class LinearComparativeViewPlugin extends Plugin {
     constructor() {
         super(...arguments);
         this.name = 'LinearComparativeViewPlugin';
     }
     install(pluginManager) {
+        LinearSyntenyViewHelperF(pluginManager);
         LinearComparativeViewF(pluginManager);
         LinearSyntenyViewF(pluginManager);
         LinearComparativeDisplayF(pluginManager);
         LinearSyntenyDisplayF(pluginManager);
+        SyntenyFeatureWidgetF(pluginManager);
         LGVSyntenyDisplayF(pluginManager);
         LaunchLinearSyntenyViewF(pluginManager);
         SyntenyTrackF(pluginManager);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@jbrowse/plugin-linear-comparative-view",
-  "version": "2.15.4",
+  "version": "2.16.1",
   "description": "JBrowse 2 linear comparative view",
   "keywords": [
     "jbrowse",
@@ -16,7 +16,7 @@
   },
   "author": "JBrowse Team",
   "distMain": "dist/index.js",
-  "srcMain": "src/index.tsx",
+  "srcMain": "src/index.ts",
   "main": "dist/index.js",
   "files": [
     "dist",
@@ -61,5 +61,5 @@
   "publishConfig": {
     "access": "public"
   },
-  "gitHead": "686b4ad9016b3586e8230180f7adb44c238ba4fb"
+  "gitHead": "c6a658d2344989895543f0456b1cf7dd3b937769"
 }

package/dist/LinearSyntenyView/components/ImportForm/ImportSyntenyTrackSelector.d.ts

@@ -1,9 +0,0 @@
-import React from 'react';
-import { LinearSyntenyViewModel } from '../../model';
-declare const Selector: ({ model, assembly1, assembly2, setShowTrackId, }: {
-    model: LinearSyntenyViewModel;
-    assembly1: string;
-    assembly2: string;
-    setShowTrackId: (arg: string) => void;
-}) => React.JSX.Element;
-export default Selector;

package/dist/LinearSyntenyView/components/ImportForm/index.js

@@ -1,138 +0,0 @@
-"use strict";
-var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
-    if (k2 === undefined) k2 = k;
-    var desc = Object.getOwnPropertyDescriptor(m, k);
-    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
-      desc = { enumerable: true, get: function() { return m[k]; } };
-    }
-    Object.defineProperty(o, k2, desc);
-}) : (function(o, m, k, k2) {
-    if (k2 === undefined) k2 = k;
-    o[k2] = m[k];
-}));
-var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
-    Object.defineProperty(o, "default", { enumerable: true, value: v });
-}) : function(o, v) {
-    o["default"] = v;
-});
-var __importStar = (this && this.__importStar) || function (mod) {
-    if (mod && mod.__esModule) return mod;
-    var result = {};
-    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
-    __setModuleDefault(result, mod);
-    return result;
-};
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-const react_1 = __importStar(require("react"));
-const material_1 = require("@mui/material");
-const mui_1 = require("tss-react/mui");
-const mobx_react_1 = require("mobx-react");
-const util_1 = require("@jbrowse/core/util");
-const ui_1 = require("@jbrowse/core/ui");
-const ImportCustomTrack_1 = __importDefault(require("./ImportCustomTrack"));
-const ImportSyntenyTrackSelector_1 = __importDefault(require("./ImportSyntenyTrackSelector"));
-const useStyles = (0, mui_1.makeStyles)()(theme => ({
-    importFormContainer: {
-        padding: theme.spacing(4),
-        margin: '0 auto',
-    },
-    assemblySelector: {
-        width: '75%',
-        margin: '0 auto',
-    },
-}));
-function TrackSelector({ setSessionTrackData, setShowTrackId, sessionTrackData, assembly1, assembly2, model, }) {
-    const [choice, setChoice] = (0, react_1.useState)('tracklist');
-    (0, react_1.useEffect)(() => {
-        if (choice === 'none') {
-            setSessionTrackData(undefined);
-            setShowTrackId(undefined);
-        }
-    }, [choice, setSessionTrackData, setShowTrackId]);
-    return (react_1.default.createElement(react_1.default.Fragment, null,
-        react_1.default.createElement(material_1.FormControl, null,
-            react_1.default.createElement(material_1.FormLabel, { id: "group-label" }, "(Optional) Select or add a synteny track"),
-            react_1.default.createElement(material_1.RadioGroup, { row: true, value: choice, onChange: event => {
-                    setChoice(event.target.value);
-                }, "aria-labelledby": "group-label" },
-                react_1.default.createElement(material_1.FormControlLabel, { value: "none", control: react_1.default.createElement(material_1.Radio, null), label: "None" }),
-                react_1.default.createElement(material_1.FormControlLabel, { value: "tracklist", control: react_1.default.createElement(material_1.Radio, null), label: "Existing track" }),
-                react_1.default.createElement(material_1.FormControlLabel, { value: "custom", control: react_1.default.createElement(material_1.Radio, null), label: "New track" }))),
-        choice === 'custom' ? (react_1.default.createElement(ImportCustomTrack_1.default, { setSessionTrackData: setSessionTrackData, sessionTrackData: sessionTrackData, assembly2: assembly2, assembly1: assembly1 })) : null,
-        choice === 'tracklist' ? (react_1.default.createElement(ImportSyntenyTrackSelector_1.default, { model: model, assembly1: assembly1, assembly2: assembly2, setShowTrackId: setShowTrackId })) : null));
-}
-const LinearSyntenyViewImportForm = (0, mobx_react_1.observer)(function ({ model, }) {
-    const { classes } = useStyles();
-    const session = (0, util_1.getSession)(model);
-    const { assemblyNames } = session;
-    const [assembly2, setAssembly2] = (0, react_1.useState)(assemblyNames[0] || '');
-    const [assembly1, setAssembly1] = (0, react_1.useState)(assemblyNames[0] || '');
-    const [error, setError] = (0, react_1.useState)();
-    const [sessionTrackData, setSessionTrackData] = (0, react_1.useState)();
-    const [showTrackId, setShowTrackId] = (0, react_1.useState)();
-    async function onOpenClick() {
-        try {
-            if (!(0, util_1.isSessionWithAddTracks)(session)) {
-                return;
-            }
-            setError(undefined);
-            const { assemblyManager } = session;
-            const assemblies = [assembly1, assembly2];
-            model.setViews(await Promise.all(assemblies.map(async (sel) => {
-                const asm = await assemblyManager.waitForAssembly(sel);
-                if (!asm) {
-                    throw new Error(`Assembly ${sel} failed to load`);
-                }
-                return {
-                    type: 'LinearGenomeView',
-                    bpPerPx: 1,
-                    offsetPx: 0,
-                    hideHeader: true,
-                    displayedRegions: asm.regions,
-                };
-            })));
-            model.views.forEach(view => {
-                view.setWidth(model.width);
-            });
-            model.views.forEach(view => {
-                view.showAllRegions();
-            });
-            if (sessionTrackData) {
-                session.addTrackConf(sessionTrackData);
-                model.toggleTrack(sessionTrackData.trackId);
-            }
-            else if (showTrackId) {
-                model.showTrack(showTrackId);
-            }
-        }
-        catch (e) {
-            console.error(e);
-            setError(e);
-        }
-    }
-    // this is a combination of any displayed error message we have
-    const displayError = error;
-    return (react_1.default.createElement(material_1.Container, { className: classes.importFormContainer },
-        displayError ? react_1.default.createElement(ui_1.ErrorMessage, { error: displayError }) : null,
-        react_1.default.createElement(material_1.Grid, { container: true, spacing: 1, justifyContent: "center", alignItems: "center", className: classes.assemblySelector },
-            react_1.default.createElement(material_1.Grid, { item: true },
-                react_1.default.createElement(material_1.Paper, { style: { padding: 12 } },
-                    react_1.default.createElement("p", { style: { textAlign: 'center' } }, "Select assemblies for linear synteny view"),
-                    react_1.default.createElement(material_1.Grid, { container: true, spacing: 1, justifyContent: "center", alignItems: "center" },
-                        react_1.default.createElement(material_1.Grid, { item: true },
-                            react_1.default.createElement(ui_1.AssemblySelector, { selected: assembly1, onChange: val => {
-                                    setAssembly1(val);
-                                }, session: session })),
-                        react_1.default.createElement(material_1.Grid, { item: true },
-                            react_1.default.createElement(ui_1.AssemblySelector, { selected: assembly2, onChange: val => {
-                                    setAssembly2(val);
-                                }, session: session })),
-                        react_1.default.createElement(material_1.Grid, { item: true },
-                            react_1.default.createElement(material_1.FormControl, null,
-                                react_1.default.createElement(material_1.Button, { onClick: onOpenClick, variant: "contained", color: "primary" }, "Launch"))))),
-                react_1.default.createElement(TrackSelector, { setShowTrackId: setShowTrackId, assembly2: assembly2, assembly1: assembly1, setSessionTrackData: setSessionTrackData, sessionTrackData: sessionTrackData, model: model })))));
-});
-exports.default = LinearSyntenyViewImportForm;

package/esm/LinearSyntenyView/components/ImportForm/ImportSyntenyTrackSelector.d.ts

@@ -1,9 +0,0 @@
-import React from 'react';
-import { LinearSyntenyViewModel } from '../../model';
-declare const Selector: ({ model, assembly1, assembly2, setShowTrackId, }: {
-    model: LinearSyntenyViewModel;
-    assembly1: string;
-    assembly2: string;
-    setShowTrackId: (arg: string) => void;
-}) => React.JSX.Element;
-export default Selector;

package/esm/LinearSyntenyView/components/ImportForm/index.js

@@ -1,110 +0,0 @@
-import React, { useState, useEffect } from 'react';
-import { Button, Container, FormControl, FormLabel, FormControlLabel, Grid, Paper, Radio, RadioGroup, } from '@mui/material';
-import { makeStyles } from 'tss-react/mui';
-import { observer } from 'mobx-react';
-import { getSession, isSessionWithAddTracks } from '@jbrowse/core/util';
-import { ErrorMessage, AssemblySelector } from '@jbrowse/core/ui';
-import ImportCustomTrack from './ImportCustomTrack';
-import ImportSyntenyTrackSelector from './ImportSyntenyTrackSelector';
-const useStyles = makeStyles()(theme => ({
-    importFormContainer: {
-        padding: theme.spacing(4),
-        margin: '0 auto',
-    },
-    assemblySelector: {
-        width: '75%',
-        margin: '0 auto',
-    },
-}));
-function TrackSelector({ setSessionTrackData, setShowTrackId, sessionTrackData, assembly1, assembly2, model, }) {
-    const [choice, setChoice] = useState('tracklist');
-    useEffect(() => {
-        if (choice === 'none') {
-            setSessionTrackData(undefined);
-            setShowTrackId(undefined);
-        }
-    }, [choice, setSessionTrackData, setShowTrackId]);
-    return (React.createElement(React.Fragment, null,
-        React.createElement(FormControl, null,
-            React.createElement(FormLabel, { id: "group-label" }, "(Optional) Select or add a synteny track"),
-            React.createElement(RadioGroup, { row: true, value: choice, onChange: event => {
-                    setChoice(event.target.value);
-                }, "aria-labelledby": "group-label" },
-                React.createElement(FormControlLabel, { value: "none", control: React.createElement(Radio, null), label: "None" }),
-                React.createElement(FormControlLabel, { value: "tracklist", control: React.createElement(Radio, null), label: "Existing track" }),
-                React.createElement(FormControlLabel, { value: "custom", control: React.createElement(Radio, null), label: "New track" }))),
-        choice === 'custom' ? (React.createElement(ImportCustomTrack, { setSessionTrackData: setSessionTrackData, sessionTrackData: sessionTrackData, assembly2: assembly2, assembly1: assembly1 })) : null,
-        choice === 'tracklist' ? (React.createElement(ImportSyntenyTrackSelector, { model: model, assembly1: assembly1, assembly2: assembly2, setShowTrackId: setShowTrackId })) : null));
-}
-const LinearSyntenyViewImportForm = observer(function ({ model, }) {
-    const { classes } = useStyles();
-    const session = getSession(model);
-    const { assemblyNames } = session;
-    const [assembly2, setAssembly2] = useState(assemblyNames[0] || '');
-    const [assembly1, setAssembly1] = useState(assemblyNames[0] || '');
-    const [error, setError] = useState();
-    const [sessionTrackData, setSessionTrackData] = useState();
-    const [showTrackId, setShowTrackId] = useState();
-    async function onOpenClick() {
-        try {
-            if (!isSessionWithAddTracks(session)) {
-                return;
-            }
-            setError(undefined);
-            const { assemblyManager } = session;
-            const assemblies = [assembly1, assembly2];
-            model.setViews(await Promise.all(assemblies.map(async (sel) => {
-                const asm = await assemblyManager.waitForAssembly(sel);
-                if (!asm) {
-                    throw new Error(`Assembly ${sel} failed to load`);
-                }
-                return {
-                    type: 'LinearGenomeView',
-                    bpPerPx: 1,
-                    offsetPx: 0,
-                    hideHeader: true,
-                    displayedRegions: asm.regions,
-                };
-            })));
-            model.views.forEach(view => {
-                view.setWidth(model.width);
-            });
-            model.views.forEach(view => {
-                view.showAllRegions();
-            });
-            if (sessionTrackData) {
-                session.addTrackConf(sessionTrackData);
-                model.toggleTrack(sessionTrackData.trackId);
-            }
-            else if (showTrackId) {
-                model.showTrack(showTrackId);
-            }
-        }
-        catch (e) {
-            console.error(e);
-            setError(e);
-        }
-    }
-    // this is a combination of any displayed error message we have
-    const displayError = error;
-    return (React.createElement(Container, { className: classes.importFormContainer },
-        displayError ? React.createElement(ErrorMessage, { error: displayError }) : null,
-        React.createElement(Grid, { container: true, spacing: 1, justifyContent: "center", alignItems: "center", className: classes.assemblySelector },
-            React.createElement(Grid, { item: true },
-                React.createElement(Paper, { style: { padding: 12 } },
-                    React.createElement("p", { style: { textAlign: 'center' } }, "Select assemblies for linear synteny view"),
-                    React.createElement(Grid, { container: true, spacing: 1, justifyContent: "center", alignItems: "center" },
-                        React.createElement(Grid, { item: true },
-                            React.createElement(AssemblySelector, { selected: assembly1, onChange: val => {
-                                    setAssembly1(val);
-                                }, session: session })),
-                        React.createElement(Grid, { item: true },
-                            React.createElement(AssemblySelector, { selected: assembly2, onChange: val => {
-                                    setAssembly2(val);
-                                }, session: session })),
-                        React.createElement(Grid, { item: true },
-                            React.createElement(FormControl, null,
-                                React.createElement(Button, { onClick: onOpenClick, variant: "contained", color: "primary" }, "Launch"))))),
-                React.createElement(TrackSelector, { setShowTrackId: setShowTrackId, assembly2: assembly2, assembly1: assembly1, setSessionTrackData: setSessionTrackData, sessionTrackData: sessionTrackData, model: model })))));
-});
-export default LinearSyntenyViewImportForm;