#1606 (#473)

* 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 * Squashed commit of the following: commit c5bba58 Author: Boris Kovar <[email protected]> Date: Tue Dec 10 08:13:00 2024 +0100 #1603 - fixes * Squashed commit of the following: commit 9d9bf8c Author: Boris Kovar <[email protected]> Date: Wed Dec 11 15:20:54 2024 +0100 fixed frontend part of the ticket. Now properly resolves target based on the target name and target access string * - fixed issue when the template protein is missing * Squashed commit of the following: commit 2fd529e Author: Boris Kovar <[email protected]> Date: Mon Dec 16 10:44:15 2024 +0100 - changes labels in searchSettingsDialog commit 12499a9 Author: Boris Kovar <[email protected]> Date: Mon Dec 16 09:47:05 2024 +0100 -small fix commit cbf95f1 Merge: 5bd7756 900d851 Author: Boris Kovar <[email protected]> Date: Thu Dec 12 13:34:14 2024 +0100 Merge branch '#1563-LHS-search' of https://github.com/m2ms/fragalysis-frontend into #1563-LHS-search commit 5bd7756 Author: Boris Kovar <[email protected]> Date: Thu Dec 12 13:30:00 2024 +0100 - search aliases commit 3e7540f Author: Boris Kovar <[email protected]> Date: Tue Dec 10 12:12:03 2024 +0100 - checkpoint commit 6631373 Author: Boris Kovar <[email protected]> Date: Fri Dec 6 10:05:51 2024 +0100 - #1563 - all the UI and infrastructure and search by shortcode and compound id is done commit 900d851 Author: Boris Kovar <[email protected]> Date: Thu Dec 12 13:30:00 2024 +0100 - search aliases commit a72f427 Author: Boris Kovar <[email protected]> Date: Tue Dec 10 12:12:03 2024 +0100 - checkpoint commit 4b7d699 Merge: 4579a9d 32c837d Author: Boris Kovar <[email protected]> Date: Tue Dec 10 10:26:34 2024 +0100 Merge branch '#1563-LHS-search' of https://github.com/m2ms/fragalysis-frontend into #1563-LHS-search commit 4579a9d Author: Boris Kovar <[email protected]> Date: Fri Dec 6 10:05:51 2024 +0100 - #1563 - all the UI and infrastructure and search by shortcode and compound id is done commit 32c837d Author: Boris Kovar <[email protected]> Date: Fri Dec 6 10:05:51 2024 +0100 - #1563 - all the UI and infrastructure and search by shortcode and compound id is done * - fixes #1622 and changes defaults for search settings * Squashed commit of the following: commit 021d6f2 Merge: a5fb901 182a10a Author: boriskovar-m2ms <[email protected]> Date: Thu Dec 19 13:49:43 2024 +0100 Merge branch '#1533-direct-links' of https://github.com/m2ms/fragalysis-frontend into #1533-direct-links commit a5fb901 Author: Boris Kovar <[email protected]> Date: Tue Dec 17 16:56:49 2024 +0100 - implements #1533 commit 182a10a Author: Boris Kovar <[email protected]> Date: Tue Dec 17 16:56:49 2024 +0100 - implements #1533 * #1606 pose properties table from tooltip to separate icon --------- Co-authored-by: boriskovar-m2ms <[email protected]>
xchem · Jan 16, 2025 · 9e58751 · 9e58751
1 parent 2beca6b
commit 9e58751
Showing 1 changed file with 118 additions and 40 deletions.
diff --git a/js/components/preview/molecule/observationCmpView/observationCmpView.js b/js/components/preview/molecule/observationCmpView/observationCmpView.js
@@ -4,7 +4,7 @@
 
 import React, { memo, useEffect, useState, useRef, useContext, useCallback, forwardRef } from 'react';
 import { useDispatch, useSelector } from 'react-redux';
-import { Button, Grid, makeStyles, Tooltip, IconButton, Popper, CircularProgress } from '@material-ui/core';
+import { Button, Grid, makeStyles, Tooltip, IconButton, Popper, CircularProgress, Table, TableBody, TableRow, TableCell } from '@material-ui/core';
 import { Panel } from '../../../common';
 import { MyLocation, Warning, Assignment, AssignmentTurnedIn } from '@material-ui/icons';
 import SVGInline from 'react-svg-inline';
@@ -63,6 +63,7 @@ import { getFontColorByBackgroundColor } from '../../../../utils/colors';
 import MoleculeSelectCheckbox from '../moleculeView/moleculeSelectCheckbox';
 import { isAnyObservationTurnedOnForCmp } from '../../../../reducers/selection/selectors';
 import { first } from 'lodash';
+import { ToastContext } from '../../../toast';
 
 const useStyles = makeStyles(theme => ({
   container: {
@@ -381,9 +382,26 @@ const useStyles = makeStyles(theme => ({
     marginRight: 5,
     position: 'right'
   },
-  tooltipRow: {
-    marginTop: 2,
-    marginBottom: 2
+  posePropertiesTableCell: {
+    padding: '4px 8px'
+  },
+  posePropertiesTable: {
+    pointerEvents: 'auto',
+    '& tr > td:nth-of-type(2)': {
+      border: 'none',
+      borderLeft: '1px dashed ' + theme.palette.primary.main
+    },
+    '& tr:hover': {
+      backgroundColor: theme.palette.primary.light
+    }
+  },
+  posePropertiesTableIcon: {
+    padding: 0,
+    color: theme.palette.grey[500]
+  },
+  posePropertiesTableIconActive: {
+    padding: 0,
+    color: theme.palette.grey[700]
   }
 }));
 
@@ -441,6 +459,7 @@ const ObservationCmpView = memo(
 
       const [hasMap, setHasMap] = useState(false);
 
+      const { toastInfo } = useContext(ToastContext);
       const { getNglView } = useContext(NglContext);
       const stage = getNglView(VIEWS.MAJOR_VIEW) && getNglView(VIEWS.MAJOR_VIEW).stage;
 
@@ -1316,26 +1335,62 @@ const ObservationCmpView = memo(
         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}`}</>;
-              }
-            }
-          })}
-        </>;
+      const copyToClipboard = useCallback(async (type, text) => {
+        await navigator.clipboard.writeText(text);
+        toastInfo(`${text} of '${type}' was copied to the clipboard`, { autoHideDuration: 5000 });
+      }, [toastInfo]);
 
-        return tooltip;
-      }, [aliasOrder, getMainObservation, classes.tooltipRow]);
+      const [anchorElTable, setAnchorElTable] = useState(null);
+      const [tableIsOpen, setTableIsOpen] = useState(false);
+      const handleTablePopoverOpen = (event) => {
+        setAnchorElTable(event.currentTarget);
+      };
+      const handleTablePopoverClose = () => {
+        setAnchorElTable(null);
+        setTableIsOpen(false);
+      };
+      const popoverOpen = Boolean(anchorElTable) || tableIsOpen;
+
+      const getPosePropertiesTable = useCallback(() => {
+        const mainObservation = getMainObservation();
+        const observationCode = getMainObservation()?.code.replaceAll(`${target_on_name}-`, '');
+
+        return <Table className={classes.posePropertiesTable}
+          onMouseLeave={() => setTableIsOpen(false)}
+          onMouseEnter={() => setTableIsOpen(true)}>
+          <TableBody>
+            <Tooltip title={'Click to copy value of smiles'}>
+              <TableRow onClick={() => copyToClipboard('smiles', data.smiles)}>
+                <TableCell className={classes.posePropertiesTableCell}>copy smiles</TableCell>
+                <TableCell className={classes.posePropertiesTableCell}>{data.smiles}</TableCell>
+              </TableRow>
+            </Tooltip>
+            <Tooltip title={'Click to copy value of observation code'}>
+              <TableRow onClick={() => copyToClipboard('smiles', observationCode)}>
+                <TableCell className={classes.posePropertiesTableCell}>copy observation code</TableCell>
+                <TableCell className={classes.posePropertiesTableCell}>{observationCode}</TableCell>
+              </TableRow>
+            </Tooltip>
+            <Tooltip title={'Click to copy value of prefix_tooltip'}>
+              <TableRow onClick={() => copyToClipboard('prefix_tooltip', mainObservation?.prefix_tooltip)}>
+                <TableCell className={classes.posePropertiesTableCell}>copy prefix_tooltip</TableCell>
+                <TableCell className={classes.posePropertiesTableCell}>{mainObservation?.prefix_tooltip ?? ''}</TableCell>
+              </TableRow>
+            </Tooltip>
+            {aliasOrder?.map((alias, index) => {
+              const compoundCode = mainObservation.identifiers.find(identifier => identifier.type === alias)?.name ?? '';
+              return <Tooltip key={index} title={`Click to copy value of ${alias}`}>
+                <TableRow onClick={() => copyToClipboard(alias, alias === 'compound_code' ? mainObservation?.compound_code : compoundCode)}>
+                  <TableCell className={classes.posePropertiesTableCell}>{`copy ${alias}`}</TableCell>
+                  {(alias === 'compound_code') ?
+                    <TableCell className={classes.posePropertiesTableCell}>{`${mainObservation?.compound_code}`}</TableCell>
+                    : <TableCell className={classes.posePropertiesTableCell}>{`${compoundCode}`}</TableCell>}
+                </TableRow>
+              </Tooltip>;
+            })}
+          </TableBody>
+        </Table>;
+      }, [aliasOrder, copyToClipboard, data.smiles, getMainObservation, classes.posePropertiesTable, classes.posePropertiesTableCell, target_on_name]);
 
       return (
         <>
@@ -1387,22 +1442,45 @@ const ObservationCmpView = memo(
             </Grid>
             <Grid item container className={classes.detailsCol} justifyContent="space-evenly" direction="column" xs={2}>
               {/* Title label */}
-              <Tooltip title={getDisplayNameTooltip()} placement="bottom-start">
-                <Grid
-                  item
-                  onCopy={e => {
-                    e.preventDefault();
-                    setNameCopied(moleculeTitle);
-                  }}
-                  className={classes.moleculeTitleLabel}
+              <Grid
+                item
+                onCopy={e => {
+                  e.preventDefault();
+                  setNameCopied(moleculeTitle);
+                }}
+                className={classes.moleculeTitleLabel}
+              >
+                <span className={classes.moleculeTitleLabelMain}>
+                  {getMainObservation()?.code.replaceAll(`${target_on_name}-`, '')}
+                </span>
+                <br />
+                {getDisplayName()}
+                <IconButton className={popoverOpen ? classes.posePropertiesTableIconActive : classes.posePropertiesTableIcon}
+                  onMouseEnter={handleTablePopoverOpen}
+                  onMouseLeave={() => setAnchorElTable(null)}
+                  ref={anchorElTable}
                 >
-                  <span className={classes.moleculeTitleLabelMain}>
-                    {getMainObservation()?.code.replaceAll(`${target_on_name}-`, '')}
-                  </span>
-                  <br />
-                  {getDisplayName()}
-                </Grid>
-              </Tooltip>
+                  <Assignment />
+                  <Popover
+                    id="mouse-over-popover"
+                    style={{ pointerEvents: 'none' }}
+                    open={popoverOpen}
+                    anchorEl={anchorElTable}
+                    anchorOrigin={{
+                      vertical: 'center',
+                      horizontal: 'right'
+                    }}
+                    transformOrigin={{
+                      vertical: 'center',
+                      horizontal: 'left'
+                    }}
+                    onClose={handleTablePopoverClose}
+                    disableRestoreFocus
+                  >
+                    {getPosePropertiesTable()}
+                  </Popover>
+                </IconButton>
+              </Grid>
               {/* "Filtered"/calculated props
             <Grid item>
               <Grid
@@ -1650,13 +1728,13 @@ const ObservationCmpView = memo(
             >
               {svg_image}
               <div className={classes.imageActions}>
-                {moleculeTooltipOpen && (
+                {/* {moleculeTooltipOpen && (
                   <Tooltip title={!isCopied ? 'Copy smiles' : 'Copied'}>
                     <IconButton className={classes.copyIcon} onClick={setCopied}>
                       {!isCopied ? <Assignment /> : <AssignmentTurnedIn />}
                     </IconButton>
                   </Tooltip>
-                )}
+                )} */}
                 {warningIconVisible && (
                   <Tooltip title="Warning">
                     <IconButton className={classes.warningIcon} onClick={() => onQuality()}>