#1551

js/components/datasets/inspirationDialog.js

@@ -32,8 +32,8 @@ import GroupNglControlButtonsContext from '../preview/molecule/groupNglControlBu
 
 const useStyles = makeStyles(theme => ({
   paper: {
-    width: 472,
-    height: 294,
+    width: 505,
+    // height: 294,
     overflowY: 'hidden'
   },
   molHeader: {
@@ -382,11 +382,11 @@ export const InspirationDialog = memo(
             <>
               <Grid container justifyContent="flex-start" direction="row" className={classes.molHeader} wrap="nowrap">
                 <Grid item container justifyContent="flex-start" direction="row">
-                  {Object.keys(moleculeProperty).map(key => (
+                  {/* {Object.keys(moleculeProperty).map(key => (
                     <Grid item key={key} className={classes.rightBorder}>
                       {moleculeProperty[key]}
                     </Grid>
-                  ))}
+                  ))} */}
                   {allSelectedMolecules.length > 0 && (
                     <Grid item>
                       <Grid

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

@@ -147,7 +147,7 @@ const useStyles = makeStyles(theme => ({
   image: {
     border: 'solid 1px',
     borderColor: theme.palette.background.divider,
-    borderStyle: 'solid solid solid none',
+    borderStyle: 'none none none solid',
     position: 'relative'
   },
   imageMargin: {
@@ -1203,7 +1203,7 @@ const MoleculeView = memo(
           </Grid>
           <Grid item container className={classes.detailsCol} justifyContent="space-between" direction="row">
             <Grid item container direction="column" alignItems="center" xs>
-              <Grid item container justifyContent="flex-start" alignItems="center" direction="row">
+              <Grid item container justifyContent="flex-start" alignItems="center" direction="row" xs>
                 <Grid item container justifyContent="space-between" direction="column" xs={3}>
                   {/* Title label */}
                   <Tooltip title={data.prefix_tooltip ?? '-' + (data.id === pose?.main_site_observation ? " - main observation" : "")} placement="bottom-start">

js/components/preview/molecule/observationCmpList.js

@@ -225,6 +225,9 @@ const useStyles = makeStyles(theme => ({
       //color: theme.palette.black
     }
   },
+  selectButton: {
+    padding: '4px 2px !important'
+  },
   formControl: {
     color: 'inherit',
     margin: theme.spacing(1),
@@ -416,10 +419,29 @@ export const ObservationCmpList = memo(({ hideProjects }) => {
   const filterRef = useRef();
   const tagEditorRef = useRef();
   const scrollBarRef = useRef();
+  const hitNavigatorRef = useRef();
   const [tagEditorAnchorEl, setTagEditorAnchorEl] = useState(null);
+  const [hitNavigatorWidth, setHitNavigatorWidth] = useState(0);
 
   const areLSHCompoundsInitialized = useSelector(state => state.selectionReducers.areLSHCompoundsInitialized);
 
+  useEffect(() => {
+    if (hitNavigatorRef && hitNavigatorRef.current) {
+
+      const resizeObserver = new ResizeObserver(() => {
+        if (hitNavigatorRef.current.offsetWidth !== hitNavigatorWidth) {
+          setHitNavigatorWidth(hitNavigatorRef.current.offsetWidth);
+        }
+      });
+
+      resizeObserver.observe(hitNavigatorRef.current);
+
+      return function cleanup() {
+        resizeObserver.disconnect();
+      }
+    }
+  }, [hitNavigatorRef, hitNavigatorWidth]);
+
   if (directDisplay && directDisplay.target) {
     target = directDisplay.target;
   }
@@ -1060,7 +1082,7 @@ export const ObservationCmpList = memo(({ hideProjects }) => {
   };
 
   return (
-    <Panel hasHeader title="Hit navigator" headerActions={actions}>
+    <Panel hasHeader title="Hit navigator" headerActions={actions} ref={hitNavigatorRef}>
       <AlertModal
         title="Are you sure?"
         description={`Loading of ${joinedMoleculeLists?.length} may take a long time`}
@@ -1200,7 +1222,7 @@ export const ObservationCmpList = memo(({ hideProjects }) => {
 
         {
           <Tooltip title={selectAllHitsPressed ? 'Unselect all hits' : 'Select all hits'}>
-            <Grid item style={{ marginLeft: '5px' }}>
+            <Grid item style={{ marginLeft: '2px' }} className={classes.selectButton}>
               <Button
                 variant="outlined"
                 className={classNames(classes.contColButton, {
@@ -1220,7 +1242,7 @@ export const ObservationCmpList = memo(({ hideProjects }) => {
         }
         {selectedDisplayHits === true ? (
           <Tooltip title={'Unselect displayed hits'}>
-            <Grid item style={{ marginLeft: '5px' }}>
+            <Grid item className={classes.selectButton}>
               <Button
                 variant="outlined"
                 className={classNames(classes.contColButton, {
@@ -1239,7 +1261,7 @@ export const ObservationCmpList = memo(({ hideProjects }) => {
           </Tooltip>
         ) : (
           <Tooltip title={'Select displayed hits'}>
-            <Grid item style={{ marginLeft: '5px' }}>
+            <Grid item className={classes.selectButton}>
               <Button
                 variant="outlined"
                 className={classNames(classes.contColButton, {
@@ -1258,11 +1280,11 @@ export const ObservationCmpList = memo(({ hideProjects }) => {
           </Tooltip>
         )}
         <Grid style={{ marginTop: '4px' }}>
-          <Typography variant="caption" className={classes.noOfSelectedHits}>{`Selected: ${allSelectedMolecules ? allSelectedMolecules.length : 0
+          <Typography variant="caption">{`Selected: ${allSelectedMolecules ? allSelectedMolecules.length : 0
             }`}</Typography>
         </Grid>
         <Grid style={{ marginTop: '4px' }}>
-          <Typography variant="caption" className={classes.noOfSelectedHits}>Sort by</Typography>
+          <Typography variant="caption" style={{ paddingLeft: 3 }}>Sort by</Typography>
         </Grid>
         <Grid style={{ marginTop: '4px', marginLeft: '4px' }}>
           <Tooltip title={sortOption ? sortOptions[sortOption].title : "Sort by"}>
@@ -1283,8 +1305,8 @@ export const ObservationCmpList = memo(({ hideProjects }) => {
         </Grid>
         <Tooltip title={ascending ? "Ascending" : "Descending"}>
           <Grid style={{ marginTop: '4px' }}>
-            <Checkbox checked={ascending} onChange={handleAscendingChecked} size="small" style={{ padding: 3 }} />
-            <Typography variant="caption" className={classes.noOfSelectedHits}>ASC</Typography>
+            <Checkbox checked={ascending} onChange={handleAscendingChecked} size="small" style={{ padding: 0 }} />
+            <Typography variant="caption">{(selectAllHitsPressed && hitNavigatorWidth > 508) || (!selectAllHitsPressed && hitNavigatorWidth > 491) ? 'Ascending' : 'ASC'}</Typography>
           </Grid>
         </Tooltip>
       </Grid>

js/components/preview/utils.js

@@ -34,8 +34,8 @@ export const extractTargetFromURLParam = param => {
 
 export const getProjectsForTarget = (target, projectsList) => {
   let result = null;
-  if (target && projectsList && target.project_id && target.project_id.length > 0) {
-    const projects = projectsList.filter(project => target.project_id.includes(project.id));
+  if (target && projectsList && target.project && target.project.length > 0) {
+    const projects = projectsList.filter(project => target.project.includes(project.id));
     result = [...projects];
   }
   return result;

js/components/projects/index.js

@@ -771,7 +771,7 @@ export const Projects = memo(({ }) => {
                         </TableCell>
                       </Tooltip>
                       <TableCell align="left" style={{ minWidth: '100px', padding: '0px 10px 0px 0px', margin: '0px' }}>
-                        <Link to={`${URLS.target}${project.target}`}>
+                        <Link to={`${URLS.target}${project.target.title}`}>
                           <div>{project.target.title === undefined ? project.target : project.target.title}</div>
                         </Link>
                       </TableCell>

js/components/snapshot/modals/downloadStructuresDialog.js

@@ -130,7 +130,7 @@ const createFlagObjectFromFlagList = flagList => {
   );
 };
 
-export const DownloadStructureDialog = memo(({}) => {
+export const DownloadStructureDialog = memo(({ }) => {
   const newDownload = '--- NEW DOWNLOAD ---';
   const dispatch = useDispatch();
   const classes = useStyles();
@@ -147,6 +147,7 @@ export const DownloadStructureDialog = memo(({}) => {
   const taggedMolecules = useSelector(state => selectJoinedMoleculeList(state));
   const downloadTags = useSelector(state => state.apiReducers.downloadTags);
   const currentSnapshot = useSelector(state => state.projectReducers.currentSnapshot);
+  const currentProject = useSelector(state => state.targetReducers.currentProject);
 
   const [structuresSelection, setStructuresSelection] = useState('allStructures');
 
@@ -236,6 +237,7 @@ export const DownloadStructureDialog = memo(({}) => {
     } else {
       requestObject = {
         target_name: targetName,
+        target_access_string: currentProject?.target_access_string,
         proteins: proteinNames,
         ...mapFiles,
         ...crystallographicFiles,
@@ -253,12 +255,12 @@ export const DownloadStructureDialog = memo(({}) => {
   const prepareDownloadClicked = () => async (dispatch, getState) => {
     const options = { link: { linkAction: downloadStructuresZip, linkText: 'Click to Download', linkParams: [] } };
     if (selectedDownload !== newDownload) {
-      const donwloadTag = findDownload(selectedDownload);
-      if (donwloadTag) {
+      const downloadTag = findDownload(selectedDownload);
+      if (downloadTag) {
         setGeneralError(false);
         setZipPreparing(true);
         setAlreadyInProgress(false);
-        getDownloadStructuresUrl(donwloadTag.additional_info.requestObject)
+        getDownloadStructuresUrl(downloadTag.additional_info.requestObject)
           .then(resp => {
             if (resp.status === 208) {
               //same download is already preparing for someone else
@@ -276,7 +278,7 @@ export const DownloadStructureDialog = memo(({}) => {
             if (resp) {
               const fileSizeInBytes = resp.headers['content-length'];
               setFileSize(getFileSizeString(fileSizeInBytes));
-              const url = generateUrlFromTagName(donwloadTag.tag);
+              const url = generateUrlFromTagName(downloadTag.tag);
               options.link.linkParams = [url];
               setDownloadTagUrl(url);
               setZipPreparing(false);
@@ -534,8 +536,8 @@ export const DownloadStructureDialog = memo(({}) => {
               <Grid item>
                 <Select className={classes.select} value={selectedDownload} onChange={onUpdateExistingDownload}>
                   <MenuItem value={newDownload}>{newDownload}</MenuItem>
-                  {downloadTags.map(dt => (
-                    <MenuItem value={dt.additional_info.downloadName}>{dt.additional_info.downloadName}</MenuItem>
+                  {downloadTags.map((dt, index) => (
+                    <MenuItem key={index} value={dt.additional_info.downloadName}>{dt.additional_info.downloadName}</MenuItem>
                   ))}
                 </Select>
               </Grid>

js/components/target/redux/dispatchActions.js

@@ -154,18 +154,19 @@ export const getTargetProjectCombinations = (targets, projects) => {
     targetItems.forEach(([targetId, target]) => {
       if (!target.isLegacy) {
         const updatedTarget = target;
-        target.project_id.forEach(projectId => {
-          const project = projects.find(project => project.id === projectId);
-          // const project = projects[projectId];
-          if (project) {
-            updatedTarget.project = project;
-            result.push({ updatedTarget });
-          } else {
-            console.log(
-              `User don't have access to project ${projectId} which is associated with target ${target.title}`
-            );
-          }
-        });
+        console.log('target.project', target.project);
+        // TODO debug this?
+        const projectId = typeof target.project === 'object' ? target.project.id : target.project;
+        const project = projects.find(project => project.id === projectId);
+        // const project = projects[projectId];
+        if (project) {
+          updatedTarget.project = project;
+          result.push({ updatedTarget });
+        } else {
+          console.log(
+            `User don't have access to project ${projectId} which is associated with target ${target.title}`
+          );
+        }
       } else {
         result.push({ updatedTarget: { ...target, project: { target_access_string: 'Legacy' } } });
       }

js/constants/constants.js

@@ -61,7 +61,8 @@ export const NON_ASSIGNABLE_CATEGORIES = [
   'CanonSites',
   'CrystalformSites',
   'Quatassemblies',
-  'Crystalforms'
+  'Crystalforms',
+  'Pose'
 ];
 
 export const PLURAL_TO_SINGULAR = {