OpenConceptLab/ocl_issues#991 | concept hierarchy as part of mappings

OpenConceptLab · Oct 6, 2021 · 930cdcb · 930cdcb
1 parent 7ac6b90
commit 930cdcb
Show file tree

Hide file tree

Showing 5 changed files with 167 additions and 10 deletions.
diff --git a/src/components/concepts/ConceptHierarchyRow.jsx b/src/components/concepts/ConceptHierarchyRow.jsx
@@ -0,0 +1,54 @@
+import React from 'react';
+import {
+  TableRow, TableCell, Chip
+} from '@material-ui/core';
+import { map } from 'lodash';
+
+const ConceptHierarchyRow = ({ mapType, concepts, source }) => {
+  const onDefaultClick = (event, concept) => {
+    event.stopPropagation()
+    event.preventDefault()
+    window.location.hash = concept.url
+  }
+
+  return (
+    <React.Fragment>
+      {
+        mapType &&
+        <TableRow hover>
+          <TableCell align='left' rowSpan={concepts.length + 1} style={{paddingRight: '5px', verticalAlign: 'top', paddingTop: '7px'}}>
+              <Chip
+                size='small'
+                variant='outlined'
+                color='default'
+                label={mapType}
+                style={{border: 'none'}}
+              />
+          </TableCell>
+        </TableRow>
+      }
+      {
+        map(concepts, concept => {
+          return (
+            <TableRow
+              hover key={concept.uuid} onClick={event => onDefaultClick(event, concept)} style={{cursor: 'pointer'}} className='underline-text'>
+              <TableCell align='left' className='ellipsis-text' style={{maxWidth: '200px'}}>
+                {concept.id}
+              </TableCell>
+              <TableCell align='left'>
+                { concept.name }
+              </TableCell>
+              <TableCell align='left'>
+                { `${source.owner} / ${source.id}` }
+              </TableCell>
+              <TableCell align='right' style={{width: '24px', paddingRight: '5px'}}>
+              </TableCell>
+            </TableRow>
+          )
+        })
+      }
+    </React.Fragment>
+  )
+}
+
+export default ConceptHierarchyRow;
diff --git a/src/components/concepts/ConceptHome.jsx b/src/components/concepts/ConceptHome.jsx
@@ -28,11 +28,15 @@ class ConceptHome extends React.Component {
       isLoading: true,
       isLoadingMappings: false,
       isLoadingCollections: false,
-      parent: null,
+      isLoadingParents: false,
+      isLoadingChildren: false,
+      parentConcepts: null,
       concept: {},
       versions: [],
       mappings: [],
       collections: [],
+      parents: [],
+      childConcepts: [],
       tab: this.getDefaultTabIndex(),
       openHierarchy: isBoolean(props.openHierarchy) ? props.openHierarchy : false,
     }
@@ -104,6 +108,8 @@ class ConceptHome extends React.Component {
                         this.getVersions()
                       else {
                         this.getMappings()
+                        this.getParents()
+                        this.getChildren()
                         this.getCollectionVersions()
                       }
                       if(!isEmpty(get(this.state.concept, 'names', [])) || !isEmpty(get(this.state.concept, 'descriptions', [])))
@@ -149,7 +155,7 @@ class ConceptHome extends React.Component {
 
   fetchConceptChildren = (url, callback) => APIService.new()
                                                       .overrideURL(url)
-                                                      .appendToUrl(`children/`)
+                                                      .appendToUrl(`children/?includeChildConcepts=true`)
                                                       .get()
                                                       .then(response => callback(response.data))
 
@@ -173,6 +179,28 @@ class ConceptHome extends React.Component {
     })
   }
 
+  getParents() {
+    this.setState({isLoadingParents: true}, () => {
+      APIService.new()
+                .overrideURL(encodeURI(this.getConceptURLFromPath()) + 'parents/?limit=100')
+                .get()
+                .then(response => {
+                  this.setState({parentConcepts: response.data, isLoadingParents: false})
+                })
+    })
+  }
+
+  getChildren() {
+    this.setState({isLoadingChildren: true}, () => {
+      APIService.new()
+                .overrideURL(encodeURI(this.getConceptURLFromPath()) + 'children/?limit=100')
+                .get()
+                .then(response => {
+                  this.setState({childConcepts: response.data, isLoadingChildren: false})
+                })
+    })
+  }
+
   getCollectionVersions() {
     this.setState({isLoadingCollections: true}, () => {
       APIService.new()
@@ -218,7 +246,8 @@ class ConceptHome extends React.Component {
     const {
       concept, versions, mappings, isLoadingMappings, isLoading, tab,
       notFound, accessDenied, permissionDenied, hierarchy, openHierarchy, newChildren,
-      isLoadingHierarchy, collections, isLoadingCollections, source
+      isLoadingHierarchy, collections, isLoadingCollections, source, isLoadingChildren, isLoadingParents,
+      childConcepts, parentConcepts
     } = this.state;
     const currentURL = this.getConceptURLFromPath()
     const isVersionedObject = this.isVersionedObject()
@@ -250,6 +279,10 @@ class ConceptHome extends React.Component {
               versions={versions}
               mappings={mappings}
               isLoadingMappings={isLoadingMappings}
+              childConcepts={childConcepts}
+              parentConcepts={parentConcepts}
+              isLoadingParents={isLoadingParents}
+              isLoadingChildren={isLoadingChildren}
               collections={collections}
               isLoadingCollections={isLoadingCollections}
               isVersionedObject={isVersionedObject}

diff --git a/src/components/concepts/ConceptHomeDetails.jsx b/src/components/concepts/ConceptHomeDetails.jsx
@@ -12,7 +12,7 @@ const ACCORDIAN_DETAILS_STYLES = {
   maxHeight: '300px', overflow: 'auto', display: 'inline-block', width: '100%', padding: '0'
 }
 
-const ConceptHomeDetails = ({ concept, isLoadingMappings, isLoadingCollections, source }) => {
+const ConceptHomeDetails = ({ concept, isLoadingMappings, isLoadingCollections, source, childConcepts, parentConcepts, isLoadingChildren, isLoadingParents }) => {
   const names = get(concept, 'names', [])
   const descriptions = get(concept, 'descriptions', [])
   return (
@@ -38,7 +38,7 @@ const ConceptHomeDetails = ({ concept, isLoadingMappings, isLoadingCollections,
         />
       </div>
       <div className='col-md-6 no-right-padding'>
-        <HomeMappings concept={concept} isLoadingMappings={isLoadingMappings} />
+        <HomeMappings concept={concept} isLoadingMappings={isLoadingMappings} childConcepts={childConcepts} parentConcepts={parentConcepts} isLoadingChildren={isLoadingChildren} isLoadingParents={isLoadingParents} source={source} />
         <ConceptCollections concept={concept} isLoadingCollections={isLoadingCollections} />
       </div>
     </React.Fragment>

diff --git a/src/components/concepts/ConceptHomeTabs.jsx b/src/components/concepts/ConceptHomeTabs.jsx
@@ -6,7 +6,8 @@ import VersionList from '../common/VersionList';
 const ConceptHomeTabs = props => {
   const {
     tab, concept, versions, mappings, isVersionedObject, isLoadingMappings, noRedirect,
-    onTabChange, collections, isLoadingCollections, source
+    onTabChange, collections, isLoadingCollections, source, isLoadingParents, isLoadingChildren,
+    parentConcepts, childConcepts
   } = props;
   const resourceRelativeURL = isVersionedObject ? concept.url : concept.version_url;
   const conceptWithMappings = {...concept, mappings: mappings, collections: collections}
@@ -21,8 +22,26 @@ const ConceptHomeTabs = props => {
         <Tab label="History" {...historyRedirectionProps} />
       </Tabs>
       <div className='sub-tab-container' style={{display: 'flex', height: 'auto', width: '100%', minHeight: '100vh'}}>
-        { tab === 0 && <ConceptHomeDetails source={source} concept={conceptWithMappings} isLoadingMappings={isLoadingMappings} isLoadingCollections={isLoadingCollections} /> }
-        { tab === 1 && <VersionList versions={versions} resource='concept' /> }
+        {
+          tab === 0 &&
+          <ConceptHomeDetails
+            source={source}
+            concept={conceptWithMappings}
+            parentConcepts={parentConcepts}
+            childConcepts={childConcepts}
+            isLoadingMappings={isLoadingMappings}
+            isLoadingCollections={isLoadingCollections}
+            isLoadingChildren={isLoadingChildren}
+            isLoadingParents={isLoadingParents}
+          />
+        }
+        {
+          tab === 1 &&
+          <VersionList
+            versions={versions}
+            resource='concept'
+          />
+        }
       </div>
     </div>
   );

diff --git a/src/components/concepts/HomeMappings.jsx b/src/components/concepts/HomeMappings.jsx
@@ -10,6 +10,7 @@ import { get, isEmpty, forEach, map } from 'lodash';
 import { BLUE, WHITE } from '../../common/constants'
 import { generateRandomString } from '../../common/utils'
 import ConceptHomeMappingsTableRows from '../mappings/ConceptHomeMappingsTableRows';
+import ConceptHierarchyRow from './ConceptHierarchyRow';
 import TabCountLabel from '../common/TabCountLabel';
 
 const ACCORDIAN_HEADING_STYLES = {
@@ -36,11 +37,29 @@ const groupMappings = (concept, mappings) => {
   return orderedMappings;
 }
 
-const HomeMappings = ({ concept, isLoadingMappings }) => {
+const HomeMappings = ({ source, concept, isLoadingMappings, childConcepts, parentConcepts, isLoadingChildren, isLoadingParents }) => {
   const conceptMappings = get(concept, 'mappings') || [];
-  const count = isLoadingMappings ? null : conceptMappings.length;
+  const count = isLoadingMappings ? null : conceptMappings.length + get(childConcepts, 'length', 0) + get(parentConcepts, 'length', 0);
   const tbHeadCellStyles = {padding: '8px', color: WHITE}
   const orderedMappings = groupMappings(concept, conceptMappings)
+  const hierarchyMapType = isChild => {
+    const hierarchyMeaning = get(source, 'hierarchy_meaning')
+    return (
+      <span>
+        <span>{isChild ? 'Has child' : 'Has parent'}</span>
+        {
+          hierarchyMeaning &&
+          <div>
+            <span>{`(${hierarchyMeaning})`}</span>
+            {
+              isChild &&
+              <sup>-1</sup>
+            }
+          </div>
+        }
+      </span>
+    )
+  }
 
   return (
     <Accordion defaultExpanded>
@@ -112,6 +131,38 @@ const HomeMappings = ({ concept, isLoadingMappings }) => {
                     )
                   })
                 }
+                {
+                  isLoadingChildren ?
+                  <TableRow>
+                    <TableCell colSpan={5} align='center'>
+                      <CircularProgress />
+                    </TableCell>
+                  </TableRow> :
+                  (
+                    !isEmpty(childConcepts) &&
+                    <ConceptHierarchyRow
+                      source={source}
+                      concepts={childConcepts}
+                      mapType={hierarchyMapType(true)}
+                    />
+                  )
+                }
+                {
+                  isLoadingParents ?
+                  <TableRow>
+                    <TableCell colSpan={5} align='center'>
+                      <CircularProgress />
+                    </TableCell>
+                  </TableRow> :
+                  (
+                    !isEmpty(parentConcepts) &&
+                    <ConceptHierarchyRow
+                      source={source}
+                      concepts={parentConcepts}
+                      mapType={hierarchyMapType()}
+                    />
+                  )
+                }
               </TableBody>
             </Table>
           )