<commit_before>// @flow

import React from "react";
import { compose, withState } from "recompose";
import urlJoin from "url-join";

import Card from "@ncigdc/uikit/Card";
import Tabs from "@ncigdc/uikit/Tabs";
import SideTabs from "@ncigdc/uikit/SideTabs";
import Table, { Tr, Td, Th } from "@ncigdc/uikit/Table";
import { withTheme } from "@ncigdc/theme";
import Row from "@ncigdc/uikit/Flex/Row";
import DownloadButton from "@ncigdc/components/DownloadButton";
import { visualizingButton } from "@ncigdc/theme/mixins";
import EntityPageVerticalTable
  from "@ncigdc/components/EntityPageVerticalTable";

const ClinicalCard = ({
  p: {
    case_id: caseId,
    diagnoses: { hits: { edges: diagnoses = [] } },
    family_histories: familyHistory = [],
    demographic = {},
    exposures: { hits: { edges: exposures = [], total: totalExposures } }
  },
  activeTab,
  setTab,
  theme
}: {
  p: Object,
  activeTab: number,
  setTab: Function,
  theme: Object
}) => (
  <Card
    style={{ flex: 1 }}
    title={
      <Row style={{ justifyContent: "space-between" }}>
        <span>Clinical</span>
        <DownloadButton
          style={visualizingButton}
          filename={`clinical.case-${caseId}`}
          url={urlJoin(process.env.REACT_APP_API, "cases")}
          activeText="Processing"
          inactiveText="Export"
          filters={{
            op: "and",
            content: [
              {
                op: "in",
                content: {
                  field: "cases.case_id",
                  value: [caseId]
                }
              }
            ]
          }}
          fields={["case_id"]}
          dataExportExpands={[
            "demographic",
            "diagnoses",
            "diagnoses.treatments",
            "family_histories",
            "exposures"
          ]}
        />
      </Row>
    }
  >
    <Tabs
      contentStyle={{ border: "none" }}
      onTabClick={i => setTab(() => i)}
      tabs={[
        <p key="Demographic">Demographic</p>,
        <p key="Diagnoses / Treatment">
          Diagnoses / Treatments ({diagnoses.length})
        </p>,
        <p key="Family Histories">Family Histories ({familyHistory.length})</p>,
        <p key="Exposures">Exposures ({totalExposures})</p>
      ]}
      activeIndex={activeTab}
    >
      {activeTab === 0 &&
        <EntityPageVerticalTable
          thToTd={[
            { th: "ID", td: demographic.demographic_id },
            { th: "Ethnicity", td: demographic.ethnicity },
            { th: "Gender", td: demographic.gender },
            { th: "Race", td: demographic.race },
            { th: "Year of Birth", td: demographic.year_of_birth },
            { th: "Year of Death", td: demographic.year_of_death }
          ]}
          style={{ flex: 1 }}
        />}
      {activeTab === 1 &&
        <div>
          {!!diagnoses.length &&
            <SideTabs
              contentStyle={{ border: "none" }}
              tabs={diagnoses.map(x => (
                <p key={x.node.diagnosis_id}>{x.node.diagnosis_id}</p>
              ))}
              tabContent={diagnoses.map(d => d.node).map(x => (
                <span key={x.diagnosis_id}>
                  <EntityPageVerticalTable
                    thToTd={[
                      { th: "ID", td: x.diagnosis_id },
                      {
                        th: "Classification of Tumor",
                        td: x.classification_of_tumor
                      },
                      { th: "Alcohol Intensity", td: x.alcohol_intensity },
                      { th: "Age at Diagnosis", td: x.age_at_diagnosis },
                      { th: "Days to Birth", td: x.days_to_birth },
                      { th: "Days to Death", td: x.days_to_death },
                      {
                        th: "Days to Last Follow Up",
                        td: x.days_to_last_follow_up
                      },
                      {
                        th: "Days to Last Known Disease Status",
                        td: x.days_to_last_known_disease_status<commit_msg>🐛 PRTL-1226 ageDisplay for clinical table: age_of_diagnosis<commit_after>// @flow

import React from "react";
import { compose, withState } from "recompose";
import urlJoin from "url-join";

import Card from "@ncigdc/uikit/Card";
import Tabs from "@ncigdc/uikit/Tabs";
import SideTabs from "@ncigdc/uikit/SideTabs";
import Table, { Tr, Td, Th } from "@ncigdc/uikit/Table";
import { withTheme } from "@ncigdc/theme";
import Row from "@ncigdc/uikit/Flex/Row";
import DownloadButton from "@ncigdc/components/DownloadButton";
import { visualizingButton } from "@ncigdc/theme/mixins";
import EntityPageVerticalTable
  from "@ncigdc/components/EntityPageVerticalTable";
import ageDisplay from "@ncigdc/utils/ageDisplay";

const ClinicalCard = ({
  p: {
    case_id: caseId,
    diagnoses: { hits: { edges: diagnoses = [] } },
    family_histories: familyHistory = [],
    demographic = {},
    exposures: { hits: { edges: exposures = [], total: totalExposures } }
  },
  activeTab,
  setTab,
  theme
}: {
  p: Object,
  activeTab: number,
  setTab: Function,
  theme: Object
}) => (
  <Card
    style={{ flex: 1 }}
    title={
      <Row style={{ justifyContent: "space-between" }}>
        <span>Clinical</span>
        <DownloadButton
          style={visualizingButton}
          filename={`clinical.case-${caseId}`}
          url={urlJoin(process.env.REACT_APP_API, "cases")}
          activeText="Processing"
          inactiveText="Export"
          filters={{
            op: "and",
            content: [
              {
                op: "in",
                content: {
                  field: "cases.case_id",
                  value: [caseId]
                }
              }
            ]
          }}
          fields={["case_id"]}
          dataExportExpands={[
            "demographic",
            "diagnoses",
            "diagnoses.treatments",
            "family_histories",
            "exposures"
          ]}
        />
      </Row>
    }
  >
    <Tabs
      contentStyle={{ border: "none" }}
      onTabClick={i => setTab(() => i)}
      tabs={[
        <p key="Demographic">Demographic</p>,
        <p key="Diagnoses / Treatment">
          Diagnoses / Treatments ({diagnoses.length})
        </p>,
        <p key="Family Histories">Family Histories ({familyHistory.length})</p>,
        <p key="Exposures">Exposures ({totalExposures})</p>
      ]}
      activeIndex={activeTab}
    >
      {activeTab === 0 &&
        <EntityPageVerticalTable
          thToTd={[
            { th: "ID", td: demographic.demographic_id },
            { th: "Ethnicity", td: demographic.ethnicity },
            { th: "Gender", td: demographic.gender },
            { th: "Race", td: demographic.race },
            { th: "Year of Birth", td: demographic.year_of_birth },
            { th: "Year of Death", td: demographic.year_of_death }
          ]}
          style={{ flex: 1 }}
        />}
      {activeTab === 1 &&
        <div>
          {!!diagnoses.length &&
            <SideTabs
              contentStyle={{ border: "none" }}
              tabs={diagnoses.map(x => (
                <p key={x.node.diagnosis_id}>{x.node.diagnosis_id}</p>
              ))}
              tabContent={diagnoses.map(d => d.node).map(x => (
                <span key={x.diagnosis_id}>
                  <EntityPageVerticalTable
                    thToTd={[
                      { th: "ID", td: x.diagnosis_id },
                      {
                        th: "Classification of Tumor",
                        td: x.classification_of_tumor
                      },
                      { th: "Alcohol Intensity", td: x.alcohol_intensity },
                      {
                        th: "Age at Diagnosis",
                        td: ageDisplay(x.age_at_diagnosis)
                      },
                      { th: "Days to Birth", td: x.days_to_birth },
                      { th: "Days to Death", td: x.days_to_death },
                      {
                        th: "Days to Last Follow Up",
                        td: x.days_to_last_follow_up
                      },
                      {
                        th: "Days to Last Known Disease Status",
                        td: x.days_to_last_known_disease_status
{'fraction_non_alphanumeric': 0.1341595475875346, 'fraction_numerical': 0.0014438695704488027, 'mean_word_length': 1.6154814348646949, 'pattern_counts': {'":': 0, '<': 47, '<?xml version=': 0, '>': 55, 'https://': 0, 'lorem ipsum': 0, 'www.': 0, 'xml': 0}, 'pii_count': 0, 'substrings_counts': 0, 'word_list_counts': {'cursed_substrings.json': 6, 'profanity_word_list.json': 0, 'sexual_word_list.json': 0, 'zh_pornsignals.json': 0}}
{'dir': 'git-commits-cleaned', 'id': '6073628', 'n_tokens_mistral': 2559, 'n_tokens_neox': 2390, 'n_words': 503}