@jbrowse/plugin-alignments 2.16.1 → 2.18.0

package/esm/LinearReadCloudDisplay/model.d.ts

@@ -1,16 +1,8 @@
-import React from 'react';
-import { Instance } from 'mobx-state-tree';
-import { AnyConfigurationSchemaType } from '@jbrowse/core/configuration';
-import { IFilter } from '../shared';
-import { ChainData } from '../shared/fetchChains';
-/**
- * #stateModel LinearReadCloudDisplay
- * it is not a block based track, hence not BaseLinearDisplay
- * extends
- * - [BaseDisplay](../basedisplay)
- * - [TrackHeightMixin](../trackheightmixin)
- * - [FeatureDensityMixin](../featuredensitymixin)
- */
+import type React from 'react';
+import type { ChainData } from '../shared/fetchChains';
+import type { ColorBy, FilterBy } from '../shared/types';
+import type { AnyConfigurationSchemaType } from '@jbrowse/core/configuration';
+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>;
@@ -23,20 +15,8 @@ declare function stateModelFactory(configSchema: AnyConfigurationSchemaType): im
 } & {
     type: import("mobx-state-tree").ISimpleType<"LinearReadCloudDisplay">;
     configuration: AnyConfigurationSchemaType;
-    filterBy: import("mobx-state-tree").IOptionalIType<import("mobx-state-tree").IModelType<{
-        flagInclude: import("mobx-state-tree").IOptionalIType<import("mobx-state-tree").ISimpleType<number>, [undefined]>;
-        flagExclude: import("mobx-state-tree").IOptionalIType<import("mobx-state-tree").ISimpleType<number>, [undefined]>;
-        readName: import("mobx-state-tree").IMaybe<import("mobx-state-tree").ISimpleType<string>>;
-        tagFilter: import("mobx-state-tree").IMaybe<import("mobx-state-tree").IModelType<{
-            tag: import("mobx-state-tree").ISimpleType<string>;
-            value: import("mobx-state-tree").IMaybe<import("mobx-state-tree").ISimpleType<string>>;
-        }, {}, import("mobx-state-tree")._NotCustomized, import("mobx-state-tree")._NotCustomized>>;
-    }, {}, import("mobx-state-tree")._NotCustomized, import("mobx-state-tree")._NotCustomized>, [undefined]>;
-    colorBy: import("mobx-state-tree").IMaybe<import("mobx-state-tree").IModelType<{
-        type: import("mobx-state-tree").ISimpleType<string>;
-        tag: import("mobx-state-tree").IMaybe<import("mobx-state-tree").ISimpleType<string>>;
-        extra: import("mobx-state-tree").IType<any, any, any>;
-    }, {}, import("mobx-state-tree")._NotCustomized, import("mobx-state-tree")._NotCustomized>>;
+    filterBySetting: import("mobx-state-tree").IType<FilterBy | undefined, FilterBy | undefined, FilterBy | undefined>;
+    colorBySetting: import("mobx-state-tree").IType<ColorBy | undefined, ColorBy | undefined, ColorBy | undefined>;
     drawSingletons: import("mobx-state-tree").IType<boolean | undefined, boolean, boolean>;
 }, {
     rendererTypeName: string;
@@ -55,9 +35,7 @@ declare function stateModelFactory(configSchema: AnyConfigurationSchemaType): im
         } & import("mobx-state-tree").IStateTreeNode<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" /**
-             * #property
-             */).IMaybe<import("mobx-state-tree").ISimpleType<string>>;
+            rpcDriverName: import("mobx-state-tree").IMaybe<import("mobx-state-tree").ISimpleType<string>>;
         }, {
             rendererTypeName: string;
             error: unknown;
@@ -129,6 +107,7 @@ declare function stateModelFactory(configSchema: AnyConfigurationSchemaType): im
     readonly regionTooLarge: boolean;
     readonly regionTooLargeReason: string;
 } & {
+    readonly statsReadyAndRegionNotTooLarge: boolean;
     regionCannotBeRenderedText(_region: import("@jbrowse/core/util").Region): "" | "Force load to see features";
     regionCannotBeRendered(_region: import("@jbrowse/core/util").Region): React.JSX.Element | null;
 } & {
@@ -138,50 +117,24 @@ declare function stateModelFactory(configSchema: AnyConfigurationSchemaType): im
     lastDrawnBpPerPx: number;
     ref: HTMLCanvasElement | null;
 } & {
-    /**
-     * #action
-     */
+    readonly colorBy: any;
+    readonly filterBy: any;
+} & {
     setDrawSingletons(f: boolean): void;
-    /**
-     * #action
-     */
     setLastDrawnOffsetPx(n: number): void;
-    /**
-     * #action
-     */
     setLastDrawnBpPerPx(n: number): void;
-    /**
-     * #action
-     */
     setLoading(f: boolean): void;
-    /**
-     * #action
-     */
     reload(): void;
-    /**
-     * #action
-     * internal, a reference to a HTMLCanvas because we use a autorun to draw
-     * the canvas
-     */
     setRef(ref: HTMLCanvasElement | null): void;
-    setColorScheme(s: {
+    setColorScheme(colorBy: {
         type: string;
     }): void;
-    /**
-     * #action
-     */
     setChainData(args: ChainData): void;
-    /**
-     * #action
-     */
-    setFilterBy(filter: IFilter): void;
+    setFilterBy(filter: FilterBy): void;
 } & {
     readonly drawn: boolean;
 } & {
     renderProps(): any;
-    /**
-     * #method
-     */
     trackMenuItems(): (import("@jbrowse/core/ui").MenuDivider | import("@jbrowse/core/ui").MenuSubHeader | import("@jbrowse/core/ui").NormalMenuItem | import("@jbrowse/core/ui").CheckboxMenuItem | import("@jbrowse/core/ui").RadioMenuItem | import("@jbrowse/core/ui").SubMenuItem | {
         label: string;
         type: string;
@@ -211,9 +164,6 @@ declare function stateModelFactory(configSchema: AnyConfigurationSchemaType): im
         checked?: undefined;
         onClick?: undefined;
     })[];
-    /**
-     * #method
-     */
     renderSvg(opts: {
         rasterizeLayers?: boolean;
     }): Promise<React.ReactNode>;

package/esm/LinearReadCloudDisplay/model.js

@@ -1,50 +1,19 @@
 import { lazy } from 'react';
-import { cast, types } from 'mobx-state-tree';
+import { ConfigurationReference, getConf } from '@jbrowse/core/configuration';
 import { BaseDisplay } from '@jbrowse/core/pluggableElementTypes';
-import { ConfigurationReference, } from '@jbrowse/core/configuration';
 import { getSession } from '@jbrowse/core/util';
 import { FeatureDensityMixin, TrackHeightMixin, } from '@jbrowse/plugin-linear-genome-view';
-// icons
-import PaletteIcon from '@mui/icons-material/Palette';
 import FilterListIcon from '@mui/icons-material/ClearAll';
-// locals
-import { FilterModel } from '../shared';
-// async
-const FilterByTagDialog = lazy(() => import('../shared/FilterByTagDialog'));
-/**
- * #stateModel LinearReadCloudDisplay
- * it is not a block based track, hence not BaseLinearDisplay
- * extends
- * - [BaseDisplay](../basedisplay)
- * - [TrackHeightMixin](../trackheightmixin)
- * - [FeatureDensityMixin](../featuredensitymixin)
- */
+import PaletteIcon from '@mui/icons-material/Palette';
+import { types } from 'mobx-state-tree';
+const FilterByTagDialog = lazy(() => import('../shared/components/FilterByTagDialog'));
 function stateModelFactory(configSchema) {
     return types
         .compose('LinearReadCloudDisplay', BaseDisplay, TrackHeightMixin(), FeatureDensityMixin(), types.model({
-        /**
-         * #property
-         */
         type: types.literal('LinearReadCloudDisplay'),
-        /**
-         * #property
-         */
         configuration: ConfigurationReference(configSchema),
-        /**
-         * #property
-         */
-        filterBy: types.optional(FilterModel, {}),
-        /**
-         * #property
-         */
-        colorBy: types.maybe(types.model({
-            type: types.string,
-            tag: types.maybe(types.string),
-            extra: types.frozen(),
-        })),
-        /**
-         * #property
-         */
+        filterBySetting: types.frozen(),
+        colorBySetting: types.frozen(),
         drawSingletons: true,
     }))
         .volatile(() => ({
@@ -53,60 +22,48 @@ function stateModelFactory(configSchema) {
         lastDrawnOffsetPx: undefined,
         lastDrawnBpPerPx: 0,
         ref: null,
+    }))
+        .views(self => ({
+        get colorBy() {
+            var _a;
+            return (_a = self.colorBySetting) !== null && _a !== void 0 ? _a : getConf(self, 'colorBy');
+        },
+        get filterBy() {
+            var _a;
+            return (_a = self.filterBySetting) !== null && _a !== void 0 ? _a : getConf(self, 'filterBy');
+        },
     }))
         .actions(self => ({
-        /**
-         * #action
-         */
         setDrawSingletons(f) {
             self.drawSingletons = f;
         },
-        /**
-         * #action
-         */
         setLastDrawnOffsetPx(n) {
             self.lastDrawnOffsetPx = n;
         },
-        /**
-         * #action
-         */
         setLastDrawnBpPerPx(n) {
             self.lastDrawnBpPerPx = n;
         },
-        /**
-         * #action
-         */
         setLoading(f) {
             self.loading = f;
         },
-        /**
-         * #action
-         */
         reload() {
             self.error = undefined;
         },
-        /**
-         * #action
-         * internal, a reference to a HTMLCanvas because we use a autorun to draw
-         * the canvas
-         */
         setRef(ref) {
             self.ref = ref;
         },
-        setColorScheme(s) {
-            self.colorBy = cast(s);
+        setColorScheme(colorBy) {
+            self.colorBySetting = {
+                ...colorBy,
+            };
         },
-        /**
-         * #action
-         */
         setChainData(args) {
             self.chainData = args;
         },
-        /**
-         * #action
-         */
         setFilterBy(filter) {
-            self.filterBy = cast(filter);
+            self.filterBySetting = {
+                ...filter,
+            };
         },
     }))
         .views(self => ({
@@ -117,17 +74,12 @@ function stateModelFactory(configSchema) {
         .views(self => {
         const { trackMenuItems: superTrackMenuItems, renderProps: superRenderProps, } = self;
         return {
-            // we don't use a server side renderer, so this fills in minimal
-            // info so as not to crash
             renderProps() {
                 return {
                     ...superRenderProps(),
                     notReady: !self.chainData,
                 };
             },
-            /**
-             * #method
-             */
             trackMenuItems() {
                 return [
                     ...superTrackMenuItems(),
@@ -181,11 +133,8 @@ function stateModelFactory(configSchema) {
                     },
                 ];
             },
-            /**
-             * #method
-             */
             async renderSvg(opts) {
-                const { renderSvg } = await import('../shared/renderSvg');
+                const { renderSvg } = await import('../shared/renderSvgUtil');
                 const { drawFeats } = await import('./drawFeats');
                 return renderSvg(self, opts, drawFeats);
             },
@@ -193,7 +142,6 @@ function stateModelFactory(configSchema) {
     })
         .actions(self => ({
         afterAttach() {
-            // eslint-disable-next-line @typescript-eslint/no-floating-promises
             ;
             (async () => {
                 try {

package/esm/LinearReadCloudDisplay/util.js

@@ -1,4 +1,3 @@
-// avoid drawing negative width features for SVG exports
 export function fillRectCtx(x, y, width, height, ctx, fillColor) {
     if (width < 0) {
         x += width;

package/esm/LinearSNPCoverageDisplay/components/Tooltip.d.ts

@@ -1,5 +1,5 @@
 import React from 'react';
-import { Feature } from '@jbrowse/core/util';
+import type { Feature } from '@jbrowse/core/util';
 type Coord = [number, number];
 declare const SNPCoverageTooltip: (props: {
     model: {

package/esm/LinearSNPCoverageDisplay/components/Tooltip.js

@@ -1,14 +1,22 @@
 import React from 'react';
-import { observer } from 'mobx-react';
 import { toLocale } from '@jbrowse/core/util';
 import { Tooltip } from '@jbrowse/plugin-wiggle';
+import { observer } from 'mobx-react';
+import { makeStyles } from 'tss-react/mui';
+const useStyles = makeStyles()(() => ({
+    td: {
+        whiteSpace: 'nowrap',
+    },
+}));
 const toP = (s = 0) => +(+s).toFixed(1);
-const pct = (n, total) => `${toP((n / (total || 1)) * 100)}%`;
-const TooltipContents = React.forwardRef(function TooltipContents2({ feature }, reactRef) {
-    const start = feature.get('start');
+const pct = (n, total = 1) => `${toP((n / (total || 1)) * 100)}%`;
+const TooltipContents = React.forwardRef(function TooltipContents2(props, reactRef) {
+    const { feature, model } = props;
+    const { classes } = useStyles();
+    const start = feature.get('start') + 1;
     const end = feature.get('end');
     const name = feature.get('refName');
-    const { refbase, all, total, ref, '-1': rn1, '1': r1, '0': r0, ...info } = feature.get('snpinfo');
+    const { refbase, readsCounted, depth, ref, ...info } = feature.get('snpinfo');
     const loc = [
         name,
         start === end ? toLocale(start) : `${toLocale(start)}..${toLocale(end)}`,
@@ -20,36 +28,58 @@ const TooltipContents = React.forwardRef(function TooltipContents2({ feature },
             React.createElement("caption", null, loc),
             React.createElement("thead", null,
                 React.createElement("tr", null,
+                    React.createElement("th", null),
                     React.createElement("th", null, "Base"),
                     React.createElement("th", null, "Count"),
                     React.createElement("th", null, "% of Total"),
-                    React.createElement("th", null, "Strands"),
-                    React.createElement("th", null, "Source"))),
+                    React.createElement("th", null, "Strands"))),
             React.createElement("tbody", null,
                 React.createElement("tr", null,
+                    React.createElement("td", null),
                     React.createElement("td", null, "Total"),
-                    React.createElement("td", null, all)),
+                    React.createElement("td", null, readsCounted),
+                    React.createElement("td", null, " "),
+                    React.createElement("td", null, " ")),
                 React.createElement("tr", null,
+                    React.createElement("td", null),
                     React.createElement("td", null,
                         "REF ",
                         refbase ? `(${refbase.toUpperCase()})` : ''),
-                    React.createElement("td", null, ref),
-                    React.createElement("td", null, pct(ref, all)),
+                    React.createElement("td", null, ref.entryDepth),
+                    React.createElement("td", null, pct(ref.entryDepth, readsCounted)),
+                    React.createElement("td", null,
+                        ref['-1'] ? `${ref['-1']}(-)` : '',
+                        ref['1'] ? `${ref['1']}(+)` : '')),
+                Object.entries(info).map(([key, entry]) => Object.entries(entry).map(([base, score]) => (React.createElement("tr", { key: `${key}_${base}` },
+                    React.createElement("td", null,
+                        React.createElement(ColorSquare, { model: model, base: base })),
                     React.createElement("td", null,
-                        rn1 ? `${rn1}(-)` : '',
-                        r1 ? `${r1}(+)` : ''),
-                    React.createElement("td", null)),
-                Object.entries(info).map(([key, entry]) => Object.entries(entry).map(([base, score]) => (React.createElement("tr", { key: base },
-                    React.createElement("td", null, base.toUpperCase()),
-                    React.createElement("td", null, score.total),
-                    React.createElement("td", null, base === 'total' || base === 'skip'
+                        base.toUpperCase(),
+                        " "),
+                    React.createElement("td", { className: classes.td }, [
+                        score.entryDepth,
+                        score.avgProbability !== undefined
+                            ? `(avg. ${pct(score.avgProbability)} prob.)`
+                            : '',
+                    ]
+                        .filter(f => !!f)
+                        .join(' ')),
+                    React.createElement("td", null, base === 'depth' || base === 'skip'
                         ? '---'
-                        : pct(score.total, all)),
+                        : pct(score.entryDepth, readsCounted)),
                     React.createElement("td", null,
                         score['-1'] ? `${score['-1']}(-)` : '',
-                        score['1'] ? `${score['1']}(+)` : ''),
-                    React.createElement("td", null, key)))))))));
+                        score['1'] ? `${score['1']}(+)` : '')))))))));
 });
+function ColorSquare({ base, model, }) {
+    var _a;
+    const { visibleModifications } = model;
+    return base.startsWith('mod_') ? (React.createElement("div", { style: {
+            width: 10,
+            height: 10,
+            background: (_a = visibleModifications.get(base.replace('mod_', ''))) === null || _a === void 0 ? void 0 : _a.color,
+        } })) : null;
+}
 const SNPCoverageTooltip = observer(function (props) {
     const { model } = props;
     const { featureUnderMouse: feat } = model;

package/esm/LinearSNPCoverageDisplay/{models/configSchema.d.ts → configSchema.d.ts}

@@ -1,60 +1,55 @@
-import PluginManager from '@jbrowse/core/PluginManager';
+import type PluginManager from '@jbrowse/core/PluginManager';
 export default function SNPCoverageConfigFactory(pluginManager: PluginManager): import("@jbrowse/core/configuration/configurationSchema").ConfigurationSchemaType<{
-    /**
-     * #slot
-     */
     autoscale: {
         type: string;
         defaultValue: string;
         model: import("mobx-state-tree").ISimpleType<string>;
         description: string;
     };
-    /**
-     * #slot
-     */
     minScore: {
         type: string;
         defaultValue: number;
         description: string;
     };
-    /**
-     * #slot
-     */
     maxScore: {
         type: string;
         description: string;
         defaultValue: number;
     };
-    /**
-     * #slot
-     */
     scaleType: {
         type: string;
         model: import("mobx-state-tree").ISimpleType<string>;
         description: string;
         defaultValue: string;
     };
-    /**
-     * #slot
-     */ inverted: {
+    inverted: {
         type: string;
         description: string;
         defaultValue: boolean;
     };
-    /**
-     * #slot
-     */
     multiTicks: {
         type: string;
         description: string;
         defaultValue: boolean;
     };
-    /**
-     * #slot
-     */
     renderers: import("@jbrowse/core/configuration/configurationSchema").ConfigurationSchemaType<{
         SNPCoverageRenderer: import("@jbrowse/core/configuration").AnyConfigurationSchemaType;
     }, import("@jbrowse/core/configuration/configurationSchema").ConfigurationSchemaOptions<undefined, undefined>>;
+    colorBy: {
+        type: string;
+        description: string;
+        defaultValue: {
+            type: string;
+        };
+    };
+    filterBy: {
+        type: string;
+        description: string;
+        defaultValue: {
+            flagInclude: number;
+            flagExclude: number;
+        };
+    };
 }, import("@jbrowse/core/configuration/configurationSchema").ConfigurationSchemaOptions<import("@jbrowse/core/configuration/configurationSchema").ConfigurationSchemaType<{
     maxFeatureScreenDensity: {
         type: string;

package/esm/LinearSNPCoverageDisplay/{models/configSchema.js → configSchema.js}

@@ -1,74 +1,58 @@
 import { ConfigurationSchema } from '@jbrowse/core/configuration';
 import { baseLinearDisplayConfigSchema } from '@jbrowse/plugin-linear-genome-view';
 import { types } from 'mobx-state-tree';
-/**
- * #config LinearSNPCoverageDisplay
- *
- * extends
- * - [BaseLinearDisplay](../baselineardisplay)
- */
-function x() { } // eslint-disable-line @typescript-eslint/no-unused-vars
+import { defaultFilterFlags } from '../shared/util';
+function x() { }
 export default function SNPCoverageConfigFactory(pluginManager) {
     return ConfigurationSchema('LinearSNPCoverageDisplay', {
-        /**
-         * #slot
-         */
         autoscale: {
             type: 'stringEnum',
             defaultValue: 'local',
             model: types.enumeration('Autoscale type', ['local']),
             description: 'performs local autoscaling (no other options for SNP Coverage available)',
         },
-        /**
-         * #slot
-         */
         minScore: {
             type: 'number',
             defaultValue: Number.MIN_VALUE,
             description: 'minimum value for the y-scale',
         },
-        /**
-         * #slot
-         */
         maxScore: {
             type: 'number',
             description: 'maximum value for the y-scale',
             defaultValue: Number.MAX_VALUE,
         },
-        /**
-         * #slot
-         */
         scaleType: {
             type: 'stringEnum',
-            model: types.enumeration('Scale type', ['linear', 'log']), // todo zscale
+            model: types.enumeration('Scale type', ['linear', 'log']),
             description: 'The type of scale to use',
             defaultValue: 'linear',
         },
-        /**
-         * #slot
-         */ inverted: {
+        inverted: {
             type: 'boolean',
             description: 'draw upside down',
             defaultValue: false,
         },
-        /**
-         * #slot
-         */
         multiTicks: {
             type: 'boolean',
             description: 'Display multiple values for the ticks',
             defaultValue: false,
         },
-        /**
-         * #slot
-         */
         renderers: ConfigurationSchema('RenderersConfiguration', {
             SNPCoverageRenderer: pluginManager.getRendererType('SNPCoverageRenderer').configSchema,
         }),
+        colorBy: {
+            type: 'frozen',
+            description: 'color scheme to use',
+            defaultValue: {
+                type: 'normal',
+            },
+        },
+        filterBy: {
+            type: 'frozen',
+            description: 'default filters to use',
+            defaultValue: defaultFilterFlags,
+        },
     }, {
-        /**
-         * #baseConfiguration
-         */
         baseConfiguration: baseLinearDisplayConfigSchema,
         explicitlyTyped: true,
     });

package/esm/LinearSNPCoverageDisplay/index.d.ts

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

package/esm/LinearSNPCoverageDisplay/index.js

@@ -1,7 +1,7 @@
-import configSchemaFactory from './models/configSchema';
-import modelFactory from './models/model';
-import { LinearWiggleDisplayReactComponent } from '@jbrowse/plugin-wiggle';
 import DisplayType from '@jbrowse/core/pluggableElementTypes/DisplayType';
+import { LinearWiggleDisplayReactComponent } from '@jbrowse/plugin-wiggle';
+import configSchemaFactory from './configSchema';
+import modelFactory from './model';
 export default function register(pluginManager) {
     pluginManager.addDisplayType(() => {
         const configSchema = configSchemaFactory(pluginManager);