@jbrowse/plugin-linear-comparative-view 2.16.0 → 2.17.0

package/esm/LinearSyntenyDisplay/model.d.ts

@@ -68,9 +68,7 @@ declare function stateModelFactory(configSchema: AnyConfigurationSchemaType): im
             rendererTypeName: string;
             error: unknown;
             message: string | undefined;
-        } & import("mobx-state-tree" /**
-         * #action
-         */).IStateTreeNode<import("mobx-state-tree").IModelType<{
+        } & 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").IMaybe<import("mobx-state-tree").ISimpleType<string>>;
@@ -98,6 +96,8 @@ declare function stateModelFactory(configSchema: AnyConfigurationSchemaType): im
     features: Feature[] | undefined;
     message: string | undefined;
 } & {
+    readonly level: number;
+    readonly height: number;
     renderProps(): {
         rpcDriverName: string | undefined;
         displayModel: {
@@ -113,7 +113,12 @@ declare function stateModelFactory(configSchema: AnyConfigurationSchemaType): im
                     setSubschema(slotName: string, data: Record<string, unknown>): Record<string, unknown> | ({
                         [x: string]: any;
                     } & import("mobx-state-tree/dist/internal").NonEmptyObject & any & import("mobx-state-tree").IStateTreeNode<AnyConfigurationSchemaType>);
-                } & import("mobx-state-tree").IStateTreeNode<AnyConfigurationSchemaType>);
+                } & import("mobx-state-tree" /**
+                 * #volatile
+                 * canvas for drawing mouseover shading this is separate from the other
+                 * code for speed: don't have to redraw entire canvas to do a feature's
+                 * mouseover shading
+                 */).IStateTreeNode<AnyConfigurationSchemaType>);
             } & import("mobx-state-tree").IStateTreeNode<AnyConfigurationSchemaType>;
         } & import("mobx-state-tree/dist/internal").NonEmptyObject & {
             rendererTypeName: string;
@@ -150,9 +155,7 @@ declare function stateModelFactory(configSchema: AnyConfigurationSchemaType): im
                     rendererTypeName: string;
                     error: unknown;
                     message: string | undefined;
-                } & import("mobx-state-tree" /**
-                 * #action
-                 */).IStateTreeNode<import("mobx-state-tree").IModelType<{
+                } & 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").IMaybe<import("mobx-state-tree").ISimpleType<string>>;
@@ -261,13 +264,51 @@ declare function stateModelFactory(configSchema: AnyConfigurationSchemaType): im
 } & {
     afterAttach(): void;
 } & {
+    /**
+     * #volatile
+     * canvas used for drawing visible screen
+     */
     mainCanvas: HTMLCanvasElement | null;
+    /**
+     * #volatile
+     * canvas used for drawing click map with feature ids this renders a
+     * unique color per alignment, so that it can be re-traced after a
+     * feature click with getImageData at that pixel
+     */
     clickMapCanvas: HTMLCanvasElement | null;
+    /**
+     * #volatile
+     * canvas used for drawing click map with cigar data this can show if you
+     * are mousing over a insertion/deletion. it is similar in purpose to the
+     * clickMapRef but was not feasible to pack this into the clickMapRef
+     */
     cigarClickMapCanvas: HTMLCanvasElement | null;
+    /**
+     * #volatile
+     * canvas for drawing mouseover shading this is separate from the other
+     * code for speed: don't have to redraw entire canvas to do a feature's
+     * mouseover shading
+     */
     mouseoverCanvas: HTMLCanvasElement | null;
+    /**
+     * #volatile
+     * assigned by reaction
+     */
     featPositions: FeatPos[];
+    /**
+     * #volatile
+     * currently mouse'd over feature
+     */
     mouseoverId: string | undefined;
+    /**
+     * #volatile
+     * currently click'd over feature
+     */
     clickId: string | undefined;
+    /**
+     * #volatile
+     * currently mouseover'd CIGAR subfeature
+     */
     cigarMouseoverId: number;
 } & {
     /**
@@ -311,10 +352,6 @@ declare function stateModelFactory(configSchema: AnyConfigurationSchemaType): im
      * #getter
      */
     readonly trackIds: string[];
-    /**
-     * #getter
-     */
-    readonly height: number;
     /**
      * #getter
      */

package/esm/LinearSyntenyDisplay/model.js

@@ -1,4 +1,4 @@
-import { types, getParent } from 'mobx-state-tree';
+import { types } from 'mobx-state-tree';
 import { getConf, ConfigurationReference, } from '@jbrowse/core/configuration';
 // locals
 import baseModelFactory from '../LinearComparativeDisplay/stateModelFactory';
@@ -20,28 +20,51 @@ function stateModelFactory(configSchema) {
         configuration: ConfigurationReference(configSchema),
     }))
         .volatile(() => ({
-        // canvas used for drawing visible screen
+        /**
+         * #volatile
+         * canvas used for drawing visible screen
+         */
         mainCanvas: null,
-        // canvas used for drawing click map with feature ids
-        // this renders a unique color per alignment, so that it can be re-traced
-        // after a feature click with getImageData at that pixel
+        /**
+         * #volatile
+         * canvas used for drawing click map with feature ids this renders a
+         * unique color per alignment, so that it can be re-traced after a
+         * feature click with getImageData at that pixel
+         */
         clickMapCanvas: null,
-        // canvas used for drawing click map with cigar data
-        // this can show if you are mousing over a insertion/deletion. it is similar
-        // in purpose to the clickMapRef but was not feasible to pack this into the
-        // clickMapRef
+        /**
+         * #volatile
+         * canvas used for drawing click map with cigar data this can show if you
+         * are mousing over a insertion/deletion. it is similar in purpose to the
+         * clickMapRef but was not feasible to pack this into the clickMapRef
+         */
         cigarClickMapCanvas: null,
-        // canvas for drawing mouseover shading
-        // this is separate from the other code for speed: don't have to redraw
-        // entire canvas to do a feature's mouseover shading
+        /**
+         * #volatile
+         * canvas for drawing mouseover shading this is separate from the other
+         * code for speed: don't have to redraw entire canvas to do a feature's
+         * mouseover shading
+         */
         mouseoverCanvas: null,
-        // assigned by reaction
+        /**
+         * #volatile
+         * assigned by reaction
+         */
         featPositions: [],
-        // currently mouse'd over feature
+        /**
+         * #volatile
+         * currently mouse'd over feature
+         */
         mouseoverId: undefined,
-        // currently click'd over feature
+        /**
+         * #volatile
+         * currently click'd over feature
+         */
         clickId: undefined,
-        // currently mouseover'd CIGAR subfeature
+        /**
+         * #volatile
+         * currently mouseover'd CIGAR subfeature
+         */
         cigarMouseoverId: -1,
     }))
         .actions(self => ({
@@ -111,13 +134,6 @@ function stateModelFactory(configSchema) {
         get trackIds() {
             return getConf(self, 'trackIds');
         },
-        /**
-         * #getter
-         */
-        get height() {
-            // @ts-expect-error
-            return getParent(self, 4).height;
-        },
         /**
          * #getter
          */

package/esm/SyntenyFeatureDetail/SyntenyFeatureDetail.d.ts

@@ -0,0 +1,14 @@
+import React from 'react';
+import { SimpleFeatureSerialized } from '@jbrowse/core/util';
+interface SyntenyFeatureDetailModel {
+    trackId: string;
+    featureData: SimpleFeatureSerialized;
+    level?: number;
+    view: {
+        type: string;
+    };
+}
+declare const SyntenyFeatureDetail: ({ model, }: {
+    model: SyntenyFeatureDetailModel;
+}) => React.JSX.Element;
+export default SyntenyFeatureDetail;

package/esm/SyntenyFeatureDetail/SyntenyFeatureDetail.js

@@ -0,0 +1,72 @@
+import React, { lazy } from 'react';
+import { Link, Paper } from '@mui/material';
+import { observer } from 'mobx-react';
+// locals
+import BaseCard from '@jbrowse/core/BaseFeatureWidget/BaseFeatureDetail/BaseCard';
+import BaseFeatureDetail from '@jbrowse/core/BaseFeatureWidget/BaseFeatureDetail';
+import { assembleLocString, getSession, SimpleFeature, } from '@jbrowse/core/util';
+// lazies
+const LaunchSyntenyViewDialog = lazy(() => import('../LGVSyntenyDisplay/components/LaunchSyntenyViewDialog'));
+const CustomLinker = observer(function ({ model, }) {
+    const { featureData, view, level, trackId } = model;
+    return (React.createElement("ul", null,
+        view.type === 'LinearSyntenyView' ? (React.createElement("li", null,
+            React.createElement(Link, { href: "#", onClick: event => {
+                    var _a, _b;
+                    event.preventDefault();
+                    const { views } = view;
+                    if (level !== undefined) {
+                        // level is "pre-known", and stored in the SyntenyFeatureWidget
+                        // model state e.g. when clicking on a feature from a
+                        // LinearSyntenyRendering
+                        (_a = views[level]) === null || _a === void 0 ? void 0 : _a.navTo(featureData);
+                        (_b = views[level + 1]) === null || _b === void 0 ? void 0 : _b.navTo(featureData.mate);
+                    }
+                    else {
+                        // best effort to find the right level. this is triggered for
+                        // example if a user clicks on a feature in a LGVSyntenyDisplay
+                        // in an existing LinearSyntenyView, there is no real proper
+                        // level "pre-known" to this situation
+                        const f1 = featureData;
+                        const f2 = featureData.mate;
+                        const r1 = f1.assemblyName;
+                        const r2 = f2.assemblyName;
+                        const v1 = views.find(view => view.assemblyNames[0] === r1);
+                        const v2 = views.find(view => view.assemblyNames[0] === r2);
+                        if (!v1 || !v2) {
+                            getSession(model).notify([
+                                v1
+                                    ? `Unable to find ${assembleLocString(f1)} in synteny view`
+                                    : '',
+                                v2
+                                    ? `Unable to find ${assembleLocString(f2)} in synteny view`
+                                    : '',
+                            ].join(' ... '));
+                        }
+                        v1 === null || v1 === void 0 ? void 0 : v1.navTo(f1);
+                        v2 === null || v2 === void 0 ? void 0 : v2.navTo(f2);
+                    }
+                } }, "Center view on this feature"))) : null,
+        React.createElement("li", null,
+            React.createElement(Link, { href: "#", onClick: event => {
+                    event.preventDefault();
+                    const session = getSession(model);
+                    const feature = new SimpleFeature(featureData);
+                    session.queueDialog(handleClose => [
+                        LaunchSyntenyViewDialog,
+                        {
+                            model,
+                            feature,
+                            trackId,
+                            handleClose,
+                        },
+                    ]);
+                } }, "Launch new linear synteny view on this feature"))));
+});
+const SyntenyFeatureDetail = observer(function ({ model, }) {
+    return (React.createElement(Paper, { "data-testid": "alignment-side-drawer" },
+        React.createElement(BaseFeatureDetail, { title: "Feature", model: model }),
+        React.createElement(BaseCard, { title: "Link to view" },
+            React.createElement(CustomLinker, { model: model }))));
+});
+export default SyntenyFeatureDetail;

package/esm/SyntenyFeatureDetail/index.d.ts

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

package/esm/SyntenyFeatureDetail/index.js

@@ -0,0 +1,27 @@
+import { lazy } from 'react';
+import { ConfigurationSchema } from '@jbrowse/core/configuration';
+import WidgetType from '@jbrowse/core/pluggableElementTypes/WidgetType';
+import { types } from 'mobx-state-tree';
+import { stateModelFactory as BaseFeatureWidgetStateModelF } from '@jbrowse/core/BaseFeatureWidget';
+const configSchema = ConfigurationSchema('SyntenyFeatureWidget', {});
+function stateModelF(pluginManager) {
+    return types.compose(BaseFeatureWidgetStateModelF(pluginManager), types.model('SyntenyFeatureWidget', {
+        /**
+         * #property
+         */
+        type: types.literal('SyntenyFeatureWidget'),
+        /**
+         * #property
+         */
+        level: types.maybe(types.number),
+    }));
+}
+export default function SyntenyFeatureWidgetF(pluginManager) {
+    pluginManager.addWidgetType(() => new WidgetType({
+        name: 'SyntenyFeatureWidget',
+        heading: 'Synteny feature details',
+        configSchema,
+        stateModel: stateModelF(pluginManager),
+        ReactComponent: lazy(() => import('./SyntenyFeatureDetail')),
+    }));
+}

package/esm/index.js

@@ -10,6 +10,7 @@ import LinearSyntenyViewHelperF from './LinearSyntenyViewHelper';
 import LaunchLinearSyntenyViewF from './LaunchLinearSyntenyView';
 import SyntenyTrackF from './SyntenyTrack';
 import LinearReadVsRefMenuItemF from './LinearReadVsRef';
+import SyntenyFeatureWidgetF from './SyntenyFeatureDetail';
 export default class LinearComparativeViewPlugin extends Plugin {
     constructor() {
         super(...arguments);
@@ -21,6 +22,7 @@ export default class LinearComparativeViewPlugin extends Plugin {
         LinearSyntenyViewF(pluginManager);
         LinearComparativeDisplayF(pluginManager);
         LinearSyntenyDisplayF(pluginManager);
+        SyntenyFeatureWidgetF(pluginManager);
         LGVSyntenyDisplayF(pluginManager);
         LaunchLinearSyntenyViewF(pluginManager);
         SyntenyTrackF(pluginManager);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@jbrowse/plugin-linear-comparative-view",
-  "version": "2.16.0",
+  "version": "2.17.0",
   "description": "JBrowse 2 linear comparative view",
   "keywords": [
     "jbrowse",
@@ -16,7 +16,7 @@
   },
   "author": "JBrowse Team",
   "distMain": "dist/index.js",
-  "srcMain": "src/index.tsx",
+  "srcMain": "src/index.ts",
   "main": "dist/index.js",
   "files": [
     "dist",
@@ -61,5 +61,5 @@
   "publishConfig": {
     "access": "public"
   },
-  "gitHead": "1e6d4fbc27ce684eed19e3c217f34bd2da24ab75"
+  "gitHead": "eed30b5e671f8f7823652d7cecc51aa89226de46"
 }