From 7ecd7bb3d31b8655f3637d4d6988298712376606 Mon Sep 17 00:00:00 2001 From: Aiga115 Date: Wed, 23 Apr 2025 12:42:33 +0200 Subject: [PATCH 1/4] ILEX-102 fix graph connection to the data --- src/components/GraphViewer/Graph.jsx | 52 ++++++++++++------- src/components/GraphViewer/GraphStructure.jsx | 5 +- .../SingleTermView/OverView/Predicates.jsx | 2 +- 3 files changed, 38 insertions(+), 21 deletions(-) diff --git a/src/components/GraphViewer/Graph.jsx b/src/components/GraphViewer/Graph.jsx index 2457a02f..4019c7eb 100644 --- a/src/components/GraphViewer/Graph.jsx +++ b/src/components/GraphViewer/Graph.jsx @@ -12,20 +12,17 @@ const Graph = ({ width, height, predicate }) => { // 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") - // 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") + .html(event.currentTarget.id) + .style("opacity", 1) + d3.select("#tooltip").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 +31,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,6 +69,10 @@ const Graph = ({ width, height, predicate }) => { textOffset = 40; } + const truncatedName = node.data.name.length > 20 + ? `${node.data.name.substring(0, 20)}...` + : node.data.name; + return ( {( @@ -68,17 +80,15 @@ const Graph = ({ width, height, predicate }) => { 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} )} @@ -119,7 +129,13 @@ const Graph = ({ width, height, predicate }) => { return ( - + + { let name = nodeName if ( name == undefined ) { - name = nodeName; + return "name"; } - return "name"; + return name; } export const getGraphStructure = (pred) => { @@ -54,6 +54,7 @@ export const getGraphStructure = (pred) => { } }) + if ( uniqueObjects.length > 1 ) { data.children = uniqueObjects; } else { diff --git a/src/components/SingleTermView/OverView/Predicates.jsx b/src/components/SingleTermView/OverView/Predicates.jsx index c26e4764..4f8720a6 100644 --- a/src/components/SingleTermView/OverView/Predicates.jsx +++ b/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) { From 8ac2b3bd7c57b2d90e0a3ea9a8cb01bd0a90cf59 Mon Sep 17 00:00:00 2001 From: Aiga115 Date: Wed, 23 Apr 2025 12:48:20 +0200 Subject: [PATCH 2/4] ILEX-102 fix linting --- src/components/GraphViewer/Graph.jsx | 4 +--- 1 file changed, 1 insertion(+), 3 deletions(-) diff --git a/src/components/GraphViewer/Graph.jsx b/src/components/GraphViewer/Graph.jsx index 4019c7eb..407b83a8 100644 --- a/src/components/GraphViewer/Graph.jsx +++ b/src/components/GraphViewer/Graph.jsx @@ -11,14 +11,12 @@ const Graph = ({ width, height, predicate }) => { 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 = (event) => { d3.select("#tooltip") .html(event.currentTarget.id) .style("opacity", 1) - d3.select("#tooltip").style("left", (d.pageX) + "px").style("top", (d.pageY) + "px") + d3.select("#tooltip") } - // eslint-disable-next-line no-unused-vars const mousemove = (event) => { d3.select("#tooltip") .style("left", `${event.clientX + 10}px`) From be253aba4e3bad3774bbf1945856e5420261032a Mon Sep 17 00:00:00 2001 From: ddelpiano Date: Wed, 23 Apr 2025 15:22:51 +0200 Subject: [PATCH 3/4] graph fixes --- src/components/GraphViewer/Graph.jsx | 6 +-- src/components/GraphViewer/GraphStructure.jsx | 40 +++++++------------ 2 files changed, 18 insertions(+), 28 deletions(-) diff --git a/src/components/GraphViewer/Graph.jsx b/src/components/GraphViewer/Graph.jsx index 407b83a8..8b44ddf3 100644 --- a/src/components/GraphViewer/Graph.jsx +++ b/src/components/GraphViewer/Graph.jsx @@ -67,8 +67,8 @@ const Graph = ({ width, height, predicate }) => { textOffset = 40; } - const truncatedName = node.data.name.length > 20 - ? `${node.data.name.substring(0, 20)}...` + const truncatedName = node.data.name.length > 20 + ? `${node.data.name.substring(0, 20)}...` : node.data.name; return ( @@ -128,7 +128,7 @@ const Graph = ({ width, height, predicate }) => { return ( { 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,7 +27,7 @@ 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 ) { @@ -36,31 +36,21 @@ export const getGraphStructure = (pred) => { 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 = getExistingObject?.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; } From 7239e78950aa663016d59393b4b6116cb555f761 Mon Sep 17 00:00:00 2001 From: ddelpiano Date: Wed, 23 Apr 2025 15:37:08 +0200 Subject: [PATCH 4/4] styling improvements --- src/components/GraphViewer/Graph.jsx | 6 +++--- src/components/GraphViewer/GraphStructure.jsx | 4 ++-- src/components/SingleTermView/OverView/CustomizedTable.jsx | 2 +- .../SingleTermView/OverView/PredicatesAccordion.jsx | 2 +- 4 files changed, 7 insertions(+), 7 deletions(-) diff --git a/src/components/GraphViewer/Graph.jsx b/src/components/GraphViewer/Graph.jsx index 8b44ddf3..295a2838 100644 --- a/src/components/GraphViewer/Graph.jsx +++ b/src/components/GraphViewer/Graph.jsx @@ -7,7 +7,7 @@ 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 @@ -67,8 +67,8 @@ const Graph = ({ width, height, predicate }) => { textOffset = 40; } - const truncatedName = node.data.name.length > 20 - ? `${node.data.name.substring(0, 20)}...` + const truncatedName = node.data.name.length > 25 + ? `${node.data.name.substring(0, 25)}...` : node.data.name; return ( diff --git a/src/components/GraphViewer/GraphStructure.jsx b/src/components/GraphViewer/GraphStructure.jsx index d0917068..bef5f554 100644 --- a/src/components/GraphViewer/GraphStructure.jsx +++ b/src/components/GraphViewer/GraphStructure.jsx @@ -31,12 +31,12 @@ export const getGraphStructure = (pred) => { 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 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 { diff --git a/src/components/SingleTermView/OverView/CustomizedTable.jsx b/src/components/SingleTermView/OverView/CustomizedTable.jsx index cc3a819f..0a56004b 100644 --- a/src/components/SingleTermView/OverView/CustomizedTable.jsx +++ b/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 ( <> diff --git a/src/components/SingleTermView/OverView/PredicatesAccordion.jsx b/src/components/SingleTermView/OverView/PredicatesAccordion.jsx index c6dcb548..4a89081c 100644 --- a/src/components/SingleTermView/OverView/PredicatesAccordion.jsx +++ b/src/components/SingleTermView/OverView/PredicatesAccordion.jsx @@ -124,7 +124,7 @@ const PredicatesAccordion = ({ data, expandAllPredicates, isGraphVisible }) => { ) : ( - +