react-mutation-mapper 0.8.65 → 0.8.66

package/dist/component/lollipopPlot/LollipopPlot.d.ts

@@ -29,12 +29,15 @@ export declare type LollipopPlotProps = {
 };
 export default class LollipopPlot extends React.Component<LollipopPlotProps, {}> {
     private hitZoneConfig;
+    private mirrorVisible;
     private plot;
     private handlers;
     static defaultProps: Partial<LollipopPlotProps>;
     constructor(props: LollipopPlotProps);
     private get tooltipVisible();
     private get hitZone();
+    private get mirrorHitZone();
+    private onTooltipVisibleChange;
     toSVGDOMNode(): Element;
     render(): JSX.Element;
 }

package/dist/component/lollipopPlot/LollipopPlotNoTooltip.d.ts

@@ -8,7 +8,12 @@ export declare type LollipopPlotNoTooltipProps = LollipopPlotProps & {
         y: number;
         width: number;
         height: number;
-    }, tooltipContent?: JSX.Element, onMouseOver?: () => void, onClick?: () => void, onMouseOut?: () => void, cursor?: string, tooltipPlacement?: string) => void;
+    }, tooltipContent?: JSX.Element, mirrorHitRect?: {
+        x: number;
+        y: number;
+        width: number;
+        height: number;
+    }, mirrorTooltipContent?: JSX.Element, onMouseOver?: () => void, onClick?: () => void, onMouseOut?: () => void, cursor?: string, tooltipPlacement?: string) => void;
     onMouseLeave?: () => void;
     onBackgroundMouseMove?: () => void;
 };

package/dist/index.es.js

@@ -4760,16 +4760,26 @@ var LollipopPlotNoTooltip = /** @class */ (function (_super) {
             if (lollipopIndex !== null) {
                 var lollipopComponent_1 = this.lollipopComponents[lollipopIndex];
                 if (lollipopComponent_1) {
+                    // mirrorLollipopComponent refers to the lollipop component, if it exists, in the other group at the same lollipopIndex
+                    // this is needed to show tooltips of both lollipop components at same index
+                    var mirrorLollipopComponent = ___default.find(this.lollipopComponents, function (l) {
+                        return l.props.spec.codon ===
+                            lollipopComponent_1.props.spec.codon &&
+                            l !== lollipopComponent_1;
+                    });
                     lollipopComponent_1.isHovered = true;
                     if (this.props.setHitZone) {
-                        this.props.setHitZone(lollipopComponent_1.circleHitRect, lollipopComponent_1.props.spec.tooltip, action(function () {
+                        this.props.setHitZone(lollipopComponent_1.circleHitRect, lollipopComponent_1.props.spec.tooltip, mirrorLollipopComponent === null || mirrorLollipopComponent === void 0 ? void 0 : mirrorLollipopComponent.circleHitRect, mirrorLollipopComponent === null || mirrorLollipopComponent === void 0 ? void 0 : mirrorLollipopComponent.props.spec.tooltip, action(function () {
                             if (_this.props.dataStore) {
                                 updatePositionHighlightFilters(_this.props.dataStore, [lollipopComponent_1.props.spec.codon]);
                             }
                             lollipopComponent_1.isHovered = true;
                         }), action(function () {
                             return _this.onLollipopClick(lollipopComponent_1.props.spec.codon);
-                        }));
+                        }), undefined, 'pointer', lollipopComponent_1.circleHitRect.y >
+                            lollipopComponent_1.props.stickBaseY
+                            ? 'bottom'
+                            : 'top');
                     }
                 }
             }
@@ -4780,7 +4790,7 @@ var LollipopPlotNoTooltip = /** @class */ (function (_super) {
                 var domainComponent = this.domainComponents[domainIndex];
                 if (domainComponent) {
                     if (this.props.setHitZone) {
-                        this.props.setHitZone(domainComponent.hitRect, domainComponent.props.spec.tooltip, undefined, undefined, undefined, 'auto');
+                        this.props.setHitZone(domainComponent.hitRect, domainComponent.props.spec.tooltip, undefined, undefined, undefined, undefined, undefined, 'auto');
                     }
                 }
             }
@@ -4793,7 +4803,7 @@ var LollipopPlotNoTooltip = /** @class */ (function (_super) {
                     if (this.props.setHitZone) {
                         this.props.setHitZone(sequenceComponent.hitRect, sequenceComponent.props.spec
                             ? sequenceComponent.props.spec.tooltip
-                            : undefined, undefined, undefined, undefined, 'auto');
+                            : undefined, undefined, undefined, undefined, undefined, undefined, 'auto');
                     }
                 }
             }
@@ -5612,6 +5622,12 @@ var LollipopPlot = /** @class */ (function (_super) {
             writable: true,
             value: defaultHitzoneConfig()
         });
+        Object.defineProperty(_this, "mirrorVisible", {
+            enumerable: true,
+            configurable: true,
+            writable: true,
+            value: false
+        }); // lollipop and mirror lollipop share tooltip visibility
         Object.defineProperty(_this, "plot", {
             enumerable: true,
             configurable: true,
@@ -5629,12 +5645,14 @@ var LollipopPlot = /** @class */ (function (_super) {
             ref: function (plot) {
                 _this.plot = plot;
             },
-            setHitZone: function (hitRect, content, onMouseOver, onClick, onMouseOut, cursor, tooltipPlacement) {
+            setHitZone: function (hitRect, content, mirrorHitRect, mirrorContent, onMouseOver, onClick, onMouseOut, cursor, tooltipPlacement) {
                 if (cursor === void 0) { cursor = 'pointer'; }
                 if (tooltipPlacement === void 0) { tooltipPlacement = 'top'; }
                 _this.hitZoneConfig = {
                     hitRect: hitRect,
                     content: content,
+                    mirrorHitRect: mirrorHitRect,
+                    mirrorContent: mirrorContent,
                     onMouseOver: onMouseOver,
                     onClick: onClick,
                     onMouseOut: onMouseOut,
@@ -5644,6 +5662,7 @@ var LollipopPlot = /** @class */ (function (_super) {
             },
             getOverlay: function () { return _this.hitZoneConfig.content; },
             getOverlayPlacement: function () { return _this.hitZoneConfig.tooltipPlacement; },
+            getMirrorOverlay: function () { return _this.hitZoneConfig.mirrorContent; },
             onMouseLeave: function () {
                 _this.hitZoneConfig.onMouseOut &&
                     _this.hitZoneConfig.onMouseOut();
@@ -5669,6 +5688,25 @@ var LollipopPlot = /** @class */ (function (_super) {
         enumerable: false,
         configurable: true
     });
+    Object.defineProperty(LollipopPlot.prototype, "mirrorHitZone", {
+        // hit zone of mirror lollipop component initialized using config's mirrorHitRect (mirror lollipop location)
+        // used to determine where to apply the mirror lollipop tooltip
+        get: function () {
+            return initHitZoneFromConfig(__assign(__assign({}, this.hitZoneConfig), { hitRect: __assign({}, this.hitZoneConfig.mirrorHitRect) }));
+        },
+        enumerable: false,
+        configurable: true
+    });
+    // handles lollipop and mirror lollipop component simultaneous tooltip visibility
+    // if lollipop tooltip is visible, make mirror lollipop tooltip visible as well
+    Object.defineProperty(LollipopPlot.prototype, "onTooltipVisibleChange", {
+        enumerable: false,
+        configurable: true,
+        writable: true,
+        value: function (visible) {
+            this.mirrorVisible = visible;
+        }
+    });
     Object.defineProperty(LollipopPlot.prototype, "toSVGDOMNode", {
         enumerable: false,
         configurable: true,
@@ -5696,7 +5734,10 @@ var LollipopPlot = /** @class */ (function (_super) {
                     position: 'relative',
                     display: 'inline-block',
                 }, "data-test": "LollipopPlot" },
-                React.createElement(DefaultTooltip, __assign({ placement: this.handlers.getOverlayPlacement(), overlay: this.handlers.getOverlay }, tooltipVisibleProps), this.hitZone),
+                React.createElement(DefaultTooltip, __assign({ placement: this.handlers.getOverlayPlacement(), overlay: this.handlers.getOverlay, visible: this.mirrorVisible, onVisibleChange: this.onTooltipVisibleChange }, tooltipVisibleProps), this.hitZone),
+                this.hitZoneConfig.mirrorHitRect && (React.createElement(DefaultTooltip, __assign({ placement: this.handlers.getOverlayPlacement() === 'top'
+                        ? 'bottom'
+                        : 'top', overlay: this.handlers.getMirrorOverlay, visible: this.mirrorVisible, onVisibleChange: this.onTooltipVisibleChange }, tooltipVisibleProps), this.mirrorHitZone)),
                 React.createElement(LollipopPlotNoTooltip, __assign({ ref: this.handlers.ref, setHitZone: this.handlers.setHitZone, onMouseLeave: this.handlers.onMouseLeave, onBackgroundMouseMove: this.handlers.onBackgroundMouseMove }, this.props))));
         }
     });
@@ -5711,12 +5752,21 @@ var LollipopPlot = /** @class */ (function (_super) {
     __decorate([
         observable
     ], LollipopPlot.prototype, "hitZoneConfig", void 0);
+    __decorate([
+        observable
+    ], LollipopPlot.prototype, "mirrorVisible", void 0);
     __decorate([
         computed
     ], LollipopPlot.prototype, "tooltipVisible", null);
     __decorate([
         computed
     ], LollipopPlot.prototype, "hitZone", null);
+    __decorate([
+        computed
+    ], LollipopPlot.prototype, "mirrorHitZone", null);
+    __decorate([
+        action.bound
+    ], LollipopPlot.prototype, "onTooltipVisibleChange", null);
     LollipopPlot = __decorate([
         observer
     ], LollipopPlot);