[Platofrm]: Associations focus state (#418)

apps/platform/src/components/AssociationsToolkit/components/Table/CellName.jsx

@@ -24,6 +24,10 @@ import { useHistory } from "react-router-dom";
 import useAotfContext from "../../hooks/useAotfContext";
 import { ENTITIES } from "../../utils";
 import { grey } from "@mui/material/colors";
+import {
+  FocusActionType,
+  useAssociationsFocusDispatch,
+} from "../../context/AssociationsFocusContext";
 
 const StyledMenuItem = styled(MenuItem)({
   "&>.MuiListItemIcon-root>svg": {
@@ -62,10 +66,18 @@ const TextContainer = styled("div")({
 
 const ContextMenuContainer = styled("div", {
   shouldForwardProp: prop => prop !== "active",
-})(({ active }) => ({
+})(({ active, theme }) => ({
   opacity: active ? "1" : "0",
   cursor: "pointer",
-  borderRadius: 1,
+  borderRadius: 5,
+  transition: "all 100ms ease",
+  display: "flex",
+  justifyContent: "center",
+  alignItems: "center",
+  padding: "3px 0",
+  width: "12px",
+  marginLeft: theme.spacing(1),
+  background: active ? grey[200] : grey[300],
   "&:hover": {
     backgroundColor: grey[200],
   },
@@ -74,19 +86,14 @@ const ContextMenuContainer = styled("div", {
 function CellName({ cell, colorScale }) {
   const history = useHistory();
   const contextMenuRef = useRef();
-  const {
-    entityToGet,
-    pinnedEntries,
-    setPinnedEntries,
-    id: currentEntityId,
-    handleSetInteractors,
-  } = useAotfContext();
-  const { loading } = cell.table.getState();
+  const { entityToGet, pinnedEntries, setPinnedEntries, id: currentEntityId } = useAotfContext();
+  const { loading, prefix } = cell.table.getState();
   const name = cell.getValue();
   const { id } = cell.row;
   const { score } = cell.row.original;
   const scoreIndicatorColor = colorScale(score);
   const [openContext, setOpenContext] = useState(false);
+  const dispatch = useAssociationsFocusDispatch();
 
   const isPinned = pinnedEntries.find(e => e === id);
   const profileURL = `/${entityToGet}/${id}`;
@@ -99,19 +106,59 @@ function CellName({ cell, colorScale }) {
 
   const handleClose = () => {
     setOpenContext(false);
+    dispatch({
+      type: FocusActionType.CLEAR_FOCUS_CONTEXT_MENU,
+      focus: {
+        table: prefix,
+        row: cell.row.id,
+      },
+    });
   };
 
   const handleToggle = () => {
     setOpenContext(true);
+    dispatch({
+      type: FocusActionType.SET_FOCUS_CONTEXT_MENU,
+      focus: {
+        table: prefix,
+        row: cell.row.id,
+      },
+    });
+  };
+
+  const handleClickInteractors = () => {
+    dispatch({
+      type: FocusActionType.SET_INTERACTORS_ON,
+      focus: {
+        table: prefix,
+        row: cell.row.id,
+      },
+    });
+    setOpenContext(false);
   };
 
   const handleClickPin = () => {
     if (isPinned) {
       const newPinnedData = pinnedEntries.filter(e => e !== id);
       setPinnedEntries(newPinnedData);
+      dispatch({
+        type: FocusActionType.CLEAR_FOCUS_CONTEXT_MENU,
+        focus: {
+          table: prefix,
+          row: cell.row.id,
+        },
+      });
     } else {
       setPinnedEntries([...pinnedEntries, id]);
+      dispatch({
+        type: FocusActionType.CLEAR_FOCUS_CONTEXT_MENU,
+        focus: {
+          table: prefix,
+          row: cell.row.id,
+        },
+      });
     }
+    setOpenContext(false);
   };
 
   const handleNavigateToProfile = () => {
@@ -152,14 +199,14 @@ function CellName({ cell, colorScale }) {
         open={openContext}
         anchorEl={contextMenuRef.current}
         onClose={handleClose}
-        disableScrollLock
         anchorOrigin={{
           vertical: "top",
           horizontal: "right",
         }}
         TransitionComponent={Fade}
         transitionDuration={200}
         elevation={2}
+        disableScrollLock
       >
         <MenuList dense>
           <Box sx={{ paddingX: 2, paddingBottom: 1, display: "flex", alignItems: "center" }}>
@@ -187,7 +234,11 @@ function CellName({ cell, colorScale }) {
           )}
           {entityToGet === ENTITIES.TARGET && <Divider />}
           {entityToGet === ENTITIES.TARGET && (
-            <StyledMenuItem disabled>
+            <StyledMenuItem
+              onClick={() => {
+                handleClickInteractors();
+              }}
+            >
               <ListItemIcon>
                 <FontAwesomeIcon icon={faBezierCurve} />
               </ListItemIcon>

apps/platform/src/components/AssociationsToolkit/components/Table/SectionRender.jsx

@@ -6,6 +6,8 @@ import { ENTITIES } from "../../utils";
 import targetSections from "../../../../sections/targetSections";
 import evidenceSections from "../../../../sections/evidenceSections";
 
+import { grey } from "@mui/material/colors";
+
 const LoadingContainer = styled("div")({
   margin: "25px 0",
   height: "100px",
@@ -15,19 +17,21 @@ const LoadingContainer = styled("div")({
   gap: "20px",
 });
 
-const Container = styled("div")({
-  marginTop: "10px",
-  marginBottom: "40px",
-});
+const Container = styled("div", {
+  shouldForwardProp: prop => prop !== "table",
+})(({ table, theme }) => ({
+  paddingTop: "10px",
+  paddingBottom: "10px",
+  paddingLeft: table === "interactors" ? theme.spacing(9) : theme.spacing(3),
+  background: grey[100],
+}));
 
 function LoadingSection() {
   return (
-    <div>
-      <LoadingContainer>
-        <LoadingBackdrop />
-        Importing section assets
-      </LoadingContainer>
-    </div>
+    <LoadingContainer>
+      <LoadingBackdrop />
+      Importing section assets
+    </LoadingContainer>
   );
 }
 
@@ -38,40 +42,44 @@ function SectionNotFound() {
 export function SectionRender({
   id,
   entity,
-  section,
+  focusElement,
   row,
+  table,
   entityToGet,
-  rowNameEntity,
-  rowId,
+  nameProperty,
   displayedTable,
   cols = [],
-  expanded,
+  section,
 }) {
-  let label = row.original[entityToGet][rowNameEntity];
+  let label = row.original[entityToGet][nameProperty];
   let ensgId;
   let efoId;
   let componentId;
   let Component;
   let entityOfSection = entity;
 
+  if (section === undefined) return <></>;
+
+  // const section = focusElement
+
   const flatCols = cols.map(c => c.id);
-  if (!flatCols.includes(expanded[1])) return null;
+  if (!flatCols.includes(section[0])) return <></>;
 
   switch (displayedTable) {
     case "prioritisations": {
-      Component = targetSections.get(section);
+      Component = targetSections.get(section[1]);
       const { targetSymbol } = row.original;
-      ensgId = entity === ENTITIES.DISEASE ? rowId : id;
+      ensgId = entity === ENTITIES.DISEASE ? row.id : id;
       label = targetSymbol;
       componentId = ensgId;
       entityOfSection = "target";
       break;
     }
     case "associations": {
-      Component = evidenceSections.get(section);
+      Component = evidenceSections.get(section[1]);
       const { diseaseName, targetSymbol } = row.original;
-      ensgId = entity === ENTITIES.DISEASE ? rowId : id;
-      efoId = entity === ENTITIES.DISEASE ? id : rowId;
+      ensgId = entity === ENTITIES.DISEASE ? row.id : id;
+      efoId = entity === ENTITIES.DISEASE ? id : row.id;
       componentId = { ensgId, efoId };
       label = { symbol: targetSymbol, name: diseaseName };
       entityOfSection = "disease";
@@ -83,13 +91,14 @@ export function SectionRender({
 
   if (!Component) return <SectionNotFound />;
 
-  return <Component id={componentId} label={label} entity={entityOfSection} />;
-}
-
-export function SectionRendererWrapper({ children }) {
   return (
-    <Suspense fallback={<LoadingSection />}>
-      <Container>{children}</Container>
-    </Suspense>
+    <Container table={table}>
+      <Component id={componentId} label={label} entity={entityOfSection} />
+    </Container>
   );
 }
+
+export function SectionRendererWrapper({ children, section }) {
+  if (!section) return <></>;
+  return <Suspense fallback={<LoadingSection />}>{children}</Suspense>;
+}