@jbrowse/plugin-circular-view 1.6.9 → 1.7.0

package/dist/BaseChordDisplay/components/BaseChordDisplay.js

@@ -0,0 +1,53 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports["default"] = void 0;
+
+var _Loading = _interopRequireDefault(require("./Loading"));
+
+var _DisplayError = _interopRequireDefault(require("./DisplayError"));
+
+var _RpcRenderedSvgGroup = _interopRequireDefault(require("./RpcRenderedSvgGroup"));
+
+var _default = function _default(_ref) {
+  var lib = _ref.lib,
+      load = _ref.load;
+  var React = lib.react;
+  var _lib$mobxReact = lib['mobx-react'],
+      observer = _lib$mobxReact.observer,
+      MobxPropTypes = _lib$mobxReact.PropTypes;
+  var Loading = load(_Loading["default"]);
+  var DisplayError = load(_DisplayError["default"]);
+  var RpcRenderedSvgGroup = load(_RpcRenderedSvgGroup["default"]); // eslint-disable-next-line @typescript-eslint/no-explicit-any
+
+  function BaseChordDisplay(_ref2) {
+    var display = _ref2.display;
+
+    if (display.error) {
+      return /*#__PURE__*/React.createElement(DisplayError, {
+        model: display
+      });
+    }
+
+    if (!display.filled) {
+      return /*#__PURE__*/React.createElement(Loading, {
+        model: display
+      });
+    }
+
+    return /*#__PURE__*/React.createElement(RpcRenderedSvgGroup, {
+      model: display
+    });
+  }
+
+  BaseChordDisplay.propTypes = {
+    display: MobxPropTypes.observableObject.isRequired
+  };
+  return observer(BaseChordDisplay);
+};
+
+exports["default"] = _default;

package/dist/BaseChordDisplay/components/DisplayError.js

@@ -0,0 +1,70 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports["default"] = void 0;
+
+var _default = function _default(_ref) {
+  var jbrequire = _ref.jbrequire;
+  var React = jbrequire('react');
+
+  var _jbrequire = jbrequire('@material-ui/core/styles'),
+      makeStyles = _jbrequire.makeStyles;
+
+  var _jbrequire2 = jbrequire('mobx-react'),
+      observer = _jbrequire2.observer;
+
+  var useStyles = makeStyles({
+    errorMessage: {},
+    errorBackground: {},
+    errorText: {}
+  }); // 'repeating-linear-gradient(45deg, transparent, transparent 5px, rgba(255,255,255,.5) 5px, rgba(255,255,255,.5) 10px)',
+
+  var DisplayError = observer(function (_ref2) {
+    var _ref2$model = _ref2.model,
+        radius = _ref2$model.renderProps.radius,
+        error = _ref2$model.error;
+    var classes = useStyles();
+    return /*#__PURE__*/React.createElement("g", {
+      className: classes.errorMessage
+    }, /*#__PURE__*/React.createElement("defs", null, /*#__PURE__*/React.createElement("pattern", {
+      id: "diagonalHatch",
+      width: "10",
+      height: "10",
+      patternTransform: "rotate(45 0 0)",
+      patternUnits: "userSpaceOnUse"
+    }, /*#__PURE__*/React.createElement("line", {
+      x1: "0",
+      y1: "0",
+      x2: "0",
+      y2: "10",
+      style: {
+        stroke: 'rgba(255,0,0,0.5)',
+        strokeWidth: 10
+      }
+    }))), /*#__PURE__*/React.createElement("circle", {
+      className: classes.errorBackground,
+      cx: "0",
+      cy: "0",
+      r: radius,
+      fill: "#ffb4b4"
+    }), /*#__PURE__*/React.createElement("circle", {
+      className: classes.errorPattern,
+      cx: "0",
+      cy: "0",
+      r: radius,
+      fill: "url(#diagonalHatch)"
+    }), /*#__PURE__*/React.createElement("text", {
+      className: classes.errorText,
+      x: "0",
+      y: "0",
+      transform: "rotate(90 0 0)",
+      dominantBaseline: "middle",
+      textAnchor: "middle"
+    }, String(error)));
+  });
+  return DisplayError;
+};
+
+exports["default"] = _default;

package/dist/BaseChordDisplay/components/Loading.js

@@ -0,0 +1,122 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports["default"] = void 0;
+
+var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
+
+var _default = function _default(pluginManager) {
+  var lib = pluginManager.lib;
+  var React = lib.react;
+  var useState = React.useState,
+      useEffect = React.useEffect;
+  var makeStyles = lib['@material-ui/core/styles'].makeStyles;
+  var observer = lib['mobx-react'].observer;
+  var useStyles = makeStyles(function (theme) {
+    var offset = 2;
+    var duration = 1.4;
+    return {
+      path: {
+        strokeDasharray: 187,
+        strokeDashoffset: 50,
+        animation: "$dash ".concat(duration, "s ease-in-out infinite, $colors ").concat(duration * 4, "s ease-in-out infinite")
+      },
+      '@keyframes colors': {
+        '0%': {
+          stroke: theme.palette.primary.light
+        },
+        '25%': {
+          stroke: theme.palette.secondary.light
+        },
+        '50%': {
+          stroke: theme.palette.tertiary.light
+        },
+        '75%': {
+          stroke: theme.palette.quaternary.light
+        },
+        '100%': {
+          stroke: theme.palette.primary.light
+        }
+      },
+      '@keyframes dash': {
+        '0%': {
+          strokeDashoffset: offset
+        },
+        '50%': {
+          strokeDashoffset: offset / 4,
+          transform: 'rotate(135deg)'
+        },
+        '100%': {
+          strokeDashoffset: offset,
+          transform: 'rotate(720deg)'
+        }
+      }
+    };
+  }); // 'repeating-linear-gradient(45deg, transparent, transparent 5px, rgba(255,255,255,.5) 5px, rgba(255,255,255,.5) 10px)',
+
+  var Loading = observer(function (_ref) {
+    var radius = _ref.model.renderProps.radius;
+    var classes = useStyles(); // only show the loading message after 400ms to prevent excessive flickering
+
+    var _useState = useState(false),
+        _useState2 = (0, _slicedToArray2["default"])(_useState, 2),
+        shown = _useState2[0],
+        setShown = _useState2[1];
+
+    useEffect(function () {
+      var timeout = setTimeout(function () {
+        return setShown(true);
+      }, 400);
+      return function () {
+        return clearTimeout(timeout);
+      };
+    });
+    return !shown ? null : /*#__PURE__*/React.createElement("g", null, /*#__PURE__*/React.createElement("defs", null, /*#__PURE__*/React.createElement("pattern", {
+      id: "diagonalHatch",
+      width: "10",
+      height: "10",
+      patternTransform: "rotate(45 0 0)",
+      patternUnits: "userSpaceOnUse"
+    }, /*#__PURE__*/React.createElement("line", {
+      x1: "0",
+      y1: "0",
+      x2: "0",
+      y2: "10",
+      style: {
+        stroke: 'rgba(255,255,255,0.5)',
+        strokeWidth: 10
+      }
+    }))), /*#__PURE__*/React.createElement("circle", {
+      cx: "0",
+      cy: "0",
+      r: radius,
+      fill: "#f1f1f1"
+    }), /*#__PURE__*/React.createElement("circle", {
+      cx: "0",
+      cy: "0",
+      r: radius,
+      fill: "url(#diagonalHatch)"
+    }), /*#__PURE__*/React.createElement("text", {
+      x: "0",
+      y: "0",
+      transform: "rotate(90 0 0)",
+      dominantBaseline: "middle",
+      textAnchor: "middle"
+    }, "Loading\u2026"), /*#__PURE__*/React.createElement("circle", {
+      className: classes.path,
+      fill: "none",
+      strokeWidth: "4",
+      strokeLinecap: "round",
+      cx: "0",
+      cy: "0",
+      r: "60"
+    }));
+  });
+  return Loading;
+};
+
+exports["default"] = _default;

package/dist/BaseChordDisplay/components/RpcRenderedSvgGroup.js

@@ -0,0 +1,96 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports["default"] = void 0;
+
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
+
+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; }
+
+var _default = function _default(_ref) {
+  var jbrequire = _ref.jbrequire;
+  var React = jbrequire('react');
+
+  var _jbrequire = jbrequire('mobx-state-tree'),
+      isAlive = _jbrequire.isAlive;
+
+  var useEffect = React.useEffect,
+      useRef = React.useRef;
+
+  var _jbrequire2 = jbrequire('mobx-react'),
+      observer = _jbrequire2.observer,
+      MobxPropTypes = _jbrequire2.PropTypes;
+
+  var _jbrequire3 = jbrequire('react-dom'),
+      unmountComponentAtNode = _jbrequire3.unmountComponentAtNode,
+      hydrate = _jbrequire3.hydrate;
+
+  var _jbrequire4 = jbrequire('@jbrowse/core/util'),
+      rIC = _jbrequire4.rIC;
+
+  function RpcRenderedSvgGroup(_ref2) {
+    var model = _ref2.model;
+    var data = model.data,
+        html = model.html,
+        filled = model.filled,
+        renderingComponent = model.renderingComponent;
+    var ssrContainerNode = useRef(null);
+    useEffect(function () {
+      var domNode = ssrContainerNode.current;
+
+      function doHydrate() {
+        if (domNode && filled) {
+          if (domNode && domNode.innerHTML) {
+            domNode.style.display = 'none';
+            unmountComponentAtNode(domNode);
+          } // setting outline:none fixes react "focusable" element issue. see
+          // https://github.com/GMOD/jbrowse-components/issues/2160
+
+
+          domNode.style.outline = 'none';
+          domNode.innerHTML = html; // use requestIdleCallback to defer main-thread rendering
+          // and hydration for when we have some free time. helps
+          // keep the framerate up.
+
+          rIC(function () {
+            if (!isAlive(model)) {
+              return;
+            }
+
+            var mainThreadRendering = React.createElement(renderingComponent, _objectSpread(_objectSpread({}, data), model.renderProps()), null);
+            rIC(function () {
+              if (!isAlive(model)) {
+                return;
+              }
+
+              hydrate(mainThreadRendering, domNode);
+            });
+          });
+        }
+      }
+
+      doHydrate();
+      return function () {
+        if (domNode) {
+          unmountComponentAtNode(domNode);
+        }
+      };
+    });
+    return /*#__PURE__*/React.createElement("g", {
+      ref: ssrContainerNode
+    });
+  }
+
+  RpcRenderedSvgGroup.propTypes = {
+    model: MobxPropTypes.observableObject.isRequired
+  };
+  return observer(RpcRenderedSvgGroup);
+};
+
+exports["default"] = _default;

package/dist/BaseChordDisplay/index.js

@@ -0,0 +1,31 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+Object.defineProperty(exports, "BaseChordDisplayComponentFactory", {
+  enumerable: true,
+  get: function get() {
+    return _BaseChordDisplay["default"];
+  }
+});
+Object.defineProperty(exports, "BaseChordDisplayModel", {
+  enumerable: true,
+  get: function get() {
+    return _BaseChordDisplayModel.BaseChordDisplayModel;
+  }
+});
+Object.defineProperty(exports, "baseChordDisplayConfig", {
+  enumerable: true,
+  get: function get() {
+    return _baseChordDisplayConfig.baseChordDisplayConfig;
+  }
+});
+
+var _BaseChordDisplay = _interopRequireDefault(require("./components/BaseChordDisplay"));
+
+var _BaseChordDisplayModel = require("./models/BaseChordDisplayModel");
+
+var _baseChordDisplayConfig = require("./models/baseChordDisplayConfig");

package/dist/BaseChordDisplay/models/BaseChordDisplayModel.js

@@ -0,0 +1,261 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.BaseChordDisplayModel = void 0;
+
+var _regenerator = _interopRequireDefault(require("@babel/runtime/regenerator"));
+
+var _asyncToGenerator2 = _interopRequireDefault(require("@babel/runtime/helpers/asyncToGenerator"));
+
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
+
+var _configuration = require("@jbrowse/core/configuration");
+
+var _models = require("@jbrowse/core/pluggableElementTypes/models");
+
+var _CircularChordRendererType = _interopRequireDefault(require("@jbrowse/core/pluggableElementTypes/renderers/CircularChordRendererType"));
+
+var _util = require("@jbrowse/core/util");
+
+var _simpleFeature = require("@jbrowse/core/util/simpleFeature");
+
+var _tracks = require("@jbrowse/core/util/tracks");
+
+var _mobxStateTree = require("mobx-state-tree");
+
+var _renderReaction = _interopRequireDefault(require("./renderReaction"));
+
+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; }
+
+var BaseChordDisplayModel = _mobxStateTree.types.compose('BaseChordDisplay', _models.BaseDisplay, _mobxStateTree.types.model({
+  bezierRadiusRatio: 0.1,
+  assemblyName: _mobxStateTree.types.maybe(_mobxStateTree.types.string)
+}))["volatile"](function () {
+  return {
+    // NOTE: all this volatile stuff has to be filled in at once
+    // so that it stays consistent
+    filled: false,
+    reactElement: undefined,
+    data: undefined,
+    message: '',
+    renderingComponent: undefined,
+    refNameMap: undefined
+  };
+}).actions(function (self) {
+  var _getEnv = (0, _mobxStateTree.getEnv)(self),
+      pluginManager = _getEnv.pluginManager;
+
+  var track = self;
+  return {
+    onChordClick: function onChordClick(feature) {
+      (0, _configuration.getConf)(self, 'onChordClick', {
+        feature: feature,
+        track: track,
+        pluginManager: pluginManager
+      });
+    }
+  };
+}).views(function (self) {
+  return {
+    get blockDefinitions() {
+      var origSlices = (0, _util.getContainingView)(self).staticSlices;
+
+      if (!self.refNameMap) {
+        return origSlices;
+      }
+
+      var slices = JSON.parse(JSON.stringify(origSlices)); // eslint-disable-next-line @typescript-eslint/no-explicit-any
+
+      slices.forEach(function (slice) {
+        var regions = slice.region.elided ? slice.region.regions : [slice.region];
+        regions.forEach(function (region) {
+          var _self$refNameMap;
+
+          var renamed = (_self$refNameMap = self.refNameMap) === null || _self$refNameMap === void 0 ? void 0 : _self$refNameMap[region.refName];
+
+          if (renamed && region.refName !== renamed) {
+            region.refName = renamed;
+          }
+        });
+      });
+      return slices;
+    },
+
+    renderProps: function renderProps() {
+      var view = (0, _util.getContainingView)(self);
+      return _objectSpread(_objectSpread({}, (0, _tracks.getParentRenderProps)(self)), {}, {
+        rpcDriverName: self.rpcDriverName,
+        displayModel: self,
+        bezierRadius: view.radiusPx * self.bezierRadiusRatio,
+        radius: view.radiusPx,
+        blockDefinitions: this.blockDefinitions,
+        onChordClick: self.onChordClick
+      });
+    },
+
+    /**
+     * the pluggable element type object for this diplay's
+     * renderer
+     */
+    get rendererType() {
+      var display = self;
+
+      var _getEnv2 = (0, _mobxStateTree.getEnv)(self),
+          pluginManager = _getEnv2.pluginManager;
+
+      var ThisRendererType = pluginManager.getRendererType(self.rendererTypeName);
+
+      if (!ThisRendererType) {
+        throw new Error("renderer \"".concat(display.rendererTypeName, "\" not found"));
+      }
+
+      if (!ThisRendererType.ReactComponent) {
+        throw new Error("renderer ".concat(display.rendererTypeName, " has no ReactComponent, it may not be completely implemented yet"));
+      }
+
+      return ThisRendererType;
+    },
+
+    isCompatibleWithRenderer: function isCompatibleWithRenderer(renderer) {
+      return !!(renderer instanceof _CircularChordRendererType["default"]);
+    },
+
+    /**
+     * returns a string feature ID if the globally-selected object
+     * is probably a feature
+     */
+    get selectedFeatureId() {
+      if (!(0, _mobxStateTree.isAlive)(self)) {
+        return undefined;
+      }
+
+      var session = (0, _util.getSession)(self);
+
+      if (!session) {
+        return undefined;
+      }
+
+      var selection = session.selection; // does it quack like a feature?
+
+      if ((0, _simpleFeature.isFeature)(selection)) {
+        return selection.id();
+      }
+
+      return undefined;
+    }
+
+  };
+}).actions(function (self) {
+  return {
+    renderStarted: function renderStarted() {
+      self.filled = false;
+      self.message = '';
+      self.reactElement = undefined;
+      self.data = undefined;
+      self.error = undefined;
+      self.renderingComponent = undefined;
+    },
+    renderSuccess: function renderSuccess(_ref) {
+      var message = _ref.message,
+          data = _ref.data,
+          reactElement = _ref.reactElement,
+          renderingComponent = _ref.renderingComponent;
+
+      if (message) {
+        self.filled = false;
+        self.message = message;
+        self.reactElement = undefined;
+        self.data = undefined;
+        self.error = undefined;
+        self.renderingComponent = undefined;
+      } else {
+        self.filled = true;
+        self.message = '';
+        self.reactElement = reactElement;
+        self.data = data;
+        self.error = undefined;
+        self.renderingComponent = renderingComponent;
+      }
+    },
+    renderError: function renderError(error) {
+      console.error(error); // the rendering failed for some reason
+
+      self.filled = false;
+      self.message = '';
+      self.reactElement = undefined;
+      self.data = undefined;
+      self.error = error;
+      self.renderingComponent = undefined;
+    },
+    setRefNameMap: function setRefNameMap(refNameMap) {
+      self.refNameMap = refNameMap;
+    }
+  };
+}).actions(function (self) {
+  var _getEnv3 = (0, _mobxStateTree.getEnv)(self),
+      pluginManager = _getEnv3.pluginManager;
+
+  var _pluginManager$jbrequ = pluginManager.jbrequire(_renderReaction["default"]),
+      renderReactionData = _pluginManager$jbrequ.renderReactionData,
+      renderReactionEffect = _pluginManager$jbrequ.renderReactionEffect;
+
+  return {
+    afterAttach: function afterAttach() {
+      (0, _util.makeAbortableReaction)(self, renderReactionData, renderReactionEffect, {
+        name: "".concat(self.type, " ").concat(self.id, " rendering"),
+        // delay: self.renderDelay || 300,
+        fireImmediately: true
+      }, self.renderStarted, self.renderSuccess, self.renderError);
+      (0, _util.makeAbortableReaction)(self, function () {
+        return {
+          assemblyNames: (0, _tracks.getTrackAssemblyNames)(self.parentTrack),
+          adapter: (0, _configuration.getConf)((0, _mobxStateTree.getParent)(self, 2), 'adapter'),
+          assemblyManager: (0, _util.getSession)(self).assemblyManager
+        };
+      },
+      /*#__PURE__*/
+      // eslint-disable-next-line @typescript-eslint/no-explicit-any
+      function () {
+        var _ref3 = (0, _asyncToGenerator2["default"])( /*#__PURE__*/_regenerator["default"].mark(function _callee(_ref2, signal) {
+          var assemblyNames, adapter, assemblyManager;
+          return _regenerator["default"].wrap(function _callee$(_context) {
+            while (1) {
+              switch (_context.prev = _context.next) {
+                case 0:
+                  assemblyNames = _ref2.assemblyNames, adapter = _ref2.adapter, assemblyManager = _ref2.assemblyManager;
+                  return _context.abrupt("return", assemblyManager.getRefNameMapForAdapter(adapter, assemblyNames[0], {
+                    signal: signal,
+                    sessionId: (0, _tracks.getRpcSessionId)(self)
+                  }));
+
+                case 2:
+                case "end":
+                  return _context.stop();
+              }
+            }
+          }, _callee);
+        }));
+
+        return function (_x, _x2) {
+          return _ref3.apply(this, arguments);
+        };
+      }(), {
+        name: "".concat(self.type, " ").concat(self.id, " getting refNames"),
+        fireImmediately: true
+      }, function () {}, function (refNameMap) {
+        self.setRefNameMap(refNameMap);
+      }, function (error) {
+        console.error(error);
+        self.setError(error);
+      });
+    }
+  };
+});
+
+exports.BaseChordDisplayModel = BaseChordDisplayModel;

package/dist/BaseChordDisplay/models/baseChordDisplayConfig.js

@@ -0,0 +1,20 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.baseChordDisplayConfig = void 0;
+
+var _configuration = require("@jbrowse/core/configuration");
+
+var baseChordDisplayConfig = (0, _configuration.ConfigurationSchema)('BaseChordDisplay', {
+  onChordClick: {
+    type: 'boolean',
+    description: 'callback that should be run when a chord in the track is clicked',
+    defaultValue: false,
+    contextVariable: ['feature', 'track', 'pluginManager']
+  }
+}, {
+  explicitIdentifier: 'displayId'
+});
+exports.baseChordDisplayConfig = baseChordDisplayConfig;