watson/umami
1
0
Fork 0
mirror of https://github.com/umami-software/umami.git synced 2026-02-10 23:57:12 +01:00
Code Issues Projects Releases Packages Wiki Activity Actions 4

Fix flickering in journey nodes.

Browse source
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
Download patch file Download diff file Expand all files Collapse all files

5
src/app/(main)/reports/journey/JourneyView.module.css
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;

102
src/app/(main)/reports/journey/JourneyView.tsx
View file

@ -188,59 +188,63 @@ export default function JourneyView() {
return ( return (
<div <div
key={name} key={name}
className={classNames(styles.item, { className={styles.wrapper}
[styles.selected]: selected,
[styles.active]: active,
})}
onClick={() => handleClick(name, columnIndex, paths)}
onMouseEnter={() => selected && setActiveNode({ name, columnIndex, paths })} onMouseEnter={() => selected && setActiveNode({ name, columnIndex, paths })}
onMouseLeave={() => selected && setActiveNode(null)} onMouseLeave={() => selected && setActiveNode(null)}
> >
<div className={styles.name}>{name}</div> <div
<TooltipPopup label={dropOffPercent} disabled={!selected}> className={classNames(styles.item, {
<div className={styles.count}> [styles.selected]: selected,
{selected ? (active ? activeCount : selectedCount) : totalCount} [styles.active]: active,
</div>
</TooltipPopup>
{columnIndex < columns.length &&
lines.map(([fromIndex, nodeIndex], i) => {
const height =
(Math.abs(nodeIndex - fromIndex) + 1) * (NODE_HEIGHT + NODE_GAP) -
NODE_GAP;
const midHeight =
(Math.abs(nodeIndex - fromIndex) - 1) * (NODE_HEIGHT + NODE_GAP) +
NODE_GAP +
LINE_WIDTH;
const nodeName = columns[columnIndex - 1]?.nodes[fromIndex].name;
return (
<div
key={`${fromIndex}${nodeIndex}${i}`}
className={classNames(styles.line, {
[styles.active]:
active &&
activeNode?.paths.find(
path =>
path.items[columnIndex] === name &&
path.items[columnIndex - 1] === nodeName,
),
[styles.up]: fromIndex < nodeIndex,
[styles.down]: fromIndex > nodeIndex,
[styles.flat]: fromIndex === nodeIndex,
})}
style={{ height }}
>
<div className={classNames(styles.segment, styles.start)} />
<div
className={classNames(styles.segment, styles.mid)}
style={{
height: midHeight,
}}
/>
<div className={classNames(styles.segment, styles.end)} />
</div>
);
})} })}
onClick={() => handleClick(name, columnIndex, paths)}
>
<div className={styles.name}>{name}</div>
<TooltipPopup label={dropOffPercent} disabled={!selected}>
<div className={styles.count}>
{selected ? (active ? activeCount : selectedCount) : totalCount}
</div>
</TooltipPopup>
{columnIndex < columns.length &&
lines.map(([fromIndex, nodeIndex], i) => {
const height =
(Math.abs(nodeIndex - fromIndex) + 1) * (NODE_HEIGHT + NODE_GAP) -
NODE_GAP;
const midHeight =
(Math.abs(nodeIndex - fromIndex) - 1) * (NODE_HEIGHT + NODE_GAP) +
NODE_GAP +
LINE_WIDTH;
const nodeName = columns[columnIndex - 1]?.nodes[fromIndex].name;
return (
<div
key={`${fromIndex}${nodeIndex}${i}`}
className={classNames(styles.line, {
[styles.active]:
active &&
activeNode?.paths.find(
path =>
path.items[columnIndex] === name &&
path.items[columnIndex - 1] === nodeName,
),
[styles.up]: fromIndex < nodeIndex,
[styles.down]: fromIndex > nodeIndex,
[styles.flat]: fromIndex === nodeIndex,
})}
style={{ height }}
>
<div className={classNames(styles.segment, styles.start)} />
<div
className={classNames(styles.segment, styles.mid)}
style={{
height: midHeight,
}}
/>
<div className={classNames(styles.segment, styles.end)} />
</div>
);
})}
</div>
</div> </div>
); );
}, },