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

package/esm/LinearSyntenyView/svgcomponents/SVGLinearGenomeView.js

@@ -0,0 +1,13 @@
+import React from 'react';
+import { useTheme } from '@mui/material';
+import { getFillProps } from '@jbrowse/core/util';
+import { SVGTracks, SVGRuler, } from '@jbrowse/plugin-linear-genome-view';
+export default function SVGLinearGenomeView({ trackLabelOffset, fontSize, textHeight, trackLabels, view, displayResults, rulerHeight, shift, }) {
+    const theme = useTheme();
+    return (React.createElement("g", { transform: `translate(${shift} ${fontSize})` },
+        React.createElement("g", { transform: `translate(${trackLabelOffset})` },
+            React.createElement("text", { x: 0, fontSize: fontSize, ...getFillProps(theme.palette.text.primary) }, view.assemblyNames.join(', ')),
+            React.createElement(SVGRuler, { model: displayResults.view, fontSize: fontSize })),
+        React.createElement("g", { transform: `translate(0 ${rulerHeight + fontSize})` },
+            React.createElement(SVGTracks, { textHeight: textHeight, trackLabels: trackLabels, fontSize: fontSize, model: displayResults.view, displayResults: displayResults.data, trackLabelOffset: trackLabelOffset }))));
+}

package/esm/LinearSyntenyView/svgcomponents/SVGLinearSyntenyView.d.ts

@@ -1,4 +1,2 @@
 import { ExportSvgOptions, LinearSyntenyViewModel } from '../model';
-type LSV = LinearSyntenyViewModel;
-export declare function renderToSvg(model: LSV, opts: ExportSvgOptions): Promise<string>;
-export {};
+export declare function renderToSvg(model: LinearSyntenyViewModel, opts: ExportSvgOptions): Promise<string>;

package/esm/LinearSyntenyView/svgcomponents/SVGLinearSyntenyView.js

@@ -2,26 +2,27 @@ import React from 'react';
 import { ThemeProvider } from '@mui/material';
 import { getRoot } from 'mobx-state-tree';
 import { when } from 'mobx';
-import { getSession, getSerializedSvg, max, measureText, ReactRendering, renderToAbstractCanvas, renderToStaticMarkup, sum, getFillProps, } from '@jbrowse/core/util';
+import { getSession, getSerializedSvg, max, measureText, ReactRendering, renderToAbstractCanvas, renderToStaticMarkup, sum, } from '@jbrowse/core/util';
 import { getTrackName } from '@jbrowse/core/util/tracks';
 import { createJBrowseTheme } from '@jbrowse/core/ui';
-import { SVGTracks, SVGRuler, totalHeight, } from '@jbrowse/plugin-linear-genome-view';
+import { totalHeight } from '@jbrowse/plugin-linear-genome-view';
 // locals
 import SVGBackground from './SVGBackground';
+import SVGLinearGenomeView from './SVGLinearGenomeView';
 import { drawRef } from '../../LinearSyntenyDisplay/drawSynteny';
 // render LGV to SVG
 export async function renderToSvg(model, opts) {
     var _a;
     await when(() => model.initialized);
-    const { textHeight = 18, headerHeight = 30, rulerHeight = 30, fontSize = 13, trackLabels = 'offset', Wrapper = ({ children }) => children, themeName = 'default', } = opts;
+    const { textHeight = 18, rulerHeight = 30, fontSize = 13, trackLabels = 'offset', Wrapper = ({ children }) => children, themeName = 'default', } = opts;
     const session = getSession(model);
     const themeVar = (_a = session.allThemes) === null || _a === void 0 ? void 0 : _a.call(session)[themeName];
-    const { width, views, middleComparativeHeight: synH, tracks } = model;
+    const { width, views, levels } = model;
     const shift = 50;
-    const offset = headerHeight + rulerHeight;
+    const offset = rulerHeight;
     const { createRootFn } = getRoot(model);
     const heights = views.map(v => totalHeight(v.tracks, textHeight, trackLabels) + offset);
-    const totalHeightSvg = sum(heights) + synH + 100;
+    const totalHeightSvg = sum(heights) + sum(levels.map(l => l.height)) + 100;
     const displayResults = await Promise.all(views.map(async (view) => ({
         view,
         data: await Promise.all(view.tracks.map(async (track) => {
@@ -33,50 +34,58 @@ export async function renderToSvg(model, opts) {
             };
         })),
     })));
-    const renderings = await Promise.all(tracks.map(async (track) => {
+    const renderings = await Promise.all(levels.map(async (level) => await Promise.all(level.tracks.map(async (track) => {
         const d = track.displays[0];
         await when(() => (d.ready !== undefined ? d.ready : true));
-        const r = await renderToAbstractCanvas(width, synH, { exportSVG: opts }, ctx => {
+        const r = await renderToAbstractCanvas(width, level.height, { exportSVG: opts }, ctx => {
             drawRef(d, ctx);
             return undefined;
         });
         if ('imageData' in r) {
             throw new Error('found a canvas in svg export, probably a bug');
         }
-        if ('canvasRecordedData' in r) {
+        else if ('canvasRecordedData' in r) {
             return {
                 html: await getSerializedSvg({
                     ...r,
                     width,
-                    height: synH,
+                    height: level.height,
                 }),
             };
         }
-        return r;
-    }));
-    const trackLabelMaxLen = max(views.flatMap(view => view.tracks.map(t => measureText(getTrackName(t.configuration, session), fontSize))), 0) + 40;
+        else {
+            return r;
+        }
+    }))));
+    const trackLabelMaxLen = max(views.flatMap(view => view.tracks.map(track => measureText(getTrackName(track.configuration, session), fontSize))), 0) + 40;
     const trackLabelOffset = trackLabels === 'left' ? trackLabelMaxLen : 0;
     const w = width + trackLabelOffset;
     const theme = createJBrowseTheme(themeVar);
+    const RenderList = [
+        React.createElement(SVGLinearGenomeView, { rulerHeight: rulerHeight, trackLabelOffset: trackLabelOffset, shift: shift, textHeight: textHeight, trackLabels: trackLabels, displayResults: displayResults[0], key: views[0].id, view: views[0], fontSize: fontSize }),
+    ];
+    let currOffset = heights[0] + fontSize + rulerHeight;
+    for (let i = 1; i < views.length; i++) {
+        const view = views[i];
+        const level = levels[i - 1];
+        const rendering = renderings[i - 1];
+        const height = heights[i];
+        const levelHeight = level.height || 0;
+        RenderList.push(React.createElement("g", { key: view.id, transform: `translate(0 ${currOffset})` },
+            levelHeight ? (React.createElement("defs", null,
+                React.createElement("clipPath", { id: `synclip-${i}` },
+                    React.createElement("rect", { x: 0, y: 0, width: width, height: levelHeight })))) : null,
+            React.createElement("g", { transform: `translate(${shift + trackLabelOffset} ${fontSize})`, clipPath: `url(#synclip-${i})` }, rendering === null || rendering === void 0 ? void 0 : rendering.map((r, i) => (
+            /* biome-ignore lint/suspicious/noArrayIndexKey: */
+            React.createElement(ReactRendering, { key: i, rendering: r })))),
+            React.createElement("g", { transform: `translate(0 ${levelHeight})` },
+                React.createElement(SVGLinearGenomeView, { rulerHeight: rulerHeight, shift: shift, trackLabelOffset: trackLabelOffset, textHeight: textHeight, trackLabels: trackLabels, displayResults: displayResults[i], key: view.id, view: view, fontSize: fontSize }))));
+        currOffset += height + fontSize + rulerHeight + levelHeight;
+    }
     // the xlink namespace is used for rendering <image> tag
     return renderToStaticMarkup(React.createElement(ThemeProvider, { theme: theme },
         React.createElement(Wrapper, null,
             React.createElement("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() },
                 React.createElement(SVGBackground, { width: w, height: totalHeightSvg, shift: shift }),
-                React.createElement("g", { transform: `translate(${shift} ${fontSize})` },
-                    React.createElement("g", { transform: `translate(${trackLabelOffset})` },
-                        React.createElement("text", { x: 0, fontSize: fontSize, ...getFillProps(theme.palette.text.primary) }, views[0].assemblyNames.join(', ')),
-                        React.createElement(SVGRuler, { model: displayResults[0].view, fontSize: fontSize })),
-                    React.createElement(SVGTracks, { textHeight: textHeight, trackLabels: trackLabels, fontSize: fontSize, model: displayResults[0].view, displayResults: displayResults[0].data, offset: offset, trackLabelOffset: trackLabelOffset })),
-                React.createElement("defs", null,
-                    React.createElement("clipPath", { id: 'synclip' },
-                        React.createElement("rect", { x: 0, y: 0, width: width, height: synH }))),
-                React.createElement("g", { transform: `translate(${shift + trackLabelOffset} ${fontSize + heights[0]})`, clipPath: 'url(#synclip)' }, renderings.map((r, i) => (
-                /* biome-ignore lint/suspicious/noArrayIndexKey: */
-                React.createElement(ReactRendering, { key: i, rendering: r })))),
-                React.createElement("g", { transform: `translate(${shift} ${fontSize + heights[0] + synH})` },
-                    React.createElement("g", { transform: `translate(${trackLabelOffset})` },
-                        React.createElement("text", { x: 0, fontSize: fontSize, ...getFillProps(theme.palette.text.primary) }, views[1].assemblyNames.join(', ')),
-                        React.createElement(SVGRuler, { model: displayResults[1].view, fontSize: fontSize })),
-                    React.createElement(SVGTracks, { textHeight: textHeight, trackLabels: trackLabels, fontSize: fontSize, model: displayResults[1].view, displayResults: displayResults[1].data, offset: offset, trackLabelOffset: trackLabelOffset }))))), createRootFn);
+                RenderList))), createRootFn);
 }

package/esm/LinearSyntenyViewHelper/index.d.ts

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

package/esm/LinearSyntenyViewHelper/index.js

@@ -0,0 +1,19 @@
+import React from 'react';
+import ViewType from '@jbrowse/core/pluggableElementTypes/ViewType';
+import { linearSyntenyViewHelperModelFactory } from './stateModelFactory';
+function UnusedComponent() {
+    return React.createElement("div", null);
+}
+export default function LinearSyntenyViewF(pluginManager) {
+    pluginManager.addViewType(() => {
+        return new ViewType({
+            name: 'LinearSyntenyViewHelper',
+            displayName: 'Linear synteny view (helper)',
+            viewMetadata: {
+                hiddenFromGUI: true,
+            },
+            stateModel: linearSyntenyViewHelperModelFactory(pluginManager),
+            ReactComponent: UnusedComponent,
+        });
+    });
+}

package/esm/LinearSyntenyViewHelper/stateModelFactory.d.ts

@@ -0,0 +1,30 @@
+import { Instance } from 'mobx-state-tree';
+import PluginManager from '@jbrowse/core/PluginManager';
+export declare function linearSyntenyViewHelperModelFactory(pluginManager: PluginManager): import("mobx-state-tree").IModelType<{
+    id: import("mobx-state-tree").IOptionalIType<import("mobx-state-tree").ISimpleType<string>, [undefined]>;
+    type: import("mobx-state-tree").IType<string | undefined, string, string>;
+    tracks: import("mobx-state-tree").IArrayType<import("mobx-state-tree").IAnyType>;
+    height: import("mobx-state-tree").IType<number | undefined, number, number>;
+    level: import("mobx-state-tree").ISimpleType<number>;
+}, {
+    /**
+     * #action
+     */
+    setHeight(n: number): number;
+    /**
+     * #action
+     */
+    showTrack(trackId: string, initialSnapshot?: {}): void;
+    /**
+     * #action
+     */
+    hideTrack(trackId: string): number;
+    /**
+     * #action
+     */
+    toggleTrack(trackId: string): boolean;
+} & {
+    readonly assemblyNames: (string | undefined)[];
+}, import("mobx-state-tree")._NotCustomized, import("mobx-state-tree")._NotCustomized>;
+export type LinearSyntenyViewHelperStateModel = ReturnType<typeof linearSyntenyViewHelperModelFactory>;
+export type LinearSyntenyViewHelperModel = Instance<LinearSyntenyViewHelperStateModel>;

package/esm/LinearSyntenyViewHelper/stateModelFactory.js

@@ -0,0 +1,102 @@
+import { getRoot, resolveIdentifier, types, getParent, } from 'mobx-state-tree';
+import { transaction } from 'mobx';
+import { ElementId } from '@jbrowse/core/util/types/mst';
+export function linearSyntenyViewHelperModelFactory(pluginManager) {
+    return types
+        .model('LinearSyntenyViewHelper', {
+        /**
+         * #property
+         */
+        id: ElementId,
+        /**
+         * #property
+         */
+        type: 'LinearSyntenyViewHelper',
+        /**
+         * #property
+         */
+        tracks: types.array(pluginManager.pluggableMstType('track', 'stateModel')),
+        /**
+         * #property
+         */
+        height: 100,
+        /**
+         * #property
+         */
+        level: types.number,
+    })
+        .actions(self => ({
+        /**
+         * #action
+         */
+        setHeight(n) {
+            self.height = n;
+            return self.height;
+        },
+        /**
+         * #action
+         */
+        showTrack(trackId, initialSnapshot = {}) {
+            const schema = pluginManager.pluggableConfigSchemaType('track');
+            const configuration = resolveIdentifier(schema, getRoot(self), trackId);
+            if (!configuration) {
+                throw new Error(`track not found ${trackId}`);
+            }
+            const trackType = pluginManager.getTrackType(configuration.type);
+            if (!trackType) {
+                throw new Error(`unknown track type ${configuration.type}`);
+            }
+            const viewType = pluginManager.getViewType(self.type);
+            const supportedDisplays = new Set(viewType.displayTypes.map(d => d.name));
+            const displayConf = configuration.displays.find((d) => supportedDisplays.has(d.type));
+            if (!displayConf) {
+                throw new Error(`could not find a compatible display for view type ${self.type}`);
+            }
+            self.tracks.push(trackType.stateModel.create({
+                ...initialSnapshot,
+                type: configuration.type,
+                configuration,
+                displays: [
+                    {
+                        type: displayConf.type,
+                        configuration: displayConf,
+                    },
+                ],
+            }));
+        },
+        /**
+         * #action
+         */
+        hideTrack(trackId) {
+            const schema = pluginManager.pluggableConfigSchemaType('track');
+            const config = resolveIdentifier(schema, getRoot(self), trackId);
+            const shownTracks = self.tracks.filter(t => t.configuration === config);
+            transaction(() => {
+                shownTracks.forEach(t => {
+                    self.tracks.remove(t);
+                });
+            });
+            return shownTracks.length;
+        },
+        /**
+         * #action
+         */
+        toggleTrack(trackId) {
+            const hiddenCount = this.hideTrack(trackId);
+            if (!hiddenCount) {
+                this.showTrack(trackId);
+                return true;
+            }
+            return false;
+        },
+    }))
+        .views(self => ({
+        get assemblyNames() {
+            const p = getParent(self, 2);
+            return [
+                p.views[self.level].assemblyNames[0],
+                p.views[self.level + 1].assemblyNames[0],
+            ];
+        },
+    }));
+}

package/esm/index.js

@@ -6,6 +6,7 @@ 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';
@@ -15,6 +16,7 @@ export default class LinearComparativeViewPlugin extends Plugin {
         this.name = 'LinearComparativeViewPlugin';
     }
     install(pluginManager) {
+        LinearSyntenyViewHelperF(pluginManager);
         LinearComparativeViewF(pluginManager);
         LinearSyntenyViewF(pluginManager);
         LinearComparativeDisplayF(pluginManager);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@jbrowse/plugin-linear-comparative-view",
-  "version": "2.15.3",
+  "version": "2.16.0",
   "description": "JBrowse 2 linear comparative view",
   "keywords": [
     "jbrowse",
@@ -61,5 +61,5 @@
   "publishConfig": {
     "access": "public"
   },
-  "gitHead": "c0f82fe7b210622dd462e702641cc6da01109c6e"
+  "gitHead": "1e6d4fbc27ce684eed19e3c217f34bd2da24ab75"
 }

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;