fix

dbcls · Mar 17, 2022 · ad87b25 · ad87b25
1 parent 01dbc30
commit ad87b25
Show file tree

Hide file tree

Showing 2 changed files with 52 additions and 28 deletions.
diff --git a/node/src/ts/visualizer/components/ClassStructure.tsx b/node/src/ts/visualizer/components/ClassStructure.tsx
@@ -1,6 +1,6 @@
 import _ from 'lodash'
 import React, { useRef } from 'react'
-import { useIntl } from 'react-intl'
+import { IntlShape, useIntl } from 'react-intl'
 import { useContextMenu } from 'react-contexify'
 import { useDispatch, useSelector } from 'react-redux'
 import { DetailAction } from '../actions/detail'
@@ -116,6 +116,30 @@ function getNodeSet(nodes: NodeType[]) {
   }, {})
 }
 
+function makeArrowMouseover(
+  intl: IntlShape,
+  getUris: (d: NodeType) => string[]
+) {
+  return (event?: React.MouseEvent<SVGGElement, MouseEvent>, d?: NodeType) => {
+    if (!event || !d) return
+
+    const targetElement = event.currentTarget
+    const x = Number(targetElement.getAttribute('cx')) + 10
+    const y = Number(targetElement.getAttribute('cy')) + 10
+
+    const predicateMessage = intl.formatMessage({
+      id: 'classStructure.text.predicate',
+    })
+    GraphRepository.addPopup(x, y, getUris(d), predicateMessage)
+
+    GraphRepository.updatePosition()
+  }
+}
+
+function arrowMouseout() {
+  GraphRepository.removePopup()
+}
+
 type ClassStructureProps = {
   classes: Classes
   circleDiameter: number | null
@@ -312,28 +336,9 @@ const ClassStructure: React.FC<ClassStructureProps> = (props) => {
         return [...rhsProps, ...lhsProps]
       }
 
-      function arrowMouseover(
-        event?: React.MouseEvent<SVGGElement, MouseEvent>,
-        d?: NodeType
-      ) {
-        if (!event || !d) return
-
-        const targetElement = event.currentTarget
-        const x = Number(targetElement.getAttribute('cx')) + 10
-        const y = Number(targetElement.getAttribute('cy')) + 10
-        const predicates = getPredicates(d)
-        const predicateMessage = intl.formatMessage({
-          id: 'classStructure.text.predicate',
-        })
-        GraphRepository.addPopup(x, y, predicates, predicateMessage)
-
-        GraphRepository.updatePosition()
-      }
-
-      const arrowMouseout = () => {
-        GraphRepository.removePopup()
-      }
-
+      const arrowMouseover = makeArrowMouseover(intl, (d) => {
+        return getPredicates(d)
+      })
       const arrowRightClick = (
         event?: React.MouseEvent<SVGGElement, MouseEvent>,
         d?: NodeType
@@ -364,7 +369,9 @@ const ClassStructure: React.FC<ClassStructureProps> = (props) => {
       }
 
       GraphRepository.addArrowLineEvent(
-        arrowMouseover,
+        makeArrowMouseover(intl, (d) => {
+          return getPredicates(d)
+        }),
         arrowMouseout,
         arrowRightClick
       )
@@ -491,14 +498,20 @@ const ClassStructure: React.FC<ClassStructureProps> = (props) => {
       }
 
       const obj = rangeNodes.length > 0 ? rangeNodes[0] : null
+      const arrowMouseover = makeArrowMouseover(intl, () => [uri || ''])
       if (domain && range && obj !== null && canDrawTriple) {
         if (domain !== range) {
-          GraphRepository.updateRightLines([obj], arrowRightClick)
+          GraphRepository.updateRightLines(
+            [obj],
+            arrowMouseover,
+            arrowMouseout,
+            arrowRightClick
+          )
         } else {
           GraphRepository.updateSelfLines(
             [obj],
-            undefined,
-            undefined,
+            arrowMouseover,
+            arrowMouseout,
             arrowRightClick
           )
         }

diff --git a/node/src/ts/visualizer/utils/GraphRepository.ts b/node/src/ts/visualizer/utils/GraphRepository.ts
@@ -522,6 +522,8 @@ class GraphRepository {
 
   updateRightLines(
     nodes: NodeType[],
+    handleMouseOver: SVGEventHandlerType = () => {},
+    handleMouseOut: SVGEventHandlerType = () => {},
     handleRightClick: SVGEventHandlerType = () => {}
   ) {
     const rightLines = this.paths.rightHand?.data(nodes, nodeKeyFn)
@@ -530,8 +532,17 @@ class GraphRepository {
       .append('path')
       .attr('class', 'right-hand-line')
       .attr('marker-end', 'url(#arrow-head)')
-      .on('contextmenu', handleRightClick)
     rightLines?.exit().remove()
+
+    const rightPoints = this.linesNodes.rightHand?.data(nodes, nodeKeyFn)
+    rightPoints
+      ?.enter()
+      .append('circle')
+      .attr('class', 'arrow-line-base right-hand-line')
+      .on('contextmenu', handleRightClick)
+      .on('mouseover', handleMouseOver)
+      .on('mouseout', handleMouseOut)
+    rightPoints?.exit().remove()
   }
 
   updateSelfLines(