Hover to display code for mapped terms

NIH-NCPI · Nov 4, 2024 · 83d4f10 · 83d4f10
1 parent da00ecb
commit 83d4f10
Show file tree

Hide file tree

Showing 2 changed files with 18 additions and 4 deletions.
diff --git a/src/components/Projects/Tables/TableDetails.jsx b/src/components/Projects/Tables/TableDetails.jsx
@@ -4,7 +4,16 @@ import './TableStyling.scss';
 import { Link, useNavigate, useParams } from 'react-router-dom';
 import { Spinner } from '../../Manager/Spinner';
 import { getById } from '../../Manager/FetchManager';
-import { Card, Col, Form, notification, Row, Table, Button } from 'antd';
+import {
+  Button,
+  Card,
+  Col,
+  Form,
+  notification,
+  Row,
+  Table,
+  Tooltip,
+} from 'antd';
 import { CloseCircleOutlined } from '@ant-design/icons';
 import { EditTableDetails } from './EditTableDetails';
 import { DeleteTable } from './DeleteTable';
@@ -252,7 +261,10 @@ It then shows the mappings as table data and alows the user to delete a mapping
     if (variableMappings && variableMappings.mappings?.length) {
       return variableMappings.mappings.map(code => (
         <div className="mapping" key={code.display}>
-          <span className="mapping-display">{code.display}</span>
+          <span className="mapping-display">
+            {' '}
+            <Tooltip title={code.code}>{code.display}</Tooltip>
+          </span>
           <span
             className="remove-mapping"
             onClick={() => handleRemoveMapping(variableMappings, code)}

diff --git a/src/components/Projects/Terminologies/Terminology.jsx b/src/components/Projects/Terminologies/Terminology.jsx
@@ -4,7 +4,7 @@ import { myContext } from '../../../App';
 import './Terminology.scss';
 import { Spinner } from '../../Manager/Spinner';
 import { getById } from '../../Manager/FetchManager';
-import { Col, Form, notification, Row, Table, Button } from 'antd';
+import { Button, Col, Form, notification, Row, Table, Tooltip } from 'antd';
 import { CloseCircleOutlined } from '@ant-design/icons';
 import { EditMappingsModal } from './EditMappingModal';
 import { EditTerminologyDetails } from './EditTerminologyDetails';
@@ -137,7 +137,9 @@ It then shows the mappings as table data and alows the user to delete a mapping
     if (variableMappings && variableMappings.mappings?.length) {
       return variableMappings.mappings.map(code => (
         <div className="mapping" key={code.display}>
-          <span className="mapping-display">{code.display}</span>
+          <span className="mapping-display">
+            <Tooltip title={code.code}>{code.display}</Tooltip>
+          </span>
           <span
             className="remove-mapping"
             onClick={() => handleRemoveMapping(variableMappings, code)}