From 68bab8f8a71af45acc9e091950e13b2c10ad4cac Mon Sep 17 00:00:00 2001
From: Fumiya Kubota <fumiya.kubota@glucose.jp>
Date: Fri, 18 Feb 2022 18:45:53 +0900
Subject: [PATCH] =?UTF-8?q?=E5=8F=B3=E3=83=9A=E3=82=A4=E3=83=B3=E3=81=A7?=
 =?UTF-8?q?=E7=89=B9=E5=AE=9A=E3=81=AE=E7=9F=A2=E5=8D=B0=E3=82=92=E9=81=B8?=
 =?UTF-8?q?=E6=8A=9E=E3=81=97=E3=81=A6=E3=81=84=E3=82=8B=E6=99=82=E3=81=9D?=
 =?UTF-8?q?=E3=82=8C=E3=82=92=E3=83=8F=E3=82=A4=E3=83=A9=E3=82=A4=E3=83=88?=
 =?UTF-8?q?=E3=81=99=E3=82=8B?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../components/ClassRelationsDetail.tsx       | 22 ++++++++++++++++++-
 1 file changed, 21 insertions(+), 1 deletion(-)

diff --git a/node/src/ts/visualizer/components/ClassRelationsDetail.tsx b/node/src/ts/visualizer/components/ClassRelationsDetail.tsx
index 721318ba..c950809b 100644
--- 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) {