@jbrowse/plugin-data-management 1.6.9 → 1.7.0

package/dist/HierarchicalTrackSelectorWidget/components/HierarchicalTrackSelector.js

@@ -0,0 +1,648 @@
+"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; }
+
+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'
+    }
+  };
+}); // An individual node in the track selector. Note: manually sets cursor:
+// pointer improves usability for what can be clicked
+
+var Node = 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 && (name.endsWith('(Unsupported)') || 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.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%'
+    }
+  }, /*#__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: {
+        '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))))));
+};
+
+var getNodeData = 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
+  };
+}; // 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, 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 = 7;
+              break;
+            }
+
+            _context.next = 4;
+            return getNodeData(tree.children[i], 0, extra);
+
+          case 4:
+            i++;
+            _context.next = 1;
+            break;
+
+          case 7:
+            if (!true) {
+              _context.next = 21;
+              break;
+            }
+
+            _context.next = 10;
+            return;
+
+          case 10:
+            parentMeta = _context.sent;
+            _i = 0;
+
+          case 12:
+            if (!(_i < parentMeta.node.children.length)) {
+              _context.next = 19;
+              break;
+            }
+
+            curr = parentMeta.node.children[_i];
+            _context.next = 16;
+            return getNodeData(curr, parentMeta.nestingLevel + 1, extra);
+
+          case 16:
+            _i++;
+            _context.next = 12;
+            break;
+
+          case 19:
+            _context.next = 7;
+            break;
+
+          case 21:
+          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 () {
+    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
+// 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 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 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);
+  }
+
+  return /*#__PURE__*/_react["default"].createElement(Wrapper, {
+    overrideDimensions: overrideDimensions
+  }, /*#__PURE__*/_react["default"].createElement(HierarchicalTrackSelector, {
+    model: model,
+    toolbarHeight: toolbarHeight,
+    overrideDimensions: overrideDimensions
+  }), session.addConnectionConf || session.addTrackConf ? /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, null, /*#__PURE__*/_react["default"].createElement(_core.Fab, {
+    color: "secondary",
+    className: classes.fab,
+    onClick: function onClick(event) {
+      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);
+    }
+  }, session.addConnectionConf ? /*#__PURE__*/_react["default"].createElement(_core.MenuItem, {
+    onClick: function onClick() {
+      handleFabClose();
+      var widget = session.addWidget('AddConnectionWidget', 'addConnectionWidget');
+      session.showWidget(widget);
+    }
+  }, "Add connection") : null, session.addTrackConf ? /*#__PURE__*/_react["default"].createElement(_core.MenuItem, {
+    onClick: function onClick() {
+      handleFabClose();
+      var widget = session.addWidget('AddTrackWidget', 'addTrackWidget', {
+        view: model.view.id
+      });
+      session.showWidget(widget);
+    }
+  }, "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');
+    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);
+    }
+  }];
+
+  if (session.addConnectionConf) {
+    connectionMenuItems.unshift({
+      label: 'Add connection',
+      onClick: function onClick() {
+        session.showWidget(session.addWidget('AddConnectionWidget', 'addConnectionWidget'));
+      }
+    });
+    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() {
+          setAssemblyIdx(idx);
+        }
+      };
+    })
+  }] : [];
+  var menuItems = [{
+    label: 'Add track...',
+    onClick: function onClick() {
+      session.showWidget(session.addWidget('AddTrackWidget', 'addTrackWidget', {
+        view: model.view.id
+      }));
+    }
+  }].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'
+    }
+  }, session.addTrackConf && /*#__PURE__*/_react["default"].createElement(_core.IconButton, {
+    className: classes.menuIcon,
+    onClick: function onClick(event) {
+      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) {
+      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,
+    session: session
+  }) : 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 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 _default = HierarchicalTrackSelectorContainer;
+exports["default"] = _default;