@jbrowse/plugin-data-management 2.6.2 → 2.7.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 (161) hide show
  1. package/dist/AddConnectionWidget/components/AddConnectionWidget.d.ts +2 -2
  2. package/dist/AddConnectionWidget/components/AddConnectionWidget.js +17 -8
  3. package/dist/AddConnectionWidget/components/ConfigureConnection.d.ts +2 -2
  4. package/dist/AddConnectionWidget/components/ConfigureConnection.js +2 -1
  5. package/dist/AddConnectionWidget/components/ConnectionTypeSelect.d.ts +2 -2
  6. package/dist/AddConnectionWidget/components/ConnectionTypeSelect.js +5 -3
  7. package/dist/AddTrackWidget/components/AddTrackWidget.d.ts +3 -4
  8. package/dist/AddTrackWidget/components/AddTrackWidget.js +3 -3
  9. package/dist/AddTrackWidget/components/ConfirmTrack.d.ts +2 -2
  10. package/dist/AddTrackWidget/components/ConfirmTrack.js +3 -2
  11. package/dist/AddTrackWidget/components/DefaultAddTrackWorkflow.d.ts +3 -4
  12. package/dist/AddTrackWidget/components/DefaultAddTrackWorkflow.js +32 -27
  13. package/dist/AddTrackWidget/components/PasteConfigWorkflow.d.ts +3 -4
  14. package/dist/AddTrackWidget/components/PasteConfigWorkflow.js +10 -7
  15. package/dist/AddTrackWidget/components/TrackAdapterSelector.js +1 -1
  16. package/dist/AddTrackWidget/components/TrackSourceSelect.d.ts +3 -4
  17. package/dist/AddTrackWidget/components/TrackSourceSelect.js +3 -3
  18. package/dist/HierarchicalTrackSelectorWidget/components/HierarchicalFab.d.ts +2 -2
  19. package/dist/HierarchicalTrackSelectorWidget/components/HierarchicalFab.js +2 -1
  20. package/dist/HierarchicalTrackSelectorWidget/components/ShoppingCart.d.ts +2 -2
  21. package/dist/HierarchicalTrackSelectorWidget/components/ShoppingCart.js +2 -1
  22. package/dist/HierarchicalTrackSelectorWidget/components/dialogs/CloseConnectionDialog.d.ts +3 -5
  23. package/dist/HierarchicalTrackSelectorWidget/components/dialogs/CloseConnectionDialog.js +2 -1
  24. package/dist/HierarchicalTrackSelectorWidget/components/dialogs/DeleteConnectionDialog.d.ts +3 -4
  25. package/dist/HierarchicalTrackSelectorWidget/components/dialogs/DeleteConnectionDialog.js +5 -8
  26. package/dist/HierarchicalTrackSelectorWidget/components/dialogs/ManageConnectionsDialog.d.ts +3 -4
  27. package/dist/HierarchicalTrackSelectorWidget/components/dialogs/ManageConnectionsDialog.js +3 -3
  28. package/dist/HierarchicalTrackSelectorWidget/components/dialogs/ToggleConnectionsDialog.d.ts +2 -3
  29. package/dist/HierarchicalTrackSelectorWidget/components/dialogs/ToggleConnectionsDialog.js +2 -3
  30. package/dist/HierarchicalTrackSelectorWidget/components/faceted/FacetFilter.d.ts +13 -0
  31. package/dist/HierarchicalTrackSelectorWidget/components/faceted/FacetFilter.js +72 -0
  32. package/dist/HierarchicalTrackSelectorWidget/components/faceted/FacetFilters.js +31 -77
  33. package/dist/HierarchicalTrackSelectorWidget/components/faceted/FacetedDialog.d.ts +3 -4
  34. package/dist/HierarchicalTrackSelectorWidget/components/faceted/FacetedDialog.js +3 -3
  35. package/dist/HierarchicalTrackSelectorWidget/components/faceted/FacetedHeader.d.ts +5 -3
  36. package/dist/HierarchicalTrackSelectorWidget/components/faceted/FacetedHeader.js +10 -4
  37. package/dist/HierarchicalTrackSelectorWidget/components/faceted/FacetedSelector.d.ts +2 -2
  38. package/dist/HierarchicalTrackSelectorWidget/components/faceted/FacetedSelector.js +53 -33
  39. package/dist/HierarchicalTrackSelectorWidget/components/tree/HamburgerMenu.d.ts +2 -2
  40. package/dist/HierarchicalTrackSelectorWidget/components/tree/HamburgerMenu.js +39 -21
  41. package/dist/HierarchicalTrackSelectorWidget/components/tree/HierarchicalHeader.d.ts +3 -4
  42. package/dist/HierarchicalTrackSelectorWidget/components/tree/HierarchicalHeader.js +13 -9
  43. package/dist/HierarchicalTrackSelectorWidget/components/tree/HierarchicalTree.d.ts +4 -3
  44. package/dist/HierarchicalTrackSelectorWidget/components/tree/HierarchicalTree.js +5 -6
  45. package/dist/HierarchicalTrackSelectorWidget/components/tree/TrackCategory.js +22 -0
  46. package/dist/HierarchicalTrackSelectorWidget/components/tree/TrackLabel.js +3 -3
  47. package/dist/HierarchicalTrackSelectorWidget/components/util.d.ts +2 -1
  48. package/dist/HierarchicalTrackSelectorWidget/components/util.js +1 -2
  49. package/dist/HierarchicalTrackSelectorWidget/filterTracks.d.ts +12 -0
  50. package/dist/HierarchicalTrackSelectorWidget/filterTracks.js +32 -0
  51. package/dist/HierarchicalTrackSelectorWidget/generateHierarchy.d.ts +21 -0
  52. package/dist/HierarchicalTrackSelectorWidget/generateHierarchy.js +98 -0
  53. package/dist/HierarchicalTrackSelectorWidget/model.d.ts +68 -28
  54. package/dist/HierarchicalTrackSelectorWidget/model.js +147 -117
  55. package/dist/HierarchicalTrackSelectorWidget/util.d.ts +12 -0
  56. package/dist/HierarchicalTrackSelectorWidget/util.js +53 -0
  57. package/dist/PluginStoreWidget/components/AddCustomPluginDialog.d.ts +7 -0
  58. package/dist/PluginStoreWidget/components/{CustomPluginForm.js → AddCustomPluginDialog.js} +13 -21
  59. package/dist/PluginStoreWidget/components/DeletePluginDialog.d.ts +5 -0
  60. package/dist/PluginStoreWidget/components/DeletePluginDialog.js +28 -0
  61. package/dist/PluginStoreWidget/components/InstalledPlugin.d.ts +3 -6
  62. package/dist/PluginStoreWidget/components/InstalledPlugin.js +24 -51
  63. package/dist/PluginStoreWidget/components/InstalledPluginsList.d.ts +3 -4
  64. package/dist/PluginStoreWidget/components/InstalledPluginsList.js +7 -9
  65. package/dist/PluginStoreWidget/components/PluginCard.d.ts +2 -2
  66. package/dist/PluginStoreWidget/components/PluginCard.js +5 -6
  67. package/dist/PluginStoreWidget/components/PluginStoreWidget.d.ts +3 -4
  68. package/dist/PluginStoreWidget/components/PluginStoreWidget.js +14 -42
  69. package/dist/PluginStoreWidget/components/util.d.ts +5 -0
  70. package/dist/PluginStoreWidget/components/util.js +29 -0
  71. package/dist/PluginStoreWidget/model.d.ts +2 -2
  72. package/dist/PluginStoreWidget/model.js +2 -2
  73. package/dist/index.d.ts +1 -9
  74. package/dist/index.js +1 -4
  75. package/dist/ucsc-trackhub/model.js +2 -2
  76. package/esm/AddConnectionWidget/components/AddConnectionWidget.d.ts +2 -2
  77. package/esm/AddConnectionWidget/components/AddConnectionWidget.js +19 -10
  78. package/esm/AddConnectionWidget/components/ConfigureConnection.d.ts +2 -2
  79. package/esm/AddConnectionWidget/components/ConfigureConnection.js +2 -1
  80. package/esm/AddConnectionWidget/components/ConnectionTypeSelect.d.ts +2 -2
  81. package/esm/AddConnectionWidget/components/ConnectionTypeSelect.js +5 -3
  82. package/esm/AddTrackWidget/components/AddTrackWidget.d.ts +3 -4
  83. package/esm/AddTrackWidget/components/AddTrackWidget.js +3 -3
  84. package/esm/AddTrackWidget/components/ConfirmTrack.d.ts +2 -2
  85. package/esm/AddTrackWidget/components/ConfirmTrack.js +4 -3
  86. package/esm/AddTrackWidget/components/DefaultAddTrackWorkflow.d.ts +3 -4
  87. package/esm/AddTrackWidget/components/DefaultAddTrackWorkflow.js +33 -28
  88. package/esm/AddTrackWidget/components/PasteConfigWorkflow.d.ts +3 -4
  89. package/esm/AddTrackWidget/components/PasteConfigWorkflow.js +11 -8
  90. package/esm/AddTrackWidget/components/TrackAdapterSelector.js +1 -1
  91. package/esm/AddTrackWidget/components/TrackSourceSelect.d.ts +3 -4
  92. package/esm/AddTrackWidget/components/TrackSourceSelect.js +3 -3
  93. package/esm/HierarchicalTrackSelectorWidget/components/HierarchicalFab.d.ts +2 -2
  94. package/esm/HierarchicalTrackSelectorWidget/components/HierarchicalFab.js +2 -1
  95. package/esm/HierarchicalTrackSelectorWidget/components/ShoppingCart.d.ts +2 -2
  96. package/esm/HierarchicalTrackSelectorWidget/components/ShoppingCart.js +2 -1
  97. package/esm/HierarchicalTrackSelectorWidget/components/dialogs/CloseConnectionDialog.d.ts +3 -5
  98. package/esm/HierarchicalTrackSelectorWidget/components/dialogs/CloseConnectionDialog.js +2 -1
  99. package/esm/HierarchicalTrackSelectorWidget/components/dialogs/DeleteConnectionDialog.d.ts +3 -4
  100. package/esm/HierarchicalTrackSelectorWidget/components/dialogs/DeleteConnectionDialog.js +6 -9
  101. package/esm/HierarchicalTrackSelectorWidget/components/dialogs/ManageConnectionsDialog.d.ts +3 -4
  102. package/esm/HierarchicalTrackSelectorWidget/components/dialogs/ManageConnectionsDialog.js +3 -3
  103. package/esm/HierarchicalTrackSelectorWidget/components/dialogs/ToggleConnectionsDialog.d.ts +2 -3
  104. package/esm/HierarchicalTrackSelectorWidget/components/dialogs/ToggleConnectionsDialog.js +3 -2
  105. package/esm/HierarchicalTrackSelectorWidget/components/faceted/FacetFilter.d.ts +13 -0
  106. package/esm/HierarchicalTrackSelectorWidget/components/faceted/FacetFilter.js +43 -0
  107. package/esm/HierarchicalTrackSelectorWidget/components/faceted/FacetFilters.js +31 -54
  108. package/esm/HierarchicalTrackSelectorWidget/components/faceted/FacetedDialog.d.ts +3 -4
  109. package/esm/HierarchicalTrackSelectorWidget/components/faceted/FacetedDialog.js +3 -3
  110. package/esm/HierarchicalTrackSelectorWidget/components/faceted/FacetedHeader.d.ts +5 -3
  111. package/esm/HierarchicalTrackSelectorWidget/components/faceted/FacetedHeader.js +10 -4
  112. package/esm/HierarchicalTrackSelectorWidget/components/faceted/FacetedSelector.d.ts +2 -2
  113. package/esm/HierarchicalTrackSelectorWidget/components/faceted/FacetedSelector.js +51 -31
  114. package/esm/HierarchicalTrackSelectorWidget/components/tree/HamburgerMenu.d.ts +2 -2
  115. package/esm/HierarchicalTrackSelectorWidget/components/tree/HamburgerMenu.js +38 -20
  116. package/esm/HierarchicalTrackSelectorWidget/components/tree/HierarchicalHeader.d.ts +3 -4
  117. package/esm/HierarchicalTrackSelectorWidget/components/tree/HierarchicalHeader.js +13 -9
  118. package/esm/HierarchicalTrackSelectorWidget/components/tree/HierarchicalTree.d.ts +4 -3
  119. package/esm/HierarchicalTrackSelectorWidget/components/tree/HierarchicalTree.js +5 -6
  120. package/esm/HierarchicalTrackSelectorWidget/components/tree/TrackCategory.js +22 -0
  121. package/esm/HierarchicalTrackSelectorWidget/components/tree/TrackLabel.js +2 -2
  122. package/esm/HierarchicalTrackSelectorWidget/components/util.d.ts +2 -1
  123. package/esm/HierarchicalTrackSelectorWidget/components/util.js +1 -2
  124. package/esm/HierarchicalTrackSelectorWidget/filterTracks.d.ts +12 -0
  125. package/esm/HierarchicalTrackSelectorWidget/filterTracks.js +28 -0
  126. package/esm/HierarchicalTrackSelectorWidget/generateHierarchy.d.ts +21 -0
  127. package/esm/HierarchicalTrackSelectorWidget/generateHierarchy.js +94 -0
  128. package/esm/HierarchicalTrackSelectorWidget/model.d.ts +68 -28
  129. package/esm/HierarchicalTrackSelectorWidget/model.js +149 -116
  130. package/esm/HierarchicalTrackSelectorWidget/util.d.ts +12 -0
  131. package/esm/HierarchicalTrackSelectorWidget/util.js +45 -0
  132. package/esm/PluginStoreWidget/components/AddCustomPluginDialog.d.ts +7 -0
  133. package/esm/PluginStoreWidget/components/{CustomPluginForm.js → AddCustomPluginDialog.js} +13 -21
  134. package/esm/PluginStoreWidget/components/DeletePluginDialog.d.ts +5 -0
  135. package/esm/PluginStoreWidget/components/DeletePluginDialog.js +22 -0
  136. package/esm/PluginStoreWidget/components/InstalledPlugin.d.ts +3 -6
  137. package/esm/PluginStoreWidget/components/InstalledPlugin.js +27 -54
  138. package/esm/PluginStoreWidget/components/InstalledPluginsList.d.ts +3 -4
  139. package/esm/PluginStoreWidget/components/InstalledPluginsList.js +7 -9
  140. package/esm/PluginStoreWidget/components/PluginCard.d.ts +2 -2
  141. package/esm/PluginStoreWidget/components/PluginCard.js +5 -6
  142. package/esm/PluginStoreWidget/components/PluginStoreWidget.d.ts +3 -4
  143. package/esm/PluginStoreWidget/components/PluginStoreWidget.js +15 -43
  144. package/esm/PluginStoreWidget/components/util.d.ts +5 -0
  145. package/esm/PluginStoreWidget/components/util.js +25 -0
  146. package/esm/PluginStoreWidget/model.d.ts +2 -2
  147. package/esm/PluginStoreWidget/model.js +1 -1
  148. package/esm/index.d.ts +1 -9
  149. package/esm/index.js +1 -3
  150. package/esm/ucsc-trackhub/model.js +2 -2
  151. package/package.json +5 -4
  152. package/dist/PluginStoreWidget/components/CustomPluginForm.d.ts +0 -9
  153. package/dist/SetDefaultSession/SetDefaultSession.d.ts +0 -6
  154. package/dist/SetDefaultSession/SetDefaultSession.js +0 -38
  155. package/dist/SetDefaultSession/index.d.ts +0 -1
  156. package/dist/SetDefaultSession/index.js +0 -8
  157. package/esm/PluginStoreWidget/components/CustomPluginForm.d.ts +0 -9
  158. package/esm/SetDefaultSession/SetDefaultSession.d.ts +0 -6
  159. package/esm/SetDefaultSession/SetDefaultSession.js +0 -33
  160. package/esm/SetDefaultSession/index.d.ts +0 -1
  161. package/esm/SetDefaultSession/index.js +0 -1
@@ -1,21 +1,14 @@
1
- import React, { useState } from 'react';
1
+ import React, { Suspense, lazy, useState } from 'react';
2
2
  import { observer } from 'mobx-react';
3
- import { getParent } from 'mobx-state-tree';
4
- import { Button, Dialog, DialogTitle, DialogActions, DialogContent, IconButton, ListItem, Tooltip, Typography, } from '@mui/material';
3
+ import { IconButton, ListItem, Tooltip, Typography } from '@mui/material';
5
4
  import { makeStyles } from 'tss-react/mui';
6
5
  import CloseIcon from '@mui/icons-material/Close';
7
6
  import LockIcon from '@mui/icons-material/Lock';
8
- import { getSession } from '@jbrowse/core/util';
7
+ import { getEnv, getSession } from '@jbrowse/core/util';
9
8
  import { isSessionWithSessionPlugins, } from '@jbrowse/core/util/types';
9
+ // lazies
10
+ const DeletePluginDialog = lazy(() => import('./DeletePluginDialog'));
10
11
  const useStyles = makeStyles()(() => ({
11
- closeDialog: {
12
- position: 'absolute',
13
- right: 0,
14
- top: 0,
15
- },
16
- dialogContainer: {
17
- margin: 15,
18
- },
19
12
  lockedPluginTooltip: {
20
13
  marginRight: '0.5rem',
21
14
  },
@@ -25,52 +18,32 @@ function LockedPlugin() {
25
18
  return (React.createElement(Tooltip, { className: classes.lockedPluginTooltip, title: "This plugin was installed by an administrator, you cannot remove it." },
26
19
  React.createElement(LockIcon, null)));
27
20
  }
28
- function PluginDialog({ onClose, plugin, }) {
29
- const { classes } = useStyles();
30
- return (React.createElement(Dialog, { open: true, onClose: () => onClose() },
31
- React.createElement(DialogTitle, null,
32
- React.createElement(IconButton, { className: classes.closeDialog, "aria-label": "close-dialog", onClick: () => onClose() },
33
- React.createElement(CloseIcon, null))),
34
- React.createElement(DialogContent, null,
35
- React.createElement(Typography, null,
36
- "Please confirm that you want to remove ",
37
- plugin,
38
- ". Note: if any resources in this session still use this plugin, it may cause your session to crash"),
39
- React.createElement(DialogActions, null,
40
- React.createElement(Button, { variant: "contained", color: "primary", onClick: () => {
41
- // avoid showing runtime plugin warning
42
- window.setTimeout(() => {
43
- onClose(plugin);
44
- }, 500);
45
- } }, "Confirm"),
46
- React.createElement(Button, { variant: "contained", color: "secondary", onClick: () => {
47
- onClose();
48
- } }, "Cancel")))));
49
- }
50
- function InstalledPlugin({ plugin, model, pluginManager, }) {
21
+ const InstalledPlugin = observer(function ({ plugin, model, }) {
22
+ var _a;
51
23
  const [dialogPlugin, setDialogPlugin] = useState();
24
+ const { pluginManager } = getEnv(model);
52
25
  const session = getSession(model);
53
- const { sessionPlugins } = session;
54
- const isSessionPlugin = sessionPlugins === null || sessionPlugins === void 0 ? void 0 : sessionPlugins.some(p => pluginManager.pluginMetadata[plugin.name].url === p.url);
55
- // eslint-disable-next-line @typescript-eslint/no-explicit-any
56
- const rootModel = getParent(model, 3);
57
- const { jbrowse, adminMode } = rootModel;
26
+ const { jbrowse, adminMode } = session;
27
+ const isSessionPlugin = isSessionWithSessionPlugins(session)
28
+ ? (_a = session.sessionPlugins) === null || _a === void 0 ? void 0 : _a.some(p => pluginManager.pluginMetadata[plugin.name].url === p.url)
29
+ : false;
58
30
  return (React.createElement(React.Fragment, null,
59
- dialogPlugin ? (React.createElement(PluginDialog, { plugin: dialogPlugin, onClose: name => {
60
- if (name) {
61
- const pluginMetadata = pluginManager.pluginMetadata[plugin.name];
62
- if (adminMode) {
63
- jbrowse.removePlugin(pluginMetadata);
64
- }
65
- else if (isSessionWithSessionPlugins(session)) {
66
- session.removeSessionPlugin(pluginMetadata);
31
+ dialogPlugin ? (React.createElement(Suspense, { fallback: React.createElement(React.Fragment, null) },
32
+ React.createElement(DeletePluginDialog, { plugin: dialogPlugin, onClose: name => {
33
+ if (name) {
34
+ const pluginMetadata = pluginManager.pluginMetadata[plugin.name];
35
+ if (adminMode) {
36
+ jbrowse.removePlugin(pluginMetadata);
37
+ }
38
+ else if (isSessionWithSessionPlugins(session)) {
39
+ session.removeSessionPlugin(pluginMetadata);
40
+ }
67
41
  }
68
- }
69
- setDialogPlugin(undefined);
70
- } })) : null,
42
+ setDialogPlugin(undefined);
43
+ } }))) : null,
71
44
  React.createElement(ListItem, { key: plugin.name },
72
- adminMode || isSessionPlugin ? (React.createElement(IconButton, { "aria-label": "removePlugin", "data-testid": `removePlugin-${plugin.name}`, onClick: () => setDialogPlugin(plugin.name) },
45
+ adminMode || isSessionPlugin ? (React.createElement(IconButton, { "data-testid": `removePlugin-${plugin.name}`, onClick: () => setDialogPlugin(plugin.name) },
73
46
  React.createElement(CloseIcon, null))) : (React.createElement(LockedPlugin, null)),
74
47
  React.createElement(Typography, null, plugin.name))));
75
- }
76
- export default observer(InstalledPlugin);
48
+ });
49
+ export default InstalledPlugin;
@@ -1,9 +1,8 @@
1
1
  import React from 'react';
2
2
  import PluginManager from '@jbrowse/core/PluginManager';
3
3
  import { PluginStoreModel } from '../model';
4
- declare function InstalledPluginsList({ pluginManager, model, }: {
4
+ declare const InstalledPluginsList: ({ pluginManager, model, }: {
5
5
  pluginManager: PluginManager;
6
6
  model: PluginStoreModel;
7
- }): React.JSX.Element;
8
- declare const _default: typeof InstalledPluginsList;
9
- export default _default;
7
+ }) => React.JSX.Element;
8
+ export default InstalledPluginsList;
@@ -2,14 +2,12 @@ import React from 'react';
2
2
  import { observer } from 'mobx-react';
3
3
  import { List, Typography } from '@mui/material';
4
4
  import InstalledPlugin from './InstalledPlugin';
5
- function InstalledPluginsList({ pluginManager, model, }) {
5
+ const InstalledPluginsList = observer(function InstalledPluginsList({ pluginManager, model, }) {
6
6
  const { plugins } = pluginManager;
7
- const corePlugins = new Set(plugins
8
- .filter(p => { var _a; return (_a = pluginManager.pluginMetadata[p.name]) === null || _a === void 0 ? void 0 : _a.isCore; })
9
- .map(p => p.name));
10
- const externalPlugins = plugins.filter(plugin => !corePlugins.has(plugin.name));
7
+ const { filterText } = model;
8
+ const externalPlugins = plugins.filter(p => { var _a; return !((_a = pluginManager.pluginMetadata[p.name]) === null || _a === void 0 ? void 0 : _a.isCore); });
11
9
  return (React.createElement(List, null, externalPlugins.length > 0 ? (externalPlugins
12
- .filter(plugin => plugin.name.toLowerCase().includes(model.filterText.toLowerCase()))
13
- .map(plugin => (React.createElement(InstalledPlugin, { key: plugin.name, plugin: plugin, model: model, pluginManager: pluginManager })))) : (React.createElement(Typography, null, "No plugins currently installed"))));
14
- }
15
- export default observer(InstalledPluginsList);
10
+ .filter(p => p.name.toLowerCase().includes(filterText.toLowerCase()))
11
+ .map(p => React.createElement(InstalledPlugin, { key: p.name, plugin: p, model: model }))) : (React.createElement(Typography, null, "No plugins currently installed"))));
12
+ });
13
+ export default InstalledPluginsList;
@@ -1,9 +1,9 @@
1
1
  import React from 'react';
2
2
  import { JBrowsePlugin } from '@jbrowse/core/util/types';
3
3
  import { PluginStoreModel } from '../model';
4
- declare const _default: ({ plugin, model, adminMode, }: {
4
+ declare const PluginCard: ({ plugin, model, adminMode, }: {
5
5
  plugin: JBrowsePlugin;
6
6
  model: PluginStoreModel;
7
7
  adminMode: boolean;
8
8
  }) => React.JSX.Element;
9
- export default _default;
9
+ export default PluginCard;
@@ -11,7 +11,7 @@ import AddIcon from '@mui/icons-material/Add';
11
11
  import CheckIcon from '@mui/icons-material/Check';
12
12
  const useStyles = makeStyles()({
13
13
  card: {
14
- margin: '1em',
14
+ margin: '0.5em',
15
15
  },
16
16
  icon: {
17
17
  marginLeft: '0.5em',
@@ -23,10 +23,9 @@ const useStyles = makeStyles()({
23
23
  dataField: {
24
24
  display: 'flex',
25
25
  alignItems: 'center',
26
- margin: '0.4em 0em',
27
26
  },
28
27
  });
29
- export default observer(function PluginCard({ plugin, model, adminMode, }) {
28
+ const PluginCard = observer(function PluginCard({ plugin, model, adminMode, }) {
30
29
  const { classes } = useStyles();
31
30
  const session = getSession(model);
32
31
  const { pluginManager } = getEnv(model);
@@ -39,9 +38,8 @@ export default observer(function PluginCard({ plugin, model, adminMode, }) {
39
38
  const { jbrowse } = rootModel;
40
39
  return (React.createElement(Card, { variant: "outlined", key: plugin.name, className: classes.card },
41
40
  React.createElement(CardContent, null,
42
- React.createElement("div", { className: classes.dataField },
43
- React.createElement(Typography, { variant: "h5" },
44
- React.createElement(Link, { href: `${plugin.location}#readme`, target: "_blank", rel: "noopener" }, plugin.name))),
41
+ React.createElement(Typography, { variant: "h5" },
42
+ React.createElement(Link, { href: `${plugin.location}#readme`, target: "_blank", rel: "noopener" }, plugin.name)),
45
43
  React.createElement("div", { className: classes.dataField },
46
44
  React.createElement(PersonIcon, { style: { marginRight: '0.5em' } }),
47
45
  React.createElement(Typography, null, plugin.authors.join(', '))),
@@ -58,3 +56,4 @@ export default observer(function PluginCard({ plugin, model, adminMode, }) {
58
56
  setTempDisabled(true);
59
57
  } }, isInstalled ? 'Installed' : 'Install'))));
60
58
  });
59
+ export default PluginCard;
@@ -1,7 +1,6 @@
1
1
  import React from 'react';
2
2
  import { PluginStoreModel } from '../model';
3
- declare function PluginStoreWidget({ model }: {
3
+ declare const PluginStoreWidget: ({ model, }: {
4
4
  model: PluginStoreModel;
5
- }): React.JSX.Element;
6
- declare const _default: typeof PluginStoreWidget;
7
- export default _default;
5
+ }) => React.JSX.Element;
6
+ export default PluginStoreWidget;
@@ -1,4 +1,4 @@
1
- import React, { useState, useEffect } from 'react';
1
+ import React, { useState, lazy, Suspense } from 'react';
2
2
  import { Accordion, AccordionSummary, Button, IconButton, InputAdornment, TextField, Typography, } from '@mui/material';
3
3
  import { makeStyles } from 'tss-react/mui';
4
4
  import { observer } from 'mobx-react';
@@ -12,16 +12,14 @@ import InfoOutlinedIcon from '@mui/icons-material/InfoOutlined';
12
12
  // locals
13
13
  import InstalledPluginsList from './InstalledPluginsList';
14
14
  import PluginCard from './PluginCard';
15
- import CustomPluginForm from './CustomPluginForm';
15
+ import { useFetchPlugins } from './util';
16
+ // lazies
17
+ const AddCustomPluginDialog = lazy(() => import('./AddCustomPluginDialog'));
16
18
  const useStyles = makeStyles()(theme => ({
17
- root: {
18
- margin: theme.spacing(1),
19
- },
20
19
  expandIcon: {
21
20
  color: theme.palette.tertiary.contrastText,
22
21
  },
23
22
  adminBadge: {
24
- margin: '0.5em',
25
23
  borderRadius: 3,
26
24
  backgroundColor: theme.palette.quaternary.main,
27
25
  padding: '1em',
@@ -29,43 +27,17 @@ const useStyles = makeStyles()(theme => ({
29
27
  alignContent: 'center',
30
28
  },
31
29
  customPluginButton: {
32
- margin: '0.5em',
30
+ margin: '1em auto',
33
31
  display: 'flex',
34
- justifyContent: 'center',
35
32
  },
36
33
  }));
37
- function PluginStoreWidget({ model }) {
34
+ const PluginStoreWidget = observer(function ({ model, }) {
38
35
  const { classes } = useStyles();
39
- const [pluginArray, setPluginArray] = useState();
40
- const [error, setError] = useState();
41
- const [customPluginFormOpen, setCustomPluginFormOpen] = useState(false);
36
+ const { plugins, error } = useFetchPlugins();
37
+ const [open, setOpen] = useState(false);
42
38
  const { adminMode } = getSession(model);
43
39
  const { pluginManager } = getEnv(model);
44
- useEffect(() => {
45
- const controller = new AbortController();
46
- const { signal } = controller;
47
- (async () => {
48
- try {
49
- const response = await fetch('https://jbrowse.org/plugin-store/plugins.json', { signal });
50
- if (!response.ok) {
51
- const err = await response.text();
52
- throw new Error(`Failed to fetch plugin data: ${response.status} ${response.statusText} ${err}`);
53
- }
54
- const array = await response.json();
55
- if (!signal.aborted) {
56
- setPluginArray(array.plugins);
57
- }
58
- }
59
- catch (e) {
60
- console.error(e);
61
- setError(e);
62
- }
63
- })();
64
- return () => {
65
- controller.abort();
66
- };
67
- }, []);
68
- return (React.createElement("div", { className: classes.root },
40
+ return (React.createElement("div", null,
69
41
  adminMode && (React.createElement(React.Fragment, null,
70
42
  !isElectron && (React.createElement("div", { className: classes.adminBadge },
71
43
  React.createElement(InfoOutlinedIcon, { style: { marginRight: '0.3em' } }),
@@ -73,9 +45,9 @@ function PluginStoreWidget({ model }) {
73
45
  "You are using the ",
74
46
  React.createElement("code", null, "admin-server"),
75
47
  ". Any changes you make will be saved to your configuration file. You also have the ability to add custom plugins that are not in the store."))),
76
- React.createElement("div", { className: classes.customPluginButton },
77
- React.createElement(Button, { variant: "contained", onClick: () => setCustomPluginFormOpen(true) }, "Add custom plugin")),
78
- React.createElement(CustomPluginForm, { open: customPluginFormOpen, onClose: () => setCustomPluginFormOpen(false), model: model }))),
48
+ React.createElement(Button, { className: classes.customPluginButton, variant: "contained", onClick: () => setOpen(true) }, "Add custom plugin"),
49
+ open ? (React.createElement(Suspense, { fallback: React.createElement(React.Fragment, null) },
50
+ React.createElement(AddCustomPluginDialog, { onClose: () => setOpen(false), model: model }))) : null)),
79
51
  React.createElement(TextField, { label: "Filter plugins", value: model.filterText, onChange: event => model.setFilterText(event.target.value), fullWidth: true, InputProps: {
80
52
  endAdornment: (React.createElement(InputAdornment, { position: "end" },
81
53
  React.createElement(IconButton, { onClick: () => model.clearFilterText() },
@@ -89,7 +61,7 @@ function PluginStoreWidget({ model }) {
89
61
  React.createElement(Accordion, { defaultExpanded: true },
90
62
  React.createElement(AccordionSummary, { expandIcon: React.createElement(ExpandMoreIcon, { className: classes.expandIcon }) },
91
63
  React.createElement(Typography, { variant: "h5" }, "Available plugins")),
92
- error ? (React.createElement(Typography, { color: "error" }, `${error}`)) : pluginArray ? (pluginArray
64
+ error ? (React.createElement(Typography, { color: "error" }, `${error}`)) : plugins ? (plugins
93
65
  .filter(plugin => {
94
66
  // If plugin only has cjsUrl, don't display outside desktop
95
67
  return (!(isElectron && plugin.cjsUrl) &&
@@ -98,5 +70,5 @@ function PluginStoreWidget({ model }) {
98
70
  .includes(model.filterText.toLowerCase()));
99
71
  })
100
72
  .map(plugin => (React.createElement(PluginCard, { key: plugin.name, plugin: plugin, model: model, adminMode: !!adminMode })))) : (React.createElement(LoadingEllipses, null)))));
101
- }
102
- export default observer(PluginStoreWidget);
73
+ });
74
+ export default PluginStoreWidget;
@@ -0,0 +1,5 @@
1
+ import { JBrowsePlugin } from '@jbrowse/core/util/types';
2
+ export declare function useFetchPlugins(): {
3
+ plugins: JBrowsePlugin[] | undefined;
4
+ error: unknown;
5
+ };
@@ -0,0 +1,25 @@
1
+ import { useState, useEffect } from 'react';
2
+ export function useFetchPlugins() {
3
+ const [plugins, setPlugins] = useState();
4
+ const [error, setError] = useState();
5
+ useEffect(() => {
6
+ // eslint-disable-next-line @typescript-eslint/no-floating-promises
7
+ ;
8
+ (async () => {
9
+ try {
10
+ const res = await fetch('https://jbrowse.org/plugin-store/plugins.json');
11
+ if (!res.ok) {
12
+ const err = await res.text();
13
+ throw new Error(`HTTP ${res.status} fetching plugins: ${err}`);
14
+ }
15
+ const array = await res.json();
16
+ setPlugins(array.plugins);
17
+ }
18
+ catch (e) {
19
+ console.error(e);
20
+ setError(e);
21
+ }
22
+ })();
23
+ }, []);
24
+ return { plugins, error };
25
+ }
@@ -1,6 +1,6 @@
1
1
  import { Instance } from 'mobx-state-tree';
2
2
  import PluginManager from '@jbrowse/core/PluginManager';
3
- export default function f(pluginManager: PluginManager): import("mobx-state-tree").IModelType<{
3
+ export default function stateModelFactory(pluginManager: PluginManager): import("mobx-state-tree").IModelType<{
4
4
  id: import("mobx-state-tree").IOptionalIType<import("mobx-state-tree").ISimpleType<string>, [undefined]>;
5
5
  type: import("mobx-state-tree").ISimpleType<"PluginStoreWidget">;
6
6
  filterText: import("mobx-state-tree").IType<string | undefined, string, string>;
@@ -9,5 +9,5 @@ export default function f(pluginManager: PluginManager): import("mobx-state-tree
9
9
  clearFilterText(): void;
10
10
  setFilterText(newText: string): void;
11
11
  }, import("mobx-state-tree")._NotCustomized, import("mobx-state-tree")._NotCustomized>;
12
- export type PluginStoreStateModel = ReturnType<typeof f>;
12
+ export type PluginStoreStateModel = ReturnType<typeof stateModelFactory>;
13
13
  export type PluginStoreModel = Instance<PluginStoreStateModel>;
@@ -1,6 +1,6 @@
1
1
  import { types } from 'mobx-state-tree';
2
2
  import { ElementId } from '@jbrowse/core/util/types/mst';
3
- export default function f(pluginManager) {
3
+ export default function stateModelFactory(pluginManager) {
4
4
  return types
5
5
  .model('PluginStoreModel', {
6
6
  id: ElementId,
package/esm/index.d.ts CHANGED
@@ -1,10 +1,6 @@
1
1
  /// <reference types="react" />
2
2
  import Plugin from '@jbrowse/core/Plugin';
3
3
  import PluginManager from '@jbrowse/core/PluginManager';
4
- declare const SetDefaultSession: import("react").LazyExoticComponent<({ rootModel, onClose }: {
5
- rootModel?: unknown;
6
- onClose: () => void;
7
- }) => import("react").JSX.Element | null>;
8
4
  declare const AssemblyManager: import("react").LazyExoticComponent<({ rootModel, onClose, }: {
9
5
  rootModel: any;
10
6
  onClose: (arg: boolean) => void;
@@ -16,14 +12,10 @@ export default class extends Plugin {
16
12
  rootModel: any;
17
13
  onClose: (arg: boolean) => void;
18
14
  }) => import("react").JSX.Element>;
19
- SetDefaultSession: import("react").LazyExoticComponent<({ rootModel, onClose }: {
20
- rootModel?: unknown;
21
- onClose: () => void;
22
- }) => import("react").JSX.Element | null>;
23
15
  };
24
16
  install(pluginManager: PluginManager): void;
25
17
  configure(_pluginManager: PluginManager): void;
26
18
  }
27
- export { AssemblyManager, SetDefaultSession };
19
+ export { AssemblyManager };
28
20
  export { type AddTrackModel } from './AddTrackWidget/model';
29
21
  export { type HierarchicalTrackSelectorModel } from './HierarchicalTrackSelectorWidget';
package/esm/index.js CHANGED
@@ -5,7 +5,6 @@ import AddTrackWidgetF from './AddTrackWidget';
5
5
  import AddConnectionWidgetF from './AddConnectionWidget';
6
6
  import PluginStoreWidgetF from './PluginStoreWidget';
7
7
  import HierarchicalTrackSelectorWidgetF from './HierarchicalTrackSelectorWidget';
8
- const SetDefaultSession = lazy(() => import('./SetDefaultSession'));
9
8
  const AssemblyManager = lazy(() => import('./AssemblyManager'));
10
9
  export default class extends Plugin {
11
10
  constructor() {
@@ -13,7 +12,6 @@ export default class extends Plugin {
13
12
  this.name = 'DataManagementPlugin';
14
13
  this.exports = {
15
14
  AssemblyManager,
16
- SetDefaultSession,
17
15
  };
18
16
  }
19
17
  install(pluginManager) {
@@ -25,4 +23,4 @@ export default class extends Plugin {
25
23
  }
26
24
  configure(_pluginManager) { }
27
25
  }
28
- export { AssemblyManager, SetDefaultSession };
26
+ export { AssemblyManager };
@@ -12,7 +12,7 @@ export default function UCSCTrackHubConnection(pluginManager) {
12
12
  }))
13
13
  .actions(self => ({
14
14
  async connect() {
15
- var _a;
15
+ var _a, _b;
16
16
  const session = getSession(self);
17
17
  const notLoadedAssemblies = [];
18
18
  try {
@@ -80,7 +80,7 @@ export default function UCSCTrackHubConnection(pluginManager) {
80
80
  catch (e) {
81
81
  console.error(e);
82
82
  session.notify(`There was a problem connecting to the UCSC Track Hub "${self.configuration.name}". Please make sure you have entered a valid hub.txt file. The error that was thrown is: "${e}"`, 'error');
83
- session.breakConnection(self.configuration);
83
+ (_b = session.breakConnection) === null || _b === void 0 ? void 0 : _b.call(session, self.configuration);
84
84
  }
85
85
  },
86
86
  }));
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@jbrowse/plugin-data-management",
3
- "version": "2.6.2",
3
+ "version": "2.7.0",
4
4
  "description": "JBrowse 2 linear genome view",
5
5
  "keywords": [
6
6
  "jbrowse",
@@ -39,7 +39,7 @@
39
39
  "@gmod/ucsc-hub": "^0.1.6",
40
40
  "@mui/icons-material": "^5.0.1",
41
41
  "@mui/x-data-grid": "^6.0.1",
42
- "clsx": "^1.1.0",
42
+ "clsx": "^2.0.0",
43
43
  "react-virtualized-auto-sizer": "^1.0.2",
44
44
  "react-vtree": "^3.0.0-beta.1",
45
45
  "react-window": "^1.8.6"
@@ -47,9 +47,10 @@
47
47
  "peerDependencies": {
48
48
  "@jbrowse/core": "^2.0.0",
49
49
  "@jbrowse/plugin-config": "^2.0.0",
50
+ "@jbrowse/product-core": "^2.0.0",
50
51
  "@mui/material": "^5.0.0",
51
52
  "mobx": "^6.0.0",
52
- "mobx-react": "^7.0.0",
53
+ "mobx-react": "^9.0.0",
53
54
  "mobx-state-tree": "^5.0.0",
54
55
  "react": ">=16.8.0",
55
56
  "tss-react": "^4.0.0"
@@ -60,5 +61,5 @@
60
61
  "distModule": "esm/index.js",
61
62
  "srcModule": "src/index.ts",
62
63
  "module": "esm/index.js",
63
- "gitHead": "bbea587a402d9974acdd804a33f4b77f31a2fd5f"
64
+ "gitHead": "dbe7fb1af01fc89f833d2744635eb44a17365b41"
64
65
  }
@@ -1,9 +0,0 @@
1
- import React from 'react';
2
- import { PluginStoreModel } from '../model';
3
- declare function CustomPluginForm({ open, onClose, model, }: {
4
- open: boolean;
5
- onClose(): void;
6
- model: PluginStoreModel;
7
- }): React.JSX.Element;
8
- declare const _default: typeof CustomPluginForm;
9
- export default _default;
@@ -1,6 +0,0 @@
1
- import React from 'react';
2
- declare const SetDefaultSession: ({ rootModel, onClose }: {
3
- rootModel?: unknown;
4
- onClose: () => void;
5
- }) => React.JSX.Element | null;
6
- export default SetDefaultSession;
@@ -1,38 +0,0 @@
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 mobx_react_1 = require("mobx-react");
8
- const material_1 = require("@mui/material");
9
- function canSetDefaultSession(obj) {
10
- return typeof obj === 'object' && !!obj && 'jbrowse' in obj;
11
- }
12
- const SetDefaultSession = (0, mobx_react_1.observer)(({ rootModel, onClose }) => {
13
- if (!rootModel) {
14
- return null;
15
- }
16
- if (!canSetDefaultSession(rootModel)) {
17
- console.error('Incorrect rootmodel');
18
- return null;
19
- }
20
- const { jbrowse, session } = rootModel;
21
- return (react_1.default.createElement(material_1.Dialog, { open: true, onClose: onClose },
22
- react_1.default.createElement(material_1.DialogTitle, null, "Set default session"),
23
- react_1.default.createElement(material_1.DialogContent, null,
24
- react_1.default.createElement(material_1.Typography, null, "Select \"Set current session as default\" to make your current session saved to the config file. You can also hit \"Clear default session\", which would remove the default session from the config.")),
25
- react_1.default.createElement(material_1.DialogActions, null,
26
- react_1.default.createElement(material_1.Button, { variant: "contained", onClick: () => {
27
- jbrowse.setDefaultSessionConf({
28
- name: `New session`,
29
- });
30
- onClose();
31
- } }, "Clear default session"),
32
- react_1.default.createElement(material_1.Button, { color: "secondary", variant: "contained", onClick: () => onClose() }, "Cancel"),
33
- react_1.default.createElement(material_1.Button, { color: "primary", variant: "contained", onClick: () => {
34
- jbrowse.setDefaultSessionConf(session);
35
- onClose();
36
- } }, "Set current session as default"))));
37
- });
38
- exports.default = SetDefaultSession;
@@ -1 +0,0 @@
1
- export { default } from './SetDefaultSession';
@@ -1,8 +0,0 @@
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
- exports.default = void 0;
7
- var SetDefaultSession_1 = require("./SetDefaultSession");
8
- Object.defineProperty(exports, "default", { enumerable: true, get: function () { return __importDefault(SetDefaultSession_1).default; } });
@@ -1,9 +0,0 @@
1
- import React from 'react';
2
- import { PluginStoreModel } from '../model';
3
- declare function CustomPluginForm({ open, onClose, model, }: {
4
- open: boolean;
5
- onClose(): void;
6
- model: PluginStoreModel;
7
- }): React.JSX.Element;
8
- declare const _default: typeof CustomPluginForm;
9
- export default _default;
@@ -1,6 +0,0 @@
1
- import React from 'react';
2
- declare const SetDefaultSession: ({ rootModel, onClose }: {
3
- rootModel?: unknown;
4
- onClose: () => void;
5
- }) => React.JSX.Element | null;
6
- export default SetDefaultSession;
@@ -1,33 +0,0 @@
1
- import React from 'react';
2
- import { observer } from 'mobx-react';
3
- import { Dialog, DialogTitle, DialogContent, DialogActions, Button, Typography, } from '@mui/material';
4
- function canSetDefaultSession(obj) {
5
- return typeof obj === 'object' && !!obj && 'jbrowse' in obj;
6
- }
7
- const SetDefaultSession = observer(({ rootModel, onClose }) => {
8
- if (!rootModel) {
9
- return null;
10
- }
11
- if (!canSetDefaultSession(rootModel)) {
12
- console.error('Incorrect rootmodel');
13
- return null;
14
- }
15
- const { jbrowse, session } = rootModel;
16
- return (React.createElement(Dialog, { open: true, onClose: onClose },
17
- React.createElement(DialogTitle, null, "Set default session"),
18
- React.createElement(DialogContent, null,
19
- React.createElement(Typography, null, "Select \"Set current session as default\" to make your current session saved to the config file. You can also hit \"Clear default session\", which would remove the default session from the config.")),
20
- React.createElement(DialogActions, null,
21
- React.createElement(Button, { variant: "contained", onClick: () => {
22
- jbrowse.setDefaultSessionConf({
23
- name: `New session`,
24
- });
25
- onClose();
26
- } }, "Clear default session"),
27
- React.createElement(Button, { color: "secondary", variant: "contained", onClick: () => onClose() }, "Cancel"),
28
- React.createElement(Button, { color: "primary", variant: "contained", onClick: () => {
29
- jbrowse.setDefaultSessionConf(session);
30
- onClose();
31
- } }, "Set current session as default"))));
32
- });
33
- export default SetDefaultSession;
@@ -1 +0,0 @@
1
- export { default } from './SetDefaultSession';
@@ -1 +0,0 @@
1
- export { default } from './SetDefaultSession';