@jbrowse/plugin-linear-comparative-view 3.7.0 → 4.0.0

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

@@ -1,11 +1,11 @@
 import { jsxs as _jsxs, jsx as _jsx, Fragment as _Fragment } from "react/jsx-runtime";
 import { AssemblySelector } from '@jbrowse/core/ui';
 import { getSession, notEmpty } from '@jbrowse/core/util';
+import { cx, makeStyles } from '@jbrowse/core/util/tss-react';
 import ArrowForwardIosIcon from '@mui/icons-material/ArrowForwardIos';
 import CloseIcon from '@mui/icons-material/Close';
-import { Button, IconButton } from '@mui/material';
+import { Button, IconButton, Tooltip } from '@mui/material';
 import { observer } from 'mobx-react';
-import { makeStyles } from 'tss-react/mui';
 const useStyles = makeStyles()(theme => ({
     mb: {
         marginBottom: 10,
@@ -20,12 +20,25 @@ const useStyles = makeStyles()(theme => ({
         position: 'absolute',
         top: 30,
     },
+    synbuttonNeedsConfig: {
+        color: theme.palette.warning.main,
+    },
     bg: {
         background: theme.palette.divider,
     },
 }));
-const AssemblyRows = observer(function ({ selectedRow, selectedAssemblyNames, setSelectedRow, setSelectedAssemblyNames, model, }) {
-    const { classes, cx } = useStyles();
+function rowNeedsConfiguration(model, idx) {
+    const selection = model.importFormSyntenyTrackSelections[idx];
+    if (!selection) {
+        return true;
+    }
+    if (selection.type === 'preConfigured' && !selection.value) {
+        return true;
+    }
+    return false;
+}
+const AssemblyRows = observer(function AssemblyRows({ selectedRow, selectedAssemblyNames, setSelectedRow, setSelectedAssemblyNames, model, }) {
+    const { classes } = useStyles();
     const session = getSession(model);
     return selectedAssemblyNames.map((assemblyName, idx) => (_jsxs("div", { className: classes.rel, children: [_jsxs("span", { children: ["Row ", idx + 1, ": "] }), _jsx(IconButton, { disabled: selectedAssemblyNames.length <= 2, onClick: () => {
                     model.importFormRemoveRow(idx);
@@ -37,17 +50,21 @@ const AssemblyRows = observer(function ({ selectedRow, selectedAssemblyNames, se
                     }
                 }, children: _jsx(CloseIcon, {}) }), _jsx(AssemblySelector, { helperText: "", selected: assemblyName, onChange: newAssembly => {
                     setSelectedAssemblyNames(selectedAssemblyNames.map((asm, idx2) => idx2 === idx ? newAssembly : asm));
-                }, session: session }), idx !== selectedAssemblyNames.length - 1 ? (_jsx(IconButton, { "data-testid": "synbutton", className: cx(classes.synbutton, idx === selectedRow ? classes.bg : undefined), onClick: () => {
-                    setSelectedRow(idx);
-                }, children: _jsx(ArrowForwardIosIcon, {}) })) : null] }, `${assemblyName}-${idx}`)));
+                }, session: session }), idx !== selectedAssemblyNames.length - 1 ? (_jsx(Tooltip, { title: "Click to configure synteny track for this row pair", children: _jsx(IconButton, { "data-testid": "synbutton", className: cx(classes.synbutton, idx === selectedRow ? classes.bg : undefined, rowNeedsConfiguration(model, idx)
+                        ? classes.synbuttonNeedsConfig
+                        : undefined), onClick: () => {
+                        setSelectedRow(idx);
+                    }, children: _jsx(ArrowForwardIosIcon, {}) }) })) : null] }, `${assemblyName}-${idx}`)));
 });
-const LeftPanel = observer(function ({ model, selectedAssemblyNames, setSelectedAssemblyNames, selectedRow, setSelectedRow, defaultAssemblyName, onLaunch, }) {
+const LeftPanel = observer(function LeftPanel({ model, selectedAssemblyNames, setSelectedAssemblyNames, selectedRow, setSelectedRow, defaultAssemblyName, onLaunch, }) {
     const { classes } = useStyles();
+    const numRowPairs = selectedAssemblyNames.length - 1;
+    const canLaunch = !Array.from({ length: numRowPairs }, (_, i) => i).some(i => rowNeedsConfiguration(model, i));
     return (_jsxs(_Fragment, { children: [_jsx("div", { className: classes.mb, children: "Select assemblies for linear synteny view" }), _jsx(AssemblyRows, { model: model, selectedAssemblyNames: selectedAssemblyNames, setSelectedAssemblyNames: setSelectedAssemblyNames, selectedRow: selectedRow, setSelectedRow: setSelectedRow }), _jsxs("div", { children: [_jsx(Button, { className: classes.button, variant: "contained", color: "secondary", onClick: () => {
                             setSelectedAssemblyNames([
                                 ...selectedAssemblyNames,
                                 defaultAssemblyName,
                             ]);
-                        }, children: "Add row" }), _jsx(Button, { className: classes.button, onClick: onLaunch, variant: "contained", color: "primary", children: "Launch" })] })] }));
+                        }, children: "Add row" }), _jsx(Button, { className: classes.button, disabled: !canLaunch, onClick: onLaunch, variant: "contained", color: "primary", children: "Launch" })] })] }));
 });
 export default LeftPanel;

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

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

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

@@ -2,12 +2,12 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { useState } from 'react';
 import { ErrorMessage } from '@jbrowse/core/ui';
 import { getSession } from '@jbrowse/core/util';
+import { makeStyles } from '@jbrowse/core/util/tss-react';
 import { Container } from '@mui/material';
 import { observer } from 'mobx-react';
-import { makeStyles } from 'tss-react/mui';
-import ImportSyntenyTrackSelector from './ImportSyntenyTrackSelectorArea';
-import LeftPanel from './LeftPanel';
-import { doSubmit } from './doSubmit';
+import ImportSyntenyTrackSelector from "./ImportSyntenyTrackSelectorArea.js";
+import LeftPanel from "./LeftPanel.js";
+import { doSubmit } from "./doSubmit.js";
 const useStyles = makeStyles()(theme => ({
     importFormContainer: {
         padding: theme.spacing(4),
@@ -24,7 +24,7 @@ const useStyles = makeStyles()(theme => ({
         flexShrink: 0,
     },
 }));
-const LinearSyntenyViewImportForm = observer(function ({ model, }) {
+const LinearSyntenyViewImportForm = observer(function LinearSyntenyViewImportForm({ model, }) {
     const { classes } = useStyles();
     const session = getSession(model);
     const { assemblyNames } = session;

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

@@ -1,4 +1,4 @@
-import type { LinearSyntenyViewModel } from '../../model';
+import type { LinearSyntenyViewModel } from '../../model.ts';
 export declare function doSubmit({ selectedAssemblyNames, model, }: {
     selectedAssemblyNames: string[];
     model: LinearSyntenyViewModel;

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

@@ -26,10 +26,9 @@ export async function doSubmit({ selectedAssemblyNames, model, }) {
     }
     else {
         toJS(importFormSyntenyTrackSelections).map((f, idx) => {
-            var _a;
             if (f.type === 'userOpened') {
                 session.addTrackConf(f.value);
-                model.toggleTrack((_a = f.value) === null || _a === void 0 ? void 0 : _a.trackId, idx);
+                model.toggleTrack(f.value?.trackId, idx);
             }
             else if (f.type === 'preConfigured') {
                 model.showTrack(f.value, idx);

package/esm/LinearSyntenyView/components/ImportForm/selectors/AnchorsSelector.d.ts

@@ -1,3 +1,3 @@
-import type { SelectorProps } from './SelectorTypes';
+import type { SelectorProps } from './SelectorTypes.ts';
 declare const AnchorsSelector: ({ assembly1, assembly2, swap, setSwap, fileLocation, setFileLocation, bed1Location, setBed1Location, bed2Location, setBed2Location, radioOption, }: SelectorProps) => import("react/jsx-runtime").JSX.Element;
 export default AnchorsSelector;

package/esm/LinearSyntenyView/components/ImportForm/selectors/AnchorsSelector.js

@@ -1,8 +1,8 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { FileSelector } from '@jbrowse/core/ui';
 import { observer } from 'mobx-react';
-import SwapAssemblies from './SwapAssemblies';
-const AnchorsSelector = observer(function ({ assembly1, assembly2, swap, setSwap, fileLocation, setFileLocation, bed1Location = undefined, setBed1Location = () => { }, bed2Location = undefined, setBed2Location = () => { }, radioOption, }) {
+import SwapAssemblies from "./SwapAssemblies.js";
+const AnchorsSelector = observer(function AnchorsSelector({ assembly1, assembly2, swap, setSwap, fileLocation, setFileLocation, bed1Location, setBed1Location = () => { }, bed2Location, setBed2Location = () => { }, radioOption, }) {
     return (_jsxs("div", { children: [_jsxs("div", { style: { margin: 20 }, children: ["Open the ", radioOption, " and .bed files for both genome assemblies from the MCScan (Python version) pipeline", ' ', _jsx("a", { href: "https://github.com/tanghaibao/jcvi/wiki/MCscan-(Python-version)", children: "(more info)" })] }), _jsxs("div", { style: { maxWidth: 400, margin: '0 auto' }, children: [_jsx(FileSelector, { inline: true, name: radioOption, location: fileLocation, setLocation: setFileLocation }), _jsx(FileSelector, { inline: true, name: "genome 1 .bed (left column of anchors file)", description: "", location: bed1Location, setLocation: setBed1Location }), _jsx(FileSelector, { inline: true, name: "genome 2 .bed (right column of anchors file)", description: "", location: bed2Location, setLocation: setBed2Location }), _jsx(SwapAssemblies, { swap: swap, radioOption: radioOption, assembly1: assembly1, assembly2: assembly2, setSwap: setSwap, text1: "bed 1 assembly", text2: "bed 2 assembly" })] })] }));
 });
 export default AnchorsSelector;

package/esm/LinearSyntenyView/components/ImportForm/selectors/PifGzSelector.d.ts

@@ -1,3 +1,3 @@
-import type { SelectorProps } from './SelectorTypes';
+import type { SelectorProps } from './SelectorTypes.ts';
 declare const PifGzSelector: ({ assembly1, assembly2, swap, setSwap, fileLocation, setFileLocation, indexFileLocation, setIndexFileLocation, radioOption, }: SelectorProps) => import("react/jsx-runtime").JSX.Element;
 export default PifGzSelector;

package/esm/LinearSyntenyView/components/ImportForm/selectors/PifGzSelector.js

@@ -1,8 +1,8 @@
 import { jsxs as _jsxs, jsx as _jsx } from "react/jsx-runtime";
 import { FileSelector } from '@jbrowse/core/ui';
 import { observer } from 'mobx-react';
-import SwapAssemblies from './SwapAssemblies';
-const PifGzSelector = observer(function ({ assembly1, assembly2, swap, setSwap, fileLocation, setFileLocation, indexFileLocation = undefined, setIndexFileLocation = () => { }, radioOption, }) {
+import SwapAssemblies from "./SwapAssemblies.js";
+const PifGzSelector = observer(function PifGzSelector({ assembly1, assembly2, swap, setSwap, fileLocation, setFileLocation, indexFileLocation, setIndexFileLocation = () => { }, radioOption, }) {
     return (_jsxs("div", { children: [_jsxs("div", { style: { margin: 20 }, children: ["Open the ", radioOption, " and .pif.gz and index file (.pif.gz.tbi or .pif.gz.csi) files for created by `jbrowse make-pif`"] }), _jsxs("div", { style: { maxWidth: 400, margin: '0 auto' }, children: [_jsx(FileSelector, { name: `${radioOption} location`, inline: true, description: "", location: fileLocation, setLocation: setFileLocation }), _jsx(FileSelector, { name: `${radioOption} index location`, inline: true, description: "", location: indexFileLocation, setLocation: setIndexFileLocation }), _jsx(SwapAssemblies, { swap: swap, radioOption: radioOption, assembly1: assembly1, assembly2: assembly2, setSwap: setSwap, text1: "query assembly", text2: "target assembly" })] })] }));
 });
 export default PifGzSelector;

package/esm/LinearSyntenyView/components/ImportForm/selectors/StandardFormatSelector.d.ts

@@ -1,3 +1,3 @@
-import type { SelectorProps } from './SelectorTypes';
+import type { SelectorProps } from './SelectorTypes.ts';
 declare const StandardFormatSelector: ({ assembly1, assembly2, swap, setSwap, fileLocation, setFileLocation, radioOption, }: SelectorProps) => import("react/jsx-runtime").JSX.Element;
 export default StandardFormatSelector;

package/esm/LinearSyntenyView/components/ImportForm/selectors/StandardFormatSelector.js

@@ -3,9 +3,9 @@ import { FileSelector } from '@jbrowse/core/ui';
 import HelpIcon from '@mui/icons-material/Help';
 import { Tooltip } from '@mui/material';
 import { observer } from 'mobx-react';
-import { helpStrings } from './SelectorTypes';
-import SwapAssemblies from './SwapAssemblies';
-const StandardFormatSelector = observer(function ({ assembly1, assembly2, swap, setSwap, fileLocation, setFileLocation, radioOption, }) {
+import { helpStrings } from "./SelectorTypes.js";
+import SwapAssemblies from "./SwapAssemblies.js";
+const StandardFormatSelector = observer(function StandardFormatSelector({ assembly1, assembly2, swap, setSwap, fileLocation, setFileLocation, radioOption, }) {
     return (_jsxs("div", { style: {
             display: 'flex',
             flexDirection: 'column',

package/esm/LinearSyntenyView/components/ImportForm/selectors/SwapAssemblies.js

@@ -1,9 +1,9 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { makeStyles } from '@jbrowse/core/util/tss-react';
 import HelpIcon from '@mui/icons-material/Help';
 import { Button, Tooltip } from '@mui/material';
 import { observer } from 'mobx-react';
-import { makeStyles } from 'tss-react/mui';
-import { helpStrings } from './SelectorTypes';
+import { helpStrings } from "./SelectorTypes.js";
 const useStyles = makeStyles()({
     row: {
         display: 'flex',
@@ -16,7 +16,7 @@ const useStyles = makeStyles()({
         alignItems: 'center',
     },
 });
-const SwapAssemblies = observer(function ({ assembly1, assembly2, swap, setSwap, radioOption, helpContent, text1, text2, }) {
+const SwapAssemblies = observer(function SwapAssemblies({ assembly1, assembly2, swap, setSwap, radioOption, helpContent, text1, text2, }) {
     const { classes } = useStyles();
     return (_jsxs("div", { children: [_jsxs("div", { children: ["Verify or click swap", _jsx(Tooltip, { title: helpContent || _jsx("code", { children: helpStrings[radioOption] }), children: _jsx(HelpIcon, {}) })] }), _jsxs("div", { className: classes.row, children: [_jsxs("div", { className: classes.swap, children: [_jsx("div", { children: _jsx("i", { children: swap ? assembly2 : assembly1 }) }), _jsx("div", { children: text1 }), _jsx("div", { children: _jsx("i", { children: swap ? assembly1 : assembly2 }) }), _jsx("div", { children: text2 })] }), _jsx(Button, { variant: "contained", onClick: () => {
                             if (setSwap) {

package/esm/LinearSyntenyView/components/ImportForm/selectors/index.d.ts

@@ -1,4 +1,4 @@
-export { default as StandardFormatSelector } from './StandardFormatSelector';
-export { default as PifGzSelector } from './PifGzSelector';
-export { default as AnchorsSelector } from './AnchorsSelector';
-export * from './SelectorTypes';
+export { default as StandardFormatSelector } from './StandardFormatSelector.tsx';
+export { default as PifGzSelector } from './PifGzSelector.tsx';
+export { default as AnchorsSelector } from './AnchorsSelector.tsx';
+export * from './SelectorTypes.ts';

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

@@ -1,4 +1,4 @@
-export { default as StandardFormatSelector } from './StandardFormatSelector';
-export { default as PifGzSelector } from './PifGzSelector';
-export { default as AnchorsSelector } from './AnchorsSelector';
-export * from './SelectorTypes';
+export { default as StandardFormatSelector } from "./StandardFormatSelector.js";
+export { default as PifGzSelector } from "./PifGzSelector.js";
+export { default as AnchorsSelector } from "./AnchorsSelector.js";
+export * from "./SelectorTypes.js";

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

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

package/esm/LinearSyntenyView/components/LinearSyntenyView.js

@@ -1,9 +1,19 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import { lazy } from 'react';
+import { LoadingEllipses } from '@jbrowse/core/ui';
 import { observer } from 'mobx-react';
-import LinearComparativeViewComponent from '../../LinearComparativeView/components/LinearComparativeView';
-const LinearSyntenyImportForm = lazy(() => import('./ImportForm/LinearSyntenyImportForm'));
-const LinearSyntenyView = observer(function ({ model, }) {
-    return !model.initialized ? (_jsx(LinearSyntenyImportForm, { model: model })) : (_jsx(LinearComparativeViewComponent, { model: model }));
+import LinearComparativeViewComponent from "../../LinearComparativeView/components/LinearComparativeView.js";
+const LinearSyntenyImportForm = lazy(() => import("./ImportForm/LinearSyntenyImportForm.js"));
+const LinearSyntenyView = observer(function LinearSyntenyView({ model, }) {
+    const { showLoading, showImportForm, loadingMessage } = model;
+    if (showLoading) {
+        return _jsx(LoadingEllipses, { variant: "h6", message: loadingMessage });
+    }
+    else if (showImportForm) {
+        return _jsx(LinearSyntenyImportForm, { model: model });
+    }
+    else {
+        return _jsx(LinearComparativeViewComponent, { model: model });
+    }
 });
 export default LinearSyntenyView;

package/esm/LinearSyntenyView/index.js

@@ -1,13 +1,13 @@
 import { lazy } from 'react';
 import ViewType from '@jbrowse/core/pluggableElementTypes/ViewType';
-import modelFactory from './model';
+import modelFactory from "./model.js";
 export default function LinearSyntenyViewF(pluginManager) {
     pluginManager.addViewType(() => {
         return new ViewType({
             name: 'LinearSyntenyView',
             displayName: 'Linear synteny view',
             stateModel: modelFactory(pluginManager),
-            ReactComponent: lazy(() => import('./components/LinearSyntenyView')),
+            ReactComponent: lazy(() => import("./components/LinearSyntenyView.js")),
         });
     });
 }