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

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

@@ -0,0 +1,195 @@
+"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");
+// icons
+const Close_1 = __importDefault(require("@mui/icons-material/Close"));
+const ArrowForwardIos_1 = __importDefault(require("@mui/icons-material/ArrowForwardIos"));
+const TrackSelectorUtil_1 = __importDefault(require("./TrackSelectorUtil"));
+const Spacer_1 = __importDefault(require("./Spacer"));
+const useStyles = (0, mui_1.makeStyles)()(theme => ({
+    importFormContainer: {
+        padding: theme.spacing(4),
+    },
+    button: {
+        margin: theme.spacing(2),
+    },
+    rel: {
+        position: 'relative',
+    },
+    synbutton: {
+        position: 'absolute',
+        top: 30,
+    },
+    flex: {
+        display: 'flex',
+    },
+    mb: {
+        marginBottom: 10,
+    },
+    bg: {
+        background: theme.palette.divider,
+    },
+    fixedWidth: {
+        width: 700,
+    },
+}));
+const LinearSyntenyViewImportForm = (0, mobx_react_1.observer)(function ({ model, }) {
+    const { classes, cx } = useStyles();
+    const session = (0, util_1.getSession)(model);
+    const { assemblyNames } = session;
+    const defaultAssemblyName = assemblyNames[0] || '';
+    const [selectedRow, setSelectedRow] = (0, react_1.useState)(0);
+    const [selectedAssemblyNames, setSelectedAssemblyNames] = (0, react_1.useState)([
+        defaultAssemblyName,
+        defaultAssemblyName,
+    ]);
+    const [error, setError] = (0, react_1.useState)();
+    const [userOpenedSyntenyTracksToShow, setUserOpenedSyntenyTracksToShow] = (0, react_1.useState)([]);
+    const [preConfiguredSyntenyTracksToShow, setPreConfiguredSyntenyTracksToShow,] = (0, react_1.useState)([]);
+    return (react_1.default.createElement(material_1.Container, { className: classes.importFormContainer },
+        error ? react_1.default.createElement(ui_1.ErrorMessage, { error: error }) : null,
+        react_1.default.createElement("div", { className: classes.flex },
+            react_1.default.createElement(Spacer_1.default, null),
+            react_1.default.createElement("div", null,
+                react_1.default.createElement("div", { className: classes.mb }, "Select assemblies for linear synteny view"),
+                selectedAssemblyNames.map((assemblyName, idx) => (react_1.default.createElement("div", { key: `${assemblyName}-${idx}`, className: classes.rel },
+                    react_1.default.createElement("span", null,
+                        "Row ",
+                        idx + 1,
+                        ": "),
+                    react_1.default.createElement(material_1.IconButton, { disabled: selectedAssemblyNames.length <= 2, onClick: () => {
+                            setSelectedAssemblyNames(selectedAssemblyNames
+                                .map((asm, idx2) => (idx2 === idx ? undefined : asm))
+                                .filter(util_1.notEmpty));
+                            setPreConfiguredSyntenyTracksToShow(preConfiguredSyntenyTracksToShow
+                                .map((asm, idx2) => (idx2 === idx ? undefined : asm))
+                                .filter(util_1.notEmpty));
+                            setUserOpenedSyntenyTracksToShow(userOpenedSyntenyTracksToShow
+                                .map((asm, idx2) => (idx2 === idx ? undefined : asm))
+                                .filter(util_1.notEmpty));
+                            if (selectedRow >= selectedAssemblyNames.length - 2) {
+                                setSelectedRow(0);
+                            }
+                        } },
+                        react_1.default.createElement(Close_1.default, null)),
+                    react_1.default.createElement(ui_1.AssemblySelector, { helperText: "", selected: assemblyName, onChange: newAssembly => {
+                            setSelectedAssemblyNames(selectedAssemblyNames.map((asm, idx2) => idx2 === idx ? newAssembly : asm));
+                        }, session: session }),
+                    idx !== selectedAssemblyNames.length - 1 ? (react_1.default.createElement(material_1.IconButton, { className: cx(classes.synbutton, idx === selectedRow ? classes.bg : undefined), onClick: () => {
+                            setSelectedRow(idx);
+                        } },
+                        react_1.default.createElement(ArrowForwardIos_1.default, null))) : null))),
+                react_1.default.createElement("div", null,
+                    react_1.default.createElement(material_1.Button, { className: classes.button, variant: "contained", color: "secondary", onClick: () => {
+                            setSelectedAssemblyNames([
+                                ...selectedAssemblyNames,
+                                defaultAssemblyName,
+                            ]);
+                        } }, "Add row"),
+                    react_1.default.createElement(material_1.Button, { className: classes.button, onClick: () => {
+                            // eslint-disable-next-line @typescript-eslint/no-floating-promises
+                            ;
+                            (async () => {
+                                try {
+                                    setError(undefined);
+                                    await doSubmit({
+                                        userOpenedSyntenyTracksToShow,
+                                        preConfiguredSyntenyTracksToShow,
+                                        selectedAssemblyNames,
+                                        model,
+                                    });
+                                }
+                                catch (e) {
+                                    console.error(e);
+                                    setError(e);
+                                }
+                            })();
+                        }, variant: "contained", color: "primary" }, "Launch"))),
+            react_1.default.createElement(Spacer_1.default, null),
+            react_1.default.createElement("div", { className: classes.fixedWidth },
+                react_1.default.createElement("div", null,
+                    "Synteny dataset to display between row ",
+                    selectedRow + 1,
+                    " and",
+                    ' ',
+                    selectedRow + 2),
+                react_1.default.createElement(TrackSelectorUtil_1.default, { model: model, preConfiguredSyntenyTrack: preConfiguredSyntenyTracksToShow[selectedRow], assembly1: selectedAssemblyNames[selectedRow], assembly2: selectedAssemblyNames[selectedRow + 1], setPreConfiguredSyntenyTrack: arg => {
+                        const clone = [...preConfiguredSyntenyTracksToShow];
+                        clone[selectedRow] = arg;
+                        setPreConfiguredSyntenyTracksToShow(clone);
+                    }, setUserOpenedSyntenyTrack: arg => {
+                        const clone = [...userOpenedSyntenyTracksToShow];
+                        clone[selectedRow] = arg;
+                        setUserOpenedSyntenyTracksToShow(clone);
+                    } }))),
+        react_1.default.createElement(Spacer_1.default, null)));
+});
+async function doSubmit({ selectedAssemblyNames, model, preConfiguredSyntenyTracksToShow, userOpenedSyntenyTracksToShow, }) {
+    const session = (0, util_1.getSession)(model);
+    const { assemblyManager } = session;
+    model.setViews(await Promise.all(selectedAssemblyNames.map(async (assemblyName) => {
+        const asm = await assemblyManager.waitForAssembly(assemblyName);
+        if (!asm) {
+            throw new Error(`Assembly "${assemblyName}" failed to load`);
+        }
+        return {
+            type: 'LinearGenomeView',
+            bpPerPx: 1,
+            offsetPx: 0,
+            hideHeader: true,
+            displayedRegions: asm.regions,
+        };
+    })));
+    for (const view of model.views) {
+        view.setWidth(model.width);
+        view.showAllRegions();
+    }
+    if (!(0, util_1.isSessionWithAddTracks)(session)) {
+        session.notify("Can't add tracks", 'warning');
+    }
+    else {
+        userOpenedSyntenyTracksToShow.map((f, idx) => {
+            if (f) {
+                session.addTrackConf(f);
+                model.toggleTrack(f.trackId, idx);
+            }
+        });
+    }
+    preConfiguredSyntenyTracksToShow.map((f, idx) => {
+        if (f) {
+            model.showTrack(f, idx);
+        }
+    });
+}
+exports.default = LinearSyntenyViewImportForm;

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

@@ -0,0 +1,2 @@
+import React from 'react';
+export default function Spacer(): React.JSX.Element;

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

@@ -0,0 +1,10 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.default = Spacer;
+const react_1 = __importDefault(require("react"));
+function Spacer() {
+    return react_1.default.createElement("div", { style: { flexGrow: 1 } });
+}

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

@@ -0,0 +1,10 @@
+import React from 'react';
+import { LinearSyntenyViewModel } from '../../model';
+declare const ImportSyntenyTrackSelector: ({ model, assembly1, assembly2, preConfiguredSyntenyTrack, setPreConfiguredSyntenyTrack, }: {
+    model: LinearSyntenyViewModel;
+    assembly1: string;
+    assembly2: string;
+    preConfiguredSyntenyTrack: string | undefined;
+    setPreConfiguredSyntenyTrack: (arg: string) => void;
+}) => React.JSX.Element;
+export default ImportSyntenyTrackSelector;

package/dist/LinearSyntenyView/components/ImportForm/{ImportSyntenyTrackSelector.js → TrackSelector.js}

@@ -30,35 +30,30 @@ const tracks_1 = require("@jbrowse/core/util/tracks");
 const ui_1 = require("@jbrowse/core/ui");
 const configuration_1 = require("@jbrowse/core/configuration");
 const mobx_react_1 = require("mobx-react");
-function f(track, assembly1, assembly2) {
-    const assemblyNames = (0, configuration_1.readConfObject)(track, 'assemblyNames');
-    return (assemblyNames.includes(assembly1) &&
-        assemblyNames.includes(assembly2) &&
-        track.type.includes('Synteny'));
-}
-const Selector = (0, mobx_react_1.observer)(({ model, assembly1, assembly2, setShowTrackId, }) => {
+const ImportSyntenyTrackSelector = (0, mobx_react_1.observer)(function ({ model, assembly1, assembly2, preConfiguredSyntenyTrack, setPreConfiguredSyntenyTrack, }) {
     var _a;
     const session = (0, util_1.getSession)(model);
     const { tracks = [], sessionTracks = [] } = session;
     const allTracks = [...tracks, ...sessionTracks];
-    const filteredTracks = allTracks.filter(t => f(t, assembly2, assembly1));
+    const filteredTracks = allTracks.filter(track => {
+        const assemblyNames = (0, configuration_1.readConfObject)(track, 'assemblyNames');
+        return (assemblyNames.includes(assembly1) &&
+            assemblyNames.includes(assembly2) &&
+            track.type.includes('Synteny'));
+    });
     const resetTrack = ((_a = filteredTracks[0]) === null || _a === void 0 ? void 0 : _a.trackId) || '';
     const [value, setValue] = (0, react_1.useState)(resetTrack);
     (0, react_1.useEffect)(() => {
-        // if assembly1/assembly2 changes, then we will want to use this effect to
-        // change the state of the useState because it otherwise gets locked to a
-        // stale value
-        setValue(resetTrack);
-    }, [resetTrack]);
-    (0, react_1.useEffect)(() => {
-        // sets track data in a useEffect because the initial load is needed as well
-        // as onChange's to the select box
-        setShowTrackId(value);
-    }, [value, setShowTrackId]);
+        // sets track data in a useEffect because the initial load is needed as
+        // well as onChange's to the select box
+        if (value !== preConfiguredSyntenyTrack) {
+            setPreConfiguredSyntenyTrack(value);
+        }
+    }, [value, preConfiguredSyntenyTrack, setPreConfiguredSyntenyTrack]);
     return (react_1.default.createElement(material_1.Paper, { style: { padding: 12 } },
-        react_1.default.createElement(material_1.Typography, { paragraph: true }, "Select a track from the select box below, the track will be shown when you hit \"Launch\"."),
+        react_1.default.createElement(material_1.Typography, null, "Select a track from the select box below, the track will be shown when you hit \"Launch\"."),
         filteredTracks.length ? (react_1.default.createElement(material_1.Select, { value: value, onChange: event => {
                 setValue(event.target.value);
             } }, filteredTracks.map(track => (react_1.default.createElement(material_1.MenuItem, { key: track.trackId, value: track.trackId }, (0, tracks_1.getTrackName)(track, session)))))) : (react_1.default.createElement(ui_1.ErrorMessage, { error: `No synteny tracks found for ${assembly1},${assembly2}` }))));
 });
-exports.default = Selector;
+exports.default = ImportSyntenyTrackSelector;

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

@@ -0,0 +1,14 @@
+import React from 'react';
+import { SnapshotIn } from 'mobx-state-tree';
+import { AnyConfigurationModel } from '@jbrowse/core/configuration';
+import { LinearSyntenyViewModel } from '../../model';
+type Conf = SnapshotIn<AnyConfigurationModel>;
+export default function TrackSelector({ model, assembly1, assembly2, preConfiguredSyntenyTrack, setPreConfiguredSyntenyTrack, setUserOpenedSyntenyTrack, }: {
+    model: LinearSyntenyViewModel;
+    assembly1: string;
+    assembly2: string;
+    preConfiguredSyntenyTrack: string | undefined;
+    setUserOpenedSyntenyTrack: (arg: Conf) => void;
+    setPreConfiguredSyntenyTrack: (arg?: string) => void;
+}): React.JSX.Element;
+export {};

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

@@ -0,0 +1,52 @@
+"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 });
+exports.default = TrackSelector;
+const react_1 = __importStar(require("react"));
+const material_1 = require("@mui/material");
+const AddCustomTrack_1 = __importDefault(require("./AddCustomTrack"));
+const TrackSelector_1 = __importDefault(require("./TrackSelector"));
+function TrackSelector({ model, assembly1, assembly2, preConfiguredSyntenyTrack, setPreConfiguredSyntenyTrack, setUserOpenedSyntenyTrack, }) {
+    const [choice, setChoice] = (0, react_1.useState)('tracklist');
+    (0, react_1.useEffect)(() => {
+        if (choice === 'none') {
+            setPreConfiguredSyntenyTrack(undefined);
+            setUserOpenedSyntenyTrack(undefined);
+        }
+    }, [choice, setPreConfiguredSyntenyTrack, setUserOpenedSyntenyTrack]);
+    return (react_1.default.createElement("div", null,
+        react_1.default.createElement(material_1.FormControl, null,
+            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(AddCustomTrack_1.default, { setUserOpenedSyntenyTrack: setUserOpenedSyntenyTrack, assembly2: assembly2, assembly1: assembly1 })) : null,
+        choice === 'tracklist' ? (react_1.default.createElement(TrackSelector_1.default, { key: `${assembly1}-${assembly2}`, model: model, assembly1: assembly1, assembly2: assembly2, preConfiguredSyntenyTrack: preConfiguredSyntenyTrack, setPreConfiguredSyntenyTrack: setPreConfiguredSyntenyTrack })) : null));
+}

package/dist/LinearSyntenyView/components/LinearSyntenyView.js

@@ -30,8 +30,8 @@ const react_1 = __importStar(require("react"));
 const mobx_react_1 = require("mobx-react");
 // locals
 const LinearComparativeView_1 = __importDefault(require("../../LinearComparativeView/components/LinearComparativeView"));
-const ImportForm = (0, react_1.lazy)(() => Promise.resolve().then(() => __importStar(require('./ImportForm'))));
-const LinearSyntenyView = (0, mobx_react_1.observer)(({ model }) => {
-    return !model.initialized ? (react_1.default.createElement(ImportForm, { model: model })) : (react_1.default.createElement(LinearComparativeView_1.default, { model: model }));
+const LinearSyntenyImportForm = (0, react_1.lazy)(() => Promise.resolve().then(() => __importStar(require('./ImportForm/LinearSyntenyImportForm'))));
+const LinearSyntenyView = (0, mobx_react_1.observer)(function ({ model }) {
+    return !model.initialized ? (react_1.default.createElement(LinearSyntenyImportForm, { model: model })) : (react_1.default.createElement(LinearComparativeView_1.default, { model: model }));
 });
 exports.default = LinearSyntenyView;

package/dist/LinearSyntenyView/index.js

@@ -28,8 +28,8 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.default = LinearSyntenyViewF;
 const react_1 = require("react");
-const model_1 = __importDefault(require("./model"));
 const ViewType_1 = __importDefault(require("@jbrowse/core/pluggableElementTypes/ViewType"));
+const model_1 = __importDefault(require("./model"));
 function LinearSyntenyViewF(pluginManager) {
     pluginManager.addViewType(() => {
         return new ViewType_1.default({