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

package/esm/LinearGenomeView/model.d.ts

@@ -81,7 +81,8 @@ 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>>>;
+    highlight: import("mobx-state-tree").IOptionalIType<import("mobx-state-tree").IArrayType<import("mobx-state-tree").IType<Required<ParsedLocString>, Required<ParsedLocString>, Required<ParsedLocString>>>, [undefined]>;
+    colorByCDS: import("mobx-state-tree").IOptionalIType<import("mobx-state-tree").ISimpleType<boolean>, [undefined]>;
 }, {
     width: number;
 } & {
@@ -224,6 +225,10 @@ export declare function stateModelFactory(pluginManager: PluginManager): import(
      */
     readonly trackTypeActions: Map<string, MenuItem[]>;
 } & {
+    /**
+     * #action
+     */
+    setColorByCDS(flag: boolean): void;
     /**
      * #action
      */
@@ -255,7 +260,15 @@ export declare function stateModelFactory(pluginManager: PluginManager): import(
     /**
      * #action
      */
-    setHighlight(highlight: Required<ParsedLocString> | undefined): void;
+    addToHighlights(highlight: Required<ParsedLocString>): void;
+    /**
+     * #action
+     */
+    setHighlight(highlight: Required<ParsedLocString>[] | undefined): void;
+    /**
+     * #action
+     */
+    removeHighlight(highlight: Required<ParsedLocString>): void;
     /**
      * #action
      */
@@ -292,6 +305,22 @@ export declare function stateModelFactory(pluginManager: PluginManager): import(
      */
     hideTrack(trackId: string): number;
 } & {
+    /**
+     * #action
+     */
+    moveTrackDown(id: string): void;
+    /**
+     * #action
+     */
+    moveTrackUp(id: string): void;
+    /**
+     * #action
+     */
+    moveTrackToTop(id: string): void;
+    /**
+     * #action
+     */
+    moveTrackToBottom(id: string): void;
     /**
      * #action
      */
@@ -528,20 +557,21 @@ export declare function stateModelFactory(pluginManager: PluginManager): import(
     bpToPx({ refName, coord, regionNumber, }: {
         refName: string;
         coord: number;
-        regionNumber?: number | undefined;
+        regionNumber?: number;
     }): {
         index: number;
         offsetPx: number;
     } | undefined;
     /**
      * #method
-     * scrolls the view to center on the given bp. if that is not in any
-     * of the displayed regions, does nothing
+     * scrolls the view to center on the given bp. if that is not in any of
+     * the displayed regions, does nothing
+     *
      * @param coord - basepair at which you want to center the view
      * @param refName - refName of the displayedRegion you are centering at
      * @param regionNumber - index of the displayedRegion
      */
-    centerAt(coord: number, refName: string, regionNumber: number): void;
+    centerAt(coord: number, refName: string, regionNumber?: number): void;
     /**
      * #method
      */
@@ -572,7 +602,37 @@ export declare function stateModelFactory(pluginManager: PluginManager): import(
     } | undefined;
 } & {
     afterCreate(): void;
-}, import("mobx-state-tree")._NotCustomized, import("mobx-state-tree")._NotCustomized>;
+}, import("mobx-state-tree").ModelCreationType<import("mobx-state-tree/dist/internal").ExtractCFromProps<{
+    id: import("mobx-state-tree").IOptionalIType<import("mobx-state-tree").ISimpleType<string>, [undefined]>;
+    displayName: import("mobx-state-tree").IMaybe<import("mobx-state-tree").ISimpleType<string>>;
+    minimized: import("mobx-state-tree").IType<boolean | undefined, boolean, boolean>;
+} & {
+    id: import("mobx-state-tree").IOptionalIType<import("mobx-state-tree").ISimpleType<string>, [undefined]>;
+    type: import("mobx-state-tree").IType<string | undefined, string, string>;
+    offsetPx: import("mobx-state-tree").IType<number | undefined, number, number>;
+    bpPerPx: import("mobx-state-tree").IType<number | undefined, number, number>;
+    displayedRegions: import("mobx-state-tree").IArrayType<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>>;
+    tracks: import("mobx-state-tree").IArrayType<import("mobx-state-tree").IAnyType>;
+    hideHeader: import("mobx-state-tree").IType<boolean | undefined, boolean, boolean>;
+    hideHeaderOverview: import("mobx-state-tree").IType<boolean | undefined, boolean, boolean>;
+    hideNoTracksActive: import("mobx-state-tree").IType<boolean | undefined, boolean, boolean>;
+    trackSelectorType: import("mobx-state-tree").IOptionalIType<import("mobx-state-tree").ISimpleType<string>, [undefined]>;
+    showCenterLine: import("mobx-state-tree").IOptionalIType<import("mobx-state-tree").ISimpleType<boolean>, [undefined]>;
+    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").IOptionalIType<import("mobx-state-tree").IArrayType<import("mobx-state-tree").IType<Required<ParsedLocString>, Required<ParsedLocString>, Required<ParsedLocString>>>, [undefined]>;
+    colorByCDS: import("mobx-state-tree").IOptionalIType<import("mobx-state-tree").ISimpleType<boolean>, [undefined]>;
+}>>, import("mobx-state-tree")._NotCustomized>;
 export type LinearGenomeViewStateModel = ReturnType<typeof stateModelFactory>;
 export type LinearGenomeViewModel = Instance<LinearGenomeViewStateModel>;
 export { default as ReactComponent, default as LinearGenomeView, } from './components/LinearGenomeView';

package/esm/LinearGenomeView/model.js

@@ -2,7 +2,7 @@ import { lazy } from 'react';
 import { getConf } from '@jbrowse/core/configuration';
 import { BaseViewModel } from '@jbrowse/core/pluggableElementTypes/models';
 import { ElementId, Region as MUIRegion } from '@jbrowse/core/util/types/mst';
-import { assembleLocString, clamp, findLast, getContainingView, getSession, isViewContainer, isSessionModelWithWidgets, isSessionWithAddTracks, localStorageGetItem, measureText, springAnimate, sum, } from '@jbrowse/core/util';
+import { assembleLocString, clamp, findLast, getContainingView, getSession, isViewContainer, isSessionModelWithWidgets, isSessionWithAddTracks, localStorageGetItem, localStorageSetItem, measureText, springAnimate, sum, } from '@jbrowse/core/util';
 import calculateDynamicBlocks from '@jbrowse/core/util/calculateDynamicBlocks';
 import calculateStaticBlocks from '@jbrowse/core/util/calculateStaticBlocks';
 import { getParentRenderProps } from '@jbrowse/core/util/tracks';
@@ -21,6 +21,8 @@ import FolderOpenIcon from '@mui/icons-material/FolderOpen';
 import PhotoCameraIcon from '@mui/icons-material/PhotoCamera';
 import ZoomInIcon from '@mui/icons-material/ZoomIn';
 import MenuOpenIcon from '@mui/icons-material/MenuOpen';
+import PaletteIcon from '@mui/icons-material/Palette';
+import SearchIcon from '@mui/icons-material/Search';
 import MiniControls from './components/MiniControls';
 import Header from './components/Header';
 import { generateLocations, parseLocStrings } from './util';
@@ -97,7 +99,6 @@ export function stateModelFactory(pluginManager) {
         tracks: types.array(pluginManager.pluggableMstType('track', 'stateModel')),
         /**
          * #property
-         * array of currently displayed tracks state model's
          */
         hideHeader: false,
         /**
@@ -140,7 +141,12 @@ export function stateModelFactory(pluginManager) {
          * #property
          * highlights on the LGV from the URL parameters
          */
-        highlight: types.maybe(types.frozen()),
+        highlight: types.optional(types.array(types.frozen()), []),
+        /**
+         * #property
+         * color by CDS
+         */
+        colorByCDS: types.optional(types.boolean, () => Boolean(JSON.parse(localStorageGetItem('lgv-colorByCDS') || 'false'))),
     }))
         .volatile(() => ({
         volatileWidth: undefined,
@@ -331,7 +337,7 @@ export function stateModelFactory(pluginManager) {
             return {
                 ...getParentRenderProps(self),
                 bpPerPx: self.bpPerPx,
-                highResolutionScaling: getConf(getSession(self), 'highResolutionScaling'),
+                colorByCDS: self.colorByCDS,
             };
         },
         /**
@@ -402,6 +408,12 @@ export function stateModelFactory(pluginManager) {
         },
     }))
         .actions(self => ({
+        /**
+         * #action
+         */
+        setColorByCDS(flag) {
+            self.colorByCDS = flag;
+        },
         /**
          * #action
          */
@@ -444,11 +456,24 @@ export function stateModelFactory(pluginManager) {
         setShowGridlines(b) {
             self.showGridlines = b;
         },
+        /**
+         * #action
+         */
+        addToHighlights(highlight) {
+            var _a;
+            (_a = self.highlight) === null || _a === void 0 ? void 0 : _a.push(highlight);
+        },
         /**
          * #action
          */
         setHighlight(highlight) {
-            self.highlight = highlight;
+            self.highlight = cast(highlight);
+        },
+        /**
+         * #action
+         */
+        removeHighlight(highlight) {
+            self.highlight.remove(highlight);
         },
         /**
          * #action
@@ -569,6 +594,47 @@ export function stateModelFactory(pluginManager) {
         },
     }))
         .actions(self => ({
+        /**
+         * #action
+         */
+        moveTrackDown(id) {
+            const idx = self.tracks.findIndex(v => v.id === id);
+            if (idx === -1) {
+                return;
+            }
+            if (idx !== -1 && idx < self.tracks.length - 1) {
+                self.tracks.splice(idx, 2, self.tracks[idx + 1], self.tracks[idx]);
+            }
+        },
+        /**
+         * #action
+         */
+        moveTrackUp(id) {
+            const idx = self.tracks.findIndex(track => track.id === id);
+            if (idx > 0) {
+                self.tracks.splice(idx - 1, 2, self.tracks[idx], self.tracks[idx - 1]);
+            }
+        },
+        /**
+         * #action
+         */
+        moveTrackToTop(id) {
+            const idx = self.tracks.findIndex(track => track.id === id);
+            self.tracks = cast([
+                self.tracks[idx],
+                ...self.tracks.filter(track => track.id !== id),
+            ]);
+        },
+        /**
+         * #action
+         */
+        moveTrackToBottom(id) {
+            const idx = self.tracks.findIndex(track => track.id === id);
+            self.tracks = cast([
+                ...self.tracks.filter(track => track.id !== id),
+                self.tracks[idx],
+            ]);
+        },
         /**
          * #action
          */
@@ -581,9 +647,9 @@ export function stateModelFactory(pluginManager) {
             if (newIndex === -1) {
                 throw new Error(`Track ID ${targetId} not found`);
             }
-            const track = getSnapshot(self.tracks[oldIndex]);
-            self.tracks.splice(oldIndex, 1);
-            self.tracks.splice(newIndex, 0, track);
+            const tracks = self.tracks.filter((_, idx) => idx !== oldIndex);
+            tracks.splice(newIndex, 0, self.tracks[oldIndex]);
+            self.tracks = cast(tracks);
         },
         /**
          * #action
@@ -774,7 +840,7 @@ export function stateModelFactory(pluginManager) {
          * perform animated slide
          */
         function slide(viewWidths) {
-            const [animate, cancelAnimation] = springAnimate(self.offsetPx, self.offsetPx + self.width * viewWidths, self.scrollTo);
+            const [animate, cancelAnimation] = springAnimate(self.offsetPx, self.offsetPx + self.width * viewWidths, self.scrollTo, undefined, undefined, 200);
             cancelLastAnimation();
             cancelLastAnimation = cancelAnimation;
             animate();
@@ -861,6 +927,7 @@ export function stateModelFactory(pluginManager) {
                     ? [
                         {
                             label: 'Sequence search',
+                            icon: SearchIcon,
                             onClick: () => {
                                 getSession(self).queueDialog(handleClose => [
                                     SequenceSearchDialog,
@@ -890,6 +957,13 @@ export function stateModelFactory(pluginManager) {
                     icon: SyncAltIcon,
                     onClick: self.horizontallyFlip,
                 },
+                {
+                    label: 'Color by CDS',
+                    type: 'checkbox',
+                    checked: self.colorByCDS,
+                    icon: PaletteIcon,
+                    onClick: () => self.setColorByCDS(!self.colorByCDS),
+                },
                 {
                     label: 'Show...',
                     icon: VisibilityIcon,
@@ -1054,11 +1128,10 @@ export function stateModelFactory(pluginManager) {
             }, { delay: 150 }));
             addDisposer(self, autorun(() => {
                 const s = (s) => JSON.stringify(s);
-                const { showCytobandsSetting, showCenterLine } = self;
-                if (typeof localStorage !== 'undefined') {
-                    localStorage.setItem('lgv-showCytobands', s(showCytobandsSetting));
-                    localStorage.setItem('lgv-showCenterLine', s(showCenterLine));
-                }
+                const { showCytobandsSetting, showCenterLine, colorByCDS } = self;
+                localStorageSetItem('lgv-showCytobands', s(showCytobandsSetting));
+                localStorageSetItem('lgv-showCenterLine', s(showCenterLine));
+                localStorageSetItem('lgv-colorByCDS', s(colorByCDS));
             }));
         },
     }))
@@ -1242,8 +1315,9 @@ export function stateModelFactory(pluginManager) {
         },
         /**
          * #method
-         * scrolls the view to center on the given bp. if that is not in any
-         * of the displayed regions, does nothing
+         * scrolls the view to center on the given bp. if that is not in any of
+         * the displayed regions, does nothing
+         *
          * @param coord - basepair at which you want to center the view
          * @param refName - refName of the displayedRegion you are centering at
          * @param regionNumber - index of the displayedRegion
@@ -1301,7 +1375,19 @@ export function stateModelFactory(pluginManager) {
                 document.removeEventListener('keydown', handler);
             });
         },
-    }));
+    }))
+        .preProcessSnapshot(snap => {
+        if (!snap) {
+            return snap;
+        }
+        const { highlight, ...rest } = snap;
+        return {
+            highlight: Array.isArray(highlight) || highlight === undefined
+                ? highlight
+                : [highlight],
+            ...rest,
+        };
+    });
 }
 export { default as ReactComponent, default as LinearGenomeView, } from './components/LinearGenomeView';
 export { default as RefNameAutocomplete } from './components/RefNameAutocomplete';

package/esm/LinearGenomeView/svgcomponents/SVGLinearGenomeView.js

@@ -13,7 +13,7 @@ import { totalHeight } from './util';
 // render LGV to SVG
 export async function renderToSvg(model, opts) {
     await when(() => model.initialized);
-    const { textHeight = 18, headerHeight = 40, rulerHeight = 50, fontSize = 13, cytobandHeight = 100, trackLabels = 'offset', themeName = 'default', Wrapper = ({ children }) => React.createElement(React.Fragment, null, children), } = opts;
+    const { textHeight = 18, headerHeight = 40, rulerHeight = 50, fontSize = 13, cytobandHeight = 100, trackLabels = 'offset', themeName = 'default', Wrapper = ({ children }) => children, } = opts;
     const session = getSession(model);
     const { allThemes } = session;
     // eslint-disable-next-line @typescript-eslint/no-explicit-any