add node attributes popover on answer explorer graph

RobokopU24 · Jun 30, 2023 · 412cda7 · 412cda7
1 parent e4f15dc
commit 412cda7
Show file tree

Hide file tree

Showing 2 changed files with 65 additions and 17 deletions.
diff --git a/src/pages/answer/kgBubble/NodeAttributesTable.jsx b/src/pages/answer/kgBubble/NodeAttributesTable.jsx
@@ -5,8 +5,15 @@ import {
   TableBody,
   TableCell,
   TableRow,
+  styled,
 } from '@material-ui/core';
 
+const StyledTableBody = styled(TableBody)(() => ({
+  '& .MuiTableRow-root:last-of-type .MuiTableCell-root': {
+    borderBottom: 'none',
+  },
+}));
+
 const ValueCell = ({ value }) => (
   <TableCell>
     <ul style={{ padding: 0, margin: 0, listStyleType: 'none' }}>
@@ -29,7 +36,7 @@ const NodeAttributesTable = ({ nodeData }) => {
   return (
     <Box style={{ maxHeight: 500, overflow: 'auto' }}>
       <Table size="small" aria-label="node attributes table">
-        <TableBody>
+        <StyledTableBody>
           {Boolean(name) && (
             <TableRow style={{ verticalAlign: 'top' }}>
               <TableCell>
@@ -65,7 +72,7 @@ const NodeAttributesTable = ({ nodeData }) => {
               <ValueCell value={count} />
             </TableRow>
           )}
-        </TableBody>
+        </StyledTableBody>
       </Table>
     </Box>
   );

diff --git a/src/pages/answer/resultsTable/ResultExplorer.jsx b/src/pages/answer/resultsTable/ResultExplorer.jsx
@@ -16,6 +16,7 @@ import useDebounce from '~/stores/useDebounce';
 import ResultMetaData from './ResultMetaData';
 import AttributesTable from './AttributesTable';
 import Popover from '~/components/Popover';
+import NodeAttributesTable from '../kgBubble/NodeAttributesTable';
 
 const nodeRadius = 40;
 
@@ -34,10 +35,11 @@ export default function ResultExplorer({ answerStore }) {
   const { colorMap } = useContext(BiolinkContext);
   const [numTrimmedNodes, setNumTrimmedNodes] = useState(answerStore.numQgNodes);
   const debouncedTrimmedNodes = useDebounce(numTrimmedNodes, 500);
-  const [mouseX, setMouseX] = useState(0);
-  const [mouseY, setMouseY] = useState(0);
-  const [attributesPopoverOpen, setAttributesPopoverOpen] = useState(false);
-  const [currentEdgeAttributes, setCurrentEdgeAttributes] = useState({});
+  const [popoverPosition, setPopoverPosition] = useState({ x: 0, y: 0 });
+  // const [attributesPopoverOpen, setAttributesPopoverOpen] = useState(false);
+  // const [currentEdgeAttributes, setCurrentEdgeAttributes] = useState({});
+  const [popoverOpen, setPopoverOpen] = useState(false);
+  const [popoverData, setPopoverData] = useState({});
 
   /**
    * Initialize svg object
@@ -178,7 +180,24 @@ export default function ResultExplorer({ answerStore }) {
               .attr('r', nodeRadius)
               .attr('fill', (d) => colorMap(d.categories)[1])
               .call((nCircle) => nCircle.append('title')
-                .text((d) => d.name)))
+                .text((d) => d.name))
+              .style('transition', 'stroke-width 200ms ease-in-out, stroke 200ms ease-in-out, filter 200ms ease-in-out')
+              .style('cursor', 'pointer')
+              .on('mouseover', function () {
+                d3.select(this)
+                  .attr('stroke', '#239cff')
+                  .style('filter', 'brightness(1.1)')
+                  .attr('stroke-width', 3);
+                })
+                .on('mouseout', function () {
+                  d3.select(this)
+                  .attr('stroke', 'none')
+                  .style('filter', 'initial')
+                  .attr('stroke-width', 0);
+              })
+              .on('click', function () {
+                handleClickNode(d3.select(this).datum());
+              }))
             .call((n) => n.append('text')
               .attr('class', 'result_node_label')
               .style('pointer-events', 'none')
@@ -234,8 +253,8 @@ export default function ResultExplorer({ answerStore }) {
             .style('cursor', 'pointer')
             .on('mouseover', function () {
               d3.select(this)
-                .attr('fill', '#008cff')
-                .attr('stroke', '#008cff');
+                .attr('fill', '#239cff')
+                .attr('stroke', '#239cff');
             })
             .on('mouseout', function () {
               d3.select(this)
@@ -295,11 +314,24 @@ export default function ResultExplorer({ answerStore }) {
   }
 
   const handleClickEdge = (event, attributes) => {
-    setMouseX(event.clientX);
-    setMouseY(event.clientY);
+    setPopoverPosition({ x: event.clientX, y: event.clientY });
 
-    setCurrentEdgeAttributes(attributes);
-    setAttributesPopoverOpen(true);
+    setPopoverData(attributes);
+    setPopoverOpen('edge');
+  };
+
+  const handleClickNode = (data) => {
+    const { top, left } = svgRef.current.getBoundingClientRect();
+    setPopoverPosition({
+      x: left + data.x,
+      y: top + data.y,
+    });
+    setPopoverData({
+      name: data.name,
+      id: data.id,
+      categories: data.categories,
+    });
+    setPopoverOpen('node');
   };
 
   useEffect(() => {
@@ -341,12 +373,21 @@ export default function ResultExplorer({ answerStore }) {
       )}
 
       <Popover
-        open={attributesPopoverOpen}
-        onClose={() => setAttributesPopoverOpen(false)}
-        anchorPosition={{ top: mouseY, left: mouseX }}
+        open={popoverOpen === 'edge'}
+        onClose={() => setPopoverOpen(null)}
+        anchorPosition={{ top: popoverPosition.y, left: popoverPosition.x }}
+        above
+      >
+        <AttributesTable attributes={popoverData} />
+      </Popover>
+
+      <Popover
+        open={popoverOpen === 'node'}
+        onClose={() => setPopoverOpen(null)}
+        anchorPosition={{ top: popoverPosition.y, left: popoverPosition.x }}
         above
       >
-        <AttributesTable attributes={currentEdgeAttributes} />
+        <NodeAttributesTable nodeData={popoverData} />
       </Popover>
     </Paper>
   );