Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Show both tooltips on hover when lollipop exists in both groups in comparison view lollipop #4458

Merged
merged 2 commits into from
Dec 23, 2022
Merged

Show both tooltips on hover when lollipop exists in both groups in comparison view lollipop #4458

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
3bda177
add double tooltip on hover when both lollipops exist
Dec 21, 2022
3e47dd1
added comments to explain mirror, cleanup
Dec 22, 2022
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
4 changes: 4 additions & 0 deletions packages/cbioportal-frontend-commons/src/components/HitZone.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -17,6 +17,8 @@ type HitZoneProps = {
export type HitZoneConfig = {
hitRect: { x: number; y: number; width: number; height: number };
content?: JSX.Element;
mirrorHitRect?: { x: number; y: number; width: number; height: number }; // mirror lollipop component location and dimensions
mirrorContent?: JSX.Element; // mirror lollipop component tooltip contents
tooltipPlacement?: string;
cursor?: string;
onMouseOver?: () => void;
Expand All @@ -33,6 +35,8 @@ export function defaultHitzoneConfig(): HitZoneConfig {
height: 0,
},
content: <span />,
mirrorHitRect: undefined,
mirrorContent: undefined,
tooltipPlacement: 'top',
cursor: 'pointer',
onMouseOver: () => 0,
Expand Down
48 changes: 46 additions & 2 deletions packages/react-mutation-mapper/src/component/lollipopPlot/LollipopPlot.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
import * as React from 'react';
import { observer } from 'mobx-react';
import { observable, computed, makeObservable } from 'mobx';
import { observable, computed, makeObservable, action } from 'mobx';
import {
HitZoneConfig,
defaultHitzoneConfig,
Expand Down Expand Up @@ -45,6 +45,7 @@ export default class LollipopPlot extends React.Component<
{}
> {
@observable private hitZoneConfig: HitZoneConfig = defaultHitzoneConfig();
@observable private mirrorVisible: boolean = false; // lollipop and mirror lollipop share tooltip visibility

private plot: LollipopPlotNoTooltip | undefined;
private handlers: any;
Expand All @@ -58,7 +59,7 @@ export default class LollipopPlot extends React.Component<

makeObservable<
LollipopPlot,
'hitZoneConfig' | 'tooltipVisible' | 'hitZone'
'hitZoneConfig' | 'tooltipVisible' | 'hitZone' | 'mirrorHitZone'
>(this);

this.handlers = {
Expand All @@ -73,6 +74,13 @@ export default class LollipopPlot extends React.Component<
height: number;
},
content?: JSX.Element,
mirrorHitRect?: {
x: number;
y: number;
width: number;
height: number;
},
mirrorContent?: JSX.Element,
onMouseOver?: () => void,
onClick?: () => void,
onMouseOut?: () => void,
Expand All @@ -82,6 +90,8 @@ export default class LollipopPlot extends React.Component<
this.hitZoneConfig = {
hitRect,
content,
mirrorHitRect,
mirrorContent,
onMouseOver,
onClick,
onMouseOut,
Expand All @@ -91,6 +101,7 @@ export default class LollipopPlot extends React.Component<
},
getOverlay: () => this.hitZoneConfig.content,
getOverlayPlacement: () => this.hitZoneConfig.tooltipPlacement,
getMirrorOverlay: () => this.hitZoneConfig.mirrorContent,
onMouseLeave: () => {
this.hitZoneConfig.onMouseOut &&
this.hitZoneConfig.onMouseOut();
Expand All @@ -110,6 +121,22 @@ export default class LollipopPlot extends React.Component<
return initHitZoneFromConfig(this.hitZoneConfig);
}

// hit zone of mirror lollipop component initialized using config's mirrorHitRect (mirror lollipop location)
// used to determine where to apply the mirror lollipop tooltip
@computed private get mirrorHitZone() {
return initHitZoneFromConfig({
...this.hitZoneConfig,
hitRect: { ...this.hitZoneConfig.mirrorHitRect! },
});
}

// handles lollipop and mirror lollipop component simultaneous tooltip visibility
// if lollipop tooltip is visible, make mirror lollipop tooltip visible as well
@action.bound
private onTooltipVisibleChange(visible: boolean) {
this.mirrorVisible = visible;
}

public toSVGDOMNode(): Element {
if (this.plot) {
// Clone node
Expand Down Expand Up @@ -138,10 +165,27 @@ export default class LollipopPlot extends React.Component<
<DefaultTooltip
placement={this.handlers.getOverlayPlacement()}
overlay={this.handlers.getOverlay}
visible={this.mirrorVisible}
onVisibleChange={this.onTooltipVisibleChange}
{...tooltipVisibleProps}
>
{this.hitZone}
</DefaultTooltip>
{this.hitZoneConfig.mirrorHitRect && (
<DefaultTooltip
placement={
this.handlers.getOverlayPlacement() === 'top'
? 'bottom'
: 'top'
}
overlay={this.handlers.getMirrorOverlay}
visible={this.mirrorVisible}
onVisibleChange={this.onTooltipVisibleChange}
{...tooltipVisibleProps}
>
{this.mirrorHitZone}
</DefaultTooltip>
)}
<LollipopPlotNoTooltip
ref={this.handlers.ref}
setHitZone={this.handlers.setHitZone}
Expand Down
25 changes: 24 additions & 1 deletion packages/react-mutation-mapper/src/component/lollipopPlot/LollipopPlotNoTooltip.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -28,6 +28,8 @@ export type LollipopPlotNoTooltipProps = LollipopPlotProps & {
setHitZone?: (
hitRect: { x: number; y: number; width: number; height: number },
tooltipContent?: JSX.Element,
mirrorHitRect?: { x: number; y: number; width: number; height: number },
mirrorTooltipContent?: JSX.Element,
onMouseOver?: () => void,
onClick?: () => void,
onMouseOut?: () => void,
Expand Down Expand Up @@ -143,11 +145,22 @@ export default class LollipopPlotNoTooltip extends React.Component<
if (lollipopIndex !== null) {
const lollipopComponent = this.lollipopComponents[lollipopIndex];
if (lollipopComponent) {
// 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
const mirrorLollipopComponent = _.find(
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

lets put a nice comment on this explaining concept of "mirror"

this.lollipopComponents,
l =>
l.props.spec.codon ===
lollipopComponent.props.spec.codon &&
l !== lollipopComponent
);
lollipopComponent.isHovered = true;
if (this.props.setHitZone) {
this.props.setHitZone(
lollipopComponent.circleHitRect,
lollipopComponent.props.spec.tooltip,
mirrorLollipopComponent?.circleHitRect,
mirrorLollipopComponent?.props.spec.tooltip,
action(() => {
if (this.props.dataStore) {
updatePositionHighlightFilters(
Expand All @@ -161,7 +174,13 @@ export default class LollipopPlotNoTooltip extends React.Component<
this.onLollipopClick(
lollipopComponent.props.spec.codon
)
)
),
undefined,
'pointer',
lollipopComponent.circleHitRect.y >
lollipopComponent.props.stickBaseY
? 'bottom'
: 'top'
);
}
}
Expand All @@ -179,6 +198,8 @@ export default class LollipopPlotNoTooltip extends React.Component<
undefined,
undefined,
undefined,
undefined,
undefined,
'auto'
);
}
Expand All @@ -199,6 +220,8 @@ export default class LollipopPlotNoTooltip extends React.Component<
undefined,
undefined,
undefined,
undefined,
undefined,
'auto'
);
}
Expand Down