@jbrowse/plugin-circular-view 1.6.8 → 1.7.1

package/dist/CircularView/components/CircularView.js

@@ -0,0 +1,203 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports["default"] = void 0;
+
+var _react = _interopRequireDefault(require("react"));
+
+var _mobxReact = require("mobx-react");
+
+var _ui = require("@jbrowse/core/ui");
+
+var _util = require("@jbrowse/core/util");
+
+var _core = require("@material-ui/core");
+
+var _colors = require("@material-ui/core/colors");
+
+var _ZoomOut = _interopRequireDefault(require("@material-ui/icons/ZoomOut"));
+
+var _ZoomIn = _interopRequireDefault(require("@material-ui/icons/ZoomIn"));
+
+var _RotateLeft = _interopRequireDefault(require("@material-ui/icons/RotateLeft"));
+
+var _RotateRight = _interopRequireDefault(require("@material-ui/icons/RotateRight"));
+
+var _LockOutlined = _interopRequireDefault(require("@material-ui/icons/LockOutlined"));
+
+var _LockOpen = _interopRequireDefault(require("@material-ui/icons/LockOpen"));
+
+var _Icons = require("@jbrowse/core/ui/Icons");
+
+var _Ruler = _interopRequireDefault(require("./Ruler"));
+
+var _ImportForm = _interopRequireDefault(require("./ImportForm"));
+
+// icons
+// locals
+var dragHandleHeight = 3;
+var useStyles = (0, _core.makeStyles)(function (theme) {
+  return {
+    root: {
+      position: 'relative',
+      marginBottom: theme.spacing(1),
+      overflow: 'hidden',
+      background: 'white'
+    },
+    scroller: {
+      overflow: 'auto'
+    },
+    sliceRoot: {
+      background: 'none',
+      // background: theme.palette.background.paper,
+      boxSizing: 'content-box',
+      display: 'block'
+    },
+    iconButton: {
+      padding: '4px',
+      margin: '0 2px 0 2px'
+    },
+    controls: {
+      overflow: 'hidden',
+      whiteSpace: 'nowrap',
+      position: 'absolute',
+      background: _colors.grey[200],
+      boxSizing: 'border-box',
+      borderRight: '1px solid #a2a2a2',
+      borderBottom: '1px solid #a2a2a2',
+      left: 0,
+      top: 0
+    },
+    importFormContainer: {
+      marginBottom: theme.spacing(4)
+    }
+  };
+});
+var Slices = (0, _mobxReact.observer)(function (_ref) {
+  var model = _ref.model;
+  return /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, null, model.staticSlices.map(function (slice) {
+    return /*#__PURE__*/_react["default"].createElement(_Ruler["default"], {
+      key: (0, _util.assembleLocString)(slice.region.elided ? slice.region.regions[0] : slice.region),
+      model: model,
+      slice: slice
+    });
+  }), model.tracks.map(function (track) {
+    var display = track.displays[0];
+    return /*#__PURE__*/_react["default"].createElement(display.RenderingComponent, {
+      key: display.id,
+      display: display,
+      view: model
+    });
+  }));
+});
+var Controls = (0, _mobxReact.observer)(function (_ref2) {
+  var model = _ref2.model,
+      showingFigure = _ref2.showingFigure;
+  var classes = useStyles();
+  return /*#__PURE__*/_react["default"].createElement("div", {
+    className: classes.controls
+  }, /*#__PURE__*/_react["default"].createElement(_core.IconButton, {
+    onClick: model.zoomOutButton,
+    className: classes.iconButton,
+    title: model.lockedFitToWindow ? 'unlock to zoom out' : 'zoom out',
+    disabled: !showingFigure || model.atMaxBpPerPx || model.lockedFitToWindow,
+    color: "secondary"
+  }, /*#__PURE__*/_react["default"].createElement(_ZoomOut["default"], null)), /*#__PURE__*/_react["default"].createElement(_core.IconButton, {
+    onClick: model.zoomInButton,
+    className: classes.iconButton,
+    title: "zoom in",
+    disabled: !showingFigure || model.atMinBpPerPx,
+    color: "secondary"
+  }, /*#__PURE__*/_react["default"].createElement(_ZoomIn["default"], null)), /*#__PURE__*/_react["default"].createElement(_core.IconButton, {
+    onClick: model.rotateCounterClockwiseButton,
+    className: classes.iconButton,
+    title: "rotate counter-clockwise",
+    disabled: !showingFigure,
+    color: "secondary"
+  }, /*#__PURE__*/_react["default"].createElement(_RotateLeft["default"], null)), /*#__PURE__*/_react["default"].createElement(_core.IconButton, {
+    onClick: model.rotateClockwiseButton,
+    className: classes.iconButton,
+    title: "rotate clockwise",
+    disabled: !showingFigure,
+    color: "secondary"
+  }, /*#__PURE__*/_react["default"].createElement(_RotateRight["default"], null)), /*#__PURE__*/_react["default"].createElement(_core.IconButton, {
+    onClick: model.toggleFitToWindowLock,
+    className: classes.iconButton,
+    title: model.lockedFitToWindow ? 'locked model to window size' : 'unlocked model to zoom further',
+    disabled: model.tooSmallToLock,
+    color: "secondary"
+  }, model.lockedFitToWindow ? /*#__PURE__*/_react["default"].createElement(_LockOutlined["default"], null) : /*#__PURE__*/_react["default"].createElement(_LockOpen["default"], null)), model.hideTrackSelectorButton ? null : /*#__PURE__*/_react["default"].createElement(_core.IconButton, {
+    onClick: model.activateTrackSelector,
+    title: "Open track selector",
+    "data-testid": "circular_track_select",
+    color: "secondary"
+  }, /*#__PURE__*/_react["default"].createElement(_Icons.TrackSelector, null)));
+});
+var CircularView = (0, _mobxReact.observer)(function (_ref3) {
+  var model = _ref3.model;
+  var classes = useStyles();
+  var initialized = !!model.displayedRegions.length && model.figureWidth && model.figureHeight;
+  var showImportForm = !initialized && !model.disableImportForm;
+  var showFigure = initialized && !showImportForm;
+  return /*#__PURE__*/_react["default"].createElement("div", {
+    className: classes.root,
+    style: {
+      width: model.width,
+      height: model.height
+    },
+    "data-testid": model.id
+  }, model.error ? /*#__PURE__*/_react["default"].createElement(_ui.ErrorMessage, {
+    error: model.error
+  }) : /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, null, showImportForm ? /*#__PURE__*/_react["default"].createElement(_ImportForm["default"], {
+    model: model
+  }) : null, /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, null, !showFigure ? null : /*#__PURE__*/_react["default"].createElement("div", {
+    className: classes.scroller,
+    style: {
+      width: model.width,
+      height: model.height
+    }
+  }, /*#__PURE__*/_react["default"].createElement("div", {
+    className: classes.rotator,
+    style: {
+      transform: ["rotate(".concat(model.offsetRadians, "rad)")].join(' '),
+      transition: 'transform 0.5s',
+      transformOrigin: model.centerXY.map(function (x) {
+        return "".concat(x, "px");
+      }).join(' ')
+    }
+  }, /*#__PURE__*/_react["default"].createElement("svg", {
+    style: {
+      position: 'absolute',
+      left: 0,
+      top: 0
+    },
+    className: classes.sliceRoot,
+    width: "".concat(model.figureWidth, "px"),
+    height: "".concat(model.figureHeight, "px"),
+    version: "1.1"
+  }, /*#__PURE__*/_react["default"].createElement("g", {
+    transform: "translate(".concat(model.centerXY, ")")
+  }, /*#__PURE__*/_react["default"].createElement(Slices, {
+    model: model
+  }))))), /*#__PURE__*/_react["default"].createElement(Controls, {
+    model: model,
+    showingFigure: showFigure
+  }), model.hideVerticalResizeHandle ? null : /*#__PURE__*/_react["default"].createElement(_ui.ResizeHandle, {
+    onDrag: model.resizeHeight,
+    style: {
+      height: dragHandleHeight,
+      position: 'absolute',
+      bottom: 0,
+      left: 0,
+      background: '#ccc',
+      boxSizing: 'border-box',
+      borderTop: '1px solid #fafafa'
+    }
+  }))));
+});
+var _default = CircularView;
+exports["default"] = _default;

package/dist/CircularView/components/ImportForm.d.ts

@@ -1,5 +1,5 @@
-/// <reference types="react" />
-declare const ImportForm: ({ model }: {
-    model: any;
-}) => JSX.Element;
-export default ImportForm;
+/// <reference types="react" />
+declare const ImportForm: ({ model }: {
+    model: any;
+}) => JSX.Element;
+export default ImportForm;

package/dist/CircularView/components/ImportForm.js

@@ -0,0 +1,97 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+var _typeof = require("@babel/runtime/helpers/typeof");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports["default"] = void 0;
+
+var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
+
+var _react = _interopRequireWildcard(require("react"));
+
+var _core = require("@material-ui/core");
+
+var _mobxReact = require("mobx-react");
+
+var _util = require("@jbrowse/core/util");
+
+var _ErrorMessage = _interopRequireDefault(require("@jbrowse/core/ui/ErrorMessage"));
+
+var _AssemblySelector = _interopRequireDefault(require("@jbrowse/core/ui/AssemblySelector"));
+
+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 || _typeof(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 useStyles = (0, _core.makeStyles)(function (theme) {
+  return {
+    importFormContainer: {
+      marginBottom: theme.spacing(4)
+    }
+  };
+}); // eslint-disable-next-line @typescript-eslint/no-explicit-any
+
+var ImportForm = (0, _mobxReact.observer)(function (_ref) {
+  var model = _ref.model;
+  var classes = useStyles();
+  var session = (0, _util.getSession)(model);
+  var modelError = model.error;
+  var assemblyNames = session.assemblyNames,
+      assemblyManager = session.assemblyManager;
+
+  var _useState = (0, _react.useState)(assemblyNames[0]),
+      _useState2 = (0, _slicedToArray2["default"])(_useState, 2),
+      selectedAsm = _useState2[0],
+      setSelectedAsm = _useState2[1];
+
+  var _useState3 = (0, _react.useState)(modelError),
+      _useState4 = (0, _slicedToArray2["default"])(_useState3, 2),
+      error = _useState4[0],
+      setError = _useState4[1];
+
+  var assembly = assemblyManager.get(selectedAsm);
+  var assemblyError = assemblyNames.length ? assembly === null || assembly === void 0 ? void 0 : assembly.error : 'No configured assemblies';
+  var regions = (assembly === null || assembly === void 0 ? void 0 : assembly.regions) || [];
+  var err = assemblyError || error;
+  return /*#__PURE__*/_react["default"].createElement(_core.Container, {
+    className: classes.importFormContainer
+  }, err ? /*#__PURE__*/_react["default"].createElement(_core.Grid, {
+    container: true,
+    spacing: 1,
+    justifyContent: "center",
+    alignItems: "center"
+  }, /*#__PURE__*/_react["default"].createElement(_core.Grid, {
+    item: true
+  }, /*#__PURE__*/_react["default"].createElement(_ErrorMessage["default"], {
+    error: err
+  }))) : null, /*#__PURE__*/_react["default"].createElement(_core.Grid, {
+    container: true,
+    spacing: 1,
+    justifyContent: "center",
+    alignItems: "center"
+  }, /*#__PURE__*/_react["default"].createElement(_core.Grid, {
+    item: true
+  }, /*#__PURE__*/_react["default"].createElement(_AssemblySelector["default"], {
+    onChange: function onChange(val) {
+      setError(undefined);
+      setSelectedAsm(val);
+    },
+    session: session,
+    selected: selectedAsm
+  })), /*#__PURE__*/_react["default"].createElement(_core.Grid, {
+    item: true
+  }, /*#__PURE__*/_react["default"].createElement(_core.Button, {
+    disabled: !(regions !== null && regions !== void 0 && regions.length),
+    onClick: function onClick() {
+      return model.setDisplayedRegions(regions);
+    },
+    variant: "contained",
+    color: "primary"
+  }, regions.length ? 'Open' : 'Loading…'))));
+});
+var _default = ImportForm;
+exports["default"] = _default;

package/dist/CircularView/components/Ruler.d.ts

@@ -1,5 +1,5 @@
-export default CircularRuler;
-declare function CircularRuler({ model, slice }: {
-    model: any;
-    slice: any;
-}): JSX.Element;
+export default CircularRuler;
+declare function CircularRuler({ model, slice }: {
+    model: any;
+    slice: any;
+}): JSX.Element;

package/dist/CircularView/components/Ruler.js

@@ -0,0 +1,205 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports["default"] = void 0;
+
+var _toConsumableArray2 = _interopRequireDefault(require("@babel/runtime/helpers/toConsumableArray"));
+
+var _react = _interopRequireDefault(require("react"));
+
+var _mobxReact = require("mobx-react");
+
+var _util = require("@jbrowse/core/util");
+
+var _color = require("@jbrowse/core/util/color");
+
+var _styles = require("@material-ui/core/styles");
+
+var useStyles = (0, _styles.makeStyles)({
+  rulerLabel: {
+    fontSize: '0.8rem',
+    fontWeight: 500,
+    lineHeight: 1.6,
+    letterSpacing: '0.0075em'
+  }
+});
+
+function sliceArcPath(slice, radiusPx, startBase, endBase) {
+  // A rx ry x-axis-rotation large-arc-flag sweep-flag x y
+  if (slice.flipped) {
+    ;
+    var _ref = [endBase, startBase];
+    startBase = _ref[0];
+    endBase = _ref[1];
+  }
+
+  var startXY = slice.bpToXY(startBase, radiusPx);
+  var endXY = slice.bpToXY(endBase, radiusPx);
+  var largeArc = Math.abs(endBase - startBase) / slice.bpPerRadian > Math.PI ? '1' : '0';
+  var sweepFlag = '1';
+  return ['M'].concat((0, _toConsumableArray2["default"])(startXY), ['A', radiusPx, radiusPx, '0', largeArc, sweepFlag], (0, _toConsumableArray2["default"])(endXY)).join(' ');
+}
+
+var ElisionRulerArc = (0, _mobxReact.observer)(function (_ref2) {
+  var model = _ref2.model,
+      slice = _ref2.slice;
+  var theme = (0, _styles.useTheme)();
+  var modelRadiusPx = model.radiusPx;
+  var radiusPx = modelRadiusPx + 1;
+  var endRadians = slice.endRadians,
+      startRadians = slice.startRadians,
+      region = slice.region;
+  var startXY = (0, _util.polarToCartesian)(radiusPx, startRadians);
+  var endXY = (0, _util.polarToCartesian)(radiusPx, endRadians);
+  var widthPx = (endRadians - startRadians) * radiusPx;
+  var largeArc = endRadians - startRadians > Math.PI ? '1' : '0'; // TODO: draw the elision
+
+  var centerRadians = (endRadians + startRadians) / 2;
+  var regionCountString = "[".concat(Number(region.regions.length).toLocaleString(), "]");
+  return /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, null, /*#__PURE__*/_react["default"].createElement(RulerLabel, {
+    text: regionCountString,
+    view: model,
+    maxWidthPx: widthPx,
+    radians: centerRadians,
+    radiusPx: radiusPx,
+    title: "".concat(Number(region.regions.length).toLocaleString(), " more regions"),
+    color: theme.palette.text.primary
+  }), /*#__PURE__*/_react["default"].createElement("path", {
+    d: ['M'].concat((0, _toConsumableArray2["default"])(startXY), ['A', radiusPx, radiusPx, '0', largeArc, '1'], (0, _toConsumableArray2["default"])(endXY)).join(' '),
+    stroke: theme.palette.text.secondary,
+    strokeWidth: 2,
+    strokeDasharray: "2,2",
+    fill: "none"
+  }));
+});
+var RulerLabel = (0, _mobxReact.observer)(function (_ref3) {
+  var view = _ref3.view,
+      text = _ref3.text,
+      maxWidthPx = _ref3.maxWidthPx,
+      radians = _ref3.radians,
+      radiusPx = _ref3.radiusPx,
+      title = _ref3.title,
+      color = _ref3.color;
+  var classes = useStyles();
+  var textXY = (0, _util.polarToCartesian)(radiusPx + 5, radians);
+
+  if (!text) {
+    return null;
+  }
+
+  if (text.length * 6.5 < maxWidthPx) {
+    // text is rotated parallel to the ruler arc
+    return /*#__PURE__*/_react["default"].createElement("text", {
+      x: 0,
+      y: 0,
+      className: classes.rulerLabel,
+      textAnchor: "middle",
+      dominantBaseline: "baseline",
+      transform: "translate(".concat(textXY, ") rotate(").concat((0, _util.radToDeg)(radians) + 90, ")"),
+      style: {
+        fill: color
+      }
+    }, text, /*#__PURE__*/_react["default"].createElement("title", null, title || text));
+  }
+
+  if (maxWidthPx > 4) {
+    // text is rotated perpendicular to the ruler arc
+    var overallRotation = (0, _util.radToDeg)(radians + view.offsetRadians - Math.PI / 2);
+
+    if (overallRotation >= 180) {
+      return /*#__PURE__*/_react["default"].createElement("text", {
+        x: 0,
+        y: 0,
+        className: classes.rulerLabel,
+        textAnchor: "start",
+        dominantBaseline: "middle",
+        transform: "translate(".concat(textXY, ") rotate(").concat((0, _util.radToDeg)(radians), ")"),
+        style: {
+          fill: color
+        }
+      }, text, /*#__PURE__*/_react["default"].createElement("title", null, title || text));
+    }
+
+    return /*#__PURE__*/_react["default"].createElement("text", {
+      x: 0,
+      y: 0,
+      className: classes.rulerLabel,
+      textAnchor: "end",
+      dominantBaseline: "middle",
+      transform: "translate(".concat(textXY, ") rotate(").concat((0, _util.radToDeg)(radians) + 180, ")"),
+      style: {
+        fill: color
+      }
+    }, text, /*#__PURE__*/_react["default"].createElement("title", null, title || text));
+  } // if you get here there is no room for the text at all
+
+
+  return null;
+});
+var RegionRulerArc = (0, _mobxReact.observer)(function (_ref4) {
+  var model = _ref4.model,
+      slice = _ref4.slice;
+  var theme = (0, _styles.useTheme)();
+  var radiusPx = model.radiusPx;
+  var region = slice.region,
+      endRadians = slice.endRadians,
+      startRadians = slice.startRadians;
+  var centerRadians = (endRadians + startRadians) / 2;
+  var widthPx = (endRadians - startRadians) * radiusPx;
+  var session = (0, _util.getSession)(model);
+  var color;
+  var assembly = session.assemblyManager.get(slice.region.assemblyName);
+
+  if (assembly) {
+    color = assembly.getRefNameColor(region.refName);
+  }
+
+  if (color) {
+    try {
+      color = (0, _color.makeContrasting)(color, theme.palette.background.paper);
+    } catch (error) {
+      color = theme.palette.text.primary;
+    }
+  } else {
+    color = theme.palette.text.primary;
+  } // TODO: slice flipping
+
+
+  return /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, null, /*#__PURE__*/_react["default"].createElement(RulerLabel, {
+    text: region.refName,
+    view: model,
+    maxWidthPx: widthPx,
+    radians: centerRadians,
+    radiusPx: radiusPx,
+    color: color
+  }), /*#__PURE__*/_react["default"].createElement("path", {
+    d: sliceArcPath(slice, radiusPx + 1, region.start, region.end),
+    stroke: color,
+    strokeWidth: 2,
+    fill: "none"
+  }, /*#__PURE__*/_react["default"].createElement("title", null, region.refName)));
+});
+var CircularRuler = (0, _mobxReact.observer)(function Ruler(_ref5) {
+  var model = _ref5.model,
+      slice = _ref5.slice;
+
+  if (slice.region.elided) {
+    return /*#__PURE__*/_react["default"].createElement(ElisionRulerArc, {
+      key: (0, _util.assembleLocString)(slice.region.regions[0]),
+      model: model,
+      slice: slice
+    });
+  }
+
+  return /*#__PURE__*/_react["default"].createElement(RegionRulerArc, {
+    key: (0, _util.assembleLocString)(slice.region),
+    model: model,
+    slice: slice
+  });
+});
+var _default = CircularRuler;
+exports["default"] = _default;