Merge pull request #169 from asashakira/fix/whiteout

「関連するクラス」を押すとデータによってはページが真っ白になる
dbcls · Sep 9, 2024 · e50cec6 · e50cec6
2 parents b32e923 + 8d20d58
commit e50cec6
Show file tree

Hide file tree

Showing 6 changed files with 22 additions and 5 deletions.
diff --git a/node/src/style/style.scss b/node/src/style/style.scss
@@ -1115,6 +1115,9 @@ body {
           .object {
             color: #a567a7;
           }
+          .no-object {
+            color: #808080;
+          }
         }
         li:first-child {
           margin-top: 0px;

diff --git a/node/src/ts/visualizer/components/ClassRelationsDetail.tsx b/node/src/ts/visualizer/components/ClassRelationsDetail.tsx
@@ -44,7 +44,9 @@ const ClassRelationsDetail: React.FC<ClassRelationsDetailProps> = (props) => {
       }
       const subject = getPreferredLabel(triple[0], classes, intl.locale)
       const predicate = getPreferredLabel(triple[1], classes, intl.locale)
-      const object = getPreferredLabel(triple[2], classes, intl.locale)
+      const object =
+        getPreferredLabel(triple[2], classes, intl.locale) ??
+        intl.formatMessage({ id: 'detail.no.object' })
       return `<${subject}><${predicate}><${object}>`
     },
     [classes, intl.locale]
@@ -124,7 +126,11 @@ const ClassRelationsDetail: React.FC<ClassRelationsDetailProps> = (props) => {
                 e.preventDefault()
                 dispatch(DetailAction.showRelation(rhs))
               }
-              const triple = [focusingURI || '', rhs[0], rhs[1]]
+              const triple = [
+                focusingURI || '',
+                rhs[0],
+                rhs[1] ?? intl.formatMessage({ id: 'detail.no.object' }),
+              ]
               return (
                 <li key={`component-classrelationdetail-list-rhs-${index}`}>
                   <button
@@ -143,7 +149,7 @@ const ClassRelationsDetail: React.FC<ClassRelationsDetailProps> = (props) => {
                       &nbsp;
                     </span>
                     <span>{`<${triple[1]}>`}</span>
-                    <span className="object">
+                    <span className={rhs[1] ? 'object' : 'no-object'}>
                       &nbsp;
                       {`<${triple[2]}>`}
                     </span>

diff --git a/node/src/ts/visualizer/locales/en.ts b/node/src/ts/visualizer/locales/en.ts
@@ -6,6 +6,7 @@ const messages = {
   'detail.class.object': 'Object Class',
   'detail.class.selecting': 'Selected Class',
   'detail.no.selecting.classes': 'No classes currently selected.',
+  'detail.no.object': 'None',
   'focusClassDetail.class.selecting': 'Selected Class',
   'classRelationsDetail.class.relates': 'Related Classes',
   'classRelationsDetail.class.relates.of': 'Class relating to {target}',

diff --git a/node/src/ts/visualizer/locales/ja.ts b/node/src/ts/visualizer/locales/ja.ts
@@ -6,6 +6,7 @@ const messages = {
   'detail.class.object': '目的語のクラス',
   'detail.class.selecting': '選択中のクラス',
   'detail.no.selecting.classes': '現在選択しているクラスはありません。',
+  'detail.no.object': 'なし',
   'focusClassDetail.class.selecting': '選択中のクラス',
   'classRelationsDetail.class.relates': '関連するクラス',
   'classRelationsDetail.class.relates.of': '{target}の関連するクラス',

diff --git a/node/src/ts/visualizer/utils/GraphRepository.ts b/node/src/ts/visualizer/utils/GraphRepository.ts
@@ -341,11 +341,15 @@ class GraphRepository {
   }
 
   x(x: number) {
-    return (this.XLinear?.(x) ?? 0) + this.coordinate[0]
+    const ret = (this.XLinear?.(x) ?? 0) + this.coordinate[0]
+    if (isNaN(ret)) return this.coordinate[0]
+    return ret
   }
 
   y(y: number) {
-    return (this.YLinear?.(y) ?? 0) + this.coordinate[1]
+    const ret = (this.YLinear?.(y) ?? 0) + this.coordinate[1]
+    if (isNaN(ret)) return this.coordinate[1]
+    return ret
   }
 
   textY(d: NodeType) {

diff --git a/node/src/ts/visualizer/utils/index.ts b/node/src/ts/visualizer/utils/index.ts
@@ -3,6 +3,8 @@ import locales from '../locales'
 import { Classes } from '../types/class'
 
 export const omitUri = (uri: string) => {
+  if (!uri) return uri
+
   // Do not allow endwith '#' or '/' because fragment or path will be empty.
   const uriWithoutEndDelim = uri.replace(/[#,/]$/, '')