@jbrowse/plugin-linear-comparative-view 2.14.0 → 2.15.0

package/dist/LinearSyntenyDisplay/components/util.js

@@ -86,6 +86,8 @@ function drawBezierBox(ctx, x1, x2, y1, x3, x4, y2, mid) {
     ctx.fill();
 }
 function onSynClick(event, model) {
+    const view = (0, util_1.getContainingView)(model);
+    const track = (0, util_1.getContainingTrack)(model);
     const ref1 = model.clickMapCanvas;
     const ref2 = model.cigarClickMapCanvas;
     if (!ref1 || !ref2) {
@@ -108,11 +110,10 @@ function onSynClick(event, model) {
         model.setClickId(f.id());
         const session = (0, util_1.getSession)(model);
         if ((0, util_1.isSessionModelWithWidgets)(session)) {
-            session.showWidget(session.addWidget('SyntenyFeatureWidget', 'syntenyFeature', {
-                featureData: {
-                    feature1: f.toJSON(),
-                    feature2: f.get('mate'),
-                },
+            session.showWidget(session.addWidget('BaseFeatureWidget', 'baseFeature', {
+                view,
+                track,
+                featureData: f.toJSON(),
             }));
         }
     }

package/dist/index.js

@@ -13,7 +13,6 @@ const LGVSyntenyDisplay_1 = __importDefault(require("./LGVSyntenyDisplay"));
 const LinearSyntenyView_1 = __importDefault(require("./LinearSyntenyView"));
 const LaunchLinearSyntenyView_1 = __importDefault(require("./LaunchLinearSyntenyView"));
 const SyntenyTrack_1 = __importDefault(require("./SyntenyTrack"));
-const SyntenyFeatureDetail_1 = __importDefault(require("./SyntenyFeatureDetail"));
 const LinearReadVsRef_1 = __importDefault(require("./LinearReadVsRef"));
 class LinearComparativeViewPlugin extends Plugin_1.default {
     constructor() {
@@ -28,7 +27,6 @@ class LinearComparativeViewPlugin extends Plugin_1.default {
         (0, LGVSyntenyDisplay_1.default)(pluginManager);
         (0, LaunchLinearSyntenyView_1.default)(pluginManager);
         (0, SyntenyTrack_1.default)(pluginManager);
-        (0, SyntenyFeatureDetail_1.default)(pluginManager);
         (0, LinearReadVsRef_1.default)(pluginManager);
     }
     configure(pluginManager) {

package/esm/LinearSyntenyDisplay/components/util.js

@@ -1,4 +1,4 @@
-import { assembleLocString, doesIntersect2, getSession, isSessionModelWithWidgets, } from '@jbrowse/core/util';
+import { assembleLocString, doesIntersect2, getSession, isSessionModelWithWidgets, getContainingTrack, getContainingView, } from '@jbrowse/core/util';
 // locals
 import { getId, MAX_COLOR_RANGE } from '../drawSynteny';
 export function drawMatchSimple({ feature, ctx, offsets, cb, height, drawCurves, oobLimit, viewWidth, hideTiny, }) {
@@ -77,6 +77,8 @@ export function drawBezierBox(ctx, x1, x2, y1, x3, x4, y2, mid) {
     ctx.fill();
 }
 export function onSynClick(event, model) {
+    const view = getContainingView(model);
+    const track = getContainingTrack(model);
     const ref1 = model.clickMapCanvas;
     const ref2 = model.cigarClickMapCanvas;
     if (!ref1 || !ref2) {
@@ -99,11 +101,10 @@ export function onSynClick(event, model) {
         model.setClickId(f.id());
         const session = getSession(model);
         if (isSessionModelWithWidgets(session)) {
-            session.showWidget(session.addWidget('SyntenyFeatureWidget', 'syntenyFeature', {
-                featureData: {
-                    feature1: f.toJSON(),
-                    feature2: f.get('mate'),
-                },
+            session.showWidget(session.addWidget('BaseFeatureWidget', 'baseFeature', {
+                view,
+                track,
+                featureData: f.toJSON(),
             }));
         }
     }

package/esm/index.js

@@ -8,7 +8,6 @@ import LGVSyntenyDisplayF from './LGVSyntenyDisplay';
 import LinearSyntenyViewF from './LinearSyntenyView';
 import LaunchLinearSyntenyViewF from './LaunchLinearSyntenyView';
 import SyntenyTrackF from './SyntenyTrack';
-import SyntenyFeatureWidgetF from './SyntenyFeatureDetail';
 import LinearReadVsRefMenuItemF from './LinearReadVsRef';
 export default class LinearComparativeViewPlugin extends Plugin {
     constructor() {
@@ -23,7 +22,6 @@ export default class LinearComparativeViewPlugin extends Plugin {
         LGVSyntenyDisplayF(pluginManager);
         LaunchLinearSyntenyViewF(pluginManager);
         SyntenyTrackF(pluginManager);
-        SyntenyFeatureWidgetF(pluginManager);
         LinearReadVsRefMenuItemF(pluginManager);
     }
     configure(pluginManager) {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@jbrowse/plugin-linear-comparative-view",
-  "version": "2.14.0",
+  "version": "2.15.0",
   "description": "JBrowse 2 linear comparative view",
   "keywords": [
     "jbrowse",
@@ -37,7 +37,7 @@
   },
   "dependencies": {
     "@floating-ui/react": "^0.26.3",
-    "@mui/icons-material": "^5.0.1",
+    "@mui/icons-material": "^6.0.0",
     "clone": "^2.1.2",
     "copy-to-clipboard": "^3.3.1",
     "file-saver": "^2.0.0"
@@ -46,7 +46,7 @@
     "@jbrowse/core": "^2.0.0",
     "@jbrowse/plugin-alignments": "^2.0.0",
     "@jbrowse/plugin-linear-genome-view": "^2.0.0",
-    "@mui/material": "^5.0.0",
+    "@mui/material": "^6.0.0",
     "mobx": "^6.0.0",
     "mobx-react": "^9.0.0",
     "mobx-state-tree": "^5.0.0",
@@ -61,5 +61,5 @@
   "publishConfig": {
     "access": "public"
   },
-  "gitHead": "9fb8231d932db40adf0a283081765431756c66ff"
+  "gitHead": "87eeb1fbf8311dbf88d5e75b5a265f03beffdda8"
 }

package/dist/SyntenyFeatureDetail/SyntenyFeatureDetail.d.ts

@@ -1,7 +0,0 @@
-import React from 'react';
-declare const SyntenyFeatureDetail: ({ model, }: {
-    model: {
-        featureData: unknown;
-    };
-}) => React.JSX.Element;
-export default SyntenyFeatureDetail;

package/dist/SyntenyFeatureDetail/SyntenyFeatureDetail.js

@@ -1,65 +0,0 @@
-"use strict";
-var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
-    if (k2 === undefined) k2 = k;
-    var desc = Object.getOwnPropertyDescriptor(m, k);
-    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
-      desc = { enumerable: true, get: function() { return m[k]; } };
-    }
-    Object.defineProperty(o, k2, desc);
-}) : (function(o, m, k, k2) {
-    if (k2 === undefined) k2 = k;
-    o[k2] = m[k];
-}));
-var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
-    Object.defineProperty(o, "default", { enumerable: true, value: v });
-}) : function(o, v) {
-    o["default"] = v;
-});
-var __importStar = (this && this.__importStar) || function (mod) {
-    if (mod && mod.__esModule) return mod;
-    var result = {};
-    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
-    __setModuleDefault(result, mod);
-    return result;
-};
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-const react_1 = __importStar(require("react"));
-const copy_to_clipboard_1 = __importDefault(require("copy-to-clipboard"));
-const material_1 = require("@mui/material");
-const mobx_react_1 = require("mobx-react");
-const BaseFeatureDetail_1 = require("@jbrowse/core/BaseFeatureWidget/BaseFeatureDetail");
-function Formatter({ value }) {
-    const [show, setShow] = (0, react_1.useState)(false);
-    const [copied, setCopied] = (0, react_1.useState)(false);
-    const display = String(value);
-    if (display.length > 100) {
-        return (react_1.default.createElement(react_1.default.Fragment, null,
-            react_1.default.createElement("button", { type: "button", onClick: () => {
-                    (0, copy_to_clipboard_1.default)(display);
-                    setCopied(true);
-                    setTimeout(() => {
-                        setCopied(false);
-                    }, 700);
-                } }, copied ? 'Copied to clipboard' : 'Copy'),
-            react_1.default.createElement("button", { type: "button", onClick: () => {
-                    setShow(val => !val);
-                } }, show ? 'Show less' : 'Show more'),
-            react_1.default.createElement("div", null, show ? display : `${display.slice(0, 100)}...`)));
-    }
-    return react_1.default.createElement("div", null, display);
-}
-function CustomFeatureDetails(props) {
-    return (react_1.default.createElement(BaseFeatureDetail_1.BaseAttributes, { ...props, formatter: (value) => react_1.default.createElement(Formatter, { value: value }) }));
-}
-const SyntenyFeatureDetail = (0, mobx_react_1.observer)(function ({ model, }) {
-    const { feature1, feature2 } = JSON.parse(JSON.stringify(model.featureData));
-    return (react_1.default.createElement(material_1.Paper, { "data-testid": "alignment-side-drawer" },
-        react_1.default.createElement(BaseFeatureDetail_1.BaseCoreDetails, { title: "Feature 1", feature: feature1 }),
-        react_1.default.createElement(BaseFeatureDetail_1.BaseCoreDetails, { title: "Feature 2", feature: feature2 }),
-        react_1.default.createElement(CustomFeatureDetails, { feature: feature1 }),
-        react_1.default.createElement(CustomFeatureDetails, { feature: feature2 })));
-});
-exports.default = SyntenyFeatureDetail;

package/dist/SyntenyFeatureDetail/index.d.ts

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

package/dist/SyntenyFeatureDetail/index.js

@@ -1,58 +0,0 @@
-"use strict";
-var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
-    if (k2 === undefined) k2 = k;
-    var desc = Object.getOwnPropertyDescriptor(m, k);
-    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
-      desc = { enumerable: true, get: function() { return m[k]; } };
-    }
-    Object.defineProperty(o, k2, desc);
-}) : (function(o, m, k, k2) {
-    if (k2 === undefined) k2 = k;
-    o[k2] = m[k];
-}));
-var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
-    Object.defineProperty(o, "default", { enumerable: true, value: v });
-}) : function(o, v) {
-    o["default"] = v;
-});
-var __importStar = (this && this.__importStar) || function (mod) {
-    if (mod && mod.__esModule) return mod;
-    var result = {};
-    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
-    __setModuleDefault(result, mod);
-    return result;
-};
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.default = SyntenyFeatureWidgetF;
-const react_1 = require("react");
-const configuration_1 = require("@jbrowse/core/configuration");
-const WidgetType_1 = __importDefault(require("@jbrowse/core/pluggableElementTypes/WidgetType"));
-const mst_1 = require("@jbrowse/core/util/types/mst");
-const mobx_state_tree_1 = require("mobx-state-tree");
-const configSchema = (0, configuration_1.ConfigurationSchema)('SyntenyFeatureWidget', {});
-const stateModel = mobx_state_tree_1.types
-    .model('SyntenyFeatureWidget', {
-    id: mst_1.ElementId,
-    type: mobx_state_tree_1.types.literal('SyntenyFeatureWidget'),
-    featureData: mobx_state_tree_1.types.frozen(),
-})
-    .actions(self => ({
-    setFeatureData(data) {
-        self.featureData = data;
-    },
-    clearFeatureData() {
-        self.featureData = undefined;
-    },
-}));
-function SyntenyFeatureWidgetF(pluginManager) {
-    pluginManager.addWidgetType(() => new WidgetType_1.default({
-        name: 'SyntenyFeatureWidget',
-        heading: 'Synteny feature details',
-        configSchema,
-        stateModel,
-        ReactComponent: (0, react_1.lazy)(() => Promise.resolve().then(() => __importStar(require('./SyntenyFeatureDetail')))),
-    }));
-}

package/esm/SyntenyFeatureDetail/SyntenyFeatureDetail.d.ts

@@ -1,7 +0,0 @@
-import React from 'react';
-declare const SyntenyFeatureDetail: ({ model, }: {
-    model: {
-        featureData: unknown;
-    };
-}) => React.JSX.Element;
-export default SyntenyFeatureDetail;

package/esm/SyntenyFeatureDetail/SyntenyFeatureDetail.js

@@ -1,37 +0,0 @@
-import React, { useState } from 'react';
-import copy from 'copy-to-clipboard';
-import { Paper } from '@mui/material';
-import { observer } from 'mobx-react';
-import { BaseCoreDetails, BaseAttributes, } from '@jbrowse/core/BaseFeatureWidget/BaseFeatureDetail';
-function Formatter({ value }) {
-    const [show, setShow] = useState(false);
-    const [copied, setCopied] = useState(false);
-    const display = String(value);
-    if (display.length > 100) {
-        return (React.createElement(React.Fragment, null,
-            React.createElement("button", { type: "button", onClick: () => {
-                    copy(display);
-                    setCopied(true);
-                    setTimeout(() => {
-                        setCopied(false);
-                    }, 700);
-                } }, copied ? 'Copied to clipboard' : 'Copy'),
-            React.createElement("button", { type: "button", onClick: () => {
-                    setShow(val => !val);
-                } }, show ? 'Show less' : 'Show more'),
-            React.createElement("div", null, show ? display : `${display.slice(0, 100)}...`)));
-    }
-    return React.createElement("div", null, display);
-}
-function CustomFeatureDetails(props) {
-    return (React.createElement(BaseAttributes, { ...props, formatter: (value) => React.createElement(Formatter, { value: value }) }));
-}
-const SyntenyFeatureDetail = observer(function ({ model, }) {
-    const { feature1, feature2 } = JSON.parse(JSON.stringify(model.featureData));
-    return (React.createElement(Paper, { "data-testid": "alignment-side-drawer" },
-        React.createElement(BaseCoreDetails, { title: "Feature 1", feature: feature1 }),
-        React.createElement(BaseCoreDetails, { title: "Feature 2", feature: feature2 }),
-        React.createElement(CustomFeatureDetails, { feature: feature1 }),
-        React.createElement(CustomFeatureDetails, { feature: feature2 })));
-});
-export default SyntenyFeatureDetail;

package/esm/SyntenyFeatureDetail/index.d.ts

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

package/esm/SyntenyFeatureDetail/index.js

@@ -1,29 +0,0 @@
-import { lazy } from 'react';
-import { ConfigurationSchema } from '@jbrowse/core/configuration';
-import WidgetType from '@jbrowse/core/pluggableElementTypes/WidgetType';
-import { ElementId } from '@jbrowse/core/util/types/mst';
-import { types } from 'mobx-state-tree';
-const configSchema = ConfigurationSchema('SyntenyFeatureWidget', {});
-const stateModel = types
-    .model('SyntenyFeatureWidget', {
-    id: ElementId,
-    type: types.literal('SyntenyFeatureWidget'),
-    featureData: types.frozen(),
-})
-    .actions(self => ({
-    setFeatureData(data) {
-        self.featureData = data;
-    },
-    clearFeatureData() {
-        self.featureData = undefined;
-    },
-}));
-export default function SyntenyFeatureWidgetF(pluginManager) {
-    pluginManager.addWidgetType(() => new WidgetType({
-        name: 'SyntenyFeatureWidget',
-        heading: 'Synteny feature details',
-        configSchema,
-        stateModel,
-        ReactComponent: lazy(() => import('./SyntenyFeatureDetail')),
-    }));
-}