@jbrowse/plugin-linear-comparative-view 3.5.0 → 3.6.0

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

@@ -1,10 +1,10 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { useEffect, useState } from 'react';
 import { ErrorMessage, FileSelector } from '@jbrowse/core/ui';
-import HelpIcon from '@mui/icons-material/Help';
-import { Button, FormControlLabel, Grid, Paper, Radio, RadioGroup, Tooltip, Typography, } from '@mui/material';
+import { FormControlLabel, Grid, Paper, Radio, RadioGroup, Typography, } from '@mui/material';
 import { observer } from 'mobx-react';
 import { getAdapter } from './getAdapter';
+import { AnchorsSelector, PifGzSelector, StandardFormatSelector, } from './selectors';
 import { basename, extName, getName, stripGz } from './util';
 const ImportSyntenyOpenCustomTrack = observer(function ({ model, assembly1, assembly2, selectedRow, }) {
     const [swap, setSwap] = useState(false);
@@ -59,13 +59,6 @@ const ImportSyntenyOpenCustomTrack = observer(function ({ model, assembly1, asse
         indexFileLocation,
         radioOption,
     ]);
-    const helpStrings = {
-        '.paf': 'minimap2 target.fa query.fa',
-        '.pif.gz': 'minimap2 target.fa query.fa',
-        '.out': 'mashmap target.fa query.fa',
-        '.delta': 'mummer target.fa query.fa',
-        '.chain': 'e.g. queryToTarget.chain',
-    };
     return (_jsxs(Paper, { style: { padding: 12 }, children: [error ? _jsx(ErrorMessage, { error: error }) : null, _jsx(Typography, { style: { textAlign: 'center' }, children: "Add a .paf (minimap2), .delta (Mummer), .chain (UCSC liftover), .anchors or .anchors.simple (MCScan), or .pif.gz (jbrowse CLI make-pif) file to view. These file types can also be gzipped." }), _jsx(RadioGroup, { value: radioOption, onChange: event => {
                     setValue(event.target.value);
                 }, children: _jsx(Grid, { container: true, justifyContent: "center", children: [
@@ -79,46 +72,7 @@ const ImportSyntenyOpenCustomTrack = observer(function ({ model, assembly1, asse
                     ].map(extension => (_jsx(FormControlLabel, { value: extension, control: _jsx(Radio, {}), label: extension }, extension))) }) }), _jsx(Grid, { container: true, justifyContent: "center", children: radioOption === '.paf' ||
                     radioOption === '.out' ||
                     radioOption === '.delta' ||
-                    radioOption === '.chain' ||
-                    radioOption === '.pif.gz' ? (_jsxs("div", { style: {
-                        display: 'flex',
-                        flexDirection: 'column',
-                        gap: 10,
-                    }, children: [_jsx(FileSelector, { name: `${radioOption} location`, inline: true, description: "", location: fileLocation, setLocation: loc => {
-                                setFileLocation(loc);
-                            } }), _jsxs("div", { children: [_jsxs("div", { children: ["Verify or click swap", _jsx(Tooltip, { title: _jsx("code", { children: helpStrings[radioOption] }), children: _jsx(HelpIcon, {}) })] }), _jsxs("div", { style: {
-                                        display: 'flex',
-                                        gap: 20,
-                                    }, children: [_jsxs("div", { style: {
-                                                display: 'grid',
-                                                gridTemplateColumns: '1fr 1fr',
-                                                gap: 4,
-                                                alignItems: 'center',
-                                            }, children: [_jsx("div", { children: _jsx("i", { children: swap ? assembly2 : assembly1 }) }), _jsx("div", { children: "query assembly" }), _jsx("div", { children: _jsx("i", { children: swap ? assembly1 : assembly2 }) }), _jsx("div", { children: "target assembly" })] }), _jsx(Button, { variant: "contained", onClick: () => {
-                                                setSwap(!swap);
-                                            }, children: "Swap?" })] })] })] })) : value === '.anchors' || value === '.anchors.simple' ? (_jsxs("div", { children: [_jsxs("div", { style: { margin: 20 }, children: ["Open the ", value, " 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", { children: [_jsx(FileSelector, { inline: true, name: value, location: fileLocation, setLocation: loc => {
-                                        setFileLocation(loc);
-                                    } }), _jsx(FileSelector, { inline: true, name: "genome 1 .bed (left column of anchors file)", description: "", location: bed1Location, setLocation: loc => {
-                                        setBed1Location(loc);
-                                    } }), _jsx(FileSelector, { inline: true, name: "genome 2 .bed (right column of anchors file)", description: "", location: bed2Location, setLocation: loc => {
-                                        setBed2Location(loc);
-                                    } })] }), _jsxs("div", { style: {
-                                margin: 'auto',
-                                display: 'flex',
-                                justifyContent: 'center',
-                                gap: 20,
-                            }, children: [_jsxs("div", { style: {
-                                        display: 'grid',
-                                        gridTemplateColumns: '1fr 1fr',
-                                        gap: 4,
-                                        alignItems: 'center',
-                                    }, children: [_jsx("div", { children: _jsx("i", { children: swap ? assembly2 : assembly1 }) }), _jsx("div", { children: "bed1 assembly" }), _jsx("div", { children: _jsx("i", { children: swap ? assembly1 : assembly2 }) }), _jsx("div", { children: "bed2 assembly" })] }), _jsx(Button, { variant: "contained", onClick: () => {
-                                        setSwap(!swap);
-                                    }, children: "Swap?" })] })] })) : value === '.pif.gz' ? (_jsxs("div", { style: { display: 'flex' }, children: [_jsx("div", { children: _jsx(FileSelector, { name: `${value} location`, description: "", location: fileLocation, setLocation: loc => {
-                                    setFileLocation(loc);
-                                } }) }), _jsx("div", { children: _jsx(FileSelector, { name: `${value} index location`, description: "", location: indexFileLocation, setLocation: loc => {
-                                    setIndexFileLocation(loc);
-                                } }) })] })) : (_jsx(FileSelector, { name: value ? `${value} location` : '', description: "", location: fileLocation, setLocation: loc => {
+                    radioOption === '.chain' ? (_jsx(StandardFormatSelector, { assembly1: assembly1, assembly2: assembly2, swap: swap, setSwap: setSwap, fileLocation: fileLocation, setFileLocation: setFileLocation, radioOption: radioOption })) : radioOption === '.pif.gz' ? (_jsx(PifGzSelector, { assembly1: assembly1, assembly2: assembly2, swap: swap, setSwap: setSwap, fileLocation: fileLocation, setFileLocation: setFileLocation, indexFileLocation: indexFileLocation, setIndexFileLocation: setIndexFileLocation, radioOption: radioOption })) : value === '.anchors' || value === '.anchors.simple' ? (_jsx(AnchorsSelector, { assembly1: assembly1, assembly2: assembly2, swap: swap, setSwap: setSwap, fileLocation: fileLocation, setFileLocation: setFileLocation, bed1Location: bed1Location, setBed1Location: setBed1Location, bed2Location: bed2Location, setBed2Location: setBed2Location, radioOption: value })) : (_jsx(FileSelector, { name: value ? `${value} location` : '', description: "", location: fileLocation, setLocation: loc => {
                         setFileLocation(loc);
                     } })) })] }));
 });

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

@@ -0,0 +1,3 @@
+import type { SelectorProps } from './SelectorTypes';
+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

@@ -0,0 +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, }) {
+    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

@@ -0,0 +1,3 @@
+import type { SelectorProps } from './SelectorTypes';
+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

@@ -0,0 +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, }) {
+    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/SelectorTypes.d.ts

@@ -0,0 +1,19 @@
+import type { FileLocation } from '@jbrowse/core/util/types';
+export interface SelectorProps {
+    assembly1: string;
+    assembly2: string;
+    swap: boolean;
+    setSwap?: (swap: boolean) => void;
+    fileLocation: FileLocation | undefined;
+    setFileLocation: (location: FileLocation | undefined) => void;
+    indexFileLocation?: FileLocation | undefined;
+    setIndexFileLocation?: (location: FileLocation | undefined) => void;
+    bed1Location?: FileLocation | undefined;
+    setBed1Location?: (location: FileLocation | undefined) => void;
+    bed2Location?: FileLocation | undefined;
+    setBed2Location?: (location: FileLocation | undefined) => void;
+    radioOption: string;
+}
+export type SetLocationFunction = (location: FileLocation | undefined) => void;
+export type HelpStrings = Record<string, string>;
+export declare const helpStrings: HelpStrings;

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

@@ -0,0 +1,7 @@
+export const helpStrings = {
+    '.paf': 'minimap2 target.fa query.fa',
+    '.pif.gz': 'minimap2 target.fa query.fa',
+    '.out': 'mashmap target.fa query.fa',
+    '.delta': 'mummer target.fa query.fa',
+    '.chain': 'e.g. queryToTarget.chain',
+};

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

@@ -0,0 +1,3 @@
+import type { SelectorProps } from './SelectorTypes';
+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

@@ -0,0 +1,15 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+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, }) {
+    return (_jsxs("div", { style: {
+            display: 'flex',
+            flexDirection: 'column',
+            gap: 10,
+        }, children: [_jsx(FileSelector, { name: `${radioOption} location`, inline: true, description: "", location: fileLocation, setLocation: setFileLocation }), _jsxs("div", { children: [_jsxs("div", { children: ["Verify or click swap", _jsx(Tooltip, { title: _jsx("code", { children: helpStrings[radioOption] }), children: _jsx(HelpIcon, {}) })] }), _jsx(SwapAssemblies, { swap: swap, radioOption: radioOption, assembly1: assembly1, assembly2: assembly2, setSwap: setSwap, text1: "query assembly", text2: "target assembly" })] })] }));
+});
+export default StandardFormatSelector;

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

@@ -0,0 +1,13 @@
+import type { ReactNode } from 'react';
+export interface SwapAssembliesProps {
+    assembly1?: string;
+    assembly2?: string;
+    swap?: boolean;
+    setSwap?: (arg: boolean) => void;
+    radioOption: string;
+    helpContent?: ReactNode;
+    text1: string;
+    text2: string;
+}
+declare const SwapAssemblies: ({ assembly1, assembly2, swap, setSwap, radioOption, helpContent, text1, text2, }: SwapAssembliesProps) => import("react/jsx-runtime").JSX.Element;
+export default SwapAssemblies;

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

@@ -0,0 +1,27 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+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';
+const useStyles = makeStyles()({
+    row: {
+        display: 'flex',
+        gap: 20,
+    },
+    swap: {
+        display: 'grid',
+        gridTemplateColumns: '1fr 1fr',
+        gap: 4,
+        alignItems: 'center',
+    },
+});
+const SwapAssemblies = observer(function ({ 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) {
+                                setSwap(!swap);
+                            }
+                        }, children: "Swap?" })] })] }));
+});
+export default SwapAssemblies;

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

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

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

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

package/esm/LinearSyntenyView/model.d.ts

@@ -77,6 +77,7 @@ export default function stateModelFactory(pluginManager: PluginManager): import(
         readonly width: number;
         readonly interRegionPaddingWidth: number;
         readonly assemblyNames: string[];
+        readonly assemblyDisplayNames: string[];
         readonly isTopLevelView: import("@jbrowse/core/util").AbstractViewModel | undefined;
         readonly stickyViewHeaders: boolean | undefined;
         readonly rubberbandTop: number;
@@ -462,6 +463,7 @@ export default function stateModelFactory(pluginManager: PluginManager): import(
         readonly width: number;
         readonly interRegionPaddingWidth: number;
         readonly assemblyNames: string[];
+        readonly assemblyDisplayNames: string[];
         readonly isTopLevelView: import("@jbrowse/core/util").AbstractViewModel | undefined;
         readonly stickyViewHeaders: boolean | undefined;
         readonly rubberbandTop: number;

package/esm/LinearSyntenyView/svgcomponents/SVGLinearSyntenyView.js

@@ -67,7 +67,7 @@ export async function renderToSvg(model, opts) {
         const rendering = renderings[i - 1];
         const height = heights[i];
         const levelHeight = level.height || 0;
-        RenderList.push(_jsxs("g", { transform: `translate(0 ${currOffset})`, children: [levelHeight ? (_jsx("defs", { children: _jsx("clipPath", { id: `synclip-${i}`, children: _jsx("rect", { x: 0, y: 0, width: width, height: levelHeight }) }) })) : null, _jsx("g", { transform: `translate(${shift + trackLabelOffset} ${fontSize})`, clipPath: `url(#synclip-${i})`, children: rendering === null || rendering === void 0 ? void 0 : rendering.map((r, i) => _jsx(ReactRendering, { rendering: r }, i)) }), _jsx("g", { transform: `translate(0 ${levelHeight})`, children: _jsx(SVGLinearGenomeView, { rulerHeight: rulerHeight, shift: shift, trackLabelOffset: trackLabelOffset, textHeight: textHeight, trackLabels: trackLabels, displayResults: displayResults[i], view: view, fontSize: fontSize }, view.id) })] }, view.id));
+        RenderList.push(_jsxs("g", { transform: `translate(0 ${currOffset})`, children: [levelHeight ? (_jsx("defs", { children: _jsx("clipPath", { id: `synclip-${i}`, children: _jsx("rect", { x: 0, y: 0, width: width, height: levelHeight }) }) })) : null, _jsx("g", { transform: `translate(${shift + trackLabelOffset} ${fontSize})`, clipPath: `url(#synclip-${i})`, children: rendering === null || rendering === void 0 ? void 0 : rendering.map((r, i) => (_jsx(ReactRendering, { rendering: r }, i))) }), _jsx("g", { transform: `translate(0 ${levelHeight})`, children: _jsx(SVGLinearGenomeView, { rulerHeight: rulerHeight, shift: shift, trackLabelOffset: trackLabelOffset, textHeight: textHeight, trackLabels: trackLabels, displayResults: displayResults[i], view: view, fontSize: fontSize }, view.id) })] }, view.id));
         currOffset += height + fontSize + rulerHeight + levelHeight;
     }
     return renderToStaticMarkup(_jsx(ThemeProvider, { theme: theme, children: _jsx(Wrapper, { children: _jsxs("svg", { width: width, height: totalHeightSvg, xmlns: "http://www.w3.org/2000/svg", xmlnsXlink: "http://www.w3.org/1999/xlink", viewBox: [0, 0, w + shift * 2, totalHeightSvg].toString(), children: [_jsx(SVGBackground, { width: w, height: totalHeightSvg, shift: shift }), RenderList] }) }) }));

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@jbrowse/plugin-linear-comparative-view",
-  "version": "3.5.0",
+  "version": "3.6.0",
   "description": "JBrowse 2 linear comparative view",
   "keywords": [
     "jbrowse",
@@ -36,9 +36,9 @@
     "clean": "rimraf dist esm *.tsbuildinfo"
   },
   "dependencies": {
-    "@jbrowse/core": "^3.5.0",
-    "@jbrowse/plugin-alignments": "^3.5.0",
-    "@jbrowse/plugin-linear-genome-view": "^3.5.0",
+    "@jbrowse/core": "^3.6.0",
+    "@jbrowse/plugin-alignments": "^3.6.0",
+    "@jbrowse/plugin-linear-genome-view": "^3.6.0",
     "@mui/icons-material": "^7.0.0",
     "@mui/material": "^7.0.0",
     "copy-to-clipboard": "^3.3.1",
@@ -59,5 +59,5 @@
   "publishConfig": {
     "access": "public"
   },
-  "gitHead": "8a8aa0aab2229dece106a5715a767e649e2fe92b"
+  "gitHead": "133a68815ab348d156c18d83cffc997356c3cfbb"
 }