tooltip

weng-lab · Jul 30, 2024 · 8be620a · 8be620a
1 parent 05580cd
commit 8be620a
Show file tree

Hide file tree

Showing 2 changed files with 67 additions and 7 deletions.
diff --git a/src/components/Graph/Graph.tsx b/src/components/Graph/Graph.tsx
@@ -130,11 +130,13 @@ const Graph: React.FC<GraphProps> = ({
       return;
     }
 
-    const containerRect = containerRef.current.getBoundingClientRect();
+    // const containerRect = containerRef.current.getBoundingClientRect();
     const coords = {
-      x: event.renderedPosition.x + containerRect.left,
-      y: event.renderedPosition.y + containerRect.top,
+      x: event.originalEvent.clientX,
+      y: event.originalEvent.clientY,
     };
+    console.log(coords);
+    console.log(event);
 
     showTooltip({
       tooltipLeft: coords.x,
@@ -339,15 +341,15 @@ const Graph: React.FC<GraphProps> = ({
       let ID = allcCREs[idx].toString();
       let s = simple[idx].toString();
       if (data.centered && ID === data.centered.id) {
-        node.on('mousemove', (event) =>
+        node.on('mouseover', (event) =>
           handleMouseMove(event, {
             id: ID,
             type: s,
             centered: 'Centered Node',
           })
         );
       } else {
-        node.on('mousemove', (event) =>
+        node.on('mouseover', (event) =>
           handleMouseMove(event, {
             id: ID,
             type: s,
@@ -360,7 +362,7 @@ const Graph: React.FC<GraphProps> = ({
 
     cy.edges().forEach((edge: EdgeSingular) => {
       if (data.edge.every((e) => e.category)) {
-        edge.on('mousemove', (event) =>
+        edge.on('mouseover', (event) =>
           handleMouseMove(event, {
             type:
               edge.style('line-color').toString() === 'rgb(0,0,0)'
@@ -369,7 +371,7 @@ const Graph: React.FC<GraphProps> = ({
           })
         );
       } else {
-        edge.on('mousemove', (event) =>
+        edge.on('mouseover', (event) =>
           handleMouseMove(event, {
             type: 'Edge',
           })

diff --git a/stories/Graph.stories.tsx b/stories/Graph.stories.tsx
@@ -163,6 +163,64 @@ PilotDataWithCentered.args = {
   ],
 };
 
+export const X = () => {
+  return (
+    <>
+      <h1>Graph</h1>
+      <h1>Graph</h1>
+      <h1>Graph</h1>
+      <div style={{ margin: '20px', display: 'flex', alignItems: 'center' }}>
+        <h1>Graph</h1>
+        <div
+          style={{
+            marginRight: '50px',
+            backgroundColor: 'purple',
+            padding: '10px',
+          }}
+        >
+          <h2>Left</h2>
+          <p>graph</p>
+        </div>
+        <div>
+          <Graph
+            data={data.data}
+            title="cCRE Impact With Pilot Data With Centered cCRE"
+            id="h"
+            getColor={setColor}
+            legendToggle={convertToSimple}
+            legendNodeLabel="cCRE Type"
+            order={[
+              'PLS',
+              'pELS',
+              'dELS',
+              'CA-H3K4me3',
+              'CA-CTCF',
+              'CA-TF',
+              'CA-only',
+              'TF',
+              'Low DNase',
+            ]}
+          />
+        </div>
+
+        <div
+          style={{
+            marginLeft: '50px',
+            backgroundColor: 'purple',
+            padding: '10px',
+          }}
+        >
+          <h2>Right</h2>
+          <p>graph</p>
+        </div>
+      </div>
+      <h1>Graph</h1>
+      <h1>Graph</h1>
+      <h1>Graph</h1>
+    </>
+  );
+};
+
 export const FiftyPercent = Template.bind({});
 FiftyPercent.args = {
   data: data.data,