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

package/esm/LinearSyntenyView/components/ImportForm/{ImportCustomTrack.d.ts → AddCustomTrack.d.ts}

@@ -2,10 +2,9 @@ import React from 'react';
 import { SnapshotIn } from 'mobx-state-tree';
 import { AnyConfigurationModel } from '@jbrowse/core/configuration';
 type Conf = SnapshotIn<AnyConfigurationModel>;
-declare const ImportCustomTrack: ({ assembly1, assembly2, setSessionTrackData, }: {
-    sessionTrackData: Conf;
+declare const ImportCustomTrack: ({ assembly1, assembly2, setUserOpenedSyntenyTrack, }: {
     assembly1: string;
     assembly2: string;
-    setSessionTrackData: (arg: Conf) => void;
+    setUserOpenedSyntenyTrack: (arg: Conf) => void;
 }) => React.JSX.Element;
 export default ImportCustomTrack;

package/esm/LinearSyntenyView/components/ImportForm/{ImportCustomTrack.js → AddCustomTrack.js}

@@ -66,7 +66,7 @@ function getAdapter({ radioOption, assembly1, assembly2, fileLocation, indexFile
         throw new Error(`Unknown to detect type ${radioOption} from filename (select radio button to clarify)`);
     }
 }
-const ImportCustomTrack = observer(function ({ assembly1, assembly2, setSessionTrackData, }) {
+const ImportCustomTrack = observer(function ({ assembly1, assembly2, setUserOpenedSyntenyTrack, }) {
     const [bed2Location, setBed2Location] = useState();
     const [bed1Location, setBed1Location] = useState();
     const [fileLocation, setFileLocation] = useState();
@@ -81,7 +81,7 @@ const ImportCustomTrack = observer(function ({ assembly1, assembly2, setSessionT
                 const fn = fileName ? basename(fileName) : 'MyTrack';
                 const trackId = `${fn}-${Date.now()}`;
                 setError(undefined);
-                setSessionTrackData({
+                setUserOpenedSyntenyTrack({
                     trackId,
                     name: fn,
                     assemblyNames: [assembly2, assembly1],
@@ -111,7 +111,7 @@ const ImportCustomTrack = observer(function ({ assembly1, assembly2, setSessionT
         fileLocation,
         indexFileLocation,
         radioOption,
-        setSessionTrackData,
+        setUserOpenedSyntenyTrack,
     ]);
     return (React.createElement(Paper, { style: { padding: 12 } },
         error ? React.createElement(ErrorMessage, { error: error }) : null,

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

@@ -0,0 +1,167 @@
+import React, { useState } from 'react';
+import { Button, Container, IconButton } from '@mui/material';
+import { makeStyles } from 'tss-react/mui';
+import { observer } from 'mobx-react';
+import { getSession, isSessionWithAddTracks, notEmpty, } from '@jbrowse/core/util';
+import { ErrorMessage, AssemblySelector } from '@jbrowse/core/ui';
+// icons
+import CloseIcon from '@mui/icons-material/Close';
+import ArrowForwardIosIcon from '@mui/icons-material/ArrowForwardIos';
+import TrackSelector from './TrackSelectorUtil';
+import Spacer from './Spacer';
+const useStyles = 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 = observer(function ({ model, }) {
+    const { classes, cx } = useStyles();
+    const session = getSession(model);
+    const { assemblyNames } = session;
+    const defaultAssemblyName = assemblyNames[0] || '';
+    const [selectedRow, setSelectedRow] = useState(0);
+    const [selectedAssemblyNames, setSelectedAssemblyNames] = useState([
+        defaultAssemblyName,
+        defaultAssemblyName,
+    ]);
+    const [error, setError] = useState();
+    const [userOpenedSyntenyTracksToShow, setUserOpenedSyntenyTracksToShow] = useState([]);
+    const [preConfiguredSyntenyTracksToShow, setPreConfiguredSyntenyTracksToShow,] = useState([]);
+    return (React.createElement(Container, { className: classes.importFormContainer },
+        error ? React.createElement(ErrorMessage, { error: error }) : null,
+        React.createElement("div", { className: classes.flex },
+            React.createElement(Spacer, null),
+            React.createElement("div", null,
+                React.createElement("div", { className: classes.mb }, "Select assemblies for linear synteny view"),
+                selectedAssemblyNames.map((assemblyName, idx) => (React.createElement("div", { key: `${assemblyName}-${idx}`, className: classes.rel },
+                    React.createElement("span", null,
+                        "Row ",
+                        idx + 1,
+                        ": "),
+                    React.createElement(IconButton, { disabled: selectedAssemblyNames.length <= 2, onClick: () => {
+                            setSelectedAssemblyNames(selectedAssemblyNames
+                                .map((asm, idx2) => (idx2 === idx ? undefined : asm))
+                                .filter(notEmpty));
+                            setPreConfiguredSyntenyTracksToShow(preConfiguredSyntenyTracksToShow
+                                .map((asm, idx2) => (idx2 === idx ? undefined : asm))
+                                .filter(notEmpty));
+                            setUserOpenedSyntenyTracksToShow(userOpenedSyntenyTracksToShow
+                                .map((asm, idx2) => (idx2 === idx ? undefined : asm))
+                                .filter(notEmpty));
+                            if (selectedRow >= selectedAssemblyNames.length - 2) {
+                                setSelectedRow(0);
+                            }
+                        } },
+                        React.createElement(CloseIcon, null)),
+                    React.createElement(AssemblySelector, { helperText: "", selected: assemblyName, onChange: newAssembly => {
+                            setSelectedAssemblyNames(selectedAssemblyNames.map((asm, idx2) => idx2 === idx ? newAssembly : asm));
+                        }, session: session }),
+                    idx !== selectedAssemblyNames.length - 1 ? (React.createElement(IconButton, { className: cx(classes.synbutton, idx === selectedRow ? classes.bg : undefined), onClick: () => {
+                            setSelectedRow(idx);
+                        } },
+                        React.createElement(ArrowForwardIosIcon, null))) : null))),
+                React.createElement("div", null,
+                    React.createElement(Button, { className: classes.button, variant: "contained", color: "secondary", onClick: () => {
+                            setSelectedAssemblyNames([
+                                ...selectedAssemblyNames,
+                                defaultAssemblyName,
+                            ]);
+                        } }, "Add row"),
+                    React.createElement(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.createElement(Spacer, null),
+            React.createElement("div", { className: classes.fixedWidth },
+                React.createElement("div", null,
+                    "Synteny dataset to display between row ",
+                    selectedRow + 1,
+                    " and",
+                    ' ',
+                    selectedRow + 2),
+                React.createElement(TrackSelector, { 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.createElement(Spacer, null)));
+});
+async function doSubmit({ selectedAssemblyNames, model, preConfiguredSyntenyTracksToShow, userOpenedSyntenyTracksToShow, }) {
+    const session = 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 (!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);
+        }
+    });
+}
+export default LinearSyntenyViewImportForm;

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

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

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

@@ -0,0 +1,4 @@
+import React from 'react';
+export default function Spacer() {
+    return React.createElement("div", { style: { flexGrow: 1 } });
+}

package/esm/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/esm/LinearSyntenyView/components/ImportForm/{ImportSyntenyTrackSelector.js → TrackSelector.js}

@@ -5,35 +5,30 @@ import { getTrackName } from '@jbrowse/core/util/tracks';
 import { ErrorMessage } from '@jbrowse/core/ui';
 import { readConfObject, } from '@jbrowse/core/configuration';
 import { observer } from 'mobx-react';
-function f(track, assembly1, assembly2) {
-    const assemblyNames = readConfObject(track, 'assemblyNames');
-    return (assemblyNames.includes(assembly1) &&
-        assemblyNames.includes(assembly2) &&
-        track.type.includes('Synteny'));
-}
-const Selector = observer(({ model, assembly1, assembly2, setShowTrackId, }) => {
+const ImportSyntenyTrackSelector = observer(function ({ model, assembly1, assembly2, preConfiguredSyntenyTrack, setPreConfiguredSyntenyTrack, }) {
     var _a;
     const session = 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 = 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] = useState(resetTrack);
     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]);
-    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.createElement(Paper, { style: { padding: 12 } },
-        React.createElement(Typography, { paragraph: true }, "Select a track from the select box below, the track will be shown when you hit \"Launch\"."),
+        React.createElement(Typography, null, "Select a track from the select box below, the track will be shown when you hit \"Launch\"."),
         filteredTracks.length ? (React.createElement(Select, { value: value, onChange: event => {
                 setValue(event.target.value);
             } }, filteredTracks.map(track => (React.createElement(MenuItem, { key: track.trackId, value: track.trackId }, getTrackName(track, session)))))) : (React.createElement(ErrorMessage, { error: `No synteny tracks found for ${assembly1},${assembly2}` }))));
 });
-export default Selector;
+export default ImportSyntenyTrackSelector;

package/esm/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/esm/LinearSyntenyView/components/ImportForm/TrackSelectorUtil.js

@@ -0,0 +1,23 @@
+import React, { useState, useEffect } from 'react';
+import { FormControl, FormControlLabel, Radio, RadioGroup } from '@mui/material';
+import ImportCustomTrack from './AddCustomTrack';
+import ImportSyntenyTrackSelector from './TrackSelector';
+export default function TrackSelector({ model, assembly1, assembly2, preConfiguredSyntenyTrack, setPreConfiguredSyntenyTrack, setUserOpenedSyntenyTrack, }) {
+    const [choice, setChoice] = useState('tracklist');
+    useEffect(() => {
+        if (choice === 'none') {
+            setPreConfiguredSyntenyTrack(undefined);
+            setUserOpenedSyntenyTrack(undefined);
+        }
+    }, [choice, setPreConfiguredSyntenyTrack, setUserOpenedSyntenyTrack]);
+    return (React.createElement("div", null,
+        React.createElement(FormControl, null,
+            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, { setUserOpenedSyntenyTrack: setUserOpenedSyntenyTrack, assembly2: assembly2, assembly1: assembly1 })) : null,
+        choice === 'tracklist' ? (React.createElement(ImportSyntenyTrackSelector, { key: `${assembly1}-${assembly2}`, model: model, assembly1: assembly1, assembly2: assembly2, preConfiguredSyntenyTrack: preConfiguredSyntenyTrack, setPreConfiguredSyntenyTrack: setPreConfiguredSyntenyTrack })) : null));
+}

package/esm/LinearSyntenyView/components/LinearSyntenyView.js

@@ -2,8 +2,8 @@ import React, { lazy } from 'react';
 import { observer } from 'mobx-react';
 // locals
 import LinearComparativeViewComponent from '../../LinearComparativeView/components/LinearComparativeView';
-const ImportForm = lazy(() => import('./ImportForm'));
-const LinearSyntenyView = observer(({ model }) => {
-    return !model.initialized ? (React.createElement(ImportForm, { model: model })) : (React.createElement(LinearComparativeViewComponent, { model: model }));
+const LinearSyntenyImportForm = lazy(() => import('./ImportForm/LinearSyntenyImportForm'));
+const LinearSyntenyView = observer(function ({ model }) {
+    return !model.initialized ? (React.createElement(LinearSyntenyImportForm, { model: model })) : (React.createElement(LinearComparativeViewComponent, { model: model }));
 });
 export default LinearSyntenyView;

package/esm/LinearSyntenyView/index.js

@@ -1,6 +1,6 @@
 import { lazy } from 'react';
-import modelFactory from './model';
 import ViewType from '@jbrowse/core/pluggableElementTypes/ViewType';
+import modelFactory from './model';
 export default function LinearSyntenyViewF(pluginManager) {
     pluginManager.addViewType(() => {
         return new ViewType({