@jbrowse/plugin-linear-genome-view 2.10.2 → 2.10.3

package/esm/LinearGenomeView/components/OverviewHighlight.js

@@ -0,0 +1,48 @@
+import React from 'react';
+import { observer } from 'mobx-react';
+import { makeStyles } from 'tss-react/mui';
+import { colord } from '@jbrowse/core/util/colord';
+const useStyles = makeStyles()(theme => {
+    var _a, _b, _c, _d, _e, _f;
+    return ({
+        highlight: {
+            height: '100%',
+            position: 'absolute',
+            background: `${colord((_b = (_a = theme.palette.quaternary) === null || _a === void 0 ? void 0 : _a.main) !== null && _b !== void 0 ? _b : 'goldenrod')
+                .alpha(0.35)
+                .toRgbString()}`,
+            borderLeft: `1px solid ${(_d = (_c = theme.palette.quaternary) === null || _c === void 0 ? void 0 : _c.main) !== null && _d !== void 0 ? _d : 'goldenrod'}`,
+            borderRight: `1px solid ${(_f = (_e = theme.palette.quaternary) === null || _e === void 0 ? void 0 : _e.main) !== null && _f !== void 0 ? _f : 'goldenrod'}`,
+        },
+    });
+});
+const OverviewHighlight = observer(function OverviewHighlight({ model, overview, }) {
+    const { classes } = useStyles();
+    const { cytobandOffset } = model;
+    // coords
+    const mapCoords = (r) => {
+        const s = overview.bpToPx({
+            ...r,
+            coord: r.reversed ? r.end : r.start,
+        });
+        const e = overview.bpToPx({
+            ...r,
+            coord: r.reversed ? r.start : r.end,
+        });
+        return s !== undefined && e != undefined
+            ? {
+                width: Math.abs(e - s),
+                left: s + cytobandOffset,
+            }
+            : undefined;
+    };
+    if (!model.highlight) {
+        return null;
+    }
+    const h = mapCoords(model.highlight);
+    return (React.createElement(React.Fragment, null, h ? (React.createElement("div", { className: classes.highlight, style: {
+            width: h.width,
+            left: h.left,
+        } })) : null));
+});
+export default OverviewHighlight;

package/esm/LinearGenomeView/components/OverviewScalebar.js

@@ -13,6 +13,7 @@ import { getCytobands } from './util';
 import OverviewRubberband from './OverviewRubberband';
 import Cytobands from './Cytobands';
 import OverviewScalebarPolygon from './OverviewScalebarPolygon';
+import OverviewHighlight from './OverviewHighlight';
 const wholeSeqSpacer = 2;
 const useStyles = makeStyles()(theme => ({
     scalebar: {
@@ -151,7 +152,8 @@ const Scalebar = observer(function ({ model, scale, overview, }) {
                     backgroundColor: '#999',
                     backgroundImage: 'repeating-linear-gradient(90deg, transparent, transparent 1px, rgba(255,255,255,.5) 1px, rgba(255,255,255,.5) 3px)',
                 } })) : (React.createElement(OverviewBox, { scale: scale, block: block, model: model, overview: overview, key: `${JSON.stringify(block)}-${idx}` }));
-        })));
+        }),
+        React.createElement(OverviewHighlight, { model: model, overview: overview })));
 });
 const OverviewScalebar = observer(function ({ model, children, }) {
     const { classes } = useStyles();

package/esm/LinearGenomeView/components/TracksContainer.js

@@ -13,6 +13,7 @@ import Gridlines from './Gridlines';
 import CenterLine from './CenterLine';
 import VerticalGuide from './VerticalGuide';
 import RubberbandSpan from './RubberbandSpan';
+import Highlight from './Highlight';
 const useStyles = makeStyles()({
     tracksContainer: {
         position: 'relative',
@@ -39,6 +40,7 @@ const TracksContainer = observer(function TracksContainer({ children, model, })
                 top: anchorPosition.clientY,
             }, onMenuItemClick: handleMenuItemClick, open: open, onClose: handleClose, menuItems: model.rubberBandMenuItems() })) : null,
         React.createElement(Rubberband, { model: model, ControlComponent: React.createElement(Scalebar, { model: model, style: { height: SCALE_BAR_HEIGHT, boxSizing: 'border-box' } }) }),
+        React.createElement(Highlight, { model: model }),
         additional,
         children));
 });

package/esm/LinearGenomeView/model.d.ts

@@ -81,6 +81,7 @@ export declare function stateModelFactory(pluginManager: PluginManager): import(
     showCytobandsSetting: import("mobx-state-tree").IOptionalIType<import("mobx-state-tree").ISimpleType<boolean>, [undefined]>;
     trackLabels: import("mobx-state-tree").IOptionalIType<import("mobx-state-tree").ISimpleType<string>, [undefined]>;
     showGridlines: import("mobx-state-tree").IType<boolean | undefined, boolean, boolean>;
+    highlight: import("mobx-state-tree").IMaybe<import("mobx-state-tree").IType<Required<ParsedLocString>, Required<ParsedLocString>, Required<ParsedLocString>>>;
 }, {
     width: number;
 } & {
@@ -251,6 +252,10 @@ export declare function stateModelFactory(pluginManager: PluginManager): import(
      * #action
      */
     setShowGridlines(b: boolean): void;
+    /**
+     * #action
+     */
+    setHighlight(highlight: Required<ParsedLocString> | undefined): void;
     /**
      * #action
      */

package/esm/LinearGenomeView/model.js

@@ -136,6 +136,11 @@ export function stateModelFactory(pluginManager) {
          * show the "gridlines" in the track area
          */
         showGridlines: true,
+        /**
+         * #property
+         * highlights on the LGV from the URL parameters
+         */
+        highlight: types.maybe(types.frozen()),
     }))
         .volatile(() => ({
         volatileWidth: undefined,
@@ -439,6 +444,12 @@ export function stateModelFactory(pluginManager) {
         setShowGridlines(b) {
             self.showGridlines = b;
         },
+        /**
+         * #action
+         */
+        setHighlight(highlight) {
+            self.highlight = highlight;
+        },
         /**
          * #action
          */

package/esm/LinearGenomeView/util.d.ts

@@ -24,8 +24,8 @@ export declare function generateLocations(regions: ParsedLocString[] | undefined
     assemblyName: string;
     parentRegion: import("@jbrowse/core/assemblyManager/assembly").BasicRegion;
     end?: number | undefined;
-    reversed?: boolean | undefined;
     start?: number | undefined;
+    reversed?: boolean | undefined;
     refName: string;
 }[]>;
 /**

package/esm/index.d.ts

@@ -38,8 +38,15 @@ export default class LinearGenomeViewPlugin extends Plugin {
                     message: string | undefined;
                     maxHeightReached: boolean;
                     ReactComponent: ({ model, }: {
-                        model: any;
-                    }) => any;
+                        model: {
+                            error?: unknown;
+                            reload: () => void;
+                            message: import("react").ReactNode;
+                            filled?: boolean | undefined;
+                            status?: string | undefined;
+                            reactElement?: import("react").ReactElement<any, string | import("react").JSXElementConstructor<any>> | undefined;
+                        };
+                    }) => import("react").JSX.Element | undefined;
                     renderProps: any;
                 } & {
                     doReload(): void;
@@ -83,8 +90,15 @@ export default class LinearGenomeViewPlugin extends Plugin {
                     message: string | undefined;
                     maxHeightReached: boolean;
                     ReactComponent: ({ model, }: {
-                        model: any;
-                    }) => any;
+                        model: {
+                            error?: unknown;
+                            reload: () => void;
+                            message: import("react").ReactNode;
+                            filled?: boolean | undefined;
+                            status?: string | undefined;
+                            reactElement?: import("react").ReactElement<any, string | import("react").JSXElementConstructor<any>> | undefined;
+                        };
+                    }) => import("react").JSX.Element | undefined;
                     renderProps: any;
                 } & {
                     doReload(): void;
@@ -292,8 +306,15 @@ export default class LinearGenomeViewPlugin extends Plugin {
                     message: string | undefined;
                     maxHeightReached: boolean;
                     ReactComponent: ({ model, }: {
-                        model: any;
-                    }) => any;
+                        model: {
+                            error?: unknown;
+                            reload: () => void;
+                            message: import("react").ReactNode;
+                            filled?: boolean | undefined;
+                            status?: string | undefined;
+                            reactElement?: import("react").ReactElement<any, string | import("react").JSXElementConstructor<any>> | undefined;
+                        };
+                    }) => import("react").JSX.Element | undefined;
                     renderProps: any;
                 } & {
                     doReload(): void;
@@ -497,8 +518,15 @@ export default class LinearGenomeViewPlugin extends Plugin {
                     message: string | undefined;
                     maxHeightReached: boolean;
                     ReactComponent: ({ model, }: {
-                        model: any;
-                    }) => any;
+                        model: {
+                            error?: unknown;
+                            reload: () => void;
+                            message: import("react").ReactNode;
+                            filled?: boolean | undefined;
+                            status?: string | undefined;
+                            reactElement?: import("react").ReactElement<any, string | import("react").JSXElementConstructor<any>> | undefined;
+                        };
+                    }) => import("react").JSX.Element | undefined;
                     renderProps: any;
                 } & {
                     doReload(): void;
@@ -587,8 +615,15 @@ export default class LinearGenomeViewPlugin extends Plugin {
                 message: string | undefined;
                 maxHeightReached: boolean;
                 ReactComponent: ({ model, }: {
-                    model: any;
-                }) => any;
+                    model: {
+                        error?: unknown;
+                        reload: () => void;
+                        message: import("react").ReactNode;
+                        filled?: boolean | undefined;
+                        status?: string | undefined;
+                        reactElement?: import("react").ReactElement<any, string | import("react").JSXElementConstructor<any>> | undefined;
+                    };
+                }) => import("react").JSX.Element | undefined;
                 renderProps: any;
             } & {
                 doReload(): void;
@@ -792,8 +827,15 @@ export default class LinearGenomeViewPlugin extends Plugin {
                 message: string | undefined;
                 maxHeightReached: boolean;
                 ReactComponent: ({ model, }: {
-                    model: any;
-                }) => any;
+                    model: {
+                        error?: unknown;
+                        reload: () => void;
+                        message: import("react").ReactNode;
+                        filled?: boolean | undefined;
+                        status?: string | undefined;
+                        reactElement?: import("react").ReactElement<any, string | import("react").JSXElementConstructor<any>> | undefined;
+                    };
+                }) => import("react").JSX.Element | undefined;
                 renderProps: any;
             } & {
                 doReload(): void;
@@ -904,6 +946,7 @@ export default class LinearGenomeViewPlugin extends Plugin {
                 showCytobandsSetting: boolean;
                 trackLabels: string;
                 showGridlines: boolean;
+                highlight: (Required<import("@jbrowse/core/util").ParsedLocString> & import("mobx-state-tree").IStateTreeNode<import("mobx-state-tree").IMaybe<import("mobx-state-tree").IType<Required<import("@jbrowse/core/util").ParsedLocString>, Required<import("@jbrowse/core/util").ParsedLocString>, Required<import("@jbrowse/core/util").ParsedLocString>>>>) | undefined;
             } & import("mobx-state-tree/dist/internal").NonEmptyObject & {
                 width: number;
             } & {
@@ -968,6 +1011,7 @@ export default class LinearGenomeViewPlugin extends Plugin {
                 setHideHeaderOverview(b: boolean): void;
                 setHideNoTracksActive(b: boolean): void;
                 setShowGridlines(b: boolean): void;
+                setHighlight(highlight: Required<import("@jbrowse/core/util").ParsedLocString> | undefined): void;
                 scrollTo(offsetPx: number): number;
                 zoomTo(bpPerPx: number, offset?: number, centerAtOffset?: boolean): number;
                 setOffsets(left?: import("./LinearGenomeView").BpOffset | undefined, right?: import("./LinearGenomeView").BpOffset | undefined): void;
@@ -1223,6 +1267,7 @@ export default class LinearGenomeViewPlugin extends Plugin {
                 showCytobandsSetting: import("mobx-state-tree").IOptionalIType<import("mobx-state-tree").ISimpleType<boolean>, [undefined]>;
                 trackLabels: import("mobx-state-tree").IOptionalIType<import("mobx-state-tree").ISimpleType<string>, [undefined]>;
                 showGridlines: import("mobx-state-tree").IType<boolean | undefined, boolean, boolean>;
+                highlight: import("mobx-state-tree").IMaybe<import("mobx-state-tree").IType<Required<import("@jbrowse/core/util").ParsedLocString>, Required<import("@jbrowse/core/util").ParsedLocString>, Required<import("@jbrowse/core/util").ParsedLocString>>>;
             }, {
                 width: number;
             } & {
@@ -1287,6 +1332,7 @@ export default class LinearGenomeViewPlugin extends Plugin {
                 setHideHeaderOverview(b: boolean): void;
                 setHideNoTracksActive(b: boolean): void;
                 setShowGridlines(b: boolean): void;
+                setHighlight(highlight: Required<import("@jbrowse/core/util").ParsedLocString> | undefined): void;
                 scrollTo(offsetPx: number): number;
                 zoomTo(bpPerPx: number, offset?: number, centerAtOffset?: boolean): number;
                 setOffsets(left?: import("./LinearGenomeView").BpOffset | undefined, right?: import("./LinearGenomeView").BpOffset | undefined): void;
@@ -1552,6 +1598,7 @@ export default class LinearGenomeViewPlugin extends Plugin {
                 showCytobandsSetting: boolean;
                 trackLabels: string;
                 showGridlines: boolean;
+                highlight: (Required<import("@jbrowse/core/util").ParsedLocString> & import("mobx-state-tree").IStateTreeNode<import("mobx-state-tree").IMaybe<import("mobx-state-tree").IType<Required<import("@jbrowse/core/util").ParsedLocString>, Required<import("@jbrowse/core/util").ParsedLocString>, Required<import("@jbrowse/core/util").ParsedLocString>>>>) | undefined;
             } & import("mobx-state-tree/dist/internal").NonEmptyObject & {
                 width: number;
             } & {
@@ -1616,6 +1663,7 @@ export default class LinearGenomeViewPlugin extends Plugin {
                 setHideHeaderOverview(b: boolean): void;
                 setHideNoTracksActive(b: boolean): void;
                 setShowGridlines(b: boolean): void;
+                setHighlight(highlight: Required<import("@jbrowse/core/util").ParsedLocString> | undefined): void;
                 scrollTo(offsetPx: number): number;
                 zoomTo(bpPerPx: number, offset?: number, centerAtOffset?: boolean): number;
                 setOffsets(left?: import("./LinearGenomeView").BpOffset | undefined, right?: import("./LinearGenomeView").BpOffset | undefined): void;
@@ -1871,6 +1919,7 @@ export default class LinearGenomeViewPlugin extends Plugin {
                 showCytobandsSetting: import("mobx-state-tree").IOptionalIType<import("mobx-state-tree").ISimpleType<boolean>, [undefined]>;
                 trackLabels: import("mobx-state-tree").IOptionalIType<import("mobx-state-tree").ISimpleType<string>, [undefined]>;
                 showGridlines: import("mobx-state-tree").IType<boolean | undefined, boolean, boolean>;
+                highlight: import("mobx-state-tree").IMaybe<import("mobx-state-tree").IType<Required<import("@jbrowse/core/util").ParsedLocString>, Required<import("@jbrowse/core/util").ParsedLocString>, Required<import("@jbrowse/core/util").ParsedLocString>>>;
             }, {
                 width: number;
             } & {
@@ -1935,6 +1984,7 @@ export default class LinearGenomeViewPlugin extends Plugin {
                 setHideHeaderOverview(b: boolean): void;
                 setHideNoTracksActive(b: boolean): void;
                 setShowGridlines(b: boolean): void;
+                setHighlight(highlight: Required<import("@jbrowse/core/util").ParsedLocString> | undefined): void;
                 scrollTo(offsetPx: number): number;
                 zoomTo(bpPerPx: number, offset?: number, centerAtOffset?: boolean): number;
                 setOffsets(left?: import("./LinearGenomeView").BpOffset | undefined, right?: import("./LinearGenomeView").BpOffset | undefined): void;
@@ -2200,6 +2250,7 @@ export default class LinearGenomeViewPlugin extends Plugin {
                 showCytobandsSetting: boolean;
                 trackLabels: string;
                 showGridlines: boolean;
+                highlight: (Required<import("@jbrowse/core/util").ParsedLocString> & import("mobx-state-tree").IStateTreeNode<import("mobx-state-tree").IMaybe<import("mobx-state-tree").IType<Required<import("@jbrowse/core/util").ParsedLocString>, Required<import("@jbrowse/core/util").ParsedLocString>, Required<import("@jbrowse/core/util").ParsedLocString>>>>) | undefined;
             } & import("mobx-state-tree/dist/internal").NonEmptyObject & {
                 width: number;
             } & {
@@ -2264,6 +2315,7 @@ export default class LinearGenomeViewPlugin extends Plugin {
                 setHideHeaderOverview(b: boolean): void;
                 setHideNoTracksActive(b: boolean): void;
                 setShowGridlines(b: boolean): void;
+                setHighlight(highlight: Required<import("@jbrowse/core/util").ParsedLocString> | undefined): void;
                 scrollTo(offsetPx: number): number;
                 zoomTo(bpPerPx: number, offset?: number, centerAtOffset?: boolean): number;
                 setOffsets(left?: import("./LinearGenomeView").BpOffset | undefined, right?: import("./LinearGenomeView").BpOffset | undefined): void;
@@ -2519,6 +2571,7 @@ export default class LinearGenomeViewPlugin extends Plugin {
                 showCytobandsSetting: import("mobx-state-tree").IOptionalIType<import("mobx-state-tree").ISimpleType<boolean>, [undefined]>;
                 trackLabels: import("mobx-state-tree").IOptionalIType<import("mobx-state-tree").ISimpleType<string>, [undefined]>;
                 showGridlines: import("mobx-state-tree").IType<boolean | undefined, boolean, boolean>;
+                highlight: import("mobx-state-tree").IMaybe<import("mobx-state-tree").IType<Required<import("@jbrowse/core/util").ParsedLocString>, Required<import("@jbrowse/core/util").ParsedLocString>, Required<import("@jbrowse/core/util").ParsedLocString>>>;
             }, {
                 width: number;
             } & {
@@ -2583,6 +2636,7 @@ export default class LinearGenomeViewPlugin extends Plugin {
                 setHideHeaderOverview(b: boolean): void;
                 setHideNoTracksActive(b: boolean): void;
                 setShowGridlines(b: boolean): void;
+                setHighlight(highlight: Required<import("@jbrowse/core/util").ParsedLocString> | undefined): void;
                 scrollTo(offsetPx: number): number;
                 zoomTo(bpPerPx: number, offset?: number, centerAtOffset?: boolean): number;
                 setOffsets(left?: import("./LinearGenomeView").BpOffset | undefined, right?: import("./LinearGenomeView").BpOffset | undefined): void;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@jbrowse/plugin-linear-genome-view",
-  "version": "2.10.2",
+  "version": "2.10.3",
   "description": "JBrowse 2 linear genome view",
   "keywords": [
     "jbrowse",
@@ -63,5 +63,5 @@
     "access": "public"
   },
   "module": "esm/index.js",
-  "gitHead": "7ca3b7db337ebd88853e2d96cdab940ed550c4fb"
+  "gitHead": "c8fc800cd17decd72b2e971c7a6add3b95214e72"
 }