@jbrowse/plugin-data-management 2.7.0 → 2.7.1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
@@ -33,6 +33,7 @@ const mui_1 = require("tss-react/mui");
33
33
  const Clear_1 = __importDefault(require("@mui/icons-material/Clear"));
34
34
  const Minimize_1 = __importDefault(require("@mui/icons-material/Minimize"));
35
35
  const Add_1 = __importDefault(require("@mui/icons-material/Add"));
36
+ const util_1 = require("@jbrowse/core/util");
36
37
  const useStyles = (0, mui_1.makeStyles)()(theme => ({
37
38
  facet: {
38
39
  margin: 0,
@@ -42,17 +43,23 @@ const useStyles = (0, mui_1.makeStyles)()(theme => ({
42
43
  marginBottom: theme.spacing(2),
43
44
  },
44
45
  }));
46
+ function ClearButton({ onClick }) {
47
+ return (react_1.default.createElement(material_1.Tooltip, { title: "Clear selection on this facet filter" },
48
+ react_1.default.createElement(material_1.IconButton, { onClick: () => onClick(), size: "small" },
49
+ react_1.default.createElement(Clear_1.default, null))));
50
+ }
51
+ function ExpandButton({ visible, onClick, }) {
52
+ return (react_1.default.createElement(material_1.Tooltip, { title: "Minimize/expand this facet filter" },
53
+ react_1.default.createElement(material_1.IconButton, { onClick: () => onClick(), size: "small" }, visible ? react_1.default.createElement(Minimize_1.default, null) : react_1.default.createElement(Add_1.default, null))));
54
+ }
45
55
  function FacetFilter({ column, vals, width, dispatch, filters, }) {
46
56
  const { classes } = useStyles();
47
57
  const [visible, setVisible] = (0, react_1.useState)(true);
48
58
  return (react_1.default.createElement(material_1.FormControl, { key: column.field, className: classes.facet, style: { width } },
49
59
  react_1.default.createElement("div", { style: { display: 'flex' } },
50
60
  react_1.default.createElement(material_1.Typography, null, column.field),
51
- react_1.default.createElement(material_1.Tooltip, { title: "Clear selection on this facet filter" },
52
- react_1.default.createElement(material_1.IconButton, { onClick: () => dispatch({ key: column.field, val: [] }), size: "small" },
53
- react_1.default.createElement(Clear_1.default, null))),
54
- react_1.default.createElement(material_1.Tooltip, { title: "Minimize/expand this facet filter" },
55
- react_1.default.createElement(material_1.IconButton, { onClick: () => setVisible(!visible), size: "small" }, visible ? react_1.default.createElement(Minimize_1.default, null) : react_1.default.createElement(Add_1.default, null)))),
61
+ react_1.default.createElement(ClearButton, { onClick: () => dispatch({ key: column.field, val: [] }) }),
62
+ react_1.default.createElement(ExpandButton, { visible: visible, onClick: () => setVisible(!visible) })),
56
63
  visible ? (react_1.default.createElement(material_1.Select, { multiple: true, native: true, className: classes.select, value: filters[column.field], onChange: event => {
57
64
  dispatch({
58
65
  key: column.field,
@@ -64,7 +71,7 @@ function FacetFilter({ column, vals, width, dispatch, filters, }) {
64
71
  } }, vals
65
72
  .sort((a, b) => a[0].localeCompare(b[0]))
66
73
  .map(([name, count]) => (react_1.default.createElement("option", { key: name, value: name },
67
- name,
74
+ (0, util_1.coarseStripHTML)(name),
68
75
  " (",
69
76
  count,
70
77
  ")"))))) : null));
@@ -1,35 +1,11 @@
1
1
  "use strict";
2
- var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
3
- if (k2 === undefined) k2 = k;
4
- var desc = Object.getOwnPropertyDescriptor(m, k);
5
- if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
6
- desc = { enumerable: true, get: function() { return m[k]; } };
7
- }
8
- Object.defineProperty(o, k2, desc);
9
- }) : (function(o, m, k, k2) {
10
- if (k2 === undefined) k2 = k;
11
- o[k2] = m[k];
12
- }));
13
- var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
14
- Object.defineProperty(o, "default", { enumerable: true, value: v });
15
- }) : function(o, v) {
16
- o["default"] = v;
17
- });
18
- var __importStar = (this && this.__importStar) || function (mod) {
19
- if (mod && mod.__esModule) return mod;
20
- var result = {};
21
- if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
22
- __setModuleDefault(result, mod);
23
- return result;
24
- };
25
2
  var __importDefault = (this && this.__importDefault) || function (mod) {
26
3
  return (mod && mod.__esModule) ? mod : { "default": mod };
27
4
  };
28
5
  Object.defineProperty(exports, "__esModule", { value: true });
29
- const react_1 = __importStar(require("react"));
6
+ const react_1 = __importDefault(require("react"));
30
7
  const material_1 = require("@mui/material");
31
8
  const mui_1 = require("tss-react/mui");
32
- const Menu_1 = __importDefault(require("@jbrowse/core/ui/Menu"));
33
9
  const util_1 = require("@jbrowse/core/util");
34
10
  const SanitizedHTML_1 = __importDefault(require("@jbrowse/core/ui/SanitizedHTML"));
35
11
  const configuration_1 = require("@jbrowse/core/configuration");
@@ -37,6 +13,7 @@ const configuration_1 = require("@jbrowse/core/configuration");
37
13
  const MoreHoriz_1 = __importDefault(require("@mui/icons-material/MoreHoriz"));
38
14
  // locals
39
15
  const util_2 = require("../util");
16
+ const CascadingMenuButton_1 = __importDefault(require("@jbrowse/core/ui/CascadingMenuButton"));
40
17
  const useStyles = (0, mui_1.makeStyles)()(theme => ({
41
18
  compactCheckbox: {
42
19
  padding: 0,
@@ -49,10 +26,8 @@ const useStyles = (0, mui_1.makeStyles)()(theme => ({
49
26
  },
50
27
  }));
51
28
  function TrackLabel({ data }) {
52
- var _a, _b;
53
29
  const { classes } = useStyles();
54
30
  const { checked, conf, model, drawerPosition, id, name, onChange, selected } = data;
55
- const [info, setInfo] = (0, react_1.useState)();
56
31
  const description = (conf && (0, configuration_1.readConfObject)(conf, ['description'])) || '';
57
32
  return (react_1.default.createElement(react_1.default.Fragment, null,
58
33
  react_1.default.createElement(material_1.Tooltip, { title: description + (selected ? ' (in selection)' : ''), placement: drawerPosition === 'left' ? 'right' : 'left' },
@@ -61,25 +36,25 @@ function TrackLabel({ data }) {
61
36
  'data-testid': `htsTrackEntry-${id}`,
62
37
  } }), label: react_1.default.createElement("div", { "data-testid": `htsTrackLabel-${id}`, style: { background: selected ? '#cccc' : undefined } },
63
38
  react_1.default.createElement(SanitizedHTML_1.default, { html: name })) })),
64
- react_1.default.createElement(material_1.IconButton, { onClick: e => setInfo({ target: e.currentTarget, id, conf }), style: { padding: 0 }, "data-testid": `htsTrackEntryMenu-${id}` },
65
- react_1.default.createElement(MoreHoriz_1.default, null)),
66
- info ? (react_1.default.createElement(Menu_1.default, { anchorEl: info === null || info === void 0 ? void 0 : info.target, menuItems: [
67
- ...(((_b = (_a = (0, util_1.getSession)(model)).getTrackActionMenuItems) === null || _b === void 0 ? void 0 : _b.call(_a, info.conf)) || []),
68
- {
69
- label: 'Add to selection',
70
- onClick: () => model.addToSelection([info.conf]),
71
- },
72
- ...(selected
73
- ? [
74
- {
75
- label: 'Remove from selection',
76
- onClick: () => model.removeFromSelection([info.conf]),
77
- },
78
- ]
79
- : []),
80
- ], onMenuItemClick: (_event, callback) => {
81
- callback();
82
- setInfo(undefined);
83
- }, open: Boolean(info), onClose: () => setInfo(undefined) })) : null));
39
+ react_1.default.createElement(TrackMenuButton, { model: model, selected: selected, id: id, conf: conf })));
84
40
  }
85
41
  exports.default = TrackLabel;
42
+ function TrackMenuButton({ id, model, selected, conf, }) {
43
+ var _a, _b;
44
+ return (react_1.default.createElement(CascadingMenuButton_1.default, { style: { padding: 0 }, "data-testid": `htsTrackEntryMenu-${id}`, menuItems: [
45
+ ...(((_b = (_a = (0, util_1.getSession)(model)).getTrackActionMenuItems) === null || _b === void 0 ? void 0 : _b.call(_a, conf)) || []),
46
+ {
47
+ label: 'Add to selection',
48
+ onClick: () => model.addToSelection([conf]),
49
+ },
50
+ ...(selected
51
+ ? [
52
+ {
53
+ label: 'Remove from selection',
54
+ onClick: () => model.removeFromSelection([conf]),
55
+ },
56
+ ]
57
+ : []),
58
+ ] },
59
+ react_1.default.createElement(MoreHoriz_1.default, null)));
60
+ }
@@ -7,15 +7,18 @@ export interface TreeNode {
7
7
  isOpenByDefault?: boolean;
8
8
  children: TreeNode[];
9
9
  }
10
- export declare function generateHierarchy(model: {
11
- filterText: string;
12
- activeSortTrackNames: boolean;
13
- activeSortCategories: boolean;
14
- view?: {
15
- tracks: {
16
- configuration: AnyConfigurationModel;
17
- }[];
10
+ export declare function generateHierarchy({ model, trackConfs, extra, }: {
11
+ model: {
12
+ filterText: string;
13
+ activeSortTrackNames: boolean;
14
+ activeSortCategories: boolean;
15
+ collapsed: Map<string, boolean>;
16
+ view?: {
17
+ tracks: {
18
+ configuration: AnyConfigurationModel;
19
+ }[];
20
+ };
18
21
  };
19
- }, trackConfs: AnyConfigurationModel[], collapsed: {
20
- get: (arg: string) => boolean | undefined;
21
- }, extra?: string): TreeNode[];
22
+ trackConfs: AnyConfigurationModel[];
23
+ extra?: string;
24
+ }): TreeNode[];
@@ -40,9 +40,9 @@ function sortConfs(confs, sortNames, sortCategories) {
40
40
  }
41
41
  return ret.map(a => a[0]);
42
42
  }
43
- function generateHierarchy(model, trackConfs, collapsed, extra) {
43
+ function generateHierarchy({ model, trackConfs, extra, }) {
44
44
  const hierarchy = { children: [] };
45
- const { filterText, activeSortTrackNames, activeSortCategories, view } = model;
45
+ const { collapsed, filterText, activeSortTrackNames, activeSortCategories, view, } = model;
46
46
  if (!view) {
47
47
  return [];
48
48
  }
@@ -188,7 +188,11 @@ function stateTreeFactory(pluginManager) {
188
188
  * #method
189
189
  */
190
190
  connectionHierarchy(connection) {
191
- return (0, generateHierarchy_1.generateHierarchy)(self, self.connectionTrackConfigurations(connection), self.collapsed, connection.name);
191
+ return (0, generateHierarchy_1.generateHierarchy)({
192
+ model: self,
193
+ trackConfs: self.connectionTrackConfigurations(connection),
194
+ extra: connection.name,
195
+ });
192
196
  },
193
197
  }))
194
198
  .views(self => ({
@@ -218,7 +222,10 @@ function stateTreeFactory(pluginManager) {
218
222
  .map(s => ({
219
223
  name: s.group,
220
224
  id: s.group,
221
- children: (0, generateHierarchy_1.generateHierarchy)(self, s.tracks, self.collapsed),
225
+ children: (0, generateHierarchy_1.generateHierarchy)({
226
+ model: self,
227
+ trackConfs: s.tracks,
228
+ }),
222
229
  }))
223
230
  // always keep the Tracks entry at idx 0
224
231
  .filter((f, idx) => idx === 0 || !!f.children.length),
@@ -5,6 +5,7 @@ import { makeStyles } from 'tss-react/mui';
5
5
  import ClearIcon from '@mui/icons-material/Clear';
6
6
  import MinimizeIcon from '@mui/icons-material/Minimize';
7
7
  import AddIcon from '@mui/icons-material/Add';
8
+ import { coarseStripHTML } from '@jbrowse/core/util';
8
9
  const useStyles = makeStyles()(theme => ({
9
10
  facet: {
10
11
  margin: 0,
@@ -14,17 +15,23 @@ const useStyles = makeStyles()(theme => ({
14
15
  marginBottom: theme.spacing(2),
15
16
  },
16
17
  }));
18
+ function ClearButton({ onClick }) {
19
+ return (React.createElement(Tooltip, { title: "Clear selection on this facet filter" },
20
+ React.createElement(IconButton, { onClick: () => onClick(), size: "small" },
21
+ React.createElement(ClearIcon, null))));
22
+ }
23
+ function ExpandButton({ visible, onClick, }) {
24
+ return (React.createElement(Tooltip, { title: "Minimize/expand this facet filter" },
25
+ React.createElement(IconButton, { onClick: () => onClick(), size: "small" }, visible ? React.createElement(MinimizeIcon, null) : React.createElement(AddIcon, null))));
26
+ }
17
27
  export default function FacetFilter({ column, vals, width, dispatch, filters, }) {
18
28
  const { classes } = useStyles();
19
29
  const [visible, setVisible] = useState(true);
20
30
  return (React.createElement(FormControl, { key: column.field, className: classes.facet, style: { width } },
21
31
  React.createElement("div", { style: { display: 'flex' } },
22
32
  React.createElement(Typography, null, column.field),
23
- React.createElement(Tooltip, { title: "Clear selection on this facet filter" },
24
- React.createElement(IconButton, { onClick: () => dispatch({ key: column.field, val: [] }), size: "small" },
25
- React.createElement(ClearIcon, null))),
26
- React.createElement(Tooltip, { title: "Minimize/expand this facet filter" },
27
- React.createElement(IconButton, { onClick: () => setVisible(!visible), size: "small" }, visible ? React.createElement(MinimizeIcon, null) : React.createElement(AddIcon, null)))),
33
+ React.createElement(ClearButton, { onClick: () => dispatch({ key: column.field, val: [] }) }),
34
+ React.createElement(ExpandButton, { visible: visible, onClick: () => setVisible(!visible) })),
28
35
  visible ? (React.createElement(Select, { multiple: true, native: true, className: classes.select, value: filters[column.field], onChange: event => {
29
36
  dispatch({
30
37
  key: column.field,
@@ -36,7 +43,7 @@ export default function FacetFilter({ column, vals, width, dispatch, filters, })
36
43
  } }, vals
37
44
  .sort((a, b) => a[0].localeCompare(b[0]))
38
45
  .map(([name, count]) => (React.createElement("option", { key: name, value: name },
39
- name,
46
+ coarseStripHTML(name),
40
47
  " (",
41
48
  count,
42
49
  ")"))))) : null));
@@ -1,7 +1,6 @@
1
- import React, { useState } from 'react';
2
- import { Checkbox, FormControlLabel, IconButton, Tooltip } from '@mui/material';
1
+ import React from 'react';
2
+ import { Checkbox, FormControlLabel, Tooltip } from '@mui/material';
3
3
  import { makeStyles } from 'tss-react/mui';
4
- import JBrowseMenu from '@jbrowse/core/ui/Menu';
5
4
  import { getSession } from '@jbrowse/core/util';
6
5
  import SanitizedHTML from '@jbrowse/core/ui/SanitizedHTML';
7
6
  import { readConfObject, } from '@jbrowse/core/configuration';
@@ -9,6 +8,7 @@ import { readConfObject, } from '@jbrowse/core/configuration';
9
8
  import MoreHorizIcon from '@mui/icons-material/MoreHoriz';
10
9
  // locals
11
10
  import { isUnsupported } from '../util';
11
+ import CascadingMenuButton from '@jbrowse/core/ui/CascadingMenuButton';
12
12
  const useStyles = makeStyles()(theme => ({
13
13
  compactCheckbox: {
14
14
  padding: 0,
@@ -21,10 +21,8 @@ const useStyles = makeStyles()(theme => ({
21
21
  },
22
22
  }));
23
23
  export default function TrackLabel({ data }) {
24
- var _a, _b;
25
24
  const { classes } = useStyles();
26
25
  const { checked, conf, model, drawerPosition, id, name, onChange, selected } = data;
27
- const [info, setInfo] = useState();
28
26
  const description = (conf && readConfObject(conf, ['description'])) || '';
29
27
  return (React.createElement(React.Fragment, null,
30
28
  React.createElement(Tooltip, { title: description + (selected ? ' (in selection)' : ''), placement: drawerPosition === 'left' ? 'right' : 'left' },
@@ -33,24 +31,24 @@ export default function TrackLabel({ data }) {
33
31
  'data-testid': `htsTrackEntry-${id}`,
34
32
  } }), label: React.createElement("div", { "data-testid": `htsTrackLabel-${id}`, style: { background: selected ? '#cccc' : undefined } },
35
33
  React.createElement(SanitizedHTML, { html: name })) })),
36
- React.createElement(IconButton, { onClick: e => setInfo({ target: e.currentTarget, id, conf }), style: { padding: 0 }, "data-testid": `htsTrackEntryMenu-${id}` },
37
- React.createElement(MoreHorizIcon, null)),
38
- info ? (React.createElement(JBrowseMenu, { anchorEl: info === null || info === void 0 ? void 0 : info.target, menuItems: [
39
- ...(((_b = (_a = getSession(model)).getTrackActionMenuItems) === null || _b === void 0 ? void 0 : _b.call(_a, info.conf)) || []),
40
- {
41
- label: 'Add to selection',
42
- onClick: () => model.addToSelection([info.conf]),
43
- },
44
- ...(selected
45
- ? [
46
- {
47
- label: 'Remove from selection',
48
- onClick: () => model.removeFromSelection([info.conf]),
49
- },
50
- ]
51
- : []),
52
- ], onMenuItemClick: (_event, callback) => {
53
- callback();
54
- setInfo(undefined);
55
- }, open: Boolean(info), onClose: () => setInfo(undefined) })) : null));
34
+ React.createElement(TrackMenuButton, { model: model, selected: selected, id: id, conf: conf })));
35
+ }
36
+ function TrackMenuButton({ id, model, selected, conf, }) {
37
+ var _a, _b;
38
+ return (React.createElement(CascadingMenuButton, { style: { padding: 0 }, "data-testid": `htsTrackEntryMenu-${id}`, menuItems: [
39
+ ...(((_b = (_a = getSession(model)).getTrackActionMenuItems) === null || _b === void 0 ? void 0 : _b.call(_a, conf)) || []),
40
+ {
41
+ label: 'Add to selection',
42
+ onClick: () => model.addToSelection([conf]),
43
+ },
44
+ ...(selected
45
+ ? [
46
+ {
47
+ label: 'Remove from selection',
48
+ onClick: () => model.removeFromSelection([conf]),
49
+ },
50
+ ]
51
+ : []),
52
+ ] },
53
+ React.createElement(MoreHorizIcon, null)));
56
54
  }
@@ -7,15 +7,18 @@ export interface TreeNode {
7
7
  isOpenByDefault?: boolean;
8
8
  children: TreeNode[];
9
9
  }
10
- export declare function generateHierarchy(model: {
11
- filterText: string;
12
- activeSortTrackNames: boolean;
13
- activeSortCategories: boolean;
14
- view?: {
15
- tracks: {
16
- configuration: AnyConfigurationModel;
17
- }[];
10
+ export declare function generateHierarchy({ model, trackConfs, extra, }: {
11
+ model: {
12
+ filterText: string;
13
+ activeSortTrackNames: boolean;
14
+ activeSortCategories: boolean;
15
+ collapsed: Map<string, boolean>;
16
+ view?: {
17
+ tracks: {
18
+ configuration: AnyConfigurationModel;
19
+ }[];
20
+ };
18
21
  };
19
- }, trackConfs: AnyConfigurationModel[], collapsed: {
20
- get: (arg: string) => boolean | undefined;
21
- }, extra?: string): TreeNode[];
22
+ trackConfs: AnyConfigurationModel[];
23
+ extra?: string;
24
+ }): TreeNode[];
@@ -37,9 +37,9 @@ function sortConfs(confs, sortNames, sortCategories) {
37
37
  }
38
38
  return ret.map(a => a[0]);
39
39
  }
40
- export function generateHierarchy(model, trackConfs, collapsed, extra) {
40
+ export function generateHierarchy({ model, trackConfs, extra, }) {
41
41
  const hierarchy = { children: [] };
42
- const { filterText, activeSortTrackNames, activeSortCategories, view } = model;
42
+ const { collapsed, filterText, activeSortTrackNames, activeSortCategories, view, } = model;
43
43
  if (!view) {
44
44
  return [];
45
45
  }
@@ -186,7 +186,11 @@ export default function stateTreeFactory(pluginManager) {
186
186
  * #method
187
187
  */
188
188
  connectionHierarchy(connection) {
189
- return generateHierarchy(self, self.connectionTrackConfigurations(connection), self.collapsed, connection.name);
189
+ return generateHierarchy({
190
+ model: self,
191
+ trackConfs: self.connectionTrackConfigurations(connection),
192
+ extra: connection.name,
193
+ });
190
194
  },
191
195
  }))
192
196
  .views(self => ({
@@ -216,7 +220,10 @@ export default function stateTreeFactory(pluginManager) {
216
220
  .map(s => ({
217
221
  name: s.group,
218
222
  id: s.group,
219
- children: generateHierarchy(self, s.tracks, self.collapsed),
223
+ children: generateHierarchy({
224
+ model: self,
225
+ trackConfs: s.tracks,
226
+ }),
220
227
  }))
221
228
  // always keep the Tracks entry at idx 0
222
229
  .filter((f, idx) => idx === 0 || !!f.children.length),
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@jbrowse/plugin-data-management",
3
- "version": "2.7.0",
3
+ "version": "2.7.1",
4
4
  "description": "JBrowse 2 linear genome view",
5
5
  "keywords": [
6
6
  "jbrowse",
@@ -61,5 +61,5 @@
61
61
  "distModule": "esm/index.js",
62
62
  "srcModule": "src/index.ts",
63
63
  "module": "esm/index.js",
64
- "gitHead": "dbe7fb1af01fc89f833d2744635eb44a17365b41"
64
+ "gitHead": "2cda1611eebd12517f2a3cfc1b612face27005d4"
65
65
  }