Improvements in the `AotF` GQL Playground Component

[carcruz]

Current Implementation: The current API AotF Playground feature is built-in each specific entity associations page (Target - Disease), this makes difficult to keep consistency between both components and is a scalability blocker. It may generate unnecessary re-renders because of the call of the useAotfContext hook in a high-level component.

Expected Implementation: A component ( <AotfApiPlayground /> ) that takes advantage of the useAoffContex hook consuming the query and building the variables parameter of the APIPlayGround component in its context.

This will facilitate the Disease/Target Associations page to be written in a clearer way:

/* DISEASE ASSOCIATION  */
function DiseaseAssociations({ efoId }) {
  return (
    <AssociationsProvider id={efoId} entity={ENTITIES.DISEASE} query={DISEASE_ASSOCIATIONS_QUERY}>
      <ControlsSection>
        <Box sx={{ display: "flex", flexWrap: "wrap" }}>
          <SearhInput />
          <OptionsControlls>
            <AdvanceOptionsMenu />
            <PrivateWrapper>
              <DataUploader />
            </PrivateWrapper>
            <Divider orientation="vertical" />
            <DataDownloader fileStem={`OT-${efoId}-associated-targets`} />
            {/* This is the component to be created */}
            <AotfApiPlayground/>
          </OptionsControlls>
        </Box>
        <Box>
          <TargetPrioritisationSwitch />
        </Box>
      </ControlsSection>
      <TableAssociations />
    </AssociationsProvider>
  );
}

[prashantuniyal02]

released in 24.06