Explore changes to driver used in Rewrite project

[andrewhercules]

Based on conversation with @javfg and @d0choa, we should explore updating the driver used on the disease profile page as it has a number of technical use cases:

• Server-side pagination table (Known Drugs)
• Third-party API call (LINK)
• Loading static file (Ontology)
• Simple GraphQL API call (Phenotypes)

[andrewhercules]

Also tagging @forus because part of this work can address the need to ensure customisations are flexible and easy to implement

[javfg]

@fedde-s @forus I've put together a quick guide to help you with the changes I've made so far. This is related to the sections using platform-api. It should help you in case you port any sections to get familiarized with the new structure.

---

Updating platform-api sections

Structure changes

Sections have 4 base files now:

• index.js: Contains the definition and exports the summary and body of the section. Comes from the old index.js file in current sections.

• Summary.js: Summary component. Comes from the old Summary.js file.

• Body.js: Body of the section. Comes from the old Section.js file.

• Description.js: Summary description shown in the body header. Comes from the old Section.js file.

index.js

Must contain a definition object with id, name, shortName (optional) and hasData fields. The last one describes how to know if the section has any data or is empty and its body should not render.

Example:

export const definition = {
  id: 'relatedDiseases',
  name: 'Related Diseases or Phenotypes',
  shortName: 'RD',
  hasData: (data) => data.relatedDiseases.count > 0,
};

export { default as Summary } from './Summary';
export { default as Body } from './Body';

Summary.js
The main differences with the old version are:

1. There must be a fragment fetching the data required for display. That fragment should be added as a field to the component after. Inside the component, the data from the fragment can be accessed by using the usePlatformApi hook. This will return a { loading, error, data } object just like Apollo's useQuery.

2. The return value should be a <SummaryItem> component. It should have definition, request, and renderSummary props.

   • definition comes from index.js.
   • request is an object including { loading, eror, data } fields.
   • renderSummary is a function from request's data to a React Component. It renders the content of the summary.

---

Note: The fragment can be loaded from a .gql file.

---

Example:

const SUMMARY_FRAGMENT = gql`
  fragment RelatedDiseasesFragment on Disease {
    relatedDiseases {
      count
    }
  }
`;

function Summary({ definition }) {
  const request = usePlatformApi(SUMMARY_FRAGMENT);

  return (
    <SummaryItem
      definition={definition}
      request={request}
      renderSummary={(data) => (
        <>
          {data.relatedDiseases.count} diseases
          <br />
          (through shared targets)
        </>
      )}
    />
  );
}

Summary.fragments = {
  RelatedDiseasesFragment: SUMMARY_FRAGMENT,
};

export default Summary;

Description.js

This file does not have any changes.

Body.js

The only change in the body file with respect to the old Section.js, is the same as number 2 in Summary.js: The return value should be wrapped in a <SectionItem> component.

It should have definition, request, and renderDescription and renderBody props.

• definition comes from index.js.
• request is an object including { loading, eror, data } fields.
• renderDescription is a function from request's data to a React Component. It renders the content of the description (usually Description.js, but it could just be here).
• renderBody is a function from request's data to a React Component. It renders the content of the section's body.

---

Note: If the component uses the same data for the summary and body, we can use usePlatformApi here again, and save a request to the API.

---