OpenConceptLab/ocl_issues#2183 | concept dialog to have map/un-map button and repo breadcrumbs

Author: snyaggarwal

src/components/concepts/ConceptHeader.jsx

@@ -10,8 +10,9 @@ import { toOwnerURI, currentUserHasAccess } from '../../common/utils';
 import Breadcrumbs from '../common/Breadcrumbs'
 import { BLACK } from '../../common/colors'
 import ConceptManagementList from './ConceptManagementList'
+import MapButton from '../map-projects/MapButton'
 
-const ConceptHeader = ({concept, repo, onClose, repoURL, onEdit, nested, loading}) => {
+const ConceptHeader = ({concept, repo, onClose, repoURL, onEdit, nested, loading, onMap, isSelectedForMap}) => {
   const { t } = useTranslation()
   const [menu, setMenu] = React.useState(false)
   const [menuAnchorEl, setMenuAnchorEl] = React.useState(false)
@@ -60,9 +61,20 @@ const ConceptHeader = ({concept, repo, onClose, repoURL, onEdit, nested, loading
     {
       !concept?.id ?
         <Skeleton variant='text' sx={{fontSize: '22px', width: '150px'}} />:
+      <span style={{display: 'flex', justifyContent: 'space-between', alignItems: 'center'}}>
       <Typography sx={{fontSize: '22px', color: BLACK}} className='searchable'>
       {concept.display_name}
       </Typography>
+        {
+          onMap &&
+            <MapButton
+              simple
+              onClick={(event, applied, mapType) => onMap(event, concept, !applied, mapType)}
+              isMapped={isSelectedForMap(concept)}
+              sx={{marginLeft: '8px'}}
+            />
+        }
+      </span>
     }
     </div>
     {

src/components/concepts/ConceptHome.jsx

@@ -171,7 +171,7 @@ const ConceptHome = props => {
             !edit &&
               <>
                 <div className='col-xs-12 padding-0'>
-                  <ConceptHeader concept={concept} onClose={props.onClose} repoURL={getRepoURL()} onEdit={onEdit} repo={repo} nested={props.nested} loading={loading} />
+                  <ConceptHeader concept={concept} onClose={props.onClose} repoURL={getRepoURL()} onEdit={onEdit} repo={repo} nested={props.nested} loading={loading} onMap={props.onMap} isSelectedForMap={props.isSelectedForMap} />
                 </div>
                 <ConceptTabs tab={tab} onTabChange={(event, newTab) => setTab(newTab)} loading={loading} />
                 {

src/components/map-projects/MapProject.jsx

@@ -1422,14 +1422,14 @@ const MapProject = () => {
       >
         {
           ALGOS.map(_algo => (
-          <MenuItem
-            key={_algo.id}
-            disabled={_algo.disabled}
-            selected={_algo.id === algo}
-            onClick={() => onAlgoSelect(_algo.id)}
-          >
-            {_algo.label}
-          </MenuItem>
+            <MenuItem
+              key={_algo.id}
+              disabled={_algo.disabled}
+              selected={_algo.id === algo}
+              onClick={() => onAlgoSelect(_algo.id)}
+            >
+              {_algo.label}
+            </MenuItem>
           ))
         }
       </Menu>
@@ -1456,11 +1456,18 @@ const MapProject = () => {
             <ConceptHome
               style={{borderRadius: 0}}
               detailsStyle={{height: 'calc(100vh - 550px)'}}
-              source={repo} repo={repo} url={showItem.url} concept={showItem} onClose={() => setShowItem(false)} nested />
+              source={repo}
+              repo={repoVersion}
+              url={showItem.url}
+              concept={showItem}
+              onClose={() => setShowItem(false)}
+              onMap={onMap}
+              isSelectedForMap={isSelectedForMap}
+            />
           </Dialog>
       }
     </div>
-)
+  )
 }
 
 export default MapProject;