@jbrowse/plugin-linear-genome-view 2.7.0 → 2.7.1
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.
- package/dist/BaseLinearDisplay/components/LinearBlocks.js +1 -1
- package/dist/LinearGenomeView/components/TrackLabel.js +2 -18
- package/dist/LinearGenomeView/components/TrackLabelDragHandle.d.ts +9 -0
- package/dist/LinearGenomeView/components/TrackLabelDragHandle.js +32 -0
- package/dist/LinearGenomeView/index.d.ts +1 -2
- package/dist/LinearGenomeView/index.js +3 -2
- package/dist/LinearGenomeView/svgcomponents/SVGTrackLabel.js +3 -1
- package/esm/BaseLinearDisplay/components/LinearBlocks.js +1 -1
- package/esm/LinearGenomeView/components/TrackLabel.js +2 -18
- package/esm/LinearGenomeView/components/TrackLabelDragHandle.d.ts +9 -0
- package/esm/LinearGenomeView/components/TrackLabelDragHandle.js +27 -0
- package/esm/LinearGenomeView/index.d.ts +1 -2
- package/esm/LinearGenomeView/index.js +2 -2
- package/esm/LinearGenomeView/svgcomponents/SVGTrackLabel.js +3 -1
- package/package.json +2 -2
|
@@ -51,7 +51,7 @@ const RenderedBlocks = (0, mobx_react_1.observer)(function ({ model, }) {
|
|
|
51
51
|
if (block instanceof blockTypes_1.InterRegionPaddingBlock) {
|
|
52
52
|
return (react_1.default.createElement(Block_1.InterRegionPaddingBlock, { key: block.key, width: block.widthPx, style: { background: 'none' }, boundary: block.variant === 'boundary' }));
|
|
53
53
|
}
|
|
54
|
-
throw new Error(`invalid block type ${
|
|
54
|
+
throw new Error(`invalid block type ${JSON.stringify(block)}`);
|
|
55
55
|
})));
|
|
56
56
|
});
|
|
57
57
|
exports.RenderedBlocks = RenderedBlocks;
|
|
@@ -14,10 +14,10 @@ const ui_1 = require("@jbrowse/core/ui");
|
|
|
14
14
|
const CascadingMenuButton_1 = __importDefault(require("@jbrowse/core/ui/CascadingMenuButton"));
|
|
15
15
|
// icons
|
|
16
16
|
const MoreVert_1 = __importDefault(require("@mui/icons-material/MoreVert"));
|
|
17
|
-
const DragIndicator_1 = __importDefault(require("@mui/icons-material/DragIndicator"));
|
|
18
17
|
const Close_1 = __importDefault(require("@mui/icons-material/Close"));
|
|
19
18
|
const Minimize_1 = __importDefault(require("@mui/icons-material/Minimize"));
|
|
20
19
|
const Add_1 = __importDefault(require("@mui/icons-material/Add"));
|
|
20
|
+
const TrackLabelDragHandle_1 = __importDefault(require("./TrackLabelDragHandle"));
|
|
21
21
|
const useStyles = (0, mui_1.makeStyles)()(theme => ({
|
|
22
22
|
root: {
|
|
23
23
|
background: (0, material_1.alpha)(theme.palette.background.paper, 0.8),
|
|
@@ -34,14 +34,6 @@ const useStyles = (0, mui_1.makeStyles)()(theme => ({
|
|
|
34
34
|
fontSize: '0.8rem',
|
|
35
35
|
pointerEvents: 'none',
|
|
36
36
|
},
|
|
37
|
-
dragHandle: {
|
|
38
|
-
cursor: 'grab',
|
|
39
|
-
},
|
|
40
|
-
dragHandleIcon: {
|
|
41
|
-
display: 'inline-block',
|
|
42
|
-
verticalAlign: 'middle',
|
|
43
|
-
pointerEvents: 'none',
|
|
44
|
-
},
|
|
45
37
|
iconButton: {
|
|
46
38
|
padding: theme.spacing(1),
|
|
47
39
|
},
|
|
@@ -65,15 +57,7 @@ const TrackLabel = (0, mobx_react_1.observer)(react_1.default.forwardRef(functio
|
|
|
65
57
|
...track.trackMenuItems(),
|
|
66
58
|
].sort((a, b) => ((b === null || b === void 0 ? void 0 : b.priority) || 0) - ((a === null || a === void 0 ? void 0 : a.priority) || 0));
|
|
67
59
|
return (react_1.default.createElement(material_1.Paper, { ref: ref, className: cx(className, classes.root) },
|
|
68
|
-
react_1.default.createElement(
|
|
69
|
-
const target = event.currentTarget;
|
|
70
|
-
if (target.parentNode) {
|
|
71
|
-
const parent = target.parentNode;
|
|
72
|
-
event.dataTransfer.setDragImage(parent, 20, 20);
|
|
73
|
-
view.setDraggingTrackId(track.id);
|
|
74
|
-
}
|
|
75
|
-
}, onDragEnd: () => view.setDraggingTrackId(undefined), "data-testid": `dragHandle-${view.id}-${trackId}` },
|
|
76
|
-
react_1.default.createElement(DragIndicator_1.default, { className: classes.dragHandleIcon, fontSize: "small" })),
|
|
60
|
+
react_1.default.createElement(TrackLabelDragHandle_1.default, { track: track, trackId: trackId, view: view }),
|
|
77
61
|
react_1.default.createElement(material_1.IconButton, { onClick: () => view.hideTrack(trackId), className: classes.iconButton, title: "close this track" },
|
|
78
62
|
react_1.default.createElement(Close_1.default, { fontSize: "small" })),
|
|
79
63
|
react_1.default.createElement(material_1.Typography, { variant: "body1", component: "span", className: classes.trackName },
|
|
@@ -0,0 +1,9 @@
|
|
|
1
|
+
import React from 'react';
|
|
2
|
+
import { BaseTrackModel } from '@jbrowse/core/pluggableElementTypes/models';
|
|
3
|
+
import { LinearGenomeViewModel } from '..';
|
|
4
|
+
declare function TrackLabelDragHandle({ trackId, view, track, }: {
|
|
5
|
+
trackId: string;
|
|
6
|
+
track: BaseTrackModel;
|
|
7
|
+
view: LinearGenomeViewModel;
|
|
8
|
+
}): React.JSX.Element;
|
|
9
|
+
export default TrackLabelDragHandle;
|
|
@@ -0,0 +1,32 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
var __importDefault = (this && this.__importDefault) || function (mod) {
|
|
3
|
+
return (mod && mod.__esModule) ? mod : { "default": mod };
|
|
4
|
+
};
|
|
5
|
+
Object.defineProperty(exports, "__esModule", { value: true });
|
|
6
|
+
const react_1 = __importDefault(require("react"));
|
|
7
|
+
const mui_1 = require("tss-react/mui");
|
|
8
|
+
// icons
|
|
9
|
+
const DragIndicator_1 = __importDefault(require("@mui/icons-material/DragIndicator"));
|
|
10
|
+
const useStyles = (0, mui_1.makeStyles)()({
|
|
11
|
+
dragHandle: {
|
|
12
|
+
cursor: 'grab',
|
|
13
|
+
},
|
|
14
|
+
dragHandleIcon: {
|
|
15
|
+
display: 'inline-block',
|
|
16
|
+
verticalAlign: 'middle',
|
|
17
|
+
pointerEvents: 'none',
|
|
18
|
+
},
|
|
19
|
+
});
|
|
20
|
+
function TrackLabelDragHandle({ trackId, view, track, }) {
|
|
21
|
+
const { classes } = useStyles();
|
|
22
|
+
return (react_1.default.createElement("span", { draggable: true, className: classes.dragHandle, onDragStart: event => {
|
|
23
|
+
const target = event.currentTarget;
|
|
24
|
+
if (target.parentNode) {
|
|
25
|
+
const parent = target.parentNode;
|
|
26
|
+
event.dataTransfer.setDragImage(parent, 20, 20);
|
|
27
|
+
view.setDraggingTrackId(track.id);
|
|
28
|
+
}
|
|
29
|
+
}, onDragEnd: () => view.setDraggingTrackId(undefined), "data-testid": `dragHandle-${view.id}-${trackId}` },
|
|
30
|
+
react_1.default.createElement(DragIndicator_1.default, { className: classes.dragHandleIcon, fontSize: "small" })));
|
|
31
|
+
}
|
|
32
|
+
exports.default = TrackLabelDragHandle;
|
|
@@ -29,7 +29,7 @@ Object.defineProperty(exports, "__esModule", { value: true });
|
|
|
29
29
|
const react_1 = require("react");
|
|
30
30
|
const pluggableElementTypes_1 = require("@jbrowse/core/pluggableElementTypes");
|
|
31
31
|
const model_1 = require("./model");
|
|
32
|
-
|
|
32
|
+
function LinearGenomeViewF(pluginManager) {
|
|
33
33
|
pluginManager.addViewType(() => {
|
|
34
34
|
return new pluggableElementTypes_1.ViewType({
|
|
35
35
|
name: 'LinearGenomeView',
|
|
@@ -38,5 +38,6 @@ exports.default = (pluginManager) => {
|
|
|
38
38
|
ReactComponent: (0, react_1.lazy)(() => Promise.resolve().then(() => __importStar(require('./components/LinearGenomeView')))),
|
|
39
39
|
});
|
|
40
40
|
});
|
|
41
|
-
}
|
|
41
|
+
}
|
|
42
|
+
exports.default = LinearGenomeViewF;
|
|
42
43
|
__exportStar(require("./model"), exports);
|
|
@@ -5,11 +5,13 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
|
|
|
5
5
|
Object.defineProperty(exports, "__esModule", { value: true });
|
|
6
6
|
const react_1 = __importDefault(require("react"));
|
|
7
7
|
const material_1 = require("@mui/material");
|
|
8
|
+
const util_1 = require("@jbrowse/core/util");
|
|
8
9
|
function SVGTrackLabel({ trackLabels, trackName, fontSize, trackLabelOffset, x, }) {
|
|
9
10
|
const theme = (0, material_1.useTheme)();
|
|
10
11
|
const fill = theme.palette.text.primary;
|
|
11
12
|
const xoff = trackLabels === 'overlay' ? 5 : 0;
|
|
12
13
|
const yoff = trackLabels === 'offset' ? 5 : 0;
|
|
13
|
-
|
|
14
|
+
const name = (0, util_1.coarseStripHTML)(trackName);
|
|
15
|
+
return trackLabels !== 'none' ? (react_1.default.createElement("g", null, trackLabels === 'left' ? (react_1.default.createElement("text", { x: trackLabelOffset - 40, y: 20, fill: fill, fontSize: fontSize, dominantBaseline: "hanging", textAnchor: "end" }, name)) : (react_1.default.createElement("text", { x: x + xoff, y: yoff, fill: fill, fontSize: fontSize, dominantBaseline: "hanging" }, name)))) : null;
|
|
14
16
|
}
|
|
15
17
|
exports.default = SVGTrackLabel;
|
|
@@ -45,7 +45,7 @@ const RenderedBlocks = observer(function ({ model, }) {
|
|
|
45
45
|
if (block instanceof InterRegionPaddingBlock) {
|
|
46
46
|
return (React.createElement(InterRegionPaddingBlockComponent, { key: block.key, width: block.widthPx, style: { background: 'none' }, boundary: block.variant === 'boundary' }));
|
|
47
47
|
}
|
|
48
|
-
throw new Error(`invalid block type ${
|
|
48
|
+
throw new Error(`invalid block type ${JSON.stringify(block)}`);
|
|
49
49
|
})));
|
|
50
50
|
});
|
|
51
51
|
export { RenderedBlocks };
|
|
@@ -9,10 +9,10 @@ import { SanitizedHTML } from '@jbrowse/core/ui';
|
|
|
9
9
|
import CascadingMenuButton from '@jbrowse/core/ui/CascadingMenuButton';
|
|
10
10
|
// icons
|
|
11
11
|
import MoreVertIcon from '@mui/icons-material/MoreVert';
|
|
12
|
-
import DragIcon from '@mui/icons-material/DragIndicator';
|
|
13
12
|
import CloseIcon from '@mui/icons-material/Close';
|
|
14
13
|
import MinimizeIcon from '@mui/icons-material/Minimize';
|
|
15
14
|
import AddIcon from '@mui/icons-material/Add';
|
|
15
|
+
import TrackLabelDragHandle from './TrackLabelDragHandle';
|
|
16
16
|
const useStyles = makeStyles()(theme => ({
|
|
17
17
|
root: {
|
|
18
18
|
background: alpha(theme.palette.background.paper, 0.8),
|
|
@@ -29,14 +29,6 @@ const useStyles = makeStyles()(theme => ({
|
|
|
29
29
|
fontSize: '0.8rem',
|
|
30
30
|
pointerEvents: 'none',
|
|
31
31
|
},
|
|
32
|
-
dragHandle: {
|
|
33
|
-
cursor: 'grab',
|
|
34
|
-
},
|
|
35
|
-
dragHandleIcon: {
|
|
36
|
-
display: 'inline-block',
|
|
37
|
-
verticalAlign: 'middle',
|
|
38
|
-
pointerEvents: 'none',
|
|
39
|
-
},
|
|
40
32
|
iconButton: {
|
|
41
33
|
padding: theme.spacing(1),
|
|
42
34
|
},
|
|
@@ -60,15 +52,7 @@ const TrackLabel = observer(React.forwardRef(function TrackLabel2({ track, class
|
|
|
60
52
|
...track.trackMenuItems(),
|
|
61
53
|
].sort((a, b) => ((b === null || b === void 0 ? void 0 : b.priority) || 0) - ((a === null || a === void 0 ? void 0 : a.priority) || 0));
|
|
62
54
|
return (React.createElement(Paper, { ref: ref, className: cx(className, classes.root) },
|
|
63
|
-
React.createElement(
|
|
64
|
-
const target = event.currentTarget;
|
|
65
|
-
if (target.parentNode) {
|
|
66
|
-
const parent = target.parentNode;
|
|
67
|
-
event.dataTransfer.setDragImage(parent, 20, 20);
|
|
68
|
-
view.setDraggingTrackId(track.id);
|
|
69
|
-
}
|
|
70
|
-
}, onDragEnd: () => view.setDraggingTrackId(undefined), "data-testid": `dragHandle-${view.id}-${trackId}` },
|
|
71
|
-
React.createElement(DragIcon, { className: classes.dragHandleIcon, fontSize: "small" })),
|
|
55
|
+
React.createElement(TrackLabelDragHandle, { track: track, trackId: trackId, view: view }),
|
|
72
56
|
React.createElement(IconButton, { onClick: () => view.hideTrack(trackId), className: classes.iconButton, title: "close this track" },
|
|
73
57
|
React.createElement(CloseIcon, { fontSize: "small" })),
|
|
74
58
|
React.createElement(Typography, { variant: "body1", component: "span", className: classes.trackName },
|
|
@@ -0,0 +1,9 @@
|
|
|
1
|
+
import React from 'react';
|
|
2
|
+
import { BaseTrackModel } from '@jbrowse/core/pluggableElementTypes/models';
|
|
3
|
+
import { LinearGenomeViewModel } from '..';
|
|
4
|
+
declare function TrackLabelDragHandle({ trackId, view, track, }: {
|
|
5
|
+
trackId: string;
|
|
6
|
+
track: BaseTrackModel;
|
|
7
|
+
view: LinearGenomeViewModel;
|
|
8
|
+
}): React.JSX.Element;
|
|
9
|
+
export default TrackLabelDragHandle;
|
|
@@ -0,0 +1,27 @@
|
|
|
1
|
+
import React from 'react';
|
|
2
|
+
import { makeStyles } from 'tss-react/mui';
|
|
3
|
+
// icons
|
|
4
|
+
import DragIcon from '@mui/icons-material/DragIndicator';
|
|
5
|
+
const useStyles = makeStyles()({
|
|
6
|
+
dragHandle: {
|
|
7
|
+
cursor: 'grab',
|
|
8
|
+
},
|
|
9
|
+
dragHandleIcon: {
|
|
10
|
+
display: 'inline-block',
|
|
11
|
+
verticalAlign: 'middle',
|
|
12
|
+
pointerEvents: 'none',
|
|
13
|
+
},
|
|
14
|
+
});
|
|
15
|
+
function TrackLabelDragHandle({ trackId, view, track, }) {
|
|
16
|
+
const { classes } = useStyles();
|
|
17
|
+
return (React.createElement("span", { draggable: true, className: classes.dragHandle, onDragStart: event => {
|
|
18
|
+
const target = event.currentTarget;
|
|
19
|
+
if (target.parentNode) {
|
|
20
|
+
const parent = target.parentNode;
|
|
21
|
+
event.dataTransfer.setDragImage(parent, 20, 20);
|
|
22
|
+
view.setDraggingTrackId(track.id);
|
|
23
|
+
}
|
|
24
|
+
}, onDragEnd: () => view.setDraggingTrackId(undefined), "data-testid": `dragHandle-${view.id}-${trackId}` },
|
|
25
|
+
React.createElement(DragIcon, { className: classes.dragHandleIcon, fontSize: "small" })));
|
|
26
|
+
}
|
|
27
|
+
export default TrackLabelDragHandle;
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
import { lazy } from 'react';
|
|
2
2
|
import { ViewType } from '@jbrowse/core/pluggableElementTypes';
|
|
3
3
|
import { stateModelFactory } from './model';
|
|
4
|
-
export default (pluginManager)
|
|
4
|
+
export default function LinearGenomeViewF(pluginManager) {
|
|
5
5
|
pluginManager.addViewType(() => {
|
|
6
6
|
return new ViewType({
|
|
7
7
|
name: 'LinearGenomeView',
|
|
@@ -10,5 +10,5 @@ export default (pluginManager) => {
|
|
|
10
10
|
ReactComponent: lazy(() => import('./components/LinearGenomeView')),
|
|
11
11
|
});
|
|
12
12
|
});
|
|
13
|
-
}
|
|
13
|
+
}
|
|
14
14
|
export * from './model';
|
|
@@ -1,9 +1,11 @@
|
|
|
1
1
|
import React from 'react';
|
|
2
2
|
import { useTheme } from '@mui/material';
|
|
3
|
+
import { coarseStripHTML } from '@jbrowse/core/util';
|
|
3
4
|
export default function SVGTrackLabel({ trackLabels, trackName, fontSize, trackLabelOffset, x, }) {
|
|
4
5
|
const theme = useTheme();
|
|
5
6
|
const fill = theme.palette.text.primary;
|
|
6
7
|
const xoff = trackLabels === 'overlay' ? 5 : 0;
|
|
7
8
|
const yoff = trackLabels === 'offset' ? 5 : 0;
|
|
8
|
-
|
|
9
|
+
const name = coarseStripHTML(trackName);
|
|
10
|
+
return trackLabels !== 'none' ? (React.createElement("g", null, trackLabels === 'left' ? (React.createElement("text", { x: trackLabelOffset - 40, y: 20, fill: fill, fontSize: fontSize, dominantBaseline: "hanging", textAnchor: "end" }, name)) : (React.createElement("text", { x: x + xoff, y: yoff, fill: fill, fontSize: fontSize, dominantBaseline: "hanging" }, name)))) : null;
|
|
9
11
|
}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@jbrowse/plugin-linear-genome-view",
|
|
3
|
-
"version": "2.7.
|
|
3
|
+
"version": "2.7.1",
|
|
4
4
|
"description": "JBrowse 2 linear genome view",
|
|
5
5
|
"keywords": [
|
|
6
6
|
"jbrowse",
|
|
@@ -65,5 +65,5 @@
|
|
|
65
65
|
"access": "public"
|
|
66
66
|
},
|
|
67
67
|
"module": "esm/index.js",
|
|
68
|
-
"gitHead": "
|
|
68
|
+
"gitHead": "2cda1611eebd12517f2a3cfc1b612face27005d4"
|
|
69
69
|
}
|