@jbrowse/plugin-linear-comparative-view 2.17.0 → 3.0.0

package/esm/LinearComparativeDisplay/configSchemaF.d.ts

@@ -1,5 +1,2 @@
-/**
- * #config LinearComparativeDisplay
- */
 declare function configSchemaFactory(_pluginManager: any): import("@jbrowse/core/configuration/configurationSchema").ConfigurationSchemaType<{}, import("@jbrowse/core/configuration/configurationSchema").ConfigurationSchemaOptions<undefined, "displayId">>;
 export default configSchemaFactory;

package/esm/LinearComparativeDisplay/configSchemaF.js

@@ -1,13 +1,7 @@
 import { ConfigurationSchema } from '@jbrowse/core/configuration';
-/**
- * #config LinearComparativeDisplay
- */
 function configSchemaFactory(_pluginManager) {
     return ConfigurationSchema('LinearComparativeDisplay', {}, {
         explicitlyTyped: true,
-        /**
-         * #identifier
-         */
         explicitIdentifier: 'displayId',
     });
 }

package/esm/LinearComparativeDisplay/index.d.ts

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

package/esm/LinearComparativeDisplay/stateModelFactory.d.ts

@@ -1,23 +1,12 @@
-import { AnyConfigurationSchemaType } from '@jbrowse/core/configuration';
-import { Instance } from 'mobx-state-tree';
-import { Feature } from '@jbrowse/core/util';
-/**
- * #stateModel LinearComparativeDisplay
- * extends
- * - [BaseDisplay](../basedisplay)
- */
+import type { AnyConfigurationSchemaType } from '@jbrowse/core/configuration';
+import type { Feature } from '@jbrowse/core/util';
+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>;
     rpcDriverName: import("mobx-state-tree").IMaybe<import("mobx-state-tree").ISimpleType<string>>;
 } & {
-    /**
-     * #property
-     */
     type: import("mobx-state-tree").ISimpleType<"LinearComparativeDisplay">;
-    /**
-     * #property
-     */
     configuration: AnyConfigurationSchemaType;
 }, {
     rendererTypeName: string;
@@ -43,10 +32,7 @@ declare function stateModelFactory(configSchema: AnyConfigurationSchemaType): im
             message: string | undefined;
         }, import("mobx-state-tree")._NotCustomized, import("mobx-state-tree")._NotCustomized>>;
         onHorizontalScroll?: () => void;
-        blockState? /**
-         * #action
-         * controlled by a reaction
-         */: Record<string, any>;
+        blockState?: Record<string, any>;
     }>;
     readonly DisplayBlurb: React.FC<{
         model: {
@@ -58,10 +44,7 @@ declare function stateModelFactory(configSchema: AnyConfigurationSchemaType): im
             error: unknown;
             message: string | undefined;
         } & import("mobx-state-tree").IStateTreeNode<import("mobx-state-tree").IModelType<{
-            id: import("mobx-state-tree").IOptionalIType<import("mobx-state-tree" /**
-             * #action
-             * controlled by a reaction
-             */).ISimpleType<string>, [undefined]>;
+            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>>;
         }, {
@@ -84,21 +67,12 @@ declare function stateModelFactory(configSchema: AnyConfigurationSchemaType): im
     setRpcDriverName(rpcDriverName: string): void;
     reload(): void;
 } & {
-    renderInProgress: AbortController | undefined;
+    renderInProgress: string | undefined;
     features: Feature[] | undefined;
     message: string | undefined;
 } & {
-    /**
-     * #getter
-     */
     readonly level: number;
-    /**
-     * #getter
-     */
     readonly height: number;
-    /**
-     * #getter
-     */
     renderProps(): {
         rpcDriverName: string | undefined;
         displayModel: {
@@ -140,10 +114,7 @@ declare function stateModelFactory(configSchema: AnyConfigurationSchemaType): im
                     message: string | undefined;
                 }, import("mobx-state-tree")._NotCustomized, import("mobx-state-tree")._NotCustomized>>;
                 onHorizontalScroll?: () => void;
-                blockState? /**
-                 * #action
-                 * controlled by a reaction
-                 */: Record<string, any>;
+                blockState?: Record<string, any>;
             }>;
             readonly DisplayBlurb: React.FC<{
                 model: {
@@ -155,10 +126,7 @@ declare function stateModelFactory(configSchema: AnyConfigurationSchemaType): im
                     error: unknown;
                     message: string | undefined;
                 } & import("mobx-state-tree").IStateTreeNode<import("mobx-state-tree").IModelType<{
-                    id: import("mobx-state-tree").IOptionalIType<import("mobx-state-tree" /**
-                     * #action
-                     * controlled by a reaction
-                     */).ISimpleType<string>, [undefined]>;
+                    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>>;
                 }, {
@@ -181,7 +149,7 @@ declare function stateModelFactory(configSchema: AnyConfigurationSchemaType): im
             setRpcDriverName(rpcDriverName: string): void;
             reload(): void;
         } & {
-            renderInProgress: AbortController | undefined;
+            renderInProgress: string | undefined;
             features: Feature[] | undefined;
             message: string | undefined;
         } & import("mobx-state-tree").IStateTreeNode<import("mobx-state-tree").IModelType<{
@@ -189,13 +157,7 @@ declare function stateModelFactory(configSchema: AnyConfigurationSchemaType): im
             type: import("mobx-state-tree").ISimpleType<string>;
             rpcDriverName: import("mobx-state-tree").IMaybe<import("mobx-state-tree").ISimpleType<string>>;
         } & {
-            /**
-             * #property
-             */
             type: import("mobx-state-tree").ISimpleType<"LinearComparativeDisplay">;
-            /**
-             * #property
-             */
             configuration: AnyConfigurationSchemaType;
         }, {
             rendererTypeName: string;
@@ -221,10 +183,7 @@ declare function stateModelFactory(configSchema: AnyConfigurationSchemaType): im
                     message: string | undefined;
                 }, import("mobx-state-tree")._NotCustomized, import("mobx-state-tree")._NotCustomized>>;
                 onHorizontalScroll?: () => void;
-                blockState? /**
-                 * #action
-                 * controlled by a reaction
-                 */: Record<string, any>;
+                blockState?: Record<string, any>;
             }>;
             readonly DisplayBlurb: React.FC<{
                 model: {
@@ -259,34 +218,18 @@ declare function stateModelFactory(configSchema: AnyConfigurationSchemaType): im
             setRpcDriverName(rpcDriverName: string): void;
             reload(): void;
         } & {
-            renderInProgress: AbortController | undefined;
+            renderInProgress: string | undefined;
             features: Feature[] | undefined;
             message: string | undefined;
         }, import("mobx-state-tree")._NotCustomized, import("mobx-state-tree")._NotCustomized>>;
         highResolutionScaling: number;
     };
 } & {
-    /**
-     * #action
-     * controlled by a reaction
-     */
-    setLoading(abortController: AbortController): void;
-    /**
-     * #action
-     * controlled by a reaction
-     */
+    setLoading(newStopToken: string): void;
     setMessage(messageText: string): void;
-    /**
-     * #action
-     * controlled by a reaction
-     */
     setRendered(args?: {
         features: Feature[];
     }): void;
-    /**
-     * #action
-     * controlled by a reaction
-     */
     setError(error: unknown): void;
 } & {
     afterAttach(): void;

package/esm/LinearComparativeDisplay/stateModelFactory.js

@@ -1,46 +1,27 @@
-import { readConfObject, ConfigurationReference, } from '@jbrowse/core/configuration';
-import { types, getSnapshot, getParent } from 'mobx-state-tree';
+import { ConfigurationReference, readConfObject, } from '@jbrowse/core/configuration';
+import { BaseDisplay } from '@jbrowse/core/pluggableElementTypes/models';
 import { dedupe, getContainingView, getSession, makeAbortableReaction, } from '@jbrowse/core/util';
+import { stopStopToken } from '@jbrowse/core/util/stopToken';
 import { getRpcSessionId } from '@jbrowse/core/util/tracks';
-import { BaseDisplay } from '@jbrowse/core/pluggableElementTypes/models';
-/**
- * #stateModel LinearComparativeDisplay
- * extends
- * - [BaseDisplay](../basedisplay)
- */
+import { getParent, getSnapshot, types } from 'mobx-state-tree';
 function stateModelFactory(configSchema) {
     return types
         .compose('LinearComparativeDisplay', BaseDisplay, types.model({
-        /**
-         * #property
-         */
         type: types.literal('LinearComparativeDisplay'),
-        /**
-         * #property
-         */
         configuration: ConfigurationReference(configSchema),
     }))
-        .volatile(( /* self */) => ({
+        .volatile(() => ({
         renderInProgress: undefined,
         features: undefined,
         message: undefined,
     }))
         .views(self => ({
-        /**
-         * #getter
-         */
         get level() {
             return getParent(self, 4).level;
         },
-        /**
-         * #getter
-         */
         get height() {
             return getParent(self, 4).height;
         },
-        /**
-         * #getter
-         */
         renderProps() {
             return {
                 rpcDriverName: self.rpcDriverName,
@@ -50,33 +31,18 @@ function stateModelFactory(configSchema) {
         },
     }))
         .actions(self => {
-        let renderInProgress;
+        let stopToken;
         return {
-            /**
-             * #action
-             * controlled by a reaction
-             */
-            setLoading(abortController) {
+            setLoading(newStopToken) {
                 self.message = undefined;
                 self.error = undefined;
-                renderInProgress = abortController;
+                stopToken = newStopToken;
             },
-            /**
-             * #action
-             * controlled by a reaction
-             */
             setMessage(messageText) {
-                if (renderInProgress && !renderInProgress.signal.aborted) {
-                    renderInProgress.abort();
-                }
                 self.message = messageText;
                 self.error = undefined;
-                renderInProgress = undefined;
+                stopToken = undefined;
             },
-            /**
-             * #action
-             * controlled by a reaction
-             */
             setRendered(args) {
                 if (!args) {
                     return;
@@ -101,34 +67,27 @@ function stateModelFactory(configSchema) {
                 }
                 self.message = undefined;
                 self.error = undefined;
-                renderInProgress = undefined;
+                stopToken = undefined;
                 if (foundNewFeatureNotInExistingMap ||
                     foundExistingFeatureNotInNewMap ||
                     !self.features) {
                     self.features = features;
                 }
             },
-            /**
-             * #action
-             * controlled by a reaction
-             */
             setError(error) {
                 console.error(error);
-                if (renderInProgress && !renderInProgress.signal.aborted) {
-                    renderInProgress.abort();
+                if (stopToken !== undefined) {
+                    stopStopToken(stopToken);
                 }
-                // the rendering failed for some reason
                 self.message = undefined;
                 self.error = error;
-                renderInProgress = undefined;
+                stopToken = undefined;
             },
         };
     })
         .actions(self => ({
         afterAttach() {
-            makeAbortableReaction(
-            // @ts-expect-error
-            self, renderBlockData, renderBlockEffect, {
+            makeAbortableReaction(self, renderBlockData, renderBlockEffect, {
                 name: `${self.type} ${self.id} rendering`,
                 delay: 1000,
                 fireImmediately: true,
@@ -139,9 +98,6 @@ function stateModelFactory(configSchema) {
 function renderBlockData(self) {
     const { rpcManager } = getSession(self);
     const display = self;
-    // Alternative to readConfObject(config) is below used because
-    // renderProps is something under our control.  Compare to
-    // serverSideRenderedBlock
     readConfObject(self.configuration);
     const { level, adapterConfig } = self;
     const parent = getContainingView(self);

package/esm/LinearComparativeView/components/Header.d.ts

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

package/esm/LinearComparativeView/components/Header.js

@@ -1,12 +1,12 @@
-import React, { useState } from 'react';
-import { observer } from 'mobx-react';
-import { FormGroup } from '@mui/material';
-import { makeStyles } from 'tss-react/mui';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useState } from 'react';
 import CascadingMenuButton from '@jbrowse/core/ui/CascadingMenuButton';
-// icons
+import { TrackSelector as TrackSelectorIcon } from '@jbrowse/core/ui/Icons';
 import MoreVertIcon from '@mui/icons-material/MoreVert';
 import SearchIcon from '@mui/icons-material/Search';
-import { TrackSelector as TrackSelectorIcon } from '@jbrowse/core/ui/Icons';
+import { FormGroup } from '@mui/material';
+import { observer } from 'mobx-react';
+import { makeStyles } from 'tss-react/mui';
 import HeaderSearchBoxes from './HeaderSearchBoxes';
 const useStyles = makeStyles()({
     inline: {
@@ -18,67 +18,60 @@ const Header = observer(function ({ model, }) {
     const { views } = model;
     const [showSearchBoxes, setShowSearchBoxes] = useState(views.length <= 3);
     const [sideBySide, setSideBySide] = useState(views.length <= 3);
-    return (React.createElement(FormGroup, { row: true },
-        React.createElement(CascadingMenuButton, { menuItems: [
-                {
-                    label: 'Synteny track selectors',
-                    type: 'subMenu',
-                    subMenu: views.slice(0, -1).map((_, idx) => ({
-                        label: `Row ${idx + 1}->${idx + 2} (${views[idx].assemblyNames.join(',')}->${views[idx + 1].assemblyNames.join(',')})`,
+    return (_jsxs(FormGroup, { row: true, children: [_jsx(CascadingMenuButton, { menuItems: [
+                    {
+                        label: 'Synteny track selectors',
+                        type: 'subMenu',
+                        subMenu: views.slice(0, -1).map((_, idx) => ({
+                            label: `Row ${idx + 1}->${idx + 2} (${views[idx].assemblyNames.join(',')}->${views[idx + 1].assemblyNames.join(',')})`,
+                            onClick: () => {
+                                model.activateTrackSelector(idx);
+                            },
+                        })),
+                    },
+                    {
+                        label: 'Row track selectors',
+                        type: 'subMenu',
+                        subMenu: views.map((view, idx) => ({
+                            label: `Row ${idx + 1} track selector (${view.assemblyNames.join(',')})`,
+                            onClick: () => view.activateTrackSelector(),
+                        })),
+                    },
+                ], children: _jsx(TrackSelectorIcon, {}) }), _jsx(CascadingMenuButton, { menuItems: [
+                    {
+                        label: 'Row view menus',
+                        type: 'subMenu',
+                        subMenu: views.map((view, idx) => ({
+                            label: `View ${idx + 1} Menu`,
+                            subMenu: view.menuItems(),
+                        })),
+                    },
+                    ...model.headerMenuItems(),
+                ], children: _jsx(MoreVertIcon, {}) }), _jsx(CascadingMenuButton, { menuItems: [
+                    {
+                        label: 'Show search boxes',
+                        type: 'checkbox',
+                        checked: showSearchBoxes,
                         onClick: () => {
-                            model.activateTrackSelector(idx);
+                            setShowSearchBoxes(!showSearchBoxes);
                         },
-                    })),
-                },
-                {
-                    label: 'Row track selectors',
-                    type: 'subMenu',
-                    subMenu: views.map((view, idx) => ({
-                        label: `Row ${idx + 1} track selector (${view.assemblyNames.join(',')})`,
-                        onClick: () => view.activateTrackSelector(),
-                    })),
-                },
-            ] },
-            React.createElement(TrackSelectorIcon, null)),
-        React.createElement(CascadingMenuButton, { menuItems: [
-                {
-                    label: 'Row view menus',
-                    type: 'subMenu',
-                    subMenu: views.map((view, idx) => ({
-                        label: `View ${idx + 1} Menu`,
-                        subMenu: view.menuItems(),
-                    })),
-                },
-                ...model.headerMenuItems(),
-            ] },
-            React.createElement(MoreVertIcon, null)),
-        React.createElement(CascadingMenuButton, { menuItems: [
-                {
-                    label: 'Show search boxes',
-                    type: 'checkbox',
-                    checked: showSearchBoxes,
-                    onClick: () => {
-                        setShowSearchBoxes(!showSearchBoxes);
                     },
-                },
-                {
-                    label: 'Orientation - Side-by-side',
-                    type: 'radio',
-                    checked: sideBySide,
-                    onClick: () => {
-                        setSideBySide(!sideBySide);
+                    {
+                        label: 'Orientation - Side-by-side',
+                        type: 'radio',
+                        checked: sideBySide,
+                        onClick: () => {
+                            setSideBySide(!sideBySide);
+                        },
                     },
-                },
-                {
-                    label: 'Orientation - Vertical',
-                    type: 'radio',
-                    checked: !sideBySide,
-                    onClick: () => {
-                        setSideBySide(!sideBySide);
+                    {
+                        label: 'Orientation - Vertical',
+                        type: 'radio',
+                        checked: !sideBySide,
+                        onClick: () => {
+                            setSideBySide(!sideBySide);
+                        },
                     },
-                },
-            ] },
-            React.createElement(SearchIcon, null)),
-        showSearchBoxes ? (React.createElement("span", { className: sideBySide ? classes.inline : undefined }, views.map(view => (React.createElement(HeaderSearchBoxes, { key: view.id, view: view }))))) : null));
+                ], children: _jsx(SearchIcon, {}) }), showSearchBoxes ? (_jsx("span", { className: sideBySide ? classes.inline : undefined, children: views.map(view => (_jsx(HeaderSearchBoxes, { view: view }, view.id))) })) : null] }));
 });
 export default Header;

package/esm/LinearComparativeView/components/HeaderSearchBoxes.d.ts

@@ -1,6 +1,5 @@
-import React from 'react';
-import { LinearGenomeViewModel } from '@jbrowse/plugin-linear-genome-view';
+import type { LinearGenomeViewModel } from '@jbrowse/plugin-linear-genome-view';
 declare const HeaderSearchBoxes: ({ view, }: {
     view: LinearGenomeViewModel;
-}) => React.JSX.Element;
+}) => import("react/jsx-runtime").JSX.Element;
 export default HeaderSearchBoxes;

package/esm/LinearComparativeView/components/HeaderSearchBoxes.js

@@ -1,10 +1,9 @@
-import React from 'react';
-import { observer } from 'mobx-react';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { toLocale } from '@jbrowse/core/util';
+import { SearchBox } from '@jbrowse/plugin-linear-genome-view';
 import { Typography } from '@mui/material';
+import { observer } from 'mobx-react';
 import { makeStyles } from 'tss-react/mui';
-// jbrowse
-import { SearchBox, } from '@jbrowse/plugin-linear-genome-view';
-import { toLocale } from '@jbrowse/core/util';
 const useStyles = makeStyles()(() => ({
     bp: {
         display: 'flex',
@@ -18,12 +17,6 @@ const useStyles = makeStyles()(() => ({
 const HeaderSearchBoxes = observer(function ({ view, }) {
     const { classes } = useStyles();
     const { assemblyNames, coarseTotalBp } = view;
-    return (React.createElement("span", { className: classes.searchBox },
-        React.createElement(SearchBox, { model: view, showHelp: false }),
-        React.createElement(Typography, { variant: "body2", color: "textSecondary", className: classes.bp },
-            assemblyNames.join(','),
-            " ",
-            toLocale(Math.round(coarseTotalBp)),
-            " bp")));
+    return (_jsxs("span", { className: classes.searchBox, children: [_jsx(SearchBox, { model: view, showHelp: false }), _jsxs(Typography, { variant: "body2", color: "textSecondary", className: classes.bp, children: [assemblyNames.join(','), " ", toLocale(Math.round(coarseTotalBp)), " bp"] })] }));
 });
 export default HeaderSearchBoxes;

package/esm/LinearComparativeView/components/LinearComparativeRenderArea.d.ts

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

package/esm/LinearComparativeView/components/LinearComparativeRenderArea.js

@@ -1,9 +1,10 @@
-import React from 'react';
-import { makeStyles } from 'tss-react/mui';
-import { observer } from 'mobx-react';
-import { getEnv } from '@jbrowse/core/util';
-import { ResizeHandle } from '@jbrowse/core/ui';
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
 import { getConf } from '@jbrowse/core/configuration';
+import { ResizeHandle } from '@jbrowse/core/ui';
+import { getEnv } from '@jbrowse/core/util';
+import { observer } from 'mobx-react';
+import { Fragment } from 'react/jsx-runtime';
+import { makeStyles } from 'tss-react/mui';
 const useStyles = makeStyles()({
     container: {
         display: 'grid',
@@ -20,37 +21,24 @@ const useStyles = makeStyles()({
 function View({ view }) {
     const { pluginManager } = getEnv(view);
     const { ReactComponent } = pluginManager.getViewType(view.type);
-    return React.createElement(ReactComponent, { model: view });
+    return _jsx(ReactComponent, { model: view });
 }
 const LinearComparativeRenderArea = observer(function ({ model, }) {
     const { classes } = useStyles();
     const { views, levels } = model;
-    const RenderList = [
-        React.createElement(View, { key: views[0].id, view: views[0] }),
-    ];
-    for (let i = 1; i < views.length; i++) {
-        const view = views[i];
-        const level = levels[i - 1];
-        RenderList.push(React.createElement(React.Fragment, { key: view.id },
-            React.createElement("div", { className: classes.container },
-                React.createElement(Overlays, { model: model, level: i - 1 })),
-            React.createElement(ResizeHandle, { onDrag: n => level === null || level === void 0 ? void 0 : level.setHeight(level.height + n), className: classes.resizeHandle }),
-            React.createElement(View, { view: view })));
-    }
-    return React.createElement("div", { className: classes.container }, RenderList);
+    return (_jsx("div", { className: classes.container, children: views.map((view, i) => (_jsxs(Fragment, { children: [i > 0 ? (_jsxs(_Fragment, { children: [_jsx("div", { className: classes.container, children: _jsx(Overlays, { model: model, level: i - 1 }) }), _jsx(ResizeHandle, { onDrag: n => { var _a, _b; return (_a = levels[i - 1]) === null || _a === void 0 ? void 0 : _a.setHeight((((_b = levels[i - 1]) === null || _b === void 0 ? void 0 : _b.height) || 0) + n); }, className: classes.resizeHandle })] })) : null, _jsx(View, { view: view })] }, view.id))) }));
 });
 const Overlays = observer(function ({ model, level, }) {
     var _a;
     const { classes } = useStyles();
-    return (React.createElement(React.Fragment, null, (_a = model.levels[level]) === null || _a === void 0 ? void 0 : _a.tracks.map(track => {
-        const [display] = track.displays;
-        const { RenderingComponent } = display;
-        const trackId = getConf(track, 'trackId');
-        return RenderingComponent ? (React.createElement("div", { className: classes.overlay, key: trackId, style: {
-                height: display.height,
-                overflow: 'hidden',
-            } },
-            React.createElement(RenderingComponent, { model: display }))) : null;
-    })));
+    return (_jsx(_Fragment, { children: (_a = model.levels[level]) === null || _a === void 0 ? void 0 : _a.tracks.map(track => {
+            const [display] = track.displays;
+            const { RenderingComponent } = display;
+            const trackId = getConf(track, 'trackId');
+            return RenderingComponent ? (_jsx("div", { className: classes.overlay, style: {
+                    height: display.height,
+                    overflow: 'hidden',
+                }, children: _jsx(RenderingComponent, { model: display }) }, trackId)) : null;
+        }) }));
 });
 export default LinearComparativeRenderArea;

package/esm/LinearComparativeView/components/LinearComparativeView.d.ts

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

package/esm/LinearComparativeView/components/LinearComparativeView.js

@@ -1,12 +1,10 @@
-import React from 'react';
-import { makeStyles } from 'tss-react/mui';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { observer } from 'mobx-react';
-import Rubberband from './Rubberband';
+import { makeStyles } from 'tss-react/mui';
 import Header from './Header';
 import LinearComparativeRenderArea from './LinearComparativeRenderArea';
+import Rubberband from './Rubberband';
 const useStyles = makeStyles()(theme => ({
-    // this helps keep the vertical guide inside the parent view container,
-    // similar style exists in the single LGV's trackscontainer
     rubberbandContainer: {
         position: 'relative',
         overflow: 'hidden',
@@ -22,9 +20,6 @@ const useStyles = makeStyles()(theme => ({
 }));
 const LinearComparativeView = observer(function ({ model, }) {
     const { classes } = useStyles();
-    return (React.createElement("div", { className: classes.rubberbandContainer },
-        React.createElement(Header, { model: model }),
-        React.createElement(Rubberband, { model: model, ControlComponent: React.createElement("div", { className: classes.rubberbandDiv }) }),
-        React.createElement(LinearComparativeRenderArea, { model: model })));
+    return (_jsxs("div", { className: classes.rubberbandContainer, children: [_jsx(Header, { model: model }), _jsx(Rubberband, { model: model, ControlComponent: _jsx("div", { className: classes.rubberbandDiv }) }), _jsx(LinearComparativeRenderArea, { model: model })] }));
 });
 export default LinearComparativeView;

package/esm/LinearComparativeView/components/Rubberband.d.ts

@@ -1,8 +1,7 @@
-import React from 'react';
-import { LinearComparativeViewModel } from '../model';
+import type { LinearComparativeViewModel } from '../model';
 type LCV = LinearComparativeViewModel;
 declare const LinearComparativeRubberband: ({ model, ControlComponent, }: {
     model: LCV;
     ControlComponent?: React.ReactElement;
-}) => React.JSX.Element;
+}) => import("react/jsx-runtime").JSX.Element;
 export default LinearComparativeRubberband;