OpenConceptLab/ocl_issues#2190 | fixing column map width | fixing decision result name and other attributes

Author: snyaggarwal

src/components/map-projects/ColumnMapTable.jsx

@@ -85,7 +85,7 @@ const ColumnMapTable = ({validColumns, columns, isValid, onUpdate, sx, setColumn
             const isHidden = columnVisibilityModel[column.dataKey] === false
             return (
               <TableRow key={column.original}>
-                <TableCell>
+              <TableCell sx={{width: '50%'}}>
                   <span style={{display: 'flex', alignItems: 'center'}}>
                     {
                       isValidColumn ?

src/components/map-projects/MapProject.jsx

@@ -1401,6 +1401,7 @@ const MapProject = () => {
                   allMapTypes={allMapTypes}
                   onMap={onMap}
                   proposed={proposed[rowIndex]}
+                  columns={columns}
                 />
                 <Divider sx={{width: '100%'}} />
                 <DecisionSelector

src/components/map-projects/MappingDecisionResult.jsx

@@ -5,36 +5,46 @@ import has from 'lodash/has'
 import values from 'lodash/values'
 import isEmpty from 'lodash/isEmpty'
 import find from 'lodash/find'
+import get from 'lodash/get'
 import compact from 'lodash/compact'
 import MapButton from './MapButton'
 import { URIToParentParams } from '../../common/utils'
 import Score from './Score'
 
-const MappingDecisionResult = ({targetConcept, row, rowIndex, mapTypes, allMapTypes, onMap, proposed}) => {
+const MappingDecisionResult = ({targetConcept, row, rowIndex, mapTypes, allMapTypes, onMap, proposed, columns}) => {
   const parentParams = targetConcept?.url ? URIToParentParams(targetConcept.url) : {}
   const hasClass = has(row, 'Class') || has(row, 'Concept Class')
   const hasDatatype = has(row, 'Datatype') || has(row, 'datatype')
   const getFieldFromProposed = field => {
     return find(proposed?.attributes, attr => attr?.name?.toLowerCase()?.includes(field))?.value || ''
   }
 
+  const getValue = field => {
+    const col = find(columns, col => col?.label?.toLowerCase() == field.toLowerCase())
+    let val
+    if(col?.dataKey)
+      val = row[col.dataKey]
+    if(!val)
+      val = get(row, field) || get(row, field.toLowerCase())
+    return val
+  }
 
   return (
     <div className='col-xs-12 padding-0' style={{display: 'flex', margin: '8px 0', justifyContent: 'space-between'}}>
       <div style={{maxWidth: '45%'}}>
         <Typography component='span' sx={{color: 'rgba(0, 0, 0, 0.6)', fontSize: '12px'}}>Source Code</Typography>
         <div className='col-xs-12 padding-0'>
           <ListItemText
-            primary={row?.Name || row?.name || '-'}
+            primary={getValue('Name')}
             secondary={
               <span style={{fontSize: '12px'}}>
                 {
                 hasClass &&
-                    <>Class: <i>{row.Class || row['Concept Class']}</i>,</>
+                    <>Class: <i>{getValue('Property: Class') || getValue('Class') || getValue('concept_class')}</i>,</>
                 }
                 {
                   hasDatatype &&
-                    <>Datatype: <i>{row.Datatype}</i></>
+                    <>Datatype: <i>{getValue('Property: Datatype') || getValue('datatype')}</i></>
                 }
               </span>
             }