From fdf2a7cc457643dd768d72e39ce360ea33a89865 Mon Sep 17 00:00:00 2001
From: matej <60509086+matej-vavrek@users.noreply.github.com>
Date: Fri, 13 Sep 2024 11:30:52 +0200
Subject: [PATCH] #1508-1 (#449)

* Squashed commit of the following:

commit e61321646b0f62c6ba81ca8dbbb8a328405819c4
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

---------

Co-authored-by: Boris Kovar <boris.kovar@m2ms.sk>
---
 .../preview/molecule/moleculeView/moleculeView.js  | 10 ++++------
 .../preview/molecule/observationsDialog.js         | 14 +++++++-------
 2 files changed, 11 insertions(+), 13 deletions(-)

diff --git a/js/components/preview/molecule/moleculeView/moleculeView.js b/js/components/preview/molecule/moleculeView/moleculeView.js
index faa448e84..1ffab6b4e 100644
--- a/js/components/preview/molecule/moleculeView/moleculeView.js
+++ b/js/components/preview/molecule/moleculeView/moleculeView.js
@@ -358,6 +358,8 @@ export const img_data_init = `<svg xmlns="http://www.w3.org/2000/svg" version="1
     <animateTransform attributeName="transform" type="rotate" repeatCount="indefinite" dur="0.689655172413793s" values="0 50 50;360 50 50" keyTimes="0;1"></animateTransform>
   </circle>  '</svg>`;
 
+export const XCA_TAGS_CATEGORIES = ['CanonSites', 'ConformerSites', 'Quatassemblies', 'Crystalforms', 'CrystalformSites'];
+
 const MoleculeView = memo(
   ({
     imageHeight,
@@ -476,9 +478,6 @@ const MoleculeView = memo(
       setTagEditModalOpenNew(tagEditorOpenObs);
     }, [tagEditorOpenObs]);
 
-    const XCA_TAGS_CATEGORIES = ['CanonSites', 'ConformerSites', 'Quatassemblies', 'Crystalforms', 'CrystalformSites'];
-    const XCA_TAGS_CATEGORIES_EXPANDED = ['Quatassemblies', 'ConformerSites', 'Crystalforms', 'CrystalformSites', 'CanonSites'];
-
     useEffect(() => {
       api({
         url: `${base_url}/api/canon_site_confs/`,
@@ -523,7 +522,7 @@ const MoleculeView = memo(
           setHeaderWidthsHandler(getTagLabel(tagCategory), tagCategory);
         })
       }
-    }, [showExpandedView, getTagType, getTagLabel, centroidRes, data.longcode, setHeaderWidthsHandler, XCA_TAGS_CATEGORIES]);
+    }, [showExpandedView, getTagType, getTagLabel, centroidRes, data.longcode, setHeaderWidthsHandler]);
 
     const handlePopoverOpen = event => {
       setTagPopoverOpen(event.currentTarget);
@@ -1428,7 +1427,6 @@ const MoleculeView = memo(
                   xs={5}
                   container
                   direction="row"
-                  justifyContent="center"
                   alignItems="center"
                   // wrap="nowrap"
                   style={{ height: "100%" }}
@@ -1488,7 +1486,7 @@ const MoleculeView = memo(
               </div>}
           </Grid>
           {showExpandedView && <Grid item container alignItems='center' wrap="nowrap">
-            {XCA_TAGS_CATEGORIES_EXPANDED.map((tagCategory, index) => {
+            {XCA_TAGS_CATEGORIES.map((tagCategory, index) => {
               return <Tooltip title={`${PLURAL_TO_SINGULAR[tagCategory]} - ${getTagTooltip(tagCategory)}`} key={index}>
                 <Grid item align="center" className={classes.categoryCell} style={{ minWidth: headerWidths[tagCategory] }}>
                   {getTagLabel(tagCategory)}
diff --git a/js/components/preview/molecule/observationsDialog.js b/js/components/preview/molecule/observationsDialog.js
index c57e617db..a1171f9e6 100644
--- a/js/components/preview/molecule/observationsDialog.js
+++ b/js/components/preview/molecule/observationsDialog.js
@@ -53,6 +53,7 @@ import { updateLHSCompound, updateMoleculeInMolLists, updateMoleculeTag, updateT
 import { createPoseErrorMessage } from './api/poseApi';
 import { augumentTagObjectWithId, createMoleculeTagObject, DEFAULT_TAG_COLOR, getMoleculeTagForTag } from '../tags/utils/tagUtils';
 import { updateExistingTag } from '../tags/api/tagsApi';
+import { XCA_TAGS_CATEGORIES } from './moleculeView/moleculeView';
 
 const MIN_PANEL_HEIGHT = 250;
 
@@ -277,11 +278,11 @@ export const ObservationsDialog = memo(
     const [tagEditorAnchorEl, setTagEditorAnchorEl] = useState(null);
     const [expandView, setExpandView] = useState(null);
     const [headerWidths, setHeaderWidths] = useState({
-      Quatassemblies: getCalculatedTagColumnWidth('Quatassemblies'),
+      CanonSites: getCalculatedTagColumnWidth('CanonSites'),
       ConformerSites: getCalculatedTagColumnWidth('ConformerSites'),
+      Quatassemblies: getCalculatedTagColumnWidth('Quatassemblies'),
       Crystalforms: getCalculatedTagColumnWidth('Crystalforms'),
       CrystalformSites: getCalculatedTagColumnWidth('CrystalformSites'),
-      CanonSites: getCalculatedTagColumnWidth('CanonSites'),
       CentroidRes: getCalculatedTagColumnWidth('CentroidRes'),
       LongCode: getCalculatedTagColumnWidth('LongCode'),
     });
@@ -292,7 +293,7 @@ export const ObservationsDialog = memo(
      * @param {*} tagCategory
      */
     const setHeaderWidthsHandler = (tagText, tagCategory) => {
-      const calculatedWidth = getCalculatedTagColumnWidth(tagText, '12px bold');
+      const calculatedWidth = getCalculatedTagColumnWidth(tagText, 'bold 12px');
       if (headerWidths[tagCategory] < calculatedWidth) {
         setHeaderWidths(old => {
           const newWidths = { ...old };
@@ -984,11 +985,10 @@ export const ObservationsDialog = memo(
                             item
                             xs
                             container
-                            justifyContent="space-around"
-                            // adjust maxWidth if headers are a bit misplaced
-                            style={{ maxWidth: '74%', marginLeft: 95 }}
+                            alignItems="center"
+                            style={{ marginLeft: 95 }}
                           >
-                            {['Quatassemblies', 'ConformerSites', 'Crystalforms', 'CrystalformSites', 'CanonSites'].map(
+                            {XCA_TAGS_CATEGORIES.map(
                               (tagCategory, index) => (
                                 <Grid item align="center" key={index} className={classes.headerCell} style={{ minWidth: headerWidths[tagCategory] }}>
                                   {PLURAL_TO_SINGULAR[tagCategory]}