added tooltip in scatterplot

components/PCA_Plot.js

@@ -37,9 +37,9 @@ export default function PCAPlot() {
       )
     }
     return (
-      <div className="container">
+      <div className="main-container">
         <br></br>
-        {pcaData && <ScatterPlot data={pcaData} width={600} height={600} colorProperty={ligand.map((obj) => obj.pKi)}/>}
+        {pcaData && <ScatterPlot data={pcaData} width={600} height={600} colorProperty={ligand.map((obj) => obj.pKi)} hoverProp = {ligand.map((obj) => obj.canonical_smiles)}/>}
       </div>
     );
 }

components/ScatterPlot.js

@@ -1,7 +1,7 @@
-import { useMemo } from "react";
+import { useMemo, useState } from "react";
 import * as d3 from 'd3';
 import D3ColorLegend from './D3ColorLegend';
-
+import {Tooltip} from './ToolTip'
 // tick length
 const TICK_LENGTH = 20;
 
@@ -100,11 +100,13 @@ export const AxisLeft = ({ yScale, pixelsPerTick, width }) => {
 
 const MARGIN = { top: 60, right: 60, bottom: 60, left: 60 };
 
-export default function Scatterplot({ width, height, data, 
+export default function Scatterplot({ width, height, data, hoverProp,
   xAxisTitle = 'Principal Component 1', yAxisTitle = 'Principal Component 2',
   colorProperty = null }) {
   // Layout. The div size is set by the given props.
   // The bounds (=area inside the axis) is calculated by subtracting the margins
+  const [hovered, setHovered] = useState(null);
+
   const boundsWidth = width - MARGIN.right - MARGIN.left;
   const boundsHeight = height - MARGIN.top - MARGIN.bottom;
   const padding = 4;
@@ -123,7 +125,6 @@ export default function Scatterplot({ width, height, data,
 
   const colorScale = d3.scaleSequential().domain([1,10])
   .interpolator(d3.interpolateSinebow);
-    console.log(colorProperty)
   // Build the shapes
   const allShapes = data.map((d, i) => {
     return (
@@ -137,14 +138,22 @@ export default function Scatterplot({ width, height, data,
         fill={colorProperty == null ? "var(--accent-color)" : colorScale(colorProperty[i])}
         fillOpacity={0.2}
         strokeWidth={1}
+        onMouseEnter={() =>
+          setHovered({
+            xPos: xScale(d.x),
+            yPos: yScale(d.y),
+            name: hoverProp[i],
+          })
+        }
+        onMouseLeave={() => setHovered(null)}
       />
     );
   });
 
 
 
   return (
-    <div>
+    <div style={{ position: "relative" }} className="container">
       <D3ColorLegend />
       <svg width={width} height={height}>
 
@@ -187,7 +196,7 @@ export default function Scatterplot({ width, height, data,
           {allShapes}
         </g>
       </svg>
-
+      <Tooltip interactionData={hovered} />
     </div>
   );
 }

components/ToolTip.js

@@ -0,0 +1,44 @@
+import dynamic from "next/dynamic";
+const MoleculeStructure = dynamic(
+  () => import("./MoleculeStructure"),
+  { ssr: false }
+);
+
+export const Tooltip = ({ interactionData }) => {  
+  if (!interactionData) {
+    return null;
+  }
+
+  return (
+    <div style={{ left: Math.log10(interactionData.xPos), bottom: interactionData.yPos, position: "relative" }} className="tooltip">
+      <MoleculeStructure
+      structure={interactionData.name}
+      id="smiles"
+    />
+      <style>{`
+      .tooltip {
+        position: absolute;
+        background-color: rgba(0, 0, 0, 0.8);
+        border-radius: 4px;
+        color: white;
+        font-size: 12px;
+        padding: 4px;
+        margin-left: 15px;
+        transform: translateY(-50%);
+    }
+    
+    /* Add an arrow */
+    .tooltip:after {
+        content: "";
+        position:absolute;
+        border-width: 5px;  /* Arrow width */
+        left: -10px;  /* Arrow width * 2 */
+        top:50%;
+        transform:translateY(-50%);
+        border-color: transparent black transparent transparent;
+    }
+    
+      `}</style>
+    </div>
+  );
+};

components/tSNE_Plot.js

@@ -44,7 +44,7 @@ export default function TSNEPlot() {
   }
   return (
     <div className="container">
-      <ScatterPlot data={tsneData} width={600} height={600} colorProperty={ligand.map((obj) => obj.pKi)}/>
+      <ScatterPlot data={tsneData} width={600} height={600} colorProperty={ligand.map((obj) => obj.pKi)} hoverProp = {ligand.map((obj) => obj.canonical_smiles)}/>
     </div>
   )
 }