#1565 Homepage / target table improvements (#497)

* #1408 initial commit

* #1408 fixed some on hover behaviors

* #1408 removed username tooltip from peer review table, filter out default quality statuses

* #1408 updated LightCircle to be able to receive all component props, added onClick functionality for main quality status light and updated its hover events

* - fixes issue when main observation is no longer part of the target

* Squashed commit of the following:

commit 1d4bcf7
Author: boriskovar-m2ms <boris.kovar@m2ms.sk>
Date:   Thu Apr 3 14:02:03 2025 +0200

    - implements first batch of optimizations: local rdkit rendering and progress dialogs for data download and

* Squashed commit of the following:

commit 238bc95
Author: boriskovar-m2ms <boris.kovar@m2ms.sk>
Date:   Tue Mar 25 13:13:29 2025 +0100

    - now only main observation is displayed

* Squashed commit of the following:

commit 880b8ee
Author: boriskovar-m2ms <boris.kovar@m2ms.sk>
Date:   Tue Apr 8 08:27:39 2025 +0200

    - first implementation

* Squashed commit of the following:

commit 68edd73
Author: Boris Kovar <boris.kovar@m2ms.sk>
Date:   Fri Apr 25 08:29:18 2025 +0200

    - implements #1761

* #1565 target list split into three separate lists, fixed filters

---------

Co-authored-by: boriskovar-m2ms <boris.kovar@m2ms.sk>

Author: matej-vavrek

js/components/landing/Landing.js

@@ -32,10 +32,32 @@ const Landing = memo(
     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 [resizer, setResizer] = useState(null);
+    // const [targetListWidth, setTargetListWidth] = useState(450);
+    const [publicTargetListWidth, setPublicTargetListWidth] = useState(window.innerWidth * 0.4);
+    const [privateTargetListWidth, setPrivateTargetListWidth] = useState(window.innerWidth * 0.4);
+    const [legacyTargetListWidth, setLegacyTargetListWidth] = useState(window.innerWidth * 0.2);
+
+    const [privateTargets, setPrivateTargets] = useState([]);
+    const [publicTargets, setPublicTargets] = useState([]);
+
+    const target_id_list = useSelector(state => state.apiReducers.target_id_list);
+    const legacy_target_id_list = useSelector(state => state.apiReducers.legacy_target_id_list);
+
+    useEffect(() => {
+      let tempPrivateTargets = [];
+      let tempPublicTargets = [];
+      target_id_list?.forEach(target => {
+        if (target.project.open_to_public === false) {
+          tempPrivateTargets.push(target);
+        } else {
+          tempPublicTargets.push(target);
+        }
+      });
+      setPrivateTargets(tempPrivateTargets);
+      setPublicTargets(tempPublicTargets);
+    }, [target_id_list]);
 
     const { toast, toastSuccess, toastError, toastInfo, toastWarning } = useContext(ToastContext);
     const [loginText, setLoginText] = useState(
@@ -99,23 +121,30 @@ const Landing = memo(
       resetProjectsReducer();
     }, [resetTargetState, resetSelectionState, toast, loginText, resetCurrentCompoundsSettings, resetProjectsReducer]);
 
-    const handleMouseDownResizer = () => {
+    const handleMouseDownResizer = (resizer) => {
       setIsResizing(true);
+      setResizer(resizer);
     };
 
     const handleMouseMove = useCallback(
       e => {
-        if (!isResizing) return;
-        const targetListWidth = e.clientX;
-        const projectListWidth = window.innerWidth - targetListWidth;
-        setTargetListWidth(targetListWidth);
-        setProjectListWidth(projectListWidth);
+        if (!isResizing || resizer === null) return;
+        const leftPartWidth = e.clientX;
+        const rightPartWidth = window.innerWidth - leftPartWidth;
+        if (resizer === 1) {
+          setPublicTargetListWidth(leftPartWidth);
+          setPrivateTargetListWidth(rightPartWidth);
+        } else if (resizer === 2) {
+          setPrivateTargetListWidth(leftPartWidth);
+          setLegacyTargetListWidth(rightPartWidth);
+        }
       },
-      [isResizing]
+      [isResizing, resizer]
     );
 
     const handleMouseUp = useCallback(() => {
       setIsResizing(false);
+      setResizer(null);
       window.removeEventListener('mousemove', handleMouseMove);
       window.removeEventListener('mouseup', handleMouseUp);
     }, [handleMouseMove]);
@@ -133,8 +162,22 @@ const Landing = memo(
     return (
       <>
         <Grid container className={classes.root}>
-          <Grid item style={{ width: targetListWidth }}>
-            <TargetList />
+          <Grid item style={{ width: publicTargetListWidth }}>
+            <TargetList list={publicTargets} title={'Public targets'} />
+          </Grid>
+          <div
+            style={{
+              cursor: 'col-resize',
+              width: 3,
+              height: '100%',
+              backgroundColor: '#eeeeee',
+              borderRadius: '3px'
+            }}
+            className='resizer-left'
+            onMouseDown={() => handleMouseDownResizer(1)}
+          ></div>
+          <Grid item style={{ width: privateTargetListWidth }}>
+            <TargetList list={privateTargets} title={'Private targets'} authRequired={true} />
           </Grid>
           <div
             style={{
@@ -144,10 +187,11 @@ const Landing = memo(
               backgroundColor: '#eeeeee',
               borderRadius: '3px'
             }}
-            onMouseDown={handleMouseDownResizer}
+            className='resizer-right'
+            onMouseDown={() => handleMouseDownResizer(2)}
           ></div>
-          <Grid item style={{ width: projectListWidth }}>
-            <Projects />
+          <Grid item style={{ width: legacyTargetListWidth }}>
+            <TargetList list={legacy_target_id_list} title={'Legacy targets'} legacy={true} />
           </Grid>
         </Grid>
         <TargetSettingsModal openModal={isEditTargetDialogOpen} onModalClose={onModalClose} isTargetOn={false} />

js/components/target/redux/dispatchActions.js

@@ -30,7 +30,16 @@ export const loadTargetList = onCancel => (dispatch, getState) => {
       dispatch(setIsTargetLoading(false));
     },
     old_url: oldUrl,
-    setObjectList: params => dispatch(setTargetIdList(params)),
+    setObjectList: async params => {
+      const experiments = await loadExperimentList();
+      params?.forEach(target => {
+        const experiment = experiments.sort((a, b) => a.commit_datetime > b.commit_datetime ? -1 : 1).find(experiment => experiment.target === target.id);
+        if (experiment) {
+          target.last_updated = experiment.commit_datetime;
+        }
+      });
+      dispatch(setTargetIdList(params))
+    },
     list_type,
     cancel: onCancel
   });
@@ -52,6 +61,12 @@ export const loadLegacyTargetList = () => async (dispatch, getState) => {
   }
 };
 
+export const loadExperimentList = async () => {
+  const url = `${base_url}/api/target_experiment_uploads/`;
+  const resp = await api({ url, method: METHOD.GET });
+  return resp.data.results;
+};
+
 export const loadProjectsList = () => async (dispatch, getState) => {
   const url = `${base_url}/api/projects/`;
   const resp = await api({ url, method: METHOD.GET });