Skip to content

Add tooltip w/ visx customization to volcano plots #381

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

Merged
jernestmyers merged 11 commits into from
Aug 15, 2023
Merged

Add tooltip w/ visx customization to volcano plots #381

Show file tree
Hide file tree
Changes from 1 commit
Commits
Show all changes
11 commits
Select commit Hold shift + click to select a range
1a3d2cb
Add tooltip w/ visx customization to volcano plots
jernestmyers Jul 25, 2023
468f54f
Fix tooltip zIndex issue and clean up imports
jernestmyers Aug 2, 2023
01c62de
Merge main and resolve conflicts
jernestmyers Aug 3, 2023
0d2b183
Adjust behavior and style of tooltips
jernestmyers Aug 3, 2023
aa67be7
Merge main and resolve conflicts
jernestmyers Aug 7, 2023
030b162
Adjust pointID type for data aggregation/tooltip purposes
jernestmyers Aug 7, 2023
87d09b4
Combine data with shared coords for volcano plot tooltips
jernestmyers Aug 7, 2023
35be26c
Rename pointID plot data property to pointIDs
jernestmyers Aug 8, 2023
41919f4
Merge branch 'main' into 66-volcano-plot-tooltips
jernestmyers Aug 9, 2023
e9f4477
Use custom branch as visx/xychart package
jernestmyers Aug 14, 2023
2c2f178
Merge branch 'main' into 66-volcano-plot-tooltips
jernestmyers Aug 15, 2023
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
14 changes: 14 additions & 0 deletions packages/libs/components/src/plots/VolcanoPlot.css
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,14 @@
.VolcanoPlotTooltip > ul {
margin: 0;
padding: 0.25em;
list-style: none;
line-height: 1.5em;
}

.VolcanoPlotTooltip > ul > li {
font-weight: normal;
}
Copy link
Contributor Author

@jernestmyers jernestmyers Jul 31, 2023 •
edited
Loading

Choose a reason for hiding this comment

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

NOTE: I'm just glancing back over this and can't see why this would be necessary. Perhaps I'm misremembering something. If not, I'll remove when I address feedback!

UPDATE: Seems to be necessary, one way or another, to set font-weight: normal. Otherwise, all the content is bold. Will keep it as it is.


.VolcanoPlotTooltip > ul > li > span {
font-weight: bold;
}
43 changes: 40 additions & 3 deletions packages/libs/components/src/plots/VolcanoPlot.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -19,7 +19,10 @@ import {
Annotation,
AnnotationLineSubject,
AnnotationLabel,
} from '@visx/xychart';
Tooltip,
// } from '@visx/xychart';
} from '../../../../../../visx/packages/visx-xychart';
import findNearestDatumXY from '@visx/xychart/lib/utils/findNearestDatumXY';
import { Group } from '@visx/group';
import { max, min } from 'lodash';
import {
Expand All @@ -33,6 +36,7 @@ import Spinner from '../components/Spinner';
import { ToImgopts } from 'plotly.js';
import { DEFAULT_CONTAINER_HEIGHT } from './PlotlyPlot';
import domToImage from 'dom-to-image';
import './VolcanoPlot.css';

export interface VolcanoPlotProps {
/** Data for the plot. An array of VolcanoPlotDataPoints */
Expand Down Expand Up @@ -212,6 +216,7 @@ function VolcanoPlot(props: VolcanoPlotProps, ref: Ref<HTMLDivElement>) {
zero: false,
clamp: true, // do not render points that fall outside of the scale domain (outside of the axis range)
}}
findNearestDatumOverride={findNearestDatumXY}
>
{/* Set up the axes and grid lines. XYChart magically lays them out correctly */}
<Grid numTicks={6} lineStyle={gridStyles} />
Expand Down Expand Up @@ -295,9 +300,11 @@ function VolcanoPlot(props: VolcanoPlotProps, ref: Ref<HTMLDivElement>) {
<Group opacity={markerBodyOpacity ?? 1}>
<GlyphSeries
dataKey={'data'} // unique key
data={data} // data as an array of obejcts (points). Accessed with dataAccessors
data={[...data].sort(
(a, b) => Number(a.log2foldChange) - Number(b.log2foldChange)
)} // data as an array of obejcts (points). Accessed with dataAccessors
{...dataAccessors}
colorAccessor={(d) => {
colorAccessor={(d: VolcanoPlotDataPoint) => {
return assignSignificanceColor(
Number(d.log2foldChange),
Number(d.pValue),
Expand All @@ -306,8 +313,38 @@ function VolcanoPlot(props: VolcanoPlotProps, ref: Ref<HTMLDivElement>) {
significanceColors
);
}}
findNearestDatumOverride={findNearestDatumXY}
/>
</Group>
<Tooltip<VolcanoPlotDataPoint>
snapTooltipToDatumX
snapTooltipToDatumY
showVerticalCrosshair
showHorizontalCrosshair
renderTooltip={(d) => {
const data = d.tooltipData?.nearestDatum?.datum;
return (
<ul>
<li>
<span>Point ID:</span> {data?.pointID}
</li>
<li>
<span>log2 Fold Change:</span> {data?.log2foldChange}
</li>
<li>
<span>P Value:</span> {data?.pValue}
</li>
<li>
<span>Adjusted P Value:</span>{' '}
{data?.adjustedPValue ?? 'n/a'}
</li>
</ul>
);
}}
horizontalCrosshairStyle={{ stroke: 'red' }}
verticalCrosshairStyle={{ stroke: 'red' }}
className="VolcanoPlotTooltip"
/>
</XYChart>
{showSpinner && <Spinner />}
</div>
Expand Down