ILEX-102 Single term view - predicates graph view not connected to the data

src/components/GraphViewer/Graph.jsx

@@ -7,25 +7,20 @@ import { getGraphStructure , OBJECT, SUBJECT, PREDICATE, ROOT} from "./GraphStru
 const MARGIN = { top: 60, right: 60, bottom: 60, left: 60 };
 
 const Graph = ({ width, height, predicate }) => {
-  const boundsWidth = width - MARGIN.right - MARGIN.left;
+  const boundsWidth = width - (MARGIN.right + MARGIN.left * 4);
   const boundsHeight = height - MARGIN.top - MARGIN.bottom;
 
   // Three function that change the tooltip when user hover / move / leave a cell
-  // eslint-disable-next-line no-unused-vars
-  const mouseover = (d) => {
+  const mouseover = (event) => {
+    d3.select("#tooltip")
+      .html(event.currentTarget.id)
+      .style("opacity", 1)
     d3.select("#tooltip")
-      // eslint-disable-next-line no-unused-vars
-      .html((c) => {
-        return d.currentTarget.id
-      }).style("opacity", 1).style("left", (d.pageX) + "px").style("top", (d.pageY) + "px")
   }
-  // eslint-disable-next-line no-unused-vars
-  const mousemove = (event, d) => {
+  const mousemove = (event) => {
     d3.select("#tooltip")
-      // eslint-disable-next-line no-unused-vars
-      .html((c) => {
-        return event.currentTarget.id
-      }).style("opacity", 1).style("left", (event.pageX) + "px").style("top", (event.pageY) + "px")
+      .style("left", `${event.clientX + 10}px`)
+      .style("top", `${event.clientY + 10}px`);
   }
   // eslint-disable-next-line no-unused-vars
   const mouseleave = (d) => {
@@ -34,10 +29,21 @@ const Graph = ({ width, height, predicate }) => {
 
   useEffect(() => {
     // attach mouse listeners
-    d3.selectAll(".node--leaf-g")
+    const nodes = d3.selectAll(".node--leaf-g");
+    nodes
+      .on("mouseover", mouseover)
       .on("mousemove", mousemove)
-    d3.selectAll(".node--g")
-      .on("mouseleave", mouseleave)
+      .on("mouseleave", mouseleave);
+
+    // Hide tooltip on scroll
+    window.addEventListener("scroll", () => {
+      d3.select("#tooltip").style("opacity", 0);
+    });
+
+    return () => {
+      nodes.on("mouseover", null).on("mousemove", null).on("mouseleave", null);
+      window.removeEventListener("scroll", () => {});
+    };
   }, []);
 
   const hierarchy = useMemo(() => {
@@ -61,24 +67,26 @@ const Graph = ({ width, height, predicate }) => {
       textOffset = 40;
     }
 
+    const truncatedName = node.data.name.length > 25
+      ? `${node.data.name.substring(0, 25)}...`
+      : node.data.name;
+
     return (
       <g key={node.id} >
         {(
           <text
             x={(boundsWidth - (node.y) ) - textOffset }
             y={node.x - (node.data.type === ROOT ? 0 : 10)}
             id={node.data.name}
-            width={80}
-            height={20}
             className="node--leaf-g"
             fontSize={12}
             textAnchor="left"
             alignmentBaseline="middle"
             fill="black"
             target="_blank"
-            href="google.com"
+            href={node.data.name}
           >
-            {node.data.name }
+            {truncatedName}
           </text>
         )}
       </g>
@@ -119,7 +127,13 @@ const Graph = ({ width, height, predicate }) => {
 
   return (
     <Box id="div_template" >
-      <Box id="tooltip" style={{ position: "fixed", width: "200px", height: "200px" }}></Box>
+      <Box id="tooltip" style={{
+        position: "fixed",
+        pointerEvents: "none",
+        opacity: 0,
+        zIndex: 1000,
+      }}>
+      </Box>
       <svg width={width} height={height} >
         <defs>
           <marker

src/components/GraphViewer/GraphStructure.jsx

@@ -9,16 +9,16 @@ const getName = (nodeName) => {
   let name = nodeName
 
   if ( name == undefined ) {
-    name = nodeName;
+    return "name";
   }
 
-  return "name";
+  return name;
 }
 
 export const getGraphStructure = (pred) => {
   let data = {
-    name : pred.title,
-    id : pred.title,
+    name : pred?.tableData[0]?.subject,
+    id : pred?.tableData[0]?.subject,
     type : ROOT,
     value : pred.count,
     children : []
@@ -27,39 +27,30 @@ export const getGraphStructure = (pred) => {
   let uniqueObjects = [];
 
   pred?.tableData?.forEach( child => {
-    let newChild = { name : getName(child.subject), id : child.subject, type : SUBJECT};
+    let newChild = { name : getName(child.object), id : child.object, type : OBJECT};
 
     let getExistingObject = uniqueObjects?.find( c => c.id === child.object );
     if ( getExistingObject ) {
-      let getExistingPredicate = getExistingObject.children?.find( c => c.id === child.predicate );
+      let getExistingPredicate = data.children?.find( c => c.id === child.predicate );
       if ( getExistingPredicate ) {
         getExistingPredicate.children.push(newChild)
       }
     } else {
-      let newPredicate = {
-        name : getName(child.predicate),
-        id : child.predicate,
-        type : PREDICATE,
-        children : [newChild]
-      }
-
-      let newObject = {
-        name : getName(child.object),
-        id : child.object,
-        type : OBJECT,
-        children : [newPredicate]
+      let getExistingPredicate = data?.children?.find( c => c.id === child.predicate );
+      if ( getExistingPredicate ) {
+        getExistingPredicate.children.push(newChild)
+      } else {
+        let newPredicate = {
+          name : getName(child.predicate),
+          id : child.predicate,
+          type : PREDICATE,
+          children : [newChild]
+        }
+
+        data.children.push(newPredicate)
       }
-
-      uniqueObjects.push(newObject)
     }
   })
 
-  if ( uniqueObjects.length > 1 ) {
-    data.children = uniqueObjects;
-  } else {
-    data = uniqueObjects[0];
-    data.type = ROOT;
-  }
-
   return data;
 }

src/components/SingleTermView/OverView/CustomizedTable.jsx

@@ -256,7 +256,7 @@ const CustomizedTable = ({ data, term, isAddButtonVisible }) => {
   }, [objectSearchTerm, fetchTerms]);
 
   const tableWidth = 800;
-  const columnWidth = `${Math.round(tableWidth / tableHeader.length)}px`;
+  const columnWidth = "100%";
 
   return (
     <>

src/components/SingleTermView/OverView/Predicates.jsx

@@ -10,7 +10,7 @@ const { gray800 } = vars;
 
 const Predicates = ({ data, isGraphVisible }) => {
   const [predicates, setPredicates] = React.useState([]);
-  const [toggleButtonValue, setToggleButtonValue] = React.useState('compress')
+  const [toggleButtonValue, setToggleButtonValue] = React.useState('expand')
 
   const onToggleButtonChange = (event, newValue) => {
     if (newValue) {

src/components/SingleTermView/OverView/PredicatesAccordion.jsx

@@ -124,7 +124,7 @@ const PredicatesAccordion = ({ data, expandAllPredicates, isGraphVisible }) => {
               <CustomizedTable data={pred} term={term} isAddButtonVisible={isGraphVisible} />
             ) : (
               <Box display='flex' flexDirection='column'>
-                <Graph width={600} height={300} predicate={pred} />
+                <Graph width={800} height={400} predicate={pred} />
                 <Button
                   variant='outlined'
                   onClick={(e) => handleClickViewDiagram(e, pred)}