[Platform]: Moving aotf playground to another component

apps/platform/src/components/AssociationsToolkit/AotfApiPlayground.tsx

@@ -0,0 +1,33 @@
+import { ApiPlaygroundDrawer } from "ui";
+import useAotfContext from "./hooks/useAotfContext";
+
+function AotfApiPlayground() {
+  const {
+    id,
+    pagination,
+    searhFilter,
+    sorting,
+    enableIndirect,
+    dataSourcesWeights,
+    entity,
+    dataSourcesRequired,
+    query,
+  } = useAotfContext();
+
+  const aggregationFilters = dataSourcesRequired.map(({ id, ...obj }) => ({ ...obj }));
+
+  const variables = {
+    id,
+    index: pagination.pageIndex,
+    size: pagination.pageSize,
+    filter: searhFilter,
+    sortBy: sorting[0].id,
+    enableIndirect,
+    datasources: dataSourcesWeights,
+    entity,
+    aggregationFilters,
+  };
+
+  return <ApiPlaygroundDrawer query={query.loc.source.body} variables={variables} />;
+}
+export default AotfApiPlayground;

apps/platform/src/components/AssociationsToolkit/DataDownloader.jsx

@@ -148,7 +148,7 @@ const actions = {
   }),
 };
 
-function DataDownloader({ fileStem }) {
+function DataDownloader() {
   const [state, dispatch] = useReducer(reducer, initialState);
   const { version } = useConfigContext();
   const classes = styles();
@@ -166,6 +166,7 @@ function DataDownloader({ fileStem }) {
     dataSourcesWeights,
     dataSourcesRequired,
   } = useAotfContext();
+  const fileStem = `OT-${id}-associated-${entityToGet}s`;
   const [onlyPinnedCheckBox, setOnlyPinnedCheckBox] = useState(false);
   const [weightControlCheckBox, setWeightControlCheckBox] = useState(modifiedSourcesDataControls);
   const [onlyTargetData, setOnlyTargetData] = useState(false);

apps/platform/src/components/AssociationsToolkit/index.js

@@ -4,6 +4,7 @@ export { default as TargetPrioritisationSwitch } from "./TargetPrioritisationSwi
 export { default as SearhInput } from "./SearchInput";
 export { default as DataDownloader } from "./DataDownloader";
 export { default as DataUploader } from "./DataUploader/DataUploader";
+export { default as AotfApiPlayground } from "./AotfApiPlayground";
 export {
   default as AssociationsContext,
   AssociationsStateProvider as AssociationsProvider,

apps/platform/src/pages/DiseasePage/DiseaseAssociations/DiseaseAssociations.jsx

@@ -12,36 +12,12 @@ import {
   OptionsControlls,
   AotFLoader,
   DataUploader,
+  AotfApiPlayground,
 } from "../../../components/AssociationsToolkit";
 import DISEASE_ASSOCIATIONS_QUERY from "./DiseaseAssociationsQuery.gql";
-import { ApiPlaygroundDrawer } from "ui";
 
 function AssociationsWrapper() {
-  const {
-    initialLoading,
-    id,
-    pagination,
-    searhFilter,
-    sorting,
-    enableIndirect,
-    dataSourcesWeights,
-    entity,
-    dataSourcesRequired,
-  } = useAotfContext();
-
-  const aggregationFilters = dataSourcesRequired.map(({ id, ...obj }) => ({ ...obj }));
-
-  const variables = {
-    id,
-    index: pagination.pageIndex,
-    size: pagination.pageSize,
-    filter: searhFilter,
-    sortBy: sorting[0].id,
-    enableIndirect,
-    datasources: dataSourcesWeights,
-    entity,
-    aggregationFilters,
-  };
+  const { initialLoading, id } = useAotfContext();
 
   if (initialLoading) return <AotFLoader />;
 
@@ -56,11 +32,8 @@ function AssociationsWrapper() {
               <DataUploader />
             </PrivateWrapper>
             <Divider orientation="vertical" />
-            <DataDownloader fileStem={`OT-${id}-associated-targets`} />
-            <ApiPlaygroundDrawer
-              query={DISEASE_ASSOCIATIONS_QUERY.loc.source.body}
-              variables={variables}
-            />
+            <DataDownloader />
+            <AotfApiPlayground />
           </OptionsControlls>
         </Box>
         <Box>

apps/platform/src/pages/TargetPage/TargetAssociations/TargetAssociations.jsx

@@ -12,36 +12,12 @@ import {
   OptionsControlls,
   AotFLoader,
   DataUploader,
+  AotfApiPlayground,
 } from "../../../components/AssociationsToolkit";
 import TARGET_ASSOCIATIONS_QUERY from "./TargetAssociationsQuery.gql";
-import { ApiPlaygroundDrawer } from "ui";
 
 function AssociationsWrapper() {
-  const {
-    initialLoading,
-    id,
-    pagination,
-    searhFilter,
-    sorting,
-    enableIndirect,
-    dataSourcesWeights,
-    entity,
-    dataSourcesRequired,
-  } = useContext(AssociationsContext);
-
-  const aggregationFilters = dataSourcesRequired.map(({ id, ...obj }) => ({ ...obj }));
-
-  const variables = {
-    id,
-    index: pagination.pageIndex,
-    size: pagination.pageSize,
-    filter: searhFilter,
-    sortBy: sorting[0].id,
-    enableIndirect,
-    datasources: dataSourcesWeights,
-    entity,
-    aggregationFilters,
-  };
+  const { initialLoading, id } = useContext(AssociationsContext);
 
   if (initialLoading) return <AotFLoader />;
 
@@ -56,11 +32,8 @@ function AssociationsWrapper() {
               <DataUploader />
             </PrivateWrapper>
             <Divider orientation="vertical" />
-            <DataDownloader fileStem={`OT-${id}-associated-diseases`} />
-            <ApiPlaygroundDrawer
-              query={TARGET_ASSOCIATIONS_QUERY.loc.source.body}
-              variables={variables}
-            />
+            <DataDownloader />
+            <AotfApiPlayground />
           </OptionsControlls>
         </Box>
         <Box></Box>