Merge branch 'main' into ot-variant-page

opentargets · Jun 27, 2024 · bf8af85 · bf8af85
2 parents 818042a + 4a4b1cf
commit bf8af85
Show file tree

Hide file tree

Showing 52 changed files with 1,007 additions and 580 deletions.
diff --git a/apps/platform/src/components/AssociationsToolkit/Table/ColoredCell.jsx b/apps/platform/src/components/AssociationsToolkit/Table/ColoredCell.jsx
diff --git a/...ssociationsToolkit/AdvanceOptionsMenu.jsx → ...Toolkit/components/AdvanceOptionsMenu.jsx b/...ssociationsToolkit/AdvanceOptionsMenu.jsx → ...Toolkit/components/AdvanceOptionsMenu.jsx
@@ -5,7 +5,7 @@ import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 import { styled } from "@mui/material/styles";
 import { Tooltip } from "ui";
 
-import useAotfContext from "./hooks/useAotfContext";
+import useAotfContext from "../hooks/useAotfContext";
 
 const PopoverContent = styled("div")({
   padding: "15px",
@@ -15,8 +15,6 @@ function DataMenu() {
   const [anchorEl, setAnchorEl] = useState(null);
 
   const {
-    enableIndirect,
-    setEnableIndirect,
     activeHeadersControlls,
     setActiveHeadersControlls,
     displayedTable,
@@ -44,6 +42,7 @@ function DataMenu() {
           variant="outlined"
           disableElevation
           disabled={isPrioritisation}
+          sx={{ height: 1, maxHeight: "45px" }}
         >
           <FontAwesomeIcon icon={faGear} size="lg" />
         </Button>

diff --git a/...AssociationsToolkit/AotfApiPlayground.tsx → ...sToolkit/components/AotfApiPlayground.tsx b/...AssociationsToolkit/AotfApiPlayground.tsx → ...sToolkit/components/AotfApiPlayground.tsx
@@ -1,5 +1,5 @@
 import { ApiPlaygroundDrawer } from "ui";
-import useAotfContext from "./hooks/useAotfContext";
+import useAotfContext from "../hooks/useAotfContext";
 
 function AotfApiPlayground() {
   const {
@@ -28,6 +28,8 @@ function AotfApiPlayground() {
     aggregationFilters,
   };
 
-  return <ApiPlaygroundDrawer query={query.loc.source.body} variables={variables} />;
+  return (
+    <ApiPlaygroundDrawer fullHeight={true} query={query.loc.source.body} variables={variables} />
+  );
 }
 export default AotfApiPlayground;
diff --git a/...nts/AssociationsToolkit/CopyUrlButton.jsx → ...tionsToolkit/components/CopyUrlButton.jsx b/...nts/AssociationsToolkit/CopyUrlButton.jsx → ...tionsToolkit/components/CopyUrlButton.jsx
diff --git a/...ts/AssociationsToolkit/DataDownloader.jsx → ...ionsToolkit/components/DataDownloader.jsx b/...ts/AssociationsToolkit/DataDownloader.jsx → ...ionsToolkit/components/DataDownloader.jsx
@@ -30,18 +30,18 @@ import { makeStyles } from "@mui/styles";
 import { faCaretDown, faCloudArrowDown } from "@fortawesome/free-solid-svg-icons";
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 import { Tooltip, useConfigContext } from "ui";
-import useBatchDownloader from "./hooks/useBatchDownloader";
-import useAotfContext from "./hooks/useAotfContext";
-import OriginalDataSources from "./static_datasets/dataSourcesAssoc";
-import prioritizationCols from "./static_datasets/prioritisationColumns";
+import useBatchDownloader from "../hooks/useBatchDownloader";
+import useAotfContext from "../hooks/useAotfContext";
+import OriginalDataSources from "../static_datasets/dataSourcesAssoc";
+import prioritizationCols from "../static_datasets/prioritisationColumns";
 import {
   getRowsQuerySelector,
   getExportedColumns,
   getExportedPrioritisationColumns,
   createBlob,
   getFilteredColumnArray,
-} from "./utils/downloads";
-import config from "../../config";
+} from "../utils/downloads";
+import config from "../../../config";
 import CopyUrlButton from "./CopyUrlButton";
 
 const { isPartnerPreview } = config.profile;
@@ -282,6 +282,7 @@ function DataDownloader() {
           onClick={handleClickBTN}
           variant="outlined"
           disableElevation
+          sx={{ height: 1, maxHeight: "45px" }}
         >
           <FontAwesomeIcon icon={faCloudArrowDown} size="lg" />
         </Button>

diff --git a/...ionsToolkit/DataUploader/DataUploader.jsx → .../components/DataUploader/DataUploader.jsx b/...ionsToolkit/DataUploader/DataUploader.jsx → .../components/DataUploader/DataUploader.jsx
@@ -36,9 +36,9 @@ import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 import { Link, Tooltip } from "ui";
 import * as XLSX from "xlsx";
 
-import useAotfContext from "../hooks/useAotfContext";
+import useAotfContext from "../../hooks/useAotfContext";
 import ValidationQuery from "./ValidationQuery.gql";
-import client from "../../../client";
+import client from "../../../../client";
 import NestedItem from "./NestedItem";
 
 const BorderAccordion = styled(Accordion)(({ theme }) => ({
@@ -245,7 +245,7 @@ const FileExample = ({ entity = "target", runAction }) => {
   );
 };
 
-function DataUploader({ fileStem }) {
+function DataUploader() {
   const [activeStep, setActiveStep] = useState(0);
   const [queryTermsResults, setQueryTermsResults] = useState(null);
   const { entityToGet, pinnedEntries, setPinnedEntries } = useAotfContext();
@@ -407,6 +407,7 @@ function DataUploader({ fileStem }) {
           onClick={handleClickBTN}
           variant="outlined"
           disableElevation
+          sx={{ height: 1, maxHeight: "45px" }}
         >
           <FontAwesomeIcon icon={faFileImport} size="lg" />
         </Button>

diff --git a/...ationsToolkit/DataUploader/NestedItem.jsx → ...it/components/DataUploader/NestedItem.jsx b/...ationsToolkit/DataUploader/NestedItem.jsx → ...it/components/DataUploader/NestedItem.jsx
diff --git a/...sToolkit/DataUploader/ValidationQuery.gql → ...mponents/DataUploader/ValidationQuery.gql b/...sToolkit/DataUploader/ValidationQuery.gql → ...mponents/DataUploader/ValidationQuery.gql
diff --git a/...AssociationsToolkit/DataUploader/index.js → ...sToolkit/components/DataUploader/index.js b/...AssociationsToolkit/DataUploader/index.js → ...sToolkit/components/DataUploader/index.js
diff --git a/...Toolkit/HeaderControls/HeaderControls.jsx → ...ponents/HeaderControls/HeaderControls.jsx b/...Toolkit/HeaderControls/HeaderControls.jsx → ...ponents/HeaderControls/HeaderControls.jsx
@@ -3,13 +3,13 @@ import { faXmark } from "@fortawesome/free-solid-svg-icons";
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 
 import { styled } from "@mui/material/styles";
-import dataSources from "../static_datasets/dataSourcesAssoc";
+import dataSources from "../../static_datasets/dataSourcesAssoc";
 
 import Slider from "./SliderControl";
 import Required from "./RequiredControl";
 import { GridContainer } from "../layout";
 
-import useAotfContext from "../hooks/useAotfContext";
+import useAotfContext from "../../hooks/useAotfContext";
 
 const CloseContainer = styled("div")({
   position: "absolute",

diff --git a/...oolkit/HeaderControls/RequiredControl.jsx → ...onents/HeaderControls/RequiredControl.jsx b/...oolkit/HeaderControls/RequiredControl.jsx → ...onents/HeaderControls/RequiredControl.jsx
@@ -1,8 +1,8 @@
 import { useState, useEffect } from "react";
 import { Checkbox } from "@mui/material";
 import { styled } from "@mui/material/styles";
-import useAotfContext from "../hooks/useAotfContext";
-import { checkBoxPayload, getControlChecked } from "../utils";
+import useAotfContext from "../../hooks/useAotfContext";
+import { checkBoxPayload, getControlChecked } from "../../utils";
 
 const OTCheckbox = styled(Checkbox)`
   padding: 0;

diff --git a/...sToolkit/HeaderControls/SliderControl.jsx → ...mponents/HeaderControls/SliderControl.jsx b/...sToolkit/HeaderControls/SliderControl.jsx → ...mponents/HeaderControls/SliderControl.jsx
@@ -2,8 +2,8 @@ import { useState, useEffect } from "react";
 import { Slider } from "@mui/material";
 import { styled } from "@mui/material/styles";
 
-import useAotfContext from "../hooks/useAotfContext";
-import { getWightSourceDefault } from "../utils";
+import useAotfContext from "../../hooks/useAotfContext";
+import { getWightSourceDefault } from "../../utils";
 
 const OTSlider = styled(Slider)({
   root: {

diff --git a/...sociationsToolkit/HeaderControls/index.ts → ...oolkit/components/HeaderControls/index.ts b/...sociationsToolkit/HeaderControls/index.ts → ...oolkit/components/HeaderControls/index.ts
diff --git a/...nents/AssociationsToolkit/SearchInput.jsx → ...iationsToolkit/components/SearchInput.jsx b/...nents/AssociationsToolkit/SearchInput.jsx → ...iationsToolkit/components/SearchInput.jsx
@@ -4,7 +4,7 @@ import { styled } from "@mui/material/styles";
 import { faXmark, faMagnifyingGlass } from "@fortawesome/free-solid-svg-icons";
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 import { useDebounce } from "ui";
-import useAotfContext from "./hooks/useAotfContext";
+import useAotfContext from "../hooks/useAotfContext";
 
 const InputContainer = styled(Grid)({
   marginRight: "15px",

diff --git a/...ciationsToolkit/Table/AggregationsRow.jsx → ...lkit/components/Table/AggregationsRow.jsx b/...ciationsToolkit/Table/AggregationsRow.jsx → ...lkit/components/Table/AggregationsRow.jsx
@@ -2,9 +2,9 @@ import { useState } from "react";
 import { styled, Grid } from "@mui/material";
 
 import AggregationsTooltip from "./AssocTooltip";
-import associationsColumns from "../static_datasets/dataSourcesAssoc";
-import prioritizationColumns from "../static_datasets/prioritisationColumns";
-import { groupViewColumnsBy } from "../utils";
+import associationsColumns from "../../static_datasets/dataSourcesAssoc";
+import prioritizationColumns from "../../static_datasets/prioritisationColumns";
+import { groupViewColumnsBy } from "../../utils";
 import { GridContainer } from "../layout";
 
 const AggregationsContainer = styled(GridContainer)({

diff --git a/...ssociationsToolkit/Table/AssocTooltip.jsx → ...Toolkit/components/Table/AssocTooltip.jsx b/...ssociationsToolkit/Table/AssocTooltip.jsx → ...Toolkit/components/Table/AssocTooltip.jsx
diff --git a/...ts/AssociationsToolkit/Table/CellName.jsx → ...ionsToolkit/components/Table/CellName.jsx b/...ts/AssociationsToolkit/Table/CellName.jsx → ...ionsToolkit/components/Table/CellName.jsx
@@ -10,6 +10,7 @@ import {
   Popover,
   Box,
   Fade,
+  Skeleton,
 } from "@mui/material";
 import {
   faThumbTack,
@@ -20,8 +21,8 @@ import {
 } from "@fortawesome/free-solid-svg-icons";
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 import { useHistory } from "react-router-dom";
-import useAotfContext from "../hooks/useAotfContext";
-import { ENTITIES } from "../utils";
+import useAotfContext from "../../hooks/useAotfContext";
+import { ENTITIES } from "../../utils";
 import { grey } from "@mui/material/colors";
 
 const StyledMenuItem = styled(MenuItem)({
@@ -73,7 +74,13 @@ const ContextMenuContainer = styled("div", {
 function CellName({ cell, colorScale }) {
   const history = useHistory();
   const contextMenuRef = useRef();
-  const { entityToGet, pinnedEntries, setPinnedEntries, id: currentEntityId } = useAotfContext();
+  const {
+    entityToGet,
+    pinnedEntries,
+    setPinnedEntries,
+    id: currentEntityId,
+    handleSetInteractors,
+  } = useAotfContext();
   const { loading } = cell.table.getState();
   const name = cell.getValue();
   const { id } = cell.row;
@@ -119,7 +126,11 @@ function CellName({ cell, colorScale }) {
     history.push(evidenceURL);
   };
 
-  if (loading) return null;
+  const loadingWidth = entityToGet === ENTITIES.TARGET ? 50 : 150;
+  const loadingMargin = entityToGet === ENTITIES.TARGET ? 12 : 2;
+
+  if (loading)
+    return <Skeleton width={loadingWidth} height={35} sx={{ marginLeft: loadingMargin }} />;
 
   return (
     <NameContainer>
@@ -174,14 +185,16 @@ function CellName({ cell, colorScale }) {
               <ListItemText>Unpin {entityToGet}</ListItemText>
             </StyledMenuItem>
           )}
+          {entityToGet === ENTITIES.TARGET && <Divider />}
           {entityToGet === ENTITIES.TARGET && (
             <StyledMenuItem disabled>
               <ListItemIcon>
                 <FontAwesomeIcon icon={faBezierCurve} />
               </ListItemIcon>
-              <ListItemText>Target network associations</ListItemText>
+              <ListItemText>Target interactors</ListItemText>
             </StyledMenuItem>
           )}
+
           <Divider />
           <StyledMenuItem onClick={handleNavigateToEvidence}>
             <ListItemIcon>

diff --git a/...sociationsToolkit/Table/SectionRender.jsx → ...oolkit/components/Table/SectionRender.jsx b/...sociationsToolkit/Table/SectionRender.jsx → ...oolkit/components/Table/SectionRender.jsx
@@ -1,10 +1,10 @@
 import { Suspense } from "react";
 import { styled } from "@mui/material/styles";
 import { LoadingBackdrop } from "ui";
-import { ENTITIES } from "../utils";
+import { ENTITIES } from "../../utils";
 
-import targetSections from "../../../sections/targetSections";
-import evidenceSections from "../../../sections/evidenceSections";
+import targetSections from "../../../../sections/targetSections";
+import evidenceSections from "../../../../sections/evidenceSections";
 
 const LoadingContainer = styled("div")({
   margin: "25px 0",