#1540 preferred aliases (#466)

* removed SGC column from target list * #1540 added preferred alias functionality * #1540 added edit column to target list and use target settings modal * #1540 updated "Open" label and read only version of display name --------- Co-authored-by: boriskovar-m2ms <[email protected]>
xchem · Dec 10, 2024 · 8eb7e93 · 8eb7e93
1 parent fbc6ac5
commit 8eb7e93
Show file tree

Hide file tree

Showing 12 changed files with 461 additions and 38 deletions.
diff --git a/js/components/header/index.js b/js/components/header/index.js
@@ -72,7 +72,8 @@ import { AddProjectDetail } from '../projects/addProjectDetail';
 import { ServicesStatusWrapper } from '../services';
 import { COMPANIES, get_logo } from '../funders/constants';
 import { setEditTargetDialogOpen } from '../target/redux/actions';
-import { Upload } from '@mui/icons-material';
+import { Settings, Upload } from '@mui/icons-material';
+import { TargetSettingsModal } from '../target/targetSettingsModal';
 import { SnapshotType } from '../projects/redux/constants';
 import { NglContext } from '../nglView/nglProvider';
 import { VIEWS } from '../../constants/constants';
@@ -134,7 +135,7 @@ export default memo(
 
     const [openMenu, setOpenMenu] = useState(false);
     const [openFunders, setOpenFunders] = useState(false);
-    const [openTrackingModal, setOpenTrackingModal] = useState(false);
+    const [openTargetSettings, setOpenTargetSettings] = useState(false);
     const [versions, setVersions] = useState({});
 
     const layoutEnabled = useSelector(state => state.layoutReducers.layoutEnabled);
@@ -310,14 +311,13 @@ export default memo(
                 >
                   Menu
                 </Button>
-                <Button>
+                <Button
+                  onClick={() => setOpenTargetSettings(true)}
+                  disabled={!targetName || !DJANGO_CONTEXT.pk}
+                >
                   <Typography
                     variant="h5"
                     color="textPrimary"
-                    onClick={() => {
-                      history.push(URLS.landing);
-                      window.location.reload();
-                    }}
                   >
                     Fragalysis: <b id={'headerNavbarTitle'}>{headerNavbarTitle}</b>
                   </Typography>
@@ -326,8 +326,8 @@ export default memo(
                   targetName !== undefined ? (
                     <>
                       {currentProject.authorID === null ||
-                      currentProject.projectID === null ||
-                      currentProject.authorID === userId ? (
+                        currentProject.projectID === null ||
+                        currentProject.authorID === userId ? (
                         <Button
                           onClick={() => {
                             if (!isProjectModalLoading) {
@@ -582,6 +582,7 @@ export default memo(
           </Grid>
         </AppBar>
         <FundersModal openModal={openFunders} onModalClose={() => setOpenFunders(false)} />
+        <TargetSettingsModal openModal={openTargetSettings} onModalClose={() => setOpenTargetSettings(false)} />
         <DiscourseErrorModal openModal={openDiscourseError} />
         <Drawer
           anchor="left"
@@ -651,7 +652,18 @@ export default memo(
                 </ListItemIcon>
                 <ListItemText primary="Contributors" />
               </ListItem>
-              {DJANGO_CONTEXT.pk && (
+              {DJANGO_CONTEXT.pk && !!targetName &&
+                <>
+                  <Divider />
+                  <ListItem button onClick={() => setOpenTargetSettings(true)}>
+                    <ListItemIcon>
+                      <Settings />
+                    </ListItemIcon>
+                    <ListItemText primary="Target settings" />
+                  </ListItem>
+                </>
+              }
+              {DJANGO_CONTEXT.pk &&
                 <>
                   <Divider />
                   <ListItem button onClick={() => openLink(URLS.lhsUpload)}>
@@ -673,7 +685,7 @@ export default memo(
                     <ListItemText primary="Metadata upload" />
                   </ListItem>
                 </>
-              )}
+              }
               <Divider />
               {authListItem}
             </Grid>
@@ -691,7 +703,7 @@ export default memo(
           </Grid>
         </Drawer>
         <Box paddingTop={`${headerHeight}px`} width="100%" />
-      </ComputeSize>
+      </ComputeSize >
     );
   })
 );
diff --git a/js/components/landing/Landing.js b/js/components/landing/Landing.js
@@ -15,6 +15,8 @@ import { withLoadingProjects } from '../target/withLoadingProjects';
 import { ToastContext } from '../toast';
 import { EditTargetDialog } from '../target/editTargetDialog';
 import { TOAST_LEVELS } from '../toast/constants';
+import { TargetSettingsModal } from '../target/targetSettingsModal';
+import { setEditTargetDialogOpen } from '../target/redux/actions';
 
 const useStyles = makeStyles(theme => ({
   root: {
@@ -40,6 +42,12 @@ const Landing = memo(
       DJANGO_CONTEXT['username'] === 'NOT_LOGGED_IN' ? '' : "You're logged in as " + DJANGO_CONTEXT['username']
     );
     const toastMessages = useSelector(state => state.selectionReducers.toastMessages);
+    const isEditTargetDialogOpen = useSelector(state => state.targetReducers.isEditTargetDialogOpen);
+
+    const onModalClose = () => {
+      dispatch(setEditTargetDialogOpen(false));
+      dispatch(selectionActions.setTargetToEdit(null));
+    };
 
     useEffect(() => {
       if (toastMessages?.length > 0) {
@@ -142,7 +150,7 @@ const Landing = memo(
             <Projects />
           </Grid>
         </Grid>
-        <EditTargetDialog />
+        <TargetSettingsModal openModal={isEditTargetDialogOpen} onModalClose={onModalClose} isTargetOn={false} />
       </>
     );
   }

diff --git a/js/components/preview/molecule/observationCmpView/observationCmpView.js b/js/components/preview/molecule/observationCmpView/observationCmpView.js
@@ -380,6 +380,10 @@ const useStyles = makeStyles(theme => ({
     cursor: 'pointer',
     marginRight: 5,
     position: 'right'
+  },
+  tooltipRow: {
+    marginTop: 2,
+    marginBottom: 2
   }
 }));
 
@@ -523,6 +527,8 @@ const ObservationCmpView = memo(
       const densityListCustom = useSelector(state => state.selectionReducers.densityListCustom);
       const qualityList = useSelector(state => state.selectionReducers.qualityList);
       const vectorOnList = useSelector(state => state.selectionReducers.vectorOnList);
+      // const currentTarget = useSelector(state => getCurrentTarget(state));
+      const aliasOrder = useSelector(state => state.apiReducers.target_on_aliases);
 
       const isLigandOn = isAtLeastOneObservationOnInList(fragmentDisplayList);
       const isProteinOn = isAtLeastOneObservationOnInList(proteinList);
@@ -1278,6 +1284,59 @@ const ObservationCmpView = memo(
 
       const groupMoleculeLPCControlButtonDisabled = disableL || disableP || disableC;
 
+      const getDisplayName = useCallback(() => {
+        const mainObservation = getMainObservation();
+        let displayName = '';
+        const defaultName = mainObservation?.compound_code;
+
+        if (aliasOrder) {
+          for (let index = 0; index < aliasOrder.length; index++) {
+            const preferredIdentifierType = aliasOrder[index];
+            if (preferredIdentifierType === 'compound_code') {
+              displayName = defaultName;
+              break;
+            } else {
+              // id: 81
+              // compound: 34
+              // name: "nonsense-34"
+              // type: "nonsense_id"
+              // url: null
+              const searchedIdentifier = mainObservation.identifiers.find(identifier => identifier.type === preferredIdentifierType);
+              if (searchedIdentifier) {
+                displayName = searchedIdentifier.name;
+                break;
+              }
+            }
+          }
+        }
+        if (!displayName) {
+          displayName = defaultName;
+        }
+
+        return displayName;
+      }, [aliasOrder, getMainObservation]);
+
+      const getDisplayNameTooltip = useCallback(() => {
+        const mainObservation = getMainObservation();
+        const tooltip = <>
+          <p className={classes.tooltipRow}>{mainObservation?.prefix_tooltip ?? '-'}</p>
+          {aliasOrder?.map((alias, index) => {
+            if (alias === 'compound_code') {
+              return <p key={index} className={classes.tooltipRow}>{`${alias}: ${mainObservation?.compound_code}`}</p>;
+              // return <><br></br>{`${alias}: ${mainObservation?.compound_code}`}</>;
+            } else {
+              const searchedIdentifier = mainObservation.identifiers.find(identifier => identifier.type === alias);
+              if (searchedIdentifier) {
+                return <p key={index} className={classes.tooltipRow}>{`${alias}: ${searchedIdentifier.name}`}</p>;
+                // return <><br></br>{`${alias}: ${searchedIdentifier.name}`}</>;
+              }
+            }
+          })}
+        </>;
+
+        return tooltip;
+      }, [aliasOrder, getMainObservation, classes.tooltipRow]);
+
       return (
         <>
           <Grid
@@ -1328,7 +1387,7 @@ const ObservationCmpView = memo(
             </Grid>
             <Grid item container className={classes.detailsCol} justifyContent="space-evenly" direction="column" xs={2}>
               {/* Title label */}
-              <Tooltip title={getMainObservation()?.prefix_tooltip ?? '-'} placement="bottom-start">
+              <Tooltip title={getDisplayNameTooltip()} placement="bottom-start">
                 <Grid
                   item
                   onCopy={e => {
@@ -1341,7 +1400,7 @@ const ObservationCmpView = memo(
                     {getMainObservation()?.code.replaceAll(`${target_on_name}-`, '')}
                   </span>
                   <br />
-                  {data?.main_site_observation_cmpd_code}
+                  {getDisplayName()}
                 </Grid>
               </Tooltip>
               {/* "Filtered"/calculated props

diff --git a/js/components/preview/tags/api/tagsApi.js b/js/components/preview/tags/api/tagsApi.js
@@ -59,14 +59,22 @@ export const getPoses = async targetId => {
   });
 };
 
-export const getTagMolecules = targetId => {
+export const getTagMolecules = async targetId => {
   return api({ url: `${base_url}/api/siteobservation_tag/?target=${targetId}` })
     .then(response => {
       return response.data;
     })
     .catch(err => console.log(err));
 };
 
+export const getCompoundIdentifiers = async () => {
+  return api({ url: `${base_url}/api/compound-identifiers/` })
+    .then(response => {
+      return response.data?.results;
+    })
+    .catch(err => console.log(err));
+};
+
 export const createNewTag = async (tag, targetName) => {
   let url = `${base_url}/api/siteobservation_tag/`;
   if (isDiscourseAvailable()) {

diff --git a/js/components/preview/tags/redux/dispatchActions.js b/js/components/preview/tags/redux/dispatchActions.js
@@ -28,7 +28,8 @@ import {
   setTargetDataLoadingInProgress,
   setAllDataLoaded,
   setMoleculeTags,
-  setLHSCompoundsLIst
+  setLHSCompoundsLIst,
+  setCompoundIdentifiers
 } from '../../../../reducers/api/actions';
 import { setSortDialogOpen } from '../../molecule/redux/actions';
 import { resetCurrentCompoundsSettings } from '../../compounds/redux/actions';
@@ -40,7 +41,8 @@ import {
   getCompoundsLHS,
   getCanonSites,
   getCanonConformSites,
-  getPoses
+  getPoses,
+  getCompoundIdentifiers
 } from '../api/tagsApi';
 import {
   getMoleculeTagForTag,
@@ -195,6 +197,7 @@ const getTagsForMol = (molId, tagList) => {
 export const loadMoleculesAndTagsNew = targetId => async (dispatch, getState) => {
   // console.log(`snapshotDebug - loadMoleculesAndTagsNew - before getTags`);
   let tags = await getTags(targetId);
+  let compoundIdentifiers = await getCompoundIdentifiers();
   // console.log(`snapshotDebug - loadMoleculesAndTagsNew - after getTags`);
   tags = tags.results;
   if (tags?.length > 0) {
@@ -227,6 +230,7 @@ export const loadMoleculesAndTagsNew = targetId => async (dispatch, getState) =>
     maps.event_info = mol.event_file;
     maps.sigmaa_info = mol.sigmaa_file;
     newObject['proteinData'] = maps;
+    newObject.identifiers = compoundIdentifiers.filter(identifier => identifier.compound === newObject.cmpd);
 
     allMolecules.push(newObject);
   });
@@ -247,6 +251,7 @@ export const loadMoleculesAndTagsNew = targetId => async (dispatch, getState) =>
   tags = tags.sort(compareTagsAsc);
   dispatch(setMoleculeTags(tags));
   dispatch(setTagSelectorData(tagCategories, tags));
+  dispatch(setCompoundIdentifiers(compoundIdentifiers));
   dispatch(setAllDataLoaded(true));
 
   // console.log(`snapshotDebug - loadMoleculesAndTagsNew - before getPoses`);

diff --git a/js/components/snapshot/withSnapshotManagement.js b/js/components/snapshot/withSnapshotManagement.js
@@ -27,9 +27,10 @@ export const withSnapshotManagement = WrappedComponent => {
     const currentSnapshotID = useSelector(state => state.projectReducers.currentSnapshot.id);
 
     const targetIdList = useSelector(state => state.apiReducers.target_id_list);
+    const targetOnName = 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 targetObj = targetIdList.find(t => t.id === targetId);
+    const targetName = targetOnName; // 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);

diff --git a/js/components/target/targetList.js b/js/components/target/targetList.js
@@ -319,7 +319,7 @@ export const TargetList = memo(() => {
     const discourseAvailable = isDiscourseAvailable();
     // const [discourseUrl, setDiscourseUrl] = useState();
     return (
-      <TableRow hover key={target.isLegacy ? target.title + 'Legacy' : target.title}>
+      <TableRow hover key={target.isLegacy ? target.title + 'Legacy' : `${target.id}-${target.title}`}>
         {/*<Tooltip title={`${target.id}`}>
         <TableCell
           component="th"
@@ -350,17 +350,6 @@ export const TargetList = memo(() => {
           ) : (
             <>
               <Link to={preview}>{target.display_name}</Link>
-              {showEditIconForTarget === target.id && (
-                <IconButton
-                  style={{ padding: '0px' }}
-                  onClick={() => {
-                    dispatch(setTargetToEdit(target));
-                    dispatch(setEditTargetDialogOpen(true));
-                  }}
-                >
-                  <Edit style={{ height: '15px' }} />
-                </IconButton>
-              )}
             </>
           )}
         </TableCell>
@@ -373,6 +362,18 @@ export const TargetList = memo(() => {
           {moment(target.project.init_date).format('YYYY-MM-DD')}
         </TableCell>
         <TableCell style={{ width: '2px', padding: '0px', margin: '0px' }}></TableCell>
+        {DJANGO_CONTEXT['authenticated'] && !target.isLegacy && <TableCell style={{ width: '2px', padding: '0px', margin: '0px' }}>
+          {/* {showEditIconForTarget === target.id && ( */}
+          <IconButton
+            style={{ padding: '0px' }}
+            onClick={() => {
+              dispatch(setTargetToEdit(target));
+              dispatch(setEditTargetDialogOpen(true));
+            }}
+          >
+            <Edit style={{ height: '15px' }} />
+          </IconButton>
+        </TableCell>}
         {/* <TableCell align="left" style={{ padding: '0px', margin: '0px' }}>
           {sgcUploaded.includes(target.title) && (
             <a href={sgcUrl} target="new">
@@ -1336,6 +1337,12 @@ export const TargetList = memo(() => {
                   onMouseDown={handleMouseDownResizerInitDate}
                 ></div>
               </div>
+              {DJANGO_CONTEXT['authenticated'] &&
+                <TableCell
+                  style={{ width: 50, padding: '0px', paddingLeft: '5px', verticalAlign: 'center' }}
+                >
+                  Edit
+                </TableCell>}
               {/* <TableCell
                 style={{ width: panelWidthForSGC, padding: '0px', paddingLeft: '5px', verticalAlign: 'center' }}
               >