#1497 (#454)

* 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

* #1497 added Path column for extended view of observations

---------

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

js/components/preview/molecule/moleculeView/moleculeView.js

@@ -58,6 +58,8 @@ import { DJANGO_CONTEXT } from '../../../../utils/djangoContext';
 import { getFontColorByBackgroundColor } from '../../../../utils/colors';
 import { api, METHOD } from '../../../../utils/api';
 import { base_url } from '../../../routes/constants';
+import { ContentCopyRounded } from '@mui/icons-material';
+import { ToastContext } from '../../../toast';
 
 const useStyles = makeStyles(theme => ({
   container: {
@@ -411,6 +413,7 @@ const MoleculeView = memo(
     const [tagEditModalOpenNew, setTagEditModalOpenNew] = useState(tagEditorOpenObs);
 
     const { getNglView } = useContext(NglContext);
+    const { toastInfo } = useContext(ToastContext);
     const stage = getNglView(VIEWS.MAJOR_VIEW) && getNglView(VIEWS.MAJOR_VIEW).stage;
 
     const isLigandOn = L;
@@ -465,6 +468,7 @@ const MoleculeView = memo(
     const [moleculeTooltipOpen, setMoleculeTooltipOpen] = useState(false);
     const [tagPopoverOpen, setTagPopoverOpen] = useState(null);
     const [centroidRes, setCentroidRes] = useState('');
+    const [experimentalPath, setExperimentalPath] = useState('');
 
     const moleculeImgRef = useRef(null);
 
@@ -514,6 +518,26 @@ const MoleculeView = memo(
         });
     }, [data.canon_site_conf]);
 
+    useEffect(() => {
+      api({
+        url: `${base_url}/api/experiments/`,
+        method: METHOD.GET
+      })
+        .then(resp => {
+          const experiment = resp.data.results.find(experiment => experiment.id === data.experiment);
+          if (experiment) {
+            setExperimentalPath(experiment.pdb_info_source_file ?? '');
+          } else {
+            console.log('there is not any matching canonSiteConf object with ' + data.experiment + ' id');
+            setExperimentalPath('');
+          }
+        })
+        .catch(err => {
+          console.log('error fetching experiment from experiments api', err);
+          setExperimentalPath('');
+        });
+    }, [data.experiment]);
+
     useEffect(() => {
       if (showExpandedView) {
         setHeaderWidthsHandler(centroidRes, 'CentroidRes');
@@ -1134,6 +1158,11 @@ const MoleculeView = memo(
       return tagTooltip;
     }, [getTagType]);
 
+    const copyExperimentalPaths = async () => {
+      await navigator.clipboard.writeText(experimentalPath);
+      toastInfo('Link was copied to the clipboard', { autoHideDuration: 5000 });
+    };
+
     return (
       <>
         <Grid
@@ -1503,6 +1532,13 @@ const MoleculeView = memo(
                 {data.longcode}
               </Grid>
             </Tooltip>
+            <Tooltip title={experimentalPath.length > 0 ? experimentalPath : 'empty path'}>
+              <Grid item align="center" style={{ minWidth: headerWidths.Path }}>
+                <IconButton color="inherit" onClick={copyExperimentalPaths} size="small">
+                  <ContentCopyRounded fontSize="small" />
+                </IconButton>
+              </Grid>
+            </Tooltip>
           </Grid>}
         </Grid >
         <SvgTooltip

js/components/preview/molecule/observationsDialog.js

@@ -285,6 +285,7 @@ export const ObservationsDialog = memo(
       CrystalformSites: getCalculatedTagColumnWidth('CrystalformSites'),
       CentroidRes: getCalculatedTagColumnWidth('CentroidRes'),
       LongCode: getCalculatedTagColumnWidth('LongCode'),
+      Path: getCalculatedTagColumnWidth('Path')
     });
 
     /**
@@ -1001,6 +1002,9 @@ export const ObservationsDialog = memo(
                             <Grid item align="center" className={classes.headerCell} style={{ minWidth: headerWidths.LongCode }}>
                               LongCode
                             </Grid>
+                            <Grid item align="center" className={classes.headerCell} style={{ minWidth: headerWidths.Path }}>
+                              Path
+                            </Grid>
                           </Grid>
                         )}
                       </Grid>