@jbrowse/plugin-linear-comparative-view 2.8.0 → 2.10.0

package/esm/LinearSyntenyDisplay/components/LinearSyntenyRendering.js

@@ -1,16 +1,41 @@
-import React, { useState, useCallback } from 'react';
+import React, { useState, useCallback, useRef } from 'react';
 import { observer } from 'mobx-react';
 import { assembleLocString, getContainingView, getSession, isSessionModelWithWidgets, } from '@jbrowse/core/util';
+import { transaction } from 'mobx';
+import { makeStyles } from 'tss-react/mui';
 // locals
 import SyntenyTooltip from './SyntenyTooltip';
 import { getId, MAX_COLOR_RANGE } from '../drawSynteny';
+import SyntenyContextMenu from './SyntenyContextMenu';
+const useStyles = makeStyles()({
+    pix: {
+        imageRendering: 'pixelated',
+        pointerEvents: 'none',
+        visibility: 'hidden',
+        position: 'absolute',
+    },
+    rel: {
+        position: 'relative',
+    },
+    abs: {
+        position: 'absolute',
+    },
+    none: {
+        pointEvents: 'none',
+    },
+});
 const LinearSyntenyRendering = observer(function ({ model, }) {
-    const highResolutionScaling = 1;
+    const { classes, cx } = useStyles();
+    const xOffset = useRef(0);
+    const currScrollFrame = useRef();
     const view = getContainingView(model);
     const height = view.middleComparativeHeight;
     const width = view.width;
+    const [anchorEl, setAnchorEl] = useState();
     const [tooltip, setTooltip] = useState('');
     const [currX, setCurrX] = useState();
+    const [mouseCurrDownX, setMouseCurrDownX] = useState();
+    const [mouseInitialDownX, setMouseInitialDownX] = useState();
     const [currY, setCurrY] = useState();
     // these useCallbacks avoid new refs from being created on any mouseover, etc.
     const k1 = useCallback((ref) => model.setMouseoverCanvasRef(ref), 
@@ -25,108 +50,172 @@ const LinearSyntenyRendering = observer(function ({ model, }) {
     const k4 = useCallback((ref) => model.setCigarClickMapCanvasRef(ref), 
     // eslint-disable-next-line react-hooks/exhaustive-deps
     [model, height, width]);
-    return (React.createElement("div", { style: { position: 'relative' } },
-        React.createElement("canvas", { ref: k1, width: width, height: height, style: { width, height, position: 'absolute', pointerEvents: 'none' } }),
-        React.createElement("canvas", { ref: k2, onMouseMove: event => {
-                var _a;
-                const ref1 = model.clickMapCanvas;
-                const ref2 = model.cigarClickMapCanvas;
-                if (!ref1 || !ref2) {
-                    return;
+    return (React.createElement("div", { className: classes.rel },
+        React.createElement("canvas", { ref: k1, width: width, height: height, className: cx(classes.abs, classes.none) }),
+        React.createElement("canvas", { ref: k2, onWheel: event => {
+                if (Math.abs(event.deltaY) < Math.abs(event.deltaX)) {
+                    xOffset.current += event.deltaX;
                 }
-                const rect = ref1.getBoundingClientRect();
-                const ctx1 = ref1.getContext('2d');
-                const ctx2 = ref2.getContext('2d');
-                if (!ctx1 || !ctx2) {
-                    return;
+                if (currScrollFrame.current === undefined) {
+                    currScrollFrame.current = requestAnimationFrame(() => {
+                        transaction(() => {
+                            for (const v of view.views) {
+                                v.horizontalScroll(xOffset.current);
+                            }
+                            xOffset.current = 0;
+                            currScrollFrame.current = undefined;
+                        });
+                    });
                 }
-                const { clientX, clientY } = event;
-                const x = clientX - rect.left;
-                const y = clientY - rect.top;
-                setCurrX(clientX);
-                setCurrY(clientY);
-                const [r1, g1, b1] = ctx1.getImageData(x, y, 1, 1).data;
-                const [r2, g2, b2] = ctx2.getImageData(x, y, 1, 1).data;
-                const unitMultiplier = Math.floor(MAX_COLOR_RANGE / model.numFeats);
-                const id = getId(r1, g1, b1, unitMultiplier);
-                model.setMouseoverId((_a = model.featPositions[id]) === null || _a === void 0 ? void 0 : _a.f.id());
-                if (id === -1) {
-                    setTooltip('');
+            }, onMouseMove: event => {
+                var _a;
+                if (mouseCurrDownX !== undefined) {
+                    xOffset.current += mouseCurrDownX - event.clientX;
+                    setMouseCurrDownX(event.clientX);
+                    if (currScrollFrame.current === undefined) {
+                        currScrollFrame.current = requestAnimationFrame(() => {
+                            transaction(() => {
+                                for (const v of view.views) {
+                                    v.horizontalScroll(xOffset.current);
+                                }
+                                xOffset.current = 0;
+                                currScrollFrame.current = undefined;
+                            });
+                        });
+                    }
                 }
-                else if (model.featPositions[id]) {
-                    const { f, cigar } = model.featPositions[id];
-                    // @ts-expect-error
-                    const f1 = f.toJSON();
-                    const f2 = f1.mate;
-                    const unitMultiplier2 = Math.floor(MAX_COLOR_RANGE / cigar.length);
-                    const cigarIdx = getId(r2, g2, b2, unitMultiplier2);
-                    const l1 = f1.end - f1.start;
-                    const l2 = f2.end - f2.start;
-                    const identity = f1.identity;
-                    const n1 = f1.name;
-                    const n2 = f2.name;
-                    const tooltip = [
-                        `Loc1: ${assembleLocString(f1)}`,
-                        `Loc2: ${assembleLocString(f2)}`,
-                        `Inverted: ${f1.strand === -1}`,
-                        `Query len: ${l1}`,
-                        `Target len: ${l2}`,
-                    ];
-                    if (identity) {
-                        tooltip.push(`Identity: ${identity}`);
+                else {
+                    const ref1 = model.clickMapCanvas;
+                    const ref2 = model.cigarClickMapCanvas;
+                    if (!ref1 || !ref2) {
+                        return;
                     }
-                    if (cigar[cigarIdx]) {
-                        tooltip.push(`CIGAR operator: ${cigar[cigarIdx]}${cigar[cigarIdx + 1]}`);
+                    const rect = ref1.getBoundingClientRect();
+                    const ctx1 = ref1.getContext('2d');
+                    const ctx2 = ref2.getContext('2d');
+                    if (!ctx1 || !ctx2) {
+                        return;
                     }
-                    if (n1 && n2) {
-                        tooltip.push(`Name 1: ${n1}`, `Name 2: ${n2}`);
+                    const { clientX, clientY } = event;
+                    const x = clientX - rect.left;
+                    const y = clientY - rect.top;
+                    setCurrX(clientX);
+                    setCurrY(clientY);
+                    const [r1, g1, b1] = ctx1.getImageData(x, y, 1, 1).data;
+                    const [r2, g2, b2] = ctx2.getImageData(x, y, 1, 1).data;
+                    const unitMultiplier = Math.floor(MAX_COLOR_RANGE / model.numFeats);
+                    const id = getId(r1, g1, b1, unitMultiplier);
+                    model.setMouseoverId((_a = model.featPositions[id]) === null || _a === void 0 ? void 0 : _a.f.id());
+                    if (id === -1) {
+                        setTooltip('');
+                    }
+                    else if (model.featPositions[id]) {
+                        const { f, cigar } = model.featPositions[id];
+                        const unitMultiplier2 = Math.floor(MAX_COLOR_RANGE / cigar.length);
+                        const cigarIdx = getId(r2, g2, b2, unitMultiplier2);
+                        setTooltip(getTooltip(f, cigar[cigarIdx], cigar[cigarIdx + 1]));
                     }
-                    setTooltip(tooltip.join('<br/>'));
-                }
-            }, onMouseLeave: () => model.setMouseoverId(undefined), onClick: event => {
-                const ref1 = model.clickMapCanvas;
-                const ref2 = model.cigarClickMapCanvas;
-                if (!ref1 || !ref2) {
-                    return;
-                }
-                const rect = ref1.getBoundingClientRect();
-                const ctx1 = ref1.getContext('2d');
-                const ctx2 = ref2.getContext('2d');
-                if (!ctx1 || !ctx2) {
-                    return;
-                }
-                const x = event.clientX - rect.left;
-                const y = event.clientY - rect.top;
-                const [r1, g1, b1] = ctx1.getImageData(x, y, 1, 1).data;
-                const unitMultiplier = Math.floor(MAX_COLOR_RANGE / model.numFeats);
-                const id = getId(r1, g1, b1, unitMultiplier);
-                const f = model.featPositions[id];
-                if (!f) {
-                    return;
                 }
-                model.setClickId(f.f.id());
-                const session = getSession(model);
-                if (isSessionModelWithWidgets(session)) {
-                    session.showWidget(session.addWidget('SyntenyFeatureWidget', 'syntenyFeature', {
-                        featureData: {
-                            feature1: f.f.toJSON(),
-                            feature2: f.f.get('mate'),
-                        },
-                    }));
+            }, onMouseLeave: () => {
+                model.setMouseoverId(undefined);
+                setMouseInitialDownX(undefined);
+                setMouseCurrDownX(undefined);
+            }, onMouseDown: evt => {
+                setMouseCurrDownX(evt.clientX);
+                setMouseInitialDownX(evt.clientX);
+            }, onMouseUp: evt => {
+                setMouseCurrDownX(undefined);
+                if (mouseInitialDownX !== undefined &&
+                    Math.abs(evt.clientX - mouseInitialDownX) < 5) {
+                    onSyntenyClick(evt, model);
                 }
-            }, "data-testid": "synteny_canvas", style: { width, height, position: 'absolute' }, width: width * highResolutionScaling, height: height * highResolutionScaling }),
-        React.createElement("canvas", { ref: k3, style: {
-                imageRendering: 'pixelated',
-                pointerEvents: 'none',
-                visibility: 'hidden',
-                position: 'absolute',
-            }, width: width, height: height }),
-        React.createElement("canvas", { ref: k4, style: {
-                imageRendering: 'pixelated',
-                pointerEvents: 'none',
-                visibility: 'hidden',
-                position: 'absolute',
-            }, width: width, height: height }),
-        model.mouseoverId && tooltip && currX && currY ? (React.createElement(SyntenyTooltip, { x: currX, y: currY, title: tooltip })) : null));
+            }, onContextMenu: evt => {
+                onSyntenyContextClick(evt, model, setAnchorEl);
+            }, "data-testid": "synteny_canvas", className: classes.abs, width: width, height: height }),
+        React.createElement("canvas", { ref: k3, className: classes.pix, width: width, height: height }),
+        React.createElement("canvas", { ref: k4, className: classes.pix, width: width, height: height }),
+        model.mouseoverId && tooltip && currX && currY ? (React.createElement(SyntenyTooltip, { title: tooltip })) : null,
+        anchorEl ? (React.createElement(SyntenyContextMenu, { model: model, anchorEl: anchorEl, onClose: () => setAnchorEl(undefined) })) : null));
 });
+function onSyntenyClick(event, model) {
+    const ref1 = model.clickMapCanvas;
+    const ref2 = model.cigarClickMapCanvas;
+    if (!ref1 || !ref2) {
+        return;
+    }
+    const rect = ref1.getBoundingClientRect();
+    const ctx1 = ref1.getContext('2d');
+    const ctx2 = ref2.getContext('2d');
+    if (!ctx1 || !ctx2) {
+        return;
+    }
+    const x = event.clientX - rect.left;
+    const y = event.clientY - rect.top;
+    const [r1, g1, b1] = ctx1.getImageData(x, y, 1, 1).data;
+    const unitMultiplier = Math.floor(MAX_COLOR_RANGE / model.numFeats);
+    const id = getId(r1, g1, b1, unitMultiplier);
+    const feat = model.featPositions[id];
+    if (feat) {
+        const { f } = feat;
+        model.setClickId(f.id());
+        const session = getSession(model);
+        if (isSessionModelWithWidgets(session)) {
+            session.showWidget(session.addWidget('SyntenyFeatureWidget', 'syntenyFeature', {
+                featureData: {
+                    feature1: f.toJSON(),
+                    feature2: f.get('mate'),
+                },
+            }));
+        }
+    }
+    return feat;
+}
+function onSyntenyContextClick(event, model, setAnchorEl) {
+    event.preventDefault();
+    const ref1 = model.clickMapCanvas;
+    const ref2 = model.cigarClickMapCanvas;
+    if (!ref1 || !ref2) {
+        return;
+    }
+    const rect = ref1.getBoundingClientRect();
+    const ctx1 = ref1.getContext('2d');
+    const ctx2 = ref2.getContext('2d');
+    if (!ctx1 || !ctx2) {
+        return;
+    }
+    const { clientX, clientY } = event;
+    const x = clientX - rect.left;
+    const y = clientY - rect.top;
+    const [r1, g1, b1] = ctx1.getImageData(x, y, 1, 1).data;
+    const unitMultiplier = Math.floor(MAX_COLOR_RANGE / model.numFeats);
+    const id = getId(r1, g1, b1, unitMultiplier);
+    const f = model.featPositions[id];
+    if (f) {
+        model.setClickId(f.f.id());
+        setAnchorEl({ clientX, clientY, feature: f });
+    }
+}
+function getTooltip(f, cigarOp, cigarOpLen) {
+    // @ts-expect-error
+    const f1 = f.toJSON();
+    const f2 = f1.mate;
+    const l1 = f1.end - f1.start;
+    const l2 = f2.end - f2.start;
+    const identity = f1.identity;
+    const n1 = f1.name;
+    const n2 = f2.name;
+    return [
+        `Loc1: ${assembleLocString(f1)}`,
+        `Loc2: ${assembleLocString(f2)}`,
+        `Inverted: ${f1.strand === -1}`,
+        `Query len: ${l1.toLocaleString('en-US')}`,
+        `Target len: ${l2.toLocaleString('en-US')}`,
+        identity ? `Identity: ${identity.toPrecision(2)}` : '',
+        cigarOp ? `CIGAR operator: ${cigarOp}${cigarOpLen}` : '',
+        n1 ? `Name 1: ${n1}` : '',
+        n2 ? `Name 1: ${n2}` : '',
+    ]
+        .filter(f => !!f)
+        .join('<br/>');
+}
 export default LinearSyntenyRendering;

package/esm/LinearSyntenyDisplay/components/SyntenyContextMenu.d.ts

@@ -0,0 +1,13 @@
+import React from 'react';
+import { LinearSyntenyDisplayModel } from '../model';
+interface ClickCoord {
+    clientX: number;
+    clientY: number;
+    feature: any;
+}
+export default function SyntenyContextMenu({ model, onClose, anchorEl, }: {
+    onClose: () => void;
+    model: LinearSyntenyDisplayModel;
+    anchorEl: ClickCoord;
+}): React.JSX.Element;
+export {};

package/esm/LinearSyntenyDisplay/components/SyntenyContextMenu.js

@@ -0,0 +1,51 @@
+import React from 'react';
+import { getContainingView, getSession } from '@jbrowse/core/util';
+import { Menu } from '@jbrowse/core/ui';
+export default function SyntenyContextMenu({ model, onClose, anchorEl, }) {
+    const view = getContainingView(model);
+    const { clientX, clientY, feature } = anchorEl;
+    return (React.createElement(Menu, { onMenuItemClick: (event, callback) => {
+            callback(event);
+            onClose();
+        }, anchorEl: {
+            nodeType: 1,
+            getBoundingClientRect: () => {
+                const x = clientX;
+                const y = clientY;
+                return {
+                    top: y,
+                    left: x,
+                    bottom: y,
+                    right: x,
+                    width: 0,
+                    height: 0,
+                    x,
+                    y,
+                    toJSON() { },
+                };
+            },
+        }, onClose: onClose, open: Boolean(anchorEl), menuItems: [
+            {
+                label: 'Center on feature',
+                onClick: () => {
+                    const { f } = feature;
+                    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);
+                        getSession(model).notify(`${e}`, 'error');
+                    });
+                    view.views[1]
+                        .navToLocString(`${mate.refName}:${mate.start}-${mate.end}`)
+                        .catch(e => {
+                        console.error(e);
+                        getSession(model).notify(`${e}`, 'error');
+                    });
+                },
+            },
+        ] }));
+}

package/esm/LinearSyntenyDisplay/components/SyntenyTooltip.d.ts

@@ -1,7 +1,5 @@
 import React from 'react';
-declare const SyntenyTooltip: ({ x, y, title, }: {
-    x: number;
-    y: number;
+declare const SyntenyTooltip: ({ title }: {
     title: string;
 }) => React.JSX.Element | null;
 export default SyntenyTooltip;

package/esm/LinearSyntenyDisplay/components/SyntenyTooltip.js

@@ -1,8 +1,8 @@
-import React, { useMemo, useState } from 'react';
+import React from 'react';
 import { observer } from 'mobx-react';
-import { Portal, alpha } from '@mui/material';
+import { Portal, useTheme, alpha } from '@mui/material';
 import { makeStyles } from 'tss-react/mui';
-import { usePopper } from 'react-popper';
+import { useClientPoint, useFloating, useInteractions, } from '@floating-ui/react';
 import { SanitizedHTML } from '@jbrowse/core/ui';
 function round(value) {
     return Math.round(value * 1e5) / 1e5;
@@ -24,34 +24,22 @@ const useStyles = makeStyles()(theme => ({
         wordWrap: 'break-word',
     },
 }));
-const SyntenyTooltip = observer(function ({ x, y, title, }) {
-    const [width, setWidth] = useState(0);
-    const [anchorEl, setAnchorEl] = useState(null);
+const SyntenyTooltip = observer(function ({ title }) {
+    var _a, _b;
+    const theme = useTheme();
     const { classes } = useStyles();
-    // must be memoized a la https://github.com/popperjs/react-popper/issues/391
-    const virtElement = useMemo(() => ({
-        getBoundingClientRect: () => {
-            return {
-                top: y,
-                left: x + width / 2,
-                bottom: y,
-                right: x,
-                width: 0,
-                height: 0,
-                x,
-                y,
-                toJSON() { },
-            };
-        },
-    }), [x, y, width]);
-    const { styles, attributes } = usePopper(virtElement, anchorEl);
-    return title ? (React.createElement(Portal, null,
-        React.createElement("div", { ref: ref => {
-                setWidth((ref === null || ref === void 0 ? void 0 : ref.getBoundingClientRect().width) || 0);
-                setAnchorEl(ref);
-            }, className: classes.tooltip, 
-            // zIndex needed to go over widget drawer
-            style: { ...styles.popper, zIndex: 100000 }, ...attributes.popper },
+    const { refs, floatingStyles, context } = useFloating({
+        placement: 'right',
+    });
+    const clientPoint = useClientPoint(context);
+    const { getFloatingProps } = useInteractions([clientPoint]);
+    const popperTheme = (_a = theme === null || theme === void 0 ? void 0 : theme.components) === null || _a === void 0 ? void 0 : _a.MuiPopper;
+    return title ? (React.createElement(Portal, { container: (_b = popperTheme === null || popperTheme === void 0 ? void 0 : popperTheme.defaultProps) === null || _b === void 0 ? void 0 : _b.container },
+        React.createElement("div", { className: classes.tooltip, ref: refs.setFloating, style: {
+                ...floatingStyles,
+                zIndex: 100000,
+                pointerEvents: 'none',
+            }, ...getFloatingProps() },
             React.createElement(SanitizedHTML, { html: title })))) : null;
 });
 export default SyntenyTooltip;

package/esm/LinearSyntenyDisplay/model.d.ts

@@ -5,7 +5,7 @@ import { Feature } from '@jbrowse/core/util';
 interface Pos {
     offsetPx: number;
 }
-interface FeatPos {
+export interface FeatPos {
     p11: Pos;
     p12: Pos;
     p21: Pos;
@@ -15,7 +15,8 @@ interface FeatPos {
 }
 /**
  * #stateModel LinearSyntenyDisplay
- * extends `LinearComparativeDisplay` model
+ * extends
+ * - [LinearComparativeDisplay](../linearcomparativedisplay)
  */
 declare function stateModelFactory(configSchema: AnyConfigurationSchemaType): import("mobx-state-tree").IModelType<{
     id: import("mobx-state-tree").IOptionalIType<import("mobx-state-tree").ISimpleType<string>, [undefined]>;
@@ -77,17 +78,20 @@ declare function stateModelFactory(configSchema: AnyConfigurationSchemaType): im
             rendererTypeName: string;
             error: unknown;
             message: string | undefined;
-        }, import("mobx-state-tree")._NotCustomized, import("mobx-state-tree")._NotCustomized>>; /**
-         * #action
-         */
+        }, import("mobx-state-tree")._NotCustomized, import("mobx-state-tree")._NotCustomized>>;
     }> | null;
     readonly adapterConfig: any;
     readonly parentTrack: any;
-    renderProps(): any;
+    renderProps(): any; /**
+     * #getter
+     */
     readonly rendererType: import("@jbrowse/core/pluggableElementTypes").RendererType;
     readonly DisplayMessageComponent: import("react").FC<any> | undefined;
     trackMenuItems(): import("@jbrowse/core/ui").MenuItem[];
-    readonly viewMenuActions: import("@jbrowse/core/ui").MenuItem[];
+    readonly viewMenuActions: import("@jbrowse/core/ui").MenuItem[]; /**
+     * #getter
+     * used for synteny svg rendering
+     */
     regionCannotBeRendered(): null;
 } & {
     setMessage(arg?: string | undefined): void;
@@ -154,17 +158,20 @@ declare function stateModelFactory(configSchema: AnyConfigurationSchemaType): im
                     rendererTypeName: string;
                     error: unknown;
                     message: string | undefined;
-                }, import("mobx-state-tree")._NotCustomized, import("mobx-state-tree")._NotCustomized>>; /**
-                 * #action
-                 */
+                }, import("mobx-state-tree")._NotCustomized, import("mobx-state-tree")._NotCustomized>>;
             }> | null;
             readonly adapterConfig: any;
             readonly parentTrack: any;
-            renderProps(): any;
+            renderProps(): any; /**
+             * #getter
+             */
             readonly rendererType: import("@jbrowse/core/pluggableElementTypes").RendererType;
             readonly DisplayMessageComponent: import("react").FC<any> | undefined;
             trackMenuItems(): import("@jbrowse/core/ui").MenuItem[];
-            readonly viewMenuActions: import("@jbrowse/core/ui").MenuItem[];
+            readonly viewMenuActions: import("@jbrowse/core/ui").MenuItem[]; /**
+             * #getter
+             * used for synteny svg rendering
+             */
             regionCannotBeRendered(): null;
         } & {
             setMessage(arg?: string | undefined): void;
@@ -226,17 +233,20 @@ declare function stateModelFactory(configSchema: AnyConfigurationSchemaType): im
                     rendererTypeName: string;
                     error: unknown;
                     message: string | undefined;
-                }, import("mobx-state-tree")._NotCustomized, import("mobx-state-tree")._NotCustomized>>; /**
-                 * #action
-                 */
+                }, import("mobx-state-tree")._NotCustomized, import("mobx-state-tree")._NotCustomized>>;
             }> | null;
             readonly adapterConfig: any;
             readonly parentTrack: any;
-            renderProps(): any;
+            renderProps(): any; /**
+             * #getter
+             */
             readonly rendererType: import("@jbrowse/core/pluggableElementTypes").RendererType;
             readonly DisplayMessageComponent: import("react").FC<any> | undefined;
             trackMenuItems(): import("@jbrowse/core/ui").MenuItem[];
-            readonly viewMenuActions: import("@jbrowse/core/ui").MenuItem[];
+            readonly viewMenuActions: import("@jbrowse/core/ui").MenuItem[]; /**
+             * #getter
+             * used for synteny svg rendering
+             */
             regionCannotBeRendered(): null;
         } & {
             setMessage(arg?: string | undefined): void;

package/esm/LinearSyntenyDisplay/model.js

@@ -4,7 +4,8 @@ import { getConf, ConfigurationReference, } from '@jbrowse/core/configuration';
 import baseModelFactory from '../LinearComparativeDisplay/stateModelFactory';
 /**
  * #stateModel LinearSyntenyDisplay
- * extends `LinearComparativeDisplay` model
+ * extends
+ * - [LinearComparativeDisplay](../linearcomparativedisplay)
  */
 function stateModelFactory(configSchema) {
     return types

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

@@ -17,7 +17,7 @@ const useStyles = makeStyles()(theme => ({
     },
 }));
 function TrackSelector({ setSessionTrackData, setShowTrackId, sessionTrackData, assembly1, assembly2, model, }) {
-    const [choice, setChoice] = useState('none');
+    const [choice, setChoice] = useState('tracklist');
     useEffect(() => {
         if (choice === 'none') {
             setSessionTrackData(undefined);