<commit_before>// @flow

import React from "react";

import styled from "@ncigdc/theme/styled";
import { zDepth1 } from "@ncigdc/theme/mixins";
import DoubleHelix from "@ncigdc/theme/icons/DoubleHelix";
import MutationIcon from "@ncigdc/theme/icons/Mutation";

import ProjectsCount from "@ncigdc/components/ProjectsCount";
import PrimarySitesCount from "@ncigdc/components/PrimarySitesCount";
import CasesCount from "@ncigdc/components/CasesCount";
import FilesCount from "@ncigdc/components/FilesCount";

import { Row, Column } from "@ncigdc/uikit/Flex";

const Container = styled(Column, {
  ...zDepth1,
  marginTop: "2rem",
  backgroundColor: "white",
  borderTop: "3px solid rgb(37, 208, 182)"
});

const CountBox = styled(Column, {
  padding: "1.5rem",
  flex: 1,
  justifyContent: "center",
  alignItems: "center"
});

const Title = styled(Row, {
  justifyContent: "center",
  textTransform: "uppercase",
  marginBottom: "0.5rem"
});

type TProps = {
  dataRelease: string,
  projectsCountData: Object,
  primarySitesCountData: Object,
  casesCountData: Object,
  filesCountData: Object,
  genesCountData: Object,
  ssmsCountData: Object
};
const PortalSummary = (props: TProps) => (
  <Container>
    <Row style={{ padding: "2rem", alignItems: "baseline" }}>
      <div style={{ fontSize: "2.3rem", color: "rgb(70, 70, 70)" }}>
        Data Portal Summary
      </div>
      <div
        style={{
          fontSize: "1.3rem",
          color: "rgb(37, 97, 122)",
          marginLeft: "2rem"
        }}
      >
        <a
          target="_blank"
          rel="noopener noreferrer"
          href="https://docs.gdc.cancer.gov/Data/Release_Notes/Data_Release_Notes/"
        >
          {props.dataRelease}
        </a>
      </div>
    </Row>
    <Column>
      <Row>
        <CountBox>
          <Title>Projects</Title>
          <Row>
            <i
              style={{ color: "#01b987", fontSize: "3rem" }}
              className="icon-gdc-projects project-icon"
            />
            <span style={{ fontSize: "2.5rem", marginLeft: "0.5rem" }}>
              <ProjectsCount hits={props.projectsCountData} />
            </span>
          </Row>
        </CountBox>
        <CountBox>
          <Title>Primary Sites</Title>
          <Row>
            <i
              style={{ color: "#01b987", fontSize: "3rem" }}
              className="icon-gdc-cases data-icon"
            />
            <span style={{ fontSize: "2.5rem", marginLeft: "0.5rem" }}>
              <PrimarySitesCount aggregations={props.primarySitesCountData} />
            </span>
          </Row>
        </CountBox>
        <CountBox>
          <Title>Cases</Title>
          <Row>
            <i
              style={{ color: "#01b987", fontSize: "3rem" }}
              className="icon-gdc-cases data-icon"
            />
            <span style={{ fontSize: "2.5rem", marginLeft: "0.5rem" }}>
              <CasesCount hits={props.casesCountData} />
            </span>
          </Row>
        </CountBox>
      </Row>
      <Row>
        <CountBox>
          <Title>Files</Title>
          <Row>
            <i
              style={{ color: "#01b987", fontSize: "3rem" }}
              className="fa fa-file-o data-icon"
            />
            <span style={{ fontSize: "2.5rem", marginLeft: "0.5rem" }}>
              <FilesCount hits={props.filesCountData} />
            </span>
          </Row>
        </CountBox>
        <CountBox>
          <Title>Genes</Title>
          <Row>
            <DoubleHelix color="#01b987" width="20px" />
            <span style={{ fontSize: "2.5rem", marginLeft: "0.5rem" }}>
              <CasesCount hits={props.genesCountData} />
            </span>
          </Row>
        </CountBox>
        <CountBox>
          <Title>Mutations</Title>
          <Row>
            <MutationIcon color="#01b987" width="32px" />
            <span style={{ fontSize: "2.5rem", marginLeft: "0.5rem" }}>
              <FilesCount hits={props.ssmsCountData} />
            </span>
          </Row>
        </CountBox>
      </Row>
    </Column>
  </Container>
);

export default PortalSummary;<commit_msg>🏁 PRTL-875 homepage alignment (#1705)<commit_after>// @flow

import React from "react";

import styled from "@ncigdc/theme/styled";
import { zDepth1 } from "@ncigdc/theme/mixins";
import DoubleHelix from "@ncigdc/theme/icons/DoubleHelix";
import MutationIcon from "@ncigdc/theme/icons/Mutation";

import ProjectsCount from "@ncigdc/components/ProjectsCount";
import PrimarySitesCount from "@ncigdc/components/PrimarySitesCount";
import CasesCount from "@ncigdc/components/CasesCount";
import FilesCount from "@ncigdc/components/FilesCount";

import { Row, Column } from "@ncigdc/uikit/Flex";

const Container = styled(Column, {
  ...zDepth1,
  marginTop: "2rem",
  backgroundColor: "white",
  borderTop: "3px solid rgb(37, 208, 182)"
});

const CountBox = styled(Column, {
  padding: "1.5rem",
  flex: 1,
  justifyContent: "center",
  alignItems: "center"
});

const Title = styled(Row, {
  justifyContent: "center",
  textTransform: "uppercase",
  marginBottom: "0.5rem"
});

type TProps = {
  dataRelease: string,
  projectsCountData: Object,
  primarySitesCountData: Object,
  casesCountData: Object,
  filesCountData: Object,
  genesCountData: Object,
  ssmsCountData: Object
};
const PortalSummary = (props: TProps) => (
  <Container>
    <Row style={{ padding: "2rem", alignItems: "baseline" }}>
      <div style={{ fontSize: "2.3rem", color: "rgb(70, 70, 70)" }}>
        Data Portal Summary
      </div>
      <div
        style={{
          fontSize: "1.3rem",
          color: "rgb(37, 97, 122)",
          marginLeft: "2rem"
        }}
      >
        <a
          target="_blank"
          rel="noopener noreferrer"
          href="https://docs.gdc.cancer.gov/Data/Release_Notes/Data_Release_Notes/"
        >
          {props.dataRelease}
        </a>
      </div>
    </Row>
    <Column>
      <Row>
        <CountBox>
          <Title>Projects</Title>
          <Row>
            <i
              style={{ color: "#01b987", fontSize: "3rem" }}
              className="icon-gdc-projects project-icon"
            />
            <span style={{ fontSize: "2.5rem", marginLeft: "0.5rem" }}>
              <ProjectsCount hits={props.projectsCountData} />
            </span>
          </Row>
        </CountBox>
        <CountBox>
          <Title>Primary Sites</Title>
          <Row>
            <i
              style={{ color: "#01b987", fontSize: "3rem" }}
              className="icon-gdc-cases data-icon"
            />
            <span style={{ fontSize: "2.5rem", marginLeft: "0.5rem" }}>
              <PrimarySitesCount aggregations={props.primarySitesCountData} />
            </span>
          </Row>
        </CountBox>
        <CountBox>
          <Title>Cases</Title>
          <Row>
            <i
              style={{ color: "#01b987", fontSize: "3rem" }}
              className="icon-gdc-cases data-icon"
            />
            <span style={{ fontSize: "2.5rem", marginLeft: "0.5rem" }}>
              <CasesCount hits={props.casesCountData} />
            </span>
          </Row>
        </CountBox>
      </Row>
      <Row>
        <CountBox>
          <Title>Files</Title>
          <Row>
            <i
              style={{ color: "#01b987", fontSize: "3rem" }}
              className="fa fa-file-o data-icon"
            />
            <span style={{ fontSize: "2.5rem", marginLeft: "0.5rem" }}>
              <FilesCount hits={props.filesCountData} />
            </span>
          </Row>
        </CountBox>
        <CountBox>
          <Title>Genes</Title>
          <Row>
            <DoubleHelix color="#01b987" width="20px" height="35px" />
            <span style={{ fontSize: "2.5rem", marginLeft: "0.5rem" }}>
              <CasesCount hits={props.genesCountData} />
            </span>
          </Row>
        </CountBox>
        <CountBox>
          <Title>Mutations</Title>
          <Row>
            <MutationIcon color="#01b987" width="32px" height="39px" />
            <span style={{ fontSize: "2.5rem", marginLeft: "0.5rem" }}>
              <FilesCount hits={props.ssmsCountData} />
            </span>
          </Row>
        </CountBox>
      </Row>
    </Column>
  </Container>
);

export default PortalSummary;
{'fraction_non_alphanumeric': 0.15263411113783978, 'fraction_numerical': 0.024897762809718546, 'mean_word_length': 1.9590747330960854, 'pattern_counts': {'":': 0, '<': 155, '<?xml version=': 0, '>': 157, 'https://': 2, 'lorem ipsum': 0, 'www.': 0, 'xml': 0}, 'pii_count': 0, 'substrings_counts': 0, 'word_list_counts': {'cursed_substrings.json': 0, 'profanity_word_list.json': 0, 'sexual_word_list.json': 0, 'zh_pornsignals.json': 0}}
{'dir': 'git-commits-cleaned', 'id': '7384552', 'n_tokens_mistral': 2707, 'n_tokens_neox': 2624, 'n_words': 543}