From cb6e028aaa71e9fe959dd3c755fb00c5e78ee303 Mon Sep 17 00:00:00 2001
From: Yelena Cox <yelenacox@gmail.com>
Date: Tue, 12 Nov 2024 10:31:22 -0600
Subject: [PATCH 01/30] committing to change branches

---
 src/components/Projects/Tables/TableStyling.scss    | 11 +++++------
 .../Projects/Terminologies/Terminology.jsx          | 13 ++++++++++++-
 2 files changed, 17 insertions(+), 7 deletions(-)

diff --git a/src/components/Projects/Tables/TableStyling.scss b/src/components/Projects/Tables/TableStyling.scss
index 64e5b6e..3e9e654 100644
--- a/src/components/Projects/Tables/TableStyling.scss
+++ b/src/components/Projects/Tables/TableStyling.scss
@@ -81,14 +81,13 @@ input::file-selector-button:hover {
     white-space: nowrap;
   }
   display: flex;
+  &:hover .remove-mapping {
+    transition: all 0.4s linear;
+    opacity: 1;
+  }
   .remove-mapping {
-    padding-left:.25rem;
+    padding-left: 0.25rem;
     cursor: pointer;
     opacity: 0;
-
-    &:hover {
-      transition: all .4s linear;
-      opacity: 1;
-    }
   }
 }
diff --git a/src/components/Projects/Terminologies/Terminology.jsx b/src/components/Projects/Terminologies/Terminology.jsx
index 6c7699b..4488e1d 100644
--- a/src/components/Projects/Terminologies/Terminology.jsx
+++ b/src/components/Projects/Terminologies/Terminology.jsx
@@ -14,7 +14,11 @@ import {
   Table,
   Tooltip,
 } from 'antd';
-import { CloseCircleOutlined } from '@ant-design/icons';
+import {
+  CloseCircleOutlined,
+  DownOutlined,
+  UpOutlined,
+} from '@ant-design/icons';
 import { EditMappingsModal } from './EditMappingModal';
 import { EditTerminologyDetails } from './EditTerminologyDetails';
 import { SettingsDropdownTerminology } from '../../Manager/Dropdown/SettingsDropdownTerminology';
@@ -153,6 +157,13 @@ 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_votes remove-mapping">
+            {/* <span
+            id="remove-mapping"
+          > */}
+            <UpOutlined style={{ color: 'blue' }} />
+            <DownOutlined style={{ color: 'green' }} />
+          </span>
           <span className="mapping-display">
             <Tooltip title={code.code}>
               {code.display ? code.display : code.code}

From ef6d90deed5f1cd5b32e6a06238e0440b10b81a5 Mon Sep 17 00:00:00 2001
From: Yelena Cox <yelenacox@gmail.com>
Date: Tue, 12 Nov 2024 11:37:57 -0600
Subject: [PATCH 02/30] committing to go back to main

---
 src/components/Manager/Utilitiy.jsx           | 11 +++++++
 .../Projects/Tables/TableDetails.jsx          | 27 ++++++++++++----
 .../Projects/Tables/TableStyling.scss         | 10 ++++--
 .../Projects/Terminologies/Terminology.jsx    | 32 +++++++++++--------
 4 files changed, 58 insertions(+), 22 deletions(-)

diff --git a/src/components/Manager/Utilitiy.jsx b/src/components/Manager/Utilitiy.jsx
index 787a5d3..0cbe232 100644
--- a/src/components/Manager/Utilitiy.jsx
+++ b/src/components/Manager/Utilitiy.jsx
@@ -62,3 +62,14 @@ export const ontologyCounts = arr => {
 };
 
 export const cleanedName = data => data?.toLowerCase().replaceAll(' ', '_');
+
+export const mappingTooltip = code => {
+  return (
+    <>
+      <div className="mapping_tooltip">
+        <div>{code.code}</div>
+        <div>{code?.display}</div>
+      </div>
+    </>
+  );
+};
diff --git a/src/components/Projects/Tables/TableDetails.jsx b/src/components/Projects/Tables/TableDetails.jsx
index e722a53..e3e9aea 100644
--- a/src/components/Projects/Tables/TableDetails.jsx
+++ b/src/components/Projects/Tables/TableDetails.jsx
@@ -15,7 +15,11 @@ import {
   Table,
   Tooltip,
 } from 'antd';
-import { CloseCircleOutlined } from '@ant-design/icons';
+import {
+  CloseCircleOutlined,
+  UpCircleOutlined,
+  DownCircleOutlined,
+} from '@ant-design/icons';
 import { EditTableDetails } from './EditTableDetails';
 import { DeleteTable } from './DeleteTable';
 import { LoadVariables } from './LoadVariables';
@@ -31,6 +35,7 @@ import { SettingsDropdownTable } from '../../Manager/Dropdown/SettingsDropdownTa
 import { RequiredLogin } from '../../Auth/RequiredLogin';
 import { FilterSelect } from '../../Manager/MappingsFunctions/FilterSelect';
 import { SearchContext } from '../../../Contexts/SearchContext';
+import { ellipsisString } from '../../Manager/Utilitiy';
 
 export const TableDetails = () => {
   const [form] = Form.useForm();
@@ -248,16 +253,26 @@ It then shows the mappings as table data and alows the user to delete a mapping
     const variableMappings = mapping.find(
       item => item?.code === variable?.code
     );
-
     if (variableMappings && variableMappings.mappings?.length) {
       return variableMappings.mappings.map(code => (
-        <div className="mapping" key={code.display}>
+        <div className="mapping" key={code.code}>
+          <span className="mapping_votes mapping_actions">
+            <UpCircleOutlined style={{ color: 'blue' }} />
+            <DownCircleOutlined style={{ color: 'green' }} />
+          </span>
           <span className="mapping-display">
-            {' '}
-            <Tooltip title={code.code}>{code.display}</Tooltip>
+            <Tooltip
+              title={
+                (code.display ? code.display : code.code).length > 25
+                  ? mappingTooltip(code)
+                  : code.code
+              }
+            >
+              {ellipsisString(code.display ? code.display : code.code, '25')}
+            </Tooltip>
           </span>
           <span
-            className="remove-mapping"
+            className="mapping_actions"
             onClick={() => handleRemoveMapping(variableMappings, code)}
           >
             <CloseCircleOutlined style={{ color: 'red' }} />
diff --git a/src/components/Projects/Tables/TableStyling.scss b/src/components/Projects/Tables/TableStyling.scss
index 3e9e654..f6adc5e 100644
--- a/src/components/Projects/Tables/TableStyling.scss
+++ b/src/components/Projects/Tables/TableStyling.scss
@@ -81,13 +81,19 @@ input::file-selector-button:hover {
     white-space: nowrap;
   }
   display: flex;
-  &:hover .remove-mapping {
+  &:hover .mapping_actions {
     transition: all 0.4s linear;
     opacity: 1;
   }
-  .remove-mapping {
+  .mapping_actions {
     padding-left: 0.25rem;
     cursor: pointer;
     opacity: 0;
   }
 }
+
+.mapping_votes {
+  display: flex;
+  gap: 2px;
+  padding-right: 0.25rem;
+}
diff --git a/src/components/Projects/Terminologies/Terminology.jsx b/src/components/Projects/Terminologies/Terminology.jsx
index 4488e1d..234c6dd 100644
--- a/src/components/Projects/Terminologies/Terminology.jsx
+++ b/src/components/Projects/Terminologies/Terminology.jsx
@@ -16,8 +16,8 @@ import {
 } from 'antd';
 import {
   CloseCircleOutlined,
-  DownOutlined,
-  UpOutlined,
+  DownCircleOutlined,
+  UpCircleOutlined,
 } from '@ant-design/icons';
 import { EditMappingsModal } from './EditMappingModal';
 import { EditTerminologyDetails } from './EditTerminologyDetails';
@@ -32,6 +32,7 @@ import { PreferredTerminology } from './PreferredTerminology';
 import { SearchContext } from '../../../Contexts/SearchContext';
 import { FilterSelect } from '../../Manager/MappingsFunctions/FilterSelect';
 import { AssignMappingsViaButton } from './AssignMappingsViaButton';
+import { ellipsisString, mappingTooltip } from '../../Manager/Utilitiy';
 
 export const Terminology = () => {
   const [form] = Form.useForm();
@@ -153,24 +154,26 @@ It then shows the mappings as table data and alows the user to delete a mapping
     const variableMappings = mapping.find(
       item => item?.code === variable?.code
     );
-
     if (variableMappings && variableMappings.mappings?.length) {
       return variableMappings.mappings.map(code => (
-        <div className="mapping" key={code.display}>
-          <span className="mapping_votes remove-mapping">
-            {/* <span
-            id="remove-mapping"
-          > */}
-            <UpOutlined style={{ color: 'blue' }} />
-            <DownOutlined style={{ color: 'green' }} />
+        <div className="mapping" key={code.code}>
+          <span className="mapping_votes mapping_actions">
+            <UpCircleOutlined style={{ color: 'blue' }} />
+            <DownCircleOutlined style={{ color: 'green' }} />
           </span>
           <span className="mapping-display">
-            <Tooltip title={code.code}>
-              {code.display ? code.display : code.code}
+            <Tooltip
+              title={
+                (code.display ? code.display : code.code).length > 25
+                  ? mappingTooltip(code)
+                  : code.code
+              }
+            >
+              {ellipsisString(code.display ? code.display : code.code, '25')}
             </Tooltip>
           </span>
           <span
-            className="remove-mapping"
+            className="mapping_actions"
             onClick={() => handleRemoveMapping(variableMappings, code)}
           >
             <CloseCircleOutlined style={{ color: 'red' }} />
@@ -304,8 +307,9 @@ It then shows the mappings as table data and alows the user to delete a mapping
     {
       title: 'Description',
       dataIndex: 'description',
+      width: 300,
     },
-    { title: 'Mapped Terms', dataIndex: 'mapped_terms', width: 90 },
+    { title: 'Mapped Terms', dataIndex: 'mapped_terms', width: 120 },
     {
       title: '',
       dataIndex: 'delete_column',

From fed2769f6082f592061bfba83ae6df78c5446353 Mon Sep 17 00:00:00 2001
From: Yelena Cox <yelenacox@gmail.com>
Date: Tue, 12 Nov 2024 22:08:16 -0600
Subject: [PATCH 03/30] Began work on voting on a mapping

---
 .../MappingsFunctions/MappingVotes.jsx        | 41 +++++++++++
 .../Projects/Tables/TableDetails.jsx          | 16 +++--
 .../Projects/Tables/TableStyling.scss         | 10 ++-
 .../Projects/Terminologies/Terminology.jsx    | 68 +++++++++++++------
 4 files changed, 108 insertions(+), 27 deletions(-)
 create mode 100644 src/components/Manager/MappingsFunctions/MappingVotes.jsx

diff --git a/src/components/Manager/MappingsFunctions/MappingVotes.jsx b/src/components/Manager/MappingsFunctions/MappingVotes.jsx
new file mode 100644
index 0000000..84512a8
--- /dev/null
+++ b/src/components/Manager/MappingsFunctions/MappingVotes.jsx
@@ -0,0 +1,41 @@
+export const MappingVotes = (
+  variableMappings,
+  code,
+  user,
+  vote,
+  vocabUrl,
+  terminologyId,
+  notification
+) => {
+  const mappingVoteDTO = {
+    editor: user?.email,
+    vote: vote,
+  };
+
+  return fetch(
+    `${vocabUrl}/Terminology/${terminologyId}/user_input/${variableMappings?.code}/${code?.code}/mapping_votes`,
+    {
+      method: 'PUT',
+      headers: {
+        'Content-Type': 'application/json',
+      },
+      body: JSON.stringify(mappingVoteDTO),
+    }
+  )
+    .then(res => {
+      if (res.ok) {
+        return res.json();
+      } else {
+        throw new Error('An unknown error occurred.');
+      }
+    })
+    .catch(error => {
+      if (error) {
+        notification.error({
+          message: 'Error',
+          description: 'An error occurred saving the ontology preferences.',
+        });
+      }
+      return error;
+    });
+};
diff --git a/src/components/Projects/Tables/TableDetails.jsx b/src/components/Projects/Tables/TableDetails.jsx
index e3e9aea..c8f9398 100644
--- a/src/components/Projects/Tables/TableDetails.jsx
+++ b/src/components/Projects/Tables/TableDetails.jsx
@@ -235,13 +235,15 @@ and returns the length of the mapping array (i.e. returns the number of variable
 It then shows the mappings as table data and alows the user to delete a mapping from the table.*/
   const noMapping = variable => {
     return (
-      <Button
-        onClick={() =>
-          setGetMappings({ name: variable.name, code: variable.code })
-        }
-      >
-        Get Mappings
-      </Button>
+      <div className="no_mapping_button">
+        <Button
+          onClick={() =>
+            setGetMappings({ name: variable.name, code: variable.code })
+          }
+        >
+          Get Mappings
+        </Button>
+      </div>
     );
   };
 
diff --git a/src/components/Projects/Tables/TableStyling.scss b/src/components/Projects/Tables/TableStyling.scss
index f6adc5e..89ad784 100644
--- a/src/components/Projects/Tables/TableStyling.scss
+++ b/src/components/Projects/Tables/TableStyling.scss
@@ -81,6 +81,7 @@ input::file-selector-button:hover {
     white-space: nowrap;
   }
   display: flex;
+  align-items: center;
   &:hover .mapping_actions {
     transition: all 0.4s linear;
     opacity: 1;
@@ -94,6 +95,13 @@ input::file-selector-button:hover {
 
 .mapping_votes {
   display: flex;
-  gap: 2px;
+  flex-direction: column;
+  align-items: center;
+  // gap: 2px;
   padding-right: 0.25rem;
+  font-size: 0.7rem;
+}
+
+.no_mapping_button {
+  padding-left: 2rem;
 }
diff --git a/src/components/Projects/Terminologies/Terminology.jsx b/src/components/Projects/Terminologies/Terminology.jsx
index 234c6dd..8bb2d56 100644
--- a/src/components/Projects/Terminologies/Terminology.jsx
+++ b/src/components/Projects/Terminologies/Terminology.jsx
@@ -16,8 +16,8 @@ import {
 } from 'antd';
 import {
   CloseCircleOutlined,
-  DownCircleOutlined,
-  UpCircleOutlined,
+  DownOutlined,
+  UpOutlined,
 } from '@ant-design/icons';
 import { EditMappingsModal } from './EditMappingModal';
 import { EditTerminologyDetails } from './EditTerminologyDetails';
@@ -33,6 +33,7 @@ import { SearchContext } from '../../../Contexts/SearchContext';
 import { FilterSelect } from '../../Manager/MappingsFunctions/FilterSelect';
 import { AssignMappingsViaButton } from './AssignMappingsViaButton';
 import { ellipsisString, mappingTooltip } from '../../Manager/Utilitiy';
+import { MappingVotes } from '../../Manager/MappingsFunctions/MappingVotes';
 
 export const Terminology = () => {
   const [form] = Form.useForm();
@@ -129,21 +130,23 @@ and returns the length of the mapping array (i.e. returns the number of codes ma
 It then shows the mappings as table data and alows the user to delete a mapping from the table.*/
 
   const noMapping = variable => (
-    <Button
-      onClick={() => {
-        prefTerminologies.length > 0
-          ? setAssignMappingsViaButton({
-              display: variable.display,
-              code: variable.code,
-            })
-          : setGetMappings({
-              display: variable.display,
-              code: variable.code,
-            });
-      }}
-    >
-      {prefTerminologies?.length > 0 ? 'Assign Mappings' : 'Get Mappings'}
-    </Button>
+    <div className="no_mapping_button">
+      <Button
+        onClick={() => {
+          prefTerminologies.length > 0
+            ? setAssignMappingsViaButton({
+                display: variable.display,
+                code: variable.code,
+              })
+            : setGetMappings({
+                display: variable.display,
+                code: variable.code,
+              });
+        }}
+      >
+        {prefTerminologies?.length > 0 ? 'Assign Mappings' : 'Get Mappings'}
+      </Button>
+    </div>
   );
 
   const matchCode = variable => {
@@ -158,8 +161,35 @@ It then shows the mappings as table data and alows the user to delete a mapping
       return variableMappings.mappings.map(code => (
         <div className="mapping" key={code.code}>
           <span className="mapping_votes mapping_actions">
-            <UpCircleOutlined style={{ color: 'blue' }} />
-            <DownCircleOutlined style={{ color: 'green' }} />
+            <UpOutlined
+              style={{ color: 'blue' }}
+              onClick={() =>
+                MappingVotes(
+                  variableMappings,
+                  code,
+                  user,
+                  'up',
+                  vocabUrl,
+                  terminologyId,
+                  notification
+                )
+              }
+            />
+            0
+            <DownOutlined
+              style={{ color: 'green' }}
+              onClick={() =>
+                MappingVotes(
+                  variableMappings,
+                  code,
+                  user,
+                  'down',
+                  vocabUrl,
+                  terminologyId,
+                  notification
+                )
+              }
+            />
           </span>
           <span className="mapping-display">
             <Tooltip

From 2155c5d96aa1db4292ab2bb6ebe5c52ea8de021e Mon Sep 17 00:00:00 2001
From: Yelena Cox <yelenacox@gmail.com>
Date: Wed, 13 Nov 2024 12:48:58 -0600
Subject: [PATCH 04/30] Began work on adding mapping comments

---
 .../MappingsFunctions/FilterOntology.jsx      |  17 +--
 .../MappingsFunctions/MappingComments.jsx     | 101 ++++++++++++++++++
 .../MappingsFunctions/MappingVotes.jsx        |   2 +-
 .../SelectPreferredTerminologies.jsx          |  33 +-----
 .../Projects/Terminologies/Terminology.jsx    |  19 ++++
 5 files changed, 123 insertions(+), 49 deletions(-)
 create mode 100644 src/components/Manager/MappingsFunctions/MappingComments.jsx

diff --git a/src/components/Manager/MappingsFunctions/FilterOntology.jsx b/src/components/Manager/MappingsFunctions/FilterOntology.jsx
index 595e074..167d012 100644
--- a/src/components/Manager/MappingsFunctions/FilterOntology.jsx
+++ b/src/components/Manager/MappingsFunctions/FilterOntology.jsx
@@ -87,21 +87,6 @@ export const FilterOntology = ({
     }
   };
 
-  const selectedOntDisplay = (ont, i) => {
-    return (
-      <>
-        <div key={i} className="modal_search_result">
-          <div>
-            <div className="modal_term_ontology">
-              <div>{ont?.curie}</div>
-            </div>
-            <div>{ont?.ontology_title}</div>
-          </div>
-        </div>
-      </>
-    );
-  };
-
   const checkBoxDisplay = (ont, i) => {
     return (
       <>
@@ -211,7 +196,7 @@ export const FilterOntology = ({
                     value={selected}
                     onChange={e => onCheckboxChange(e, selected)}
                   >
-                    {selectedOntDisplay(selected, i)}
+                    {checkBoxDisplay(selected, i)}
                   </Checkbox>
                 ))}
               </div>
diff --git a/src/components/Manager/MappingsFunctions/MappingComments.jsx b/src/components/Manager/MappingsFunctions/MappingComments.jsx
new file mode 100644
index 0000000..6b6ce4d
--- /dev/null
+++ b/src/components/Manager/MappingsFunctions/MappingComments.jsx
@@ -0,0 +1,101 @@
+import { Button, Form, Input, Modal, notification } from 'antd';
+import { useContext } from 'react';
+import { myContext } from '../../../App';
+
+export const MappingComments = ({
+  code,
+  variableMappings,
+  setComment,
+  terminologyId,
+}) => {
+  const [form] = Form.useForm();
+  const { vocabUrl, user } = useContext(myContext);
+  const { TextArea } = Input;
+
+  const onClose = () => {
+    setComment(null);
+  };
+
+  const onFinish = values => {
+    const mappingCommentDTO = {
+      editor: user?.email,
+      note: values.comment,
+    };
+
+    return fetch(
+      `${vocabUrl}/Terminology/${terminologyId}/user_input/${variableMappings}/${code}/mapping_conversations`,
+      {
+        method: 'PUT',
+        headers: {
+          'Content-Type': 'application/json',
+        },
+        body: JSON.stringify(mappingCommentDTO),
+      }
+    )
+      .then(res => {
+        if (res.ok) {
+          return res.json();
+        } else {
+          throw new Error('An unknown error occurred.');
+        }
+      })
+      .catch(error => {
+        if (error) {
+          notification.error({
+            message: 'Error',
+            description: 'An error occurred saving the comment.',
+          });
+        }
+        return error;
+      });
+  };
+
+  return (
+    <>
+      <Modal
+        open={!!code}
+        width={'70%'}
+        styles={{
+          body: {
+            minHeight: '60vh',
+            maxHeight: '60vh',
+          },
+        }}
+        footer={[<Button onClick={onClose}>Close</Button>]}
+        maskClosable={false}
+        closeIcon={false}
+        destroyOnClose={true}
+      >
+        <Form
+          form={form}
+          layout="inline"
+          onFinish={() => {
+            form.validateFields().then(values => {
+              onFinish(values);
+              onClose();
+            });
+          }}
+          preserve={false}
+        >
+          <Form.Item name="comment">
+            <TextArea
+              rows={1}
+              style={{
+                width: 500,
+                resize: 'both',
+              }}
+              showCount
+              maxLength={1000}
+              autoFocus
+            />
+          </Form.Item>
+          <Form.Item>
+            <Button type="primary" htmlType="submit">
+              Comment
+            </Button>
+          </Form.Item>
+        </Form>
+      </Modal>
+    </>
+  );
+};
diff --git a/src/components/Manager/MappingsFunctions/MappingVotes.jsx b/src/components/Manager/MappingsFunctions/MappingVotes.jsx
index 84512a8..e15d5ff 100644
--- a/src/components/Manager/MappingsFunctions/MappingVotes.jsx
+++ b/src/components/Manager/MappingsFunctions/MappingVotes.jsx
@@ -33,7 +33,7 @@ export const MappingVotes = (
       if (error) {
         notification.error({
           message: 'Error',
-          description: 'An error occurred saving the ontology preferences.',
+          description: 'An error occurred saving the vote.',
         });
       }
       return error;
diff --git a/src/components/Projects/Terminologies/SelectPreferredTerminologies.jsx b/src/components/Projects/Terminologies/SelectPreferredTerminologies.jsx
index a7fdaa1..1062e83 100644
--- a/src/components/Projects/Terminologies/SelectPreferredTerminologies.jsx
+++ b/src/components/Projects/Terminologies/SelectPreferredTerminologies.jsx
@@ -96,37 +96,6 @@ export const SelectPreferredTerminologies = ({
     setTerminologies(updatedTerminologies);
   };
 
-  const selectedTermsDisplay = (selected, index) => {
-    return (
-      <>
-        <div key={index} className="modal_display_result">
-          <div>
-            <div className="modal_term_ontology">
-              <div>
-                <Link
-                  to={`/Terminology/${selected.id}`}
-                  target="_blank"
-                  className="terminology_link"
-                >
-                  <b>{selected?.name ? selected.name : selected.id}</b>
-                </Link>
-              </div>
-            </div>
-            <div>
-              {selected?.description?.length > 125 ? (
-                <Tooltip title={selected?.description} mouseEnterDelay={0.5}>
-                  {ellipsisString(selected?.description, '125')}
-                </Tooltip>
-              ) : (
-                ellipsisString(selected?.description, '125')
-              )}
-            </div>
-          </div>
-        </div>
-      </>
-    );
-  };
-
   const checkBoxDisplay = (item, index) => {
     return (
       <>
@@ -238,7 +207,7 @@ export const SelectPreferredTerminologies = ({
                         value={selected}
                         onChange={e => onCheckboxChange(e, selected)}
                       >
-                        {selectedTermsDisplay(selected, i)}
+                        {checkBoxDisplay(selected, i)}
                       </Checkbox>
                     ))}
                   </div>
diff --git a/src/components/Projects/Terminologies/Terminology.jsx b/src/components/Projects/Terminologies/Terminology.jsx
index 8bb2d56..6d6b218 100644
--- a/src/components/Projects/Terminologies/Terminology.jsx
+++ b/src/components/Projects/Terminologies/Terminology.jsx
@@ -17,6 +17,7 @@ import {
 import {
   CloseCircleOutlined,
   DownOutlined,
+  MessageOutlined,
   UpOutlined,
 } from '@ant-design/icons';
 import { EditMappingsModal } from './EditMappingModal';
@@ -34,6 +35,7 @@ import { FilterSelect } from '../../Manager/MappingsFunctions/FilterSelect';
 import { AssignMappingsViaButton } from './AssignMappingsViaButton';
 import { ellipsisString, mappingTooltip } from '../../Manager/Utilitiy';
 import { MappingVotes } from '../../Manager/MappingsFunctions/MappingVotes';
+import { MappingComments } from '../../Manager/MappingsFunctions/MappingComments';
 
 export const Terminology = () => {
   const [form] = Form.useForm();
@@ -55,6 +57,7 @@ export const Terminology = () => {
     parseInt(localStorage.getItem('pageSize'), 10) || 10
   );
   const [assignMappingsViaButton, setAssignMappingsViaButton] = useState(false);
+  const [comment, setComment] = useState(false);
   const handleTableChange = (current, size) => {
     setPageSize(size);
   };
@@ -160,6 +163,16 @@ 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.code}>
+          <span className="mapping_actions">
+            <MessageOutlined
+              onClick={() =>
+                setComment({
+                  code: code.code,
+                  variableMappings: variableMappings.code,
+                })
+              }
+            />
+          </span>
           <span className="mapping_votes mapping_actions">
             <UpOutlined
               style={{ color: 'blue' }}
@@ -493,6 +506,12 @@ It then shows the mappings as table data and alows the user to delete a mapping
             setAssignMappingsViaButton={setAssignMappingsViaButton}
             terminology={terminology}
           />
+          <MappingComments
+            code={comment?.code}
+            variableMappings={comment?.variableMappings}
+            setComment={setComment}
+            terminologyId={terminologyId}
+          />
         </div>
       )}
     </>

From d96237f78bfccac35c1c0bcfc4445dbd10561bee Mon Sep 17 00:00:00 2001
From: Yelena Cox <yelenacox@gmail.com>
Date: Thu, 14 Nov 2024 11:17:16 -0600
Subject: [PATCH 05/30] Added mapping display to mapping comments

---
 src/components/Manager/MappingsFunctions/MappingComments.jsx | 2 ++
 src/components/Projects/Terminologies/Terminology.jsx        | 2 ++
 2 files changed, 4 insertions(+)

diff --git a/src/components/Manager/MappingsFunctions/MappingComments.jsx b/src/components/Manager/MappingsFunctions/MappingComments.jsx
index 6b6ce4d..fa58ed9 100644
--- a/src/components/Manager/MappingsFunctions/MappingComments.jsx
+++ b/src/components/Manager/MappingsFunctions/MappingComments.jsx
@@ -4,6 +4,7 @@ import { myContext } from '../../../App';
 
 export const MappingComments = ({
   code,
+  codeDisplay,
   variableMappings,
   setComment,
   terminologyId,
@@ -66,6 +67,7 @@ export const MappingComments = ({
         closeIcon={false}
         destroyOnClose={true}
       >
+        {variableMappings} : {codeDisplay}
         <Form
           form={form}
           layout="inline"
diff --git a/src/components/Projects/Terminologies/Terminology.jsx b/src/components/Projects/Terminologies/Terminology.jsx
index 6d6b218..5714b6c 100644
--- a/src/components/Projects/Terminologies/Terminology.jsx
+++ b/src/components/Projects/Terminologies/Terminology.jsx
@@ -168,6 +168,7 @@ It then shows the mappings as table data and alows the user to delete a mapping
               onClick={() =>
                 setComment({
                   code: code.code,
+                  display: code.display,
                   variableMappings: variableMappings.code,
                 })
               }
@@ -508,6 +509,7 @@ It then shows the mappings as table data and alows the user to delete a mapping
           />
           <MappingComments
             code={comment?.code}
+            codeDisplay={comment?.display}
             variableMappings={comment?.variableMappings}
             setComment={setComment}
             terminologyId={terminologyId}

From 001c641dd9cf433e8a55a9f8f32ec432bf31d94b Mon Sep 17 00:00:00 2001
From: Yelena Cox <yelenacox@gmail.com>
Date: Mon, 25 Nov 2024 16:11:29 -0600
Subject: [PATCH 06/30] First pass at mapping relationship in GetMappingsModal

---
 .env                                          |  4 +--
 src/Contexts/MappingContext.jsx               |  6 ++++
 .../MappingsFunctions/GetMappingsModal.jsx    | 35 ++++++++++++++----
 .../MappingsFunctions/MappingRelationship.jsx | 36 +++++++++++++++++++
 .../Projects/Tables/TableDetails.jsx          |  6 ++++
 5 files changed, 79 insertions(+), 8 deletions(-)
 create mode 100644 src/components/Manager/MappingsFunctions/MappingRelationship.jsx

diff --git a/.env b/.env
index 85f0aac..fd0a3d4 100644
--- a/.env
+++ b/.env
@@ -1,7 +1,7 @@
 VITE_SEARCH_ENDPOINT = https://www.ebi.ac.uk/ols4/api/search?
 VITE_MONARCH_SEARCH = https://api-v3.monarchinitiative.org/v3/api/search?
 # VITE_VOCAB_ENDPOINT = http://127.0.0.1:5000/api # local
-VITE_VOCAB_ENDPOINT = https://locutus-110109177269.us-central1.run.app/api # dev
-# VITE_VOCAB_ENDPOINT = https://locutus-1066621297011.us-central1.run.app/api # uat
+VITE_VOCAB_ENDPOINT = https://locutus-dev-110109177269.us-central1.run.app/api # dev
+# VITE_VOCAB_ENDPOINT = https://locutus-uat-1066621297011.us-central1.run.app/api # uat
 VITE_CLIENT_ID = 907694787484-36jr4oaf04mmniik6482batc87ejemm8.apps.googleusercontent.com
 VITE_MAPDRAGON_VERSION = "Development"
\ No newline at end of file
diff --git a/src/Contexts/MappingContext.jsx b/src/Contexts/MappingContext.jsx
index 97102e7..69b1884 100644
--- a/src/Contexts/MappingContext.jsx
+++ b/src/Contexts/MappingContext.jsx
@@ -13,6 +13,8 @@ export function MappingContextRoot() {
   const [selectedMappings, setSelectedMappings] = useState([]);
   const [displaySelectedMappings, setDisplaySelectedMappings] = useState([]);
   const [selectedBoxes, setSelectedBoxes] = useState([]);
+  const [relationshipOptions, setRelationshipOptions] = useState([]);
+  const [idsForSelect, setIdsForSelect] = useState([]);
 
   const context = {
     editMappings,
@@ -33,6 +35,10 @@ export function MappingContextRoot() {
     setSelectedBoxes,
     assignMappings,
     setAssignMappings,
+    relationshipOptions,
+    setRelationshipOptions,
+    idsForSelect,
+    setIdsForSelect,
   };
 
   return (
diff --git a/src/components/Manager/MappingsFunctions/GetMappingsModal.jsx b/src/components/Manager/MappingsFunctions/GetMappingsModal.jsx
index f71d663..911e0dc 100644
--- a/src/components/Manager/MappingsFunctions/GetMappingsModal.jsx
+++ b/src/components/Manager/MappingsFunctions/GetMappingsModal.jsx
@@ -17,7 +17,7 @@ import { getFiltersByCode, olsFilterOntologiesSearch } from '../FetchManager';
 import { OntologyCheckboxes } from './OntologyCheckboxes';
 import { OntologyFilterCodeSubmit } from './OntologyFilterCodeSubmit';
 import { OntologyFilterCodeSubmitTerm } from './OntologyFilterCodeSubmitTerm';
-import { useParams } from 'react-router-dom';
+import { MappingRelationship } from './MappingRelationship';
 
 export const GetMappingsModal = ({
   componentString,
@@ -54,18 +54,21 @@ export const GetMappingsModal = ({
   const [filteredResultsCount, setFilteredResultsCount] = useState(0);
   const [inputValue, setInputValue] = useState(searchProp); //Sets the value of the search bar
   const [currentSearchProp, setCurrentSearchProp] = useState(searchProp);
+
   const {
     setSelectedMappings,
     displaySelectedMappings,
     setDisplaySelectedMappings,
     selectedBoxes,
     setSelectedBoxes,
+    idsForSelect,
   } = useContext(MappingContext);
   let ref = useRef();
   // since the code is passed through searchProp, the '!!' forces it to be evaluated as a boolean.
   // if there is a searchProp being passed, it evaluates to true and runs the search function.
   // inputValue and currentSearchProp for the search bar is set to the passed searchProp.
   // The function is run when the code changes.
+
   useEffect(() => {
     setInputValue(searchProp);
     setCurrentSearchProp(searchProp);
@@ -137,11 +140,7 @@ export const GetMappingsModal = ({
 
   const onClose = () => {
     setPage(0);
-    setResults([]);
-    setSelectedMappings([]);
-    setDisplaySelectedMappings([]);
     setApiPreferencesCode(undefined);
-    setSelectedBoxes([]);
     setSelectedKey(null);
     setPrefTerminologies([]);
   };
@@ -161,11 +160,14 @@ export const GetMappingsModal = ({
       display: item.label,
       description: item.description[0],
       system: systemsMatch(item.obo_id.split(':')[0], ontologyApis),
+      mapping_relationship: idsForSelect[item.obo_id],
     }));
+
     const mappingsDTO = {
       mappings: selectedMappings,
       editor: user.email,
     };
+
     setLoading(true);
     fetch(
       `${vocabUrl}/${componentString}/${component.id}/mapping/${mappingProp}`,
@@ -186,9 +188,22 @@ export const GetMappingsModal = ({
       })
       .then(data => {
         setMapping(data.codes);
-        form.resetFields();
         setGetMappings(null);
         message.success('Changes saved successfully.');
+        form.resetFields();
+        setResults([]);
+        setSelectedMappings([]);
+        setDisplaySelectedMappings([]);
+        setSelectedBoxes([]);
+      })
+      .catch(error => {
+        if (error) {
+          notification.error({
+            message: 'Error',
+            description: 'An error occurred saving the mapping.',
+          });
+        }
+        return error;
       })
       .finally(() => setLoading(false));
     table
@@ -321,6 +336,9 @@ export const GetMappingsModal = ({
                   {d?.obo_id}
                 </a>
               </div>
+              <div>
+                <MappingRelationship mapping={d} />
+              </div>
             </div>
             <div>{ellipsisString(d?.description[0], '100')}</div>
           </div>
@@ -404,8 +422,13 @@ export const GetMappingsModal = ({
         }}
         onCancel={() => {
           onClose();
+          setResults([]);
           form.resetFields();
           setGetMappings(null);
+          setResults([]);
+          setSelectedMappings([]);
+          setDisplaySelectedMappings([]);
+          setSelectedBoxes([]);
         }}
         maskClosable={false}
         destroyOnClose={true}
diff --git a/src/components/Manager/MappingsFunctions/MappingRelationship.jsx b/src/components/Manager/MappingsFunctions/MappingRelationship.jsx
new file mode 100644
index 0000000..375b7e4
--- /dev/null
+++ b/src/components/Manager/MappingsFunctions/MappingRelationship.jsx
@@ -0,0 +1,36 @@
+import { Select } from 'antd';
+import { useContext } from 'react';
+import { MappingContext } from '../../../Contexts/MappingContext';
+
+export const MappingRelationship = ({ mapping }) => {
+  const { relationshipOptions, idsForSelect, setIdsForSelect } =
+    useContext(MappingContext);
+
+  const handleSelectChange = (obo_id, value) => {
+    setIdsForSelect(prev => ({
+      ...prev,
+      [obo_id]: value,
+    }));
+  };
+
+  const options = relationshipOptions.map(ro => {
+    return {
+      value: ro.code,
+      label: ro.display,
+    };
+  });
+
+  return (
+    <Select
+      options={options}
+      style={{
+        width: 120,
+      }}
+      placeholder="Mapping Quality"
+      popupMatchSelectWidth={false}
+      allowClear
+      value={idsForSelect[mapping.obo_id]}
+      onChange={value => handleSelectChange(mapping.obo_id, value)}
+    />
+  );
+};
diff --git a/src/components/Projects/Tables/TableDetails.jsx b/src/components/Projects/Tables/TableDetails.jsx
index e722a53..6c67b6c 100644
--- a/src/components/Projects/Tables/TableDetails.jsx
+++ b/src/components/Projects/Tables/TableDetails.jsx
@@ -45,6 +45,8 @@ export const TableDetails = () => {
     setMapping,
     setEditMappings,
     editMappings,
+    relationshipOptions,
+    setRelationshipOptions,
   } = useContext(MappingContext);
   const { studyId, DDId, tableId } = useParams();
   const [loading, setLoading] = useState(true);
@@ -169,6 +171,10 @@ export const TableDetails = () => {
         return error;
       })
       .finally(() => setLoading(false));
+
+    getById(vocabUrl, 'Terminology', 'ftd-concept-map-relationship').then(
+      data => setRelationshipOptions(data.codes)
+    );
   }, []);
 
   // sets table to an empty object on dismount

From 9729b0a89fca51169c63f187ac909b074689e837 Mon Sep 17 00:00:00 2001
From: Yelena Cox <yelenacox@gmail.com>
Date: Tue, 26 Nov 2024 10:03:40 -0600
Subject: [PATCH 07/30] Mapping relationships for AssignMappings and
 AssignMappingsViaButton

---
 .../Manager/MappingsFunctions/AssignMappings.jsx     |  5 ++++-
 .../Manager/MappingsFunctions/DisplaySelected.jsx    |  6 +++++-
 .../MappingsFunctions/MappingRelationship.jsx        |  6 ++++--
 src/components/Projects/Tables/TableDetails.jsx      | 12 +++++++-----
 .../Terminologies/AssignMappingsViaButton.jsx        |  5 ++++-
 .../Projects/Terminologies/Terminology.jsx           |  8 ++++++++
 6 files changed, 32 insertions(+), 10 deletions(-)

diff --git a/src/components/Manager/MappingsFunctions/AssignMappings.jsx b/src/components/Manager/MappingsFunctions/AssignMappings.jsx
index fc321f3..7c4f794 100644
--- a/src/components/Manager/MappingsFunctions/AssignMappings.jsx
+++ b/src/components/Manager/MappingsFunctions/AssignMappings.jsx
@@ -17,7 +17,8 @@ export const AssignMappings = ({
 
   const { vocabUrl, user } = useContext(myContext);
   const { prefTerminologies, setApiResults } = useContext(SearchContext);
-  const { setMapping } = useContext(MappingContext);
+  const { setMapping, idsForSelect, setIdsForSelect } =
+    useContext(MappingContext);
   const [terminologiesToMap, setTerminologiesToMap] = useState([]);
   const [loading, setLoading] = useState(false);
   const [mappingProp, setMappingProp] = useState('');
@@ -27,6 +28,7 @@ export const AssignMappings = ({
     setSelectedKey(null);
     setMappingProp('');
     setApiResults([]);
+    setIdsForSelect([]);
   };
   const fetchTerminologies = () => {
     setLoading(true);
@@ -64,6 +66,7 @@ export const AssignMappings = ({
         ? item.description[0]
         : item.description,
       system: item.system,
+      mapping_relationship: idsForSelect[item.obo_id || item.code],
     }));
     const mappingsDTO = {
       mappings: selectedMappings,
diff --git a/src/components/Manager/MappingsFunctions/DisplaySelected.jsx b/src/components/Manager/MappingsFunctions/DisplaySelected.jsx
index 97ac7ad..39c43de 100644
--- a/src/components/Manager/MappingsFunctions/DisplaySelected.jsx
+++ b/src/components/Manager/MappingsFunctions/DisplaySelected.jsx
@@ -1,5 +1,6 @@
 import { Checkbox, Form, Tooltip } from 'antd';
 import { ellipsisString } from '../Utilitiy';
+import { MappingRelationship } from './MappingRelationship';
 
 export const DisplaySelected = ({
   displaySelectedMappings,
@@ -13,8 +14,11 @@ export const DisplaySelected = ({
           <div>
             <div className="modal_term_ontology">
               <div>{selected?.code}</div>
+              <div>{selected?.display || selected?.label}</div>
+              <div>
+                <MappingRelationship mapping={selected} />
+              </div>
             </div>
-            <div>{selected?.display || selected?.label}</div>
             <div>
               {selected?.description?.length > 85 ? (
                 <Tooltip
diff --git a/src/components/Manager/MappingsFunctions/MappingRelationship.jsx b/src/components/Manager/MappingsFunctions/MappingRelationship.jsx
index 375b7e4..464ab98 100644
--- a/src/components/Manager/MappingsFunctions/MappingRelationship.jsx
+++ b/src/components/Manager/MappingsFunctions/MappingRelationship.jsx
@@ -29,8 +29,10 @@ export const MappingRelationship = ({ mapping }) => {
       placeholder="Mapping Quality"
       popupMatchSelectWidth={false}
       allowClear
-      value={idsForSelect[mapping.obo_id]}
-      onChange={value => handleSelectChange(mapping.obo_id, value)}
+      value={idsForSelect[mapping.obo_id || mapping.code]}
+      onChange={value =>
+        handleSelectChange(mapping.obo_id || mapping.code, value)
+      }
     />
   );
 };
diff --git a/src/components/Projects/Tables/TableDetails.jsx b/src/components/Projects/Tables/TableDetails.jsx
index 6c67b6c..a361c85 100644
--- a/src/components/Projects/Tables/TableDetails.jsx
+++ b/src/components/Projects/Tables/TableDetails.jsx
@@ -45,7 +45,6 @@ export const TableDetails = () => {
     setMapping,
     setEditMappings,
     editMappings,
-    relationshipOptions,
     setRelationshipOptions,
   } = useContext(MappingContext);
   const { studyId, DDId, tableId } = useParams();
@@ -138,6 +137,13 @@ export const TableDetails = () => {
                 }
                 return error;
               })
+              .then(() =>
+                getById(
+                  vocabUrl,
+                  'Terminology',
+                  'ftd-concept-map-relationship'
+                ).then(data => setRelationshipOptions(data.codes))
+              )
               .then(() =>
                 fetch(`${vocabUrl}/Table/${tableId}/filter/self`, {
                   method: 'GET',
@@ -171,10 +177,6 @@ export const TableDetails = () => {
         return error;
       })
       .finally(() => setLoading(false));
-
-    getById(vocabUrl, 'Terminology', 'ftd-concept-map-relationship').then(
-      data => setRelationshipOptions(data.codes)
-    );
   }, []);
 
   // sets table to an empty object on dismount
diff --git a/src/components/Projects/Terminologies/AssignMappingsViaButton.jsx b/src/components/Projects/Terminologies/AssignMappingsViaButton.jsx
index d475350..440b567 100644
--- a/src/components/Projects/Terminologies/AssignMappingsViaButton.jsx
+++ b/src/components/Projects/Terminologies/AssignMappingsViaButton.jsx
@@ -15,7 +15,8 @@ export const AssignMappingsViaButton = ({
 
   const { vocabUrl, user } = useContext(myContext);
   const { prefTerminologies, setApiResults } = useContext(SearchContext);
-  const { setMapping } = useContext(MappingContext);
+  const { setMapping, idsForSelect, setIdsForSelect } =
+    useContext(MappingContext);
   const [terminologiesToMap, setTerminologiesToMap] = useState([]);
   const [loading, setLoading] = useState(false);
   const [mappingProp, setMappingProp] = useState('');
@@ -24,6 +25,7 @@ export const AssignMappingsViaButton = ({
   const onClose = () => {
     setApiResults([]);
     setSelectedBoxes([]);
+    setIdsForSelect([]);
   };
   const fetchTerminologies = () => {
     setLoading(true);
@@ -58,6 +60,7 @@ export const AssignMappingsViaButton = ({
         ? item.description[0]
         : item.description,
       system: item.system,
+      mapping_relationship: idsForSelect[item.obo_id || item.code],
     }));
     const mappingsDTO = {
       mappings: selectedMappings,
diff --git a/src/components/Projects/Terminologies/Terminology.jsx b/src/components/Projects/Terminologies/Terminology.jsx
index 6c7699b..8d87b75 100644
--- a/src/components/Projects/Terminologies/Terminology.jsx
+++ b/src/components/Projects/Terminologies/Terminology.jsx
@@ -43,6 +43,7 @@ export const Terminology = () => {
     setGetMappings,
     mapping,
     setMapping,
+    setRelationshipOptions,
   } = useContext(MappingContext);
 
   const [pageSize, setPageSize] = useState(
@@ -241,6 +242,13 @@ It then shows the mappings as table data and alows the user to delete a mapping
                 }
                 return error;
               })
+              .then(() =>
+                getById(
+                  vocabUrl,
+                  'Terminology',
+                  'ftd-concept-map-relationship'
+                ).then(data => setRelationshipOptions(data.codes))
+              )
               .then(() =>
                 getById(
                   vocabUrl,

From 349dcc0fa6067b7443ffe890c5afd04192be6b85 Mon Sep 17 00:00:00 2001
From: Yelena Cox <yelenacox@gmail.com>
Date: Tue, 26 Nov 2024 15:47:40 -0600
Subject: [PATCH 08/30] First pass at editing mapping quality when viewing
 exisitng mappings

---
 src/Contexts/MappingContext.jsx               |  3 ++
 .../MappingsFunctions/MappingRelationship.jsx |  3 +-
 .../Tables/EditMappingsTableModal.jsx         | 53 +++++++++++++++----
 .../Projects/Tables/TableStyling.scss         | 14 ++++-
 .../Terminologies/EditMappingModal.jsx        | 31 +++++++++--
 5 files changed, 86 insertions(+), 18 deletions(-)

diff --git a/src/Contexts/MappingContext.jsx b/src/Contexts/MappingContext.jsx
index 69b1884..6a35c0f 100644
--- a/src/Contexts/MappingContext.jsx
+++ b/src/Contexts/MappingContext.jsx
@@ -15,6 +15,7 @@ export function MappingContextRoot() {
   const [selectedBoxes, setSelectedBoxes] = useState([]);
   const [relationshipOptions, setRelationshipOptions] = useState([]);
   const [idsForSelect, setIdsForSelect] = useState([]);
+  const [showOptions, setShowOptions] = useState(false);
 
   const context = {
     editMappings,
@@ -39,6 +40,8 @@ export function MappingContextRoot() {
     setRelationshipOptions,
     idsForSelect,
     setIdsForSelect,
+    showOptions,
+    setShowOptions,
   };
 
   return (
diff --git a/src/components/Manager/MappingsFunctions/MappingRelationship.jsx b/src/components/Manager/MappingsFunctions/MappingRelationship.jsx
index 464ab98..c1c8846 100644
--- a/src/components/Manager/MappingsFunctions/MappingRelationship.jsx
+++ b/src/components/Manager/MappingsFunctions/MappingRelationship.jsx
@@ -23,10 +23,11 @@ export const MappingRelationship = ({ mapping }) => {
   return (
     <Select
       options={options}
+      defaultValue={mapping?.mapping_relationship || undefined}
       style={{
         width: 120,
       }}
-      placeholder="Mapping Quality"
+      placeholder="Quality"
       popupMatchSelectWidth={false}
       allowClear
       value={idsForSelect[mapping.obo_id || mapping.code]}
diff --git a/src/components/Projects/Tables/EditMappingsTableModal.jsx b/src/components/Projects/Tables/EditMappingsTableModal.jsx
index 4000478..393924b 100644
--- a/src/components/Projects/Tables/EditMappingsTableModal.jsx
+++ b/src/components/Projects/Tables/EditMappingsTableModal.jsx
@@ -18,6 +18,7 @@ import { ellipsisString, systemsMatch } from '../../Manager/Utilitiy';
 import { getById } from '../../Manager/FetchManager';
 import { SearchContext } from '../../../Contexts/SearchContext';
 import { OntologyFilterCodeSubmit } from '../../Manager/MappingsFunctions/OntologyFilterCodeSubmit';
+import { MappingRelationship } from '../../Manager/MappingsFunctions/MappingRelationship';
 
 export const EditMappingsTableModal = ({
   editMappings,
@@ -34,8 +35,14 @@ export const EditMappingsTableModal = ({
   const [reset, setReset] = useState(false);
   const [mappingsForSearch, setMappingsForSearch] = useState([]);
   const [editSearch, setEditSearch] = useState(false);
-  const { setSelectedMappings, setDisplaySelectedMappings } =
-    useContext(MappingContext);
+  const {
+    setSelectedMappings,
+    setDisplaySelectedMappings,
+    relationshipOptions,
+    setShowOptions,
+    showOptions,
+    idsForSelect,
+  } = useContext(MappingContext);
   const {
     apiPreferencesCode,
     setApiPreferencesCode,
@@ -124,6 +131,16 @@ export const EditMappingsTableModal = ({
     }
   };
 
+  // Find the object in relationshipOptions where the code matches the mappings's mapping_relationship
+  // If there is a match, return the display. If not, return null.
+  const displayRelationship = item => {
+    const findDisplay = relationshipOptions.find(
+      ro => ro.code === item.mapping_relationship
+    );
+
+    return findDisplay ? findDisplay.display : null;
+  };
+
   // The label for the checkbox for each mapping. Displays JSX to show the display and code.
   // The description field is commented out to be integrated when there is API support.
   const editMappingsLabel = (item, index) => {
@@ -135,10 +152,18 @@ export const EditMappingsTableModal = ({
               <div>
                 <b>{item?.display}</b>
               </div>
-              <div>
-                {/* <a href={item.iri} target="_blank"> */}
-                {item?.code}
-                {/* </a> */}
+              <div>{item?.code}</div>
+              <div
+              // className="mapping_relationship"
+              // onClick={setShowOptions(item.mapping_relationship)}
+              >
+                <MappingRelationship mapping={item} />
+
+                {/* {item?.mapping_relationship && !showOptions
+                  ? displayRelationship(item)
+                  : (!item.mapping_relationship || !!showOptions) && (
+                      <MappingRelationship mapping={item} />
+                    )} */}
               </div>
             </div>
             <div>
@@ -164,10 +189,21 @@ export const EditMappingsTableModal = ({
   // Each mapping in the mappings array being edited is JSON.parsed and turned into objects in the mappings array.
   const updateMappings = values => {
     setLoading(true);
+    // If there are changes in the mapping relationship dropdown, the changes are matched to the code and added to the mapping object.
     const mappingsDTO = {
-      mappings: values?.mappings?.map(v => JSON.parse(v)) ?? [],
+      mappings:
+        values?.mappings?.map(v => {
+          const parsedMapping = JSON.parse(v);
+          if (idsForSelect[parsedMapping.code]) {
+            parsedMapping.mapping_relationship =
+              idsForSelect[parsedMapping.code];
+          }
+
+          return parsedMapping;
+        }) ?? [],
       editor: user.email,
     };
+
     fetch(`${vocabUrl}/Table/${tableId}/mapping/${editMappings.code}`, {
       method: 'PUT',
       headers: {
@@ -272,9 +308,6 @@ export const EditMappingsTableModal = ({
         form
           .validateFields()
           .then(values => {
-            {
-              /* Performs the updateMappings PUT call on 'Save' button click */
-            }
             editSearch || reset
               ? editUpdatedMappings(values)
               : updateMappings(values);
diff --git a/src/components/Projects/Tables/TableStyling.scss b/src/components/Projects/Tables/TableStyling.scss
index 64e5b6e..729bf44 100644
--- a/src/components/Projects/Tables/TableStyling.scss
+++ b/src/components/Projects/Tables/TableStyling.scss
@@ -82,13 +82,23 @@ input::file-selector-button:hover {
   }
   display: flex;
   .remove-mapping {
-    padding-left:.25rem;
+    padding-left: 0.25rem;
     cursor: pointer;
     opacity: 0;
 
     &:hover {
-      transition: all .4s linear;
+      transition: all 0.4s linear;
       opacity: 1;
     }
   }
 }
+
+.mapping_relationship {
+  padding: 2px 6px;
+  border: 1px solid $greyColor;
+  border-radius: 4px;
+  &:hover {
+    background-color: rgb(239, 235, 235);
+    transition: all 0.3s linear;
+  }
+}
diff --git a/src/components/Projects/Terminologies/EditMappingModal.jsx b/src/components/Projects/Terminologies/EditMappingModal.jsx
index 8c1d63c..149c142 100644
--- a/src/components/Projects/Terminologies/EditMappingModal.jsx
+++ b/src/components/Projects/Terminologies/EditMappingModal.jsx
@@ -17,6 +17,8 @@ import { ellipsisString, systemsMatch } from '../../Manager/Utilitiy';
 import { getById } from '../../Manager/FetchManager';
 import { SearchContext } from '../../../Contexts/SearchContext';
 import { OntologyFilterCodeSubmitTerm } from '../../Manager/MappingsFunctions/OntologyFilterCodeSubmitTerm';
+import { MappingRelationship } from '../../Manager/MappingsFunctions/MappingRelationship';
+import { MappingContext } from '../../../Contexts/MappingContext';
 
 export const EditMappingsModal = ({
   editMappings,
@@ -30,6 +32,8 @@ export const EditMappingsModal = ({
   const [termMappings, setTermMappings] = useState([]);
   const [options, setOptions] = useState([]);
   const { vocabUrl, setSelectedKey, user } = useContext(myContext);
+  const { setShowOptions, showOptions, idsForSelect } =
+    useContext(MappingContext);
   const {
     apiPreferencesCode,
     setApiPreferencesCode,
@@ -130,10 +134,18 @@ export const EditMappingsModal = ({
               <div>
                 <b>{item?.display}</b>
               </div>
-              <div>
-                {/* <a href={item.iri} target="_blank"> */}
-                {item?.code}
-                {/* </a> */}
+              <div>{item?.code}</div>
+              <div
+              // className="mapping_relationship"
+              // onClick={setShowOptions(item.mapping_relationship)}
+              >
+                <MappingRelationship mapping={item} />
+
+                {/* {item?.mapping_relationship && !showOptions
+                  ? displayRelationship(item)
+                  : (!item.mapping_relationship || !!showOptions) && (
+                      <MappingRelationship mapping={item} />
+                    )} */}
               </div>
             </div>
             <div>
@@ -164,7 +176,16 @@ export const EditMappingsModal = ({
   const updateMappings = values => {
     setLoading(true);
     const mappingsDTO = {
-      mappings: values?.mappings?.map(v => JSON.parse(v)) ?? [],
+      mappings:
+        values?.mappings?.map(v => {
+          const parsedMapping = JSON.parse(v);
+          if (idsForSelect[parsedMapping.code]) {
+            parsedMapping.mapping_relationship =
+              idsForSelect[parsedMapping.code];
+          }
+
+          return parsedMapping;
+        }) ?? [],
       editor: user.email,
     };
     fetch(

From 8208045f30969ba4a5084c5f4c40744792a9346f Mon Sep 17 00:00:00 2001
From: Yelena Cox <yelenacox@gmail.com>
Date: Wed, 27 Nov 2024 11:26:33 -0600
Subject: [PATCH 09/30] Mapping relationship change to dropdown menu on click

---
 .../MappingsFunctions/MappingRelationship.jsx |  1 +
 .../Projects/Tables/EditMappingsLabel.jsx     | 69 +++++++++++++++++
 .../Tables/EditMappingsTableModal.jsx         | 77 +++----------------
 .../Projects/Tables/TableStyling.scss         |  2 +-
 .../Terminologies/EditMappingModal.jsx        | 57 ++------------
 5 files changed, 87 insertions(+), 119 deletions(-)
 create mode 100644 src/components/Projects/Tables/EditMappingsLabel.jsx

diff --git a/src/components/Manager/MappingsFunctions/MappingRelationship.jsx b/src/components/Manager/MappingsFunctions/MappingRelationship.jsx
index c1c8846..451a57b 100644
--- a/src/components/Manager/MappingsFunctions/MappingRelationship.jsx
+++ b/src/components/Manager/MappingsFunctions/MappingRelationship.jsx
@@ -34,6 +34,7 @@ export const MappingRelationship = ({ mapping }) => {
       onChange={value =>
         handleSelectChange(mapping.obo_id || mapping.code, value)
       }
+      onClick={e => e.preventDefault()}
     />
   );
 };
diff --git a/src/components/Projects/Tables/EditMappingsLabel.jsx b/src/components/Projects/Tables/EditMappingsLabel.jsx
new file mode 100644
index 0000000..5aceb91
--- /dev/null
+++ b/src/components/Projects/Tables/EditMappingsLabel.jsx
@@ -0,0 +1,69 @@
+import { useContext } from 'react';
+import { MappingContext } from '../../../Contexts/MappingContext';
+import { ellipsisString } from '../../Manager/Utilitiy';
+import { MappingRelationship } from '../../Manager/MappingsFunctions/MappingRelationship';
+import { Tooltip } from 'antd';
+
+export const EditMappingsLabel = ({ item, index }) => {
+  const { showOptions, setShowOptions, relationshipOptions } =
+    useContext(MappingContext);
+
+  // Find the object in relationshipOptions where the code matches the mappings's mapping_relationship
+  // If there is a match, return the display. If not, return null.
+  const displayRelationship = item => {
+    const findDisplay = relationshipOptions.find(
+      ro => ro.code === item.mapping_relationship
+    );
+
+    return findDisplay ? findDisplay.display : null;
+  };
+
+  return (
+    <>
+      <div key={index} className="modal_search_result">
+        <div>
+          <div className="modal_term_ontology">
+            <div>
+              <b>{item?.display}</b>
+            </div>
+            <div>{item?.code}</div>
+            <div
+              className={
+                !showOptions && item.mapping_relationship
+                  ? 'mapping_relationship'
+                  : ''
+              }
+              onClick={e => {
+                e.preventDefault();
+                setShowOptions(item.mapping_relationship);
+              }}
+            >
+              {item?.mapping_relationship && !showOptions ? (
+                displayRelationship(item)
+              ) : item.mapping_relationship && !!showOptions ? (
+                <MappingRelationship mapping={item} />
+              ) : (
+                !item.mapping_relationship && (
+                  <MappingRelationship mapping={item} />
+                )
+              )}
+            </div>
+          </div>
+          <div>
+            {item?.description?.length > 100 ? (
+              <Tooltip
+                mouseEnterDelay={0.5}
+                title={item?.description}
+                placement="topRight"
+              >
+                {ellipsisString(item?.description, '100')}
+              </Tooltip>
+            ) : (
+              ellipsisString(item?.description, '100')
+            )}
+          </div>
+        </div>
+      </div>
+    </>
+  );
+};
diff --git a/src/components/Projects/Tables/EditMappingsTableModal.jsx b/src/components/Projects/Tables/EditMappingsTableModal.jsx
index 393924b..f94800f 100644
--- a/src/components/Projects/Tables/EditMappingsTableModal.jsx
+++ b/src/components/Projects/Tables/EditMappingsTableModal.jsx
@@ -1,12 +1,4 @@
-import {
-  Button,
-  Checkbox,
-  Form,
-  message,
-  Modal,
-  notification,
-  Tooltip,
-} from 'antd';
+import { Button, Checkbox, Form, message, Modal, notification } from 'antd';
 import { useContext, useEffect, useState } from 'react';
 import { myContext } from '../../../App';
 import { ModalSpinner } from '../../Manager/Spinner';
@@ -14,11 +6,11 @@ import { MappingContext } from '../../../Contexts/MappingContext';
 import { MappingSearch } from '../../Manager/MappingsFunctions/MappingSearch';
 import { MappingReset } from '../../Manager/MappingsFunctions/MappingReset';
 import { ResetTableMappings } from './ResetTableMappings';
-import { ellipsisString, systemsMatch } from '../../Manager/Utilitiy';
+import { systemsMatch } from '../../Manager/Utilitiy';
 import { getById } from '../../Manager/FetchManager';
 import { SearchContext } from '../../../Contexts/SearchContext';
 import { OntologyFilterCodeSubmit } from '../../Manager/MappingsFunctions/OntologyFilterCodeSubmit';
-import { MappingRelationship } from '../../Manager/MappingsFunctions/MappingRelationship';
+import { EditMappingsLabel } from './EditMappingsLabel';
 
 export const EditMappingsTableModal = ({
   editMappings,
@@ -38,9 +30,7 @@ export const EditMappingsTableModal = ({
   const {
     setSelectedMappings,
     setDisplaySelectedMappings,
-    relationshipOptions,
     setShowOptions,
-    showOptions,
     idsForSelect,
   } = useContext(MappingContext);
   const {
@@ -63,6 +53,7 @@ export const EditMappingsTableModal = ({
     setEditSearch(false);
     setSelectedKey(null);
     setApiPreferencesCode(undefined);
+    setShowOptions(false);
   };
 
   const fetchMappings = () => {
@@ -112,7 +103,11 @@ export const EditMappingsTableModal = ({
             mappings.push(val); // For each mapping in the mappings array, push the stringified object above to the mappings array.
             // For each mapping in the mappings array, push the stringified object above to the options array
             // as the value for the value field for the ant.design checkbox. The label for the checkbox is returned in edditMappingsLabel function.
-            options.push({ value: val, label: editMappingsLabel(m, index) });
+            options.push({
+              value: val,
+              label: <EditMappingsLabel item={m} index={index} />,
+              // label: editMappingsLabel(m, index),
+            });
           });
           // termMappings are set to the mappings array. Options are set to the options array.
           setTermMappings(mappings);
@@ -131,60 +126,6 @@ export const EditMappingsTableModal = ({
     }
   };
 
-  // Find the object in relationshipOptions where the code matches the mappings's mapping_relationship
-  // If there is a match, return the display. If not, return null.
-  const displayRelationship = item => {
-    const findDisplay = relationshipOptions.find(
-      ro => ro.code === item.mapping_relationship
-    );
-
-    return findDisplay ? findDisplay.display : null;
-  };
-
-  // The label for the checkbox for each mapping. Displays JSX to show the display and code.
-  // The description field is commented out to be integrated when there is API support.
-  const editMappingsLabel = (item, index) => {
-    return (
-      <>
-        <div key={index} className="modal_search_result">
-          <div>
-            <div className="modal_term_ontology">
-              <div>
-                <b>{item?.display}</b>
-              </div>
-              <div>{item?.code}</div>
-              <div
-              // className="mapping_relationship"
-              // onClick={setShowOptions(item.mapping_relationship)}
-              >
-                <MappingRelationship mapping={item} />
-
-                {/* {item?.mapping_relationship && !showOptions
-                  ? displayRelationship(item)
-                  : (!item.mapping_relationship || !!showOptions) && (
-                      <MappingRelationship mapping={item} />
-                    )} */}
-              </div>
-            </div>
-            <div>
-              {item?.description?.length > 100 ? (
-                <Tooltip
-                  mouseEnterDelay={0.5}
-                  title={item?.description}
-                  placement="topRight"
-                >
-                  {ellipsisString(item?.description, '100')}
-                </Tooltip>
-              ) : (
-                ellipsisString(item?.description, '100')
-              )}
-            </div>
-          </div>
-        </div>
-      </>
-    );
-  };
-
   // Function to send a PUT call to update the mappings.
   // Each mapping in the mappings array being edited is JSON.parsed and turned into objects in the mappings array.
   const updateMappings = values => {
diff --git a/src/components/Projects/Tables/TableStyling.scss b/src/components/Projects/Tables/TableStyling.scss
index 729bf44..10cf06e 100644
--- a/src/components/Projects/Tables/TableStyling.scss
+++ b/src/components/Projects/Tables/TableStyling.scss
@@ -98,7 +98,7 @@ input::file-selector-button:hover {
   border: 1px solid $greyColor;
   border-radius: 4px;
   &:hover {
-    background-color: rgb(239, 235, 235);
+    background-color: rgb(245, 245, 245);
     transition: all 0.3s linear;
   }
 }
diff --git a/src/components/Projects/Terminologies/EditMappingModal.jsx b/src/components/Projects/Terminologies/EditMappingModal.jsx
index 149c142..9cf4663 100644
--- a/src/components/Projects/Terminologies/EditMappingModal.jsx
+++ b/src/components/Projects/Terminologies/EditMappingModal.jsx
@@ -19,6 +19,7 @@ import { SearchContext } from '../../../Contexts/SearchContext';
 import { OntologyFilterCodeSubmitTerm } from '../../Manager/MappingsFunctions/OntologyFilterCodeSubmitTerm';
 import { MappingRelationship } from '../../Manager/MappingsFunctions/MappingRelationship';
 import { MappingContext } from '../../../Contexts/MappingContext';
+import { EditMappingsLabel } from '../Tables/EditMappingsLabel';
 
 export const EditMappingsModal = ({
   editMappings,
@@ -32,7 +33,7 @@ export const EditMappingsModal = ({
   const [termMappings, setTermMappings] = useState([]);
   const [options, setOptions] = useState([]);
   const { vocabUrl, setSelectedKey, user } = useContext(myContext);
-  const { setShowOptions, showOptions, idsForSelect } =
+  const { setShowOptions, showOptions, relationshipOptions, idsForSelect } =
     useContext(MappingContext);
   const {
     apiPreferencesCode,
@@ -55,6 +56,7 @@ export const EditMappingsModal = ({
     setOptions([]);
     setSelectedKey(null);
     setApiPreferencesCode(undefined);
+    setShowOptions(false);
   };
 
   const fetchMappings = () => {
@@ -104,7 +106,10 @@ export const EditMappingsModal = ({
             mappings.push(val); // For each mapping in the mappings array, push the stringified object above to the mappings array.
             // For each mapping in the mappings array, push the stringified object above to the options array
             // as the value for the value field for the ant.design checkbox. The label for the checkbox is returned in edditMappingsLabel function.
-            options.push({ value: val, label: editMappingsLabel(m, index) });
+            options.push({
+              value: val,
+              label: <EditMappingsLabel item={m} index={index} />,
+            });
           });
           // termMappings are set to the mappings array. Options are set to the options array.
           setTermMappings(mappings);
@@ -123,54 +128,6 @@ export const EditMappingsModal = ({
     }
   };
 
-  // The label for the checkbox for each mapping. Displays JSX to show the display and code.
-  // The description field is commented out to be integrated when there is API support.
-  const editMappingsLabel = (item, index) => {
-    return (
-      <>
-        <div key={index} className="modal_search_result">
-          <div>
-            <div className="modal_term_ontology">
-              <div>
-                <b>{item?.display}</b>
-              </div>
-              <div>{item?.code}</div>
-              <div
-              // className="mapping_relationship"
-              // onClick={setShowOptions(item.mapping_relationship)}
-              >
-                <MappingRelationship mapping={item} />
-
-                {/* {item?.mapping_relationship && !showOptions
-                  ? displayRelationship(item)
-                  : (!item.mapping_relationship || !!showOptions) && (
-                      <MappingRelationship mapping={item} />
-                    )} */}
-              </div>
-            </div>
-            <div>
-              {item?.description?.length > 100 ? (
-                <Tooltip
-                  title={item?.description}
-                  placement="topRight"
-                  mouseEnterDelay={0.5}
-                >
-                  {ellipsisString(item?.description, '100')}
-                </Tooltip>
-              ) : (
-                ellipsisString(item?.description, '100')
-              )}
-            </div>
-          </div>
-        </div>
-      </>
-    );
-  };
-
-  const searchProp = editMappings?.display
-    ? editMappings.display
-    : editMappings?.code;
-
   // Function to send a PUT call to update the mappings.
   // Each mapping in the mappings array being edited is JSON.parsed and mappings are turned into objects in the mappings array.
   const updateMappings = values => {

From 7e9081ad446b8067b6e64377c5f2d7613409ecbb Mon Sep 17 00:00:00 2001
From: Yelena Cox <yelenacox@gmail.com>
Date: Wed, 27 Nov 2024 11:54:38 -0600
Subject: [PATCH 10/30] Mapping relationship added to MappingSearch &
 MappingReset

---
 .../Manager/MappingsFunctions/MappingReset.jsx     |  4 ++++
 .../Manager/MappingsFunctions/MappingSearch.jsx    |  7 +++++++
 .../Projects/Terminologies/EditMappingModal.jsx    | 14 +++++++++++---
 3 files changed, 22 insertions(+), 3 deletions(-)

diff --git a/src/components/Manager/MappingsFunctions/MappingReset.jsx b/src/components/Manager/MappingsFunctions/MappingReset.jsx
index bc13608..f93ab9f 100644
--- a/src/components/Manager/MappingsFunctions/MappingReset.jsx
+++ b/src/components/Manager/MappingsFunctions/MappingReset.jsx
@@ -7,6 +7,7 @@ import { MappingContext } from '../../../Contexts/MappingContext';
 import { getFiltersByCode, olsFilterOntologiesSearch } from '../FetchManager';
 import { SearchContext } from '../../../Contexts/SearchContext';
 import { OntologyCheckboxes } from './OntologyCheckboxes';
+import { MappingRelationship } from './MappingRelationship';
 
 export const MappingReset = ({
   searchProp,
@@ -344,6 +345,9 @@ export const MappingReset = ({
                   </a>
                 )}
               </div>
+              <div>
+                <MappingRelationship mapping={d} />
+              </div>
             </div>
             <div>
               {d?.description?.length > 85 ? (
diff --git a/src/components/Manager/MappingsFunctions/MappingSearch.jsx b/src/components/Manager/MappingsFunctions/MappingSearch.jsx
index 358f04b..b21d66f 100644
--- a/src/components/Manager/MappingsFunctions/MappingSearch.jsx
+++ b/src/components/Manager/MappingsFunctions/MappingSearch.jsx
@@ -8,6 +8,7 @@ import { SearchContext } from '../../../Contexts/SearchContext';
 import { getFiltersByCode, olsFilterOntologiesSearch } from '../FetchManager';
 import { OntologyCheckboxes } from './OntologyCheckboxes';
 import { APISearchBar } from '../../Projects/Terminologies/APISearchBar';
+import { MappingRelationship } from './MappingRelationship';
 
 export const MappingSearch = ({
   setEditMappings,
@@ -343,6 +344,9 @@ export const MappingSearch = ({
                   </a>
                 )}
               </div>
+              <div>
+                <MappingRelationship mapping={d} />
+              </div>
             </div>
             <div>
               {d?.description?.length > 85 ? (
@@ -388,6 +392,9 @@ export const MappingSearch = ({
                 <b>{d.display}</b>
               </div>
               <div>{d.code}</div>
+              <div>
+                <MappingRelationship mapping={d} />
+              </div>
             </div>
             <div>
               {d?.description?.length > 100 ? (
diff --git a/src/components/Projects/Terminologies/EditMappingModal.jsx b/src/components/Projects/Terminologies/EditMappingModal.jsx
index 9cf4663..0fc6d54 100644
--- a/src/components/Projects/Terminologies/EditMappingModal.jsx
+++ b/src/components/Projects/Terminologies/EditMappingModal.jsx
@@ -33,8 +33,7 @@ export const EditMappingsModal = ({
   const [termMappings, setTermMappings] = useState([]);
   const [options, setOptions] = useState([]);
   const { vocabUrl, setSelectedKey, user } = useContext(myContext);
-  const { setShowOptions, showOptions, relationshipOptions, idsForSelect } =
-    useContext(MappingContext);
+  const { setShowOptions, idsForSelect } = useContext(MappingContext);
   const {
     apiPreferencesCode,
     setApiPreferencesCode,
@@ -191,10 +190,19 @@ export const EditMappingsModal = ({
       description: item.description,
       system:
         item.system || systemsMatch(item.obo_id.split(':')[0], ontologyApis),
+      mapping_relationship: idsForSelect[item.code],
     }));
     const mappingsDTO = {
       mappings: [
-        ...(values.existing_mappings?.map(v => JSON.parse(v)) ?? []),
+        ...(values.existing_mappings?.map(v => {
+          const parsedMapping = JSON.parse(v);
+          if (idsForSelect[parsedMapping.code]) {
+            parsedMapping.mapping_relationship =
+              idsForSelect[parsedMapping.code];
+          }
+
+          return parsedMapping;
+        }) ?? []),
         ...(selectedMappings ?? []),
       ],
       editor: user.email,

From 4a05f339f99fdce199e49a6ec691ccea366aa304 Mon Sep 17 00:00:00 2001
From: brendagutman <brenda.gutman@gmail.com>
Date: Wed, 27 Nov 2024 12:06:30 -0600
Subject: [PATCH 11/30] [FD-1830] Edit dispatch deploy for prod

---
 .github/workflows/dispatch_deploy.yml | 12 ++++++++----
 package.json                          |  1 +
 2 files changed, 9 insertions(+), 4 deletions(-)

diff --git a/.github/workflows/dispatch_deploy.yml b/.github/workflows/dispatch_deploy.yml
index f400a48..daeb8c5 100644
--- a/.github/workflows/dispatch_deploy.yml
+++ b/.github/workflows/dispatch_deploy.yml
@@ -65,14 +65,18 @@ jobs:
         run: |-
           gcloud auth configure-docker '${{ env.REGION }}-docker.pkg.dev'
 
-      - name: 'Build Docker Image' # New step to build the image
+      - name: 'Build Docker Image'
         run: |-
-          DOCKER_TAG="${{ env.REGION }}-docker.pkg.dev/${{ env.PROJECT_ID }}/${{ env.SERVICE }}-${{ github.event.inputs.environment }}/${{ env.IMAGE_NAME }}:${{ github.sha }}"
+          if [ "${{ github.event.inputs.environment }}" == "prod" ]; then
+            DOCKER_TAG="${{ env.REGION }}-docker.pkg.dev/${{ env.PROJECT_ID }}/${{ env.SERVICE }}/${{ env.IMAGE_NAME }}:${{ github.sha }}"
+          else
+            DOCKER_TAG="${{ env.REGION }}-docker.pkg.dev/${{ env.PROJECT_ID }}/${{ env.SERVICE }}-${{ github.event.inputs.environment }}/${{ env.IMAGE_NAME }}:${{ github.sha }}"
+          fi
+          echo "DOCKER_TAG=${DOCKER_TAG}" >> $GITHUB_ENV 
           docker build -t "${DOCKER_TAG}" --build-arg ENV=${{ github.event.inputs.environment }} .
 
       - name: 'Push Docker Image'
         run: |-
-          DOCKER_TAG="${{ env.REGION }}-docker.pkg.dev/${{ env.PROJECT_ID }}/${{ env.SERVICE }}-${{ github.event.inputs.environment }}/${{ env.IMAGE_NAME }}:${{ github.sha }}"
           docker push "${DOCKER_TAG}"
 
       - name: 'Deploy to Cloud Run'
@@ -80,4 +84,4 @@ jobs:
         with:
           service: '${{ env.SERVICE }}-${{ github.event.inputs.environment }}'
           region: '${{ env.REGION }}'
-          image: "${{ env.REGION }}-docker.pkg.dev/${{ env.PROJECT_ID }}/${{ env.SERVICE }}-${{ github.event.inputs.environment }}/${{ env.IMAGE_NAME }}:${{ github.sha }}"
+          image: "${DOCKER_TAG}"
\ No newline at end of file
diff --git a/package.json b/package.json
index 34885eb..ae8a038 100644
--- a/package.json
+++ b/package.json
@@ -9,6 +9,7 @@
     "build-dev": "vite build --mode dev",
     "build-uat": "vite build --mode uat",
     "build-alpha": "vite build --mode alpha",
+    "build-prod": "vite build --mode prod",
     "lint": "eslint . --ext js,jsx --report-unused-disable-directives --max-warnings 0",
     "preview": "vite preview"
   },

From 85256f7a0e7d8d4a0e21c239df32c20da7e3e35e Mon Sep 17 00:00:00 2001
From: Yelena Cox <yelenacox@gmail.com>
Date: Wed, 27 Nov 2024 12:42:16 -0600
Subject: [PATCH 12/30] Added conditional to display code if there is no
 mapping display

---
 .../MappingsFunctions}/EditMappingsLabel.jsx               | 7 +++----
 src/components/Projects/Tables/EditMappingsTableModal.jsx  | 2 +-
 src/components/Projects/Tables/TableDetails.jsx            | 5 +++--
 src/components/Projects/Terminologies/EditMappingModal.jsx | 2 +-
 4 files changed, 8 insertions(+), 8 deletions(-)
 rename src/components/{Projects/Tables => Manager/MappingsFunctions}/EditMappingsLabel.jsx (90%)

diff --git a/src/components/Projects/Tables/EditMappingsLabel.jsx b/src/components/Manager/MappingsFunctions/EditMappingsLabel.jsx
similarity index 90%
rename from src/components/Projects/Tables/EditMappingsLabel.jsx
rename to src/components/Manager/MappingsFunctions/EditMappingsLabel.jsx
index 5aceb91..a379fd8 100644
--- a/src/components/Projects/Tables/EditMappingsLabel.jsx
+++ b/src/components/Manager/MappingsFunctions/EditMappingsLabel.jsx
@@ -1,13 +1,12 @@
 import { useContext } from 'react';
 import { MappingContext } from '../../../Contexts/MappingContext';
-import { ellipsisString } from '../../Manager/Utilitiy';
-import { MappingRelationship } from '../../Manager/MappingsFunctions/MappingRelationship';
+import { ellipsisString } from '../Utilitiy';
+import { MappingRelationship } from './MappingRelationship';
 import { Tooltip } from 'antd';
 
 export const EditMappingsLabel = ({ item, index }) => {
-  const { showOptions, setShowOptions, relationshipOptions } =
+  const { showOptions, setShowOptions, relationshipOptions, idsForSelect } =
     useContext(MappingContext);
-
   // Find the object in relationshipOptions where the code matches the mappings's mapping_relationship
   // If there is a match, return the display. If not, return null.
   const displayRelationship = item => {
diff --git a/src/components/Projects/Tables/EditMappingsTableModal.jsx b/src/components/Projects/Tables/EditMappingsTableModal.jsx
index f94800f..ad92213 100644
--- a/src/components/Projects/Tables/EditMappingsTableModal.jsx
+++ b/src/components/Projects/Tables/EditMappingsTableModal.jsx
@@ -10,7 +10,7 @@ import { systemsMatch } from '../../Manager/Utilitiy';
 import { getById } from '../../Manager/FetchManager';
 import { SearchContext } from '../../../Contexts/SearchContext';
 import { OntologyFilterCodeSubmit } from '../../Manager/MappingsFunctions/OntologyFilterCodeSubmit';
-import { EditMappingsLabel } from './EditMappingsLabel';
+import { EditMappingsLabel } from '../../Manager/MappingsFunctions/EditMappingsLabel';
 
 export const EditMappingsTableModal = ({
   editMappings,
diff --git a/src/components/Projects/Tables/TableDetails.jsx b/src/components/Projects/Tables/TableDetails.jsx
index a361c85..2b7412a 100644
--- a/src/components/Projects/Tables/TableDetails.jsx
+++ b/src/components/Projects/Tables/TableDetails.jsx
@@ -261,8 +261,9 @@ It then shows the mappings as table data and alows the user to delete a mapping
       return variableMappings.mappings.map(code => (
         <div className="mapping" key={code.display}>
           <span className="mapping-display">
-            {' '}
-            <Tooltip title={code.code}>{code.display}</Tooltip>
+            <Tooltip title={code.code}>
+              {code.display ? code.display : code.code}
+            </Tooltip>
           </span>
           <span
             className="remove-mapping"
diff --git a/src/components/Projects/Terminologies/EditMappingModal.jsx b/src/components/Projects/Terminologies/EditMappingModal.jsx
index 0fc6d54..6f7a3fb 100644
--- a/src/components/Projects/Terminologies/EditMappingModal.jsx
+++ b/src/components/Projects/Terminologies/EditMappingModal.jsx
@@ -19,7 +19,7 @@ import { SearchContext } from '../../../Contexts/SearchContext';
 import { OntologyFilterCodeSubmitTerm } from '../../Manager/MappingsFunctions/OntologyFilterCodeSubmitTerm';
 import { MappingRelationship } from '../../Manager/MappingsFunctions/MappingRelationship';
 import { MappingContext } from '../../../Contexts/MappingContext';
-import { EditMappingsLabel } from '../Tables/EditMappingsLabel';
+import { EditMappingsLabel } from '../../Manager/MappingsFunctions/EditMappingsLabel';
 
 export const EditMappingsModal = ({
   editMappings,

From 5719dc7f798e5710d0ec7f0e7ed12aec2e0bab64 Mon Sep 17 00:00:00 2001
From: brendagutman <brenda.gutman@gmail.com>
Date: Wed, 27 Nov 2024 12:58:24 -0600
Subject: [PATCH 13/30] [FD-1830] Edits for prod

---
 .github/workflows/dispatch_deploy.yml | 8 ++++++--
 1 file changed, 6 insertions(+), 2 deletions(-)

diff --git a/.github/workflows/dispatch_deploy.yml b/.github/workflows/dispatch_deploy.yml
index daeb8c5..4ea7914 100644
--- a/.github/workflows/dispatch_deploy.yml
+++ b/.github/workflows/dispatch_deploy.yml
@@ -67,11 +67,15 @@ jobs:
 
       - name: 'Build Docker Image'
         run: |-
-          if [ "${{ github.event.inputs.environment }}" == "prod" ]; then
+          set -eux  # Enable debugging and exit on error
+          
+          ENVIRONMENT="${{ github.event.inputs.environment }}"
+          if [[ "$ENVIRONMENT" == "prod" ]]; then
             DOCKER_TAG="${{ env.REGION }}-docker.pkg.dev/${{ env.PROJECT_ID }}/${{ env.SERVICE }}/${{ env.IMAGE_NAME }}:${{ github.sha }}"
           else
-            DOCKER_TAG="${{ env.REGION }}-docker.pkg.dev/${{ env.PROJECT_ID }}/${{ env.SERVICE }}-${{ github.event.inputs.environment }}/${{ env.IMAGE_NAME }}:${{ github.sha }}"
+            DOCKER_TAG="${{ env.REGION }}-docker.pkg.dev/${{ env.PROJECT_ID }}/${{ env.SERVICE }}-${ENVIRONMENT}/${{ env.IMAGE_NAME }}:${{ github.sha }}"
           fi
+          echo "Environment: $ENVIRONMENT"
           echo "DOCKER_TAG=${DOCKER_TAG}" >> $GITHUB_ENV 
           docker build -t "${DOCKER_TAG}" --build-arg ENV=${{ github.event.inputs.environment }} .
 

From acf06373aa27cf1ef11af11013b68467fc3c4f24 Mon Sep 17 00:00:00 2001
From: Yelena Cox <yelenacox@gmail.com>
Date: Wed, 27 Nov 2024 13:01:44 -0600
Subject: [PATCH 14/30] added mapping relationship when updating Table mappings

---
 .../Projects/Tables/EditMappingsTableModal.jsx        | 11 ++++++++++-
 .../Projects/Terminologies/EditMappingModal.jsx       |  2 +-
 2 files changed, 11 insertions(+), 2 deletions(-)

diff --git a/src/components/Projects/Tables/EditMappingsTableModal.jsx b/src/components/Projects/Tables/EditMappingsTableModal.jsx
index ad92213..9d2d935 100644
--- a/src/components/Projects/Tables/EditMappingsTableModal.jsx
+++ b/src/components/Projects/Tables/EditMappingsTableModal.jsx
@@ -188,10 +188,19 @@ export const EditMappingsTableModal = ({
       description: item.description,
       system:
         item.system || systemsMatch(item.obo_id.split(':')[0], ontologyApis),
+      mapping_relationship: idsForSelect[item.code],
     }));
     const mappingsDTO = {
       mappings: [
-        ...(values.existing_mappings?.map(v => JSON.parse(v)) ?? []),
+        ...(values.existing_mappings?.map(v => {
+          const parsedMapping = JSON.parse(v);
+          if (idsForSelect[parsedMapping.code]) {
+            parsedMapping.mapping_relationship =
+              idsForSelect[parsedMapping.code];
+          }
+
+          return parsedMapping;
+        }) ?? []),
         ...(selectedMappings ?? []),
       ],
       editor: user.email,
diff --git a/src/components/Projects/Terminologies/EditMappingModal.jsx b/src/components/Projects/Terminologies/EditMappingModal.jsx
index 6f7a3fb..b543b9e 100644
--- a/src/components/Projects/Terminologies/EditMappingModal.jsx
+++ b/src/components/Projects/Terminologies/EditMappingModal.jsx
@@ -13,7 +13,7 @@ import { ModalSpinner } from '../../Manager/Spinner';
 import { MappingSearch } from '../../Manager/MappingsFunctions/MappingSearch';
 import { ResetMappings } from './ResetMappings';
 import { MappingReset } from '../../Manager/MappingsFunctions/MappingReset';
-import { ellipsisString, systemsMatch } from '../../Manager/Utilitiy';
+import { systemsMatch } from '../../Manager/Utilitiy';
 import { getById } from '../../Manager/FetchManager';
 import { SearchContext } from '../../../Contexts/SearchContext';
 import { OntologyFilterCodeSubmitTerm } from '../../Manager/MappingsFunctions/OntologyFilterCodeSubmitTerm';

From d62ddb0d16596e497b4be12e8547a42fded6f207 Mon Sep 17 00:00:00 2001
From: brendagutman <brenda.gutman@gmail.com>
Date: Wed, 27 Nov 2024 16:48:06 -0600
Subject: [PATCH 15/30] [FD-1830] Edits for prod

---
 .github/workflows/dispatch_deploy.yml | 16 +++++++---------
 1 file changed, 7 insertions(+), 9 deletions(-)

diff --git a/.github/workflows/dispatch_deploy.yml b/.github/workflows/dispatch_deploy.yml
index 4ea7914..a7e6cce 100644
--- a/.github/workflows/dispatch_deploy.yml
+++ b/.github/workflows/dispatch_deploy.yml
@@ -67,16 +67,14 @@ jobs:
 
       - name: 'Build Docker Image'
         run: |-
-          set -eux  # Enable debugging and exit on error
-          
-          ENVIRONMENT="${{ github.event.inputs.environment }}"
-          if [[ "$ENVIRONMENT" == "prod" ]]; then
-            DOCKER_TAG="${{ env.REGION }}-docker.pkg.dev/${{ env.PROJECT_ID }}/${{ env.SERVICE }}/${{ env.IMAGE_NAME }}:${{ github.sha }}"
-          else
-            DOCKER_TAG="${{ env.REGION }}-docker.pkg.dev/${{ env.PROJECT_ID }}/${{ env.SERVICE }}-${ENVIRONMENT}/${{ env.IMAGE_NAME }}:${{ github.sha }}"
+          if [[ "${{ github.event.inputs.environment }}" == "prod" ]]; then
+            SERVICE='${{ env.SERVICE }}
+          else 
+            SERVICE='${{ env.SERVICE }}-${{ github.event.inputs.environment }}'
           fi
-          echo "Environment: $ENVIRONMENT"
+          DOCKER_TAG="${{ env.REGION }}-docker.pkg.dev/${{ env.PROJECT_ID }}/SERVICE/${{ env.IMAGE_NAME }}:${{ github.sha }}"
           echo "DOCKER_TAG=${DOCKER_TAG}" >> $GITHUB_ENV 
+          echo "SERVICE=${SERVICE}" >> $GITHUB_ENV 
           docker build -t "${DOCKER_TAG}" --build-arg ENV=${{ github.event.inputs.environment }} .
 
       - name: 'Push Docker Image'
@@ -86,6 +84,6 @@ jobs:
       - name: 'Deploy to Cloud Run'
         uses: 'google-github-actions/deploy-cloudrun@v2'
         with:
-          service: '${{ env.SERVICE }}-${{ github.event.inputs.environment }}'
+          service: "${SERVICE}"
           region: '${{ env.REGION }}'
           image: "${DOCKER_TAG}"
\ No newline at end of file

From 23f6611c30bca58bfa05a6ad1e7a2271b83a3d9f Mon Sep 17 00:00:00 2001
From: brendagutman <brenda.gutman@gmail.com>
Date: Wed, 27 Nov 2024 16:53:07 -0600
Subject: [PATCH 16/30] [FD-1830] Edits for prod

---
 .github/workflows/dispatch_deploy.yml | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/.github/workflows/dispatch_deploy.yml b/.github/workflows/dispatch_deploy.yml
index a7e6cce..5142af1 100644
--- a/.github/workflows/dispatch_deploy.yml
+++ b/.github/workflows/dispatch_deploy.yml
@@ -68,7 +68,7 @@ jobs:
       - name: 'Build Docker Image'
         run: |-
           if [[ "${{ github.event.inputs.environment }}" == "prod" ]]; then
-            SERVICE='${{ env.SERVICE }}
+            SERVICE='${{ env.SERVICE }}'
           else 
             SERVICE='${{ env.SERVICE }}-${{ github.event.inputs.environment }}'
           fi

From e822ab73c5791728e864b79fc6b67fe41ab7669e Mon Sep 17 00:00:00 2001
From: brendagutman <brenda.gutman@gmail.com>
Date: Wed, 27 Nov 2024 16:55:22 -0600
Subject: [PATCH 17/30] [FD-1830] Edits for prod

---
 .github/workflows/dispatch_deploy.yml | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/.github/workflows/dispatch_deploy.yml b/.github/workflows/dispatch_deploy.yml
index 5142af1..338c073 100644
--- a/.github/workflows/dispatch_deploy.yml
+++ b/.github/workflows/dispatch_deploy.yml
@@ -72,7 +72,7 @@ jobs:
           else 
             SERVICE='${{ env.SERVICE }}-${{ github.event.inputs.environment }}'
           fi
-          DOCKER_TAG="${{ env.REGION }}-docker.pkg.dev/${{ env.PROJECT_ID }}/SERVICE/${{ env.IMAGE_NAME }}:${{ github.sha }}"
+          DOCKER_TAG="${{ env.REGION }}-docker.pkg.dev/${{ env.PROJECT_ID }}/${SERVICE}/${{ env.IMAGE_NAME }}:${{ github.sha }}"
           echo "DOCKER_TAG=${DOCKER_TAG}" >> $GITHUB_ENV 
           echo "SERVICE=${SERVICE}" >> $GITHUB_ENV 
           docker build -t "${DOCKER_TAG}" --build-arg ENV=${{ github.event.inputs.environment }} .

From 57fdee48c5e61e7769c762d12970e80b840538f9 Mon Sep 17 00:00:00 2001
From: brendagutman <brenda.gutman@gmail.com>
Date: Wed, 27 Nov 2024 16:58:32 -0600
Subject: [PATCH 18/30] [FD-1830] Edits for prod

---
 .github/workflows/dispatch_deploy.yml | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/.github/workflows/dispatch_deploy.yml b/.github/workflows/dispatch_deploy.yml
index 338c073..d27a029 100644
--- a/.github/workflows/dispatch_deploy.yml
+++ b/.github/workflows/dispatch_deploy.yml
@@ -84,6 +84,6 @@ jobs:
       - name: 'Deploy to Cloud Run'
         uses: 'google-github-actions/deploy-cloudrun@v2'
         with:
-          service: "${SERVICE}"
+          service: ${SERVICE}
           region: '${{ env.REGION }}'
           image: "${DOCKER_TAG}"
\ No newline at end of file

From 3fe02224f2e23c630b0d5705a356fedd45563e84 Mon Sep 17 00:00:00 2001
From: brendagutman <brenda.gutman@gmail.com>
Date: Wed, 27 Nov 2024 17:09:30 -0600
Subject: [PATCH 19/30] [FD-1830] Edits for prod

---
 .github/workflows/dispatch_deploy.yml | 8 +++++---
 1 file changed, 5 insertions(+), 3 deletions(-)

diff --git a/.github/workflows/dispatch_deploy.yml b/.github/workflows/dispatch_deploy.yml
index d27a029..22797e4 100644
--- a/.github/workflows/dispatch_deploy.yml
+++ b/.github/workflows/dispatch_deploy.yml
@@ -68,13 +68,15 @@ jobs:
       - name: 'Build Docker Image'
         run: |-
           if [[ "${{ github.event.inputs.environment }}" == "prod" ]]; then
-            SERVICE='${{ env.SERVICE }}'
+            SERVICE="${{ env.SERVICE }}"
           else 
-            SERVICE='${{ env.SERVICE }}-${{ github.event.inputs.environment }}'
+            SERVICE="${{ env.SERVICE }}-${{ github.event.inputs.environment }}"
           fi
           DOCKER_TAG="${{ env.REGION }}-docker.pkg.dev/${{ env.PROJECT_ID }}/${SERVICE}/${{ env.IMAGE_NAME }}:${{ github.sha }}"
+
           echo "DOCKER_TAG=${DOCKER_TAG}" >> $GITHUB_ENV 
           echo "SERVICE=${SERVICE}" >> $GITHUB_ENV 
+
           docker build -t "${DOCKER_TAG}" --build-arg ENV=${{ github.event.inputs.environment }} .
 
       - name: 'Push Docker Image'
@@ -84,6 +86,6 @@ jobs:
       - name: 'Deploy to Cloud Run'
         uses: 'google-github-actions/deploy-cloudrun@v2'
         with:
-          service: ${SERVICE}
+          service: ${{ env.SERVICE }}
           region: '${{ env.REGION }}'
           image: "${DOCKER_TAG}"
\ No newline at end of file

From e873fd2d16faf320de64dda0b55c2850a9018767 Mon Sep 17 00:00:00 2001
From: brendagutman <brenda.gutman@gmail.com>
Date: Wed, 27 Nov 2024 17:16:00 -0600
Subject: [PATCH 20/30] [FD-1830] Edits for prod

---
 .github/workflows/dispatch_deploy.yml | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/.github/workflows/dispatch_deploy.yml b/.github/workflows/dispatch_deploy.yml
index 22797e4..96f2b65 100644
--- a/.github/workflows/dispatch_deploy.yml
+++ b/.github/workflows/dispatch_deploy.yml
@@ -88,4 +88,4 @@ jobs:
         with:
           service: ${{ env.SERVICE }}
           region: '${{ env.REGION }}'
-          image: "${DOCKER_TAG}"
\ No newline at end of file
+          image: ${{ env.DOCKER_TAG }}
\ No newline at end of file

From b40855c77c30cd5a69a3e1c59bee1249263bab59 Mon Sep 17 00:00:00 2001
From: Yelena Cox <yelenacox@gmail.com>
Date: Tue, 3 Dec 2024 21:42:44 -0600
Subject: [PATCH 21/30] Posting mapping votes and comments

---
 src/Contexts/MappingContext.jsx               |  9 ++
 .../MappingsFunctions/MappingComments.jsx     | 94 +++++++++++++++++--
 .../MappingsFunctions/MappingVotes.jsx        |  4 +-
 .../MappingsFunctions/MappingsFunctions.scss  | 24 +++++
 .../Projects/Tables/TableDetails.jsx          | 10 +-
 .../Projects/Terminologies/Terminology.jsx    | 16 ++--
 6 files changed, 130 insertions(+), 27 deletions(-)

diff --git a/src/Contexts/MappingContext.jsx b/src/Contexts/MappingContext.jsx
index 6a35c0f..b9bca8b 100644
--- a/src/Contexts/MappingContext.jsx
+++ b/src/Contexts/MappingContext.jsx
@@ -16,6 +16,9 @@ export function MappingContextRoot() {
   const [relationshipOptions, setRelationshipOptions] = useState([]);
   const [idsForSelect, setIdsForSelect] = useState([]);
   const [showOptions, setShowOptions] = useState(false);
+  const [voteCount, setVoteCount] = useState(0);
+  const [mappingComments, setMappingComments] = useState([]);
+  const [comment, setComment] = useState(false);
 
   const context = {
     editMappings,
@@ -42,6 +45,12 @@ export function MappingContextRoot() {
     setIdsForSelect,
     showOptions,
     setShowOptions,
+    voteCount,
+    setVoteCount,
+    mappingComments,
+    setMappingComments,
+    comment,
+    setComment,
   };
 
   return (
diff --git a/src/components/Manager/MappingsFunctions/MappingComments.jsx b/src/components/Manager/MappingsFunctions/MappingComments.jsx
index fa58ed9..b0a8fc3 100644
--- a/src/components/Manager/MappingsFunctions/MappingComments.jsx
+++ b/src/components/Manager/MappingsFunctions/MappingComments.jsx
@@ -1,20 +1,62 @@
 import { Button, Form, Input, Modal, notification } from 'antd';
-import { useContext } from 'react';
+import { useContext, useEffect, useState } from 'react';
 import { myContext } from '../../../App';
+import { MappingContext } from '../../../Contexts/MappingContext';
+import { ModalSpinner } from '../Spinner';
 
 export const MappingComments = ({
-  code,
-  codeDisplay,
+  mappingCode,
+  mappingDisplay,
   variableMappings,
   setComment,
-  terminologyId,
+  idProp,
 }) => {
   const [form] = Form.useForm();
   const { vocabUrl, user } = useContext(myContext);
+  const { mappingComments, setMappingComments } = useContext(MappingContext);
+  const [loading, setLoading] = useState(false);
   const { TextArea } = Input;
 
   const onClose = () => {
     setComment(null);
+    setMappingComments([]);
+  };
+
+  useEffect(() => {
+    if (!!mappingCode) {
+      getComments();
+    }
+  }, [mappingCode]);
+
+  const getComments = () => {
+    setLoading(true);
+    return fetch(
+      `${vocabUrl}/Terminology/${idProp}/user_input/${variableMappings}/mapping/${mappingCode}/mapping_conversations`,
+      {
+        method: 'GET',
+        headers: {
+          'Content-Type': 'application/json',
+        },
+      }
+    )
+      .then(res => {
+        if (res.ok) {
+          return res.json();
+        } else {
+          throw new Error('An unknown error occurred.');
+        }
+      })
+      .then(data => setMappingComments(data?.mapping_conversations))
+      .catch(error => {
+        if (error) {
+          notification.error({
+            message: 'Error',
+            description: 'An error occurred saving the comment.',
+          });
+        }
+        return error;
+      })
+      .finally(() => setLoading(false));
   };
 
   const onFinish = values => {
@@ -24,7 +66,7 @@ export const MappingComments = ({
     };
 
     return fetch(
-      `${vocabUrl}/Terminology/${terminologyId}/user_input/${variableMappings}/${code}/mapping_conversations`,
+      `${vocabUrl}/Terminology/${idProp}/user_input/${variableMappings}/mapping/${mappingCode}/mapping_conversations`,
       {
         method: 'PUT',
         headers: {
@@ -40,6 +82,7 @@ export const MappingComments = ({
           throw new Error('An unknown error occurred.');
         }
       })
+      .then(data => setMappingComments(data?.mapping_conversations))
       .catch(error => {
         if (error) {
           notification.error({
@@ -51,15 +94,41 @@ export const MappingComments = ({
       });
   };
 
+  const formattedDate = dateString => {
+    const date = new Date(dateString);
+
+    return date.toLocaleString('en-US', {
+      month: 'short',
+      day: '2-digit',
+      year: 'numeric',
+      hour: '2-digit',
+      minute: '2-digit',
+      hour12: true,
+    });
+  };
+
+  const commentDisplay = (mc, i) => {
+    return (
+      <div key={i} className="comment_container">
+        <div className="comment_note">{mc.note}</div>
+        <div className="comment_date_user">
+          <div>{formattedDate(mc.date)}</div>
+          <div>{mc.user_id}</div>
+        </div>
+      </div>
+    );
+  };
+
   return (
     <>
       <Modal
-        open={!!code}
+        open={!!mappingCode}
         width={'70%'}
         styles={{
           body: {
             minHeight: '60vh',
             maxHeight: '60vh',
+            overflowY: 'auto',
           },
         }}
         footer={[<Button onClick={onClose}>Close</Button>]}
@@ -67,14 +136,15 @@ export const MappingComments = ({
         closeIcon={false}
         destroyOnClose={true}
       >
-        {variableMappings} : {codeDisplay}
+        <span className="comment_code_display">{variableMappings}: </span>
+        {mappingDisplay ? mappingDisplay : mappingCode}
         <Form
           form={form}
           layout="inline"
           onFinish={() => {
             form.validateFields().then(values => {
               onFinish(values);
-              onClose();
+              form.resetFields();
             });
           }}
           preserve={false}
@@ -84,11 +154,12 @@ export const MappingComments = ({
               rows={1}
               style={{
                 width: 500,
-                resize: 'both',
+                resize: 'vertical',
               }}
               showCount
               maxLength={1000}
               autoFocus
+              className="comment_textarea"
             />
           </Form.Item>
           <Form.Item>
@@ -97,6 +168,11 @@ export const MappingComments = ({
             </Button>
           </Form.Item>
         </Form>
+        {loading ? (
+          <ModalSpinner />
+        ) : (
+          mappingComments?.map((mc, i) => commentDisplay(mc, i))
+        )}
       </Modal>
     </>
   );
diff --git a/src/components/Manager/MappingsFunctions/MappingVotes.jsx b/src/components/Manager/MappingsFunctions/MappingVotes.jsx
index e15d5ff..f8a5b53 100644
--- a/src/components/Manager/MappingsFunctions/MappingVotes.jsx
+++ b/src/components/Manager/MappingsFunctions/MappingVotes.jsx
@@ -1,4 +1,4 @@
-export const MappingVotes = (
+export const mappingVotes = (
   variableMappings,
   code,
   user,
@@ -13,7 +13,7 @@ export const MappingVotes = (
   };
 
   return fetch(
-    `${vocabUrl}/Terminology/${terminologyId}/user_input/${variableMappings?.code}/${code?.code}/mapping_votes`,
+    `${vocabUrl}/Terminology/${terminologyId}/user_input/${variableMappings?.code}/mapping/${code?.code}/mapping_votes`,
     {
       method: 'PUT',
       headers: {
diff --git a/src/components/Manager/MappingsFunctions/MappingsFunctions.scss b/src/components/Manager/MappingsFunctions/MappingsFunctions.scss
index 488f557..ac09520 100644
--- a/src/components/Manager/MappingsFunctions/MappingsFunctions.scss
+++ b/src/components/Manager/MappingsFunctions/MappingsFunctions.scss
@@ -154,3 +154,27 @@
 .existing_display {
   border-bottom: solid 1px #eeee;
 }
+
+.comment_code_display {
+  font-weight: 600;
+}
+
+.comment_textarea {
+  margin: 0 0 15px 0;
+}
+
+.comment_container {
+  margin: 10px 0 0 0;
+  border: 1px darkgray solid;
+  width: fit-content;
+  border-radius: 5px;
+  padding: 5px 8px;
+}
+
+.comment_date_user {
+  display: flex;
+  gap: 5px;
+  font-size: 0.7rem;
+  color: gray;
+  margin: 6px 0 0 0;
+}
diff --git a/src/components/Projects/Tables/TableDetails.jsx b/src/components/Projects/Tables/TableDetails.jsx
index 51d2c8e..fdaf8ec 100644
--- a/src/components/Projects/Tables/TableDetails.jsx
+++ b/src/components/Projects/Tables/TableDetails.jsx
@@ -15,11 +15,7 @@ import {
   Table,
   Tooltip,
 } from 'antd';
-import {
-  CloseCircleOutlined,
-  UpCircleOutlined,
-  DownCircleOutlined,
-} from '@ant-design/icons';
+import { CloseCircleOutlined } from '@ant-design/icons';
 import { EditTableDetails } from './EditTableDetails';
 import { DeleteTable } from './DeleteTable';
 import { LoadVariables } from './LoadVariables';
@@ -266,10 +262,6 @@ 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.code}>
-          <span className="mapping_votes mapping_actions">
-            <UpCircleOutlined style={{ color: 'blue' }} />
-            <DownCircleOutlined style={{ color: 'green' }} />
-          </span>
           <span className="mapping-display">
             <Tooltip
               title={
diff --git a/src/components/Projects/Terminologies/Terminology.jsx b/src/components/Projects/Terminologies/Terminology.jsx
index 6c942a7..534c47d 100644
--- a/src/components/Projects/Terminologies/Terminology.jsx
+++ b/src/components/Projects/Terminologies/Terminology.jsx
@@ -34,7 +34,7 @@ import { SearchContext } from '../../../Contexts/SearchContext';
 import { FilterSelect } from '../../Manager/MappingsFunctions/FilterSelect';
 import { AssignMappingsViaButton } from './AssignMappingsViaButton';
 import { ellipsisString, mappingTooltip } from '../../Manager/Utilitiy';
-import { MappingVotes } from '../../Manager/MappingsFunctions/MappingVotes';
+import { mappingVotes } from '../../Manager/MappingsFunctions/MappingVotes';
 import { MappingComments } from '../../Manager/MappingsFunctions/MappingComments';
 
 export const Terminology = () => {
@@ -52,13 +52,14 @@ export const Terminology = () => {
     mapping,
     setMapping,
     setRelationshipOptions,
+    comment,
+    setComment,
   } = useContext(MappingContext);
 
   const [pageSize, setPageSize] = useState(
     parseInt(localStorage.getItem('pageSize'), 10) || 10
   );
   const [assignMappingsViaButton, setAssignMappingsViaButton] = useState(false);
-  const [comment, setComment] = useState(false);
   const handleTableChange = (current, size) => {
     setPageSize(size);
   };
@@ -179,7 +180,7 @@ It then shows the mappings as table data and alows the user to delete a mapping
             <UpOutlined
               style={{ color: 'blue' }}
               onClick={() =>
-                MappingVotes(
+                mappingVotes(
                   variableMappings,
                   code,
                   user,
@@ -194,7 +195,7 @@ It then shows the mappings as table data and alows the user to delete a mapping
             <DownOutlined
               style={{ color: 'green' }}
               onClick={() =>
-                MappingVotes(
+                mappingVotes(
                   variableMappings,
                   code,
                   user,
@@ -515,12 +516,13 @@ It then shows the mappings as table data and alows the user to delete a mapping
             setAssignMappingsViaButton={setAssignMappingsViaButton}
             terminology={terminology}
           />
+
           <MappingComments
-            code={comment?.code}
-            codeDisplay={comment?.display}
+            mappingCode={comment?.code}
+            mappingDisplay={comment?.display}
             variableMappings={comment?.variableMappings}
             setComment={setComment}
-            terminologyId={terminologyId}
+            idProp={terminologyId}
           />
         </div>
       )}

From fd90c010da6f12d4548ccbc4654e2fff2f1ad229 Mon Sep 17 00:00:00 2001
From: Yelena Cox <yelenacox@gmail.com>
Date: Thu, 5 Dec 2024 09:34:12 -0600
Subject: [PATCH 22/30] Combined MappingReset and MappingSearch, changed CSS
 for mapping votes

---
 .../MappingsFunctions/GetMappingsModal.jsx    |  4 +-
 .../MappingsFunctions/MappingRelationship.jsx |  2 +-
 .../MappingsFunctions/MappingVotes.jsx        | 24 ++++++++-
 .../OntologyFilterCodeSubmitTerm.jsx          | 26 ----------
 .../Tables/EditMappingsTableModal.jsx         | 40 ++++-----------
 .../Projects/Tables/TableStyling.scss         | 40 ---------------
 .../Terminologies/EditMappingModal.jsx        | 36 ++++---------
 .../Projects/Terminologies/Terminology.jsx    | 50 +++++++++++++++---
 .../Projects/Terminologies/Terminology.scss   | 51 +++++++++++++++++++
 9 files changed, 140 insertions(+), 133 deletions(-)

diff --git a/src/components/Manager/MappingsFunctions/GetMappingsModal.jsx b/src/components/Manager/MappingsFunctions/GetMappingsModal.jsx
index 911e0dc..2af90b4 100644
--- a/src/components/Manager/MappingsFunctions/GetMappingsModal.jsx
+++ b/src/components/Manager/MappingsFunctions/GetMappingsModal.jsx
@@ -170,7 +170,7 @@ export const GetMappingsModal = ({
 
     setLoading(true);
     fetch(
-      `${vocabUrl}/${componentString}/${component.id}/mapping/${mappingProp}`,
+      `${vocabUrl}/${componentString}/${component.id}/mapping/${mappingProp}?user_input=true`,
       {
         method: 'PUT',
         headers: {
@@ -340,7 +340,7 @@ export const GetMappingsModal = ({
                 <MappingRelationship mapping={d} />
               </div>
             </div>
-            <div>{ellipsisString(d?.description[0], '100')}</div>
+            <div>{ellipsisString(d?.description?.[0], '100')}</div>
           </div>
         </div>
       </>
diff --git a/src/components/Manager/MappingsFunctions/MappingRelationship.jsx b/src/components/Manager/MappingsFunctions/MappingRelationship.jsx
index 451a57b..1ccbcd1 100644
--- a/src/components/Manager/MappingsFunctions/MappingRelationship.jsx
+++ b/src/components/Manager/MappingsFunctions/MappingRelationship.jsx
@@ -27,7 +27,7 @@ export const MappingRelationship = ({ mapping }) => {
       style={{
         width: 120,
       }}
-      placeholder="Quality"
+      placeholder="Relationship"
       popupMatchSelectWidth={false}
       allowClear
       value={idsForSelect[mapping.obo_id || mapping.code]}
diff --git a/src/components/Manager/MappingsFunctions/MappingVotes.jsx b/src/components/Manager/MappingsFunctions/MappingVotes.jsx
index f8a5b53..e2d34dc 100644
--- a/src/components/Manager/MappingsFunctions/MappingVotes.jsx
+++ b/src/components/Manager/MappingsFunctions/MappingVotes.jsx
@@ -1,3 +1,5 @@
+import { getById } from '../FetchManager';
+
 export const mappingVotes = (
   variableMappings,
   code,
@@ -5,7 +7,8 @@ export const mappingVotes = (
   vote,
   vocabUrl,
   terminologyId,
-  notification
+  notification,
+  setMapping
 ) => {
   const mappingVoteDTO = {
     editor: user?.email,
@@ -37,5 +40,22 @@ export const mappingVotes = (
         });
       }
       return error;
-    });
+    })
+    .then(() =>
+      getById(
+        vocabUrl,
+        'Terminology',
+        `${terminologyId}/mapping?user_input=True`
+      )
+        .then(data => setMapping(data.codes))
+        .catch(error => {
+          if (error) {
+            notification.error({
+              message: 'Error',
+              description: 'An error occurred loading mappings.',
+            });
+          }
+          return error;
+        })
+    );
 };
diff --git a/src/components/Manager/MappingsFunctions/OntologyFilterCodeSubmitTerm.jsx b/src/components/Manager/MappingsFunctions/OntologyFilterCodeSubmitTerm.jsx
index 89680c8..b294c51 100644
--- a/src/components/Manager/MappingsFunctions/OntologyFilterCodeSubmitTerm.jsx
+++ b/src/components/Manager/MappingsFunctions/OntologyFilterCodeSubmitTerm.jsx
@@ -45,29 +45,3 @@ export const OntologyFilterCodeSubmitTerm = (
       });
   }
 };
-
-//   apiPreference.api_preference.ols = apiPreferencesCode;
-
-//       fetch(`${vocabUrl}/Terminology/${terminology.id}/filter/${searchProp}`, {
-//         method: 'POST',
-//         headers: {
-//           'Content-Type': 'application/json',
-//         },
-//         body: JSON.stringify(apiPreference),
-//       })
-//         .then(res => {
-//           if (res.ok) {
-//             return res.json();
-//           } else {
-//             throw new Error('An unknown error occurred.');
-//           }
-//         })
-//         .catch(error => {
-//           if (error) {
-//             notification.error({
-//               message: 'Error',
-//               description: 'An error occurred saving the ontology preferences.',
-//             });
-//           }
-//           return error;
-//         });
diff --git a/src/components/Projects/Tables/EditMappingsTableModal.jsx b/src/components/Projects/Tables/EditMappingsTableModal.jsx
index 9d2d935..aac6938 100644
--- a/src/components/Projects/Tables/EditMappingsTableModal.jsx
+++ b/src/components/Projects/Tables/EditMappingsTableModal.jsx
@@ -4,7 +4,6 @@ import { myContext } from '../../../App';
 import { ModalSpinner } from '../../Manager/Spinner';
 import { MappingContext } from '../../../Contexts/MappingContext';
 import { MappingSearch } from '../../Manager/MappingsFunctions/MappingSearch';
-import { MappingReset } from '../../Manager/MappingsFunctions/MappingReset';
 import { ResetTableMappings } from './ResetTableMappings';
 import { systemsMatch } from '../../Manager/Utilitiy';
 import { getById } from '../../Manager/FetchManager';
@@ -294,7 +293,12 @@ export const EditMappingsTableModal = ({
                   <ResetTableMappings
                     tableId={tableId}
                     editMappings={editMappings}
-                    setReset={setReset}
+                    setReset={resp => {
+                      setReset(resp);
+                      if (resp) {
+                        setMappingsForSearch([]);
+                      }
+                    }}
                   />
                   <Button onClick={() => setEditSearch(true)}>
                     Edit / Add
@@ -331,44 +335,20 @@ export const EditMappingsTableModal = ({
             </Form.Item>
           </Form>
         </>
-      ) : // If reset or editSearch is true the MappingSearch modal opens to perform the search for the table code
-      editSearch ? (
+      ) : (
+        // If reset or editSearch is true the MappingSearch modal opens to perform the search for the table code
+
         <MappingSearch
-          editMappings={editMappings}
           setEditMappings={setEditMappings}
           mappingsForSearch={mappingsForSearch}
           form={form}
-          reset={reset}
           onClose={form.resetFields}
           searchProp={editMappings?.name}
-          mappingDesc={
-            editMappings?.description
-              ? editMappings?.description
-              : 'No Description'
-          }
+          mappingDesc={editMappings?.description ?? 'No Description'}
           component={table}
           mappingProp={editMappings?.code}
           table={table}
         />
-      ) : (
-        reset && (
-          <MappingReset
-            searchProp={editMappings.name}
-            mappingDesc={
-              editMappings.description
-                ? editMappings.description
-                : 'No Description'
-            }
-            setEditMappings={setEditMappings}
-            mappingsForSearch={mappingsForSearch}
-            form={form}
-            reset={reset}
-            onClose={form.resetFields}
-            component={table}
-            mappingProp={editMappings.code}
-            table={table}
-          />
-        )
       )}
     </Modal>
   );
diff --git a/src/components/Projects/Tables/TableStyling.scss b/src/components/Projects/Tables/TableStyling.scss
index 945c2c5..609bd6b 100644
--- a/src/components/Projects/Tables/TableStyling.scss
+++ b/src/components/Projects/Tables/TableStyling.scss
@@ -75,43 +75,3 @@ input::file-selector-button:hover {
   gap: 10px;
   margin-left: 50px;
 }
-
-.mapping {
-  &-display {
-    white-space: nowrap;
-  }
-  display: flex;
-  align-items: center;
-  &:hover .mapping_actions {
-    transition: all 0.4s linear;
-    opacity: 1;
-  }
-  .mapping_actions {
-    padding-left: 0.25rem;
-    cursor: pointer;
-    opacity: 0;
-  }
-}
-
-.mapping_votes {
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  // gap: 2px;
-  padding-right: 0.25rem;
-  font-size: 0.7rem;
-}
-
-.no_mapping_button {
-  padding-left: 2rem;
-}
-
-.mapping_relationship {
-  padding: 2px 6px;
-  border: 1px solid $greyColor;
-  border-radius: 4px;
-  &:hover {
-    background-color: rgb(245, 245, 245);
-    transition: all 0.3s linear;
-  }
-}
diff --git a/src/components/Projects/Terminologies/EditMappingModal.jsx b/src/components/Projects/Terminologies/EditMappingModal.jsx
index b543b9e..b92d75f 100644
--- a/src/components/Projects/Terminologies/EditMappingModal.jsx
+++ b/src/components/Projects/Terminologies/EditMappingModal.jsx
@@ -12,7 +12,6 @@ import { myContext } from '../../../App';
 import { ModalSpinner } from '../../Manager/Spinner';
 import { MappingSearch } from '../../Manager/MappingsFunctions/MappingSearch';
 import { ResetMappings } from './ResetMappings';
-import { MappingReset } from '../../Manager/MappingsFunctions/MappingReset';
 import { systemsMatch } from '../../Manager/Utilitiy';
 import { getById } from '../../Manager/FetchManager';
 import { SearchContext } from '../../../Contexts/SearchContext';
@@ -145,7 +144,7 @@ export const EditMappingsModal = ({
       editor: user.email,
     };
     fetch(
-      `${vocabUrl}/Terminology/${terminologyId}/mapping/${editMappings.code}`,
+      `${vocabUrl}/Terminology/${terminologyId}/mapping/${editMappings.code}?user_input=true`,
       {
         method: 'PUT',
         headers: {
@@ -209,7 +208,7 @@ export const EditMappingsModal = ({
     };
 
     fetch(
-      `${vocabUrl}/Terminology/${terminologyId}/mapping/${editMappings.code}`,
+      `${vocabUrl}/Terminology/${terminologyId}/mapping/${editMappings.code}?user_input=true`,
       {
         method: 'PUT',
         headers: {
@@ -301,7 +300,12 @@ export const EditMappingsModal = ({
                   <ResetMappings
                     terminologyId={terminologyId}
                     editMappings={editMappings}
-                    setReset={setReset}
+                    setReset={resp => {
+                      setReset(resp);
+                      if (resp) {
+                        setMappingsForSearch([]);
+                      }
+                    }}
                   />
                   <Button onClick={() => setEditSearch(true)}>
                     Edit / Add
@@ -342,38 +346,20 @@ export const EditMappingsModal = ({
             </Form.Item>
           </Form>
         </>
-      ) : // If reset or editSearch is true the MappingSearch modal opens to perform the search for the terminology code
-      editSearch ? (
+      ) : (
+        // If reset or editSearch is true the MappingSearch modal opens to perform the search for the terminology code
         <MappingSearch
-          editMappings={editMappings}
           setEditMappings={setEditMappings}
           mappingsForSearch={mappingsForSearch}
           form={form}
-          reset={reset}
           onClose={form.resetFields}
           searchProp={
             editMappings?.display ? editMappings?.display : editMappings?.code
           }
           mappingProp={editMappings?.code}
-          mappingDesc={editMappings?.description}
+          mappingDesc={editMappings?.description ?? 'No description'}
           terminology={terminology}
         />
-      ) : (
-        reset && (
-          <MappingReset
-            searchProp={
-              editMappings?.display ? editMappings.display : editMappings?.code
-            }
-            setEditMappings={setEditMappings}
-            mappingsForSearch={mappingsForSearch}
-            form={form}
-            reset={reset}
-            onClose={form.resetFields}
-            mappingDesc={editMappings?.description}
-            mappingProp={editMappings?.code}
-            terminology={terminology}
-          />
-        )
       )}
     </Modal>
   );
diff --git a/src/components/Projects/Terminologies/Terminology.jsx b/src/components/Projects/Terminologies/Terminology.jsx
index 534c47d..e4d887d 100644
--- a/src/components/Projects/Terminologies/Terminology.jsx
+++ b/src/components/Projects/Terminologies/Terminology.jsx
@@ -154,6 +154,12 @@ It then shows the mappings as table data and alows the user to delete a mapping
     </div>
   );
 
+  const votesCount = code => {
+    const calculatedCount =
+      code.user_input?.votes_count.up - code.user_input?.votes_count.down;
+    return calculatedCount;
+  };
+
   const matchCode = variable => {
     if (!mapping?.length) {
       return noMapping(variable);
@@ -162,11 +168,13 @@ It then shows the mappings as table data and alows the user to delete a mapping
     const variableMappings = mapping.find(
       item => item?.code === variable?.code
     );
+
     if (variableMappings && variableMappings.mappings?.length) {
       return variableMappings.mappings.map(code => (
         <div className="mapping" key={code.code}>
-          <span className="mapping_actions">
+          <span>
             <MessageOutlined
+              className="mapping_actions"
               onClick={() =>
                 setComment({
                   code: code.code,
@@ -176,8 +184,9 @@ It then shows the mappings as table data and alows the user to delete a mapping
               }
             />
           </span>
-          <span className="mapping_votes mapping_actions">
+          <span className="mapping_votes">
             <UpOutlined
+              className="mapping_actions"
               style={{ color: 'blue' }}
               onClick={() =>
                 mappingVotes(
@@ -187,12 +196,30 @@ It then shows the mappings as table data and alows the user to delete a mapping
                   'up',
                   vocabUrl,
                   terminologyId,
-                  notification
+                  notification,
+                  setMapping
                 )
               }
             />
-            0
+            <Tooltip
+              title={`up: ${code.user_input?.votes_count.up},
+                down: ${code.user_input?.votes_count.down}`}
+              mouseEnterDelay={0.75}
+            >
+              <span
+                className={
+                  (code.user_input?.votes_count.down !== 0 ||
+                    code.user_input?.votes_count.up !== 0) &&
+                  votesCount(code) === 0
+                    ? 'red_votes_count'
+                    : 'votes_count'
+                }
+              >
+                {votesCount(code)}
+              </span>
+            </Tooltip>
             <DownOutlined
+              className="mapping_actions"
               style={{ color: 'green' }}
               onClick={() =>
                 mappingVotes(
@@ -202,7 +229,8 @@ It then shows the mappings as table data and alows the user to delete a mapping
                   'down',
                   vocabUrl,
                   terminologyId,
-                  notification
+                  notification,
+                  setMapping
                 )
               }
             />
@@ -214,6 +242,7 @@ It then shows the mappings as table data and alows the user to delete a mapping
                   ? mappingTooltip(code)
                   : code.code
               }
+              mouseEnterDelay={0.75}
             >
               {ellipsisString(code.display ? code.display : code.code, '25')}
             </Tooltip>
@@ -222,7 +251,10 @@ It then shows the mappings as table data and alows the user to delete a mapping
             className="mapping_actions"
             onClick={() => handleRemoveMapping(variableMappings, code)}
           >
-            <CloseCircleOutlined style={{ color: 'red' }} />
+            <CloseCircleOutlined
+              className="mapping_actions"
+              style={{ color: 'red' }}
+            />
           </span>
         </div>
       ));
@@ -290,7 +322,11 @@ It then shows the mappings as table data and alows the user to delete a mapping
               .then(data => {
                 setApiPreferencesTerm(data);
               });
-            getById(vocabUrl, 'Terminology', `${terminologyId}/mapping`)
+            getById(
+              vocabUrl,
+              'Terminology',
+              `${terminologyId}/mapping?user_input=True`
+            )
               .then(data => setMapping(data.codes))
               .catch(error => {
                 if (error) {
diff --git a/src/components/Projects/Terminologies/Terminology.scss b/src/components/Projects/Terminologies/Terminology.scss
index 0953ec4..353bd4f 100644
--- a/src/components/Projects/Terminologies/Terminology.scss
+++ b/src/components/Projects/Terminologies/Terminology.scss
@@ -199,3 +199,54 @@ a.terminology_link:hover {
 .modal_divider {
   margin-bottom: 15px;
 }
+
+.red_votes_count,
+.votes_count {
+  background-color: rgb(230, 229, 229);
+  padding: 0 3px;
+}
+.red_votes_count {
+  color: red;
+}
+
+.mapping_votes {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  padding-right: 0.25rem;
+  font-size: 0.7rem;
+}
+
+.no_mapping_button {
+  padding-left: 2rem;
+}
+
+.mapping_relationship {
+  padding: 2px 6px;
+  border: 1px solid $greyColor;
+  border-radius: 4px;
+  &:hover {
+    background-color: rgb(245, 245, 245);
+    transition: all 0.3s linear;
+  }
+}
+
+.mapping {
+  &-display {
+    white-space: nowrap;
+  }
+  display: flex;
+  align-items: center;
+  .mapping_actions {
+    padding-left: 0.25rem;
+    cursor: pointer;
+    opacity: 0;
+    visibility: hidden;
+    transition: opacity 0.4s linear;
+  }
+  &:hover .mapping_actions {
+    transition: all 0.4s linear;
+    opacity: 1;
+    visibility: visible;
+  }
+}

From 48f907e3c7cd36e1e090c07746ef48e72b06ad26 Mon Sep 17 00:00:00 2001
From: Eric Torstenson <eric.s.torstenson@vumc.org>
Date: Thu, 5 Dec 2024 10:02:18 -0600
Subject: [PATCH 23/30] Quick starting point for Map Dragon Help Site

---
 docs/.nojekyll         |  0
 docs/README.md         | 45 ++++++++++++++++++++++++++++++++++++++++++
 docs/_navbar.md        |  4 ++++
 docs/datadictionary.md | 31 +++++++++++++++++++++++++++++
 docs/index.html        | 23 +++++++++++++++++++++
 5 files changed, 103 insertions(+)
 create mode 100755 docs/.nojekyll
 create mode 100755 docs/README.md
 create mode 100644 docs/_navbar.md
 create mode 100644 docs/datadictionary.md
 create mode 100755 docs/index.html

diff --git a/docs/.nojekyll b/docs/.nojekyll
new file mode 100755
index 0000000..e69de29
diff --git a/docs/README.md b/docs/README.md
new file mode 100755
index 0000000..8ffc7b5
--- /dev/null
+++ b/docs/README.md
@@ -0,0 +1,45 @@
+# Map Dragon
+This application will support several user groups in submitting and validating their data, managing and tracking data definitions, and aligning data to standardized terms. 
+
+## Getting Started
+### Vite React App
+
+This is a React application bootstrapped with Vite. 
+
+### Prerequisites
+
+Make sure you have Node.js and npm installed on your machine.
+
+### Installation
+
+1. Clone the repository:
+
+   ```sh
+   git clone git@github.com:NIH-NCPI/map-dragon.git
+
+2. Navigate into the project directory:
+
+   ```sh
+   cd map-dragon
+3. Install dependencies
+
+   ```sh
+   npm i
+
+### Development
+1. To start the development server, run:
+   ```sh
+   npm run dev
+
+### Dependencies
+This project utilizes the following dependencies:
+
++ React: A JavaScript library for building user interfaces  
++ Vite: A front-end tooling for web development  
++ Ant Design: A design component library
++ Sass: A CSS preprocessor
++ React OAuth2 | Google: A React library for Google OAuth
++ jwt-decode: A JWT decoder
++ Papa Parse: A CSV parser
+
+
diff --git a/docs/_navbar.md b/docs/_navbar.md
new file mode 100644
index 0000000..b097239
--- /dev/null
+++ b/docs/_navbar.md
@@ -0,0 +1,4 @@
+* Map Dragon
+  * [Map Dragon Local Installation Directions](https://github.com/NIH-NCPI/map-dragon)
+* File Formats
+  * [Loading a Data Dictionary](datadictionary.md)
\ No newline at end of file
diff --git a/docs/datadictionary.md b/docs/datadictionary.md
new file mode 100644
index 0000000..675f3b8
--- /dev/null
+++ b/docs/datadictionary.md
@@ -0,0 +1,31 @@
+# Loading a Data Dictionary
+(TBD How to use the website to load the DD)
+
+## Expected Format for DD Table
+The following table format is currently the only format accepted by the Map Dragon "Load Table" function. When run, a new data dictionary table is instantiated along with relevant enumerations as new terminologies.
+
+Fields such as *variable_name* and *data_type* are required. Other fields such as *description* are optional but highly recommended. 
+
+The data should be a valid, ASCII only CSV file with double quotes used for "Quote Characters", commas for delimiters, etc. 
+
+| *Column Name* | *Column Descriptions* | *Column Type* |
+|  ------------ | --------------------- | ------------- |
+| *variable_name* | The human readable name associated with variable name | String |
+| *description* | Fully informative description of the contents associated with this variable/column| String |
+| *data_type* | Data type associated with column data  | integer, number, string, enumeration |
+| *min* | Minimum value (integers and numbers only) | numeric value |
+| *max* | Maximum acceptable value (integers and numbers only) | numeric value | 
+| *units* | UCUM code for units | UCUM code prefixed with the curie, UCUM. UCUM:ml for example |
+| *enumerations* | Semi-colon separated list of enumerated values. See below for more details about formatting the enumeration list. | String |
+
+### Formatting for Enumerations
+At the top level, enumerations are just a list of terms separated by semi-colons. For enumerated types with specified codes, these will be provided in the following format: 
+
+> 1=Male;2=Female;0=Unknown;-1=Preferred Not To Answer
+
+In this example, the following codes are extracted: 1, 2, 0 and -1 and assigned the following displays (in order): Male, Female, Unknown and Preferred Not To Answer.
+
+If there is no code specified, the codes will be created using the following logic: 
+> Case is dropped to lower case and potentially problematic characters, such as parenthesis, "(" or ")" will be removed. Whitespace characters will be replaced with underscores, "_". 
+
+There is currently no way to allow codes or values to include semi-colons, ";", or equal signs, "=" in them. They should be replaced prior to loading into Map Dragon. 
\ No newline at end of file
diff --git a/docs/index.html b/docs/index.html
new file mode 100755
index 0000000..00b6590
--- /dev/null
+++ b/docs/index.html
@@ -0,0 +1,23 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <title>Document</title>
+  <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
+  <meta name="description" content="Description">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0">
+  <link rel="stylesheet" href="//cdn.jsdelivr.net/npm/docsify/themes/dark.css" />
+</head>
+<body>
+  <div id="app"></div>
+  <script>
+    window.$docsify = {
+      name: 'Map Dragon',
+      repo: 'https://github.com/NIH-NCPI/map-dragon',
+      loadNavbar: true
+    }
+  </script>
+  <!-- Docsify v4 -->
+  <script src="//cdn.jsdelivr.net/npm/docsify@4"></script>
+</body>
+</html>

From e982b2c40ef9cbf0bf6bfbd5de6bccc18d4c9de3 Mon Sep 17 00:00:00 2001
From: Yelena Cox <yelenacox@gmail.com>
Date: Thu, 5 Dec 2024 12:38:06 -0600
Subject: [PATCH 24/30] Modified .env file

---
 .env | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/.env b/.env
index fd0a3d4..637e35e 100644
--- a/.env
+++ b/.env
@@ -3,5 +3,5 @@ VITE_MONARCH_SEARCH = https://api-v3.monarchinitiative.org/v3/api/search?
 # VITE_VOCAB_ENDPOINT = http://127.0.0.1:5000/api # local
 VITE_VOCAB_ENDPOINT = https://locutus-dev-110109177269.us-central1.run.app/api # dev
 # VITE_VOCAB_ENDPOINT = https://locutus-uat-1066621297011.us-central1.run.app/api # uat
-VITE_CLIENT_ID = 907694787484-36jr4oaf04mmniik6482batc87ejemm8.apps.googleusercontent.com
+VITE_CLIENT_ID = 159970607373-mvkv4lfl4ovpul5bssatuf1re4ucvg8n.apps.googleusercontent.com
 VITE_MAPDRAGON_VERSION = "Development"
\ No newline at end of file

From 2c4095c1d3a25b11e429d488c003c30e5618e7b3 Mon Sep 17 00:00:00 2001
From: Yelena Cox <yelenacox@gmail.com>
Date: Thu, 5 Dec 2024 15:44:33 -0600
Subject: [PATCH 25/30] Corrected error with enumeration dropdown display
 returning path name

---
 src/components/Projects/Tables/EditDataTypeSubForm.jsx | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/src/components/Projects/Tables/EditDataTypeSubForm.jsx b/src/components/Projects/Tables/EditDataTypeSubForm.jsx
index fd47948..339e165 100644
--- a/src/components/Projects/Tables/EditDataTypeSubForm.jsx
+++ b/src/components/Projects/Tables/EditDataTypeSubForm.jsx
@@ -32,11 +32,12 @@ function EditDataTypeSubForm({ type, form, editRow, tableData }) {
     if (editRow === tableData.key && tableData.data_type === 'ENUMERATION') {
       form.setFieldsValue({
         enumerations: {
-          reference: tableData.enumeration.props.to.slice(1),
+          reference: tableData?.variable?.enumerations?.reference,
         },
       });
     }
   };
+  console.log(tableData);
 
   return (
     <>

From 2db5fb0425a2c34cdac0086e77db4293e50d0609 Mon Sep 17 00:00:00 2001
From: Yelena Cox <yelenacox@gmail.com>
Date: Thu, 5 Dec 2024 15:50:35 -0600
Subject: [PATCH 26/30] removed console log

---
 src/components/Projects/Tables/EditDataTypeSubForm.jsx | 1 -
 1 file changed, 1 deletion(-)

diff --git a/src/components/Projects/Tables/EditDataTypeSubForm.jsx b/src/components/Projects/Tables/EditDataTypeSubForm.jsx
index 339e165..3b61b49 100644
--- a/src/components/Projects/Tables/EditDataTypeSubForm.jsx
+++ b/src/components/Projects/Tables/EditDataTypeSubForm.jsx
@@ -37,7 +37,6 @@ function EditDataTypeSubForm({ type, form, editRow, tableData }) {
       });
     }
   };
-  console.log(tableData);
 
   return (
     <>

From 8d5a9e447ba285dc7e6c1269cc7c531636e4618e Mon Sep 17 00:00:00 2001
From: Yelena Cox <yelenacox@gmail.com>
Date: Mon, 9 Dec 2024 09:22:36 -0600
Subject: [PATCH 27/30] committing to switch branches

---
 src/AppRouter.jsx                             | 85 +++++++++++++++----
 .../MappingsFunctions/GetMappingsModal.jsx    |  2 +-
 .../Projects/Terminologies/Terminology.jsx    | 20 ++---
 3 files changed, 80 insertions(+), 27 deletions(-)

diff --git a/src/AppRouter.jsx b/src/AppRouter.jsx
index 1bd9ef6..a4039a1 100644
--- a/src/AppRouter.jsx
+++ b/src/AppRouter.jsx
@@ -29,17 +29,15 @@ import { SearchContextRoot } from './Contexts/SearchContext.jsx';
 import { About } from './components/About/About.jsx';
 
 export const AppRouter = () => {
- const {user} = useContext(myContext);
-
   const isLoggedIn = () => {
     const storedUser = localStorage.getItem('user');
-    
+
     if (storedUser) {
       return true;
     } else {
       return false;
     }
-  }
+  };
   return (
     <BrowserRouter>
       <Routes>
@@ -64,47 +62,102 @@ export const AppRouter = () => {
           <Route element={<PageLayout />}>
             <Route path="/search/:query" element={<SearchResults />} />
             <Route path="/404" element={<Error404 />} />
-            
+
             <Route path="/ontologies" element={<OntologyInfo />} />
             <Route path="/about" element={<About />} />
-            <Route path="/terminologies" element={ isLoggedIn() ? <TerminologyList />:<Navigate to="/login" /> } />
-            <Route path="/login" element={<LoginPage/>}/>
+            <Route
+              path="/terminologies"
+              element={
+                isLoggedIn() ? <TerminologyList /> : <Navigate to="/login" />
+              }
+            />
+            <Route path="/login" element={<LoginPage />} />
             <Route
               path="/terminology"
               element={<Navigate to="/terminologies" />}
             />
             <Route element={<MappingContextRoot />}>
               <Route element={<SearchContextRoot />}>
-                <Route path="/studies" element={isLoggedIn() ? <StudyList />: <Navigate to="/login" />} />
+                <Route
+                  path="/studies"
+                  element={
+                    isLoggedIn() ? <StudyList /> : <Navigate to="/login" />
+                  }
+                />
                 <Route path="/study" element={<Navigate to="/studies" />} />
                 <Route path="/Study/:studyId">
-                  <Route index element={isLoggedIn() ? <StudyDetails />: <Navigate to="/login" />} />
+                  <Route
+                    index
+                    element={
+                      isLoggedIn() ? <StudyDetails /> : <Navigate to="/login" />
+                    }
+                  />
                   <Route path="DataDictionary">
-                    <Route index element={isLoggedIn() ? <StudyDetails />: <Navigate to="/login" />} />
+                    <Route
+                      index
+                      element={
+                        isLoggedIn() ? (
+                          <StudyDetails />
+                        ) : (
+                          <Navigate to="/login" />
+                        )
+                      }
+                    />
                     <Route
                       path="/Study/:studyId/DataDictionary/:DDId/Table/"
-                      element={isLoggedIn() ? <DDDetails />: <Navigate to="/login" />}
+                      element={
+                        isLoggedIn() ? <DDDetails /> : <Navigate to="/login" />
+                      }
                     />
                     <Route path="/Study/:studyId/DataDictionary/:DDId">
-                      <Route index element={isLoggedIn() ? <DDDetails />: <Navigate to="/login" />} />
+                      <Route
+                        index
+                        element={
+                          isLoggedIn() ? (
+                            <DDDetails />
+                          ) : (
+                            <Navigate to="/login" />
+                          )
+                        }
+                      />
                       <Route
                         path="/Study/:studyId/DataDictionary/:DDId/Table/:tableId"
-                        element={isLoggedIn() ? <TableDetails />: <Navigate to="/login" />}
+                        element={
+                          isLoggedIn() ? (
+                            <TableDetails />
+                          ) : (
+                            <Navigate to="/login" />
+                          )
+                        }
                       />
                       <Route
                         path="/Study/:studyId/DataDictionary/:DDId/Table/:tableId/Terminology/:terminologyId"
-                        element={isLoggedIn() ? <Terminology />: <Navigate to="/login" />}
+                        element={
+                          isLoggedIn() ? (
+                            <Terminology />
+                          ) : (
+                            <Navigate to="/login" />
+                          )
+                        }
                       />
                       <Route
                         path="/Study/:studyId/DataDictionary/:DDId/Table/:tableId/Terminology/"
-                        element={isLoggedIn() ? <Terminology />: <Navigate to="/login" />}
+                        element={
+                          isLoggedIn() ? (
+                            <Terminology />
+                          ) : (
+                            <Navigate to="/login" />
+                          )
+                        }
                       />
                     </Route>
                   </Route>
                 </Route>
                 <Route
                   path="/Terminology/:terminologyId"
-                  element={isLoggedIn() ? <Terminology />: <Navigate to="/login" />}
+                  element={
+                    isLoggedIn() ? <Terminology /> : <Navigate to="/login" />
+                  }
                 />
               </Route>
             </Route>
diff --git a/src/components/Manager/MappingsFunctions/GetMappingsModal.jsx b/src/components/Manager/MappingsFunctions/GetMappingsModal.jsx
index 2af90b4..424e43e 100644
--- a/src/components/Manager/MappingsFunctions/GetMappingsModal.jsx
+++ b/src/components/Manager/MappingsFunctions/GetMappingsModal.jsx
@@ -170,7 +170,7 @@ export const GetMappingsModal = ({
 
     setLoading(true);
     fetch(
-      `${vocabUrl}/${componentString}/${component.id}/mapping/${mappingProp}?user_input=true`,
+      `${vocabUrl}/${componentString}/${component.id}/mapping/${mappingProp}?user_input=true&user=${user?.email}`,
       {
         method: 'PUT',
         headers: {
diff --git a/src/components/Projects/Terminologies/Terminology.jsx b/src/components/Projects/Terminologies/Terminology.jsx
index e4d887d..6b05dea 100644
--- a/src/components/Projects/Terminologies/Terminology.jsx
+++ b/src/components/Projects/Terminologies/Terminology.jsx
@@ -325,18 +325,18 @@ It then shows the mappings as table data and alows the user to delete a mapping
             getById(
               vocabUrl,
               'Terminology',
-              `${terminologyId}/mapping?user_input=True`
+              `${terminologyId}/mapping?user_input=True+user=${user?.email}`
             )
               .then(data => setMapping(data.codes))
-              .catch(error => {
-                if (error) {
-                  notification.error({
-                    message: 'Error',
-                    description: 'An error occurred loading mappings.',
-                  });
-                }
-                return error;
-              })
+              // .catch(error => {
+              //   if (error) {
+              //     notification.error({
+              //       message: 'Error',
+              //       description: 'An error occurred loading mappings.',
+              //     });
+              //   }
+              //   return error;
+              // })
               .then(() =>
                 getById(
                   vocabUrl,

From dc4ffe61514d9fe654c6ad16d75cb5c4a41c050b Mon Sep 17 00:00:00 2001
From: Yelena Cox <yelenacox@gmail.com>
Date: Mon, 9 Dec 2024 14:11:27 -0600
Subject: [PATCH 28/30] Mapping comments updating count after making new
 comment

---
 .../MappingsFunctions/AssignMappings.jsx      |  17 +-
 .../MappingsFunctions/MappingComments.jsx     |  21 ++-
 .../MappingsFunctions/MappingVotes.jsx        |   2 +-
 .../Terminologies/AssignMappingsViaButton.jsx |   2 +-
 .../Terminologies/EditMappingModal.jsx        |   4 +-
 .../Projects/Terminologies/Terminology.jsx    | 162 +++++++++++-------
 6 files changed, 137 insertions(+), 71 deletions(-)

diff --git a/src/components/Manager/MappingsFunctions/AssignMappings.jsx b/src/components/Manager/MappingsFunctions/AssignMappings.jsx
index 7c4f794..187f8de 100644
--- a/src/components/Manager/MappingsFunctions/AssignMappings.jsx
+++ b/src/components/Manager/MappingsFunctions/AssignMappings.jsx
@@ -73,13 +73,16 @@ export const AssignMappings = ({
       editor: user.email,
     };
 
-    fetch(`${vocabUrl}/Terminology/${terminology.id}/mapping/${mappingProp}`, {
-      method: 'PUT',
-      headers: {
-        'Content-Type': 'application/json',
-      },
-      body: JSON.stringify(mappingsDTO),
-    })
+    fetch(
+      `${vocabUrl}/Terminology/${terminology.id}/mapping/${mappingProp}?user_input=true&user=${user?.email}`,
+      {
+        method: 'PUT',
+        headers: {
+          'Content-Type': 'application/json',
+        },
+        body: JSON.stringify(mappingsDTO),
+      }
+    )
       .then(res => {
         if (res.ok) {
           return res.json();
diff --git a/src/components/Manager/MappingsFunctions/MappingComments.jsx b/src/components/Manager/MappingsFunctions/MappingComments.jsx
index b0a8fc3..33bcfe1 100644
--- a/src/components/Manager/MappingsFunctions/MappingComments.jsx
+++ b/src/components/Manager/MappingsFunctions/MappingComments.jsx
@@ -3,6 +3,7 @@ import { useContext, useEffect, useState } from 'react';
 import { myContext } from '../../../App';
 import { MappingContext } from '../../../Contexts/MappingContext';
 import { ModalSpinner } from '../Spinner';
+import { getById } from '../FetchManager';
 
 export const MappingComments = ({
   mappingCode,
@@ -10,6 +11,7 @@ export const MappingComments = ({
   variableMappings,
   setComment,
   idProp,
+  setMapping,
 }) => {
   const [form] = Form.useForm();
   const { vocabUrl, user } = useContext(myContext);
@@ -91,7 +93,24 @@ export const MappingComments = ({
           });
         }
         return error;
-      });
+      })
+      .then(() =>
+        getById(
+          vocabUrl,
+          'Terminology',
+          `${idProp}/mapping?user_input=True&user=${user?.email}`
+        )
+          .then(data => setMapping(data.codes))
+          .catch(error => {
+            if (error) {
+              notification.error({
+                message: 'Error',
+                description: 'An error occurred loading mappings.',
+              });
+            }
+            return error;
+          })
+      );
   };
 
   const formattedDate = dateString => {
diff --git a/src/components/Manager/MappingsFunctions/MappingVotes.jsx b/src/components/Manager/MappingsFunctions/MappingVotes.jsx
index e2d34dc..eb16c0b 100644
--- a/src/components/Manager/MappingsFunctions/MappingVotes.jsx
+++ b/src/components/Manager/MappingsFunctions/MappingVotes.jsx
@@ -45,7 +45,7 @@ export const mappingVotes = (
       getById(
         vocabUrl,
         'Terminology',
-        `${terminologyId}/mapping?user_input=True`
+        `${terminologyId}/mapping?user_input=True&user=${user?.email}`
       )
         .then(data => setMapping(data.codes))
         .catch(error => {
diff --git a/src/components/Projects/Terminologies/AssignMappingsViaButton.jsx b/src/components/Projects/Terminologies/AssignMappingsViaButton.jsx
index 440b567..4b539b7 100644
--- a/src/components/Projects/Terminologies/AssignMappingsViaButton.jsx
+++ b/src/components/Projects/Terminologies/AssignMappingsViaButton.jsx
@@ -68,7 +68,7 @@ export const AssignMappingsViaButton = ({
     };
 
     fetch(
-      `${vocabUrl}/Terminology/${terminology.id}/mapping/${assignMappingsViaButton.code}`,
+      `${vocabUrl}/Terminology/${terminology.id}/mapping/${assignMappingsViaButton.code}?user_input=true&user=${user?.email}`,
       {
         method: 'PUT',
         headers: {
diff --git a/src/components/Projects/Terminologies/EditMappingModal.jsx b/src/components/Projects/Terminologies/EditMappingModal.jsx
index b92d75f..92b2259 100644
--- a/src/components/Projects/Terminologies/EditMappingModal.jsx
+++ b/src/components/Projects/Terminologies/EditMappingModal.jsx
@@ -144,7 +144,7 @@ export const EditMappingsModal = ({
       editor: user.email,
     };
     fetch(
-      `${vocabUrl}/Terminology/${terminologyId}/mapping/${editMappings.code}?user_input=true`,
+      `${vocabUrl}/Terminology/${terminologyId}/mapping/${editMappings.code}?user_input=true&user=${user?.email}`,
       {
         method: 'PUT',
         headers: {
@@ -208,7 +208,7 @@ export const EditMappingsModal = ({
     };
 
     fetch(
-      `${vocabUrl}/Terminology/${terminologyId}/mapping/${editMappings.code}?user_input=true`,
+      `${vocabUrl}/Terminology/${terminologyId}/mapping/${editMappings.code}?user_input=true&user=${user?.email}`,
       {
         method: 'PUT',
         headers: {
diff --git a/src/components/Projects/Terminologies/Terminology.jsx b/src/components/Projects/Terminologies/Terminology.jsx
index 6b05dea..73da018 100644
--- a/src/components/Projects/Terminologies/Terminology.jsx
+++ b/src/components/Projects/Terminologies/Terminology.jsx
@@ -15,6 +15,8 @@ import {
   Tooltip,
 } from 'antd';
 import {
+  CaretDownOutlined,
+  CaretUpOutlined,
   CloseCircleOutlined,
   DownOutlined,
   MessageOutlined,
@@ -91,13 +93,16 @@ export const Terminology = () => {
       editor: user.email,
     };
 
-    fetch(`${vocabUrl}/Terminology/${terminologyId}/mapping/${mappingCode}`, {
-      method: 'PUT',
-      headers: {
-        'Content-Type': 'application/json',
-      },
-      body: JSON.stringify(mappingsDTO),
-    })
+    fetch(
+      `${vocabUrl}/Terminology/${terminologyId}/mapping/${mappingCode}?user_input=true&user=${user?.email}`,
+      {
+        method: 'PUT',
+        headers: {
+          'Content-Type': 'application/json',
+        },
+        body: JSON.stringify(mappingsDTO),
+      }
+    )
       .then(res => {
         if (res.ok) {
           return res.json();
@@ -160,6 +165,11 @@ It then shows the mappings as table data and alows the user to delete a mapping
     return calculatedCount;
   };
 
+  const userVote = code => {
+    const foundVote = code.user_input?.users_vote;
+    return foundVote;
+  };
+
   const matchCode = variable => {
     if (!mapping?.length) {
       return noMapping(variable);
@@ -173,34 +183,53 @@ It then shows the mappings as table data and alows the user to delete a mapping
       return variableMappings.mappings.map(code => (
         <div className="mapping" key={code.code}>
           <span>
-            <MessageOutlined
-              className="mapping_actions"
-              onClick={() =>
-                setComment({
-                  code: code.code,
-                  display: code.display,
-                  variableMappings: variableMappings.code,
-                })
-              }
-            />
+            <Tooltip
+              title={code?.user_input?.comments_count}
+              mouseEnterDelay={0.75}
+            >
+              <MessageOutlined
+                className="mapping_actions"
+                onClick={() =>
+                  setComment({
+                    code: code.code,
+                    display: code.display,
+                    variableMappings: variableMappings.code,
+                  })
+                }
+              />
+            </Tooltip>
           </span>
           <span className="mapping_votes">
-            <UpOutlined
-              className="mapping_actions"
-              style={{ color: 'blue' }}
-              onClick={() =>
-                mappingVotes(
-                  variableMappings,
-                  code,
-                  user,
-                  'up',
-                  vocabUrl,
-                  terminologyId,
-                  notification,
-                  setMapping
-                )
-              }
-            />
+            {userVote(code) === 'up' ? (
+              <CaretUpOutlined
+                className="mapping_actions user_vote_icon"
+                style={{
+                  color: 'blue',
+                  cursor: 'not-allowed',
+                  fontSize: '1rem',
+                }}
+              />
+            ) : (
+              <UpOutlined
+                className="mapping_actions"
+                style={{
+                  color: 'blue',
+                }}
+                onClick={() =>
+                  userVote(code) !== 'up' &&
+                  mappingVotes(
+                    variableMappings,
+                    code,
+                    user,
+                    'up',
+                    vocabUrl,
+                    terminologyId,
+                    notification,
+                    setMapping
+                  )
+                }
+              />
+            )}
             <Tooltip
               title={`up: ${code.user_input?.votes_count.up},
                 down: ${code.user_input?.votes_count.down}`}
@@ -218,22 +247,36 @@ It then shows the mappings as table data and alows the user to delete a mapping
                 {votesCount(code)}
               </span>
             </Tooltip>
-            <DownOutlined
-              className="mapping_actions"
-              style={{ color: 'green' }}
-              onClick={() =>
-                mappingVotes(
-                  variableMappings,
-                  code,
-                  user,
-                  'down',
-                  vocabUrl,
-                  terminologyId,
-                  notification,
-                  setMapping
-                )
-              }
-            />
+            {userVote(code) === 'down' ? (
+              <CaretDownOutlined
+                className="mapping_actions user_vote_icon"
+                style={{
+                  color: 'green',
+                  cursor: 'not-allowed',
+                  fontSize: '1rem',
+                }}
+              />
+            ) : (
+              <DownOutlined
+                className="mapping_actions"
+                style={{
+                  color: 'green',
+                }}
+                onClick={() =>
+                  userVote(code) !== 'down' &&
+                  mappingVotes(
+                    variableMappings,
+                    code,
+                    user,
+                    'down',
+                    vocabUrl,
+                    terminologyId,
+                    notification,
+                    setMapping
+                  )
+                }
+              />
+            )}
           </span>
           <span className="mapping-display">
             <Tooltip
@@ -325,18 +368,18 @@ It then shows the mappings as table data and alows the user to delete a mapping
             getById(
               vocabUrl,
               'Terminology',
-              `${terminologyId}/mapping?user_input=True+user=${user?.email}`
+              `${terminologyId}/mapping?user_input=True&user=${user?.email}`
             )
               .then(data => setMapping(data.codes))
-              // .catch(error => {
-              //   if (error) {
-              //     notification.error({
-              //       message: 'Error',
-              //       description: 'An error occurred loading mappings.',
-              //     });
-              //   }
-              //   return error;
-              // })
+              .catch(error => {
+                if (error) {
+                  notification.error({
+                    message: 'Error',
+                    description: 'An error occurred loading mappings.',
+                  });
+                }
+                return error;
+              })
               .then(() =>
                 getById(
                   vocabUrl,
@@ -559,6 +602,7 @@ It then shows the mappings as table data and alows the user to delete a mapping
             variableMappings={comment?.variableMappings}
             setComment={setComment}
             idProp={terminologyId}
+            setMapping={setMapping}
           />
         </div>
       )}

From c3c47ac8fe7b64f38a41725a0bf3f8a6b35ef7c1 Mon Sep 17 00:00:00 2001
From: brendagutman <brenda.gutman@gmail.com>
Date: Tue, 10 Dec 2024 10:42:54 -0600
Subject: [PATCH 29/30] edit -uat GHA service

---
 .env                            | 2 +-
 .github/workflows/deploy_qa.yml | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/.env b/.env
index 637e35e..3e82c01 100644
--- a/.env
+++ b/.env
@@ -2,6 +2,6 @@ VITE_SEARCH_ENDPOINT = https://www.ebi.ac.uk/ols4/api/search?
 VITE_MONARCH_SEARCH = https://api-v3.monarchinitiative.org/v3/api/search?
 # VITE_VOCAB_ENDPOINT = http://127.0.0.1:5000/api # local
 VITE_VOCAB_ENDPOINT = https://locutus-dev-110109177269.us-central1.run.app/api # dev
-# VITE_VOCAB_ENDPOINT = https://locutus-uat-1066621297011.us-central1.run.app/api # uat
+# VITE_VOCAB_ENDPOINT = https://locutus-1066621297011.us-central1.run.app/api # uat
 VITE_CLIENT_ID = 159970607373-mvkv4lfl4ovpul5bssatuf1re4ucvg8n.apps.googleusercontent.com
 VITE_MAPDRAGON_VERSION = "Development"
\ No newline at end of file
diff --git a/.github/workflows/deploy_qa.yml b/.github/workflows/deploy_qa.yml
index 5a03580..8fdef78 100644
--- a/.github/workflows/deploy_qa.yml
+++ b/.github/workflows/deploy_qa.yml
@@ -14,7 +14,7 @@ env:
 
   PROJECT_ID: ${{ secrets.PROJECT_ID }}
   REGION: ${{ secrets.REGION_LOC_1 }}
-  SERVICE: 'map-dragon'
+  SERVICE: 'mapdragon'
   IMAGE_NAME: 'map-dragon_img'
   GCP_CREDENTIALS:  ${{ secrets.GCP_CREDENTIALS }}
 

From ed11ed79d69b055d616bcd2b5605e19bd37f0c3f Mon Sep 17 00:00:00 2001
From: brendagutman <brenda.gutman@gmail.com>
Date: Tue, 10 Dec 2024 10:45:54 -0600
Subject: [PATCH 30/30] edit

---
 .env | 7 -------
 1 file changed, 7 deletions(-)
 delete mode 100644 .env

diff --git a/.env b/.env
deleted file mode 100644
index 3e82c01..0000000
--- a/.env
+++ /dev/null
@@ -1,7 +0,0 @@
-VITE_SEARCH_ENDPOINT = https://www.ebi.ac.uk/ols4/api/search?
-VITE_MONARCH_SEARCH = https://api-v3.monarchinitiative.org/v3/api/search?
-# VITE_VOCAB_ENDPOINT = http://127.0.0.1:5000/api # local
-VITE_VOCAB_ENDPOINT = https://locutus-dev-110109177269.us-central1.run.app/api # dev
-# VITE_VOCAB_ENDPOINT = https://locutus-1066621297011.us-central1.run.app/api # uat
-VITE_CLIENT_ID = 159970607373-mvkv4lfl4ovpul5bssatuf1re4ucvg8n.apps.googleusercontent.com
-VITE_MAPDRAGON_VERSION = "Development"
\ No newline at end of file