Mapping exists in OCL icon

OpenConceptLab · Mar 24, 2023 · defa572 · defa572
1 parent 66a358c
commit defa572
Show file tree

Hide file tree

Showing 9 changed files with 59 additions and 49 deletions.
diff --git a/src/components/collections/CollectionHomeChildrenList.jsx b/src/components/collections/CollectionHomeChildrenList.jsx
@@ -190,7 +190,6 @@ class CollectionHomeChildrenList extends React.Component {
                         <div className='col-xs-12' style={{marginBottom: '5px', borderRadius: '5px', border: '1px solid rgba(0, 0, 0, 0.1)', padding: '5px 10px'}}>
                           <div className='col-xs-12 no-side-padding'>
                             <ResourceLabel
-                              noExistsIcon
                               resource='concept'
                               owner={resource.owner}
                               parent={resource.source}

diff --git a/src/components/common/ResourceLabel.jsx b/src/components/common/ResourceLabel.jsx
@@ -1,15 +1,11 @@
 import React from 'react';
-import { includes } from 'lodash';
 import {
   ChevronRight as SeparatorIcon,
 } from '@mui/icons-material';
-import ExistsInOCLIcon from '../common/ExistsInOCLIcon';
-import DoesnotExistsInOCLIcon from '../common/DoesnotExistsInOCLIcon';
 
 const SEPARATOR = (<SeparatorIcon />)
 const ResourceLabel = props => {
-  const { resource, existsInOCL, noSeparator, noExistsIcon } = props;
-  const isSourceChild = includes(['concept', 'mapping'], resource);
+  const { noSeparator } = props;
 
   return (
     <div className='col-xs-12 no-side-padding flex-vertical-center' style={{flexWrap: 'wrap'}}>
@@ -40,13 +36,6 @@ const ResourceLabel = props => {
       <span className={'resource-label resource-id ' + (props.colorClass || '')} style={{maxWidth: '100%'}}>
         <span className='ellipsis-text'>{props.name}</span>
       </span>
-      {
-        !noExistsIcon && isSourceChild && (
-          existsInOCL ?
-          <ExistsInOCLIcon containerStyles={{marginLeft: '5px'}} /> :
-          <DoesnotExistsInOCLIcon containerStyles={{marginLeft: '5px'}} />
-        )
-      }
     </div>
   )
 }

diff --git a/src/components/common/ResourceLabelVertical.jsx b/src/components/common/ResourceLabelVertical.jsx
@@ -3,18 +3,16 @@ import { includes } from 'lodash';
 import {
   ChevronRight as SeparatorIcon,
 } from '@mui/icons-material';
-import ExistsInOCLIcon from '../common/ExistsInOCLIcon';
-import DoesnotExistsInOCLIcon from '../common/DoesnotExistsInOCLIcon';
 
 const SEPARATOR = (<SeparatorIcon />)
 const ResourceLabelVertical = props => {
-  const { resource, existsInOCL } = props;
+  const { resource } = props;
   const isSourceChild = includes(['concept', 'mapping'], resource);
   const parentTextStyles = {
     width: '100%',
     fontSize: '10px',
     background: '#eee',
-    padding: '0 5px',
+    padding: '2px 5px',
     textAlign: 'center',
     borderRadius: '2px',
     overflowX: 'auto',
@@ -56,15 +54,6 @@ const ResourceLabelVertical = props => {
           <span>{props.name}</span>
         </div>
       </div>
-      <div className='no-left-padding flex-vertical-center' style={{width: '5%', justifyContent: 'flex-end'}}>
-        {
-          isSourceChild && (
-            existsInOCL ?
-            <ExistsInOCLIcon containerStyles={{marginLeft: '5px'}} /> :
-            <DoesnotExistsInOCLIcon containerStyles={{marginLeft: '5px'}} />
-          )
-        }
-      </div>
     </div>
   )
 }

diff --git a/src/components/concepts/ConceptHierarchyRow.jsx b/src/components/concepts/ConceptHierarchyRow.jsx
@@ -1,9 +1,12 @@
 import React from 'react';
 import {
-  TableRow, TableCell, Chip
+  TableRow, TableCell, Chip, Tooltip
 } from '@mui/material';
+import {LocalOffer as LocalOfferIcon} from '@mui/icons-material'
 import { map, get, orderBy } from 'lodash';
-import ExistsInOCLIcon from '../common/ExistsInOCLIcon';
+import { getSiteTitle } from '../../common/utils';
+
+const SITE_TITLE = getSiteTitle()
 
 const ConceptHierarchyRow = ({ mapType, concepts, source }) => {
   const onDefaultClick = (event, concept) => {
@@ -39,7 +42,13 @@ const ConceptHierarchyRow = ({ mapType, concepts, source }) => {
               <TableCell align='left' className='ellipsis-text' style={{width: '30%', paddingLeft: '5px'}}>
                 <span className='flex-vertical-center'>
                   <span className='flex-vertical-center' style={{marginRight: '4px'}}>
-                    <ExistsInOCLIcon />
+                    <Tooltip title={`Defined in ${SITE_TITLE}`}>
+                      <LocalOfferIcon
+                        color='primary'
+                        fontSize='small'
+                        style={{width: '12pt'}}
+                      />
+                    </Tooltip>
                   </span>
                   <span className={concept.retired ? 'retired' : ''}>
                     {get(concept, 'id')}

diff --git a/src/components/mappings/ConceptHomeMappingsTableRows.jsx b/src/components/mappings/ConceptHomeMappingsTableRows.jsx
@@ -7,12 +7,11 @@ import {
   ImportExport as SortIcon,
   ArrowUpward as UpIcon,
   ArrowDownward as DownIcon,
-  WarningAmber as WarningIcon
+  WarningAmber as WarningIcon,
+  LocalOffer as LocalOfferIcon
 } from '@mui/icons-material';
 import { DragDropContext, Droppable, Draggable } from "react-beautiful-dnd";
 import { map, get, forEach, orderBy, filter, find, isNumber, has, isEmpty, some, maxBy } from 'lodash';
-import ExistsInOCLIcon from '../common/ExistsInOCLIcon';
-import DoesnotExistsInOCLIcon from '../common/DoesnotExistsInOCLIcon';
 import MappingOptions from './MappingOptions';
 import { getSiteTitle, toParentURI, getSiblings } from '../../common/utils';
 import MappingInlineForm from './MappingInlineForm';
@@ -257,11 +256,14 @@ const ConceptHomeMappingsTableRows = ({ concept, mappings, mapType, isIndirect,
                                         </span>
                                     }
                                     <span className='flex-vertical-center' style={{marginRight: '4px'}}>
-                                      {
-                                        targetURL ?
-                                          <ExistsInOCLIcon title={title} /> :
-                                        <DoesnotExistsInOCLIcon title={title} />
-                                      }
+                                      <Tooltip title={title}>
+                                        <LocalOfferIcon
+                                          color={targetURL ? 'primary': 'warning'}
+                                          fontSize='small'
+                                          style={{width: '12pt'}}
+                                        />
+
+                                        </Tooltip>
                                     </span>
                                     <span className={mapping.retired ? 'retired' : ''}>
                                       { mapping[conceptCodeAttr] }

diff --git a/src/components/mappings/FromConceptLabel.jsx b/src/components/mappings/FromConceptLabel.jsx
@@ -1,25 +1,31 @@
 import React from 'react';
 import { Link } from 'react-router-dom';
+import { Tooltip } from '@mui/material'
 import {LocalOffer as LocalOfferIcon} from '@mui/icons-material'
 import { get } from 'lodash';
 import ResourceLabel from '../common/ResourceLabel';
-import { DARKGRAY } from '../../common/constants';
+import { getSiteTitle } from '../../common/utils';
+
+const SITE_TITLE = getSiteTitle()
 
 const FromConceptLabel = props => {
   const conceptName = props.from_concept_name || props.from_concept_name_resolved || get(props, 'from_concept.display_name')
+  const existsInOCL = Boolean(props.from_concept_url)
   const labelComponent = <ResourceLabel
                            resource='concept'
-                           existsInOCL={Boolean(props.from_concept_url)}
                            owner={props.from_source_owner}
                            parent={props.from_source_name}
                            id={props.from_concept_code}
                            parentURL={props.from_source_url}
                            name={conceptName}
                            icon={
+                             <Tooltip title={existsInOCL ? `Defined in ${SITE_TITLE}` : `Not defined in ${SITE_TITLE}`}>
                              <LocalOfferIcon
+                               color={existsInOCL ? 'primary': 'warning'}
                                fontSize='small'
-                                         style={{width: '10pt', color: DARKGRAY}}
+                                         style={{width: '12pt'}}
                              />
+                             </Tooltip>
                            } />;
   return (
     <React.Fragment>

diff --git a/src/components/mappings/FromConceptLabelVertical.jsx b/src/components/mappings/FromConceptLabelVertical.jsx
@@ -1,25 +1,30 @@
 import React from 'react';
 import { Link } from 'react-router-dom';
+import { Tooltip } from '@mui/material'
 import {LocalOffer as LocalOfferIcon} from '@mui/icons-material'
 import { get } from 'lodash';
 import ResourceLabelVertical from '../common/ResourceLabelVertical';
-import { DARKGRAY } from '../../common/constants';
+import { getSiteTitle } from '../../common/utils';
 
+const SITE_TITLE = getSiteTitle()
 const FromConceptLabelVertical = props => {
   const conceptName = props.from_concept_name || props.from_concept_name_resolved || get(props, 'from_concept.display_name')
+  const existsInOCL = Boolean(props.from_concept_url)
   const labelComponent = <ResourceLabelVertical
                            resource='concept'
-                           existsInOCL={Boolean(props.from_concept_url)}
                            owner={props.from_source_owner}
                            parent={props.from_source_name}
                            id={props.from_concept_code}
                            parentURL={props.from_source_url}
                            name={conceptName}
                            icon={
+                             <Tooltip title={existsInOCL ? `Defined in ${SITE_TITLE}` : `Not defined in ${SITE_TITLE}`}>
                              <LocalOfferIcon
+                               color={existsInOCL ? 'primary': 'warning'}
                                fontSize='small'
-                                         style={{width: '12pt', color: DARKGRAY}}
+                                         style={{width: '14pt'}}
                              />
+                               </Tooltip>
                            } />;
   return (
     <React.Fragment>

diff --git a/src/components/mappings/ToConceptLabel.jsx b/src/components/mappings/ToConceptLabel.jsx
@@ -1,26 +1,32 @@
 import React from 'react';
 import { Link } from 'react-router-dom';
+import { Tooltip } from '@mui/material'
 import {LocalOffer as LocalOfferIcon} from '@mui/icons-material'
 import { get } from 'lodash';
 import ResourceLabel from '../common/ResourceLabel';
-import { DARKGRAY } from '../../common/constants';
+import { getSiteTitle } from '../../common/utils';
+
+const SITE_TITLE = getSiteTitle()
 
 const ToConceptLabel = props => {
   const conceptName = props.to_concept_name || props.to_concept_name_resolved || get(props, 'to_concept.display_name')
   const hasLink = props.to_concept_url && !props.noRedirect;
+  const existsInOCL = Boolean(props.to_concept_url)
   const labelComponent = <ResourceLabel
                            resource='concept'
-                           existsInOCL={Boolean(props.to_concept_url)}
                            owner={props.to_source_owner}
                            parent={props.to_source_name}
                            id={props.to_concept_code}
                            parentURL={props.to_source_url}
                            name={conceptName}
                            icon={
+                             <Tooltip title={existsInOCL ? `Defined in ${SITE_TITLE}` : `Not defined in ${SITE_TITLE}`}>
                              <LocalOfferIcon
+                               color={existsInOCL ? 'primary': 'warning'}
                                fontSize='small'
-                                         style={{width: '10pt', color: DARKGRAY}}
+                                         style={{width: '12pt'}}
                              />
+                             </Tooltip>
                            } />;
   return (
     <React.Fragment>

diff --git a/src/components/mappings/ToConceptLabelVertical.jsx b/src/components/mappings/ToConceptLabelVertical.jsx
@@ -1,26 +1,31 @@
 import React from 'react';
 import { Link } from 'react-router-dom';
+import { Tooltip } from '@mui/material'
 import {LocalOffer as LocalOfferIcon} from '@mui/icons-material'
 import { get } from 'lodash';
 import ResourceLabelVertical from '../common/ResourceLabelVertical';
-import { DARKGRAY } from '../../common/constants';
+import { getSiteTitle } from '../../common/utils';
 
+const SITE_TITLE = getSiteTitle()
 const ToConceptLabelVertical = props => {
   const conceptName = props.to_concept_name || props.to_concept_name_resolved || get(props, 'to_concept.display_name')
   const hasLink = props.to_concept_url && !props.noRedirect;
+  const existsInOCL = Boolean(props.to_concept_url)
   const labelComponent = <ResourceLabelVertical
                            resource='concept'
-                           existsInOCL={Boolean(props.to_concept_url)}
                            owner={props.to_source_owner}
                            parent={props.to_source_name}
                            id={props.to_concept_code}
                            parentURL={props.to_source_url}
                            name={conceptName}
                            icon={
+                             <Tooltip title={existsInOCL ? `Defined in ${SITE_TITLE}` : `Not defined in ${SITE_TITLE}`}>
                              <LocalOfferIcon
+                               color={existsInOCL ? 'primary': 'warning'}
                                fontSize='small'
-                                         style={{width: '12pt', color: DARKGRAY}}
+                                         style={{width: '14pt'}}
                              />
+                               </Tooltip>
                            } />;
   return (
     <React.Fragment>