Fix flickering in journey nodes.

This commit is contained in:
Mike Cao 2024-06-14 20:49:29 -07:00
parent 2204ffa9c3
commit 21ff3d1280
2 changed files with 57 additions and 50 deletions

View file

@ -71,10 +71,13 @@
position: relative; position: relative;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
gap: 10px;
height: 100%; height: 100%;
} }
.wrapper {
padding-bottom: 10px;
}
.item { .item {
position: relative; position: relative;
cursor: pointer; cursor: pointer;

View file

@ -188,13 +188,16 @@ export default function JourneyView() {
return ( return (
<div <div
key={name} key={name}
className={styles.wrapper}
onMouseEnter={() => selected && setActiveNode({ name, columnIndex, paths })}
onMouseLeave={() => selected && setActiveNode(null)}
>
<div
className={classNames(styles.item, { className={classNames(styles.item, {
[styles.selected]: selected, [styles.selected]: selected,
[styles.active]: active, [styles.active]: active,
})} })}
onClick={() => handleClick(name, columnIndex, paths)} onClick={() => handleClick(name, columnIndex, paths)}
onMouseEnter={() => selected && setActiveNode({ name, columnIndex, paths })}
onMouseLeave={() => selected && setActiveNode(null)}
> >
<div className={styles.name}>{name}</div> <div className={styles.name}>{name}</div>
<TooltipPopup label={dropOffPercent} disabled={!selected}> <TooltipPopup label={dropOffPercent} disabled={!selected}>
@ -242,6 +245,7 @@ export default function JourneyView() {
); );
})} })}
</div> </div>
</div>
); );
}, },
)} )}