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

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,
         /**
@@ -136,6 +137,16 @@ export function stateModelFactory(pluginManager) {
          * show the "gridlines" in the track area
          */
         showGridlines: true,
+        /**
+         * #property
+         * highlights on the LGV from the URL parameters
+         */
+        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,
@@ -326,7 +337,7 @@ export function stateModelFactory(pluginManager) {
             return {
                 ...getParentRenderProps(self),
                 bpPerPx: self.bpPerPx,
-                highResolutionScaling: getConf(getSession(self), 'highResolutionScaling'),
+                colorByCDS: self.colorByCDS,
             };
         },
         /**
@@ -397,6 +408,12 @@ export function stateModelFactory(pluginManager) {
         },
     }))
         .actions(self => ({
+        /**
+         * #action
+         */
+        setColorByCDS(flag) {
+            self.colorByCDS = flag;
+        },
         /**
          * #action
          */
@@ -439,6 +456,25 @@ 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 = cast(highlight);
+        },
+        /**
+         * #action
+         */
+        removeHighlight(highlight) {
+            self.highlight.remove(highlight);
+        },
         /**
          * #action
          */
@@ -558,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
          */
@@ -570,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
@@ -763,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();
@@ -850,6 +927,7 @@ export function stateModelFactory(pluginManager) {
                     ? [
                         {
                             label: 'Sequence search',
+                            icon: SearchIcon,
                             onClick: () => {
                                 getSession(self).queueDialog(handleClose => [
                                     SequenceSearchDialog,
@@ -879,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,
@@ -1043,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));
             }));
         },
     }))
@@ -1231,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
@@ -1290,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

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;
 }[]>;
 /**