#1519 and #1520 (#453)

* Squashed commit of the following:

commit e613216
Author: Boris Kovar <boris.kovar@m2ms.sk>
Date:   Wed Jul 31 13:57:02 2024 +0200

    - implemented #1251

* #1482 added TagName and CentroidRes columns for expanded view of observation dialog

* #1489 show warning toast message if is defined on target load

* #1322 added longcode column

* updated general function for tag comparison

* #1505 adjusted getting of centroid_res

* #1458 allow to tag XCA sites, temp commit

# Conflicts:
#	js/components/preview/molecule/observationsDialog.js

* #1458 adjusted functionality and styling to proper change tag

* #1508 removed TagName column in expanded observation dialog, changed order of columns, adjusted labels and tooltips, show observation dialog in its full height

* #1508 adjusted column order and width calculation

* #1501 added upload links to menu

* #1520 show tag alias instead of upload_name on hit navigator CanonSites & ConformerSites box tooltip

* #1519 keep tag in edit window after save

---------

Co-authored-by: Boris Kovar <boris.kovar@m2ms.sk>

js/components/preview/molecule/observationCmpView/observationCmpView.js

@@ -1611,7 +1611,7 @@ const ObservationCmpView = memo(
             {/* CanonSites */}
             <Grid item xs container direction="column" justifyContent="center" alignItems="stretch" wrap="nowrap">
               <Tooltip
-                title={<div style={{ whiteSpace: 'pre-line' }}>CanonSite - {getCanonSitesTag().upload_name}</div>}
+                title={<div style={{ whiteSpace: 'pre-line' }}>CanonSite - {getCanonSitesTag().tag}</div>}
               >
                 <Grid
                   item
@@ -1631,7 +1631,7 @@ const ObservationCmpView = memo(
               {getConformerSites().map((conformerSite, i, sites) => (
                 <Tooltip
                   key={conformerSite.id + i}
-                  title={<div style={{ whiteSpace: 'pre-line' }}>ConformerSite - {conformerSite.upload_name}</div>}
+                  title={<div style={{ whiteSpace: 'pre-line' }}>ConformerSite - {conformerSite.tag}</div>}
                 >
                   <Grid
                     item

js/components/preview/tags/api/tagsApi.js

@@ -11,15 +11,15 @@ import { getDefaultTagDiscoursePostText } from '../utils/tagUtils';
 //   });
 // };
 
-export const getTags = targetId => {
+export const getTags = async targetId => {
   return api({ url: `${base_url}/api/siteobservation_tag/?target=${targetId}` }).then(response => {
     if (response?.data) {
       return response.data;
     }
   });
 };
 
-export const getTagCategories = () => {
+export const getTagCategories = async () => {
   return api({ url: `${base_url}/api/tag_category/` }).then(response => {
     if (response?.data) {
       return response.data?.results;
@@ -67,7 +67,7 @@ export const getTagMolecules = targetId => {
     .catch(err => console.log(err));
 };
 
-export const createNewTag = (tag, targetName) => {
+export const createNewTag = async (tag, targetName) => {
   let url = `${base_url}/api/siteobservation_tag/`;
   if (isDiscourseAvailable()) {
     return createTagPost(tag, targetName, getDefaultTagDiscoursePostText(tag))
@@ -101,7 +101,7 @@ export const createNewTag = (tag, targetName) => {
   }
 };
 
-export const createNewDownloadTag = tag => {
+export const createNewDownloadTag = async tag => {
   let url = `${base_url}/api/siteobservation_tag/`;
   const jsonString = JSON.stringify(tag);
   return api({
@@ -115,7 +115,7 @@ export const createNewDownloadTag = tag => {
     .catch(err => console.log(err));
 };
 
-export const updateExistingTag = (tag, tagId) => {
+export const updateExistingTag = async (tag, tagId) => {
   const jsonString = JSON.stringify(tag);
   let url = `${base_url}/api/siteobservation_tag/${tagId}/`;
   return api({
@@ -129,7 +129,7 @@ export const updateExistingTag = (tag, tagId) => {
     .catch(err => console.log(err));
 };
 
-export const getTagByName = tagName => {
+export const getTagByName = async tagName => {
   let url = `${base_url}/api/siteobservation_tag/?tag=${tagName}`;
   return api({ url: url }).then(response => {
     if (response?.data?.results?.length > 0) {
@@ -138,7 +138,7 @@ export const getTagByName = tagName => {
   });
 };
 
-export const deleteExistingTag = (tag, tagId) => {
+export const deleteExistingTag = async (tag, tagId) => {
   const jsonString = JSON.stringify(tag);
   let url = `${base_url}/api/siteobservation_tag/${tagId}/`;
   return api({

js/components/preview/tags/modal/editTagsModal.js

@@ -12,6 +12,7 @@ import { removeSelectedTag, updateTagProp } from "../redux/dispatchActions";
 import { getCategoryById } from "../../molecule/redux/dispatchActions";
 import { ToastContext } from "../../../toast";
 import { TAG_DETAILS_REMOVED_CATEGORIES } from "../../../../constants/constants";
+import { setTagToEdit } from "../../../../reducers/selection/actions";
 
 const useStyles = makeStyles(theme => ({
     leftSide: {
@@ -44,9 +45,9 @@ export const EditTagsModal = memo(({ open, anchorEl, setOpenDialog }) => {
     const allMolList = useSelector(state => state.apiReducers.all_mol_lists);
     const moleculesToEditIds = useSelector(state => state.selectionReducers.moleculesToEdit);
     const selectedTagList = useSelector(state => state.selectionReducers.selectedTagList);
+    const tag = useSelector(state => state.selectionReducers.tagToEdit);
 
     const id = open ? 'simple-popover-tags-editor' : undefined;
-    const [tag, setTag] = useState(null);
     const [tags, setTags] = useState([NEW_TAG]);
     const [newTagColor, setNewTagColor] = useState(DEFAULT_TAG_COLOR);
     const [newTagName, setNewTagName] = useState('');
@@ -90,7 +91,7 @@ export const EditTagsModal = memo(({ open, anchorEl, setOpenDialog }) => {
         });
         setTags([NEW_TAG, ...newTagList.sort(compareTagsByCategoryAndNameAsc)]);
         return () => {
-            setTag(null);
+            // dispatch(setTagToEdit(null)); // uncomment this to reset tag after update - clean up moved to resetTagToEditState
             setTags([NEW_TAG]);
         };
     }, [preTagList, tagCategories]);
@@ -105,7 +106,7 @@ export const EditTagsModal = memo(({ open, anchorEl, setOpenDialog }) => {
             setNewTagLink(tag.discourse_url);
             setNewHidden(tag.hidden || false);
         }
-    }, [dispatch, getColourForTag, tag]);
+    }, [getColourForTag, tag]);
 
     const comboCategories = useMemo(() => {
         return getEditNewTagCategories(tagCategories);
@@ -139,6 +140,7 @@ export const EditTagsModal = memo(({ open, anchorEl, setOpenDialog }) => {
         setNewTagName('');
         setNewTagLink('');
         setNewHidden(false);
+        dispatch(setTagToEdit(null));
     };
 
     const onCategoryForNewTagChange = event => {
@@ -211,15 +213,15 @@ export const EditTagsModal = memo(({ open, anchorEl, setOpenDialog }) => {
         }
     };
 
-    const updateTag = () => {
+    const updateTag = async () => {
         if (validateTag() && tag && newTagCategory && newTagName) {
             if (!tag.hidden && newHidden && selectedTagList.some(selectedTag => selectedTag.id === tag.id)) {
                 dispatch(removeSelectedTag(tag));
                 toastWarning('Tag was automatically deselected because of becoming hidden', { autoHideDuration: 5000 });
             }
             // update all props at once
             if (newTagCategory) {
-                dispatch(
+                const updatedTag = await dispatch(
                     updateTagProp(
                         Object.assign({}, tag, {
                             category: newTagCategory,
@@ -232,8 +234,9 @@ export const EditTagsModal = memo(({ open, anchorEl, setOpenDialog }) => {
                         'tag'
                     )
                 );
+                dispatch(setTagToEdit(updatedTag));
             } else {
-                dispatch(
+                const updatedTag = await dispatch(
                     updateTagProp(
                         Object.assign({}, tag, {
                             colour: newTagColor,
@@ -245,10 +248,9 @@ export const EditTagsModal = memo(({ open, anchorEl, setOpenDialog }) => {
                         'tag'
                     )
                 );
+                dispatch(setTagToEdit(updatedTag));
             }
             toastInfo('Tag was updated', { autoHideDuration: 5000 });
-            // reset tag/fields after updating selected one
-            resetTagToEditState();
         }
     };
 
@@ -278,6 +280,7 @@ export const EditTagsModal = memo(({ open, anchorEl, setOpenDialog }) => {
     const handleCloseModal = () => {
         if (open) {
             setOpenDialog(false);
+            resetTagToEditState();
         }
     };
 
@@ -326,7 +329,7 @@ export const EditTagsModal = memo(({ open, anchorEl, setOpenDialog }) => {
                     {rightSide(
                         <Select
                             value={tag?.id || 0}
-                            onChange={(event) => setTag(tags.find(tag => tag.id === event.target.value))}
+                            onChange={(event) => dispatch(setTagToEdit(tags.find(tag => tag.id === event.target.value)))}
                             fullWidth
                         >
                             {tags?.map(tag => (

js/components/preview/tags/redux/dispatchActions.js

@@ -127,9 +127,16 @@ export const storeData = data => (dispatch, getState) => {
   dispatch(setTagSelectorData(categories, tags));
 
   let allMolecules = [];
-  data.molecules.forEach(mol => {});
+  data.molecules.forEach(mol => { });
 };
 
+/**
+ *
+ * @param {Object} tag tag object
+ * @param {*} value new value
+ * @param {*} prop name of the prop to be updated
+ * @returns {Promise<Object>}
+ */
 export const updateTagProp = (tag, value, prop) => (dispatch, getState) => {
   const state = getState();
   const molTags = state.apiReducers.moleculeTags;