OpenConceptLab/ocl_issues#2244 | filters to indicate columns if mapped

Author: snyaggarwal

src/components/map-projects/Candidates.jsx

@@ -129,7 +129,7 @@ const CandidateList = ({candidates, header, rowIndex, orderBy, order, onOrderCha
   ): null
 }
 
-const Candidates = ({rowIndex, alert, setAlert, candidates, orderBy, order, onOrderChange, setShowItem, showItem, setShowHighlights, isSelectedForMap, onMap, onFetchMore, isLoading, candidatesScore, repoVersion, analysis, onFetchRecommendation, appliedFacets, setAppliedFacets, filters, facets}) => {
+const Candidates = ({rowIndex, alert, setAlert, candidates, orderBy, order, onOrderChange, setShowItem, showItem, setShowHighlights, isSelectedForMap, onMap, onFetchMore, isLoading, candidatesScore, repoVersion, analysis, onFetchRecommendation, appliedFacets, setAppliedFacets, filters, facets, columns}) => {
   const inAIAssistantGroup = hasAuthGroup(getCurrentUser(), 'mapper_ai_assistant')
   const [openFilters, setOpenFilters] = React.useState(false)
   const [display, setDisplay] = React.useState('card')
@@ -227,6 +227,7 @@ const Candidates = ({rowIndex, alert, setAlert, candidates, orderBy, order, onOr
               properties={repoVersion?.meta?.display?.concept_summary_properties}
               propertyFilters={repoVersion?.filters}
               heightToSubtract={523}
+              columns={columns}
             />
           </div>
       }

src/components/map-projects/MapProject.jsx

@@ -920,6 +920,7 @@ const MapProject = () => {
     return false
   }
 
+  const getValidColumns = () => filter(columns, column => isValidColumnValue(column.label))
 
   const onGetCandidates = event => {
     event.stopPropagation()
@@ -2027,6 +2028,7 @@ const MapProject = () => {
                       repoVersion={repoVersion}
                       onFetchRecommendation={fetchRecommendation}
                       analysis={analysis[rowIndex]}
+                      columns={getValidColumns()}
                       facets={facets[rowIndex]}
                       appliedFacets={appliedFacets[rowIndex]}
                       filters={getFilters(rowIndex)}
@@ -2052,6 +2054,7 @@ const MapProject = () => {
                       searchStr={searchStr}
                       setSearchStr={setSearchStr}
                       isLoading={isLoadingInDecisionView}
+                      columns={getValidColumns()}
                       facets={facets[rowIndex]}
                       appliedFacets={appliedFacets[rowIndex]}
                       filters={getFilters()}

src/components/map-projects/Search.jsx

@@ -22,7 +22,7 @@ import Mappings from './Mappings'
 import Concept from './Concept'
 import MapButton from './MapButton'
 
-const Search = ({searchStr, setSearchStr, onSearch, repo, repoVersion, concepts, setShowItem, showItem, isSelectedForMap, onMap, response, facets, appliedFacets, setAppliedFacets, isLoading, filters}) => {
+const Search = ({searchStr, setSearchStr, onSearch, repo, repoVersion, concepts, setShowItem, showItem, isSelectedForMap, onMap, response, facets, appliedFacets, setAppliedFacets, isLoading, filters, columns}) => {
   const [openFilters, setOpenFilters] = React.useState(false)
   const [display, setDisplay] = React.useState('card')
   let total = parseInt(response?.headers?.num_found) || concepts?.length || 0
@@ -124,6 +124,7 @@ const Search = ({searchStr, setSearchStr, onSearch, repo, repoVersion, concepts,
                 properties={repoVersion?.meta?.display?.concept_summary_properties}
                 propertyFilters={repoVersion?.filters}
                 heightToSubtract={523}
+                columns={columns}
             />
           </div>
         }

src/components/search/SearchFilters.jsx

@@ -1,7 +1,8 @@
 import React from 'react';
 import { useTranslation } from 'react-i18next';
-import {omit, omitBy, isEmpty, isObject, has, map, startCase, includes, get, without, forEach, flatten, values, pickBy, isEqual, filter, reject, cloneDeep, keys} from 'lodash';
+import {omit, omitBy, isEmpty, isObject, has, map, startCase, includes, get, without, forEach, flatten, values, pickBy, isEqual, filter, reject, cloneDeep, keys, find} from 'lodash';
 import InfoIcon from '@mui/icons-material/InfoOutlined';
+import MappedIcon from '@mui/icons-material/Link';
 import Button from '@mui/material/Button';
 import Badge from '@mui/material/Badge';
 import Tooltip from '@mui/material/Tooltip';
@@ -18,7 +19,7 @@ import CircularProgress from '@mui/material/CircularProgress';
 import { URIToParentParams, currentUserHasAccess } from '../../common/utils'
 import { FACET_ORDER } from './ResultConstants';
 
-const SearchFilters = ({filters, resource, onChange, kwargs, bgColor, appliedFilters, fieldOrder, noSubheader, disabledZero, filterDefinitions, nested, onSaveAsDefaultFilters, loading, repoDefaultFilters, propertyFilters, heightToSubtract, open}) => {
+const SearchFilters = ({filters, resource, onChange, kwargs, bgColor, appliedFilters, fieldOrder, noSubheader, disabledZero, filterDefinitions, nested, onSaveAsDefaultFilters, loading, repoDefaultFilters, propertyFilters, heightToSubtract, open, columns}) => {
   const { t } = useTranslation()
   const [applied, setApplied] = React.useState({});
   const [count, setCount] = React.useState(0);
@@ -96,14 +97,22 @@ const SearchFilters = ({filters, resource, onChange, kwargs, bgColor, appliedFil
     return label
   }
 
-  const formattedListSubheader = field => {
-    if(field.startsWith('properties__')){
-      const fields = field.split('__')
-      return startCase(fields[1])
-    } else if (isFixedConceptField(field)) {
-      return startCase(field)
+  const formattedListSubheader = field => field.startsWith('properties__') ? startCase(field.split('__')[1]) : startCase(field)
+
+  const getMappedToColumnName = field => {
+    let mappedColumnName;
+    if(columns?.length) {
+      let isProperty = field.startsWith('properties__')
+      if(isProperty) {
+        let name = field.split('__')[1]
+        mappedColumnName = find(columns, column => column.label.toLowerCase() === `Property: ${name}`.toLowerCase() || column.label.toLowerCase().includes(name.toLowerCase()))?.original
+        if(!mappedColumnName && name === 'concept_class')
+          mappedColumnName = find(columns, column => column.label.toLowerCase() === `Property: Class`.toLowerCase())?.original
+      } else {
+        mappedColumnName = find(columns, column => column.label.toLowerCase() === field.toLowerCase())?.original
+      }
     }
-    return startCase(field)
+    return mappedColumnName
   }
 
   const handleToggle = (field, value) => () => {
@@ -180,6 +189,7 @@ const SearchFilters = ({filters, resource, onChange, kwargs, bgColor, appliedFil
   const getFilterList = (fieldFilters, field) => {
     const shouldShowExpand = fieldFilters.length > 5
     const isExpanded = expanded.includes(field)
+    const mappedColumnName = getMappedToColumnName(field)
     return (
       <ListItem key={field} sx={{padding: 0, flexDirection: 'column'}}>
         <List
@@ -193,8 +203,17 @@ const SearchFilters = ({filters, resource, onChange, kwargs, bgColor, appliedFil
         >
           {
             !noSubheader &&
-              <ListSubheader sx={{padding: '0 8px 0 0px', fontWeight: 'bold', backgroundColor: bgColor, lineHeight: '30px'}}>
-                {formattedListSubheader(field)}
+              <ListSubheader sx={{padding: '0 8px 0 0px', fontWeight: 'bold', backgroundColor: bgColor, lineHeight: '30px', display: 'flex', alignItems: 'center', justifyContent: 'space-between'}}>
+                <span>{formattedListSubheader(field)}</span>
+                {
+                  mappedColumnName &&
+                    <Tooltip title={`Mapped to column ${mappedColumnName} from input sheet`}>
+                      <span style={{fontWeight: 'normal', fontSize: '12px', display: 'flex', alignItems: 'center'}}>
+                        <MappedIcon color='warning' sx={{marginRight: '4px', fontSize: '14px'}} />
+                        {mappedColumnName}
+                      </span>
+                    </Tooltip>
+                }
               </ListSubheader>
           }
           {
@@ -249,7 +268,6 @@ const SearchFilters = ({filters, resource, onChange, kwargs, bgColor, appliedFil
   }
 
 
-  const isFixedConceptField = field => isConcept && ['conceptClass', 'datatype'].includes(field)
   const canUpdateDefaultFilters = nested && onSaveAsDefaultFilters && currentUserHasAccess()
   const topBarHeight = canUpdateDefaultFilters ? 60 : 30
   let totalFilters = {...propertyFacets, ...uiFilters}