{"size": 2836, "ext": "js", "max_stars_repo_path": "src/sections/drug/MechanismsOfAction/Body.js", "max_stars_repo_name": "opentargets/platform-app", "max_stars_repo_stars_event_min_datetime": "2019-07-29T17:57:10.000Z", "max_stars_repo_stars_event_max_datetime": "2022-03-27T02:05:41.000Z", "max_issues_repo_path": "src/sections/drug/MechanismsOfAction/Body.js", "max_issues_repo_name": "vidhyanijadala/platform-app", "max_issues_repo_issues_event_min_datetime": "2019-02-22T15:27:13.000Z", "max_issues_repo_issues_event_max_datetime": "2022-03-28T11:55:54.000Z", "max_forks_repo_path": "src/sections/drug/MechanismsOfAction/Body.js", "max_forks_repo_name": "opentargets/platform-app", "max_forks_repo_forks_event_min_datetime": "2020-04-22T13:00:36.000Z", "max_forks_repo_forks_event_max_datetime": "2022-01-30T18:32:54.000Z"}
{"max_stars_count": 82, "max_issues_count": 154, "max_forks_count": 21, "avg_line_length": 26.5046728972, "max_line_length": 80, "alphanum_fraction": 0.5500705219}
import React, { Fragment } from 'react';
import { useQuery } from '@apollo/client';
import { loader } from 'graphql.macro';

import Link from '../../../components/Link';
import SectionItem from '../../../components/Section/SectionItem';
import usePlatformApi from '../../../hooks/usePlatformApi';
import { DataTable, TableDrawer } from '../../../components/Table';
import Summary from './Summary';
import Description from './Description';

const MECHANISMS_OF_ACTION_QUERY = loader('./MechanismsOfActionQuery.gql');

const columns = [
  {
    id: 'mechanismOfAction',
    label: 'Mechanism of Action',
  },
  {
    id: 'targetName',
    label: 'Target Name',
  },
  {
    id: 'targets',
    label: 'Human targets',
    filterValue: row =>
      row.targets.map(target => target.approvedSymbol).join(' '),
    exportValue: row => row.targets.map(target => target.approvedSymbol).join(),
    renderCell: ({ targets }) => {
      if (!targets) return 'non-human';

      const targetList = targets.map(target => {
        return {
          name: target.approvedSymbol,
          url: `/target/${target.id}`,
          group: 'Human targets',
        };
      });

      return <TableDrawer entries={targetList} />;
    },
  },
  {
    id: 'references',
    label: 'References',
    filterValue: row =>
      row.references.map(reference => reference.source).join(' '),
    exportValue: row =>
      row.references.map(reference => reference.source).join(),
    renderCell: row =>
      !row.references
        ? 'n/a'
        : row.references.map((r, i) => {
            return (
              <Fragment key={i}>
                {i > 0 ? ', ' : null}
                {r.urls ? (
                  <Link external to={r.urls[0]}>
                    {r.source}
                  </Link>
                ) : (
                  r.source
                )}
              </Fragment>
            );
          }),
  },
];

function Body({ definition, id: chemblId, label: name }) {
  const request = useQuery(MECHANISMS_OF_ACTION_QUERY, {
    variables: { chemblId },
  });
  const { data: summaryData } = usePlatformApi(
    Summary.fragments.MechanismsOfActionSummaryFragment
  );

  return (
    <SectionItem
      definition={definition}
      request={request}
      renderDescription={() => (
        <Description
          name={name}
          parentMolecule={summaryData.parentMolecule}
          childMolecules={summaryData.childMolecules}
        />
      )}
      renderBody={data => {
        const rows = data.drug.mechanismsOfAction.rows;

        return (
          <DataTable
            showGlobalFilter
            columns={columns}
            rows={rows}
            dataDownloader
            dataDownloaderFileStem={`${chemblId}-mechanisms-of-action`}
          />
        );
      }}
    />
  );
}

export default Body;
