Merge pull request #22 from glucoseinc/feature/highlight-right-pane

右ペインで特定の矢印を選択している時それをハイライトする
dbcls · Feb 18, 2022 · 9b5ab88 · 9b5ab88
2 parents 86ce3e3 + 68bab8f
commit 9b5ab88
Showing 1 changed file with 21 additions and 1 deletion.
diff --git a/node/src/ts/visualizer/components/ClassRelationsDetail.tsx b/node/src/ts/visualizer/components/ClassRelationsDetail.tsx
@@ -1,7 +1,8 @@
 import React, { useCallback, useMemo } from 'react'
 import { useIntl } from 'react-intl'
-import { useDispatch } from 'react-redux'
+import { useDispatch, useSelector } from 'react-redux'
 import { DetailAction } from '../actions/detail'
+import { RootState } from '../reducers'
 import { Classes } from '../types/class'
 import { getPreferredLabel } from '../utils'
 import GraphRepository from '../utils/GraphRepository'
@@ -15,6 +16,10 @@ type ClassRelationsDetailProps = {
   showRightHand: boolean
 }
 
+const selector = ({ detail: { showingRelation } }: RootState) => ({
+  showingRelation,
+})
+
 const ClassRelationsDetail: React.FC<ClassRelationsDetailProps> = (props) => {
   const {
     title,
@@ -30,6 +35,7 @@ const ClassRelationsDetail: React.FC<ClassRelationsDetailProps> = (props) => {
     classes,
     focusingURI,
   ])
+  const { showingRelation } = useSelector(selector)
 
   const getPreferredTriple = useCallback(
     (triple: string[]) => {
@@ -125,6 +131,12 @@ const ClassRelationsDetail: React.FC<ClassRelationsDetailProps> = (props) => {
                     type="button"
                     title={getPreferredTriple(triple)}
                     onClick={relationClass}
+                    style={{
+                      backgroundColor:
+                        showingRelation === rhs
+                          ? 'rgba(170, 170, 170, 0.5)'
+                          : undefined,
+                    }}
                   >
                     <span className="focusing">
                       {`<${triple[0]}>`}
@@ -152,6 +164,7 @@ const ClassRelationsDetail: React.FC<ClassRelationsDetailProps> = (props) => {
       intl,
       showRightHand,
       getPreferredTriple,
+      showingRelation,
     ]
   )
 
@@ -182,6 +195,12 @@ const ClassRelationsDetail: React.FC<ClassRelationsDetailProps> = (props) => {
                     type="button"
                     title={getPreferredTriple(triple)}
                     onClick={relationClass}
+                    style={{
+                      backgroundColor:
+                        showingRelation === lhs
+                          ? 'rgba(170, 170, 170, 0.5)'
+                          : undefined,
+                    }}
                   >
                     <span className="subject">
                       {`<${triple[0]}>`}
@@ -209,6 +228,7 @@ const ClassRelationsDetail: React.FC<ClassRelationsDetailProps> = (props) => {
       intl,
       showLeftHand,
       getPreferredTriple,
+      showingRelation,
     ]
   )
   if (!classDetail) {