xchem
diff --git a/‎docker-compose.dev.vector.yml
Lines changed: 1 addition & 0 deletions b/‎docker-compose.dev.vector.yml
Lines changed: 1 addition & 0 deletions
diff --git a/‎js/components/preview/molecule/moleculeView/moleculeView.js
Lines changed: 3 additions & 1 deletion b/‎js/components/preview/molecule/moleculeView/moleculeView.js
Lines changed: 3 additions & 1 deletion
diff --git a/‎js/components/preview/molecule/observationCmpList.js
Lines changed: 19 additions & 37 deletions b/‎js/components/preview/molecule/observationCmpList.js
Lines changed: 19 additions & 37 deletions
diff --git a/‎js/components/preview/molecule/observationCmpView/observationCmpView.js
Lines changed: 1 addition & 1 deletion b/‎js/components/preview/molecule/observationCmpView/observationCmpView.js
Lines changed: 1 addition & 1 deletion
diff --git a/‎js/components/preview/molecule/redux/dispatchActions.js
Lines changed: 2 additions & 4 deletions b/‎js/components/preview/molecule/redux/dispatchActions.js
Lines changed: 2 additions & 4 deletions
diff --git a/‎js/components/preview/tags/api/tagsApi.js
Lines changed: 16 additions & 0 deletions b/‎js/components/preview/tags/api/tagsApi.js
Lines changed: 16 additions & 0 deletions
diff --git a/‎js/components/preview/tags/redux/dispatchActions.js
Lines changed: 63 additions & 8 deletions b/‎js/components/preview/tags/redux/dispatchActions.js
Lines changed: 63 additions & 8 deletions
diff --git a/‎js/components/services/ServiceStatus.js
Lines changed: 3 additions & 42 deletions b/‎js/components/services/ServiceStatus.js
Lines changed: 3 additions & 42 deletions
diff --git a/‎js/components/services/ServicesStatus.js
Lines changed: 40 additions & 6 deletions b/‎js/components/services/ServicesStatus.js
Lines changed: 40 additions & 6 deletions
@@ -105,6 +105,7 @@ services:
       DEBUG_FRAGALYSIS: 'True'
       PROXY_FORWARDED_PROTO_HEADER: 'http'
       LEGACY_URL: 'https://fragalysis.diamond.ac.uk'
+      DEPLOYMENT_MODE: 'development'
     depends_on:
       database:
         condition: service_healthy
 
@@ -961,6 +961,8 @@ const MoleculeView = memo(
     // let moleculeTitle = data?.code.replace(new RegExp(`${target_on_name}-`, 'i'), '');
     // let moleculeTitle = data?.code;
     let moleculeTitle = data?.code.replaceAll(`${target_on_name}-`, '');
+    const moleculeTitleTruncated = moleculeTitle.substring(0, 20) + (moleculeTitle.length > 20 ? '...' : '');
+
     const [isNameCopied, setNameCopied] = useClipboard(moleculeTitle, { successDuration: 5000 });
 
     const moleculeLPCControlButtonDisabled = ['ligand', 'protein', 'complex'].some(
@@ -1013,7 +1015,7 @@ const MoleculeView = memo(
                   }}
                   className={classes.moleculeTitleLabel}
                 >
-                  {moleculeTitle}
+                  {moleculeTitleTruncated}
                 </div>
               </Tooltip>
               {generateTagPopover()}
 
@@ -657,16 +657,6 @@ export const ObservationCmpList = memo(({ hideProjects }) => {
   });
   const uniqueSelectedMoleculeForHitNavigator = [...new Set(selectedMolecule)];
 
-  const newMolsToEdit = [];
-  currentMolecules.forEach(cm => {
-    if (moleculesToEditIds.includes(cm.id)) {
-      newMolsToEdit.push(cm.id);
-    }
-  });
-  if (newMolsToEdit.length !== moleculesToEditIds.length) {
-    dispatch(setMolListToEdit(newMolsToEdit));
-  }
-
   const changePredefinedFilter = event => {
     let newFilter = Object.assign({}, filter);
 
@@ -722,44 +712,35 @@ export const ObservationCmpList = memo(({ hideProjects }) => {
   let filteredLHSCompoundsList = useMemo(() => {
     const compounds = [];
     lhsCompoundsList.forEach(compound => {
-      const molsForCmp = joinedMoleculeLists.filter(molecule => molecule.cmpd === compound.id);
-      if (molsForCmp.length > 0) {
+      const molsForCmp = joinedMoleculeLists.filter(molecule => molecule.cmpd === compound.origId);
+      if (molsForCmp?.length > 0) {
         compounds.push(compound);
       }
     });
     return compounds;
-  }, [lhsCompoundsList, joinedMoleculeLists]);
-
-  let compoundMolecules = useMemo(() => {
-    const compoundMolecules = {};
-
-    filteredLHSCompoundsList.forEach(compound => {
-      const molsForCmp = allMoleculesList.filter(molecule => molecule.cmpd === compound.id);
-      compoundMolecules[compound.id] = molsForCmp.sort((a, b) => {
-        if (a.code < b.code) {
-          return -1;
-        }
-        if (a.code > b.code) {
-          return 1;
-        }
-        return 0;
-      });
-    });
-
-    return compoundMolecules;
-  }, [filteredLHSCompoundsList, allMoleculesList]);
+  }, [joinedMoleculeLists, lhsCompoundsList]);
 
   useEffect(() => {
     if (isObservationDialogOpen && observationsForLHSCmp?.length > 0) {
       const cmpId = observationsForLHSCmp[0].cmpd;
-      const cmp = filteredLHSCompoundsList.find(c => c.id === cmpId);
+      const cmp = filteredLHSCompoundsList.find(c => c.origId === cmpId);
       if (!cmp) {
         dispatch(setObservationsForLHSCmp([]));
         dispatch(setOpenObservationsDialog(false));
       }
     }
   }, [isObservationDialogOpen, filteredLHSCompoundsList, observationsForLHSCmp, dispatch]);
 
+  const newMolsToEdit = [];
+  allMoleculesList.forEach(cm => {
+    if (moleculesToEditIds.includes(cm.id)) {
+      newMolsToEdit.push(cm.id);
+    }
+  });
+  if (newMolsToEdit.length !== moleculesToEditIds.length) {
+    dispatch(setMolListToEdit(newMolsToEdit));
+  }
+
   const isLigandOn = changeButtonClassname(fragmentDisplayList, joinedLigandMatchLength);
   const isProteinOn = changeButtonClassname(proteinList, joinedProteinMatchLength);
   const isComplexOn = changeButtonClassname(complexList, joinedComplexMatchLength);
@@ -1243,9 +1224,8 @@ export const ObservationCmpList = memo(({ hideProjects }) => {
                 useWindow={false}
               >
                 {filteredLHSCompoundsList.map((data, index, array) => {
-                  const molsForCmp = compoundMolecules[data.id];
-                  // const selected = allSelectedLHSCmps.some(molecule => molecule.id === data.id);
-                  const selected = allSelectedMolecules.some(molecule => molecule.cmpd === data.id);
+                  const molsForCmp = data.associatedObs;
+                  const selected = allSelectedMolecules.some(molecule => molecule.cmpd === data.origId);
 
                   return (
                     <ObservationCmpView
@@ -1277,7 +1257,9 @@ export const ObservationCmpList = memo(({ hideProjects }) => {
             <Grid item>
               <Grid container spacing={1} justifyContent="space-between" alignItems="center" direction="row">
                 <Grid item>
-                  <span className={classes.total}>{`Total ${joinedMoleculeLists?.length}`}</span>
+                  <span
+                    className={classes.total}
+                  >{`Total cmps/obs ${filteredLHSCompoundsList?.length}/${joinedMoleculeLists?.length}`}</span>
                 </Grid>
                 <Grid item>
                   <ButtonGroup variant="text" size="medium" color="primary" aria-label="contained primary button group">
 
@@ -1157,7 +1157,7 @@ const ObservationCmpView = memo(
                     // dispatch(appendToObsCmpListToEdit(currentID));
                   } else {
                     observations?.forEach(obs => {
-                      dispatch(appendToMolListToEdit(obs.id));
+                      dispatch(removeFromMolListToEdit(obs.id));
                     });
                     // dispatch(removeFromObsCmpListToEdit(currentID));
                   }
 
@@ -710,10 +710,8 @@ export const getFirstMolOfFirstCompound = () => (dispatch, getState) => {
   const compoundsList = state.apiReducers.lhs_compounds_list;
   const firstCompound = compoundsList[0];
   if (firstCompound) {
-    const molList = state.apiReducers.all_mol_lists;
-    const firstMols = molList?.filter(m => m.cmpd === firstCompound.id);
-    if (firstMols && firstMols.length > 0) {
-      return firstMols[0];
+    if (firstCompound.associatedObs?.length > 0) {
+      return firstCompound.associatedObs[0];
     } else {
       return null;
     }
 
@@ -35,6 +35,22 @@ export const getAllDataNew = async targetId => {
   });
 };
 
+export const getCanonSites = async targetId => {
+  return api({ url: `${base_url}/api/canon_sites/?target=${targetId}` }).then(response => {
+    if (response?.data) {
+      return response.data?.results;
+    }
+  });
+};
+
+export const getCanonConformSites = async targetId => {
+  return api({ url: `${base_url}/api/canon_site_confs/?target=${targetId}` }).then(response => {
+    if (response?.data) {
+      return response.data?.results;
+    }
+  });
+};
+
 export const getCompoundsLHS = async targetId => {
   return api({ url: `${base_url}/api/cmpdimg/?target=${targetId}` }).then(response => {
     if (response?.data) {
 
@@ -32,7 +32,15 @@ import {
 } from '../../../../reducers/api/actions';
 import { setSortDialogOpen } from '../../molecule/redux/actions';
 import { resetCurrentCompoundsSettings } from '../../compounds/redux/actions';
-import { updateExistingTag, getTags, getAllDataNew, getTagCategories, getCompoundsLHS } from '../api/tagsApi';
+import {
+  updateExistingTag,
+  getTags,
+  getAllDataNew,
+  getTagCategories,
+  getCompoundsLHS,
+  getCanonSites,
+  getCanonConformSites
+} from '../api/tagsApi';
 import {
   getMoleculeTagForTag,
   createMoleculeTagObject,
@@ -182,6 +190,8 @@ export const loadMoleculesAndTagsNew = targetId => async (dispatch, getState) =>
     dispatch(setNoTagsReceived(false));
   }
   const tagCategories = await getTagCategories();
+  // const canonSitesList = await getCanonSites(targetId);
+  const canonConformSitest = await getCanonConformSites(targetId);
 
   const data = await getAllDataNew(targetId);
   let allMolecules = [];
@@ -221,20 +231,65 @@ export const loadMoleculesAndTagsNew = targetId => async (dispatch, getState) =>
   dispatch(setAllDataLoaded(true));
 
   return getCompoundsLHS(targetId).then(compounds => {
+    const expandedCompounds = [];
+    let newIdStart = Math.max(...compounds?.map(c => c.id)) + 1;
     compounds?.forEach(c => {
-      const siteObs = allMolecules.find(m => m.cmpd === c.id);
-      c['smiles'] = siteObs ? siteObs.smiles : '';
-      c['code'] = siteObs ? `${siteObs.code}/${siteObs.canon_site_conf}` : '';
+      const siteObs = allMolecules.filter(m => m.cmpd === c.id);
+      const canonConformSites = siteObs?.map(so => {
+        return {
+          smiles: so.smiles,
+          code: so.code,
+          canon_site_conf: so.canon_site_conf,
+          canon_site: canonConformSitest.find(ccf => ccf.id === so.canon_site_conf)?.canon_site
+        };
+      });
+      canonConformSites?.forEach(cs => {
+        let newObject = { ...c };
+
+        newObject['smiles'] = cs.smiles;
+        newObject['code'] = `${cs.code}/${cs.canon_site}`;
+        newObject['origId'] = c.id;
+        newObject['id'] = newIdStart++;
+        newObject['canonSiteConf'] = cs.canon_site_conf;
+        newObject['canonSite'] = cs.canon_site;
+
+        const associatedObs = siteObs
+          .filter(
+            so =>
+              canonConformSitest.find(ccf => ccf.id === so.canon_site_conf)?.canon_site === newObject.canonSite &&
+              so.cmpd === c.id
+          )
+          .map(so => {
+            return {
+              ...so,
+              canon_site: canonConformSitest.find(ccf => ccf.id === so.canon_site_conf)?.canon_site
+            };
+          })
+          .sort((a, b) => {
+            if (a.code < b.code) {
+              return -1;
+            }
+            if (a.code > b.code) {
+              return 1;
+            }
+            return 0;
+          });
+        newObject['associatedObs'] = associatedObs;
+
+        if (!expandedCompounds.find(ec => ec.origId === newObject.origId && ec.canonSite === newObject.canonSite)) {
+          expandedCompounds.push(newObject);
+        }
+      });
     });
-    compounds.sort((a, b) => {
-      if (a.smiles < b.smiles) {
+    expandedCompounds.sort((a, b) => {
+      if (a.code < b.code) {
         return -1;
       }
-      if (a.smiles > b.smiles) {
+      if (a.code > b.code) {
         return 1;
       }
       return 0;
     });
-    dispatch(setLHSCompoundsLIst([...compounds]));
+    dispatch(setLHSCompoundsLIst(expandedCompounds));
   });
 };
@@ -1,48 +1,9 @@
-import { Grid, Tooltip, makeStyles } from "@material-ui/core";
+import { Grid } from "@material-ui/core";
 import React, { memo } from "react";
-
-const useStyles = makeStyles(theme => ({
-    circle: {
-        display: 'flex',
-        flex: 1
-    }
-}));
-
-export const SERVICE_STATUSES = {
-    OK: 'OK',
-    DEGRADED: 'DEGRADED'
-}
-
-export const SERVICE_STATUS_COLORS = {
-    OK: 'green',
-    DEGRADED: 'orange',
-    OTHER: 'red'
-}
+import { StatusLight } from "./StatusLight";
 
 export const ServiceStatus = memo(({ service }) => {
-    const getColor = (status) => {
-        switch (status) {
-            case SERVICE_STATUSES.OK:
-                return SERVICE_STATUS_COLORS.OK;
-            case SERVICE_STATUSES.DEGRADED:
-                return SERVICE_STATUS_COLORS.DEGRADED;
-            default:
-                return SERVICE_STATUS_COLORS.OTHER;
-        }
-    }
     return <Grid item>
-        <Tooltip title={`${service.name} - ${service.state}`}>
-            <svg height="20" width="20" className={useStyles().circle}>
-                <defs>
-                    <linearGradient id="darkGradient" gradientTransform="rotate(90)">
-                        <stop offset="0%" stopColor="rgba(0,0,0,0.4289916650253851)" />
-                        <stop offset="100%" stopColor="rgba(255,255,255,0)" />
-                    </linearGradient>
-                </defs>
-                {/* TODO do not use two circles but use gradient as overlay? */}
-                <circle cx="10" cy="10" r="9" fill={getColor(service.state)} />
-                <circle cx="10" cy="10" r="9" stroke="#ccc" strokeWidth="1" fill="url('#darkGradient')" />
-            </svg>
-        </Tooltip>
+        <StatusLight service={service} />
     </Grid>;
 });
@@ -1,11 +1,45 @@
-import { Grid } from "@material-ui/core";
+import { Grid, Table, TableBody, TableCell, TableRow, Tooltip, makeStyles, styled } from "@material-ui/core";
 import React, { memo } from "react";
 import { ServiceStatus } from "./ServiceStatus";
+import { StatusLight } from "./StatusLight";
+import { tooltipClasses } from "@mui/material";
+
+const useStyles = makeStyles(theme => ({
+    cell: {
+        color: theme.palette.primary.contrastText
+    }
+}));
 
 export const ServicesStatus = memo(({ services }) => {
-    return <Grid container direction="row" justifyContent="flex-start" alignItems="center" spacing={1}>
-        {services.map((service) =>
-            <ServiceStatus key={`status-${service.id}`} service={service} />
-        )}
-    </Grid>
+
+    const classes = useStyles();
+
+    const NoMaxWidthTooltip = styled(({ className, ...props }) => (
+        <Tooltip {...props} classes={{ popper: className }} />
+    ))({
+        [`& .${tooltipClasses.tooltip}`]: {
+            maxWidth: 'none'
+        }
+    });
+
+    const StyledTableRow = styled(TableRow)(({ theme }) => ({
+        // hide last border
+        '&:last-child td, &:last-child th': {
+            border: 0
+        }
+    }));
+
+    return <NoMaxWidthTooltip title={<Table><TableBody>
+        {services.map((service) => <StyledTableRow key={service.id}>
+            <TableCell className={classes.cell}><StatusLight service={service} /></TableCell>
+            <TableCell className={classes.cell}>{service.state}</TableCell>
+            <TableCell className={classes.cell}>{service.name}</TableCell>
+        </StyledTableRow>)}
+    </TableBody></Table>}>
+        <Grid container direction="row" justifyContent="flex-start" alignItems="center" spacing={1}>
+            {services.map((service) =>
+                <ServiceStatus key={`status-${service.id}`} service={service} />
+            )}
+        </Grid>
+    </NoMaxWidthTooltip>
 });
Original file line number	Diff line number	Diff line change
`@@ -1157,7 +1157,7 @@ const ObservationCmpView = memo(`
`1157`	`1157`	`// dispatch(appendToObsCmpListToEdit(currentID));`
`1158`	`1158`	`} else {`
`1159`	`1159`	`observations?.forEach(obs => {`
`1160`		`- dispatch(appendToMolListToEdit(obs.id));`
	`1160`	`+ dispatch(removeFromMolListToEdit(obs.id));`
`1161`	`1161`	`});`
`1162`	`1162`	`// dispatch(removeFromObsCmpListToEdit(currentID));`
`1163`	`1163`	`}`