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

package/dist/LinearGenomeView/model.js

@@ -50,6 +50,8 @@ const FolderOpen_1 = __importDefault(require("@mui/icons-material/FolderOpen"));
 const PhotoCamera_1 = __importDefault(require("@mui/icons-material/PhotoCamera"));
 const ZoomIn_1 = __importDefault(require("@mui/icons-material/ZoomIn"));
 const MenuOpen_1 = __importDefault(require("@mui/icons-material/MenuOpen"));
+const Palette_1 = __importDefault(require("@mui/icons-material/Palette"));
+const Search_1 = __importDefault(require("@mui/icons-material/Search"));
 const MiniControls_1 = __importDefault(require("./components/MiniControls"));
 const Header_1 = __importDefault(require("./components/Header"));
 const util_2 = require("./util");
@@ -126,7 +128,6 @@ function stateModelFactory(pluginManager) {
         tracks: mobx_state_tree_1.types.array(pluginManager.pluggableMstType('track', 'stateModel')),
         /**
          * #property
-         * array of currently displayed tracks state model's
          */
         hideHeader: false,
         /**
@@ -169,7 +170,12 @@ function stateModelFactory(pluginManager) {
          * #property
          * highlights on the LGV from the URL parameters
          */
-        highlight: mobx_state_tree_1.types.maybe(mobx_state_tree_1.types.frozen()),
+        highlight: mobx_state_tree_1.types.optional(mobx_state_tree_1.types.array(mobx_state_tree_1.types.frozen()), []),
+        /**
+         * #property
+         * color by CDS
+         */
+        colorByCDS: mobx_state_tree_1.types.optional(mobx_state_tree_1.types.boolean, () => Boolean(JSON.parse((0, util_1.localStorageGetItem)('lgv-colorByCDS') || 'false'))),
     }))
         .volatile(() => ({
         volatileWidth: undefined,
@@ -360,7 +366,7 @@ function stateModelFactory(pluginManager) {
             return {
                 ...(0, tracks_1.getParentRenderProps)(self),
                 bpPerPx: self.bpPerPx,
-                highResolutionScaling: (0, configuration_1.getConf)((0, util_1.getSession)(self), 'highResolutionScaling'),
+                colorByCDS: self.colorByCDS,
             };
         },
         /**
@@ -431,6 +437,12 @@ function stateModelFactory(pluginManager) {
         },
     }))
         .actions(self => ({
+        /**
+         * #action
+         */
+        setColorByCDS(flag) {
+            self.colorByCDS = flag;
+        },
         /**
          * #action
          */
@@ -473,11 +485,24 @@ 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 = (0, mobx_state_tree_1.cast)(highlight);
+        },
+        /**
+         * #action
+         */
+        removeHighlight(highlight) {
+            self.highlight.remove(highlight);
         },
         /**
          * #action
@@ -598,6 +623,47 @@ 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 = (0, mobx_state_tree_1.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 = (0, mobx_state_tree_1.cast)([
+                ...self.tracks.filter(track => track.id !== id),
+                self.tracks[idx],
+            ]);
+        },
         /**
          * #action
          */
@@ -610,9 +676,9 @@ function stateModelFactory(pluginManager) {
             if (newIndex === -1) {
                 throw new Error(`Track ID ${targetId} not found`);
             }
-            const track = (0, mobx_state_tree_1.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 = (0, mobx_state_tree_1.cast)(tracks);
         },
         /**
          * #action
@@ -803,7 +869,7 @@ function stateModelFactory(pluginManager) {
          * perform animated slide
          */
         function slide(viewWidths) {
-            const [animate, cancelAnimation] = (0, util_1.springAnimate)(self.offsetPx, self.offsetPx + self.width * viewWidths, self.scrollTo);
+            const [animate, cancelAnimation] = (0, util_1.springAnimate)(self.offsetPx, self.offsetPx + self.width * viewWidths, self.scrollTo, undefined, undefined, 200);
             cancelLastAnimation();
             cancelLastAnimation = cancelAnimation;
             animate();
@@ -890,6 +956,7 @@ function stateModelFactory(pluginManager) {
                     ? [
                         {
                             label: 'Sequence search',
+                            icon: Search_1.default,
                             onClick: () => {
                                 (0, util_1.getSession)(self).queueDialog(handleClose => [
                                     SequenceSearchDialog,
@@ -919,6 +986,13 @@ function stateModelFactory(pluginManager) {
                     icon: SyncAlt_1.default,
                     onClick: self.horizontallyFlip,
                 },
+                {
+                    label: 'Color by CDS',
+                    type: 'checkbox',
+                    checked: self.colorByCDS,
+                    icon: Palette_1.default,
+                    onClick: () => self.setColorByCDS(!self.colorByCDS),
+                },
                 {
                     label: 'Show...',
                     icon: Visibility_1.default,
@@ -1083,11 +1157,10 @@ function stateModelFactory(pluginManager) {
             }, { delay: 150 }));
             (0, mobx_state_tree_1.addDisposer)(self, (0, mobx_1.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;
+                (0, util_1.localStorageSetItem)('lgv-showCytobands', s(showCytobandsSetting));
+                (0, util_1.localStorageSetItem)('lgv-showCenterLine', s(showCenterLine));
+                (0, util_1.localStorageSetItem)('lgv-colorByCDS', s(colorByCDS));
             }));
         },
     }))
@@ -1271,8 +1344,9 @@ 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
@@ -1330,7 +1404,19 @@ 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,
+        };
+    });
 }
 exports.stateModelFactory = stateModelFactory;
 var LinearGenomeView_1 = require("./components/LinearGenomeView");

package/dist/LinearGenomeView/svgcomponents/SVGHeader.js

@@ -47,7 +47,7 @@ function SVGHeader({ model, fontSize, cytobandHeight, rulerHeight, }) {
         react_1.default.createElement("text", { x: 0, y: 0, dominantBaseline: "hanging", fontSize: fontSize, fill: c }, assemblyName),
         showCytobands ? (react_1.default.createElement("g", { transform: `translate(0 ${rulerHeight})` },
             react_1.default.createElement(Cytobands_1.default, { overview: overview, assembly: assembly, block: block }),
-            react_1.default.createElement("rect", { stroke: "red", fill: "rgb(255,0,0,0.1)", width: Math.max(lastOverviewPx - firstOverviewPx, 0.5), height: __1.HEADER_OVERVIEW_HEIGHT - 1, x: firstOverviewPx, y: 0.5 }),
+            react_1.default.createElement("rect", { stroke: "red", fill: "rgb(255,0,0)", fillOpacity: 0.1, width: Math.max(lastOverviewPx - firstOverviewPx, 0.5), height: __1.HEADER_OVERVIEW_HEIGHT - 1, x: firstOverviewPx, y: 0.5 }),
             react_1.default.createElement("g", { transform: `translate(0,${__1.HEADER_OVERVIEW_HEIGHT})` },
                 react_1.default.createElement(OverviewScalebarPolygon_1.default, { overview: overview, model: model, useOffset: false })))) : null,
         react_1.default.createElement("g", { transform: `translate(0 ${fontSize + y})` },

package/dist/LinearGenomeView/svgcomponents/SVGLinearGenomeView.js

@@ -19,7 +19,7 @@ const util_2 = require("./util");
 // render LGV to SVG
 async function renderToSvg(model, opts) {
     await (0, mobx_1.when)(() => model.initialized);
-    const { textHeight = 18, headerHeight = 40, rulerHeight = 50, fontSize = 13, cytobandHeight = 100, trackLabels = 'offset', themeName = 'default', Wrapper = ({ children }) => react_1.default.createElement(react_1.default.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 = (0, util_1.getSession)(model);
     const { allThemes } = session;
     // eslint-disable-next-line @typescript-eslint/no-explicit-any

package/dist/LinearGenomeView/svgcomponents/SVGTrackLabel.js

@@ -8,7 +8,7 @@ const material_1 = require("@mui/material");
 const util_1 = require("@jbrowse/core/util");
 function SVGTrackLabel({ trackLabels, trackName, fontSize, trackLabelOffset, x, }) {
     const theme = (0, material_1.useTheme)();
-    const fill = theme.palette.text.primary;
+    const fill = (0, util_1.stripAlpha)(theme.palette.text.primary);
     const xoff = trackLabels === 'overlay' ? 5 : 0;
     const yoff = trackLabels === 'offset' ? 5 : 0;
     const name = (0, util_1.coarseStripHTML)(trackName);