Implements #1465, #1475, #1322, #1460 (#439)

* #1465 changed /funders URL to point to landing page with open funders modal and also use this URL clicking on "Contributors" button in header, updated Route with 5.1 preferred style * #1475 removed "Set as group name" for observations * #1322 changed font weight for pose and observation titles, keep open observation modal on changing poses * #1322 changed "group" to "pose", leave the LPC buttons visible, but grey them out without selection * #1465 reverted "Contributors" button behavior, added copy funders button to funders modal * #1465 added text to copy url button * #1322 highlight selected pose, use singular names of tag categories, added expanded view mode, select all displayed and select all buttons, calculate height of window based on available space * fixed some missing keys and pagination options for targets and projects * #1460 allow to edit all tag categories, show colour and category in dropdown list and updated its sorting --------- Co-authored-by: matej <[email protected]>
m2ms · Jul 24, 2024 · f615596 · f615596
1 parent d360a5b
commit f615596
Show file tree

Hide file tree

Showing 16 changed files with 518 additions and 273 deletions.
diff --git a/js/components/funders/fundersModal.js b/js/components/funders/fundersModal.js
@@ -2,16 +2,24 @@
  * This is a modal window wrapper for funders.
  */
 
-import React, { memo } from 'react';
+import React, { memo, useContext } from 'react';
 import Modal from '../common/Modal';
-import { Grid, makeStyles, Typography } from '@material-ui/core';
+import { Button, Grid, IconButton, makeStyles, Typography } from '@material-ui/core';
 import { CONTRIBUTORS, FUNDING, get_logo } from './constants';
 import { Tooltip } from '@mui/material';
+import { URLS } from '../routes/constants';
+import { ContentCopyRounded } from '@mui/icons-material';
+import { ToastContext } from '../toast';
 
 const COLUMNS = 5;
 const MAX_IMAGE_HEIGHT = 90;
 
 const useStyles = makeStyles(theme => ({
+  copyButton: {
+    position: 'absolute',
+    top: 0,
+    right: 0
+  },
   imageItem: {
     paddingTop: '3px',
     paddingBottom: '3px',
@@ -39,6 +47,8 @@ const useStyles = makeStyles(theme => ({
 export const FundersModal = memo(({ openModal, onModalClose }) => {
   const classes = useStyles();
 
+  const { toastInfo } = useContext(ToastContext);
+
   if (openModal === undefined) {
     console.log('undefined openModal');
     onModalClose();
@@ -49,8 +59,18 @@ export const FundersModal = memo(({ openModal, onModalClose }) => {
     window.open(link, 'blank');
   };
 
+  const copyFundersLink = async () => {
+    await navigator.clipboard.writeText(window.location.hostname + URLS.funders);
+    toastInfo('Link was copied to the clipboard', { autoHideDuration: 5000 });
+  };
+
   return (
     <Modal otherClasses={classes.customModal} open={openModal} onClose={() => onModalClose()}>
+      <Tooltip title={'Click to copy link to this window'} >
+        <Button color="inherit" endIcon={<ContentCopyRounded />} onClick={copyFundersLink} className={classes.copyButton}>
+          Copy URL
+        </Button>
+      </Tooltip>
       <Typography variant="h5">Funding and support:</Typography>
       <Grid container direction="row" justifyContent="center" alignItems="center" columns={5}>
         {FUNDING.map((company, i) =>

diff --git a/js/components/header/index.js b/js/components/header/index.js
@@ -111,7 +111,7 @@ const useStyles = makeStyles(theme => ({
 }));
 
 export default memo(
-  forwardRef(({ headerHeight = 0, setHeaderHeight }, ref) => {
+  forwardRef(({ headerHeight = 0, setHeaderHeight, isFundersLink = false }, ref) => {
     const dispatch = useDispatch();
     let history = useHistory();
     const classes = useStyles();
@@ -141,6 +141,10 @@ export default memo(
     const targetDiscourseVisible = discourseAvailable && targetName;
     const projectDiscourseVisible = discourseAvailable && currentProject && currentProject.title;
 
+    useEffect(() => {
+      setOpenFunders(isFundersLink);
+    }, [isFundersLink]);
+
     useEffect(() => {
       getVersions()
         .then(response => {

diff --git a/js/components/landing/Landing.js b/js/components/landing/Landing.js
@@ -2,7 +2,7 @@
  * Created by ricgillams on 21/06/2018.
  */
 import { Grid, Link, makeStyles } from '@material-ui/core';
-import React, { memo, useContext, useEffect, useState } from 'react';
+import React, { memo, useCallback, useContext, useEffect, useState } from 'react';
 import { TargetList } from '../target/targetList';
 import { connect } from 'react-redux';
 import * as apiActions from '../../reducers/api/actions';
@@ -13,7 +13,6 @@ import { resetCurrentCompoundsSettings } from '../preview/compounds/redux/action
 import { resetProjectsReducer } from '../projects/redux/actions';
 import { withLoadingProjects } from '../target/withLoadingProjects';
 import { ToastContext } from '../toast';
-import { HeaderContext } from '../header/headerContext';
 
 const useStyles = makeStyles(theme => ({
   root: {
@@ -33,7 +32,6 @@ const Landing = memo(
     const [targetListWidth, setTargetListWidth] = useState(450);
     const [projectListWidth, setProjectListWidth] = useState(projectWidth);
 
-    const { setSnackBarTitle } = useContext(HeaderContext);
     const { toast } = useContext(ToastContext);
     const [loginText, setLoginText] = useState(
       DJANGO_CONTEXT['username'] === 'NOT_LOGGED_IN' ? '' : "You're logged in as " + DJANGO_CONTEXT['username']
@@ -69,19 +67,19 @@ const Landing = memo(
       setIsResizing(true);
     };
 
-    const handleMouseMove = e => {
+    const handleMouseMove = useCallback(e => {
       if (!isResizing) return;
       const targetListWidth = e.clientX;
       const projectListWidth = window.innerWidth - targetListWidth;
       setTargetListWidth(targetListWidth);
       setProjectListWidth(projectListWidth);
-    };
+    }, [isResizing]);
 
-    const handleMouseUp = () => {
+    const handleMouseUp = useCallback(() => {
       setIsResizing(false);
       window.removeEventListener('mousemove', handleMouseMove);
       window.removeEventListener('mouseup', handleMouseUp);
-    };
+    }, [handleMouseMove]);
 
     useEffect(() => {
       if (isResizing) {
@@ -91,7 +89,7 @@ const Landing = memo(
         window.removeEventListener('mousemove', handleMouseMove);
         window.removeEventListener('mouseup', handleMouseUp);
       }
-    }, [isResizing]);
+    }, [isResizing, handleMouseMove, handleMouseUp]);
 
     return (
       <Grid container className={classes.root}>

diff --git a/js/components/preview/molecule/moleculeView/moleculeView.js b/js/components/preview/molecule/moleculeView/moleculeView.js
@@ -9,7 +9,7 @@ import { Panel } from '../../../common';
 import { MyLocation, Warning, Assignment, AssignmentTurnedIn } from '@material-ui/icons';
 import SVGInline from 'react-svg-inline';
 import classNames from 'classnames';
-import { VIEWS } from '../../../../constants/constants';
+import { PLURAL_TO_SINGULAR, VIEWS } from '../../../../constants/constants';
 import { NGL_PARAMS, COMMON_PARAMS } from '../../../nglView/constants';
 import { NglContext } from '../../../nglView/nglProvider';
 import {
@@ -52,7 +52,6 @@ import { getRandomColor } from '../utils/color';
 import { DEFAULT_TAG_COLOR, getAllTagsForCategories, getAllTagsForLHSCmp, getAllTagsForMol, getAllTagsForObservation, getAllTagsForObservationPopover } from '../../tags/utils/tagUtils';
 import MoleculeSelectCheckbox from './moleculeSelectCheckbox';
 import useClipboard from 'react-use-clipboard';
-import Popover from '@mui/material/Popover';
 import Typography from '@mui/material/Typography';
 import { Edit } from '@material-ui/icons';
 import { DJANGO_CONTEXT } from '../../../../utils/djangoContext';
@@ -138,7 +137,8 @@ const useStyles = makeStyles(theme => ({
     border: 'solid 1px',
     borderColor: theme.palette.background.divider,
     borderStyle: 'solid solid solid solid',
-    width: 'inherit'
+    minWidth: 327
+    // width: 'inherit'
   },
   image: {
     border: 'solid 1px',
@@ -192,19 +192,16 @@ const useStyles = makeStyles(theme => ({
     whiteSpace: 'nowrap',
     textOverflow: 'ellipsis',
     lineHeight: '1.45',
-    fontWeight: 500,
-    fontSize: '0.9rem',
+    // fontWeight: 500,
+    fontSize: '0.8rem',
     letterSpacing: '0.02em'
   },
+  moleculeTitleLabelMain: {
+    fontWeight: 'bold',
+    fontSize: '0.9rem'
+  },
   moleculeTitleLabelMainObs: {
-    paddingLeft: 2,
-    overflow: 'hidden',
-    whiteSpace: 'nowrap',
-    textOverflow: 'ellipsis',
-    lineHeight: '1.45',
-    fontWeight: 500,
-    fontSize: '0.9rem',
-    letterSpacing: '0.02em',
+    fontWeight: 'bolder',
     // fontStyle: 'italic',
     textDecorationLine: 'underline',
     textDecorationStyle: 'dotted'
@@ -345,6 +342,11 @@ const useStyles = makeStyles(theme => ({
   },
   buttonSelectedLoadingOverlay: {
     color: theme.palette.primary.contrastText
+  },
+  categoryCell: {
+    padding: '4px 8px',
+    fontWeight: 'bold',
+    textWrap: 'nowrap'
   }
 }));
 
@@ -379,7 +381,8 @@ const MoleculeView = memo(
     disableL,
     disableP,
     disableC,
-    hideImage
+    hideImage,
+    showExpandedView
   }) => {
     // const [countOfVectors, setCountOfVectors] = useState('-');
     // const [cmpds, setCmpds] = useState('-');
@@ -1108,13 +1111,11 @@ const MoleculeView = memo(
                         e.preventDefault();
                         setNameCopied(moleculeTitle);
                       }}
-                      className={
-                        data.id === pose?.main_site_observation
-                          ? classes.moleculeTitleLabelMainObs
-                          : classes.moleculeTitleLabel
-                      }
+                      className={classNames(classes.moleculeTitleLabel, { [classes.moleculeTitleLabelMainObs]: data.id === pose?.main_site_observation })}
                     >
-                      {moleculeTitleTruncated}
+                      <span className={classNames(classes.moleculeTitleLabelMain, { [classes.moleculeTitleLabelMainObs]: data.id === pose?.main_site_observation })}>{moleculeTitleTruncated}</span>
+                      <br />
+                      {data?.compound_code}
                     </Grid>
                   </Tooltip>
                   {/* Molecule properties */}
@@ -1356,13 +1357,14 @@ const MoleculeView = memo(
                   justifyContent="center"
                   alignItems="center"
                   // wrap="nowrap"
-                  style={{ height: "100%" }}>
+                  style={{ height: "100%" }}
+                >
                   {['CanonSites', 'ConformerSites', 'CrystalformSites', 'Crystalforms', 'Quatassemblies'].map(tagCategory => {
                     const tagTypeObject = getTagType(tagCategory);
                     const tagLabel = tagCategory === 'ConformerSites' ? tagTypeObject.tag_prefix.replace(getTagType('CanonSites')?.tag_prefix, '') : tagTypeObject?.tag_prefix;
                     return <Tooltip
                       key={`tag-category-${tagCategory}`}
-                      title={<div style={{ whiteSpace: 'pre-line' }}>{tagCategory} - {tagTypeObject.upload_name}</div>}
+                      title={<div style={{ whiteSpace: 'pre-line' }}>{PLURAL_TO_SINGULAR[tagCategory]} - {tagTypeObject.upload_name}</div>}
                     >
                       <Grid item xs
                         className={classNames(classes.contColButtonMenu)}
@@ -1411,6 +1413,26 @@ const MoleculeView = memo(
                 </div>
               </div>}
           </Grid>
+          {showExpandedView && <Grid item container alignItems='center' wrap="nowrap">
+            {['CanonSites', 'ConformerSites', 'CrystalformSites', 'Crystalforms', 'Quatassemblies'].map((tagCategory, index) => {
+              const tagTypeObject = getTagType(tagCategory);
+              let tagLabel = '';
+              if (tagTypeObject) {
+                if (tagCategory === 'CrystalformSites') {
+                  // "chop" more of CrystalformSites name
+                  tagLabel = tagTypeObject.upload_name.substring(tagTypeObject.upload_name.indexOf('-') + 1);
+                  tagLabel = tagLabel.substring(tagLabel.indexOf('-') + 1);
+                } else {
+                  tagLabel = tagTypeObject.upload_name.substring(tagTypeObject.upload_name.indexOf('-') + 1);
+                }
+              }
+              return <Tooltip title={PLURAL_TO_SINGULAR[tagCategory]} key={index}>
+                <Grid item align="center" className={classes.categoryCell} style={{ fontSize: 12 }}>
+                  {tagLabel}
+                </Grid>
+              </Tooltip>
+            })}
+          </Grid>}
         </Grid >
         <SvgTooltip
           open={moleculeTooltipOpen}

diff --git a/js/components/preview/molecule/observationCmpView/observationCmpView.js b/js/components/preview/molecule/observationCmpView/observationCmpView.js
@@ -1,10 +1,10 @@
 /**
- * Created by abradley on 14/03/2018.
+ * Row in Hit navigator
  */
 
 import React, { memo, useEffect, useState, useRef, useContext, useCallback } from 'react';
 import { useDispatch, useSelector } from 'react-redux';
-import { Button, Grid, makeStyles, Tooltip, IconButton, Popper, Item, CircularProgress } from '@material-ui/core';
+import { Button, Grid, makeStyles, Tooltip, IconButton, Popper, CircularProgress } from '@material-ui/core';
 import { Panel } from '../../../common';
 import { MyLocation, Warning, Assignment, AssignmentTurnedIn } from '@material-ui/icons';
 import SVGInline from 'react-svg-inline';
@@ -69,6 +69,10 @@ const useStyles = makeStyles(theme => ({
     color: 'black',
     height: 54
   },
+  siteOpenObservations: {
+    // instead of coloring every specific part of border, just use inner shadow to fake it
+    boxShadow: 'inset 0 0 0 2px ' + theme.palette.primary.main
+  },
   buttonsRow: {
     lineHeight: '1'
   },
@@ -215,14 +219,18 @@ const useStyles = makeStyles(theme => ({
   },
   moleculeTitleLabel: {
     paddingLeft: 2,
-    fontWeight: 500,
+    // fontWeight: 400,
     overflow: 'hidden',
     whiteSpace: 'nowrap',
     textOverflow: 'ellipsis',
     lineHeight: '1.45',
-    fontSize: '0.9rem',
+    fontSize: '0.8rem',
     letterSpacing: '0.02em'
   },
+  moleculeTitleLabelMain: {
+    fontWeight: 'bold',
+    fontSize: '0.9rem'
+  },
   checkbox: {
     padding: 0
   },
@@ -1256,7 +1264,7 @@ const ObservationCmpView = memo(
           container
           justifyContent="space-between"
           direction="row"
-          className={classes.container}
+          className={classNames(classes.container, { [classes.siteOpenObservations]: poseIdForObservationsDialog === data.id && isObservationDialogOpen })}
           wrap="nowrap"
           ref={ref}
         >
@@ -1300,10 +1308,8 @@ const ObservationCmpView = memo(
                 }}
                 className={classes.moleculeTitleLabel}
               >
-
-                {data?.code.replaceAll(`${target_on_name}-`, '')}
-                <br>
-                </br>
+                <span className={classes.moleculeTitleLabelMain}>{getMainObservation()?.code.replaceAll(`${target_on_name}-`, '')}</span>
+                <br />
                 {data?.main_site_observation_cmpd_code}
               </Grid>
             </Tooltip>
@@ -1575,7 +1581,7 @@ const ObservationCmpView = memo(
             wrap="nowrap">
 
             <Tooltip
-              title={<div style={{ whiteSpace: 'pre-line' }}>CanonSites - {getCanonSitesTag().upload_name}</div>}
+              title={<div style={{ whiteSpace: 'pre-line' }}>CanonSite - {getCanonSitesTag().upload_name}</div>}
             >
               <Grid item xs
                 className={classNames(classes.contColMenu, classes.contColButtonMenu)}
@@ -1602,7 +1608,7 @@ const ObservationCmpView = memo(
             {getConformerSites().map((conformerSite, i, sites) =>
               <Tooltip
                 key={conformerSite.id + i}
-                title={<div style={{ whiteSpace: 'pre-line' }}>ConformerSites - {conformerSite.upload_name}</div>}
+                title={<div style={{ whiteSpace: 'pre-line' }}>ConformerSite - {conformerSite.upload_name}</div>}
               >
                 <Grid item xs className={classNames(classes.contColMenu, classes.contColButtonMenu, {
                   [classes.smallConformerSite]: sites.length >= 3
@@ -1644,10 +1650,15 @@ const ObservationCmpView = memo(
                   onClick={() => {
                     // setLoadingInspiration(true);
 
-                    if (!isObservationDialogOpen) {
+                    // do not close modal on pose change
+                    if (!isObservationDialogOpen || poseIdForObservationsDialog !== data.id) {
                       dispatch(setObservationsForLHSCmp(observations));
                     }
-                    dispatch(setOpenObservationsDialog(!isObservationDialogOpen));
+                    if (poseIdForObservationsDialog !== data.id || poseIdForObservationsDialog === 0 || (poseIdForObservationsDialog === data.id && !isObservationDialogOpen)) {
+                      dispatch(setOpenObservationsDialog(true));
+                    } else {
+                      dispatch(setOpenObservationsDialog(false));
+                    }
                     dispatch(setPoseIdForObservationsDialog(data.id));
 
                     if (setRef) {