@jbrowse/plugin-variants 1.6.9 → 1.7.0

package/dist/ChordVariantDisplay/index.js

@@ -0,0 +1,33 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports["default"] = void 0;
+
+var _pluginCircularView = require("@jbrowse/plugin-circular-view");
+
+var _ChordVariantDisplay = _interopRequireDefault(require("./models/ChordVariantDisplay"));
+
+var _default = function _default(pluginManager) {
+  var lib = pluginManager.lib,
+      load = pluginManager.load;
+  var DisplayType = lib['@jbrowse/core/pluggableElementTypes/DisplayType'];
+
+  var _load = load(_ChordVariantDisplay["default"]),
+      stateModel = _load.stateModel,
+      configSchema = _load.configSchema;
+
+  return new DisplayType({
+    name: 'ChordVariantDisplay',
+    configSchema: configSchema,
+    stateModel: stateModel,
+    trackType: 'VariantTrack',
+    viewType: 'CircularView',
+    ReactComponent: (0, _pluginCircularView.BaseChordDisplayComponentFactory)(pluginManager)
+  });
+};
+
+exports["default"] = _default;

package/dist/ChordVariantDisplay/models/ChordVariantDisplay.js

@@ -0,0 +1,76 @@
+"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"));
+
+var _pluginCircularView = require("@jbrowse/plugin-circular-view");
+
+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 ChordVariantDisplayF = function ChordVariantDisplayF(pluginManager) {
+  var jbrequire = pluginManager.jbrequire;
+
+  var _jbrequire = jbrequire('mobx-state-tree'),
+      types = _jbrequire.types;
+
+  var _jbrequire2 = jbrequire('@jbrowse/core/configuration'),
+      ConfigurationSchema = _jbrequire2.ConfigurationSchema,
+      ConfigurationReference = _jbrequire2.ConfigurationReference;
+
+  var _jbrequire3 = jbrequire('@jbrowse/core/util'),
+      getContainingView = _jbrequire3.getContainingView;
+
+  var _jbrequire4 = jbrequire('@jbrowse/core/util/tracks'),
+      getParentRenderProps = _jbrequire4.getParentRenderProps;
+
+  var configSchema = ConfigurationSchema('ChordVariantDisplay', {
+    renderer: types.optional(pluginManager.pluggableConfigSchemaType('renderer'), {
+      type: 'StructuralVariantChordRenderer'
+    })
+  }, {
+    baseConfiguration: _pluginCircularView.baseChordDisplayConfig,
+    explicitlyTyped: true
+  });
+  var stateModel = types.compose('ChordVariantDisplay', _pluginCircularView.BaseChordDisplayModel, types.model({
+    type: types.literal('ChordVariantDisplay'),
+    configuration: ConfigurationReference(configSchema)
+  })).views(function (self) {
+    return {
+      get rendererTypeName() {
+        return self.configuration.renderer.type;
+      },
+
+      renderProps: function renderProps() {
+        var view = getContainingView(self);
+        return _objectSpread(_objectSpread({}, getParentRenderProps(self)), {}, {
+          rpcDriverName: self.rpcDriverName,
+          displayModel: self,
+          bezierRadius: view.radiusPx * self.bezierRadiusRatio,
+          radius: view.radiusPx,
+          blockDefinitions: this.blockDefinitions,
+          config: self.configuration.renderer,
+          onChordClick: self.onChordClick
+        });
+      }
+    };
+  });
+  return {
+    stateModel: stateModel,
+    configSchema: configSchema
+  };
+}; // http://localhost:3000/test_data/hs37d5.HG002-SequelII-CCS.sv.vcf.gz.tbi
+// render request is for 1.5x the current viewing window
+// tracks all have a height
+//
+
+
+var _default = ChordVariantDisplayF;
+exports["default"] = _default;

package/dist/LinearVariantDisplay/configSchema.js

@@ -0,0 +1,18 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.LinearVariantDisplayConfigFactory = LinearVariantDisplayConfigFactory;
+
+var _configuration = require("@jbrowse/core/configuration");
+
+var _pluginLinearGenomeView = require("@jbrowse/plugin-linear-genome-view");
+
+function LinearVariantDisplayConfigFactory(pluginManager) {
+  var configSchema = (0, _pluginLinearGenomeView.linearBasicDisplayConfigSchemaFactory)(pluginManager);
+  return (0, _configuration.ConfigurationSchema)('LinearVariantDisplay', {}, {
+    baseConfiguration: configSchema,
+    explicitlyTyped: true
+  });
+}

package/dist/LinearVariantDisplay/configSchema.test.js

@@ -0,0 +1,92 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+var _classCallCheck2 = _interopRequireDefault(require("@babel/runtime/helpers/classCallCheck"));
+
+var _createClass2 = _interopRequireDefault(require("@babel/runtime/helpers/createClass"));
+
+var _inherits2 = _interopRequireDefault(require("@babel/runtime/helpers/inherits"));
+
+var _possibleConstructorReturn2 = _interopRequireDefault(require("@babel/runtime/helpers/possibleConstructorReturn"));
+
+var _getPrototypeOf2 = _interopRequireDefault(require("@babel/runtime/helpers/getPrototypeOf"));
+
+var _BoxRendererType = _interopRequireDefault(require("@jbrowse/core/pluggableElementTypes/renderers/BoxRendererType"));
+
+var _Plugin3 = _interopRequireDefault(require("@jbrowse/core/Plugin"));
+
+var _PluginManager = _interopRequireDefault(require("@jbrowse/core/PluginManager"));
+
+var _PileupRenderer = _interopRequireDefault(require("@jbrowse/plugin-alignments/src/PileupRenderer"));
+
+var _SvgFeatureRenderer = require("@jbrowse/plugin-svg/src/SvgFeatureRenderer");
+
+var _configSchema = require("./configSchema");
+
+function _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct(); return function _createSuperInternal() { var Super = (0, _getPrototypeOf2["default"])(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = (0, _getPrototypeOf2["default"])(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return (0, _possibleConstructorReturn2["default"])(this, result); }; }
+
+function _isNativeReflectConstruct() { if (typeof Reflect === "undefined" || !Reflect.construct) return false; if (Reflect.construct.sham) return false; if (typeof Proxy === "function") return true; try { Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); return true; } catch (e) { return false; } }
+
+// mock warnings to avoid unnecessary outputs
+beforeEach(function () {
+  jest.spyOn(console, 'warn').mockImplementation(function () {});
+});
+afterEach(function () {
+  console.warn.mockRestore();
+});
+
+var PileupRendererPlugin = /*#__PURE__*/function (_Plugin) {
+  (0, _inherits2["default"])(PileupRendererPlugin, _Plugin);
+
+  var _super = _createSuper(PileupRendererPlugin);
+
+  function PileupRendererPlugin() {
+    (0, _classCallCheck2["default"])(this, PileupRendererPlugin);
+    return _super.apply(this, arguments);
+  }
+
+  (0, _createClass2["default"])(PileupRendererPlugin, [{
+    key: "install",
+    value: function install(pluginManager) {
+      (0, _PileupRenderer["default"])(pluginManager);
+    }
+  }]);
+  return PileupRendererPlugin;
+}(_Plugin3["default"]);
+
+var SvgFeatureRendererPlugin = /*#__PURE__*/function (_Plugin2) {
+  (0, _inherits2["default"])(SvgFeatureRendererPlugin, _Plugin2);
+
+  var _super2 = _createSuper(SvgFeatureRendererPlugin);
+
+  function SvgFeatureRendererPlugin() {
+    (0, _classCallCheck2["default"])(this, SvgFeatureRendererPlugin);
+    return _super2.apply(this, arguments);
+  }
+
+  (0, _createClass2["default"])(SvgFeatureRendererPlugin, [{
+    key: "install",
+    value: function install(pluginManager) {
+      pluginManager.addRendererType(function () {
+        return new _BoxRendererType["default"]({
+          name: 'SvgFeatureRenderer',
+          ReactComponent: _SvgFeatureRenderer.ReactComponent,
+          configSchema: _SvgFeatureRenderer.configSchema,
+          pluginManager: pluginManager
+        });
+      });
+    }
+  }]);
+  return SvgFeatureRendererPlugin;
+}(_Plugin3["default"]);
+
+test('has a viewType attr', function () {
+  var configSchema = (0, _configSchema.LinearVariantDisplayConfigFactory)(new _PluginManager["default"]([new PileupRendererPlugin(), new SvgFeatureRendererPlugin()]).createPluggableElements().configure());
+  var config = configSchema.create({
+    type: 'LinearVariantDisplay',
+    displayId: 'diplayId0',
+    name: 'Zonker Display'
+  });
+  expect(config.type).toEqual('LinearVariantDisplay');
+});

package/dist/LinearVariantDisplay/index.js

@@ -0,0 +1,23 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+Object.defineProperty(exports, "configSchemaFactory", {
+  enumerable: true,
+  get: function get() {
+    return _configSchema.LinearVariantDisplayConfigFactory;
+  }
+});
+Object.defineProperty(exports, "modelFactory", {
+  enumerable: true,
+  get: function get() {
+    return _model["default"];
+  }
+});
+
+var _configSchema = require("./configSchema");
+
+var _model = _interopRequireDefault(require("./model"));

package/dist/LinearVariantDisplay/model.js

@@ -0,0 +1,75 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports["default"] = _default;
+
+var _regenerator = _interopRequireDefault(require("@babel/runtime/regenerator"));
+
+var _asyncToGenerator2 = _interopRequireDefault(require("@babel/runtime/helpers/asyncToGenerator"));
+
+var _configuration = require("@jbrowse/core/configuration");
+
+var _tracks = require("@jbrowse/core/util/tracks");
+
+var _util = require("@jbrowse/core/util");
+
+var _pluginLinearGenomeView = require("@jbrowse/plugin-linear-genome-view");
+
+var _mobxStateTree = require("mobx-state-tree");
+
+function _default(configSchema) {
+  return _mobxStateTree.types.compose('LinearVariantDisplay', (0, _pluginLinearGenomeView.linearBasicDisplayModelFactory)(configSchema), _mobxStateTree.types.model({
+    type: _mobxStateTree.types.literal('LinearVariantDisplay'),
+    configuration: (0, _configuration.ConfigurationReference)(configSchema)
+  })).actions(function (self) {
+    return {
+      selectFeature: function selectFeature(feature) {
+        return (0, _asyncToGenerator2["default"])( /*#__PURE__*/_regenerator["default"].mark(function _callee() {
+          var session, rpcManager, sessionId, track, adapterConfig, header, featureWidget;
+          return _regenerator["default"].wrap(function _callee$(_context) {
+            while (1) {
+              switch (_context.prev = _context.next) {
+                case 0:
+                  session = (0, _util.getSession)(self);
+
+                  if (!(0, _util.isSessionModelWithWidgets)(session)) {
+                    _context.next = 11;
+                    break;
+                  }
+
+                  rpcManager = session.rpcManager;
+                  sessionId = (0, _tracks.getRpcSessionId)(self);
+                  track = (0, _util.getContainingTrack)(self);
+                  adapterConfig = (0, _configuration.getConf)(track, 'adapter');
+                  _context.next = 8;
+                  return rpcManager.call(sessionId, 'CoreGetMetadata', {
+                    adapterConfig: adapterConfig
+                  });
+
+                case 8:
+                  header = _context.sent;
+                  featureWidget = session.addWidget('VariantFeatureWidget', 'variantFeature', {
+                    featureData: feature.toJSON(),
+                    view: (0, _util.getContainingView)(self),
+                    descriptions: header
+                  });
+                  session.showWidget(featureWidget);
+
+                case 11:
+                  session.setSelection(feature);
+
+                case 12:
+                case "end":
+                  return _context.stop();
+              }
+            }
+          }, _callee);
+        }))();
+      }
+    };
+  });
+}

package/dist/StructuralVariantChordRenderer/ReactComponent.js

@@ -0,0 +1,228 @@
+"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 _toConsumableArray2 = _interopRequireDefault(require("@babel/runtime/helpers/toConsumableArray"));
+
+var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
+
+var _react = _interopRequireWildcard(require("react"));
+
+var _mobxReact = require("mobx-react");
+
+var _util = require("@jbrowse/core/util");
+
+var _configuration = require("@jbrowse/core/configuration");
+
+var _mst = require("@jbrowse/core/util/types/mst");
+
+var _vcf = require("@gmod/vcf");
+
+var _propTypes = _interopRequireDefault(require("prop-types"));
+
+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; }
+
+function _createForOfIteratorHelper(o, allowArrayLike) { var it = typeof Symbol !== "undefined" && o[Symbol.iterator] || o["@@iterator"]; if (!it) { if (Array.isArray(o) || (it = _unsupportedIterableToArray(o)) || allowArrayLike && o && typeof o.length === "number") { if (it) o = it; var i = 0; var F = function F() {}; return { s: F, n: function n() { if (i >= o.length) return { done: true }; return { done: false, value: o[i++] }; }, e: function e(_e) { throw _e; }, f: F }; } throw new TypeError("Invalid attempt to iterate non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); } var normalCompletion = true, didErr = false, err; return { s: function s() { it = it.call(o); }, n: function n() { var step = it.next(); normalCompletion = step.done; return step; }, e: function e(_e2) { didErr = true; err = _e2; }, f: function f() { try { if (!normalCompletion && it["return"] != null) it["return"](); } finally { if (didErr) throw err; } } }; }
+
+function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o === "string") return _arrayLikeToArray(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === "Object" && o.constructor) n = o.constructor.name; if (n === "Map" || n === "Set") return Array.from(o); if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen); }
+
+function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) { arr2[i] = arr[i]; } return arr2; }
+
+function bpToRadians(block, pos) {
+  var blockStart = block.region.elided ? 0 : block.region.start;
+  var blockEnd = block.region.elided ? 0 : block.region.end;
+  var bpOffset = block.flipped ? blockEnd - pos : pos - blockStart;
+  var radians = bpOffset / block.bpPerRadian + block.startRadians;
+  return radians;
+}
+
+var Chord = (0, _mobxReact.observer)(function Chord(_ref) {
+  var _feature$get;
+
+  var feature = _ref.feature,
+      blocksForRefs = _ref.blocksForRefs,
+      radius = _ref.radius,
+      config = _ref.config,
+      bezierRadius = _ref.bezierRadius,
+      selected = _ref.selected,
+      _onClick = _ref.onClick;
+  // find the blocks that our start and end points belong to
+  var startBlock = blocksForRefs[feature.get('refName')];
+
+  if (!startBlock) {
+    return null;
+  }
+
+  var svType;
+
+  if (feature.get('INFO')) {
+    ;
+
+    var _ref2 = feature.get('INFO').SVTYPE || [];
+
+    var _ref3 = (0, _slicedToArray2["default"])(_ref2, 1);
+
+    svType = _ref3[0];
+  } else if (feature.get('mate')) {
+    svType = 'mate';
+  }
+
+  var endPosition;
+  var endBlock;
+  var alt = (_feature$get = feature.get('ALT')) === null || _feature$get === void 0 ? void 0 : _feature$get[0];
+  var bnd = alt && (0, _vcf.parseBreakend)(alt);
+
+  if (bnd) {
+    // VCF BND
+    var matePosition = bnd.MatePosition.split(':');
+    endPosition = +matePosition[1];
+    endBlock = blocksForRefs[matePosition[0]];
+  } else if (alt === '<TRA>') {
+    var _feature$get2, _feature$get2$CHR, _feature$get3, _feature$get3$END;
+
+    // VCF TRA
+    var chr2 = (_feature$get2 = feature.get('INFO')) === null || _feature$get2 === void 0 ? void 0 : (_feature$get2$CHR = _feature$get2.CHR2) === null || _feature$get2$CHR === void 0 ? void 0 : _feature$get2$CHR[0];
+    var end = (_feature$get3 = feature.get('INFO')) === null || _feature$get3 === void 0 ? void 0 : (_feature$get3$END = _feature$get3.END) === null || _feature$get3$END === void 0 ? void 0 : _feature$get3$END[0];
+    endPosition = parseInt(end, 10);
+    endBlock = blocksForRefs[chr2];
+  } else if (svType === 'mate') {
+    // generic simplefeatures arcs
+    var mate = feature.get('mate');
+    var _chr = mate.refName;
+    endPosition = mate.start;
+    endBlock = blocksForRefs[_chr];
+  }
+
+  if (endBlock) {
+    var startPos = feature.get('start');
+    var startRadians = bpToRadians(startBlock, startPos);
+    var endRadians = bpToRadians(endBlock, endPosition);
+    var startXY = (0, _util.polarToCartesian)(radius, startRadians);
+    var endXY = (0, _util.polarToCartesian)(radius, endRadians);
+    var controlXY = (0, _util.polarToCartesian)(bezierRadius, (endRadians + startRadians) / 2);
+    var strokeColor = selected ? (0, _configuration.readConfObject)(config, 'strokeColorSelected', {
+      feature: feature
+    }) : (0, _configuration.readConfObject)(config, 'strokeColor', {
+      feature: feature
+    });
+    var hoverStrokeColor = (0, _configuration.readConfObject)(config, 'strokeColorHover', {
+      feature: feature
+    });
+    return /*#__PURE__*/_react["default"].createElement("path", {
+      "data-testid": "chord-".concat(feature.id()),
+      d: ['M'].concat((0, _toConsumableArray2["default"])(startXY), ['Q'], (0, _toConsumableArray2["default"])(controlXY), (0, _toConsumableArray2["default"])(endXY)).join(' '),
+      style: {
+        stroke: strokeColor
+      },
+      onClick: function onClick(evt) {
+        return _onClick(feature, startBlock.region, endBlock.region, evt);
+      },
+      onMouseOver: function onMouseOver(evt) {
+        if (!selected) {
+          evt.target.style.stroke = hoverStrokeColor;
+          evt.target.style.strokeWidth = 3;
+        }
+      },
+      onMouseOut: function onMouseOut(evt) {
+        if (!selected) {
+          evt.target.style.stroke = strokeColor;
+          evt.target.style.strokeWidth = 1;
+        }
+      }
+    });
+  }
+
+  return null;
+});
+
+function StructuralVariantChords(props) {
+  var features = props.features,
+      config = props.config,
+      displayModel = props.displayModel,
+      blockDefinitions = props.blockDefinitions,
+      radius = props.radius,
+      bezierRadius = props.bezierRadius,
+      selectedFeatureId = props.displayModel.selectedFeatureId,
+      onChordClick = props.onChordClick; // make a map of refName -> blockDefinition
+
+  var blocksForRefsMemo = (0, _react.useMemo)(function () {
+    var blocksForRefs = {};
+    blockDefinitions.forEach(function (block) {
+      var regions = block.region.elided ? block.region.regions : [block.region];
+      regions.forEach(function (region) {
+        blocksForRefs[region.refName] = block;
+      });
+    });
+    return blocksForRefs;
+  }, [blockDefinitions]); // console.log(blocksForRefs)
+
+  var chords = [];
+
+  var _iterator = _createForOfIteratorHelper(features),
+      _step;
+
+  try {
+    for (_iterator.s(); !(_step = _iterator.n()).done;) {
+      var _step$value = (0, _slicedToArray2["default"])(_step.value, 2),
+          id = _step$value[0],
+          feature = _step$value[1];
+
+      var selected = String(selectedFeatureId) === String(feature.id());
+      chords.push( /*#__PURE__*/_react["default"].createElement(Chord, {
+        key: id,
+        feature: feature,
+        config: config,
+        displayModel: displayModel,
+        radius: radius,
+        bezierRadius: bezierRadius,
+        blocksForRefs: blocksForRefsMemo,
+        selected: selected,
+        onClick: onChordClick
+      }));
+    }
+  } catch (err) {
+    _iterator.e(err);
+  } finally {
+    _iterator.f();
+  }
+
+  var trackStyleId = "chords-".concat(displayModel.id);
+  return /*#__PURE__*/_react["default"].createElement("g", {
+    id: trackStyleId,
+    "data-testid": "structuralVariantChordRenderer"
+  }, /*#__PURE__*/_react["default"].createElement("style", {
+    // eslint-disable-next-line react/no-danger
+    dangerouslySetInnerHTML: {
+      __html: "\n          #".concat(trackStyleId, " > path {\n            cursor: crosshair;\n            fill: none;\n          }\n")
+    }
+  }), chords);
+}
+
+StructuralVariantChords.propTypes = {
+  features: _propTypes["default"].instanceOf(Map).isRequired,
+  config: _mst.PropTypes.ConfigSchema.isRequired,
+  displayModel: _mobxReact.PropTypes.objectOrObservableObject,
+  blockDefinitions: _propTypes["default"].arrayOf(_mobxReact.PropTypes.objectOrObservableObject).isRequired,
+  radius: _propTypes["default"].number.isRequired,
+  bezierRadius: _propTypes["default"].number.isRequired,
+  selectedFeatureId: _propTypes["default"].string,
+  onChordClick: _propTypes["default"].oneOfType([_propTypes["default"].func, _propTypes["default"].string])
+};
+StructuralVariantChords.defaultProps = {
+  displayModel: undefined,
+  selectedFeatureId: '',
+  onChordClick: undefined
+};
+
+var _default = (0, _mobxReact.observer)(StructuralVariantChords);
+
+exports["default"] = _default;

package/dist/StructuralVariantChordRenderer/index.js

@@ -0,0 +1,48 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports["default"] = void 0;
+
+var _CircularChordRendererType = _interopRequireDefault(require("@jbrowse/core/pluggableElementTypes/renderers/CircularChordRendererType"));
+
+var _configuration = require("@jbrowse/core/configuration");
+
+var _ReactComponent = _interopRequireDefault(require("./ReactComponent"));
+
+var ChordRendererConfigF = function ChordRendererConfigF(pluginManager) {
+  var configSchema = (0, _configuration.ConfigurationSchema)('StructuralVariantChordRenderer', {
+    strokeColor: {
+      type: 'color',
+      description: 'the line color of each arc',
+      defaultValue: 'rgba(255,133,0,0.32)',
+      contextVariable: ['feature']
+    },
+    strokeColorSelected: {
+      type: 'color',
+      description: 'the line color of an arc that has been selected',
+      defaultValue: 'black',
+      contextVariable: ['feature']
+    },
+    strokeColorHover: {
+      type: 'color',
+      description: 'the line color of an arc that is being hovered over with the mouse',
+      defaultValue: '#555',
+      contextVariable: ['feature']
+    }
+  }, {
+    explicitlyTyped: true
+  });
+  return new _CircularChordRendererType["default"]({
+    name: 'StructuralVariantChordRenderer',
+    ReactComponent: _ReactComponent["default"],
+    configSchema: configSchema,
+    pluginManager: pluginManager
+  });
+};
+
+var _default = ChordRendererConfigF;
+exports["default"] = _default;