@jbrowse/plugin-alignments 2.17.0 → 3.0.0

package/esm/LinearPileupDisplay/model.d.ts

@@ -1,12 +1,6 @@
-import { Instance } from 'mobx-state-tree';
-import { AnyConfigurationSchemaType } from '@jbrowse/core/configuration';
-import { ModificationType, ModificationTypeWithColor, SortedBy } from '../shared/types';
-/**
- * #stateModel LinearPileupDisplay
- * #category display
- * extends
- * - [SharedLinearPileupDisplayMixin](../sharedlinearpileupdisplaymixin)
- */
+import type { ModificationType, ModificationTypeWithColor, SortedBy } from '../shared/types';
+import type { AnyConfigurationSchemaType } from '@jbrowse/core/configuration';
+import type { Instance } from 'mobx-state-tree';
 declare function stateModelFactory(configSchema: AnyConfigurationSchemaType): 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>;
@@ -19,21 +13,12 @@ declare function stateModelFactory(configSchema: AnyConfigurationSchemaType): im
 } & {
     blockState: import("mobx-state-tree").IMapType<import("mobx-state-tree").IModelType<{
         key: import("mobx-state-tree").ISimpleType<string>;
-        region: import("mobx-state-tree").IModelType<{
-            refName: import("mobx-state-tree").ISimpleType<string>;
-            start: import("mobx-state-tree").ISimpleType<number>;
-            end: import("mobx-state-tree").ISimpleType<number>;
-            reversed: import("mobx-state-tree").IOptionalIType<import("mobx-state-tree").ISimpleType<boolean>, [undefined]>;
-        } & {
-            assemblyName: import("mobx-state-tree").ISimpleType<string>;
-        }, {
-            setRefName(newRefName: string): void;
-        }, import("mobx-state-tree")._NotCustomized, import("mobx-state-tree")._NotCustomized>;
+        region: import("mobx-state-tree").IType<import("@jbrowse/core/util").Region, import("@jbrowse/core/util").Region, import("@jbrowse/core/util").Region>;
         reloadFlag: import("mobx-state-tree").IType<number | undefined, number, number>;
         isLeftEndOfDisplayedRegion: import("mobx-state-tree").IType<boolean | undefined, boolean, boolean>;
         isRightEndOfDisplayedRegion: import("mobx-state-tree").IType<boolean | undefined, boolean, boolean>;
     }, {
-        renderInProgress: AbortController | undefined;
+        stopToken: string | undefined;
         filled: boolean;
         reactElement: React.ReactElement | undefined;
         features: Map<string, import("@jbrowse/core/util").Feature> | undefined;
@@ -51,21 +36,15 @@ declare function stateModelFactory(configSchema: AnyConfigurationSchemaType): im
                 status?: string;
                 reactElement?: React.ReactElement;
             };
-        }) => import("react").JSX.Element | undefined;
+        }) => import("react/jsx-runtime").JSX.Element | undefined;
         renderProps: any;
     } & {
         doReload(): void;
         afterAttach(): void;
         setStatus(message: string): void;
-        setLoading(abortController: AbortController): void;
+        setLoading(newStopToken: string): void;
         setMessage(messageText: string): void;
-        setRendered(props: {
-            reactElement: React.ReactElement;
-            features: Map<string, import("@jbrowse/core/util").Feature>;
-            layout: any;
-            maxHeightReached: boolean;
-            renderProps: any;
-        } | undefined): void;
+        setRendered(props: import("@jbrowse/plugin-linear-genome-view/src/BaseLinearDisplay/models/serverSideRenderedBlock").RenderedProps | undefined): void;
         setError(error: unknown): void;
         reload(): void;
         beforeDestroy(): void;
@@ -104,9 +83,10 @@ declare function stateModelFactory(configSchema: AnyConfigurationSchemaType): im
     noSpacing: import("mobx-state-tree").IMaybe<import("mobx-state-tree").ISimpleType<boolean>>;
     fadeLikelihood: import("mobx-state-tree").IMaybe<import("mobx-state-tree").ISimpleType<boolean>>;
     trackMaxHeight: import("mobx-state-tree").IMaybe<import("mobx-state-tree").ISimpleType<number>>;
-    colorBy: import("mobx-state-tree").IType<import("../shared/types").ColorBy | undefined, import("../shared/types").ColorBy | undefined, import("../shared/types").ColorBy | undefined>;
-    filterBy: import("mobx-state-tree").IOptionalIType<import("mobx-state-tree").IType<import("../shared/types").FilterBy, import("../shared/types").FilterBy, import("../shared/types").FilterBy>, [undefined]>;
+    colorBySetting: import("mobx-state-tree").IType<import("../shared/types").ColorBy | undefined, import("../shared/types").ColorBy | undefined, import("../shared/types").ColorBy | undefined>;
+    filterBySetting: import("mobx-state-tree").IType<import("../shared/types").FilterBy | undefined, import("../shared/types").FilterBy | undefined, import("../shared/types").FilterBy | undefined>;
     jexlFilters: import("mobx-state-tree").IOptionalIType<import("mobx-state-tree").IArrayType<import("mobx-state-tree").ISimpleType<string>>, [undefined]>;
+    hideSmallIndelsSetting: import("mobx-state-tree").IMaybe<import("mobx-state-tree").ISimpleType<boolean>>;
 } & {
     type: import("mobx-state-tree").ISimpleType<"LinearPileupDisplay">;
     configuration: AnyConfigurationSchemaType;
@@ -136,9 +116,7 @@ declare function stateModelFactory(configSchema: AnyConfigurationSchemaType): im
             error: unknown;
             message: string | undefined;
         }, import("mobx-state-tree")._NotCustomized, import("mobx-state-tree")._NotCustomized>>;
-        onHorizontalScroll? /**
-         * #property
-         */: () => void;
+        onHorizontalScroll?: () => void;
         blockState?: Record<string, any>;
     }>;
     readonly DisplayBlurb: React.FC<{
@@ -204,14 +182,15 @@ declare function stateModelFactory(configSchema: AnyConfigurationSchemaType): im
     readonly regionTooLarge: boolean;
     readonly regionTooLargeReason: string;
 } & {
+    readonly statsReadyAndRegionNotTooLarge: boolean;
     regionCannotBeRenderedText(_region: import("@jbrowse/core/util").Region): "" | "Force load to see features";
-    regionCannotBeRendered(_region: import("@jbrowse/core/util").Region): import("react").JSX.Element | null;
+    regionCannotBeRendered(_region: import("@jbrowse/core/util").Region): import("react/jsx-runtime").JSX.Element | null;
 } & {
     featureIdUnderMouse: undefined | string;
     contextMenuFeature: undefined | import("@jbrowse/core/util").Feature;
 } & {
-    readonly DisplayMessageComponent: import("react").FC<any> | undefined;
-    readonly blockType: "dynamicBlocks" | "staticBlocks";
+    readonly DisplayMessageComponent: undefined | React.FC<any>;
+    readonly blockType: "staticBlocks" | "dynamicBlocks";
     readonly blockDefinitions: import("@jbrowse/core/util/blockTypes").BlockSet;
 } & {
     readonly renderDelay: number;
@@ -238,14 +217,18 @@ declare function stateModelFactory(configSchema: AnyConfigurationSchemaType): im
     contextMenuItems(): import("@jbrowse/core/ui").MenuItem[];
     renderProps(): any;
 } & {
-    renderSvg(opts: import("@jbrowse/plugin-linear-genome-view").ExportSvgDisplayOptions): Promise<import("react").JSX.Element>;
+    renderSvg(opts: import("@jbrowse/plugin-linear-genome-view").ExportSvgDisplayOptions): Promise<import("react/jsx-runtime").JSX.Element>;
     afterAttach(): void;
 } & {
     colorTagMap: import("mobx").ObservableMap<string, string>;
     featureUnderMouseVolatile: undefined | import("@jbrowse/core/util").Feature;
     tagsReady: boolean;
+} & {
+    readonly colorBy: any;
+    readonly filterBy: any;
 } & {
     readonly autorunReady: boolean;
+    readonly hideSmallIndels: boolean | undefined;
 } & {
     setTagsReady(flag: boolean): void;
     setMaxHeight(n?: number): void;
@@ -259,6 +242,7 @@ declare function stateModelFactory(configSchema: AnyConfigurationSchemaType): im
     setConfig(conf: import("@jbrowse/core/configuration").AnyConfigurationModel): void;
     setFilterBy(filter: import("../shared/types").FilterBy): void;
     setJexlFilters(filters: string[]): void;
+    setHideSmallIndels(arg: boolean): void;
 } & {
     readonly rendererConfig: {
         [x: string]: any;
@@ -292,99 +276,54 @@ declare function stateModelFactory(configSchema: AnyConfigurationSchemaType): im
     })[];
     readonly DisplayBlurb: ({ model, }: {
         model: {
-            sortedBy?: {
-                pos: number;
-                refName: number;
-                type: string;
-                tag?: string;
-            };
+            sortedBy?: SortedBy;
         };
-    }) => import("react").JSX.Element | null;
+    }) => import("react/jsx-runtime").JSX.Element | null;
     renderPropsPre(): any;
     colorSchemeSubMenuItems(): {
         label: string;
         onClick: () => void;
     }[];
     trackMenuItems(): (import("@jbrowse/core/ui").MenuDivider | import("@jbrowse/core/ui").MenuSubHeader | import("@jbrowse/core/ui").NormalMenuItem | import("@jbrowse/core/ui").CheckboxMenuItem | import("@jbrowse/core/ui").RadioMenuItem | import("@jbrowse/core/ui").SubMenuItem | {
+        label: string;
+        priority: number;
+        type: string;
+        checked: boolean | undefined;
+        onClick: () => void;
+        icon?: undefined;
+    } | {
         label: string;
         icon: import("@mui/material/OverridableComponent").OverridableComponent<import("@mui/material").SvgIconTypeMap<{}, "svg">> & {
             muiName: string;
         };
         onClick: () => void;
+        priority?: undefined;
+        type?: undefined;
+        checked?: undefined;
     })[];
 } & {
     renderProps(): any;
 } & {
     afterAttach(): void;
 } & {
-    /**
-     * #volatile
-     */
     sortReady: boolean;
-    /**
-     * #volatile
-     */
     currSortBpPerPx: number;
-    /**
-     * #volatile
-     */
     visibleModifications: import("mobx").ObservableMap<string, ModificationTypeWithColor>;
-    /**
-     * #volatile
-     */
     modificationsReady: boolean;
 } & {
-    /**
-     * #action
-     */
     setCurrSortBpPerPx(n: number): void;
-    /**
-     * #action
-     */
     updateVisibleModifications(uniqueModifications: ModificationType[]): void;
-    /**
-     * #action
-     */
     setModificationsReady(flag: boolean): void;
-    /**
-     * #action
-     */
     setSortReady(flag: boolean): void;
-    /**
-     * #action
-     */
     clearSelected(): void;
-    /**
-     * #action
-     */
     toggleSoftClipping(): void;
-    /**
-     * #action
-     */
     toggleMismatchAlpha(): void;
-    /**
-     * #action
-     */
     setSortedBy(type: string, tag?: string): void;
-    /**
-     * #action
-     * overrides base from SharedLinearPileupDisplay to make sortReady false
-     * since changing feature height destroys the sort-induced layout
-     */
     setFeatureHeight(n?: number): void;
 } & {
-    /**
-     * #action
-     */
     reload(): void;
 } & {
-    /**
-     * #getter
-     */
     readonly visibleModificationTypes: string[];
-    /**
-     * #getter
-     */
     readonly rendererConfig: {
         [x: string]: any;
     } & import("mobx-state-tree/dist/internal").NonEmptyObject & {
@@ -397,26 +336,11 @@ declare function stateModelFactory(configSchema: AnyConfigurationSchemaType): im
         } & import("mobx-state-tree").IStateTreeNode<AnyConfigurationSchemaType>);
     } & import("mobx-state-tree").IStateTreeNode<AnyConfigurationSchemaType>;
 } & {
-    /**
-     * #getter
-     */
     readonly mismatchAlphaSetting: any;
-    /**
-     * #method
-     */
     renderReady(): boolean;
 } & {
-    /**
-     * #method
-     */
     renderPropsPre(): any;
-    /**
-     * #method
-     */
     renderProps(): any;
-    /**
-     * #method
-     */
     trackMenuItems(): readonly [...import("@jbrowse/core/ui").MenuItem[], {
         readonly label: "Sort by...";
         readonly icon: import("@mui/material/OverridableComponent").OverridableComponent<import("@mui/material").SvgIconTypeMap<{}, "svg">> & {
@@ -482,7 +406,95 @@ declare function stateModelFactory(configSchema: AnyConfigurationSchemaType): im
     }];
 } & {
     afterAttach(): void;
-}, import("mobx-state-tree")._NotCustomized, import("mobx-state-tree")._NotCustomized>;
+}, {
+    type: string;
+} & Partial<import("mobx-state-tree/dist/internal").ExtractCFromProps<{
+    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>>;
+} & {
+    heightPreConfig: import("mobx-state-tree").IMaybe<import("mobx-state-tree").ISimpleType<number>>;
+} & {
+    userBpPerPxLimit: import("mobx-state-tree").IMaybe<import("mobx-state-tree").ISimpleType<number>>;
+    userByteSizeLimit: import("mobx-state-tree").IMaybe<import("mobx-state-tree").ISimpleType<number>>;
+} & {
+    blockState: import("mobx-state-tree").IMapType<import("mobx-state-tree").IModelType<{
+        key: import("mobx-state-tree").ISimpleType<string>;
+        region: import("mobx-state-tree").IType<import("@jbrowse/core/util").Region, import("@jbrowse/core/util").Region, import("@jbrowse/core/util").Region>;
+        reloadFlag: import("mobx-state-tree").IType<number | undefined, number, number>;
+        isLeftEndOfDisplayedRegion: import("mobx-state-tree").IType<boolean | undefined, boolean, boolean>;
+        isRightEndOfDisplayedRegion: import("mobx-state-tree").IType<boolean | undefined, boolean, boolean>;
+    }, {
+        stopToken: string | undefined;
+        filled: boolean;
+        reactElement: React.ReactElement | undefined;
+        features: Map<string, import("@jbrowse/core/util").Feature> | undefined;
+        layout: any;
+        status: string;
+        error: unknown;
+        message: string | undefined;
+        maxHeightReached: boolean;
+        ReactComponent: ({ model, }: {
+            model: {
+                error?: unknown;
+                reload: () => void;
+                message: React.ReactNode;
+                filled?: boolean;
+                status?: string;
+                reactElement?: React.ReactElement;
+            };
+        }) => import("react/jsx-runtime").JSX.Element | undefined;
+        renderProps: any;
+    } & {
+        doReload(): void;
+        afterAttach(): void;
+        setStatus(message: string): void;
+        setLoading(newStopToken: string): void;
+        setMessage(messageText: string): void;
+        setRendered(props: import("@jbrowse/plugin-linear-genome-view/src/BaseLinearDisplay/models/serverSideRenderedBlock").RenderedProps | undefined): void;
+        setError(error: unknown): void;
+        reload(): void;
+        beforeDestroy(): void;
+    }, import("mobx-state-tree")._NotCustomized, import("mobx-state-tree")._NotCustomized>>;
+    configuration: import("@jbrowse/core/configuration/configurationSchema").ConfigurationSchemaType<{
+        maxFeatureScreenDensity: {
+            type: string;
+            description: string;
+            defaultValue: number;
+        };
+        fetchSizeLimit: {
+            type: string;
+            defaultValue: number;
+            description: string;
+        };
+        height: {
+            type: string;
+            defaultValue: number;
+            description: string;
+        };
+        mouseover: {
+            type: string;
+            description: string;
+            defaultValue: string;
+            contextVariable: string[];
+        };
+        jexlFilters: {
+            type: string;
+            description: string;
+            defaultValue: never[];
+        };
+    }, import("@jbrowse/core/configuration/configurationSchema").ConfigurationSchemaOptions<undefined, "displayId">>;
+} & {
+    configuration: AnyConfigurationSchemaType;
+    featureHeight: import("mobx-state-tree").IMaybe<import("mobx-state-tree").ISimpleType<number>>;
+    noSpacing: import("mobx-state-tree").IMaybe<import("mobx-state-tree").ISimpleType<boolean>>;
+    fadeLikelihood: import("mobx-state-tree").IMaybe<import("mobx-state-tree").ISimpleType<boolean>>;
+    trackMaxHeight: import("mobx-state-tree").IMaybe<import("mobx-state-tree").ISimpleType<number>>;
+    colorBySetting: import("mobx-state-tree").IType<import("../shared/types").ColorBy | undefined, import("../shared/types").ColorBy | undefined, import("../shared/types").ColorBy | undefined>;
+    filterBySetting: import("mobx-state-tree").IType<import("../shared/types").FilterBy | undefined, import("../shared/types").FilterBy | undefined, import("../shared/types").FilterBy | undefined>;
+    jexlFilters: import("mobx-state-tree").IOptionalIType<import("mobx-state-tree").IArrayType<import("mobx-state-tree").ISimpleType<string>>, [undefined]>;
+    hideSmallIndelsSetting: import("mobx-state-tree").IMaybe<import("mobx-state-tree").ISimpleType<boolean>>;
+}>> & import("mobx-state-tree/dist/internal").NonEmptyObject & import("mobx-state-tree")._NotCustomized, import("mobx-state-tree")._NotCustomized>;
 export type LinearPileupDisplayStateModel = ReturnType<typeof stateModelFactory>;
 export type LinearPileupDisplayModel = Instance<LinearPileupDisplayStateModel>;
 export default stateModelFactory;

package/esm/LinearPileupDisplay/model.js

@@ -1,79 +1,37 @@
 import { lazy } from 'react';
-import { observable } from 'mobx';
-import { types, isAlive } from 'mobx-state-tree';
-import { ConfigurationReference, readConfObject, getConf, } from '@jbrowse/core/configuration';
+import { ConfigurationReference, getConf, readConfObject, } from '@jbrowse/core/configuration';
+import { getContainingView, getEnv, getSession } from '@jbrowse/core/util';
 import { getRpcSessionId } from '@jbrowse/core/util/tracks';
-import { getEnv, getSession, getContainingView } from '@jbrowse/core/util';
-// icons
-import VisibilityIcon from '@mui/icons-material/Visibility';
+import ColorLensIcon from '@mui/icons-material/ColorLens';
 import SwapVertIcon from '@mui/icons-material/SwapVert';
+import VisibilityIcon from '@mui/icons-material/Visibility';
 import WorkspacesIcon from '@mui/icons-material/Workspaces';
-import ColorLensIcon from '@mui/icons-material/ColorLens';
-// locals
+import { observable } from 'mobx';
+import { isAlive, types } from 'mobx-state-tree';
 import { SharedLinearPileupDisplayMixin } from './SharedLinearPileupDisplayMixin';
-import { createAutorun, getColorForModification, modificationData, } from '../util';
 import { getUniqueModifications } from '../shared/getUniqueModifications';
-// lazies
+import { createAutorun, getColorForModification, modificationData, } from '../util';
 const SortByTagDialog = lazy(() => import('./components/SortByTagDialog'));
 const GroupByDialog = lazy(() => import('./components/GroupByDialog'));
-/**
- * #stateModel LinearPileupDisplay
- * #category display
- * extends
- * - [SharedLinearPileupDisplayMixin](../sharedlinearpileupdisplaymixin)
- */
 function stateModelFactory(configSchema) {
     return types
         .compose('LinearPileupDisplay', SharedLinearPileupDisplayMixin(configSchema), types.model({
-        /**
-         * #property
-         */
         type: types.literal('LinearPileupDisplay'),
-        /**
-         * #property
-         */
         configuration: ConfigurationReference(configSchema),
-        /**
-         * #property
-         */
         showSoftClipping: false,
-        /**
-         * #property
-         */
         mismatchAlpha: types.maybe(types.boolean),
-        /**
-         * #property
-         */
         sortedBy: types.frozen(),
     }))
         .volatile(() => ({
-        /**
-         * #volatile
-         */
         sortReady: false,
-        /**
-         * #volatile
-         */
         currSortBpPerPx: 0,
-        /**
-         * #volatile
-         */
         visibleModifications: observable.map({}),
-        /**
-         * #volatile
-         */
         modificationsReady: false,
     }))
         .actions(self => ({
-        /**
-         * #action
-         */
         setCurrSortBpPerPx(n) {
             self.currSortBpPerPx = n;
         },
-        /**
-         * #action
-         */
         updateVisibleModifications(uniqueModifications) {
             uniqueModifications.forEach(value => {
                 if (!self.visibleModifications.has(value.type)) {
@@ -84,39 +42,21 @@ function stateModelFactory(configSchema) {
                 }
             });
         },
-        /**
-         * #action
-         */
         setModificationsReady(flag) {
             self.modificationsReady = flag;
         },
-        /**
-         * #action
-         */
         setSortReady(flag) {
             self.sortReady = flag;
         },
-        /**
-         * #action
-         */
         clearSelected() {
             self.sortedBy = undefined;
         },
-        /**
-         * #action
-         */
         toggleSoftClipping() {
             self.showSoftClipping = !self.showSoftClipping;
         },
-        /**
-         * #action
-         */
         toggleMismatchAlpha() {
             self.mismatchAlpha = !self.mismatchAlpha;
         },
-        /**
-         * #action
-         */
         setSortedBy(type, tag) {
             const { centerLineInfo } = getContainingView(self);
             if (!centerLineInfo) {
@@ -136,23 +76,14 @@ function stateModelFactory(configSchema) {
                 tag,
             };
         },
-        /**
-         * #action
-         * overrides base from SharedLinearPileupDisplay to make sortReady false
-         * since changing feature height destroys the sort-induced layout
-         */
         setFeatureHeight(n) {
             self.sortReady = false;
             self.featureHeight = n;
         },
     }))
         .actions(self => {
-        // resets the sort object and refresh whole display on reload
         const superReload = self.reload;
         return {
-            /**
-             * #action
-             */
             reload() {
                 self.clearSelected();
                 superReload();
@@ -160,21 +91,16 @@ function stateModelFactory(configSchema) {
         };
     })
         .views(self => ({
-        /**
-         * #getter
-         */
         get visibleModificationTypes() {
             return [...self.visibleModifications.keys()];
         },
-        /**
-         * #getter
-         */
         get rendererConfig() {
-            const { featureHeight, noSpacing, trackMaxHeight, mismatchAlpha, rendererTypeName, } = self;
+            const { featureHeight, noSpacing, trackMaxHeight, mismatchAlpha, rendererTypeName, hideSmallIndels, } = self;
             const configBlob = getConf(self, ['renderers', rendererTypeName]) || {};
             return self.rendererType.configSchema.create({
                 ...configBlob,
                 ...(featureHeight !== undefined ? { height: featureHeight } : {}),
+                ...(hideSmallIndels !== undefined ? { hideSmallIndels } : {}),
                 ...(noSpacing !== undefined ? { noSpacing } : {}),
                 ...(mismatchAlpha !== undefined ? { mismatchAlpha } : {}),
                 ...(trackMaxHeight !== undefined
@@ -186,15 +112,9 @@ function stateModelFactory(configSchema) {
         .views(self => {
         const { renderReady: superRenderReady } = self;
         return {
-            /**
-             * #getter
-             */
             get mismatchAlphaSetting() {
                 return readConfObject(self.rendererConfig, 'mismatchAlpha');
             },
-            /**
-             * #method
-             */
             renderReady() {
                 const view = getContainingView(self);
                 return (self.modificationsReady &&
@@ -206,9 +126,6 @@ function stateModelFactory(configSchema) {
         .views(self => {
         const { trackMenuItems: superTrackMenuItems, renderPropsPre: superRenderPropsPre, renderProps: superRenderProps, colorSchemeSubMenuItems: superColorSchemeSubMenuItems, } = self;
         return {
-            /**
-             * #method
-             */
             renderPropsPre() {
                 const { sortedBy, showSoftClipping, visibleModifications } = self;
                 const superProps = superRenderPropsPre();
@@ -219,9 +136,6 @@ function stateModelFactory(configSchema) {
                     visibleModifications: Object.fromEntries(visibleModifications.toJSON()),
                 };
             },
-            /**
-             * #method
-             */
             renderProps() {
                 const { sortReady } = self;
                 const result = superRenderProps();
@@ -230,9 +144,6 @@ function stateModelFactory(configSchema) {
                     notReady: result.notReady || !sortReady,
                 };
             },
-            /**
-             * #method
-             */
             trackMenuItems() {
                 return [
                     ...superTrackMenuItems(),
@@ -367,7 +278,10 @@ function stateModelFactory(configSchema) {
                         onClick: () => {
                             getSession(self).queueDialog(handleClose => [
                                 GroupByDialog,
-                                { model: self, handleClose },
+                                {
+                                    model: self,
+                                    handleClose,
+                                },
                             ]);
                         },
                     },
@@ -378,8 +292,6 @@ function stateModelFactory(configSchema) {
                         checked: self.showSoftClipping,
                         onClick: () => {
                             self.toggleSoftClipping();
-                            // if toggling from off to on, will break sort for this track
-                            // so clear it
                             if (self.showSoftClipping) {
                                 self.clearSelected();
                             }
@@ -417,8 +329,6 @@ function stateModelFactory(configSchema) {
                 if (sortedBy &&
                     (!sortReady || self.currSortBpPerPx === view.bpPerPx)) {
                     const { pos, refName, assemblyName } = sortedBy;
-                    // render just the sorted region first
-                    // @ts-expect-error
                     await self.rendererType.renderInClient(rpcManager, {
                         assemblyName,
                         regions: [

package/esm/LinearReadArcsDisplay/components/ReactComponent.d.ts

@@ -1,6 +1,5 @@
-import React from 'react';
-import { LinearReadArcsDisplayModel } from '../model';
+import type { LinearReadArcsDisplayModel } from '../model';
 declare const LinearReadArcsReactComponent: ({ model, }: {
     model: LinearReadArcsDisplayModel;
-}) => React.JSX.Element;
+}) => import("react/jsx-runtime").JSX.Element;
 export default LinearReadArcsReactComponent;

package/esm/LinearReadArcsDisplay/components/ReactComponent.js

@@ -1,22 +1,18 @@
-import React, { useCallback } from 'react';
-import { observer } from 'mobx-react';
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useCallback } from 'react';
 import { getContainingView } from '@jbrowse/core/util';
+import { observer } from 'mobx-react';
 import BaseDisplayComponent from '../../shared/components/BaseDisplayComponent';
 const Arcs = observer(function ({ model, }) {
     const view = getContainingView(model);
     const width = Math.round(view.dynamicBlocks.totalWidthPx);
     const height = model.height;
-    // biome-ignore lint/correctness/useExhaustiveDependencies:
     const cb = useCallback((ref) => {
         model.setRef(ref);
-    }, 
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-    [model, width, height]);
-    // note: the position absolute below avoids scrollbar from appearing on track
-    return (React.createElement("canvas", { "data-testid": "arc-canvas", ref: cb, style: { width, height, position: 'absolute' }, width: width * 2, height: height * 2 }));
+    }, [model, width, height]);
+    return (_jsx("canvas", { "data-testid": "arc-canvas", ref: cb, style: { width, height, position: 'absolute' }, width: width * 2, height: height * 2 }));
 });
 const LinearReadArcsReactComponent = observer(function ({ model, }) {
-    return (React.createElement(BaseDisplayComponent, { model: model },
-        React.createElement(Arcs, { model: model })));
+    return (_jsx(BaseDisplayComponent, { model: model, children: _jsx(Arcs, { model: model }) }));
 });
 export default LinearReadArcsReactComponent;