@jbrowse/plugin-data-management 1.7.11 → 2.1.0

package/dist/HierarchicalTrackSelectorWidget/components/HierarchicalTrackSelector.js

@@ -1,664 +1,232 @@
 "use strict";
-
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.default = void 0;
-
-var _regenerator = _interopRequireDefault(require("@babel/runtime/regenerator"));
-
-var _typeof2 = _interopRequireDefault(require("@babel/runtime/helpers/typeof"));
-
-var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
-
-var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
-
-var _react = _interopRequireWildcard(require("react"));
-
-var _core = require("@material-ui/core");
-
-var _Clear = _interopRequireDefault(require("@material-ui/icons/Clear"));
-
-var _Add = _interopRequireDefault(require("@material-ui/icons/Add"));
-
-var _ArrowDropDown = _interopRequireDefault(require("@material-ui/icons/ArrowDropDown"));
-
-var _ArrowRight = _interopRequireDefault(require("@material-ui/icons/ArrowRight"));
-
-var _Menu = _interopRequireDefault(require("@material-ui/icons/Menu"));
-
-var _MoreHoriz = _interopRequireDefault(require("@material-ui/icons/MoreHoriz"));
-
-var _Icons = require("@jbrowse/core/ui/Icons");
-
-var _reactVirtualizedAutoSizer = _interopRequireDefault(require("react-virtualized-auto-sizer"));
-
-var _Menu2 = _interopRequireDefault(require("@jbrowse/core/ui/Menu"));
-
-var _util = require("@jbrowse/core/util");
-
-var _configuration = require("@jbrowse/core/configuration");
-
-var _mobxReact = require("mobx-react");
-
-var _reactVtree = require("react-vtree");
-
-function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
-
-function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { (0, _defineProperty2.default)(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
-
-function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
-
-function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || (0, _typeof2.default)(obj) !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
-
-// lazy components
-var CloseConnectionDialog = /*#__PURE__*/(0, _react.lazy)(function () {
-  return Promise.resolve().then(function () {
-    return _interopRequireWildcard(require('./CloseConnectionDialog'));
-  });
-});
-var DeleteConnectionDialog = /*#__PURE__*/(0, _react.lazy)(function () {
-  return Promise.resolve().then(function () {
-    return _interopRequireWildcard(require('./DeleteConnectionDialog'));
-  });
-});
-var ManageConnectionsDialog = /*#__PURE__*/(0, _react.lazy)(function () {
-  return Promise.resolve().then(function () {
-    return _interopRequireWildcard(require('./ManageConnectionsDialog'));
-  });
-});
-var ToggleConnectionsDialog = /*#__PURE__*/(0, _react.lazy)(function () {
-  return Promise.resolve().then(function () {
-    return _interopRequireWildcard(require('./ToggleConnectionsDialog'));
-  });
-});
-var useStyles = (0, _core.makeStyles)(function (theme) {
-  var _theme$palette$tertia, _theme$palette$tertia2;
-
-  return {
-    searchBox: {
-      margin: theme.spacing(2)
-    },
-    menuIcon: {
-      marginRight: theme.spacing(1),
-      marginBottom: 0
-    },
-    fab: {
-      position: 'absolute',
-      bottom: theme.spacing(6),
-      right: theme.spacing(6)
-    },
-    compactCheckbox: {
-      padding: 0
-    },
-    checkboxLabel: {
-      marginRight: 0,
-      '&:hover': {
-        backgroundColor: '#eee'
-      }
-    },
-    // this accordionBase element's small padding is used to give a margin to
-    // accordionColor it a "margin" because the virtualized elements can't really
-    // use margin in a conventional way (it doesn't affect layout)
-    accordionBase: {
-      display: 'flex'
-    },
-    accordionCard: {
-      padding: 3,
-      cursor: 'pointer',
-      display: 'flex'
-    },
-    nestingLevelMarker: {
-      position: 'absolute',
-      borderLeft: '1.5px solid #555'
-    },
-    // accordionColor set's display:flex so that the child accordionText use
-    // vertically centered text
-    accordionColor: {
-      background: (_theme$palette$tertia = theme.palette.tertiary) === null || _theme$palette$tertia === void 0 ? void 0 : _theme$palette$tertia.main,
-      color: (_theme$palette$tertia2 = theme.palette.tertiary) === null || _theme$palette$tertia2 === void 0 ? void 0 : _theme$palette$tertia2.contrastText,
-      width: '100%',
-      display: 'flex',
-      paddingLeft: 5
-    },
-    // margin:auto 0 to center text vertically
-    accordionText: {
-      margin: 'auto 0'
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
     }
-  };
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
 });
-
-// An individual node in the track selector. Note: manually sets cursor:
-// pointer improves usability for what can be clicked
-function Node(props) {
-  var data = props.data,
-      isOpen = props.isOpen,
-      style = props.style,
-      setOpen = props.setOpen;
-  var isLeaf = data.isLeaf,
-      nestingLevel = data.nestingLevel,
-      checked = data.checked,
-      id = data.id,
-      name = data.name,
-      _onChange = data.onChange,
-      toggleCollapse = data.toggleCollapse,
-      conf = data.conf,
-      onMoreInfo = data.onMoreInfo,
-      drawerPosition = data.drawerPosition;
-  var classes = useStyles();
-  var width = 10;
-  var marginLeft = nestingLevel * width + (isLeaf ? width : 0);
-  var unsupported = (name === null || name === void 0 ? void 0 : name.endsWith('(Unsupported)')) || (name === null || name === void 0 ? void 0 : name.endsWith('(Unknown)'));
-  var description = conf && (0, _configuration.readConfObject)(conf, ['description']) || '';
-  return /*#__PURE__*/_react.default.createElement("div", {
-    style: style,
-    className: !isLeaf ? classes.accordionBase : undefined
-  }, new Array(nestingLevel).fill(0).map(function (_, idx) {
-    return /*#__PURE__*/_react.default.createElement("div", {
-      key: "mark-".concat(idx),
-      style: {
-        left: idx * width + 4,
-        height: style === null || style === void 0 ? void 0 : style.height
-      },
-      className: classes.nestingLevelMarker
-    });
-  }), /*#__PURE__*/_react.default.createElement("div", {
-    className: !isLeaf ? classes.accordionCard : undefined,
-    onClick: function onClick() {
-      toggleCollapse(id);
-      setOpen(!isOpen);
-    },
-    style: {
-      marginLeft: marginLeft,
-      whiteSpace: 'nowrap',
-      width: '100%'
+var __importStar = (this && this.__importStar) || function (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __setModuleDefault(result, mod);
+    return result;
+};
+var __generator = (this && this.__generator) || function (thisArg, body) {
+    var _ = { label: 0, sent: function() { if (t[0] & 1) throw t[1]; return t[1]; }, trys: [], ops: [] }, f, y, t, g;
+    return g = { next: verb(0), "throw": verb(1), "return": verb(2) }, typeof Symbol === "function" && (g[Symbol.iterator] = function() { return this; }), g;
+    function verb(n) { return function (v) { return step([n, v]); }; }
+    function step(op) {
+        if (f) throw new TypeError("Generator is already executing.");
+        while (_) try {
+            if (f = 1, y && (t = op[0] & 2 ? y["return"] : op[0] ? y["throw"] || ((t = y["return"]) && t.call(y), 0) : y.next) && !(t = t.call(y, op[1])).done) return t;
+            if (y = 0, t) op = [op[0] & 2, t.value];
+            switch (op[0]) {
+                case 0: case 1: t = op; break;
+                case 4: _.label++; return { value: op[1], done: false };
+                case 5: _.label++; y = op[1]; op = [0]; continue;
+                case 7: op = _.ops.pop(); _.trys.pop(); continue;
+                default:
+                    if (!(t = _.trys, t = t.length > 0 && t[t.length - 1]) && (op[0] === 6 || op[0] === 2)) { _ = 0; continue; }
+                    if (op[0] === 3 && (!t || (op[1] > t[0] && op[1] < t[3]))) { _.label = op[1]; break; }
+                    if (op[0] === 6 && _.label < t[1]) { _.label = t[1]; t = op; break; }
+                    if (t && _.label < t[2]) { _.label = t[2]; _.ops.push(op); break; }
+                    if (t[2]) _.ops.pop();
+                    _.trys.pop(); continue;
+            }
+            op = body.call(thisArg, _);
+        } catch (e) { op = [6, e]; y = 0; } finally { f = t = 0; }
+        if (op[0] & 5) throw op[1]; return { value: op[0] ? op[1] : void 0, done: true };
     }
-  }, /*#__PURE__*/_react.default.createElement("div", {
-    className: !isLeaf ? classes.accordionColor : undefined
-  }, !isLeaf ? /*#__PURE__*/_react.default.createElement("div", {
-    className: classes.accordionText
-  }, /*#__PURE__*/_react.default.createElement(_core.Typography, null, isOpen ? /*#__PURE__*/_react.default.createElement(_ArrowDropDown.default, null) : /*#__PURE__*/_react.default.createElement(_ArrowRight.default, null), name)) : /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(_core.Tooltip, {
-    title: description,
-    placement: drawerPosition === 'left' ? 'right' : 'left'
-  }, /*#__PURE__*/_react.default.createElement(_core.FormControlLabel, {
-    className: classes.checkboxLabel,
-    control: /*#__PURE__*/_react.default.createElement(_core.Checkbox, {
-      className: classes.compactCheckbox,
-      checked: checked,
-      onChange: function onChange() {
-        return _onChange(id);
-      },
-      color: "primary",
-      disabled: unsupported,
-      inputProps: {
-        // @ts-ignore
-        'data-testid': "htsTrackEntry-".concat(id)
-      }
-    }),
-    label: name
-  })), /*#__PURE__*/_react.default.createElement(_core.IconButton, {
-    onClick: function onClick(e) {
-      return onMoreInfo({
-        target: e.currentTarget,
-        id: id,
-        conf: conf
-      });
-    },
-    color: "secondary",
-    "data-testid": "htsTrackEntryMenu-".concat(id)
-  }, /*#__PURE__*/_react.default.createElement(_MoreHoriz.default, null))))));
-}
-
-function getNodeData(node, nestingLevel, extra) {
-  var isLeaf = !!node.conf;
-  return {
-    data: _objectSpread(_objectSpread({
-      defaultHeight: isLeaf ? 22 : 40,
-      isLeaf: isLeaf,
-      isOpenByDefault: true,
-      nestingLevel: nestingLevel
-    }, node), extra),
-    nestingLevel: nestingLevel,
-    node: node
-  };
+};
+var __read = (this && this.__read) || function (o, n) {
+    var m = typeof Symbol === "function" && o[Symbol.iterator];
+    if (!m) return o;
+    var i = m.call(o), r, ar = [], e;
+    try {
+        while ((n === void 0 || n-- > 0) && !(r = i.next()).done) ar.push(r.value);
+    }
+    catch (error) { e = { error: error }; }
+    finally {
+        try {
+            if (r && !r.done && (m = i["return"])) m.call(i);
+        }
+        finally { if (e) throw e.error; }
+    }
+    return ar;
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+var react_1 = __importStar(require("react"));
+var material_1 = require("@mui/material");
+var mui_1 = require("tss-react/mui");
+// icons
+var Add_1 = __importDefault(require("@mui/icons-material/Add"));
+// other
+var react_virtualized_auto_sizer_1 = __importDefault(require("react-virtualized-auto-sizer"));
+var util_1 = require("@jbrowse/core/util");
+var mobx_react_1 = require("mobx-react");
+var react_vtree_1 = require("react-vtree");
+var Header_1 = __importDefault(require("./Header"));
+var Node_1 = __importDefault(require("./Node"));
+var useStyles = (0, mui_1.makeStyles)()(function (theme) { return ({
+    fab: {
+        position: 'absolute',
+        bottom: theme.spacing(6),
+        right: theme.spacing(6),
+    },
+}); });
+function getNodeData(node, nestingLevel, extra, selection) {
+    var isLeaf = !!node.conf;
+    var selected = !!selection[node.id];
+    return {
+        data: __assign(__assign({ defaultHeight: isLeaf ? 22 : 40, isLeaf: isLeaf, isOpenByDefault: true, nestingLevel: nestingLevel, selected: selected }, node), extra),
+        nestingLevel: nestingLevel,
+        node: node,
+    };
 }
-
 // this is the main tree component for the hierarchical track selector in note:
 // in jbrowse-web the toolbar is position="sticky" which means the autosizer
 // includes the height of the toolbar, so we subtract the given offsets
-var HierarchicalTree = (0, _mobxReact.observer)(function (_ref) {
-  var _session$getTrackActi;
-
-  var height = _ref.height,
-      tree = _ref.tree,
-      model = _ref.model;
-  var filterText = model.filterText,
-      view = model.view;
-  var treeRef = (0, _react.useRef)(null);
-
-  var _useState = (0, _react.useState)(),
-      _useState2 = (0, _slicedToArray2.default)(_useState, 2),
-      info = _useState2[0],
-      setMoreInfo = _useState2[1];
-
-  var session = (0, _util.getSession)(model);
-  var drawerPosition = session.drawerPosition;
-  var extra = (0, _react.useMemo)(function () {
-    return {
-      onChange: function onChange(trackId) {
-        return view.toggleTrack(trackId);
-      },
-      toggleCollapse: function toggleCollapse(pathName) {
-        return model.toggleCategory(pathName);
-      },
-      onMoreInfo: setMoreInfo,
-      drawerPosition: drawerPosition
-    };
-  }, [view, model, drawerPosition]);
-  var treeWalker = (0, _react.useCallback)( /*#__PURE__*/_regenerator.default.mark(function treeWalker() {
-    var i, r, parentMeta, _i, curr;
-
-    return _regenerator.default.wrap(function treeWalker$(_context) {
-      while (1) {
-        switch (_context.prev = _context.next) {
-          case 0:
-            i = 0;
-
-          case 1:
-            if (!(i < tree.children.length)) {
-              _context.next = 8;
-              break;
+var HierarchicalTree = (0, mobx_react_1.observer)(function (_a) {
+    var height = _a.height, tree = _a.tree, model = _a.model;
+    var filterText = model.filterText, selection = model.selection, view = model.view;
+    var treeRef = (0, react_1.useRef)(null);
+    var session = (0, util_1.getSession)(model);
+    var drawerPosition = session.drawerPosition;
+    var obj = (0, react_1.useMemo)(function () { return Object.fromEntries(selection.map(function (s) { return [s.trackId, s]; })); }, [selection]);
+    var extra = (0, react_1.useMemo)(function () { return ({
+        onChange: function (trackId) { return view.toggleTrack(trackId); },
+        toggleCollapse: function (pathName) { return model.toggleCategory(pathName); },
+        tree: tree,
+        model: model,
+        drawerPosition: drawerPosition,
+    }); }, [view, model, drawerPosition, tree]);
+    var treeWalker = (0, react_1.useCallback)(function treeWalker() {
+        var i, r, parentMeta, i, curr;
+        return __generator(this, function (_a) {
+            switch (_a.label) {
+                case 0:
+                    i = 0;
+                    _a.label = 1;
+                case 1:
+                    if (!(i < tree.children.length)) return [3 /*break*/, 4];
+                    r = tree.children[i];
+                    return [4 /*yield*/, getNodeData(r, 0, extra, obj)];
+                case 2:
+                    _a.sent();
+                    _a.label = 3;
+                case 3:
+                    i++;
+                    return [3 /*break*/, 1];
+                case 4:
+                    if (!true) return [3 /*break*/, 10];
+                    return [4 /*yield*/];
+                case 5:
+                    parentMeta = _a.sent();
+                    i = 0;
+                    _a.label = 6;
+                case 6:
+                    if (!(i < parentMeta.node.children.length)) return [3 /*break*/, 9];
+                    curr = parentMeta.node.children[i];
+                    return [4 /*yield*/, getNodeData(curr, parentMeta.nestingLevel + 1, extra, obj)];
+                case 7:
+                    _a.sent();
+                    _a.label = 8;
+                case 8:
+                    i++;
+                    return [3 /*break*/, 6];
+                case 9: return [3 /*break*/, 4];
+                case 10: return [2 /*return*/];
             }
-
-            r = tree.children[i];
-            _context.next = 5;
-            return getNodeData(r, 0, extra);
-
-          case 5:
-            i++;
-            _context.next = 1;
-            break;
-
-          case 8:
-            if (!true) {
-              _context.next = 22;
-              break;
-            }
-
-            _context.next = 11;
-            return;
-
-          case 11:
-            parentMeta = _context.sent;
-            _i = 0;
-
-          case 13:
-            if (!(_i < parentMeta.node.children.length)) {
-              _context.next = 20;
-              break;
-            }
-
-            curr = parentMeta.node.children[_i];
-            _context.next = 17;
-            return getNodeData(curr, parentMeta.nestingLevel + 1, extra);
-
-          case 17:
-            _i++;
-            _context.next = 13;
-            break;
-
-          case 20:
-            _context.next = 8;
-            break;
-
-          case 22:
-          case "end":
-            return _context.stop();
-        }
-      }
-    }, treeWalker);
-  }), [tree, extra]);
-  var conf = info === null || info === void 0 ? void 0 : info.conf;
-  var menuItems = conf && ((_session$getTrackActi = session.getTrackActionMenuItems) === null || _session$getTrackActi === void 0 ? void 0 : _session$getTrackActi.call(session, conf)) || [];
-  (0, _react.useEffect)(function () {
-    // @ts-ignore
-    treeRef.current.recomputeTree({
-      refreshNodes: true,
-      useDefaultHeight: true
-    });
-  }, [tree, filterText]);
-  return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(_reactVtree.VariableSizeTree, {
-    ref: treeRef,
-    treeWalker: treeWalker,
-    height: height
-  }, Node), /*#__PURE__*/_react.default.createElement(_Menu2.default, {
-    anchorEl: info === null || info === void 0 ? void 0 : info.target,
-    menuItems: menuItems,
-    onMenuItemClick: function onMenuItemClick(_event, callback) {
-      callback();
-      setMoreInfo(undefined);
-    },
-    open: Boolean(info),
-    onClose: function onClose() {
-      return setMoreInfo(undefined);
-    }
-  }));
-}); // Don't use autosizer in jest and instead hardcode a height, otherwise fails
+        });
+    }, [tree, extra, obj]);
+    (0, react_1.useEffect)(function () {
+        // @ts-ignore
+        treeRef.current.recomputeTree({
+            refreshNodes: true,
+            useDefaultHeight: true,
+        });
+    }, [tree, filterText]);
+    return (react_1.default.createElement(react_1.default.Fragment, null,
+        react_1.default.createElement(react_vtree_1.VariableSizeTree, { ref: treeRef, treeWalker: treeWalker, height: height }, Node_1.default)));
+});
+// Don't use autosizer in jest and instead hardcode a height, otherwise fails
 // jest tests
-
-var AutoSizedHierarchicalTree = function AutoSizedHierarchicalTree(_ref2) {
-  var tree = _ref2.tree,
-      model = _ref2.model,
-      offset = _ref2.offset;
-  return typeof jest === 'undefined' ? /*#__PURE__*/_react.default.createElement(_reactVirtualizedAutoSizer.default, {
-    disableWidth: true
-  }, function (_ref3) {
-    var height = _ref3.height;
-    return /*#__PURE__*/_react.default.createElement(HierarchicalTree, {
-      height: height - offset,
-      model: model,
-      tree: tree
-    });
-  }) : /*#__PURE__*/_react.default.createElement(HierarchicalTree, {
-    height: 9000,
-    model: model,
-    tree: tree
-  });
+var AutoSizedHierarchicalTree = function (_a) {
+    var tree = _a.tree, model = _a.model, offset = _a.offset;
+    return typeof jest === 'undefined' ? (react_1.default.createElement(react_virtualized_auto_sizer_1.default, { disableWidth: true }, function (_a) {
+        var height = _a.height;
+        return (react_1.default.createElement(HierarchicalTree, { height: height - offset, model: model, tree: tree }));
+    })) : (react_1.default.createElement(HierarchicalTree, { height: 9000, model: model, tree: tree }));
 };
-
-var Wrapper = function Wrapper(_ref4) {
-  var overrideDimensions = _ref4.overrideDimensions,
-      children = _ref4.children;
-  return overrideDimensions ? /*#__PURE__*/_react.default.createElement("div", {
-    style: _objectSpread({}, overrideDimensions)
-  }, children) : /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, children);
+var Wrapper = function (_a) {
+    var overrideDimensions = _a.overrideDimensions, children = _a.children;
+    return overrideDimensions ? (react_1.default.createElement("div", { style: __assign({}, overrideDimensions) }, children)) : (react_1.default.createElement(react_1.default.Fragment, null, children));
 };
-
-var HierarchicalTrackSelectorContainer = (0, _mobxReact.observer)(function (_ref5) {
-  var model = _ref5.model,
-      toolbarHeight = _ref5.toolbarHeight,
-      overrideDimensions = _ref5.overrideDimensions;
-  var classes = useStyles();
-  var session = (0, _util.getSession)(model);
-
-  var _useState3 = (0, _react.useState)(null),
-      _useState4 = (0, _slicedToArray2.default)(_useState3, 2),
-      anchorEl = _useState4[0],
-      setAnchorEl = _useState4[1];
-
-  function handleFabClose() {
-    setAnchorEl(null);
-  }
-
-  var hasConnections = (0, _util.isSessionModelWithConnections)(session);
-  var hasAddTrack = (0, _util.isSessionWithAddTracks)(session);
-  return /*#__PURE__*/_react.default.createElement(Wrapper, {
-    overrideDimensions: overrideDimensions
-  }, /*#__PURE__*/_react.default.createElement(HierarchicalTrackSelector, {
-    model: model,
-    toolbarHeight: toolbarHeight
-  }), hasAddTrack || hasConnections ? /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(_core.Fab, {
-    color: "secondary",
-    className: classes.fab,
-    onClick: function onClick(event) {
-      return setAnchorEl(event.currentTarget);
-    }
-  }, /*#__PURE__*/_react.default.createElement(_Add.default, null)), /*#__PURE__*/_react.default.createElement(_core.Menu, {
-    anchorEl: anchorEl,
-    open: Boolean(anchorEl),
-    onClose: function onClose() {
-      return setAnchorEl(null);
-    }
-  }, hasConnections ? /*#__PURE__*/_react.default.createElement(_core.MenuItem, {
-    onClick: function onClick() {
-      handleFabClose();
-
-      if ((0, _util.isSessionModelWithWidgets)(session)) {
-        session.showWidget(session.addWidget('AddConnectionWidget', 'addConnectionWidget'));
-      }
-    }
-  }, "Add connection") : null, hasAddTrack ? /*#__PURE__*/_react.default.createElement(_core.MenuItem, {
-    onClick: function onClick() {
-      handleFabClose();
-
-      if ((0, _util.isSessionModelWithWidgets)(session)) {
-        session.showWidget(session.addWidget('AddTrackWidget', 'addTrackWidget', {
-          view: model.view.id
-        }));
-      }
-    }
-  }, "Add track") : null)) : null);
-});
-var HierarchicalTrackSelectorHeader = (0, _mobxReact.observer)(function (_ref6) {
-  var model = _ref6.model,
-      setHeaderHeight = _ref6.setHeaderHeight,
-      setAssemblyIdx = _ref6.setAssemblyIdx,
-      assemblyIdx = _ref6.assemblyIdx;
-  var classes = useStyles();
-  var session = (0, _util.getSession)(model);
-
-  var _useState5 = (0, _react.useState)(),
-      _useState6 = (0, _slicedToArray2.default)(_useState5, 2),
-      connectionAnchorEl = _useState6[0],
-      setConnectionAnchorEl = _useState6[1];
-
-  var _useState7 = (0, _react.useState)(),
-      _useState8 = (0, _slicedToArray2.default)(_useState7, 2),
-      menuAnchorEl = _useState8[0],
-      setMenuAnchorEl = _useState8[1];
-
-  var _useState9 = (0, _react.useState)(),
-      _useState10 = (0, _slicedToArray2.default)(_useState9, 2),
-      modalInfo = _useState10[0],
-      setModalInfo = _useState10[1];
-
-  var _useState11 = (0, _react.useState)(),
-      _useState12 = (0, _slicedToArray2.default)(_useState11, 2),
-      deleteDialogDetails = _useState12[0],
-      setDeleteDialogDetails = _useState12[1];
-
-  var _useState13 = (0, _react.useState)(false),
-      _useState14 = (0, _slicedToArray2.default)(_useState13, 2),
-      connectionManagerOpen = _useState14[0],
-      setConnectionManagerOpen = _useState14[1];
-
-  var _useState15 = (0, _react.useState)(false),
-      _useState16 = (0, _slicedToArray2.default)(_useState15, 2),
-      connectionToggleOpen = _useState16[0],
-      setConnectionToggleOpen = _useState16[1];
-
-  var assemblyNames = model.assemblyNames;
-  var assemblyName = assemblyNames[assemblyIdx];
-
-  function breakConnection(connectionConf, deletingConnection) {
-    var name = (0, _configuration.readConfObject)(connectionConf, 'name'); // @ts-ignore
-
-    var result = session.prepareToBreakConnection(connectionConf);
-
-    if (result) {
-      var _result = (0, _slicedToArray2.default)(result, 2),
-          safelyBreakConnection = _result[0],
-          dereferenceTypeCount = _result[1];
-
-      if (Object.keys(dereferenceTypeCount).length > 0) {
-        setModalInfo({
-          connectionConf: connectionConf,
-          safelyBreakConnection: safelyBreakConnection,
-          dereferenceTypeCount: dereferenceTypeCount,
-          name: name
-        });
-      } else {
-        safelyBreakConnection();
-      }
-    }
-
-    if (deletingConnection) {
-      setDeleteDialogDetails({
-        name: name,
-        connectionConf: connectionConf
-      });
-    }
-  }
-
-  var connectionMenuItems = [{
-    label: 'Turn on/off connections...',
-    onClick: function onClick() {
-      return setConnectionToggleOpen(true);
+var HierarchicalTrackSelectorContainer = (0, mobx_react_1.observer)(function (_a) {
+    var model = _a.model, toolbarHeight = _a.toolbarHeight, overrideDimensions = _a.overrideDimensions;
+    var classes = useStyles().classes;
+    var session = (0, util_1.getSession)(model);
+    var _b = __read((0, react_1.useState)(null), 2), anchorEl = _b[0], setAnchorEl = _b[1];
+    function handleFabClose() {
+        setAnchorEl(null);
     }
-  }];
-
-  if ((0, _util.isSessionModelWithConnections)(session)) {
-    connectionMenuItems.unshift({
-      label: 'Add connection',
-      onClick: function onClick() {
-        if ((0, _util.isSessionModelWithWidgets)(session)) {
-          var widget = session.addWidget('AddConnectionWidget', 'addConnectionWidget');
-          session.showWidget(widget);
-        }
-      }
-    });
-    connectionMenuItems.push({
-      label: 'Delete connections...',
-      onClick: function onClick() {
-        return setConnectionManagerOpen(true);
-      }
-    });
-  }
-
-  var assemblyMenuItems = assemblyNames.length > 1 ? [{
-    label: 'Select assembly...',
-    subMenu: assemblyNames.map(function (name, idx) {
-      return {
-        label: name,
-        onClick: function onClick() {
-          return setAssemblyIdx(idx);
-        }
-      };
-    })
-  }] : [];
-  var menuItems = [{
-    label: 'Add track...',
-    onClick: function onClick() {
-      if ((0, _util.isSessionModelWithWidgets)(session)) {
-        var widget = session.addWidget('AddTrackWidget', 'addTrackWidget', {
-          view: model.view.id
-        });
-        session.showWidget(widget);
-      }
-    }
-  }].concat(assemblyMenuItems);
-  return /*#__PURE__*/_react.default.createElement("div", {
-    ref: function ref(_ref7) {
-      return setHeaderHeight((_ref7 === null || _ref7 === void 0 ? void 0 : _ref7.getBoundingClientRect().height) || 0);
-    },
-    "data-testid": "hierarchical_track_selector"
-  }, /*#__PURE__*/_react.default.createElement("div", {
-    style: {
-      display: 'flex'
-    }
-  }, (0, _util.isSessionWithAddTracks)(session) && /*#__PURE__*/_react.default.createElement(_core.IconButton, {
-    className: classes.menuIcon,
-    onClick: function onClick(event) {
-      return setMenuAnchorEl(event.currentTarget);
-    }
-  }, /*#__PURE__*/_react.default.createElement(_Menu.default, null)), session.makeConnection && /*#__PURE__*/_react.default.createElement(_core.IconButton, {
-    className: classes.menuIcon,
-    onClick: function onClick(event) {
-      return setConnectionAnchorEl(event.currentTarget);
-    }
-  }, /*#__PURE__*/_react.default.createElement(_Icons.Cable, null)), /*#__PURE__*/_react.default.createElement(_core.TextField, {
-    className: classes.searchBox,
-    label: "Filter tracks",
-    value: model.filterText,
-    onChange: function onChange(event) {
-      return model.setFilterText(event.target.value);
-    },
-    fullWidth: true,
-    InputProps: {
-      endAdornment: /*#__PURE__*/_react.default.createElement(_core.InputAdornment, {
-        position: "end"
-      }, /*#__PURE__*/_react.default.createElement(_core.IconButton, {
-        color: "secondary",
-        onClick: model.clearFilterText
-      }, /*#__PURE__*/_react.default.createElement(_Clear.default, null)))
-    }
-  })), /*#__PURE__*/_react.default.createElement(_Menu2.default, {
-    anchorEl: connectionAnchorEl,
-    open: Boolean(connectionAnchorEl),
-    onMenuItemClick: function onMenuItemClick(_, callback) {
-      callback();
-      setConnectionAnchorEl(undefined);
-    },
-    onClose: function onClose() {
-      return setConnectionAnchorEl(undefined);
-    },
-    menuItems: connectionMenuItems
-  }), /*#__PURE__*/_react.default.createElement(_Menu2.default, {
-    anchorEl: menuAnchorEl,
-    open: Boolean(menuAnchorEl),
-    onMenuItemClick: function onMenuItemClick(_, callback) {
-      callback();
-      setMenuAnchorEl(undefined);
-    },
-    onClose: function onClose() {
-      return setMenuAnchorEl(undefined);
-    },
-    menuItems: menuItems
-  }), /*#__PURE__*/_react.default.createElement(_react.Suspense, {
-    fallback: /*#__PURE__*/_react.default.createElement("div", null)
-  }, modalInfo ? /*#__PURE__*/_react.default.createElement(CloseConnectionDialog, {
-    modalInfo: modalInfo,
-    setModalInfo: setModalInfo
-  }) : deleteDialogDetails ? /*#__PURE__*/_react.default.createElement(DeleteConnectionDialog, {
-    handleClose: function handleClose() {
-      return setDeleteDialogDetails(undefined);
-    },
-    deleteDialogDetails: deleteDialogDetails,
-    session: session
-  }) : null, connectionManagerOpen ? /*#__PURE__*/_react.default.createElement(ManageConnectionsDialog, {
-    handleClose: function handleClose() {
-      return setConnectionManagerOpen(false);
-    },
-    breakConnection: breakConnection,
-    session: session
-  }) : null, connectionToggleOpen ? /*#__PURE__*/_react.default.createElement(ToggleConnectionsDialog, {
-    handleClose: function handleClose() {
-      return setConnectionToggleOpen(false);
-    },
-    session: session,
-    breakConnection: breakConnection,
-    assemblyName: assemblyName
-  }) : null));
+    var hasConnections = (0, util_1.isSessionModelWithConnections)(session);
+    var hasAddTrack = (0, util_1.isSessionWithAddTracks)(session);
+    return (react_1.default.createElement(Wrapper, { overrideDimensions: overrideDimensions },
+        react_1.default.createElement(HierarchicalTrackSelector, { model: model, toolbarHeight: toolbarHeight }),
+        hasAddTrack || hasConnections ? (react_1.default.createElement(react_1.default.Fragment, null,
+            react_1.default.createElement(material_1.Fab, { color: "secondary", className: classes.fab, onClick: function (event) { return setAnchorEl(event.currentTarget); } },
+                react_1.default.createElement(Add_1.default, null)),
+            react_1.default.createElement(material_1.Menu, { anchorEl: anchorEl, open: Boolean(anchorEl), onClose: function () { return setAnchorEl(null); } },
+                hasConnections ? (react_1.default.createElement(material_1.MenuItem, { onClick: function () {
+                        handleFabClose();
+                        if ((0, util_1.isSessionModelWithWidgets)(session)) {
+                            session.showWidget(session.addWidget('AddConnectionWidget', 'addConnectionWidget'));
+                        }
+                    } }, "Add connection")) : null,
+                hasAddTrack ? (react_1.default.createElement(material_1.MenuItem, { onClick: function () {
+                        handleFabClose();
+                        if ((0, util_1.isSessionModelWithWidgets)(session)) {
+                            session.showWidget(session.addWidget('AddTrackWidget', 'addTrackWidget', {
+                                view: model.view.id,
+                            }));
+                        }
+                    } }, "Add track")) : null))) : null));
 });
-var HierarchicalTrackSelector = (0, _mobxReact.observer)(function (_ref8) {
-  var model = _ref8.model,
-      _ref8$toolbarHeight = _ref8.toolbarHeight,
-      toolbarHeight = _ref8$toolbarHeight === void 0 ? 0 : _ref8$toolbarHeight;
-
-  var _useState17 = (0, _react.useState)(0),
-      _useState18 = (0, _slicedToArray2.default)(_useState17, 2),
-      assemblyIdx = _useState18[0],
-      setAssemblyIdx = _useState18[1];
-
-  var _useState19 = (0, _react.useState)(0),
-      _useState20 = (0, _slicedToArray2.default)(_useState19, 2),
-      headerHeight = _useState20[0],
-      setHeaderHeight = _useState20[1];
-
-  var assemblyNames = model.assemblyNames;
-  var assemblyName = assemblyNames[assemblyIdx];
-  return assemblyName ? /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(HierarchicalTrackSelectorHeader, {
-    model: model,
-    setHeaderHeight: setHeaderHeight,
-    setAssemblyIdx: setAssemblyIdx,
-    assemblyIdx: assemblyIdx
-  }), /*#__PURE__*/_react.default.createElement(AutoSizedHierarchicalTree, {
-    tree: model.hierarchy(assemblyName),
-    model: model,
-    offset: toolbarHeight + headerHeight
-  })) : null;
+var HierarchicalTrackSelector = (0, mobx_react_1.observer)(function (_a) {
+    var model = _a.model, _b = _a.toolbarHeight, toolbarHeight = _b === void 0 ? 0 : _b;
+    var _c = __read((0, react_1.useState)(0), 2), assemblyIdx = _c[0], setAssemblyIdx = _c[1];
+    var _d = __read((0, react_1.useState)(0), 2), headerHeight = _d[0], setHeaderHeight = _d[1];
+    var assemblyNames = model.assemblyNames;
+    var assemblyName = assemblyNames[assemblyIdx];
+    return assemblyName ? (react_1.default.createElement(react_1.default.Fragment, null,
+        react_1.default.createElement(Header_1.default, { model: model, setHeaderHeight: setHeaderHeight, setAssemblyIdx: setAssemblyIdx, assemblyIdx: assemblyIdx }),
+        react_1.default.createElement(AutoSizedHierarchicalTree, { tree: model.hierarchy(assemblyName), model: model, offset: toolbarHeight + headerHeight }))) : null;
 });
-var _default = HierarchicalTrackSelectorContainer;
-exports.default = _default;
+exports.default = HierarchicalTrackSelectorContainer;
+//# sourceMappingURL=HierarchicalTrackSelector.js.map