From 9da3c4199c76211da7837cf524a75196353bfe8c Mon Sep 17 00:00:00 2001
From: Leonardo <leomilho@gmail.com>
Date: Tue, 14 May 2024 20:54:14 +0200
Subject: [PATCH] fix(tablevis): tooltip flicker
---
libs/shared/lib/components/tooltip/index.tsx | 5 +++-
.../nodelinkvis/components/NLPixi.tsx | 25 +++++++++++--------
.../nodelinkvis/components/NLPopup.tsx | 2 +-
.../nodelinkvis/nodelinkvis.tsx | 3 ++-
4 files changed, 22 insertions(+), 13 deletions(-)
diff --git a/libs/shared/lib/components/tooltip/index.tsx b/libs/shared/lib/components/tooltip/index.tsx
index 1234d0eae..6c5a62d35 100644
--- a/libs/shared/lib/components/tooltip/index.tsx
+++ b/libs/shared/lib/components/tooltip/index.tsx
@@ -11,7 +11,10 @@ export interface BarTooltipProps {
export const BarPlotTooltip = ({ x, y, children }: BarTooltipProps) => {
return (
- <div className="absolute font-sans bg-light border border-secondary text-secondary p-2" style={{ left: `${x}px`, top: `${y}px` }}>
+ <div
+ className="absolute font-sans bg-light border border-secondary text-secondary p-2 pointer-events-none"
+ style={{ left: `${x}px`, top: `${y}px` }}
+ >
{children}
</div>
);
diff --git a/libs/shared/lib/vis/visualizations/nodelinkvis/components/NLPixi.tsx b/libs/shared/lib/vis/visualizations/nodelinkvis/components/NLPixi.tsx
index 4bc162f30..257e6c3e5 100644
--- a/libs/shared/lib/vis/visualizations/nodelinkvis/components/NLPixi.tsx
+++ b/libs/shared/lib/vis/visualizations/nodelinkvis/components/NLPixi.tsx
@@ -20,6 +20,7 @@ type Props = {
highlightedLinks?: LinkType[];
graph?: GraphType;
layoutAlgorithm: string;
+ showPopupsOnHover: boolean;
};
type LayoutState = 'reset' | 'running' | 'paused';
@@ -32,15 +33,19 @@ export const NLPixi = (props: Props) => {
const [quickPopup, setQuickPopup] = useState<{ node: NodeType; pos: IPointData } | undefined>();
const [popups, setPopups] = useState<{ node: NodeType; pos: IPointData }[]>([]);
- const app = useMemo(()=>new Application({
- background: 0xffffff,
- antialias: true,
- autoDensity: true,
- eventMode: 'auto',
- resolution: window.devicePixelRatio || 1,
- }), []);
- const nodeLayer = useMemo(()=>new Container(), []);
- const linkLayer = useMemo(()=>new Container(), []);
+ const app = useMemo(
+ () =>
+ new Application({
+ background: 0xffffff,
+ antialias: true,
+ autoDensity: true,
+ eventMode: 'auto',
+ resolution: window.devicePixelRatio || 1,
+ }),
+ [],
+ );
+ const nodeLayer = useMemo(() => new Container(), []);
+ const linkLayer = useMemo(() => new Container(), []);
const nodeMap = useRef(new Map<string, Graphics>());
const linkMap = useRef(new Map<string, Graphics>());
@@ -620,7 +625,7 @@ export const NLPixi = (props: Props) => {
return (
<>
{mouseInCanvas.current && popups.map((popup) => <NLPopup onClose={() => {}} data={popup} key={popup.node._id} />)}
- {quickPopup && <NLPopup onClose={() => {}} data={quickPopup} />}
+ {props.showPopupsOnHover && quickPopup && <NLPopup onClose={() => {}} data={quickPopup} />}
<div
className="h-full w-full overflow-hidden"
ref={ref}
diff --git a/libs/shared/lib/vis/visualizations/nodelinkvis/components/NLPopup.tsx b/libs/shared/lib/vis/visualizations/nodelinkvis/components/NLPopup.tsx
index 679486e82..2ff3cd5f6 100644
--- a/libs/shared/lib/vis/visualizations/nodelinkvis/components/NLPopup.tsx
+++ b/libs/shared/lib/vis/visualizations/nodelinkvis/components/NLPopup.tsx
@@ -11,7 +11,7 @@ export const NLPopup = (props: NodelinkPopupProps) => {
return (
<div
- className="absolute card card-bordered z-50 bg-light rounded-none text-[0.9rem] min-w-[10rem]"
+ className="absolute card card-bordered z-50 bg-light rounded-none text-[0.9rem] min-w-[10rem] pointer-events-none"
// style={{ top: props.data.pos.y + 10, left: props.data.pos.x + 10 }}
style={{ transform: 'translate(' + (props.data.pos.x + 20) + 'px, ' + (props.data.pos.y + 10) + 'px)' }}
>
diff --git a/libs/shared/lib/vis/visualizations/nodelinkvis/nodelinkvis.tsx b/libs/shared/lib/vis/visualizations/nodelinkvis/nodelinkvis.tsx
index 0da30d6a1..2bdf3c3c6 100644
--- a/libs/shared/lib/vis/visualizations/nodelinkvis/nodelinkvis.tsx
+++ b/libs/shared/lib/vis/visualizations/nodelinkvis/nodelinkvis.tsx
@@ -33,7 +33,7 @@ export interface NodelinkVisProps {
const configuration: NodelinkVisProps = {
layout: Layouts.FORCEATLAS2WEBWORKER as string,
- showPopUpOnHover: true,
+ showPopUpOnHover: false,
shapes: {
similar: true,
shape: 'circle',
@@ -111,6 +111,7 @@ export const NodeLinkVis = React.memo(({ data, ml, dispatch, configuration, hand
onClickedNode(event, ml);
}}
layoutAlgorithm={configuration.layout}
+ showPopupsOnHover={configuration.showPopUpOnHover}
/>
);
});
--
GitLab