@jbrowse/plugin-breakpoint-split-view 2.7.2 → 2.8.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
@@ -1,9 +1,10 @@
1
- import { Feature } from '@jbrowse/core/util';
1
+ import { Feature, Region } from '@jbrowse/core/util';
2
2
  import ViewType from '@jbrowse/core/pluggableElementTypes/ViewType';
3
- import { LinearGenomeViewModel } from '@jbrowse/plugin-linear-genome-view';
4
- type LGV = LinearGenomeViewModel;
3
+ import { IStateTreeNode } from 'mobx-state-tree';
5
4
  export default class BreakpointSplitViewType extends ViewType {
6
- snapshotFromBreakendFeature(feature: Feature, view: LGV): {
5
+ snapshotFromBreakendFeature(feature: Feature, view: {
6
+ displayedRegions: Region[];
7
+ } & IStateTreeNode): {
7
8
  type: string;
8
9
  views: {
9
10
  type: string;
@@ -18,6 +19,6 @@ export default class BreakpointSplitViewType extends ViewType {
18
19
  offsetPx: number;
19
20
  }[];
20
21
  displayName: string;
22
+ featureData: unknown;
21
23
  };
22
24
  }
23
- export {};
@@ -24,8 +24,7 @@ class BreakpointSplitViewType extends ViewType_1.default {
24
24
  if (!assembly.regions) {
25
25
  throw new Error(`assembly ${assemblyName} regions not loaded`);
26
26
  }
27
- const { getCanonicalRefName } = assembly;
28
- const featureRefName = getCanonicalRefName(feature.get('refName'));
27
+ const featureRefName = assembly.getCanonicalRefName(feature.get('refName'));
29
28
  const topRegion = assembly.regions.find(f => f.refName === featureRefName);
30
29
  let mateRefName;
31
30
  let startMod = 0;
@@ -34,12 +33,12 @@ class BreakpointSplitViewType extends ViewType_1.default {
34
33
  if (alt === '<TRA>') {
35
34
  const INFO = feature.get('INFO');
36
35
  endPos = INFO.END[0] - 1;
37
- mateRefName = getCanonicalRefName(INFO.CHR2[0]);
36
+ mateRefName = assembly.getCanonicalRefName(INFO.CHR2[0]);
38
37
  }
39
38
  else if (bnd === null || bnd === void 0 ? void 0 : bnd.MatePosition) {
40
39
  const matePosition = bnd.MatePosition.split(':');
41
40
  endPos = +matePosition[1] - 1;
42
- mateRefName = getCanonicalRefName(matePosition[0]);
41
+ mateRefName = assembly.getCanonicalRefName(matePosition[0]);
43
42
  if (bnd.Join === 'left') {
44
43
  startMod = -1;
45
44
  }
@@ -50,7 +49,7 @@ class BreakpointSplitViewType extends ViewType_1.default {
50
49
  else if (feature.get('mate')) {
51
50
  // a generic 'mate' feature
52
51
  const mate = feature.get('mate');
53
- mateRefName = getCanonicalRefName(mate.refName);
52
+ mateRefName = assembly.getCanonicalRefName(mate.refName);
54
53
  endPos = mate.start;
55
54
  }
56
55
  if (!mateRefName) {
@@ -85,6 +84,7 @@ class BreakpointSplitViewType extends ViewType_1.default {
85
84
  },
86
85
  ],
87
86
  displayName: `${feature.get('name') || feature.get('id') || 'breakend'} split detail`,
87
+ featureData: undefined,
88
88
  };
89
89
  }
90
90
  }
@@ -1,36 +1,13 @@
1
1
  "use strict";
2
- var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
3
- if (k2 === undefined) k2 = k;
4
- var desc = Object.getOwnPropertyDescriptor(m, k);
5
- if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
6
- desc = { enumerable: true, get: function() { return m[k]; } };
7
- }
8
- Object.defineProperty(o, k2, desc);
9
- }) : (function(o, m, k, k2) {
10
- if (k2 === undefined) k2 = k;
11
- o[k2] = m[k];
12
- }));
13
- var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
14
- Object.defineProperty(o, "default", { enumerable: true, value: v });
15
- }) : function(o, v) {
16
- o["default"] = v;
17
- });
18
- var __importStar = (this && this.__importStar) || function (mod) {
19
- if (mod && mod.__esModule) return mod;
20
- var result = {};
21
- if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
22
- __setModuleDefault(result, mod);
23
- return result;
24
- };
25
2
  var __importDefault = (this && this.__importDefault) || function (mod) {
26
3
  return (mod && mod.__esModule) ? mod : { "default": mod };
27
4
  };
28
5
  Object.defineProperty(exports, "__esModule", { value: true });
29
- const react_1 = __importStar(require("react"));
6
+ const react_1 = __importDefault(require("react"));
30
7
  const mobx_react_1 = require("mobx-react");
31
8
  const mobx_state_tree_1 = require("mobx-state-tree");
32
9
  const mui_1 = require("tss-react/mui");
33
- const Overlay_1 = __importDefault(require("./Overlay"));
10
+ const BreakpointSplitViewOverlay_1 = __importDefault(require("./BreakpointSplitViewOverlay"));
34
11
  const useStyles = (0, mui_1.makeStyles)()(theme => ({
35
12
  viewDivider: {
36
13
  background: theme.palette.secondary.main,
@@ -39,50 +16,32 @@ const useStyles = (0, mui_1.makeStyles)()(theme => ({
39
16
  container: {
40
17
  display: 'grid',
41
18
  },
42
- overlay: {
43
- display: 'flex',
44
- width: '100%',
45
- gridArea: '1/1',
46
- '& path': {
47
- cursor: 'crosshair',
48
- fill: 'none',
49
- },
50
- },
51
19
  content: {
52
20
  gridArea: '1/1',
53
21
  },
54
22
  }));
55
- const BreakpointSplitView = (0, mobx_react_1.observer)(function ({ model, }) {
23
+ const BreakpointSplitViewLevels = (0, mobx_react_1.observer)(function ({ model, }) {
56
24
  const { classes } = useStyles();
57
25
  const { views } = model;
58
26
  const { pluginManager } = (0, mobx_state_tree_1.getEnv)(model);
59
- const ref = (0, react_1.useRef)(null);
27
+ return (react_1.default.createElement("div", { className: classes.content },
28
+ react_1.default.createElement("div", { style: { position: 'relative' } }, views.map((view, idx) => {
29
+ const { ReactComponent } = pluginManager.getViewType(view.type);
30
+ const viewComponent = react_1.default.createElement(ReactComponent, { key: view.id, model: view });
31
+ if (idx === views.length - 1) {
32
+ return viewComponent;
33
+ }
34
+ return [
35
+ viewComponent,
36
+ react_1.default.createElement("div", { key: `${view.id}-divider`, className: classes.viewDivider }),
37
+ ];
38
+ }))));
39
+ });
40
+ const BreakpointSplitView = (0, mobx_react_1.observer)(function ({ model, }) {
41
+ const { classes } = useStyles();
60
42
  return (react_1.default.createElement("div", null,
61
43
  react_1.default.createElement("div", { className: classes.container },
62
- react_1.default.createElement("div", { className: classes.content },
63
- react_1.default.createElement("div", { style: { position: 'relative' } }, views.map((view, idx) => {
64
- const { ReactComponent } = pluginManager.getViewType(view.type);
65
- const viewComponent = (react_1.default.createElement(ReactComponent, { key: view.id, model: view }));
66
- if (idx === views.length - 1) {
67
- return viewComponent;
68
- }
69
- return [
70
- viewComponent,
71
- react_1.default.createElement("div", { key: `${view.id}-divider`, className: classes.viewDivider }),
72
- ];
73
- }))),
74
- react_1.default.createElement("div", { className: classes.overlay },
75
- react_1.default.createElement("svg", { ref: ref, style: {
76
- width: '100%',
77
- zIndex: 10,
78
- pointerEvents: model.interactToggled ? undefined : 'none',
79
- } }, model.matchedTracks.map(track => (
80
- // note: we must pass ref down, because the child component
81
- // needs to getBoundingClientRect on the this components SVG,
82
- // and we cannot rely on using getBoundingClientRect in this
83
- // component to make sure this works because if it gets
84
- // shifted around by another element, this will not re-render
85
- // necessarily
86
- react_1.default.createElement(Overlay_1.default, { parentRef: ref, key: track.configuration.trackId, model: model, trackId: track.configuration.trackId }))))))));
44
+ react_1.default.createElement(BreakpointSplitViewLevels, { model: model }),
45
+ react_1.default.createElement(BreakpointSplitViewOverlay_1.default, { model: model }))));
87
46
  });
88
47
  exports.default = BreakpointSplitView;
@@ -0,0 +1,6 @@
1
+ import React from 'react';
2
+ import { BreakpointViewModel } from '../model';
3
+ declare const BreakpointSplitViewOverlay: ({ model, }: {
4
+ model: BreakpointViewModel;
5
+ }) => React.JSX.Element;
6
+ export default BreakpointSplitViewOverlay;
@@ -0,0 +1,61 @@
1
+ "use strict";
2
+ var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
3
+ if (k2 === undefined) k2 = k;
4
+ var desc = Object.getOwnPropertyDescriptor(m, k);
5
+ if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
6
+ desc = { enumerable: true, get: function() { return m[k]; } };
7
+ }
8
+ Object.defineProperty(o, k2, desc);
9
+ }) : (function(o, m, k, k2) {
10
+ if (k2 === undefined) k2 = k;
11
+ o[k2] = m[k];
12
+ }));
13
+ var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
14
+ Object.defineProperty(o, "default", { enumerable: true, value: v });
15
+ }) : function(o, v) {
16
+ o["default"] = v;
17
+ });
18
+ var __importStar = (this && this.__importStar) || function (mod) {
19
+ if (mod && mod.__esModule) return mod;
20
+ var result = {};
21
+ if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
22
+ __setModuleDefault(result, mod);
23
+ return result;
24
+ };
25
+ var __importDefault = (this && this.__importDefault) || function (mod) {
26
+ return (mod && mod.__esModule) ? mod : { "default": mod };
27
+ };
28
+ Object.defineProperty(exports, "__esModule", { value: true });
29
+ const react_1 = __importStar(require("react"));
30
+ const mui_1 = require("tss-react/mui");
31
+ const Overlay_1 = __importDefault(require("./Overlay"));
32
+ const mobx_react_1 = require("mobx-react");
33
+ const useStyles = (0, mui_1.makeStyles)()({
34
+ overlay: {
35
+ display: 'flex',
36
+ width: '100%',
37
+ gridArea: '1/1',
38
+ '& path': {
39
+ cursor: 'crosshair',
40
+ fill: 'none',
41
+ },
42
+ },
43
+ });
44
+ const BreakpointSplitViewOverlay = (0, mobx_react_1.observer)(function ({ model, }) {
45
+ const { classes } = useStyles();
46
+ const { matchedTracks, interactToggled } = model;
47
+ const ref = (0, react_1.useRef)(null);
48
+ return (react_1.default.createElement("div", { className: classes.overlay },
49
+ react_1.default.createElement("svg", { ref: ref, style: {
50
+ width: '100%',
51
+ zIndex: 10,
52
+ pointerEvents: interactToggled ? undefined : 'none',
53
+ } }, matchedTracks.map(track => (
54
+ // note: we must pass ref down, because the child component needs to
55
+ // getBoundingClientRect on the this components SVG, and we cannot
56
+ // rely on using getBoundingClientRect in this component to make
57
+ // sure this works because if it gets shifted around by another
58
+ // element, this will not re-render necessarily
59
+ react_1.default.createElement(Overlay_1.default, { parentRef: ref, key: track.configuration.trackId, model: model, trackId: track.configuration.trackId }))))));
60
+ });
61
+ exports.default = BreakpointSplitViewOverlay;
@@ -1,9 +1,10 @@
1
- import { Feature } from '@jbrowse/core/util';
1
+ import { Feature, Region } from '@jbrowse/core/util';
2
2
  import ViewType from '@jbrowse/core/pluggableElementTypes/ViewType';
3
- import { LinearGenomeViewModel } from '@jbrowse/plugin-linear-genome-view';
4
- type LGV = LinearGenomeViewModel;
3
+ import { IStateTreeNode } from 'mobx-state-tree';
5
4
  export default class BreakpointSplitViewType extends ViewType {
6
- snapshotFromBreakendFeature(feature: Feature, view: LGV): {
5
+ snapshotFromBreakendFeature(feature: Feature, view: {
6
+ displayedRegions: Region[];
7
+ } & IStateTreeNode): {
7
8
  type: string;
8
9
  views: {
9
10
  type: string;
@@ -18,6 +19,6 @@ export default class BreakpointSplitViewType extends ViewType {
18
19
  offsetPx: number;
19
20
  }[];
20
21
  displayName: string;
22
+ featureData: unknown;
21
23
  };
22
24
  }
23
- export {};
@@ -19,8 +19,7 @@ export default class BreakpointSplitViewType extends ViewType {
19
19
  if (!assembly.regions) {
20
20
  throw new Error(`assembly ${assemblyName} regions not loaded`);
21
21
  }
22
- const { getCanonicalRefName } = assembly;
23
- const featureRefName = getCanonicalRefName(feature.get('refName'));
22
+ const featureRefName = assembly.getCanonicalRefName(feature.get('refName'));
24
23
  const topRegion = assembly.regions.find(f => f.refName === featureRefName);
25
24
  let mateRefName;
26
25
  let startMod = 0;
@@ -29,12 +28,12 @@ export default class BreakpointSplitViewType extends ViewType {
29
28
  if (alt === '<TRA>') {
30
29
  const INFO = feature.get('INFO');
31
30
  endPos = INFO.END[0] - 1;
32
- mateRefName = getCanonicalRefName(INFO.CHR2[0]);
31
+ mateRefName = assembly.getCanonicalRefName(INFO.CHR2[0]);
33
32
  }
34
33
  else if (bnd === null || bnd === void 0 ? void 0 : bnd.MatePosition) {
35
34
  const matePosition = bnd.MatePosition.split(':');
36
35
  endPos = +matePosition[1] - 1;
37
- mateRefName = getCanonicalRefName(matePosition[0]);
36
+ mateRefName = assembly.getCanonicalRefName(matePosition[0]);
38
37
  if (bnd.Join === 'left') {
39
38
  startMod = -1;
40
39
  }
@@ -45,7 +44,7 @@ export default class BreakpointSplitViewType extends ViewType {
45
44
  else if (feature.get('mate')) {
46
45
  // a generic 'mate' feature
47
46
  const mate = feature.get('mate');
48
- mateRefName = getCanonicalRefName(mate.refName);
47
+ mateRefName = assembly.getCanonicalRefName(mate.refName);
49
48
  endPos = mate.start;
50
49
  }
51
50
  if (!mateRefName) {
@@ -80,6 +79,7 @@ export default class BreakpointSplitViewType extends ViewType {
80
79
  },
81
80
  ],
82
81
  displayName: `${feature.get('name') || feature.get('id') || 'breakend'} split detail`,
82
+ featureData: undefined,
83
83
  };
84
84
  }
85
85
  }
@@ -1,8 +1,8 @@
1
- import React, { useRef } from 'react';
1
+ import React from 'react';
2
2
  import { observer } from 'mobx-react';
3
3
  import { getEnv } from 'mobx-state-tree';
4
4
  import { makeStyles } from 'tss-react/mui';
5
- import Overlay from './Overlay';
5
+ import BreakpointSplitViewOverlay from './BreakpointSplitViewOverlay';
6
6
  const useStyles = makeStyles()(theme => ({
7
7
  viewDivider: {
8
8
  background: theme.palette.secondary.main,
@@ -11,50 +11,32 @@ const useStyles = makeStyles()(theme => ({
11
11
  container: {
12
12
  display: 'grid',
13
13
  },
14
- overlay: {
15
- display: 'flex',
16
- width: '100%',
17
- gridArea: '1/1',
18
- '& path': {
19
- cursor: 'crosshair',
20
- fill: 'none',
21
- },
22
- },
23
14
  content: {
24
15
  gridArea: '1/1',
25
16
  },
26
17
  }));
27
- const BreakpointSplitView = observer(function ({ model, }) {
18
+ const BreakpointSplitViewLevels = observer(function ({ model, }) {
28
19
  const { classes } = useStyles();
29
20
  const { views } = model;
30
21
  const { pluginManager } = getEnv(model);
31
- const ref = useRef(null);
22
+ return (React.createElement("div", { className: classes.content },
23
+ React.createElement("div", { style: { position: 'relative' } }, views.map((view, idx) => {
24
+ const { ReactComponent } = pluginManager.getViewType(view.type);
25
+ const viewComponent = React.createElement(ReactComponent, { key: view.id, model: view });
26
+ if (idx === views.length - 1) {
27
+ return viewComponent;
28
+ }
29
+ return [
30
+ viewComponent,
31
+ React.createElement("div", { key: `${view.id}-divider`, className: classes.viewDivider }),
32
+ ];
33
+ }))));
34
+ });
35
+ const BreakpointSplitView = observer(function ({ model, }) {
36
+ const { classes } = useStyles();
32
37
  return (React.createElement("div", null,
33
38
  React.createElement("div", { className: classes.container },
34
- React.createElement("div", { className: classes.content },
35
- React.createElement("div", { style: { position: 'relative' } }, views.map((view, idx) => {
36
- const { ReactComponent } = pluginManager.getViewType(view.type);
37
- const viewComponent = (React.createElement(ReactComponent, { key: view.id, model: view }));
38
- if (idx === views.length - 1) {
39
- return viewComponent;
40
- }
41
- return [
42
- viewComponent,
43
- React.createElement("div", { key: `${view.id}-divider`, className: classes.viewDivider }),
44
- ];
45
- }))),
46
- React.createElement("div", { className: classes.overlay },
47
- React.createElement("svg", { ref: ref, style: {
48
- width: '100%',
49
- zIndex: 10,
50
- pointerEvents: model.interactToggled ? undefined : 'none',
51
- } }, model.matchedTracks.map(track => (
52
- // note: we must pass ref down, because the child component
53
- // needs to getBoundingClientRect on the this components SVG,
54
- // and we cannot rely on using getBoundingClientRect in this
55
- // component to make sure this works because if it gets
56
- // shifted around by another element, this will not re-render
57
- // necessarily
58
- React.createElement(Overlay, { parentRef: ref, key: track.configuration.trackId, model: model, trackId: track.configuration.trackId }))))))));
39
+ React.createElement(BreakpointSplitViewLevels, { model: model }),
40
+ React.createElement(BreakpointSplitViewOverlay, { model: model }))));
59
41
  });
60
42
  export default BreakpointSplitView;
@@ -0,0 +1,6 @@
1
+ import React from 'react';
2
+ import { BreakpointViewModel } from '../model';
3
+ declare const BreakpointSplitViewOverlay: ({ model, }: {
4
+ model: BreakpointViewModel;
5
+ }) => React.JSX.Element;
6
+ export default BreakpointSplitViewOverlay;
@@ -0,0 +1,33 @@
1
+ import React, { useRef } from 'react';
2
+ import { makeStyles } from 'tss-react/mui';
3
+ import Overlay from './Overlay';
4
+ import { observer } from 'mobx-react';
5
+ const useStyles = makeStyles()({
6
+ overlay: {
7
+ display: 'flex',
8
+ width: '100%',
9
+ gridArea: '1/1',
10
+ '& path': {
11
+ cursor: 'crosshair',
12
+ fill: 'none',
13
+ },
14
+ },
15
+ });
16
+ const BreakpointSplitViewOverlay = observer(function ({ model, }) {
17
+ const { classes } = useStyles();
18
+ const { matchedTracks, interactToggled } = model;
19
+ const ref = useRef(null);
20
+ return (React.createElement("div", { className: classes.overlay },
21
+ React.createElement("svg", { ref: ref, style: {
22
+ width: '100%',
23
+ zIndex: 10,
24
+ pointerEvents: interactToggled ? undefined : 'none',
25
+ } }, matchedTracks.map(track => (
26
+ // note: we must pass ref down, because the child component needs to
27
+ // getBoundingClientRect on the this components SVG, and we cannot
28
+ // rely on using getBoundingClientRect in this component to make
29
+ // sure this works because if it gets shifted around by another
30
+ // element, this will not re-render necessarily
31
+ React.createElement(Overlay, { parentRef: ref, key: track.configuration.trackId, model: model, trackId: track.configuration.trackId }))))));
32
+ });
33
+ export default BreakpointSplitViewOverlay;
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@jbrowse/plugin-breakpoint-split-view",
3
- "version": "2.7.2",
3
+ "version": "2.8.0",
4
4
  "description": "JBrowse 2 breakpoint detail split view",
5
5
  "keywords": [
6
6
  "jbrowse",
@@ -58,5 +58,5 @@
58
58
  "publishConfig": {
59
59
  "access": "public"
60
60
  },
61
- "gitHead": "9052b295f2d322e729254457ed9fe2231fb22cce"
61
+ "gitHead": "ee8c2bdc8bd4f1a70b1eefda984f04a2830d9ca0"
62
62
  }