Merge pull request #162 from glucoseinc/main

update
dbcls · Feb 18, 2022 · ef5b281 · ef5b281
2 parents e9b2faf + 9b5ab88
commit ef5b281
Show file tree

Hide file tree

Showing 4 changed files with 25 additions and 5 deletions.
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) {

diff --git a/node/src/ts/visualizer/components/Filter.tsx b/node/src/ts/visualizer/components/Filter.tsx
@@ -16,11 +16,11 @@ const Filter: React.FC = () => {
   const query = useQuery()
 
   const defaultEntitiesLimit = useMemo(() => {
-    const limit = Number(query.get('lower_limit'))
+    const limit = Number(query.get('lower_limit')) || 1
     if (Number.isInteger(limit)) {
       return limit
     }
-    return 0
+    return 1
   }, [])
 
   const handleClick = useCallback(() => {

diff --git a/node/src/ts/visualizer/index.tsx b/node/src/ts/visualizer/index.tsx
@@ -171,7 +171,7 @@ const App: React.FC<AppProps> = (props) => {
       return
     }
 
-    if (lowerLimitOfClassEntities === 0) {
+    if (lowerLimitOfClassEntities <= 1) {
       history.push({
         pathname: history.location.pathname,
       })

diff --git a/node/src/ts/visualizer/reducers/filter.ts b/node/src/ts/visualizer/reducers/filter.ts
@@ -7,7 +7,7 @@ export interface FilterState {
 }
 
 const initialState: FilterState = {
-  lowerLimitOfClassEntities: 0,
+  lowerLimitOfClassEntities: 1,
   showingConditions: false,
 }