Squashed commit of the following: (#441)

commit e613216 Author: Boris Kovar <[email protected]> Date: Wed Jul 31 13:57:02 2024 +0200 - implemented #1251
xchem · Jul 31, 2024 · 90fe890 · 90fe890
1 parent 2ee9c82
commit 90fe890
Show file tree

Hide file tree

Showing 22 changed files with 1,232 additions and 1,001 deletions.
diff --git a/js/components/datasets/compoundSetList.js b/js/components/datasets/compoundSetList.js
@@ -73,7 +73,6 @@ export const CompoundSetList = () => {
   const greenInput = useSelector(state => state.previewReducers.compounds[compoundsColors.green.key]);
   const purpleInput = useSelector(state => state.previewReducers.compounds[compoundsColors.purple.key]);
   const apricotInput = useSelector(state => state.previewReducers.compounds[compoundsColors.apricot.key]);
-  const targetName = useSelector(state => state.apiReducers.target_on_name);
 
   const inputs = {
     [compoundsColors.blue.key]: blueInput,

diff --git a/js/components/header/index.js b/js/components/header/index.js
@@ -67,6 +67,7 @@ import { getVersions } from '../../utils/version';
 import { AddProjectDetail } from '../projects/addProjectDetail';
 import { ServicesStatusWrapper } from '../services';
 import { COMPANIES, get_logo } from '../funders/constants';
+import { setEditTargetDialogOpen } from '../target/redux/actions';
 
 const useStyles = makeStyles(theme => ({
   padding: {
@@ -271,8 +272,8 @@ export default memo(
                   targetName !== undefined ? (
                     <>
                       {currentProject.authorID === null ||
-                        currentProject.projectID === null ||
-                        currentProject.authorID === userId ? (
+                      currentProject.projectID === null ||
+                      currentProject.authorID === userId ? (
                         <Button
                           onClick={() => {
                             isProjectModalLoading === false
@@ -551,6 +552,7 @@ export default memo(
                 </ListItemIcon>
                 <ListItemText primary="Home" />
               </ListItem>
+
               <Divider />
 
               <ListItem button onClick={() => history.push(URLS.projects)}>

diff --git a/js/components/landing/Landing.js b/js/components/landing/Landing.js
@@ -4,7 +4,7 @@
 import { Grid, Link, makeStyles } from '@material-ui/core';
 import React, { memo, useCallback, useContext, useEffect, useState } from 'react';
 import { TargetList } from '../target/targetList';
-import { connect } from 'react-redux';
+import { connect, useDispatch, useSelector } from 'react-redux';
 import * as apiActions from '../../reducers/api/actions';
 import * as selectionActions from '../../reducers/selection/actions';
 import { DJANGO_CONTEXT } from '../../utils/djangoContext';
@@ -13,6 +13,8 @@ import { resetCurrentCompoundsSettings } from '../preview/compounds/redux/action
 import { resetProjectsReducer } from '../projects/redux/actions';
 import { withLoadingProjects } from '../target/withLoadingProjects';
 import { ToastContext } from '../toast';
+import { EditTargetDialog } from '../target/editTargetDialog';
+import { TOAST_LEVELS } from '../toast/constants';
 
 const useStyles = makeStyles(theme => ({
   root: {
@@ -25,17 +27,43 @@ const useStyles = makeStyles(theme => ({
 
 const Landing = memo(
   ({ resetSelectionState, resetTargetState, resetCurrentCompoundsSettings, resetProjectsReducer }) => {
+    const dispatch = useDispatch();
     const classes = useStyles();
 
     const projectWidth = window.innerWidth;
     const [isResizing, setIsResizing] = useState(false);
     const [targetListWidth, setTargetListWidth] = useState(450);
     const [projectListWidth, setProjectListWidth] = useState(projectWidth);
 
-    const { toast } = useContext(ToastContext);
+    const { toast, toastSuccess, toastError, toastInfo, toastWarning } = useContext(ToastContext);
     const [loginText, setLoginText] = useState(
       DJANGO_CONTEXT['username'] === 'NOT_LOGGED_IN' ? '' : "You're logged in as " + DJANGO_CONTEXT['username']
     );
+    const toastMessages = useSelector(state => state.selectionReducers.toastMessages);
+
+    useEffect(() => {
+      if (toastMessages?.length > 0) {
+        toastMessages.forEach(message => {
+          switch (message.level) {
+            case TOAST_LEVELS.SUCCESS:
+              toastSuccess(message.text);
+              break;
+            case TOAST_LEVELS.ERROR:
+              toastError(message.text);
+              break;
+            case TOAST_LEVELS.INFO:
+              toastInfo(message.text);
+              break;
+            case TOAST_LEVELS.WARNING:
+              toastWarning(message.text);
+              break;
+            default:
+              break;
+          }
+        });
+        dispatch(selectionActions.setToastMessages([]));
+      }
+    }, [dispatch, toastError, toastInfo, toastMessages, toastSuccess, toastWarning]);
 
     useEffect(() => {
       if (DJANGO_CONTEXT['authenticated'] !== true) {
@@ -67,13 +95,16 @@ const Landing = memo(
       setIsResizing(true);
     };
 
-    const handleMouseMove = useCallback(e => {
-      if (!isResizing) return;
-      const targetListWidth = e.clientX;
-      const projectListWidth = window.innerWidth - targetListWidth;
-      setTargetListWidth(targetListWidth);
-      setProjectListWidth(projectListWidth);
-    }, [isResizing]);
+    const handleMouseMove = useCallback(
+      e => {
+        if (!isResizing) return;
+        const targetListWidth = e.clientX;
+        const projectListWidth = window.innerWidth - targetListWidth;
+        setTargetListWidth(targetListWidth);
+        setProjectListWidth(projectListWidth);
+      },
+      [isResizing]
+    );
 
     const handleMouseUp = useCallback(() => {
       setIsResizing(false);
@@ -92,24 +123,27 @@ const Landing = memo(
     }, [isResizing, handleMouseMove, handleMouseUp]);
 
     return (
-      <Grid container className={classes.root}>
-        <Grid item style={{ width: targetListWidth }}>
-          <TargetList />
-        </Grid>
-        <div
-          style={{
-            cursor: 'col-resize',
-            width: 3,
-            height: '100%',
-            backgroundColor: '#eeeeee',
-            borderRadius: '3px'
-          }}
-          onMouseDown={handleMouseDownResizer}
-        ></div>
-        <Grid item style={{ width: projectListWidth }}>
-          <Projects />
+      <>
+        <Grid container className={classes.root}>
+          <Grid item style={{ width: targetListWidth }}>
+            <TargetList />
+          </Grid>
+          <div
+            style={{
+              cursor: 'col-resize',
+              width: 3,
+              height: '100%',
+              backgroundColor: '#eeeeee',
+              borderRadius: '3px'
+            }}
+            onMouseDown={handleMouseDownResizer}
+          ></div>
+          <Grid item style={{ width: projectListWidth }}>
+            <Projects />
+          </Grid>
         </Grid>
-      </Grid>
+        <EditTargetDialog />
+      </>
     );
   }
 );

diff --git a/js/components/preview/projectHistoryPanel/JobConfigurationDialog.js b/js/components/preview/projectHistoryPanel/JobConfigurationDialog.js
@@ -195,8 +195,6 @@ const JobConfigurationDialog = ({ snapshots }) => {
   const currentSnapshotSelectedCompoundsIDs = useSelector(state => state.selectionReducers.moleculesToEdit);
   const currentSnapshotVisibleCompoundsIDs = useSelector(state => state.selectionReducers.fragmentDisplayList);
 
-  const target_on_name = useSelector(state => state.apiReducers.target_on_name);
-
   const getMoleculeTitle = title => {
     return title.replace(new RegExp(':.*$', 'i'), '');
   };

diff --git a/js/components/preview/redux/dispatchActions.js b/js/components/preview/redux/dispatchActions.js
@@ -52,7 +52,10 @@ export const shouldLoadProtein = ({
 }) => (dispatch, getState) => {
   const state = getState();
   const targetIdList = state.apiReducers.target_id_list;
-  const targetOnName = state.apiReducers.target_on_name;
+  const targetOnId = state.apiReducers.target_on;
+
+  const targetOn = targetIdList.find(target => target.id === targetOnId);
+
   const isRestoring = state.trackingReducers.isActionRestoring;
   if (
     targetIdList &&
@@ -90,8 +93,12 @@ export const shouldLoadProtein = ({
       dispatch(restoreAfterTargetActions(nglViewList, routeProjectID, currentSnapshotID));
     }
 
-    if (targetOnName !== undefined) {
-      document.title = targetOnName + ': Fragalysis';
+    if (targetOn !== undefined) {
+      document.title = targetOn?.display_name
+        ? targetOn.display_name
+        : targetOn?.title
+        ? targetOn.title
+        : 'Unknown' + ': Fragalysis';
     }
   }
 };

diff --git a/js/components/projects/addProjectDetail/index.js b/js/components/projects/addProjectDetail/index.js
@@ -44,14 +44,15 @@ const useStyles = makeStyles(theme => ({
   }
 }));
 
-export const AddProjectDetail = memo(({ }) => {
+export const AddProjectDetail = memo(({}) => {
   const classes = useStyles();
   const [state, setState] = useState();
   let [createDiscourse, setCreateDiscourse] = useState(true);
 
   const dispatch = useDispatch();
   const targetId = useSelector(state => state.apiReducers.target_on);
   const targetName = useSelector(state => state.apiReducers.target_on_name);
+  const targetList = useSelector(state => state.apiReducers.target_id_list);
   const sessionProjectID = useSelector(state => state.projectReducers.currentProject.projectID);
   const isProjectModalLoading = useSelector(state => state.projectReducers.isProjectModalLoading);
   const currentProject = useSelector(state => state.targetReducers.currentProject);
@@ -71,6 +72,8 @@ export const AddProjectDetail = memo(({ }) => {
 
   createDiscourse &= dicourseUserAvailable;
 
+  const target = targetList.find(target => target.id === targetId);
+
   const validateProjectName = async value => {
     let error;
 
@@ -100,8 +103,8 @@ export const AddProjectDetail = memo(({ }) => {
     <ModalNewProject open={isProjectModalLoading}>
       <Formik
         initialValues={{
-          title: targetName + actualDate,
-          description: 'Project created from ' + targetName,
+          title: target?.display_name + actualDate,
+          description: 'Project created from ' + target?.display_name,
           tags: ''
         }}
         validate={values => {

diff --git a/js/components/projects/projectModal/index.js b/js/components/projects/projectModal/index.js
@@ -55,7 +55,7 @@ const useStyles = makeStyles(theme => ({
 }));
 let currantTargetId = 1;
 
-export const ProjectModal = memo(({ }) => {
+export const ProjectModal = memo(({}) => {
   const classes = useStyles();
   const [state, setState] = useState();
   const [selectedTarget, setSelectedTarget] = useState(false);
@@ -77,7 +77,9 @@ export const ProjectModal = memo(({ }) => {
   );
   const targetList = useSelector(state => state.apiReducers.target_id_list);
   const currantProject = useSelector(state => state.targetReducers.currantProject);
-  const currantTarget = useSelector(state => state.apiReducers.target_on_name);
+  const targetId = useSelector(state => state.apiReducers.target_on);
+
+  const currentTarget = targetList.find(target => target.id === targetId);
 
   const actualDate = moment().format('-YYYY-MM-DD');
 
@@ -123,33 +125,32 @@ export const ProjectModal = memo(({ }) => {
   };
 
   let selectedValue = '';
-  if (currantTarget !== undefined) {
-    selectedValue = currantTarget;
+  if (currentTarget?.display_name !== undefined) {
+    selectedValue = currentTarget?.display_name;
   }
   targetList.map(target => {
     if (selectedValue === target.title && selectedTarget === false) {
-      currantTargetId = target.id
+      currantTargetId = target.id;
     }
-  })
+  });
 
-  const handleChangeTarget = (event) => {
+  const handleChangeTarget = event => {
     setSelectedTarget(true);
     selectedValue = event.target.value;
     targetList.map(target => {
       if (selectedValue === target.title) {
-        currantTargetId = target.id
+        currantTargetId = target.id;
       }
-    })
-  }
-
+    });
+  };
 
   return (
     <ModalNewProject open={isProjectModalOpen} onClose={handleCloseModal}>
       <Formik
         initialValues={{
           type: ProjectCreationType.NEW,
-          title: currantTarget + actualDate,
-          description: 'Project created from ' + currantTarget,
+          title: currentTarget?.display_name + actualDate,
+          description: 'Project created from ' + currentTarget?.display_name,
           targetId: currantTargetId,
           parentSnapshotId: '',
           tags: ''
@@ -307,10 +308,13 @@ export const ProjectModal = memo(({ }) => {
                         <InputLabel htmlFor="selected-target" required disabled={isProjectModalLoading}>
                           Target
                         </InputLabel>
-                        <NativeSelect defaultValue={currantTarget} onChange={() => handleChangeTarget(event)}>
+                        <NativeSelect
+                          defaultValue={currentTarget?.display_name}
+                          onChange={() => handleChangeTarget(event)}
+                        >
                           {targetList.map(data => (
-                            <option key={data.id} defaultValue={currantTarget}>
-                              {data.title}
+                            <option key={data.id} defaultValue={currentTarget?.display_name}>
+                              {data.display_name}
                             </option>
                           ))}
                         </NativeSelect>

diff --git a/js/components/snapshot/modals/downloadStructuresDialog.js b/js/components/snapshot/modals/downloadStructuresDialog.js
@@ -139,6 +139,8 @@ export const DownloadStructureDialog = memo(({}) => {
   const isOpen = useSelector(state => state.snapshotReducers.downloadStructuresDialogOpen);
   const targetId = useSelector(state => state.apiReducers.target_on);
   const targetName = useSelector(state => state.apiReducers.target_on_name);
+  const targetIdList = useSelector(state => state.apiReducers.target_id_list);
+  const target = targetIdList.find(t => t.id === targetId);
   const allMolecules = useSelector(state => state.apiReducers.all_mol_lists);
   const ligandsTurnedOnIds = useSelector(state => state.selectionReducers.fragmentDisplayList);
   const selectedMoleculesIds = useSelector(state => state.selectionReducers.moleculesToEdit);
@@ -500,7 +502,7 @@ export const DownloadStructureDialog = memo(({}) => {
       <div className={classes.root}>
         {!zipPreparing && !(generalError || backendError) && (
           <DialogTitle id="form-dialog-structures-title" disableTypography>
-            <Typography variant="h5">{`Download structures and data for target ${targetName}`}</Typography>
+            <Typography variant="h5">{`Download structures and data for target ${target?.display_name}`}</Typography>
           </DialogTitle>
         )}
         {zipPreparing && (

diff --git a/js/components/snapshot/withSnapshotManagement.js b/js/components/snapshot/withSnapshotManagement.js
@@ -27,7 +27,9 @@ export const withSnapshotManagement = WrappedComponent => {
     const currentSnapshotID = useSelector(state => state.projectReducers.currentSnapshot.id);
 
     const targetIdList = useSelector(state => state.apiReducers.target_id_list);
-    const targetName = useSelector(state => state.apiReducers.target_on_name);
+    const targetId = useSelector(state => state.apiReducers.target_on);
+    const targetObj = targetIdList.find(t => t.id === targetId);
+    const targetName = targetObj?.display_name;
     const currentSessionProject = useSelector(state => state.projectReducers.currentProject);
     const currentSnapshot = useSelector(state => state.projectReducers.currentSnapshot);
     const directDisplay = useSelector(state => state.apiReducers.direct_access);