From 83bc00b7ea53fcb833cc8a69c5cafaec0a12253d Mon Sep 17 00:00:00 2001
From: Fumiya Kubota <fumiya.kubota@glucose.jp>
Date: Tue, 16 Mar 2021 03:54:09 +0900
Subject: [PATCH] fix

---
 node/src/style/style.scss                                 | 8 ++++++--
 .../src/ts/visualizer/components/ClassRelationsDetail.tsx | 5 +++++
 node/src/ts/visualizer/locales/en.ts                      | 6 ++++--
 node/src/ts/visualizer/locales/ja.ts                      | 5 +++--
 4 files changed, 18 insertions(+), 6 deletions(-)

diff --git a/node/src/style/style.scss b/node/src/style/style.scss
index 5555f65d..5b9f00c4 100644
--- a/node/src/style/style.scss
+++ b/node/src/style/style.scss
@@ -1014,6 +1014,7 @@ body {
         button {
           cursor: pointer;
           text-decoration: underline;
+          text-align: left;
         }
       }
       h2.relation-class:hover {
@@ -1023,6 +1024,7 @@ body {
         font-size: 14px;
         line-height: 1.2;
         padding: 8px 0;
+        padding-left: 8px;
         border-bottom: 1px solid #dddee2;
         .open-toggle {
           display: inline-block;
@@ -1034,6 +1036,7 @@ body {
           cursor: pointer;
           display: flex;
           align-items: center;
+          justify-content: space-between;
         }
       }
       .open {
@@ -1047,8 +1050,9 @@ body {
       }
 
       h4 {
-        line-height: 13px;
-        font-size: 13px;
+        line-height: 14px;
+        font-size: 14px;
+        margin: 4px 0;
         a {
           color: inherit;
         }
diff --git a/node/src/ts/visualizer/components/ClassRelationsDetail.tsx b/node/src/ts/visualizer/components/ClassRelationsDetail.tsx
index 26d30f42..276837aa 100644
--- a/node/src/ts/visualizer/components/ClassRelationsDetail.tsx
+++ b/node/src/ts/visualizer/components/ClassRelationsDetail.tsx
@@ -215,6 +215,11 @@ const ClassRelationsDetail: React.FC<ClassRelationsDetailProps> = (props) => {
   return (
     <div className="section">
       {headerElement}
+      <h4>
+        {intl.formatMessage({
+          id: 'classRelationsDetail.triple.with.this.class.as.triple',
+        })}
+      </h4>
       {subjectElement}
       {objectElement}
     </div>
diff --git a/node/src/ts/visualizer/locales/en.ts b/node/src/ts/visualizer/locales/en.ts
index 607ad196..b088c45b 100644
--- a/node/src/ts/visualizer/locales/en.ts
+++ b/node/src/ts/visualizer/locales/en.ts
@@ -9,10 +9,12 @@ const messages = {
   'focusClassDetail.class.selecting': 'Selected Class',
   'classRelationsDetail.class.relates': 'Related Classes',
   'classRelationsDetail.class.relates.of': 'Class relating to {target}',
+  'classRelationsDetail.triple.with.this.class.as.triple':
+    'Patterns of triples',
   'classRelationsDetail.triple.with.this.class.as.subject':
-    'Predicate and object classes where instances of the class are used as subjects',
+    'The instance of this class is the subject',
   'classRelationsDetail.triple.with.this.class.as.object':
-    'Predicate and object classes where instances of the class are used as objects',
+    'The instance of this class is the object',
   'hideableWrapper.toggle.open': 'Open {target}',
   'hideableWrapper.toggle.close': 'Close {target}',
   'legend.label.legend': 'Legend',
diff --git a/node/src/ts/visualizer/locales/ja.ts b/node/src/ts/visualizer/locales/ja.ts
index 5d48ad84..c3ac9a29 100644
--- a/node/src/ts/visualizer/locales/ja.ts
+++ b/node/src/ts/visualizer/locales/ja.ts
@@ -9,10 +9,11 @@ const messages = {
   'focusClassDetail.class.selecting': '選択中のクラス',
   'classRelationsDetail.class.relates': '関連するクラス',
   'classRelationsDetail.class.relates.of': '{target}の関連するクラス',
+  'classRelationsDetail.triple.with.this.class.as.triple': 'トリプルのパターン',
   'classRelationsDetail.triple.with.this.class.as.subject':
-    '本クラスのインスタンスが主語に使われている述語と目的語のクラス',
+    '本クラスのインスタンスが主語',
   'classRelationsDetail.triple.with.this.class.as.object':
-    '本クラスのインスタンスが目的語に使われている述語と目的語のクラス',
+    '本クラスのインスタンスが目的語',
   'hideableWrapper.toggle.open': '{target}を開く',
   'hideableWrapper.toggle.close': '{target}を閉じる',
   'legend.label.legend': '凡例',