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

package/dist/LinearSyntenyDisplay/components/LinearSyntenyRendering.js

@@ -45,21 +45,21 @@ const useStyles = (0, mui_1.makeStyles)()({
     rel: {
         position: 'relative',
     },
-    abs: {
+    mouseoverCanvas: {
         position: 'absolute',
-    },
-    none: {
         pointEvents: 'none',
     },
+    mainCanvas: {
+        position: 'absolute',
+    },
 });
 const LinearSyntenyRendering = (0, mobx_react_1.observer)(function ({ model, }) {
-    const { classes, cx } = useStyles();
+    const { classes } = useStyles();
     const xOffset = (0, react_1.useRef)(0);
-    const currScrollFrame = (0, react_1.useRef)();
     const view = (0, util_1.getContainingView)(model);
-    const height = view.middleComparativeHeight;
     const width = view.width;
     const delta = (0, react_1.useRef)(0);
+    const scheduled = (0, react_1.useRef)(false);
     const timeout = (0, react_1.useRef)();
     const [anchorEl, setAnchorEl] = (0, react_1.useState)();
     const [tooltip, setTooltip] = (0, react_1.useState)('');
@@ -67,7 +67,8 @@ const LinearSyntenyRendering = (0, mobx_react_1.observer)(function ({ model, })
     const [mouseCurrDownX, setMouseCurrDownX] = (0, react_1.useState)();
     const [mouseInitialDownX, setMouseInitialDownX] = (0, react_1.useState)();
     const [currY, setCurrY] = (0, react_1.useState)();
-    const { mouseoverId } = model;
+    const { mouseoverId, height } = model;
+    const k2p = (0, react_1.useRef)();
     // these useCallbacks avoid new refs from being created on any mouseover,
     // etc.
     // biome-ignore lint/correctness/useExhaustiveDependencies:
@@ -79,6 +80,13 @@ const LinearSyntenyRendering = (0, mobx_react_1.observer)(function ({ model, })
     // biome-ignore lint/correctness/useExhaustiveDependencies:
     const k2 = (0, react_1.useCallback)((ref) => {
         model.setMainCanvasRef(ref);
+        k2p.current = ref; // this ref is additionally used in useEffect below
+    }, 
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    [model, height, width]);
+    // biome-ignore lint/correctness/useExhaustiveDependencies:
+    (0, react_1.useEffect)(() => {
+        var _a;
         function onWheel(event) {
             event.preventDefault();
             if (event.ctrlKey) {
@@ -90,11 +98,12 @@ const LinearSyntenyRendering = (0, mobx_react_1.observer)(function ({ model, })
                     clearTimeout(timeout.current);
                 }
                 timeout.current = setTimeout(() => {
+                    var _a;
                     for (const v of view.views) {
                         v.setScaleFactor(1);
                         v.zoomTo(delta.current > 0
                             ? v.bpPerPx * (1 + delta.current)
-                            : v.bpPerPx / (1 - delta.current), event.clientX - ((ref === null || ref === void 0 ? void 0 : ref.getBoundingClientRect().left) || 0));
+                            : v.bpPerPx / (1 - delta.current), event.clientX - (((_a = k2p.current) === null || _a === void 0 ? void 0 : _a.getBoundingClientRect().left) || 0));
                     }
                     delta.current = 0;
                 }, 300);
@@ -103,29 +112,27 @@ const LinearSyntenyRendering = (0, mobx_react_1.observer)(function ({ model, })
                 if (Math.abs(event.deltaY) < Math.abs(event.deltaX)) {
                     xOffset.current += event.deltaX / 2;
                 }
-                if (currScrollFrame.current === undefined) {
-                    currScrollFrame.current = requestAnimationFrame(() => {
+                if (!scheduled.current) {
+                    scheduled.current = true;
+                    window.requestAnimationFrame(() => {
                         (0, mobx_1.transaction)(() => {
                             for (const v of view.views) {
                                 v.horizontalScroll(xOffset.current);
                             }
                             xOffset.current = 0;
-                            currScrollFrame.current = undefined;
+                            scheduled.current = false;
                         });
                     });
                 }
             }
         }
-        ref === null || ref === void 0 ? void 0 : ref.addEventListener('wheel', onWheel);
-        // this is a react 19-ism to have a cleanup in the ref callback
-        // https://react.dev/blog/2024/04/25/react-19#cleanup-functions-for-refs
-        // note: it warns in earlier versions of react
+        (_a = k2p.current) === null || _a === void 0 ? void 0 : _a.addEventListener('wheel', onWheel);
         return () => {
-            ref === null || ref === void 0 ? void 0 : ref.removeEventListener('wheel', onWheel);
+            var _a;
+            (_a = k2p.current) === null || _a === void 0 ? void 0 : _a.removeEventListener('wheel', onWheel);
         };
-    }, 
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-    [model, height, width]);
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [model, height, width]);
     // biome-ignore lint/correctness/useExhaustiveDependencies:
     const k3 = (0, react_1.useCallback)((ref) => {
         model.setClickMapCanvasRef(ref);
@@ -139,20 +146,21 @@ const LinearSyntenyRendering = (0, mobx_react_1.observer)(function ({ model, })
     // eslint-disable-next-line react-hooks/exhaustive-deps
     [model, height, width]);
     return (react_1.default.createElement("div", { className: classes.rel },
-        react_1.default.createElement("canvas", { ref: k1, width: width, height: height, className: cx(classes.abs, classes.none) }),
+        react_1.default.createElement("canvas", { ref: k1, width: width, height: height, className: classes.mouseoverCanvas }),
         react_1.default.createElement("canvas", { ref: k2, onMouseMove: event => {
                 var _a;
                 if (mouseCurrDownX !== undefined) {
                     xOffset.current += mouseCurrDownX - event.clientX;
                     setMouseCurrDownX(event.clientX);
-                    if (currScrollFrame.current === undefined) {
-                        currScrollFrame.current = requestAnimationFrame(() => {
+                    if (!scheduled.current) {
+                        scheduled.current = true;
+                        window.requestAnimationFrame(() => {
                             (0, mobx_1.transaction)(() => {
                                 for (const v of view.views) {
                                     v.horizontalScroll(xOffset.current);
                                 }
                                 xOffset.current = 0;
-                                currScrollFrame.current = undefined;
+                                scheduled.current = false;
                             });
                         });
                     }
@@ -204,7 +212,7 @@ const LinearSyntenyRendering = (0, mobx_react_1.observer)(function ({ model, })
                 }
             }, onContextMenu: evt => {
                 (0, util_2.onSynContextClick)(evt, model, setAnchorEl);
-            }, "data-testid": "synteny_canvas", className: classes.abs, width: width, height: height }),
+            }, "data-testid": "synteny_canvas", className: classes.mainCanvas, width: width, height: height }),
         react_1.default.createElement("canvas", { ref: k3, className: classes.pix, width: width, height: height }),
         react_1.default.createElement("canvas", { ref: k4, className: classes.pix, width: width, height: height }),
         mouseoverId && tooltip && currX && currY ? (react_1.default.createElement(SyntenyTooltip, { title: tooltip })) : null,

package/dist/LinearSyntenyDisplay/components/SyntenyContextMenu.js

@@ -7,6 +7,7 @@ exports.default = SyntenyContextMenu;
 const react_1 = __importDefault(require("react"));
 const util_1 = require("@jbrowse/core/util");
 const ui_1 = require("@jbrowse/core/ui");
+const mobx_state_tree_1 = require("mobx-state-tree");
 function SyntenyContextMenu({ model, onClose, anchorEl, }) {
     const view = (0, util_1.getContainingView)(model);
     const { clientX, clientY, feature } = anchorEl;
@@ -35,17 +36,22 @@ function SyntenyContextMenu({ model, onClose, anchorEl, }) {
                 label: 'Center on feature',
                 onClick: () => {
                     const { f } = feature;
+                    const track = (0, mobx_state_tree_1.getParent)(model, 4);
                     const start = f.get('start');
                     const end = f.get('end');
                     const refName = f.get('refName');
                     const mate = f.get('mate');
-                    view.views[0].navToLocString(`${refName}:${start}-${end}`).catch((e) => {
-                        console.error(e);
-                        (0, util_1.getSession)(model).notifyError(`${e}`, e);
+                    const l1 = view.views[track.level];
+                    const l2 = view.views[track.level + 1];
+                    l1.navToLocString(`${refName}:${start}-${end}`).catch((e) => {
+                        const err = `${l1.assemblyNames[0]}:${e}`;
+                        console.error(err);
+                        (0, util_1.getSession)(model).notifyError(err, e);
                     });
-                    view.views[1].navToLocString(`${mate.refName}:${mate.start}-${mate.end}`).catch((e) => {
-                        console.error(e);
-                        (0, util_1.getSession)(model).notifyError(`${e}`, e);
+                    l2.navToLocString(`${mate.refName}:${mate.start}-${mate.end}`).catch((e) => {
+                        const err = `${l2.assemblyNames[0]}:${e}`;
+                        console.error(err);
+                        (0, util_1.getSession)(model).notifyError(err, e);
                     });
                 },
             },

package/dist/LinearSyntenyDisplay/components/util.d.ts

@@ -19,10 +19,11 @@ interface FeatPos {
     f: Feature;
     cigar: string[];
 }
-export declare function drawMatchSimple({ feature, ctx, offsets, cb, height, drawCurves, oobLimit, viewWidth, hideTiny, }: {
+export declare function drawMatchSimple({ feature, ctx, offsets, level, cb, height, drawCurves, oobLimit, viewWidth, hideTiny, }: {
     feature: FeatPos;
     ctx: CanvasRenderingContext2D;
     offsets: number[];
+    level: number;
     oobLimit: number;
     viewWidth: number;
     cb: (ctx: CanvasRenderingContext2D) => void;

package/dist/LinearSyntenyDisplay/components/util.js

@@ -10,12 +10,12 @@ exports.getTooltip = getTooltip;
 const util_1 = require("@jbrowse/core/util");
 // locals
 const drawSynteny_1 = require("../drawSynteny");
-function drawMatchSimple({ feature, ctx, offsets, cb, height, drawCurves, oobLimit, viewWidth, hideTiny, }) {
+function drawMatchSimple({ feature, ctx, offsets, level, cb, height, drawCurves, oobLimit, viewWidth, hideTiny, }) {
     const { p11, p12, p21, p22 } = feature;
-    const x11 = p11.offsetPx - offsets[0];
-    const x12 = p12.offsetPx - offsets[0];
-    const x21 = p21.offsetPx - offsets[1];
-    const x22 = p22.offsetPx - offsets[1];
+    const x11 = p11.offsetPx - offsets[level];
+    const x12 = p12.offsetPx - offsets[level];
+    const x21 = p21.offsetPx - offsets[level + 1];
+    const x22 = p22.offsetPx - offsets[level + 1];
     const l1 = Math.abs(x12 - x11);
     const l2 = Math.abs(x22 - x21);
     const y1 = 0;

package/dist/LinearSyntenyDisplay/drawSynteny.d.ts

@@ -1,5 +1,5 @@
 import { LinearSyntenyDisplayModel } from './model';
 export declare const MAX_COLOR_RANGE: number;
 export declare function getId(r: number, g: number, b: number, unitMultiplier: number): number;
-export declare function drawRef(model: LinearSyntenyDisplayModel, ctx1: CanvasRenderingContext2D, ctx3?: CanvasRenderingContext2D): undefined;
+export declare function drawRef(model: LinearSyntenyDisplayModel, ctx1: CanvasRenderingContext2D, ctx3?: CanvasRenderingContext2D): void;
 export declare function drawMouseoverSynteny(model: LinearSyntenyDisplayModel): void;

package/dist/LinearSyntenyDisplay/drawSynteny.js

@@ -6,6 +6,7 @@ exports.drawRef = drawRef;
 exports.drawMouseoverSynteny = drawMouseoverSynteny;
 const util_1 = require("@jbrowse/core/util");
 const util_2 = require("./components/util");
+const mobx_state_tree_1 = require("mobx-state-tree");
 exports.MAX_COLOR_RANGE = 255 * 255 * 255; // max color range
 function makeColor(idx) {
     const r = Math.floor(idx / (255 * 255)) % 255;
@@ -29,27 +30,28 @@ function getId(r, g, b, unitMultiplier) {
 function drawRef(model, ctx1, ctx3) {
     var _a;
     const view = (0, util_1.getContainingView)(model);
+    // @ts-expect-error
+    const level = (0, mobx_state_tree_1.getParent)(model, 4).level;
     const drawCurves = view.drawCurves;
     const drawCIGAR = view.drawCIGAR;
-    const height = view.middleComparativeHeight;
+    const { height, featPositions } = model;
     const width = view.width;
     const bpPerPxs = view.views.map(v => v.bpPerPx);
     if (ctx3) {
         ctx3.imageSmoothingEnabled = false;
     }
     ctx1.beginPath();
-    const featPos = model.featPositions;
     const offsets = view.views.map(v => v.offsetPx);
-    const unitMultiplier = Math.floor(exports.MAX_COLOR_RANGE / featPos.length);
+    const unitMultiplier = Math.floor(exports.MAX_COLOR_RANGE / featPositions.length);
     // this loop is optimized to draw many thin lines with a single ctx.stroke
     // call, a separate loop below draws larger boxes
     ctx1.fillStyle = colorMap.M;
     ctx1.strokeStyle = colorMap.M;
-    for (const { p11, p12, p21, p22 } of featPos) {
-        const x11 = p11.offsetPx - offsets[0];
-        const x12 = p12.offsetPx - offsets[0];
-        const x21 = p21.offsetPx - offsets[1];
-        const x22 = p22.offsetPx - offsets[1];
+    for (const { p11, p12, p21, p22 } of featPositions) {
+        const x11 = p11.offsetPx - offsets[level];
+        const x12 = p12.offsetPx - offsets[level];
+        const x21 = p21.offsetPx - offsets[level + 1];
+        const x22 = p22.offsetPx - offsets[level + 1];
         const l1 = Math.abs(x12 - x11);
         const l2 = Math.abs(x22 - x21);
         const y1 = 0;
@@ -75,11 +77,11 @@ function drawRef(model, ctx1, ctx3) {
     // ctx.stroke once is much more efficient than calling stroke() many times
     ctx1.fillStyle = colorMap.M;
     ctx1.strokeStyle = colorMap.M;
-    for (const { p11, p12, p21, p22, f, cigar } of featPos) {
-        const x11 = p11.offsetPx - offsets[0];
-        const x12 = p12.offsetPx - offsets[0];
-        const x21 = p21.offsetPx - offsets[1];
-        const x22 = p22.offsetPx - offsets[1];
+    for (const { p11, p12, p21, p22, f, cigar } of featPositions) {
+        const x11 = p11.offsetPx - offsets[level];
+        const x12 = p12.offsetPx - offsets[level];
+        const x21 = p21.offsetPx - offsets[level + 1];
+        const x22 = p22.offsetPx - offsets[level + 1];
         const l1 = Math.abs(x12 - x11);
         const l2 = Math.abs(x22 - x21);
         const minX = Math.min(x21, x22);
@@ -114,8 +116,8 @@ function drawRef(model, ctx1, ctx3) {
                         px1 = cx1;
                         px2 = cx2;
                     }
-                    const d1 = len / bpPerPxs[0];
-                    const d2 = len / bpPerPxs[1];
+                    const d1 = len / bpPerPxs[level];
+                    const d2 = len / bpPerPxs[level + 1];
                     if (op === 'M' || op === '=' || op === 'X') {
                         cx1 += d1 * rev1;
                         cx2 += d2 * rev2;
@@ -141,9 +143,9 @@ function drawRef(model, ctx1, ctx3) {
                             continuingFlag = true;
                         }
                         else {
-                            // allow rendering the dominant color when using continuing flag
-                            // if the last element of continuing was a large feature, else
-                            // just use match
+                            // allow rendering the dominant color when using continuing
+                            // flag if the last element of continuing was a large
+                            // feature, else just use match
                             ctx1.fillStyle =
                                 colorMap[(continuingFlag && d1 > 1) || d2 > 1 ? op : 'M'];
                             continuingFlag = false;
@@ -168,8 +170,8 @@ function drawRef(model, ctx1, ctx3) {
     }
     ctx2.imageSmoothingEnabled = false;
     ctx2.clearRect(0, 0, width, height);
-    for (let i = 0; i < featPos.length; i++) {
-        const feature = featPos[i];
+    for (let i = 0; i < featPositions.length; i++) {
+        const feature = featPositions[i];
         const idx = i * unitMultiplier + 1;
         ctx2.fillStyle = makeColor(idx);
         // too many click map false positives with colored stroked lines
@@ -180,6 +182,7 @@ function drawRef(model, ctx1, ctx3) {
             feature,
             ctx: ctx2,
             drawCurves,
+            level,
             offsets,
             oobLimit,
             viewWidth: view.width,
@@ -187,7 +190,6 @@ function drawRef(model, ctx1, ctx3) {
             height,
         });
     }
-    return undefined;
 }
 function drawMouseoverSynteny(model) {
     var _a;
@@ -195,10 +197,12 @@ function drawMouseoverSynteny(model) {
     const highResolutionScaling = 1;
     const view = (0, util_1.getContainingView)(model);
     const drawCurves = view.drawCurves;
-    const height = view.middleComparativeHeight;
+    const height = model.height;
     const width = view.width;
     const ctx = (_a = model.mouseoverCanvas) === null || _a === void 0 ? void 0 : _a.getContext('2d');
     const offsets = view.views.map(v => v.offsetPx);
+    // @ts-expect-error
+    const level = (0, mobx_state_tree_1.getParent)(model, 4).level;
     if (!ctx) {
         return;
     }
@@ -213,6 +217,7 @@ function drawMouseoverSynteny(model) {
                 ctx.fill();
             },
             feature: feature1,
+            level,
             ctx,
             oobLimit,
             viewWidth: view.width,
@@ -230,6 +235,7 @@ function drawMouseoverSynteny(model) {
             },
             feature: feature2,
             ctx,
+            level,
             oobLimit,
             viewWidth: view.width,
             drawCurves,

package/dist/LinearSyntenyDisplay/index.js

@@ -40,7 +40,7 @@ function LinearSyntenyDisplayF(pluginManager) {
             configSchema,
             stateModel: (0, model_1.default)(configSchema),
             trackType: 'SyntenyTrack',
-            viewType: 'LinearSyntenyView',
+            viewType: 'LinearSyntenyViewHelper',
             ReactComponent: (0, react_1.lazy)(() => Promise.resolve().then(() => __importStar(require('./components/Component')))),
         });
     });

package/dist/LinearSyntenyDisplay/model.d.ts

@@ -24,7 +24,6 @@ declare function stateModelFactory(configSchema: AnyConfigurationSchemaType): im
 } & {
     type: import("mobx-state-tree").ISimpleType<"LinearComparativeDisplay">;
     configuration: AnyConfigurationSchemaType;
-    height: import("mobx-state-tree").IType<number | undefined, number, number>;
 } & {
     /**
      * #property
@@ -69,7 +68,9 @@ declare function stateModelFactory(configSchema: AnyConfigurationSchemaType): im
             rendererTypeName: string;
             error: unknown;
             message: string | undefined;
-        } & import("mobx-state-tree").IStateTreeNode<import("mobx-state-tree").IModelType<{
+        } & import("mobx-state-tree" /**
+         * #action
+         */).IStateTreeNode<import("mobx-state-tree").IModelType<{
             id: import("mobx-state-tree").IOptionalIType<import("mobx-state-tree").ISimpleType<string>, [undefined]>;
             type: import("mobx-state-tree").ISimpleType<string>;
             rpcDriverName: import("mobx-state-tree").IMaybe<import("mobx-state-tree").ISimpleType<string>>;
@@ -77,9 +78,7 @@ declare function stateModelFactory(configSchema: AnyConfigurationSchemaType): im
             rendererTypeName: string;
             error: unknown;
             message: string | undefined;
-        }, import("mobx-state-tree" /**
-         * #action
-         */)._NotCustomized, import("mobx-state-tree")._NotCustomized>>;
+        }, import("mobx-state-tree")._NotCustomized, import("mobx-state-tree")._NotCustomized>>;
     }> | null;
     readonly adapterConfig: any;
     readonly parentTrack: any;
@@ -116,7 +115,6 @@ declare function stateModelFactory(configSchema: AnyConfigurationSchemaType): im
                     } & import("mobx-state-tree/dist/internal").NonEmptyObject & any & import("mobx-state-tree").IStateTreeNode<AnyConfigurationSchemaType>);
                 } & import("mobx-state-tree").IStateTreeNode<AnyConfigurationSchemaType>);
             } & import("mobx-state-tree").IStateTreeNode<AnyConfigurationSchemaType>;
-            height: number;
         } & import("mobx-state-tree/dist/internal").NonEmptyObject & {
             rendererTypeName: string;
             error: unknown;
@@ -152,7 +150,9 @@ declare function stateModelFactory(configSchema: AnyConfigurationSchemaType): im
                     rendererTypeName: string;
                     error: unknown;
                     message: string | undefined;
-                } & import("mobx-state-tree").IStateTreeNode<import("mobx-state-tree").IModelType<{
+                } & import("mobx-state-tree" /**
+                 * #action
+                 */).IStateTreeNode<import("mobx-state-tree").IModelType<{
                     id: import("mobx-state-tree").IOptionalIType<import("mobx-state-tree").ISimpleType<string>, [undefined]>;
                     type: import("mobx-state-tree").ISimpleType<string>;
                     rpcDriverName: import("mobx-state-tree").IMaybe<import("mobx-state-tree").ISimpleType<string>>;
@@ -160,9 +160,7 @@ declare function stateModelFactory(configSchema: AnyConfigurationSchemaType): im
                     rendererTypeName: string;
                     error: unknown;
                     message: string | undefined;
-                }, import("mobx-state-tree" /**
-                 * #action
-                 */)._NotCustomized, import("mobx-state-tree")._NotCustomized>>;
+                }, import("mobx-state-tree")._NotCustomized, import("mobx-state-tree")._NotCustomized>>;
             }> | null;
             readonly adapterConfig: any;
             readonly parentTrack: any;
@@ -188,7 +186,6 @@ declare function stateModelFactory(configSchema: AnyConfigurationSchemaType): im
         } & {
             type: import("mobx-state-tree").ISimpleType<"LinearComparativeDisplay">;
             configuration: AnyConfigurationSchemaType;
-            height: import("mobx-state-tree").IType<number | undefined, number, number>;
         }, {
             rendererTypeName: string;
             error: unknown;
@@ -314,6 +311,10 @@ declare function stateModelFactory(configSchema: AnyConfigurationSchemaType): im
      * #getter
      */
     readonly trackIds: string[];
+    /**
+     * #getter
+     */
+    readonly height: number;
     /**
      * #getter
      */

package/dist/LinearSyntenyDisplay/model.js

@@ -139,6 +139,13 @@ function stateModelFactory(configSchema) {
         get trackIds() {
             return (0, configuration_1.getConf)(self, 'trackIds');
         },
+        /**
+         * #getter
+         */
+        get height() {
+            // @ts-expect-error
+            return (0, mobx_state_tree_1.getParent)(self, 4).height;
+        },
         /**
          * #getter
          */

package/dist/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/dist/LinearSyntenyView/components/ImportForm/{ImportCustomTrack.js → AddCustomTrack.js}

@@ -91,7 +91,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 = (0, mobx_react_1.observer)(function ({ assembly1, assembly2, setSessionTrackData, }) {
+const ImportCustomTrack = (0, mobx_react_1.observer)(function ({ assembly1, assembly2, setUserOpenedSyntenyTrack, }) {
     const [bed2Location, setBed2Location] = (0, react_1.useState)();
     const [bed1Location, setBed1Location] = (0, react_1.useState)();
     const [fileLocation, setFileLocation] = (0, react_1.useState)();
@@ -106,7 +106,7 @@ const ImportCustomTrack = (0, mobx_react_1.observer)(function ({ assembly1, asse
                 const fn = fileName ? (0, util_1.basename)(fileName) : 'MyTrack';
                 const trackId = `${fn}-${Date.now()}`;
                 setError(undefined);
-                setSessionTrackData({
+                setUserOpenedSyntenyTrack({
                     trackId,
                     name: fn,
                     assemblyNames: [assembly2, assembly1],
@@ -136,7 +136,7 @@ const ImportCustomTrack = (0, mobx_react_1.observer)(function ({ assembly1, asse
         fileLocation,
         indexFileLocation,
         radioOption,
-        setSessionTrackData,
+        setUserOpenedSyntenyTrack,
     ]);
     return (react_1.default.createElement(material_1.Paper, { style: { padding: 12 } },
         error ? react_1.default.createElement(ui_1.ErrorMessage, { error: error }) : null,