From b8b61be104eaa7055aed0045e5ff92a2926d2093 Mon Sep 17 00:00:00 2001
From: matej <60509086+matej-vavrek@users.noreply.github.com>
Date: Wed, 16 Oct 2024 12:58:24 +0200
Subject: [PATCH] #1523 #1463 (#457)

* #1514 replaced project_id occurrences with project and adjusted functionality with current B/E

* #1514 added target_access_string to /api/download_structures, replaced /api/molgroup with /api/siteobservationgroup, minor fixes

* #1523 adjusted inspiration dialog layout and removed molecular properties headers from it too

* #1463 show "Ascending" instead of "ASC" when there is a possible space for it

* removed unnecessary setter and comments
---
 js/components/datasets/inspirationDialog.js   |  8 ++--
 .../molecule/moleculeView/moleculeView.js     |  4 +-
 .../preview/molecule/observationCmpList.js    | 38 +++++++++++++++----
 3 files changed, 36 insertions(+), 14 deletions(-)

diff --git a/js/components/datasets/inspirationDialog.js b/js/components/datasets/inspirationDialog.js
index e018ae13c..23aa4c7c4 100644
--- a/js/components/datasets/inspirationDialog.js
+++ b/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
diff --git a/js/components/preview/molecule/moleculeView/moleculeView.js b/js/components/preview/molecule/moleculeView/moleculeView.js
index 80c7dedbf..7367b1e7d 100644
--- a/js/components/preview/molecule/moleculeView/moleculeView.js
+++ b/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">
diff --git a/js/components/preview/molecule/observationCmpList.js b/js/components/preview/molecule/observationCmpList.js
index c8df5b25f..8479bfb4c 100644
--- a/js/components/preview/molecule/observationCmpList.js
+++ b/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>