@jbrowse/plugin-breakpoint-split-view 2.10.2 → 2.11.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.
Files changed (21) hide show
  1. package/dist/BreakpointSplitView/components/AlignmentConnections.d.ts +1 -1
  2. package/dist/BreakpointSplitView/components/AlignmentConnections.js +4 -5
  3. package/dist/BreakpointSplitView/components/Breakends.d.ts +1 -1
  4. package/dist/BreakpointSplitView/components/ExportSvgDialog.js +9 -4
  5. package/dist/BreakpointSplitView/components/Overlay.d.ts +1 -1
  6. package/dist/BreakpointSplitView/components/Translocations.d.ts +1 -1
  7. package/dist/BreakpointSplitView/components/Translocations.js +16 -3
  8. package/dist/BreakpointSplitView/model.d.ts +43 -5
  9. package/dist/BreakpointSplitView/model.js +1 -1
  10. package/dist/BreakpointSplitView/svgcomponents/SVGBreakpointSplitView.js +1 -1
  11. package/esm/BreakpointSplitView/components/AlignmentConnections.d.ts +1 -1
  12. package/esm/BreakpointSplitView/components/AlignmentConnections.js +4 -5
  13. package/esm/BreakpointSplitView/components/Breakends.d.ts +1 -1
  14. package/esm/BreakpointSplitView/components/ExportSvgDialog.js +9 -4
  15. package/esm/BreakpointSplitView/components/Overlay.d.ts +1 -1
  16. package/esm/BreakpointSplitView/components/Translocations.d.ts +1 -1
  17. package/esm/BreakpointSplitView/components/Translocations.js +16 -3
  18. package/esm/BreakpointSplitView/model.d.ts +43 -5
  19. package/esm/BreakpointSplitView/model.js +1 -1
  20. package/esm/BreakpointSplitView/svgcomponents/SVGBreakpointSplitView.js +1 -1
  21. package/package.json +2 -2
package/dist/BreakpointSplitView/components/AlignmentConnections.d.ts CHANGED
@@ -4,6 +4,6 @@ declare const AlignmentConnections: ({ model, trackId, parentRef, getTrackYPosOv
4
4
  model: BreakpointViewModel;
5
5
  trackId: string;
6
6
  parentRef: React.RefObject<SVGSVGElement>;
7
- getTrackYPosOverride?: ((trackId: string, level: number) => number) | undefined;
7
+ getTrackYPosOverride?: (trackId: string, level: number) => number;
8
8
  }) => React.JSX.Element | null;
9
9
  export default AlignmentConnections;
package/dist/BreakpointSplitView/components/AlignmentConnections.js CHANGED
@@ -28,6 +28,7 @@ const mobx_react_1 = require("mobx-react");
28
28
  const mobx_state_tree_1 = require("mobx-state-tree");
29
29
  const material_1 = require("@mui/material");
30
30
  const util_1 = require("@jbrowse/core/util");
31
+ const colord_1 = require("@jbrowse/core/util/colord");
31
32
  // locals
32
33
  const util_2 = require("./util");
33
34
  const util_3 = require("../util");
@@ -42,6 +43,7 @@ const AlignmentConnections = (0, mobx_react_1.observer)(function ({ model, track
42
43
  (0, util_3.useNextFrame)(snap);
43
44
  const allFeatures = model.getTrackFeatures(trackId);
44
45
  const hasPaired = (0, react_1.useMemo)(() => (0, util_2.hasPairedReads)(allFeatures), [allFeatures]);
46
+ const { r, g, b, a } = (0, colord_1.colord)(theme.palette.text.disabled).rgba;
45
47
  const layoutMatches = (0, react_1.useMemo)(() => {
46
48
  const layoutMatches = model.getMatchedFeaturesInLayout(trackId, hasPaired
47
49
  ? (0, util_2.getBadlyPairedAlignments)(allFeatures)
@@ -59,10 +61,7 @@ const AlignmentConnections = (0, mobx_react_1.observer)(function ({ model, track
59
61
  const rect = parentRef.current.getBoundingClientRect();
60
62
  yOffset = rect.top;
61
63
  }
62
- if (!assembly) {
63
- return null;
64
- }
65
- return (react_1.default.createElement("g", { stroke: theme.palette.text.disabled, fill: "none", "data-testid": layoutMatches.length ? `${trackId}-loaded` : trackId }, layoutMatches.map(chunk => {
64
+ return assembly ? (react_1.default.createElement("g", { fill: "none", stroke: `rgb(${r},${g},${b})`, strokeOpacity: a, "data-testid": layoutMatches.length ? `${trackId}-loaded` : trackId }, layoutMatches.map(chunk => {
66
65
  const ret = [];
67
66
  // we follow a path in the list of chunks, not from top to bottom, just in series
68
67
  // following x1,y1 -> x2,y2
@@ -127,6 +126,6 @@ const AlignmentConnections = (0, mobx_react_1.observer)(function ({ model, track
127
126
  }, onMouseOver: () => setMouseoverElt(id), onMouseOut: () => setMouseoverElt(undefined) }));
128
127
  }
129
128
  return ret;
130
- })));
129
+ }))) : null;
131
130
  });
132
131
  exports.default = AlignmentConnections;
package/dist/BreakpointSplitView/components/Breakends.d.ts CHANGED
@@ -4,6 +4,6 @@ declare const Breakends: ({ model, trackId, parentRef: ref, getTrackYPosOverride
4
4
  model: BreakpointViewModel;
5
5
  trackId: string;
6
6
  parentRef: React.RefObject<SVGSVGElement>;
7
- getTrackYPosOverride?: ((trackId: string, level: number) => number) | undefined;
7
+ getTrackYPosOverride?: (trackId: string, level: number) => number;
8
8
  }) => React.JSX.Element | null;
9
9
  export default Breakends;
package/dist/BreakpointSplitView/components/ExportSvgDialog.js CHANGED
@@ -32,6 +32,10 @@ function LoadingMessage() {
32
32
  react_1.default.createElement(material_1.CircularProgress, { size: 20, style: { marginRight: 20 } }),
33
33
  react_1.default.createElement(material_1.Typography, { display: "inline" }, "Creating SVG")));
34
34
  }
35
+ function TextField2({ children, ...rest }) {
36
+ return (react_1.default.createElement("div", null,
37
+ react_1.default.createElement(material_1.TextField, { ...rest }, children)));
38
+ }
35
39
  function useSvgLocal(key, val) {
36
40
  return (0, util_1.useLocalStorage)('svg-' + key, val);
37
41
  }
@@ -47,15 +51,14 @@ function ExportSvgDialog({ model, handleClose, }) {
47
51
  return (react_1.default.createElement(ui_1.Dialog, { open: true, onClose: handleClose, title: "Export SVG" },
48
52
  react_1.default.createElement(material_1.DialogContent, null,
49
53
  error ? (react_1.default.createElement(ui_1.ErrorMessage, { error: error })) : loading ? (react_1.default.createElement(LoadingMessage, null)) : null,
50
- react_1.default.createElement(material_1.TextField, { helperText: "filename", value: filename, onChange: event => setFilename(event.target.value) }),
51
- react_1.default.createElement("br", null),
52
- react_1.default.createElement(material_1.TextField, { select: true, label: "Track label positioning", variant: "outlined", style: { width: 150 }, value: trackLabels, onChange: event => setTrackLabels(event.target.value) },
54
+ react_1.default.createElement(TextField2, { helperText: "filename", value: filename, onChange: event => setFilename(event.target.value) }),
55
+ react_1.default.createElement(TextField2, { select: true, label: "Track label positioning", variant: "outlined", style: { width: 150 }, value: trackLabels, onChange: event => setTrackLabels(event.target.value) },
53
56
  react_1.default.createElement(material_1.MenuItem, { value: "offset" }, "Offset"),
54
57
  react_1.default.createElement(material_1.MenuItem, { value: "overlay" }, "Overlay"),
55
58
  react_1.default.createElement(material_1.MenuItem, { value: "left" }, "Left"),
56
59
  react_1.default.createElement(material_1.MenuItem, { value: "none" }, "None")),
57
60
  react_1.default.createElement("br", null),
58
- session.allThemes ? (react_1.default.createElement(material_1.TextField, { select: true, label: "Theme", variant: "outlined", value: themeName, onChange: event => setThemeName(event.target.value) }, Object.entries(session.allThemes()).map(([key, val]) => (react_1.default.createElement(material_1.MenuItem, { key: key, value: key },
61
+ session.allThemes ? (react_1.default.createElement(TextField2, { select: true, label: "Theme", variant: "outlined", value: themeName, onChange: event => setThemeName(event.target.value) }, Object.entries(session.allThemes()).map(([key, val]) => (react_1.default.createElement(material_1.MenuItem, { key: key, value: key },
59
62
  // @ts-expect-error
60
63
  val.name || '(Unknown name)'))))) : null,
61
64
  offscreenCanvas ? (react_1.default.createElement(material_1.FormControlLabel, { control: react_1.default.createElement(material_1.Checkbox, { checked: rasterizeLayers, onChange: () => setRasterizeLayers(val => !val) }), label: "Rasterize canvas based tracks? File may be much larger if this is turned off" })) : (react_1.default.createElement(material_1.Typography, null, "Note: rasterizing layers not yet supported in this browser, so SVG size may be large"))),
@@ -76,6 +79,8 @@ function ExportSvgDialog({ model, handleClose, }) {
76
79
  catch (e) {
77
80
  console.error(e);
78
81
  setError(e);
82
+ }
83
+ finally {
79
84
  setLoading(false);
80
85
  }
81
86
  } }, "Submit"))));
package/dist/BreakpointSplitView/components/Overlay.d.ts CHANGED
@@ -4,6 +4,6 @@ declare const Overlay: (props: {
4
4
  parentRef: React.RefObject<SVGSVGElement>;
5
5
  model: BreakpointViewModel;
6
6
  trackId: string;
7
- getTrackYPosOverride?: ((trackId: string, level: number) => number) | undefined;
7
+ getTrackYPosOverride?: (trackId: string, level: number) => number;
8
8
  }) => React.JSX.Element | null;
9
9
  export default Overlay;
package/dist/BreakpointSplitView/components/Translocations.d.ts CHANGED
@@ -4,6 +4,6 @@ declare const Translocations: ({ model, trackId, parentRef: ref, getTrackYPosOve
4
4
  model: BreakpointViewModel;
5
5
  trackId: string;
6
6
  parentRef: React.RefObject<SVGSVGElement>;
7
- getTrackYPosOverride?: ((trackId: string, level: number) => number) | undefined;
7
+ getTrackYPosOverride?: (trackId: string, level: number) => number;
8
8
  }) => React.JSX.Element | null;
9
9
  export default Translocations;
package/dist/BreakpointSplitView/components/Translocations.js CHANGED
@@ -31,6 +31,17 @@ const mobx_state_tree_1 = require("mobx-state-tree");
31
31
  const util_2 = require("./util");
32
32
  const util_3 = require("../util");
33
33
  const [LEFT] = [0, 1, 2, 3];
34
+ function str(s) {
35
+ if (s === '+') {
36
+ return 1;
37
+ }
38
+ else if (s === '-') {
39
+ return -1;
40
+ }
41
+ else {
42
+ return 0;
43
+ }
44
+ }
34
45
  const Translocations = (0, mobx_react_1.observer)(function ({ model, trackId, parentRef: ref, getTrackYPosOverride, }) {
35
46
  const { views } = model;
36
47
  const session = (0, util_1.getSession)(model);
@@ -57,6 +68,7 @@ const Translocations = (0, mobx_react_1.observer)(function ({ model, trackId, pa
57
68
  return null;
58
69
  }
59
70
  return (react_1.default.createElement("g", { fill: "none", stroke: "green", strokeWidth: 5, "data-testid": layoutMatches.length ? `${trackId}-loaded` : trackId }, layoutMatches.map(chunk => {
71
+ var _a, _b;
60
72
  // we follow a path in the list of chunks, not from top to bottom,
61
73
  // just in series following x1,y1 -> x2,y2
62
74
  const ret = [];
@@ -69,7 +81,8 @@ const Translocations = (0, mobx_react_1.observer)(function ({ model, trackId, pa
69
81
  const info = f1.get('INFO');
70
82
  const chr2 = info.CHR2[0];
71
83
  const end2 = info.END[0];
72
- const [myDirection, mateDirection] = info.STRANDS[0].split('');
84
+ const res = (_b = (_a = info.STRANDS) === null || _a === void 0 ? void 0 : _a[0]) === null || _b === void 0 ? void 0 : _b.split(''); // not all files have STRANDS
85
+ const [myDirection, mateDirection] = res !== null && res !== void 0 ? res : ['.', '.'];
73
86
  const r = (0, util_3.getPxFromCoordinate)(views[level2], chr2, end2);
74
87
  if (r) {
75
88
  const c2 = [r, 0, r + 1, 0];
@@ -84,7 +97,7 @@ const Translocations = (0, mobx_react_1.observer)(function ({ model, trackId, pa
84
97
  yOffset;
85
98
  const path = [
86
99
  'M', // move to
87
- x1 - 20 * (myDirection === '+' ? 1 : -1) * (reversed1 ? -1 : 1),
100
+ x1 - 20 * str(myDirection) * (reversed1 ? -1 : 1),
88
101
  y1,
89
102
  'L', // line to
90
103
  x1,
@@ -93,7 +106,7 @@ const Translocations = (0, mobx_react_1.observer)(function ({ model, trackId, pa
93
106
  x2,
94
107
  y2,
95
108
  'L', // line to
96
- x2 - 20 * (mateDirection === '+' ? 1 : -1) * (reversed2 ? -1 : 1),
109
+ x2 - 20 * str(mateDirection) * (reversed2 ? -1 : 1),
97
110
  y2,
98
111
  ].join(' ');
99
112
  ret.push(react_1.default.createElement("path", { d: path, key: JSON.stringify(path), strokeWidth: id === mouseoverElt ? 10 : 5, onClick: () => {
package/dist/BreakpointSplitView/model.d.ts CHANGED
@@ -70,6 +70,8 @@ export default function stateModelFactory(pluginManager: PluginManager): import(
70
70
  showCytobandsSetting: import("mobx-state-tree").IOptionalIType<import("mobx-state-tree").ISimpleType<boolean>, [undefined]>;
71
71
  trackLabels: import("mobx-state-tree").IOptionalIType<import("mobx-state-tree").ISimpleType<string>, [undefined]>;
72
72
  showGridlines: import("mobx-state-tree").IType<boolean | undefined, boolean, boolean>;
73
+ highlight: import("mobx-state-tree").IOptionalIType<import("mobx-state-tree").IArrayType<import("mobx-state-tree").IType<Required<import("@jbrowse/core/util").ParsedLocString>, Required<import("@jbrowse/core/util").ParsedLocString>, Required<import("@jbrowse/core/util").ParsedLocString>>>, [undefined]>;
74
+ colorByCDS: import("mobx-state-tree").IOptionalIType<import("mobx-state-tree").ISimpleType<boolean>, [undefined]>;
73
75
  }, {
74
76
  width: number;
75
77
  } & {
@@ -88,9 +90,7 @@ export default function stateModelFactory(pluginManager: PluginManager): import(
88
90
  trackRefs: Record<string, HTMLDivElement>;
89
91
  coarseDynamicBlocks: import("@jbrowse/core/util/blockTypes").BaseBlock[];
90
92
  coarseTotalBp: number;
91
- leftOffset: import("@jbrowse/plugin-linear-genome-view/src/LinearGenomeView").BpOffset | undefined; /**
92
- * #action
93
- */
93
+ leftOffset: import("@jbrowse/plugin-linear-genome-view/src/LinearGenomeView").BpOffset | undefined;
94
94
  rightOffset: import("@jbrowse/plugin-linear-genome-view/src/LinearGenomeView").BpOffset | undefined;
95
95
  } & {
96
96
  readonly trackLabelsSetting: any;
@@ -127,6 +127,7 @@ export default function stateModelFactory(pluginManager: PluginManager): import(
127
127
  rewriteOnClicks(trackType: string, viewMenuActions: import("@jbrowse/core/ui").MenuItem[]): void;
128
128
  readonly trackTypeActions: Map<string, import("@jbrowse/core/ui").MenuItem[]>;
129
129
  } & {
130
+ setColorByCDS(flag: boolean): void;
130
131
  setShowCytobands(flag: boolean): void;
131
132
  setWidth(newWidth: number): void;
132
133
  setError(error: unknown): void;
@@ -134,6 +135,9 @@ export default function stateModelFactory(pluginManager: PluginManager): import(
134
135
  setHideHeaderOverview(b: boolean): void;
135
136
  setHideNoTracksActive(b: boolean): void;
136
137
  setShowGridlines(b: boolean): void;
138
+ addToHighlights(highlight: Required<import("@jbrowse/core/util").ParsedLocString>): void;
139
+ setHighlight(highlight: Required<import("@jbrowse/core/util").ParsedLocString>[] | undefined): void;
140
+ removeHighlight(highlight: Required<import("@jbrowse/core/util").ParsedLocString>): void;
137
141
  scrollTo(offsetPx: number): number;
138
142
  zoomTo(bpPerPx: number, offset?: number, centerAtOffset?: boolean): number;
139
143
  setOffsets(left?: import("@jbrowse/plugin-linear-genome-view/src/LinearGenomeView").BpOffset | undefined, right?: import("@jbrowse/plugin-linear-genome-view/src/LinearGenomeView").BpOffset | undefined): void;
@@ -143,6 +147,10 @@ export default function stateModelFactory(pluginManager: PluginManager): import(
143
147
  showTrack(trackId: string, initialSnapshot?: {}, displayInitialSnapshot?: {}): any;
144
148
  hideTrack(trackId: string): number;
145
149
  } & {
150
+ moveTrackDown(id: string): void;
151
+ moveTrackUp(id: string): void;
152
+ moveTrackToTop(id: string): void;
153
+ moveTrackToBottom(id: string): void;
146
154
  moveTrack(movingId: string, targetId: string): void;
147
155
  closeView(): void;
148
156
  toggleTrack(trackId: string): boolean;
@@ -340,7 +348,7 @@ export default function stateModelFactory(pluginManager: PluginManager): import(
340
348
  index: number;
341
349
  offsetPx: number;
342
350
  } | undefined;
343
- centerAt(coord: number, refName: string, regionNumber: number): void;
351
+ centerAt(coord: number, refName: string, regionNumber?: number | undefined): void;
344
352
  pxToBp(px: number): {
345
353
  coord: number;
346
354
  index: number;
@@ -365,7 +373,37 @@ export default function stateModelFactory(pluginManager: PluginManager): import(
365
373
  } | undefined;
366
374
  } & {
367
375
  afterCreate(): void;
368
- }, import("mobx-state-tree")._NotCustomized, import("mobx-state-tree")._NotCustomized>>;
376
+ }, import("mobx-state-tree").ModelCreationType<import("mobx-state-tree/dist/internal").ExtractCFromProps<{
377
+ id: import("mobx-state-tree").IOptionalIType<import("mobx-state-tree").ISimpleType<string>, [undefined]>;
378
+ displayName: import("mobx-state-tree").IMaybe<import("mobx-state-tree").ISimpleType<string>>;
379
+ minimized: import("mobx-state-tree").IType<boolean | undefined, boolean, boolean>;
380
+ } & {
381
+ id: import("mobx-state-tree").IOptionalIType<import("mobx-state-tree").ISimpleType<string>, [undefined]>;
382
+ type: import("mobx-state-tree").IType<string | undefined, string, string>;
383
+ offsetPx: import("mobx-state-tree").IType<number | undefined, number, number>;
384
+ bpPerPx: import("mobx-state-tree").IType<number | undefined, number, number>;
385
+ displayedRegions: import("mobx-state-tree").IArrayType<import("mobx-state-tree").IModelType<{
386
+ refName: import("mobx-state-tree").ISimpleType<string>;
387
+ start: import("mobx-state-tree").ISimpleType<number>;
388
+ end: import("mobx-state-tree").ISimpleType<number>;
389
+ reversed: import("mobx-state-tree").IOptionalIType<import("mobx-state-tree").ISimpleType<boolean>, [undefined]>;
390
+ } & {
391
+ assemblyName: import("mobx-state-tree").ISimpleType<string>;
392
+ }, {
393
+ setRefName(newRefName: string): void;
394
+ }, import("mobx-state-tree")._NotCustomized, import("mobx-state-tree")._NotCustomized>>;
395
+ tracks: import("mobx-state-tree").IArrayType<import("mobx-state-tree").IAnyType>;
396
+ hideHeader: import("mobx-state-tree").IType<boolean | undefined, boolean, boolean>;
397
+ hideHeaderOverview: import("mobx-state-tree").IType<boolean | undefined, boolean, boolean>;
398
+ hideNoTracksActive: import("mobx-state-tree").IType<boolean | undefined, boolean, boolean>;
399
+ trackSelectorType: import("mobx-state-tree").IOptionalIType<import("mobx-state-tree").ISimpleType<string>, [undefined]>;
400
+ showCenterLine: import("mobx-state-tree").IOptionalIType<import("mobx-state-tree").ISimpleType<boolean>, [undefined]>;
401
+ showCytobandsSetting: import("mobx-state-tree").IOptionalIType<import("mobx-state-tree").ISimpleType<boolean>, [undefined]>;
402
+ trackLabels: import("mobx-state-tree").IOptionalIType<import("mobx-state-tree").ISimpleType<string>, [undefined]>;
403
+ showGridlines: import("mobx-state-tree").IType<boolean | undefined, boolean, boolean>;
404
+ highlight: import("mobx-state-tree").IOptionalIType<import("mobx-state-tree").IArrayType<import("mobx-state-tree").IType<Required<import("@jbrowse/core/util").ParsedLocString>, Required<import("@jbrowse/core/util").ParsedLocString>, Required<import("@jbrowse/core/util").ParsedLocString>>>, [undefined]>;
405
+ colorByCDS: import("mobx-state-tree").IOptionalIType<import("mobx-state-tree").ISimpleType<boolean>, [undefined]>;
406
+ }>>, import("mobx-state-tree")._NotCustomized>>;
369
407
  }, {
370
408
  width: number;
371
409
  } & {
package/dist/BreakpointSplitView/model.js CHANGED
@@ -259,7 +259,7 @@ function stateModelFactory(pluginManager) {
259
259
  }
260
260
  catch (e) {
261
261
  console.error(e);
262
- (0, util_1.getSession)(self).notify(`${e}`, 'error');
262
+ (0, util_1.getSession)(self).notifyError(`${e}`, e);
263
263
  }
264
264
  }));
265
265
  },
package/dist/BreakpointSplitView/svgcomponents/SVGBreakpointSplitView.js CHANGED
@@ -18,7 +18,7 @@ const util_2 = require("./util");
18
18
  // render LGV to SVG
19
19
  async function renderToSvg(model, opts) {
20
20
  var _a;
21
- const { textHeight = 18, headerHeight = 30, rulerHeight = 30, fontSize = 13, trackLabels = 'offset', Wrapper = ({ children }) => react_1.default.createElement(react_1.default.Fragment, null, children), themeName = 'default', } = opts;
21
+ const { textHeight = 18, headerHeight = 30, rulerHeight = 30, fontSize = 13, trackLabels = 'offset', Wrapper = ({ children }) => children, themeName = 'default', } = opts;
22
22
  // eslint-disable-next-line @typescript-eslint/no-explicit-any
23
23
  const { createRootFn } = (0, mobx_state_tree_1.getRoot)(model);
24
24
  const session = (0, util_1.getSession)(model);
package/esm/BreakpointSplitView/components/AlignmentConnections.d.ts CHANGED
@@ -4,6 +4,6 @@ declare const AlignmentConnections: ({ model, trackId, parentRef, getTrackYPosOv
4
4
  model: BreakpointViewModel;
5
5
  trackId: string;
6
6
  parentRef: React.RefObject<SVGSVGElement>;
7
- getTrackYPosOverride?: ((trackId: string, level: number) => number) | undefined;
7
+ getTrackYPosOverride?: (trackId: string, level: number) => number;
8
8
  }) => React.JSX.Element | null;
9
9
  export default AlignmentConnections;
package/esm/BreakpointSplitView/components/AlignmentConnections.js CHANGED
@@ -3,6 +3,7 @@ import { observer } from 'mobx-react';
3
3
  import { getSnapshot } from 'mobx-state-tree';
4
4
  import { useTheme } from '@mui/material';
5
5
  import { getSession } from '@jbrowse/core/util';
6
+ import { colord } from '@jbrowse/core/util/colord';
6
7
  // locals
7
8
  import { getBadlyPairedAlignments, getMatchedAlignmentFeatures, hasPairedReads, } from './util';
8
9
  import { yPos, useNextFrame, getPxFromCoordinate } from '../util';
@@ -17,6 +18,7 @@ const AlignmentConnections = observer(function ({ model, trackId, parentRef, get
17
18
  useNextFrame(snap);
18
19
  const allFeatures = model.getTrackFeatures(trackId);
19
20
  const hasPaired = useMemo(() => hasPairedReads(allFeatures), [allFeatures]);
21
+ const { r, g, b, a } = colord(theme.palette.text.disabled).rgba;
20
22
  const layoutMatches = useMemo(() => {
21
23
  const layoutMatches = model.getMatchedFeaturesInLayout(trackId, hasPaired
22
24
  ? getBadlyPairedAlignments(allFeatures)
@@ -34,10 +36,7 @@ const AlignmentConnections = observer(function ({ model, trackId, parentRef, get
34
36
  const rect = parentRef.current.getBoundingClientRect();
35
37
  yOffset = rect.top;
36
38
  }
37
- if (!assembly) {
38
- return null;
39
- }
40
- return (React.createElement("g", { stroke: theme.palette.text.disabled, fill: "none", "data-testid": layoutMatches.length ? `${trackId}-loaded` : trackId }, layoutMatches.map(chunk => {
39
+ return assembly ? (React.createElement("g", { fill: "none", stroke: `rgb(${r},${g},${b})`, strokeOpacity: a, "data-testid": layoutMatches.length ? `${trackId}-loaded` : trackId }, layoutMatches.map(chunk => {
41
40
  const ret = [];
42
41
  // we follow a path in the list of chunks, not from top to bottom, just in series
43
42
  // following x1,y1 -> x2,y2
@@ -102,6 +101,6 @@ const AlignmentConnections = observer(function ({ model, trackId, parentRef, get
102
101
  }, onMouseOver: () => setMouseoverElt(id), onMouseOut: () => setMouseoverElt(undefined) }));
103
102
  }
104
103
  return ret;
105
- })));
104
+ }))) : null;
106
105
  });
107
106
  export default AlignmentConnections;
package/esm/BreakpointSplitView/components/Breakends.d.ts CHANGED
@@ -4,6 +4,6 @@ declare const Breakends: ({ model, trackId, parentRef: ref, getTrackYPosOverride
4
4
  model: BreakpointViewModel;
5
5
  trackId: string;
6
6
  parentRef: React.RefObject<SVGSVGElement>;
7
- getTrackYPosOverride?: ((trackId: string, level: number) => number) | undefined;
7
+ getTrackYPosOverride?: (trackId: string, level: number) => number;
8
8
  }) => React.JSX.Element | null;
9
9
  export default Breakends;
package/esm/BreakpointSplitView/components/ExportSvgDialog.js CHANGED
@@ -7,6 +7,10 @@ function LoadingMessage() {
7
7
  React.createElement(CircularProgress, { size: 20, style: { marginRight: 20 } }),
8
8
  React.createElement(Typography, { display: "inline" }, "Creating SVG")));
9
9
  }
10
+ function TextField2({ children, ...rest }) {
11
+ return (React.createElement("div", null,
12
+ React.createElement(TextField, { ...rest }, children)));
13
+ }
10
14
  function useSvgLocal(key, val) {
11
15
  return useLocalStorage('svg-' + key, val);
12
16
  }
@@ -22,15 +26,14 @@ export default function ExportSvgDialog({ model, handleClose, }) {
22
26
  return (React.createElement(Dialog, { open: true, onClose: handleClose, title: "Export SVG" },
23
27
  React.createElement(DialogContent, null,
24
28
  error ? (React.createElement(ErrorMessage, { error: error })) : loading ? (React.createElement(LoadingMessage, null)) : null,
25
- React.createElement(TextField, { helperText: "filename", value: filename, onChange: event => setFilename(event.target.value) }),
26
- React.createElement("br", null),
27
- React.createElement(TextField, { select: true, label: "Track label positioning", variant: "outlined", style: { width: 150 }, value: trackLabels, onChange: event => setTrackLabels(event.target.value) },
29
+ React.createElement(TextField2, { helperText: "filename", value: filename, onChange: event => setFilename(event.target.value) }),
30
+ React.createElement(TextField2, { select: true, label: "Track label positioning", variant: "outlined", style: { width: 150 }, value: trackLabels, onChange: event => setTrackLabels(event.target.value) },
28
31
  React.createElement(MenuItem, { value: "offset" }, "Offset"),
29
32
  React.createElement(MenuItem, { value: "overlay" }, "Overlay"),
30
33
  React.createElement(MenuItem, { value: "left" }, "Left"),
31
34
  React.createElement(MenuItem, { value: "none" }, "None")),
32
35
  React.createElement("br", null),
33
- session.allThemes ? (React.createElement(TextField, { select: true, label: "Theme", variant: "outlined", value: themeName, onChange: event => setThemeName(event.target.value) }, Object.entries(session.allThemes()).map(([key, val]) => (React.createElement(MenuItem, { key: key, value: key },
36
+ session.allThemes ? (React.createElement(TextField2, { select: true, label: "Theme", variant: "outlined", value: themeName, onChange: event => setThemeName(event.target.value) }, Object.entries(session.allThemes()).map(([key, val]) => (React.createElement(MenuItem, { key: key, value: key },
34
37
  // @ts-expect-error
35
38
  val.name || '(Unknown name)'))))) : null,
36
39
  offscreenCanvas ? (React.createElement(FormControlLabel, { control: React.createElement(Checkbox, { checked: rasterizeLayers, onChange: () => setRasterizeLayers(val => !val) }), label: "Rasterize canvas based tracks? File may be much larger if this is turned off" })) : (React.createElement(Typography, null, "Note: rasterizing layers not yet supported in this browser, so SVG size may be large"))),
@@ -51,6 +54,8 @@ export default function ExportSvgDialog({ model, handleClose, }) {
51
54
  catch (e) {
52
55
  console.error(e);
53
56
  setError(e);
57
+ }
58
+ finally {
54
59
  setLoading(false);
55
60
  }
56
61
  } }, "Submit"))));
package/esm/BreakpointSplitView/components/Overlay.d.ts CHANGED
@@ -4,6 +4,6 @@ declare const Overlay: (props: {
4
4
  parentRef: React.RefObject<SVGSVGElement>;
5
5
  model: BreakpointViewModel;
6
6
  trackId: string;
7
- getTrackYPosOverride?: ((trackId: string, level: number) => number) | undefined;
7
+ getTrackYPosOverride?: (trackId: string, level: number) => number;
8
8
  }) => React.JSX.Element | null;
9
9
  export default Overlay;
package/esm/BreakpointSplitView/components/Translocations.d.ts CHANGED
@@ -4,6 +4,6 @@ declare const Translocations: ({ model, trackId, parentRef: ref, getTrackYPosOve
4
4
  model: BreakpointViewModel;
5
5
  trackId: string;
6
6
  parentRef: React.RefObject<SVGSVGElement>;
7
- getTrackYPosOverride?: ((trackId: string, level: number) => number) | undefined;
7
+ getTrackYPosOverride?: (trackId: string, level: number) => number;
8
8
  }) => React.JSX.Element | null;
9
9
  export default Translocations;
package/esm/BreakpointSplitView/components/Translocations.js CHANGED
@@ -6,6 +6,17 @@ import { getSnapshot } from 'mobx-state-tree';
6
6
  import { getMatchedTranslocationFeatures } from './util';
7
7
  import { yPos, getPxFromCoordinate, useNextFrame } from '../util';
8
8
  const [LEFT] = [0, 1, 2, 3];
9
+ function str(s) {
10
+ if (s === '+') {
11
+ return 1;
12
+ }
13
+ else if (s === '-') {
14
+ return -1;
15
+ }
16
+ else {
17
+ return 0;
18
+ }
19
+ }
9
20
  const Translocations = observer(function ({ model, trackId, parentRef: ref, getTrackYPosOverride, }) {
10
21
  const { views } = model;
11
22
  const session = getSession(model);
@@ -32,6 +43,7 @@ const Translocations = observer(function ({ model, trackId, parentRef: ref, getT
32
43
  return null;
33
44
  }
34
45
  return (React.createElement("g", { fill: "none", stroke: "green", strokeWidth: 5, "data-testid": layoutMatches.length ? `${trackId}-loaded` : trackId }, layoutMatches.map(chunk => {
46
+ var _a, _b;
35
47
  // we follow a path in the list of chunks, not from top to bottom,
36
48
  // just in series following x1,y1 -> x2,y2
37
49
  const ret = [];
@@ -44,7 +56,8 @@ const Translocations = observer(function ({ model, trackId, parentRef: ref, getT
44
56
  const info = f1.get('INFO');
45
57
  const chr2 = info.CHR2[0];
46
58
  const end2 = info.END[0];
47
- const [myDirection, mateDirection] = info.STRANDS[0].split('');
59
+ const res = (_b = (_a = info.STRANDS) === null || _a === void 0 ? void 0 : _a[0]) === null || _b === void 0 ? void 0 : _b.split(''); // not all files have STRANDS
60
+ const [myDirection, mateDirection] = res !== null && res !== void 0 ? res : ['.', '.'];
48
61
  const r = getPxFromCoordinate(views[level2], chr2, end2);
49
62
  if (r) {
50
63
  const c2 = [r, 0, r + 1, 0];
@@ -59,7 +72,7 @@ const Translocations = observer(function ({ model, trackId, parentRef: ref, getT
59
72
  yOffset;
60
73
  const path = [
61
74
  'M', // move to
62
- x1 - 20 * (myDirection === '+' ? 1 : -1) * (reversed1 ? -1 : 1),
75
+ x1 - 20 * str(myDirection) * (reversed1 ? -1 : 1),
63
76
  y1,
64
77
  'L', // line to
65
78
  x1,
@@ -68,7 +81,7 @@ const Translocations = observer(function ({ model, trackId, parentRef: ref, getT
68
81
  x2,
69
82
  y2,
70
83
  'L', // line to
71
- x2 - 20 * (mateDirection === '+' ? 1 : -1) * (reversed2 ? -1 : 1),
84
+ x2 - 20 * str(mateDirection) * (reversed2 ? -1 : 1),
72
85
  y2,
73
86
  ].join(' ');
74
87
  ret.push(React.createElement("path", { d: path, key: JSON.stringify(path), strokeWidth: id === mouseoverElt ? 10 : 5, onClick: () => {
package/esm/BreakpointSplitView/model.d.ts CHANGED
@@ -70,6 +70,8 @@ export default function stateModelFactory(pluginManager: PluginManager): import(
70
70
  showCytobandsSetting: import("mobx-state-tree").IOptionalIType<import("mobx-state-tree").ISimpleType<boolean>, [undefined]>;
71
71
  trackLabels: import("mobx-state-tree").IOptionalIType<import("mobx-state-tree").ISimpleType<string>, [undefined]>;
72
72
  showGridlines: import("mobx-state-tree").IType<boolean | undefined, boolean, boolean>;
73
+ highlight: import("mobx-state-tree").IOptionalIType<import("mobx-state-tree").IArrayType<import("mobx-state-tree").IType<Required<import("@jbrowse/core/util").ParsedLocString>, Required<import("@jbrowse/core/util").ParsedLocString>, Required<import("@jbrowse/core/util").ParsedLocString>>>, [undefined]>;
74
+ colorByCDS: import("mobx-state-tree").IOptionalIType<import("mobx-state-tree").ISimpleType<boolean>, [undefined]>;
73
75
  }, {
74
76
  width: number;
75
77
  } & {
@@ -88,9 +90,7 @@ export default function stateModelFactory(pluginManager: PluginManager): import(
88
90
  trackRefs: Record<string, HTMLDivElement>;
89
91
  coarseDynamicBlocks: import("@jbrowse/core/util/blockTypes").BaseBlock[];
90
92
  coarseTotalBp: number;
91
- leftOffset: import("@jbrowse/plugin-linear-genome-view/src/LinearGenomeView").BpOffset | undefined; /**
92
- * #action
93
- */
93
+ leftOffset: import("@jbrowse/plugin-linear-genome-view/src/LinearGenomeView").BpOffset | undefined;
94
94
  rightOffset: import("@jbrowse/plugin-linear-genome-view/src/LinearGenomeView").BpOffset | undefined;
95
95
  } & {
96
96
  readonly trackLabelsSetting: any;
@@ -127,6 +127,7 @@ export default function stateModelFactory(pluginManager: PluginManager): import(
127
127
  rewriteOnClicks(trackType: string, viewMenuActions: import("@jbrowse/core/ui").MenuItem[]): void;
128
128
  readonly trackTypeActions: Map<string, import("@jbrowse/core/ui").MenuItem[]>;
129
129
  } & {
130
+ setColorByCDS(flag: boolean): void;
130
131
  setShowCytobands(flag: boolean): void;
131
132
  setWidth(newWidth: number): void;
132
133
  setError(error: unknown): void;
@@ -134,6 +135,9 @@ export default function stateModelFactory(pluginManager: PluginManager): import(
134
135
  setHideHeaderOverview(b: boolean): void;
135
136
  setHideNoTracksActive(b: boolean): void;
136
137
  setShowGridlines(b: boolean): void;
138
+ addToHighlights(highlight: Required<import("@jbrowse/core/util").ParsedLocString>): void;
139
+ setHighlight(highlight: Required<import("@jbrowse/core/util").ParsedLocString>[] | undefined): void;
140
+ removeHighlight(highlight: Required<import("@jbrowse/core/util").ParsedLocString>): void;
137
141
  scrollTo(offsetPx: number): number;
138
142
  zoomTo(bpPerPx: number, offset?: number, centerAtOffset?: boolean): number;
139
143
  setOffsets(left?: import("@jbrowse/plugin-linear-genome-view/src/LinearGenomeView").BpOffset | undefined, right?: import("@jbrowse/plugin-linear-genome-view/src/LinearGenomeView").BpOffset | undefined): void;
@@ -143,6 +147,10 @@ export default function stateModelFactory(pluginManager: PluginManager): import(
143
147
  showTrack(trackId: string, initialSnapshot?: {}, displayInitialSnapshot?: {}): any;
144
148
  hideTrack(trackId: string): number;
145
149
  } & {
150
+ moveTrackDown(id: string): void;
151
+ moveTrackUp(id: string): void;
152
+ moveTrackToTop(id: string): void;
153
+ moveTrackToBottom(id: string): void;
146
154
  moveTrack(movingId: string, targetId: string): void;
147
155
  closeView(): void;
148
156
  toggleTrack(trackId: string): boolean;
@@ -340,7 +348,7 @@ export default function stateModelFactory(pluginManager: PluginManager): import(
340
348
  index: number;
341
349
  offsetPx: number;
342
350
  } | undefined;
343
- centerAt(coord: number, refName: string, regionNumber: number): void;
351
+ centerAt(coord: number, refName: string, regionNumber?: number | undefined): void;
344
352
  pxToBp(px: number): {
345
353
  coord: number;
346
354
  index: number;
@@ -365,7 +373,37 @@ export default function stateModelFactory(pluginManager: PluginManager): import(
365
373
  } | undefined;
366
374
  } & {
367
375
  afterCreate(): void;
368
- }, import("mobx-state-tree")._NotCustomized, import("mobx-state-tree")._NotCustomized>>;
376
+ }, import("mobx-state-tree").ModelCreationType<import("mobx-state-tree/dist/internal").ExtractCFromProps<{
377
+ id: import("mobx-state-tree").IOptionalIType<import("mobx-state-tree").ISimpleType<string>, [undefined]>;
378
+ displayName: import("mobx-state-tree").IMaybe<import("mobx-state-tree").ISimpleType<string>>;
379
+ minimized: import("mobx-state-tree").IType<boolean | undefined, boolean, boolean>;
380
+ } & {
381
+ id: import("mobx-state-tree").IOptionalIType<import("mobx-state-tree").ISimpleType<string>, [undefined]>;
382
+ type: import("mobx-state-tree").IType<string | undefined, string, string>;
383
+ offsetPx: import("mobx-state-tree").IType<number | undefined, number, number>;
384
+ bpPerPx: import("mobx-state-tree").IType<number | undefined, number, number>;
385
+ displayedRegions: import("mobx-state-tree").IArrayType<import("mobx-state-tree").IModelType<{
386
+ refName: import("mobx-state-tree").ISimpleType<string>;
387
+ start: import("mobx-state-tree").ISimpleType<number>;
388
+ end: import("mobx-state-tree").ISimpleType<number>;
389
+ reversed: import("mobx-state-tree").IOptionalIType<import("mobx-state-tree").ISimpleType<boolean>, [undefined]>;
390
+ } & {
391
+ assemblyName: import("mobx-state-tree").ISimpleType<string>;
392
+ }, {
393
+ setRefName(newRefName: string): void;
394
+ }, import("mobx-state-tree")._NotCustomized, import("mobx-state-tree")._NotCustomized>>;
395
+ tracks: import("mobx-state-tree").IArrayType<import("mobx-state-tree").IAnyType>;
396
+ hideHeader: import("mobx-state-tree").IType<boolean | undefined, boolean, boolean>;
397
+ hideHeaderOverview: import("mobx-state-tree").IType<boolean | undefined, boolean, boolean>;
398
+ hideNoTracksActive: import("mobx-state-tree").IType<boolean | undefined, boolean, boolean>;
399
+ trackSelectorType: import("mobx-state-tree").IOptionalIType<import("mobx-state-tree").ISimpleType<string>, [undefined]>;
400
+ showCenterLine: import("mobx-state-tree").IOptionalIType<import("mobx-state-tree").ISimpleType<boolean>, [undefined]>;
401
+ showCytobandsSetting: import("mobx-state-tree").IOptionalIType<import("mobx-state-tree").ISimpleType<boolean>, [undefined]>;
402
+ trackLabels: import("mobx-state-tree").IOptionalIType<import("mobx-state-tree").ISimpleType<string>, [undefined]>;
403
+ showGridlines: import("mobx-state-tree").IType<boolean | undefined, boolean, boolean>;
404
+ highlight: import("mobx-state-tree").IOptionalIType<import("mobx-state-tree").IArrayType<import("mobx-state-tree").IType<Required<import("@jbrowse/core/util").ParsedLocString>, Required<import("@jbrowse/core/util").ParsedLocString>, Required<import("@jbrowse/core/util").ParsedLocString>>>, [undefined]>;
405
+ colorByCDS: import("mobx-state-tree").IOptionalIType<import("mobx-state-tree").ISimpleType<boolean>, [undefined]>;
406
+ }>>, import("mobx-state-tree")._NotCustomized>>;
369
407
  }, {
370
408
  width: number;
371
409
  } & {
package/esm/BreakpointSplitView/model.js CHANGED
@@ -231,7 +231,7 @@ export default function stateModelFactory(pluginManager) {
231
231
  }
232
232
  catch (e) {
233
233
  console.error(e);
234
- getSession(self).notify(`${e}`, 'error');
234
+ getSession(self).notifyError(`${e}`, e);
235
235
  }
236
236
  }));
237
237
  },
package/esm/BreakpointSplitView/svgcomponents/SVGBreakpointSplitView.js CHANGED
@@ -12,7 +12,7 @@ import { getTrackNameMaxLen, getTrackOffsets } from './util';
12
12
  // render LGV to SVG
13
13
  export async function renderToSvg(model, opts) {
14
14
  var _a;
15
- const { textHeight = 18, headerHeight = 30, rulerHeight = 30, fontSize = 13, trackLabels = 'offset', Wrapper = ({ children }) => React.createElement(React.Fragment, null, children), themeName = 'default', } = opts;
15
+ const { textHeight = 18, headerHeight = 30, rulerHeight = 30, fontSize = 13, trackLabels = 'offset', Wrapper = ({ children }) => children, themeName = 'default', } = opts;
16
16
  // eslint-disable-next-line @typescript-eslint/no-explicit-any
17
17
  const { createRootFn } = getRoot(model);
18
18
  const session = getSession(model);
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@jbrowse/plugin-breakpoint-split-view",
3
- "version": "2.10.2",
3
+ "version": "2.11.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": "7ca3b7db337ebd88853e2d96cdab940ed550c4fb"
61
+ "gitHead": "3d43a820b9274a6160aa4dc15616147f390d9094"
62
62
  }