Feature/client feedback

lib/components/common/CustomMappingDropdown.tsx

@@ -17,7 +17,7 @@ import {CreateCustomDictionaryFieldHeader} from "./CreateCustomDictionaryFieldHe
 import {DataContext} from "../../contexts/data/DataContext.ts";
 import NoResultField from "./NoResultField.tsx";
 import {useUIContext} from "../../contexts/ui/UIContext.ts";
-import {getAbbreviationFromOption} from "../../helpers/optionsHelpers.ts";
+import {getTitleFromOption} from "../../helpers/optionsHelpers.ts";
 import { isCustomDictionaryValid } from '../../services/validatorsService.ts';
 
 const {
@@ -173,6 +173,7 @@ interface CustomEntitiesDropdownProps {
     options: {
         errors?: string;
         searchPlaceholder?: string;
+        initialSearchInput?: string;
         noResultReason?: string;
         onSearch: (searchValue: string) => Promise<Option[]>;
         onSelection: (option: Option, newIsSelectedState: boolean) => void;
@@ -201,6 +202,7 @@ export default function CustomEntitiesDropdown({
                                                    options: {
                                                        errors,
                                                        searchPlaceholder,
+                                                       initialSearchInput,
                                                        noResultReason,
                                                        onSearch,
                                                        onSelection,
@@ -225,7 +227,7 @@ export default function CustomEntitiesDropdown({
     const [hoveredOption, setHoveredOption] = useState<Option | null>(null);
     const [selectedOptions, setSelectedOptions] = useState<Option[]>(value ? [value] : []);
     const [searchResults, setSearchResults] = useState<Option[]>([]);
-    const [searchInput, setSearchInput] = useState('');
+    const [searchInput, setSearchInput] = useState(initialSearchInput || '');
     const [isLoading, setIsLoading] = useState(false);
 
     const {datasetMappingHeader, headerIndexes} = useContext(DataContext);
@@ -313,6 +315,7 @@ export default function CustomEntitiesDropdown({
             setSelectedOptions(updatedSelectedOptions);
         } else {
             setSelectedOptions([...selectedOptions, option]);
+            setAnchorEl(null);
         }
         onSelection(option, !isOptionAlreadySelected)
     };
@@ -329,8 +332,9 @@ export default function CustomEntitiesDropdown({
     const onCustomDictionaryFieldClose = (isConfirm: boolean) => {
         if (isConfirm) {
             if(isCustomDictionaryValid(customDictionaryFieldOption, headerIndexes)){
-                customDictionaryFieldOption.label = getAbbreviationFromOption(customDictionaryFieldOption, headerIndexes)
+                customDictionaryFieldOption.label = getTitleFromOption(customDictionaryFieldOption, headerIndexes)
                 onCustomDictionaryFieldCreation(customDictionaryFieldOption, true);
+                setAnchorEl(null);
             }else{
                 setErrorMessage("Missing at least one mandatory property (title or abbreviation) ")
             }
@@ -341,8 +345,8 @@ export default function CustomEntitiesDropdown({
         setCustomDictionaryFieldOption(getCustomDictionaryFieldOption())
     };
 
-    const getPreciseAbbreviation = (option: Option) => {
-        const selectedOptionTitle = getAbbreviationFromOption(option, headerIndexes)
+    const getSelectedOptionLabel = (option: Option) => {
+        const selectedOptionTitle = getTitleFromOption(option, headerIndexes)
         return selectedOptionTitle.length > 100 ? selectedOptionTitle.slice(0, 100) + "..." : selectedOptionTitle;
     };
 
@@ -545,6 +549,7 @@ export default function CustomEntitiesDropdown({
                             }
                         }}>
                             <TextField
+                                autoFocus
                                 fullWidth
                                 type="text"
                                 value={searchInput}
@@ -688,7 +693,7 @@ export default function CustomEntitiesDropdown({
                                                         className={'selected'}
                                                     >
                                                         <Typography sx={{width: 1, height: 1, padding: "0.625rem"}}>
-                                                            {getPreciseAbbreviation(option)}
+                                                            {getSelectedOptionLabel(option)}
                                                         </Typography>
                                                         <CheckIcon color="#070808"/>
                                                     </li>

lib/components/steps/mapping/MappingTab.tsx

@@ -308,7 +308,8 @@ const MappingTab = ({defaultCollection, numberOfUnmappedRows}: MappingProps) =>
         handleTourNextStepClick();
     }
 
-    const searchText = "Search in " + (selectableCollections.length === 1 ? `${selectableCollections[0].name} collection` : 'multiple collections');
+    const selectedCollections = selectableCollections.filter(collection => collection.selected)
+    const searchText = "Search in " + (selectedCollections.length === 1 ? `${selectedCollections[0].name} collection` : 'multiple collections');
 
     return (
         <Box className='mapping-step'>
@@ -358,6 +359,7 @@ const MappingTab = ({defaultCollection, numberOfUnmappedRows}: MappingProps) =>
                                             placeholder={"Choose CDE or Data Dictionary fields... "}
                                             options={{
                                                 searchPlaceholder: searchText,
+                                                initialSearchInput: variableName,
                                                 noResultReason: "We couldn’t find any results.",
                                                 onSearch: searchInCollections,
                                                 onSelection: (option, newIsSelectedState) => handleSelection(variableName, option, newIsSelectedState),

lib/contexts/data/DataContextProvider.tsx

@@ -108,8 +108,8 @@ export const DataContextProvider = ({
 
 
     const customDictionaryFields = useMemo(() => {
-        return getCustomDictionaryFields(additionalDatasetMappings, datasetMappingHeader, headerIndexes)
-    }, [additionalDatasetMappings, datasetMappingHeader, headerIndexes]);
+        return getCustomDictionaryFields(initialDatasetMapping, additionalDatasetMappings, datasetMappingHeader, headerIndexes)
+    }, [initialDatasetMapping, additionalDatasetMappings, datasetMappingHeader, headerIndexes]);
 
     const collectionsDictionary = useMemo(() => {
         return rawCollections.reduce((acc, collection, index) => {

lib/helpers/mappers.ts

@@ -8,7 +8,7 @@ import {
     UNIT_OF_MEASURE, UNIT_OF_MEASURE_CDE_KEY, VARIABLE_NAME_UI
 } from "../settings.ts";
 import {HeaderIndexes, Option} from "../models.ts";
-import {getId, getPreciseAbbreviation} from "./rowHelpers.ts";
+import {getId, getTitle} from "./rowHelpers.ts";
 import {getOptionGroupFromRow} from "./optionsHelpers.ts";
 
 
@@ -43,8 +43,7 @@ export function mapElasticSearchHitsToOptions(hits: Hit[], headerIndexes: Header
     return hits.filter(hit => hit._source.ilx).map(hit => {
         const source = hit._source;
         const id = source.ilx;
-        const preciseAbbrev = source.synonyms.find(s => s.type === 'abbrev')?.literal ||
-            (source.label ? source.label.substring(0, 5) + "_" + id : id);
+        const preciseAbbrev = source.synonyms.find(s => s.type === 'abbrev')?.literal || ''
 
         // Pre-fill the details array with mandatory fields at specified indexes
         const maxIndex = Math.max(...Object.values(headerIndexes));
@@ -85,7 +84,7 @@ export function mapElasticSearchHitsToOptions(hits: Hit[], headerIndexes: Header
 
         return {
             id,
-            label: preciseAbbrev,
+            label: source.label || '',
             group: CDE_OPTIONS_GROUP,
             content: details,
         };
@@ -95,7 +94,7 @@ export function mapElasticSearchHitsToOptions(hits: Hit[], headerIndexes: Header
 
 export const mapRowToOption = (row: string[], header: string[], headerIndexes: HeaderIndexes): Option => {
     const id = getId(row, headerIndexes)
-    const label = getPreciseAbbreviation(row, headerIndexes) || id
+    const label = getTitle(row, headerIndexes) || id
 
     const content = row.map((value: string, i: number) => ({
         title: header[i],

lib/helpers/optionsHelpers.ts

@@ -21,6 +21,8 @@ const findDetailValue = (details: OptionDetail[], title: string): string => {
 };
 
 export const getAbbreviationFromOption = (option: Option, headerIndexes: HeaderIndexes): string => option.content[headerIndexes.preciseAbbreviation].value;
+export const getTitleFromOption = (option: Option, headerIndexes: HeaderIndexes): string => option.content[headerIndexes.title].value;
+
 export const getDescriptionFromOption = (option: Option): string => findDetailValue(option.content, DESCRIPTION);
 
 export const isCustomDictionaryField = (option: Option): boolean => option.group === CUSTOM_DICTIONARY_FIELD_OPTIONS_GROUP

lib/helpers/rowHelpers.ts

@@ -8,6 +8,10 @@ export const getPreciseAbbreviation = (data: string[], headerIndexes: HeaderInde
     return data[headerIndexes.preciseAbbreviation];
 };
 
+export const getTitle = (data: string[], headerIndexes: HeaderIndexes): string => {
+    return data[headerIndexes.title];
+};
+
 export const getType = (row: string[], headerMapping: HeaderIndexes): EntityType => {
     const isMapped = isRowMapped(row, headerMapping)
 

lib/services/customDictionaryFieldService.ts

@@ -30,15 +30,16 @@ export function searchPreviousCustomDictionaryFields(queryString: string, custom
 
 
 export const getCustomDictionaryFields = (
+    initialDatasetMapping: DatasetMapping,
     additionalDatasetMappings: DatasetMapping[],
     datasetMappingHeader: string[],
     headerIndexes: HeaderIndexes
 ): Option[] => {
 
     const customDictionaryFields: Option[] = []
 
-
-    additionalDatasetMappings.forEach((datasetMapping: DatasetMapping) => {
+    const datasetMappings = [initialDatasetMapping, ...additionalDatasetMappings]
+    datasetMappings.forEach((datasetMapping: DatasetMapping) => {
         Object.values(datasetMapping).forEach((row: string[]) => {
             if (isRowCustomDictionaryField(row, headerIndexes)) {
                 customDictionaryFields.push(mapRowToOption(row, datasetMappingHeader, headerIndexes))