@jbrowse/plugin-linear-comparative-view 2.18.0 → 3.0.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 (153) hide show
  1. package/dist/LGVSyntenyDisplay/components/LaunchSyntenyViewDialog.d.ts +6 -5
  2. package/dist/LGVSyntenyDisplay/components/LaunchSyntenyViewDialog.js +36 -58
  3. package/dist/LGVSyntenyDisplay/components/util.d.ts +9 -6
  4. package/dist/LGVSyntenyDisplay/components/util.js +6 -12
  5. package/dist/LGVSyntenyDisplay/model.d.ts +21 -7
  6. package/dist/LGVSyntenyDisplay/model.js +19 -8
  7. package/dist/LinearComparativeView/components/Header.d.ts +1 -2
  8. package/dist/LinearComparativeView/components/Header.js +52 -81
  9. package/dist/LinearComparativeView/components/HeaderSearchBoxes.d.ts +1 -2
  10. package/dist/LinearComparativeView/components/HeaderSearchBoxes.js +2 -11
  11. package/dist/LinearComparativeView/components/LinearComparativeRenderArea.d.ts +1 -2
  12. package/dist/LinearComparativeView/components/LinearComparativeRenderArea.js +13 -21
  13. package/dist/LinearComparativeView/components/LinearComparativeView.d.ts +1 -2
  14. package/dist/LinearComparativeView/components/LinearComparativeView.js +2 -5
  15. package/dist/LinearComparativeView/components/Rubberband.d.ts +1 -2
  16. package/dist/LinearComparativeView/components/Rubberband.js +20 -51
  17. package/dist/LinearComparativeView/components/VerticalGuide.d.ts +1 -2
  18. package/dist/LinearComparativeView/components/VerticalGuide.js +4 -8
  19. package/dist/LinearComparativeView/index.js +17 -7
  20. package/dist/LinearComparativeView/model.d.ts +32 -28
  21. package/dist/LinearComparativeView/model.js +37 -8
  22. package/dist/LinearReadVsRef/LinearReadVsRef.d.ts +1 -2
  23. package/dist/LinearReadVsRef/LinearReadVsRef.js +5 -36
  24. package/dist/LinearReadVsRef/index.js +17 -7
  25. package/dist/LinearSyntenyDisplay/afterAttach.js +6 -3
  26. package/dist/LinearSyntenyDisplay/components/Component.d.ts +1 -2
  27. package/dist/LinearSyntenyDisplay/components/Component.js +9 -32
  28. package/dist/LinearSyntenyDisplay/components/LinearSyntenyRendering.d.ts +1 -2
  29. package/dist/LinearSyntenyDisplay/components/LinearSyntenyRendering.js +89 -84
  30. package/dist/LinearSyntenyDisplay/components/SyntenyContextMenu.d.ts +1 -2
  31. package/dist/LinearSyntenyDisplay/components/SyntenyContextMenu.js +2 -5
  32. package/dist/LinearSyntenyDisplay/components/SyntenyTooltip.d.ts +1 -2
  33. package/dist/LinearSyntenyDisplay/components/SyntenyTooltip.js +2 -3
  34. package/dist/LinearSyntenyDisplay/index.js +17 -7
  35. package/dist/LinearSyntenyDisplay/model.js +17 -7
  36. package/dist/LinearSyntenyView/components/ExportSvgDialog.d.ts +1 -2
  37. package/dist/LinearSyntenyView/components/ExportSvgDialog.js +34 -73
  38. package/dist/LinearSyntenyView/components/Icons.d.ts +2 -3
  39. package/dist/LinearSyntenyView/components/Icons.js +3 -8
  40. package/dist/LinearSyntenyView/components/ImportForm/ImportSyntenyOpenCustomTrack.d.ts +8 -0
  41. package/dist/LinearSyntenyView/components/ImportForm/ImportSyntenyOpenCustomTrack.js +130 -0
  42. package/dist/LinearSyntenyView/components/ImportForm/ImportSyntenyPreConfigured.d.ts +8 -0
  43. package/dist/LinearSyntenyView/components/ImportForm/ImportSyntenyPreConfigured.js +39 -0
  44. package/dist/LinearSyntenyView/components/ImportForm/ImportSyntenyTrackSelectorArea.d.ts +7 -0
  45. package/dist/LinearSyntenyView/components/ImportForm/ImportSyntenyTrackSelectorArea.js +22 -0
  46. package/dist/LinearSyntenyView/components/ImportForm/LinearSyntenyImportForm.d.ts +1 -2
  47. package/dist/LinearSyntenyView/components/ImportForm/LinearSyntenyImportForm.js +44 -143
  48. package/dist/LinearSyntenyView/components/ImportForm/doSubmit.d.ts +5 -0
  49. package/dist/LinearSyntenyView/components/ImportForm/doSubmit.js +43 -0
  50. package/dist/LinearSyntenyView/components/ImportForm/getAdapter.d.ts +117 -0
  51. package/dist/LinearSyntenyView/components/ImportForm/getAdapter.js +68 -0
  52. package/dist/LinearSyntenyView/components/LinearSyntenyView.d.ts +1 -2
  53. package/dist/LinearSyntenyView/components/LinearSyntenyView.js +20 -9
  54. package/dist/LinearSyntenyView/index.js +17 -7
  55. package/dist/LinearSyntenyView/model.d.ts +49 -30
  56. package/dist/LinearSyntenyView/model.js +57 -15
  57. package/dist/LinearSyntenyView/svgcomponents/SVGBackground.d.ts +1 -2
  58. package/dist/LinearSyntenyView/svgcomponents/SVGBackground.js +2 -5
  59. package/dist/LinearSyntenyView/svgcomponents/SVGLinearGenomeView.d.ts +1 -2
  60. package/dist/LinearSyntenyView/svgcomponents/SVGLinearGenomeView.js +2 -10
  61. package/dist/LinearSyntenyView/svgcomponents/SVGLinearSyntenyView.js +4 -16
  62. package/dist/LinearSyntenyView/types.d.ts +12 -0
  63. package/dist/LinearSyntenyView/types.js +2 -0
  64. package/dist/LinearSyntenyViewHelper/index.js +2 -2
  65. package/dist/SyntenyFeatureDetail/LinkToSyntenyView.d.ts +5 -0
  66. package/dist/SyntenyFeatureDetail/LinkToSyntenyView.js +87 -0
  67. package/dist/SyntenyFeatureDetail/SyntenyFeatureDetail.d.ts +2 -11
  68. package/dist/SyntenyFeatureDetail/SyntenyFeatureDetail.js +3 -79
  69. package/dist/SyntenyFeatureDetail/index.js +17 -7
  70. package/dist/SyntenyFeatureDetail/types.d.ts +9 -0
  71. package/dist/SyntenyFeatureDetail/types.js +2 -0
  72. package/esm/LGVSyntenyDisplay/components/LaunchSyntenyViewDialog.d.ts +6 -5
  73. package/esm/LGVSyntenyDisplay/components/LaunchSyntenyViewDialog.js +35 -34
  74. package/esm/LGVSyntenyDisplay/components/util.d.ts +9 -6
  75. package/esm/LGVSyntenyDisplay/components/util.js +6 -12
  76. package/esm/LGVSyntenyDisplay/model.d.ts +21 -7
  77. package/esm/LGVSyntenyDisplay/model.js +2 -1
  78. package/esm/LinearComparativeView/components/Header.d.ts +1 -2
  79. package/esm/LinearComparativeView/components/Header.js +52 -58
  80. package/esm/LinearComparativeView/components/HeaderSearchBoxes.d.ts +1 -2
  81. package/esm/LinearComparativeView/components/HeaderSearchBoxes.js +2 -8
  82. package/esm/LinearComparativeView/components/LinearComparativeRenderArea.d.ts +1 -2
  83. package/esm/LinearComparativeView/components/LinearComparativeRenderArea.js +13 -18
  84. package/esm/LinearComparativeView/components/LinearComparativeView.d.ts +1 -2
  85. package/esm/LinearComparativeView/components/LinearComparativeView.js +2 -5
  86. package/esm/LinearComparativeView/components/Rubberband.d.ts +1 -2
  87. package/esm/LinearComparativeView/components/Rubberband.js +20 -28
  88. package/esm/LinearComparativeView/components/VerticalGuide.d.ts +1 -2
  89. package/esm/LinearComparativeView/components/VerticalGuide.js +4 -5
  90. package/esm/LinearComparativeView/model.d.ts +32 -28
  91. package/esm/LinearComparativeView/model.js +21 -2
  92. package/esm/LinearReadVsRef/LinearReadVsRef.d.ts +1 -2
  93. package/esm/LinearReadVsRef/LinearReadVsRef.js +5 -13
  94. package/esm/LinearSyntenyDisplay/afterAttach.js +6 -3
  95. package/esm/LinearSyntenyDisplay/components/Component.d.ts +1 -2
  96. package/esm/LinearSyntenyDisplay/components/Component.js +9 -9
  97. package/esm/LinearSyntenyDisplay/components/LinearSyntenyRendering.d.ts +1 -2
  98. package/esm/LinearSyntenyDisplay/components/LinearSyntenyRendering.js +72 -77
  99. package/esm/LinearSyntenyDisplay/components/SyntenyContextMenu.d.ts +1 -2
  100. package/esm/LinearSyntenyDisplay/components/SyntenyContextMenu.js +2 -2
  101. package/esm/LinearSyntenyDisplay/components/SyntenyTooltip.d.ts +1 -2
  102. package/esm/LinearSyntenyDisplay/components/SyntenyTooltip.js +2 -3
  103. package/esm/LinearSyntenyView/components/ExportSvgDialog.d.ts +1 -2
  104. package/esm/LinearSyntenyView/components/ExportSvgDialog.js +34 -50
  105. package/esm/LinearSyntenyView/components/Icons.d.ts +2 -3
  106. package/esm/LinearSyntenyView/components/Icons.js +3 -5
  107. package/esm/LinearSyntenyView/components/ImportForm/ImportSyntenyOpenCustomTrack.d.ts +8 -0
  108. package/esm/LinearSyntenyView/components/ImportForm/ImportSyntenyOpenCustomTrack.js +125 -0
  109. package/esm/LinearSyntenyView/components/ImportForm/ImportSyntenyPreConfigured.d.ts +8 -0
  110. package/esm/LinearSyntenyView/components/ImportForm/ImportSyntenyPreConfigured.js +37 -0
  111. package/esm/LinearSyntenyView/components/ImportForm/ImportSyntenyTrackSelectorArea.d.ts +7 -0
  112. package/esm/LinearSyntenyView/components/ImportForm/ImportSyntenyTrackSelectorArea.js +16 -0
  113. package/esm/LinearSyntenyView/components/ImportForm/LinearSyntenyImportForm.d.ts +1 -2
  114. package/esm/LinearSyntenyView/components/ImportForm/LinearSyntenyImportForm.js +45 -121
  115. package/esm/LinearSyntenyView/components/ImportForm/doSubmit.d.ts +5 -0
  116. package/esm/LinearSyntenyView/components/ImportForm/doSubmit.js +40 -0
  117. package/esm/LinearSyntenyView/components/ImportForm/getAdapter.d.ts +117 -0
  118. package/esm/LinearSyntenyView/components/ImportForm/getAdapter.js +65 -0
  119. package/esm/LinearSyntenyView/components/LinearSyntenyView.d.ts +1 -2
  120. package/esm/LinearSyntenyView/components/LinearSyntenyView.js +3 -2
  121. package/esm/LinearSyntenyView/model.d.ts +49 -30
  122. package/esm/LinearSyntenyView/model.js +41 -9
  123. package/esm/LinearSyntenyView/svgcomponents/SVGBackground.d.ts +1 -2
  124. package/esm/LinearSyntenyView/svgcomponents/SVGBackground.js +2 -2
  125. package/esm/LinearSyntenyView/svgcomponents/SVGLinearGenomeView.d.ts +1 -2
  126. package/esm/LinearSyntenyView/svgcomponents/SVGLinearGenomeView.js +2 -7
  127. package/esm/LinearSyntenyView/svgcomponents/SVGLinearSyntenyView.js +4 -16
  128. package/esm/LinearSyntenyView/types.d.ts +12 -0
  129. package/esm/LinearSyntenyView/types.js +1 -0
  130. package/esm/LinearSyntenyViewHelper/index.js +2 -2
  131. package/esm/SyntenyFeatureDetail/LinkToSyntenyView.d.ts +5 -0
  132. package/esm/SyntenyFeatureDetail/LinkToSyntenyView.js +52 -0
  133. package/esm/SyntenyFeatureDetail/SyntenyFeatureDetail.d.ts +2 -11
  134. package/esm/SyntenyFeatureDetail/SyntenyFeatureDetail.js +4 -57
  135. package/esm/SyntenyFeatureDetail/types.d.ts +9 -0
  136. package/esm/SyntenyFeatureDetail/types.js +1 -0
  137. package/package.json +2 -2
  138. package/dist/LinearSyntenyView/components/ImportForm/AddCustomTrack.d.ts +0 -10
  139. package/dist/LinearSyntenyView/components/ImportForm/AddCustomTrack.js +0 -194
  140. package/dist/LinearSyntenyView/components/ImportForm/Spacer.d.ts +0 -2
  141. package/dist/LinearSyntenyView/components/ImportForm/Spacer.js +0 -10
  142. package/dist/LinearSyntenyView/components/ImportForm/TrackSelector.d.ts +0 -10
  143. package/dist/LinearSyntenyView/components/ImportForm/TrackSelector.js +0 -57
  144. package/dist/LinearSyntenyView/components/ImportForm/TrackSelectorUtil.d.ts +0 -14
  145. package/dist/LinearSyntenyView/components/ImportForm/TrackSelectorUtil.js +0 -52
  146. package/esm/LinearSyntenyView/components/ImportForm/AddCustomTrack.d.ts +0 -10
  147. package/esm/LinearSyntenyView/components/ImportForm/AddCustomTrack.js +0 -169
  148. package/esm/LinearSyntenyView/components/ImportForm/Spacer.d.ts +0 -2
  149. package/esm/LinearSyntenyView/components/ImportForm/Spacer.js +0 -4
  150. package/esm/LinearSyntenyView/components/ImportForm/TrackSelector.d.ts +0 -10
  151. package/esm/LinearSyntenyView/components/ImportForm/TrackSelector.js +0 -32
  152. package/esm/LinearSyntenyView/components/ImportForm/TrackSelectorUtil.d.ts +0 -14
  153. package/esm/LinearSyntenyView/components/ImportForm/TrackSelectorUtil.js +0 -23
@@ -0,0 +1,125 @@
1
+ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
2
+ import { useEffect, useState } from 'react';
3
+ import { ErrorMessage, FileSelector } from '@jbrowse/core/ui';
4
+ import HelpIcon from '@mui/icons-material/Help';
5
+ import { Button, FormControlLabel, Grid2, Paper, Radio, RadioGroup, Tooltip, Typography, } from '@mui/material';
6
+ import { observer } from 'mobx-react';
7
+ import { getAdapter } from './getAdapter';
8
+ import { basename, extName, getName, stripGz } from './util';
9
+ const ImportSyntenyOpenCustomTrack = observer(function ({ model, assembly1, assembly2, selectedRow, }) {
10
+ const [swap, setSwap] = useState(false);
11
+ const [bed2Location, setBed2Location] = useState();
12
+ const [bed1Location, setBed1Location] = useState();
13
+ const [fileLocation, setFileLocation] = useState();
14
+ const [indexFileLocation, setIndexFileLocation] = useState();
15
+ const [value, setValue] = useState('');
16
+ const [error, setError] = useState();
17
+ const fileName = getName(fileLocation);
18
+ const radioOption = value || (fileName ? extName(stripGz(fileName)) : '');
19
+ useEffect(() => {
20
+ try {
21
+ if (fileLocation) {
22
+ const fn = fileName ? basename(fileName) : 'MyTrack';
23
+ const trackId = `${fn}-${Date.now()}-sessionTrack`;
24
+ setError(undefined);
25
+ model.setImportFormSyntenyTrack(selectedRow, {
26
+ type: 'userOpened',
27
+ value: {
28
+ trackId,
29
+ name: fn,
30
+ assemblyNames: [assembly2, assembly1],
31
+ type: 'SyntenyTrack',
32
+ adapter: getAdapter({
33
+ radioOption,
34
+ assembly1: swap ? assembly2 : assembly1,
35
+ assembly2: swap ? assembly1 : assembly2,
36
+ fileLocation,
37
+ indexFileLocation,
38
+ bed1Location,
39
+ bed2Location,
40
+ }),
41
+ },
42
+ });
43
+ }
44
+ }
45
+ catch (e) {
46
+ console.error(e);
47
+ setError(e);
48
+ }
49
+ }, [
50
+ swap,
51
+ model,
52
+ selectedRow,
53
+ fileName,
54
+ assembly1,
55
+ assembly2,
56
+ bed1Location,
57
+ bed2Location,
58
+ fileLocation,
59
+ indexFileLocation,
60
+ radioOption,
61
+ ]);
62
+ const helpStrings = {
63
+ '.paf': 'minimap2 target.fa query.fa',
64
+ '.pif.gz': 'minimap2 target.fa query.fa',
65
+ '.out': 'mashmap target.fa query.fa',
66
+ '.delta': 'mummer target.fa query.fa',
67
+ '.chain': 'e.g. queryToTarget.chain',
68
+ };
69
+ return (_jsxs(Paper, { style: { padding: 12 }, children: [error ? _jsx(ErrorMessage, { error: error }) : null, _jsx(Typography, { style: { textAlign: 'center' }, children: "Add a .paf (minimap2), .delta (Mummer), .chain (UCSC liftover), .anchors or .anchors.simple (MCScan), or .pif.gz (jbrowse CLI make-pif) file to view. These file types can also be gzipped." }), _jsx(RadioGroup, { value: radioOption, onChange: event => {
70
+ setValue(event.target.value);
71
+ }, children: _jsx(Grid2, { container: true, justifyContent: "center", children: [
72
+ '.paf',
73
+ '.delta',
74
+ '.out',
75
+ '.chain',
76
+ '.anchors',
77
+ '.anchors.simple',
78
+ '.pif.gz',
79
+ ].map(extension => (_jsx(FormControlLabel, { value: extension, control: _jsx(Radio, {}), label: extension }, extension))) }) }), _jsx(Grid2, { container: true, justifyContent: "center", children: radioOption === '.paf' ||
80
+ radioOption === '.out' ||
81
+ radioOption === '.delta' ||
82
+ radioOption === '.chain' ||
83
+ radioOption === '.pif.gz' ? (_jsxs("div", { style: {
84
+ display: 'flex',
85
+ flexDirection: 'column',
86
+ gap: 10,
87
+ }, children: [_jsx(FileSelector, { name: `${radioOption} location`, inline: true, description: "", location: fileLocation, setLocation: loc => {
88
+ setFileLocation(loc);
89
+ } }), _jsxs("div", { children: [_jsxs("div", { children: ["Verify or click swap", _jsx(Tooltip, { title: _jsx("code", { children: helpStrings[radioOption] }), children: _jsx(HelpIcon, {}) })] }), _jsxs("div", { style: {
90
+ display: 'flex',
91
+ gap: 20,
92
+ }, children: [_jsxs("div", { style: {
93
+ display: 'grid',
94
+ gridTemplateColumns: '1fr 1fr',
95
+ gap: 4,
96
+ alignItems: 'center',
97
+ }, children: [_jsx("div", { children: _jsx("i", { children: swap ? assembly2 : assembly1 }) }), _jsx("div", { children: "query assembly" }), _jsx("div", { children: _jsx("i", { children: swap ? assembly1 : assembly2 }) }), _jsx("div", { children: "target assembly" })] }), _jsx(Button, { variant: "contained", onClick: () => {
98
+ setSwap(!swap);
99
+ }, children: "Swap?" })] })] })] })) : value === '.anchors' || value === '.anchors.simple' ? (_jsxs("div", { children: [_jsxs("div", { style: { margin: 20 }, children: ["Open the ", value, " and .bed files for both genome assemblies from the MCScan (Python version) pipeline", ' ', _jsx("a", { href: "https://github.com/tanghaibao/jcvi/wiki/MCscan-(Python-version)", children: "(more info)" })] }), _jsxs("div", { children: [_jsx(FileSelector, { inline: true, name: value, location: fileLocation, setLocation: loc => {
100
+ setFileLocation(loc);
101
+ } }), _jsx(FileSelector, { inline: true, name: "genome 1 .bed (left column of anchors file)", description: "", location: bed1Location, setLocation: loc => {
102
+ setBed1Location(loc);
103
+ } }), _jsx(FileSelector, { inline: true, name: "genome 2 .bed (right column of anchors file)", description: "", location: bed2Location, setLocation: loc => {
104
+ setBed2Location(loc);
105
+ } })] }), _jsxs("div", { style: {
106
+ margin: 'auto',
107
+ display: 'flex',
108
+ justifyContent: 'center',
109
+ gap: 20,
110
+ }, children: [_jsxs("div", { style: {
111
+ display: 'grid',
112
+ gridTemplateColumns: '1fr 1fr',
113
+ gap: 4,
114
+ alignItems: 'center',
115
+ }, children: [_jsx("div", { children: _jsx("i", { children: swap ? assembly2 : assembly1 }) }), _jsx("div", { children: "bed1 assembly" }), _jsx("div", { children: _jsx("i", { children: swap ? assembly1 : assembly2 }) }), _jsx("div", { children: "bed2 assembly" })] }), _jsx(Button, { variant: "contained", onClick: () => {
116
+ setSwap(!swap);
117
+ }, children: "Swap?" })] })] })) : value === '.pif.gz' ? (_jsxs("div", { style: { display: 'flex' }, children: [_jsx("div", { children: _jsx(FileSelector, { name: `${value} location`, description: "", location: fileLocation, setLocation: loc => {
118
+ setFileLocation(loc);
119
+ } }) }), _jsx("div", { children: _jsx(FileSelector, { name: `${value} index location`, description: "", location: indexFileLocation, setLocation: loc => {
120
+ setIndexFileLocation(loc);
121
+ } }) })] })) : (_jsx(FileSelector, { name: value ? `${value} location` : '', description: "", location: fileLocation, setLocation: loc => {
122
+ setFileLocation(loc);
123
+ } })) })] }));
124
+ });
125
+ export default ImportSyntenyOpenCustomTrack;
@@ -0,0 +1,8 @@
1
+ import type { LinearSyntenyViewModel } from '../../model';
2
+ declare const ImportSyntenyTrackSelector: ({ model, selectedRow, assembly1, assembly2, }: {
3
+ model: LinearSyntenyViewModel;
4
+ selectedRow: number;
5
+ assembly1: string;
6
+ assembly2: string;
7
+ }) => import("react/jsx-runtime").JSX.Element;
8
+ export default ImportSyntenyTrackSelector;
@@ -0,0 +1,37 @@
1
+ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
2
+ import { useEffect } from 'react';
3
+ import { readConfObject } from '@jbrowse/core/configuration';
4
+ import { ErrorMessage } from '@jbrowse/core/ui';
5
+ import { getSession } from '@jbrowse/core/util';
6
+ import { getTrackName } from '@jbrowse/core/util/tracks';
7
+ import { MenuItem, Paper, Select, Typography } from '@mui/material';
8
+ import { observer } from 'mobx-react';
9
+ const ImportSyntenyTrackSelector = observer(function ({ model, selectedRow, assembly1, assembly2, }) {
10
+ var _a;
11
+ const session = getSession(model);
12
+ const { importFormSyntenyTrackSelections } = model;
13
+ const { tracks = [], sessionTracks = [] } = session;
14
+ const allTracks = [...tracks, ...sessionTracks];
15
+ const filteredTracks = allTracks.filter(track => {
16
+ const assemblyNames = readConfObject(track, 'assemblyNames');
17
+ return (assemblyNames.includes(assembly1) &&
18
+ assemblyNames.includes(assembly2) &&
19
+ track.type.includes('Synteny'));
20
+ });
21
+ const resetTrack = ((_a = filteredTracks[0]) === null || _a === void 0 ? void 0 : _a.trackId) || '';
22
+ const r = importFormSyntenyTrackSelections[selectedRow];
23
+ const value = (r === null || r === void 0 ? void 0 : r.type) === 'preConfigured' ? r.value : undefined;
24
+ useEffect(() => {
25
+ model.setImportFormSyntenyTrack(selectedRow, {
26
+ type: 'preConfigured',
27
+ value: resetTrack,
28
+ });
29
+ }, [assembly2, assembly1, resetTrack, selectedRow, model]);
30
+ return (_jsxs(Paper, { style: { padding: 12 }, children: [_jsx(Typography, { children: "Select a track from the select box below, the track will be shown when you hit \"Launch\"." }), value && filteredTracks.map(r => r.trackId).includes(value) ? (_jsx(Select, { value: value, onChange: event => {
31
+ model.setImportFormSyntenyTrack(selectedRow, {
32
+ type: 'preConfigured',
33
+ value: event.target.value,
34
+ });
35
+ }, children: filteredTracks.map(track => (_jsx(MenuItem, { value: track.trackId, children: getTrackName(track, session) }, track.trackId))) })) : (_jsx(ErrorMessage, { error: `No synteny tracks found for ${assembly1},${assembly2}` }))] }));
36
+ });
37
+ export default ImportSyntenyTrackSelector;
@@ -0,0 +1,7 @@
1
+ import type { LinearSyntenyViewModel } from '../../model';
2
+ export default function ImportSyntenyTrackSelectorArea({ model, assembly1, assembly2, selectedRow, }: {
3
+ model: LinearSyntenyViewModel;
4
+ assembly1: string;
5
+ assembly2: string;
6
+ selectedRow: number;
7
+ }): import("react/jsx-runtime").JSX.Element;
@@ -0,0 +1,16 @@
1
+ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
2
+ import { useEffect, useState } from 'react';
3
+ import { FormControl, FormControlLabel, Radio, RadioGroup } from '@mui/material';
4
+ import ImportCustomTrack from './ImportSyntenyOpenCustomTrack';
5
+ import ImportSyntenyTrackSelector from './ImportSyntenyPreConfigured';
6
+ export default function ImportSyntenyTrackSelectorArea({ model, assembly1, assembly2, selectedRow, }) {
7
+ const [choice, setChoice] = useState('tracklist');
8
+ useEffect(() => {
9
+ if (choice === 'none') {
10
+ model.setImportFormSyntenyTrack(selectedRow, { type: 'none' });
11
+ }
12
+ }, [choice, model, selectedRow]);
13
+ return (_jsxs("div", { children: [_jsx(FormControl, { children: _jsxs(RadioGroup, { row: true, value: choice, "aria-labelledby": "group-label", onChange: event => {
14
+ setChoice(event.target.value);
15
+ }, children: [_jsx(FormControlLabel, { value: "none", control: _jsx(Radio, {}), label: "None" }), _jsx(FormControlLabel, { value: "tracklist", control: _jsx(Radio, {}), label: "Existing track" }), _jsx(FormControlLabel, { value: "custom", control: _jsx(Radio, {}), label: "New track" })] }) }), choice === 'custom' ? (_jsx(ImportCustomTrack, { model: model, selectedRow: selectedRow, assembly2: assembly2, assembly1: assembly1 })) : null, choice === 'tracklist' ? (_jsx(ImportSyntenyTrackSelector, { model: model, selectedRow: selectedRow, assembly1: assembly1, assembly2: assembly2 })) : null] }));
16
+ }
@@ -1,6 +1,5 @@
1
- import React from 'react';
2
1
  import type { LinearSyntenyViewModel } from '../../model';
3
2
  declare const LinearSyntenyViewImportForm: ({ model, }: {
4
3
  model: LinearSyntenyViewModel;
5
- }) => React.JSX.Element;
4
+ }) => import("react/jsx-runtime").JSX.Element;
6
5
  export default LinearSyntenyViewImportForm;
@@ -1,13 +1,14 @@
1
- import React, { useState } from 'react';
1
+ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
2
+ import { useState } from 'react';
2
3
  import { AssemblySelector, ErrorMessage } from '@jbrowse/core/ui';
3
- import { getSession, isSessionWithAddTracks, notEmpty, } from '@jbrowse/core/util';
4
+ import { getSession, notEmpty } from '@jbrowse/core/util';
4
5
  import ArrowForwardIosIcon from '@mui/icons-material/ArrowForwardIos';
5
6
  import CloseIcon from '@mui/icons-material/Close';
6
7
  import { Button, Container, IconButton } from '@mui/material';
7
8
  import { observer } from 'mobx-react';
8
9
  import { makeStyles } from 'tss-react/mui';
9
- import Spacer from './Spacer';
10
- import TrackSelector from './TrackSelectorUtil';
10
+ import ImportSyntenyTrackSelector from './ImportSyntenyTrackSelectorArea';
11
+ import { doSubmit } from './doSubmit';
11
12
  const useStyles = makeStyles()(theme => ({
12
13
  importFormContainer: {
13
14
  padding: theme.spacing(4),
@@ -24,6 +25,7 @@ const useStyles = makeStyles()(theme => ({
24
25
  },
25
26
  flex: {
26
27
  display: 'flex',
28
+ gap: 90,
27
29
  },
28
30
  mb: {
29
31
  marginBottom: 10,
@@ -31,8 +33,12 @@ const useStyles = makeStyles()(theme => ({
31
33
  bg: {
32
34
  background: theme.palette.divider,
33
35
  },
34
- fixedWidth: {
35
- width: 700,
36
+ rightPanel: {
37
+ flexGrow: 11,
38
+ },
39
+ leftPanel: {
40
+ flexGrow: 4,
41
+ flexShrink: 0,
36
42
  },
37
43
  }));
38
44
  const LinearSyntenyViewImportForm = observer(function ({ model, }) {
@@ -46,120 +52,38 @@ const LinearSyntenyViewImportForm = observer(function ({ model, }) {
46
52
  defaultAssemblyName,
47
53
  ]);
48
54
  const [error, setError] = useState();
49
- const [userOpenedSyntenyTracksToShow, setUserOpenedSyntenyTracksToShow] = useState([]);
50
- const [preConfiguredSyntenyTracksToShow, setPreConfiguredSyntenyTracksToShow,] = useState([]);
51
- return (React.createElement(Container, { className: classes.importFormContainer },
52
- error ? React.createElement(ErrorMessage, { error: error }) : null,
53
- React.createElement("div", { className: classes.flex },
54
- React.createElement(Spacer, null),
55
- React.createElement("div", null,
56
- React.createElement("div", { className: classes.mb }, "Select assemblies for linear synteny view"),
57
- selectedAssemblyNames.map((assemblyName, idx) => (React.createElement("div", { key: `${assemblyName}-${idx}`, className: classes.rel },
58
- React.createElement("span", null,
59
- "Row ",
60
- idx + 1,
61
- ": "),
62
- React.createElement(IconButton, { disabled: selectedAssemblyNames.length <= 2, onClick: () => {
63
- setSelectedAssemblyNames(selectedAssemblyNames
64
- .map((asm, idx2) => (idx2 === idx ? undefined : asm))
65
- .filter(notEmpty));
66
- setPreConfiguredSyntenyTracksToShow(preConfiguredSyntenyTracksToShow
67
- .map((asm, idx2) => (idx2 === idx ? undefined : asm))
68
- .filter(notEmpty));
69
- setUserOpenedSyntenyTracksToShow(userOpenedSyntenyTracksToShow
70
- .map((asm, idx2) => (idx2 === idx ? undefined : asm))
71
- .filter(notEmpty));
72
- if (selectedRow >= selectedAssemblyNames.length - 2) {
73
- setSelectedRow(0);
74
- }
75
- } },
76
- React.createElement(CloseIcon, null)),
77
- React.createElement(AssemblySelector, { helperText: "", selected: assemblyName, onChange: newAssembly => {
78
- setSelectedAssemblyNames(selectedAssemblyNames.map((asm, idx2) => idx2 === idx ? newAssembly : asm));
79
- }, session: session }),
80
- idx !== selectedAssemblyNames.length - 1 ? (React.createElement(IconButton, { className: cx(classes.synbutton, idx === selectedRow ? classes.bg : undefined), onClick: () => {
81
- setSelectedRow(idx);
82
- } },
83
- React.createElement(ArrowForwardIosIcon, null))) : null))),
84
- React.createElement("div", null,
85
- React.createElement(Button, { className: classes.button, variant: "contained", color: "secondary", onClick: () => {
86
- setSelectedAssemblyNames([
87
- ...selectedAssemblyNames,
88
- defaultAssemblyName,
89
- ]);
90
- } }, "Add row"),
91
- React.createElement(Button, { className: classes.button, onClick: () => {
92
- ;
93
- (async () => {
94
- try {
95
- setError(undefined);
96
- await doSubmit({
97
- userOpenedSyntenyTracksToShow,
98
- preConfiguredSyntenyTracksToShow,
99
- selectedAssemblyNames,
100
- model,
101
- });
102
- }
103
- catch (e) {
104
- console.error(e);
105
- setError(e);
106
- }
107
- })();
108
- }, variant: "contained", color: "primary" }, "Launch"))),
109
- React.createElement(Spacer, null),
110
- React.createElement("div", { className: classes.fixedWidth },
111
- React.createElement("div", null,
112
- "Synteny dataset to display between row ",
113
- selectedRow + 1,
114
- " and",
115
- ' ',
116
- selectedRow + 2),
117
- React.createElement(TrackSelector, { model: model, preConfiguredSyntenyTrack: preConfiguredSyntenyTracksToShow[selectedRow], assembly1: selectedAssemblyNames[selectedRow], assembly2: selectedAssemblyNames[selectedRow + 1], setPreConfiguredSyntenyTrack: arg => {
118
- const clone = [...preConfiguredSyntenyTracksToShow];
119
- clone[selectedRow] = arg;
120
- setPreConfiguredSyntenyTracksToShow(clone);
121
- }, setUserOpenedSyntenyTrack: arg => {
122
- const clone = [...userOpenedSyntenyTracksToShow];
123
- clone[selectedRow] = arg;
124
- setUserOpenedSyntenyTracksToShow(clone);
125
- } }))),
126
- React.createElement(Spacer, null)));
55
+ return (_jsxs(Container, { className: classes.importFormContainer, children: [error ? _jsx(ErrorMessage, { error: error }) : null, _jsxs("div", { className: classes.flex, children: [_jsxs("div", { className: classes.leftPanel, children: [_jsx("div", { className: classes.mb, children: "Select assemblies for linear synteny view" }), selectedAssemblyNames.map((assemblyName, idx) => (_jsxs("div", { className: classes.rel, children: [_jsxs("span", { children: ["Row ", idx + 1, ": "] }), _jsx(IconButton, { disabled: selectedAssemblyNames.length <= 2, onClick: () => {
56
+ model.importFormRemoveRow(idx);
57
+ setSelectedAssemblyNames(selectedAssemblyNames
58
+ .map((asm, idx2) => (idx2 === idx ? undefined : asm))
59
+ .filter(notEmpty));
60
+ if (selectedRow >= selectedAssemblyNames.length - 2) {
61
+ setSelectedRow(0);
62
+ }
63
+ }, children: _jsx(CloseIcon, {}) }), _jsx(AssemblySelector, { helperText: "", selected: assemblyName, onChange: newAssembly => {
64
+ setSelectedAssemblyNames(selectedAssemblyNames.map((asm, idx2) => idx2 === idx ? newAssembly : asm));
65
+ }, session: session }), idx !== selectedAssemblyNames.length - 1 ? (_jsx(IconButton, { "data-testid": "synbutton", className: cx(classes.synbutton, idx === selectedRow ? classes.bg : undefined), onClick: () => {
66
+ setSelectedRow(idx);
67
+ }, children: _jsx(ArrowForwardIosIcon, {}) })) : null] }, `${assemblyName}-${idx}`))), _jsxs("div", { children: [_jsx(Button, { className: classes.button, variant: "contained", color: "secondary", onClick: () => {
68
+ setSelectedAssemblyNames([
69
+ ...selectedAssemblyNames,
70
+ defaultAssemblyName,
71
+ ]);
72
+ }, children: "Add row" }), _jsx(Button, { className: classes.button, onClick: () => {
73
+ ;
74
+ (async () => {
75
+ try {
76
+ setError(undefined);
77
+ await doSubmit({
78
+ selectedAssemblyNames,
79
+ model,
80
+ });
81
+ }
82
+ catch (e) {
83
+ console.error(e);
84
+ setError(e);
85
+ }
86
+ })();
87
+ }, variant: "contained", color: "primary", children: "Launch" })] })] }), _jsxs("div", { className: classes.rightPanel, children: [_jsxs("div", { children: ["Synteny dataset to display between row ", selectedRow + 1, " and", ' ', selectedRow + 2] }), _jsx(ImportSyntenyTrackSelector, { model: model, selectedRow: selectedRow, assembly1: selectedAssemblyNames[selectedRow], assembly2: selectedAssemblyNames[selectedRow + 1] })] })] })] }));
127
88
  });
128
- async function doSubmit({ selectedAssemblyNames, model, preConfiguredSyntenyTracksToShow, userOpenedSyntenyTracksToShow, }) {
129
- const session = getSession(model);
130
- const { assemblyManager } = session;
131
- model.setViews(await Promise.all(selectedAssemblyNames.map(async (assemblyName) => {
132
- const asm = await assemblyManager.waitForAssembly(assemblyName);
133
- if (!asm) {
134
- throw new Error(`Assembly "${assemblyName}" failed to load`);
135
- }
136
- return {
137
- type: 'LinearGenomeView',
138
- bpPerPx: 1,
139
- offsetPx: 0,
140
- hideHeader: true,
141
- displayedRegions: asm.regions,
142
- };
143
- })));
144
- for (const view of model.views) {
145
- view.setWidth(model.width);
146
- view.showAllRegions();
147
- }
148
- if (!isSessionWithAddTracks(session)) {
149
- session.notify("Can't add tracks", 'warning');
150
- }
151
- else {
152
- userOpenedSyntenyTracksToShow.map((f, idx) => {
153
- if (f) {
154
- session.addTrackConf(f);
155
- model.toggleTrack(f.trackId, idx);
156
- }
157
- });
158
- }
159
- preConfiguredSyntenyTracksToShow.map((f, idx) => {
160
- if (f) {
161
- model.showTrack(f, idx);
162
- }
163
- });
164
- }
165
89
  export default LinearSyntenyViewImportForm;
@@ -0,0 +1,5 @@
1
+ import type { LinearSyntenyViewModel } from '../../model';
2
+ export declare function doSubmit({ selectedAssemblyNames, model, }: {
3
+ selectedAssemblyNames: string[];
4
+ model: LinearSyntenyViewModel;
5
+ }): Promise<void>;
@@ -0,0 +1,40 @@
1
+ import { getSession, isSessionWithAddTracks } from '@jbrowse/core/util';
2
+ import { toJS } from 'mobx';
3
+ export async function doSubmit({ selectedAssemblyNames, model, }) {
4
+ const session = getSession(model);
5
+ const { assemblyManager } = session;
6
+ const { importFormSyntenyTrackSelections } = model;
7
+ model.setViews(await Promise.all(selectedAssemblyNames.map(async (assemblyName) => {
8
+ const asm = await assemblyManager.waitForAssembly(assemblyName);
9
+ if (!asm) {
10
+ throw new Error(`Assembly "${assemblyName}" failed to load`);
11
+ }
12
+ return {
13
+ type: 'LinearGenomeView',
14
+ bpPerPx: 1,
15
+ offsetPx: 0,
16
+ hideHeader: true,
17
+ displayedRegions: asm.regions,
18
+ };
19
+ })));
20
+ for (const view of model.views) {
21
+ view.setWidth(model.width);
22
+ view.showAllRegions();
23
+ }
24
+ if (!isSessionWithAddTracks(session)) {
25
+ session.notify("Can't add tracks", 'warning');
26
+ }
27
+ else {
28
+ toJS(importFormSyntenyTrackSelections).map((f, idx) => {
29
+ var _a;
30
+ if (f.type === 'userOpened') {
31
+ session.addTrackConf(f.value);
32
+ model.toggleTrack((_a = f.value) === null || _a === void 0 ? void 0 : _a.trackId, idx);
33
+ }
34
+ else if (f.type === 'preConfigured') {
35
+ model.showTrack(f.value, idx);
36
+ }
37
+ });
38
+ }
39
+ model.clearImportFormSyntenyTracks();
40
+ }
@@ -0,0 +1,117 @@
1
+ import type { FileLocation } from '@jbrowse/core/util';
2
+ export declare function getAdapter({ radioOption, assembly1, assembly2, fileLocation, indexFileLocation, bed1Location, bed2Location, }: {
3
+ radioOption: string;
4
+ assembly1: string;
5
+ assembly2: string;
6
+ fileLocation?: FileLocation;
7
+ indexFileLocation?: FileLocation;
8
+ bed1Location?: FileLocation;
9
+ bed2Location?: FileLocation;
10
+ }): {
11
+ type: string;
12
+ pafLocation: FileLocation | undefined;
13
+ queryAssembly: string;
14
+ targetAssembly: string;
15
+ outLocation?: undefined;
16
+ deltaLocation?: undefined;
17
+ chainLocation?: undefined;
18
+ mcscanAnchorsLocation?: undefined;
19
+ bed1Location?: undefined;
20
+ bed2Location?: undefined;
21
+ assemblyNames?: undefined;
22
+ mcscanSimpleAnchorsLocation?: undefined;
23
+ pifGzLocation?: undefined;
24
+ index?: undefined;
25
+ } | {
26
+ type: string;
27
+ outLocation: FileLocation | undefined;
28
+ queryAssembly: string;
29
+ targetAssembly: string;
30
+ pafLocation?: undefined;
31
+ deltaLocation?: undefined;
32
+ chainLocation?: undefined;
33
+ mcscanAnchorsLocation?: undefined;
34
+ bed1Location?: undefined;
35
+ bed2Location?: undefined;
36
+ assemblyNames?: undefined;
37
+ mcscanSimpleAnchorsLocation?: undefined;
38
+ pifGzLocation?: undefined;
39
+ index?: undefined;
40
+ } | {
41
+ type: string;
42
+ deltaLocation: FileLocation | undefined;
43
+ queryAssembly: string;
44
+ targetAssembly: string;
45
+ pafLocation?: undefined;
46
+ outLocation?: undefined;
47
+ chainLocation?: undefined;
48
+ mcscanAnchorsLocation?: undefined;
49
+ bed1Location?: undefined;
50
+ bed2Location?: undefined;
51
+ assemblyNames?: undefined;
52
+ mcscanSimpleAnchorsLocation?: undefined;
53
+ pifGzLocation?: undefined;
54
+ index?: undefined;
55
+ } | {
56
+ type: string;
57
+ chainLocation: FileLocation | undefined;
58
+ queryAssembly: string;
59
+ targetAssembly: string;
60
+ pafLocation?: undefined;
61
+ outLocation?: undefined;
62
+ deltaLocation?: undefined;
63
+ mcscanAnchorsLocation?: undefined;
64
+ bed1Location?: undefined;
65
+ bed2Location?: undefined;
66
+ assemblyNames?: undefined;
67
+ mcscanSimpleAnchorsLocation?: undefined;
68
+ pifGzLocation?: undefined;
69
+ index?: undefined;
70
+ } | {
71
+ type: string;
72
+ mcscanAnchorsLocation: FileLocation | undefined;
73
+ bed1Location: FileLocation | undefined;
74
+ bed2Location: FileLocation | undefined;
75
+ assemblyNames: string[];
76
+ pafLocation?: undefined;
77
+ queryAssembly?: undefined;
78
+ targetAssembly?: undefined;
79
+ outLocation?: undefined;
80
+ deltaLocation?: undefined;
81
+ chainLocation?: undefined;
82
+ mcscanSimpleAnchorsLocation?: undefined;
83
+ pifGzLocation?: undefined;
84
+ index?: undefined;
85
+ } | {
86
+ type: string;
87
+ mcscanSimpleAnchorsLocation: FileLocation | undefined;
88
+ bed1Location: FileLocation | undefined;
89
+ bed2Location: FileLocation | undefined;
90
+ assemblyNames: string[];
91
+ pafLocation?: undefined;
92
+ queryAssembly?: undefined;
93
+ targetAssembly?: undefined;
94
+ outLocation?: undefined;
95
+ deltaLocation?: undefined;
96
+ chainLocation?: undefined;
97
+ mcscanAnchorsLocation?: undefined;
98
+ pifGzLocation?: undefined;
99
+ index?: undefined;
100
+ } | {
101
+ type: string;
102
+ pifGzLocation: FileLocation | undefined;
103
+ index: {
104
+ location: FileLocation | undefined;
105
+ };
106
+ assemblyNames: string[];
107
+ pafLocation?: undefined;
108
+ queryAssembly?: undefined;
109
+ targetAssembly?: undefined;
110
+ outLocation?: undefined;
111
+ deltaLocation?: undefined;
112
+ chainLocation?: undefined;
113
+ mcscanAnchorsLocation?: undefined;
114
+ bed1Location?: undefined;
115
+ bed2Location?: undefined;
116
+ mcscanSimpleAnchorsLocation?: undefined;
117
+ };
@@ -0,0 +1,65 @@
1
+ export function getAdapter({ radioOption, assembly1, assembly2, fileLocation, indexFileLocation, bed1Location, bed2Location, }) {
2
+ if (radioOption === '.paf') {
3
+ return {
4
+ type: 'PAFAdapter',
5
+ pafLocation: fileLocation,
6
+ queryAssembly: assembly1,
7
+ targetAssembly: assembly2,
8
+ };
9
+ }
10
+ else if (radioOption === '.out') {
11
+ return {
12
+ type: 'MashMapAdapter',
13
+ outLocation: fileLocation,
14
+ queryAssembly: assembly1,
15
+ targetAssembly: assembly2,
16
+ };
17
+ }
18
+ else if (radioOption === '.delta') {
19
+ return {
20
+ type: 'DeltaAdapter',
21
+ deltaLocation: fileLocation,
22
+ queryAssembly: assembly1,
23
+ targetAssembly: assembly2,
24
+ };
25
+ }
26
+ else if (radioOption === '.chain') {
27
+ return {
28
+ type: 'ChainAdapter',
29
+ chainLocation: fileLocation,
30
+ queryAssembly: assembly1,
31
+ targetAssembly: assembly2,
32
+ };
33
+ }
34
+ else if (radioOption === '.anchors') {
35
+ return {
36
+ type: 'MCScanAnchorsAdapter',
37
+ mcscanAnchorsLocation: fileLocation,
38
+ bed1Location,
39
+ bed2Location,
40
+ assemblyNames: [assembly1, assembly2],
41
+ };
42
+ }
43
+ else if (radioOption === '.anchors.simple') {
44
+ return {
45
+ type: 'MCScanSimpleAnchorsAdapter',
46
+ mcscanSimpleAnchorsLocation: fileLocation,
47
+ bed1Location,
48
+ bed2Location,
49
+ assemblyNames: [assembly1, assembly2],
50
+ };
51
+ }
52
+ else if (radioOption === '.pif.gz') {
53
+ return {
54
+ type: 'PairwiseIndexedPAFAdapter',
55
+ pifGzLocation: fileLocation,
56
+ index: {
57
+ location: indexFileLocation,
58
+ },
59
+ assemblyNames: [assembly1, assembly2],
60
+ };
61
+ }
62
+ else {
63
+ throw new Error(`Unknown to detect type ${radioOption} from filename (select radio button to clarify)`);
64
+ }
65
+ }
@@ -1,7 +1,6 @@
1
- import React from 'react';
2
1
  import type { LinearSyntenyViewModel } from '../model';
3
2
  type LSV = LinearSyntenyViewModel;
4
3
  declare const LinearSyntenyView: ({ model }: {
5
4
  model: LSV;
6
- }) => React.JSX.Element;
5
+ }) => import("react/jsx-runtime").JSX.Element;
7
6
  export default LinearSyntenyView;