Skip to content

Commit

Permalink
Add tooltips to pack layout (#217)
Browse files Browse the repository at this point in the history
* Pack layout (#30)

* Experiment with a proper pack layout instead of the scatterplot

* Replace clade selector with static caption

* Replace slider with "go up" buttons

* Formatting tweaks - footer

* ts ignore

* Set min size for epi curve

* Swap in the pack layout for the scatterplot

* Remove unrooted tree view for now

* More footer tweaks

* Remove incongruous location colorby in epi curve

* footer

* Color and shape per samples of interest and distance from mrca

* cleanup

* Add a legend

* Update banner

* Update main page footer

* Logo links to landing page

* remove feedback soliciation

* update little footer

* update tooltip

* alignment

* Update issue templates

* Update banner

* Update main page footer

* Logo links to landing page

* remove feedback soliciation

* update little footer

* update tooltip

* alignment

* add tooltips
  • Loading branch information
sidneymbell authored Nov 7, 2024
1 parent 6eaeab2 commit f4f7583
Showing 1 changed file with 49 additions and 3 deletions.
52 changes: 49 additions & 3 deletions src/components/viz/cladeSelection/packLayout.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -23,6 +23,14 @@ const PackLayout = ({ width, height, margin }: PackLayoutProps) => {
const [hoveredSample, setHoveredSample] =
useState<HierarchyCircularNode<Node> | null>(null);

const handleMouseEnter = (node: HierarchyCircularNode<Node>) => {
setHoveredSample(node);
};

const handleMouseLeave = () => {
setHoveredSample(null);
};

const checkIfSampleOfInterest = (sample: HierarchyCircularNode<Node>) => {
return state.samplesOfInterestNames.includes(sample.data.name);
};
Expand Down Expand Up @@ -137,13 +145,51 @@ const PackLayout = ({ width, height, margin }: PackLayoutProps) => {
{(packData) => {
const samples = packData.descendants().slice(1); // skip outer hierarchies
return (
//@ts-expect-error Type 'HierarchyCircularNode<Node>' is missing the following properties from type 'HierarchyCircularNode<Node>': find, [Symbol.iterator]
<Group>{samples.map((sample, i) => plotSample(sample))}</Group>
<Group>
{samples.map((sample, i) => (
<g
key={i}
onMouseEnter={() =>
handleMouseEnter(sample as HierarchyCircularNode<Node>)
}
onMouseLeave={handleMouseLeave}
>
{plotSample(sample as HierarchyCircularNode<Node>)}
</g>
))}
{hoveredSample && (
<g>
<rect
x={hoveredSample.x - 6}
y={hoveredSample.y - 15}
width={hoveredSample.data.name.length * 10}
height="20"
fill="white"
opacity={0.8}
rx="4"
ry="4"
style={{ pointerEvents: "none" }}
/>
<text
y={hoveredSample.y}
x={hoveredSample.x}
style={{
fontSize: 14,
fontWeight: "bold",
pointerEvents: "none",
fill: "black",
}}
>
{hoveredSample.data.name}
</text>
</g>
)}
</Group>
);
}}
</Pack>

<CladeSelectionVizLegend smallWindow={height < 350} />
{/* {hoveredSample && <PackLayoutTooltip hoveredSample={hoveredSample} />} */}
</svg>
);
};
Expand Down

0 comments on commit f4f7583

Please sign in to comment.