<commit_before>import React, { useEffect } from 'react';
import appendQuery from 'append-query';
import classNames from 'classnames';
import Checkbox from './Checkbox';
import SchoolClassification from './SchoolClassification';
import { Link } from 'react-router-dom';
import CompareScroller from './CompareScroller';
import { focusElement } from 'platform/utilities/ui';

export default function({
  currentScroll,
  institutions,
  setPromptingFacilityCode,
  setShowDifferences,
  scrollClickHandler,
  showDifferences,
  smallScreen,
  version,
}) {
  useEffect(() => {
    focusElement('.compare-page-description-label');
  }, []);

  const empties = [];
  for (let i = 0; i < 3 - institutions.length; i++) {
    empties.push(
      <div key={i} className="small-screen:vads-l-col--3 institution-card">
        <div className="compare-header empty-header" />
        <div className="compare-action">
          <Link to={'/search'}>Return to search to add</Link>
        </div>
      </div>,
    );
  }

  const smallWrap = cards => {
    return smallScreen ? (
      <div className="card-wrapper">
        {cards}
        {empties}
      </div>
    ) : (
      cards
    );
  };

  return (
    <div
      className={classNames({
        'vads-l-row': !smallScreen,
      })}
    >
      <div className="small-screen:vads-l-col--3 compare-controls non-scroll-parent">
        <div className="non-scroll-label">
          <div className="test-header compare-header vads-u-padding-right--1">
            <div className="compare-page-description-label">
              Institution comparison:
            </div>
            Compare schools, employers and VET TEC providers side-by-side
          </div>
          <div className="compare-action">
            <Checkbox
              checked={showDifferences}
              label={
                <span>
                  <i className={`fas fa-asterisk`} /> Highlight differences
                </span>
              }
              name="highlight-differences"
              className="vads-u-display--inline-block"
              onChange={e => setShowDifferences(e.target.checked)}
            />
          </div>
        </div>
      </div>
      {smallWrap(
        institutions.map((institution, index) => {
          const profileLink = version
            ? appendQuery(`/institution/${institution.facilityCode}`, {
                version,
              })
            : `/institution/${institution.facilityCode}`;
          return (
            <div
              className="small-screen:vads-l-col--3 institution-card"
              key={index}
            >
              <div className="compare-header institution-header">
                <div>
                  <SchoolClassification
                    institution={institution}
                    displayTraits={false}
                  />
                  <div className="header-fields">
                    <div className="institution-name">
                      <Link
                        to={{
                          pathname: profileLink,
                          state: { prevPath: location.pathname },
                        }}
                        aria-labelledby={`${institution.facilityCode}-label ${
                          institution.facilityCode
                        }-classification`}
                      >
                        <span
                          aria-label={`${institution.name}, `}
                          id={`${institution.facilityCode}-label`}
                        >
                          {institution.name}
                        </span>
                      </Link>
                    </div>
                  </div>
                </div>
              </div>
              <div className="compare-action">
                <button
                  type="button"
                  className="va-button-link learn-more-button"
                  onClick={() => {
                    setPromptingFacilityCode(institution.facilityCode);
                  }}
                >
                  Remove
                </button>
              </div>
            </div>
          );
        }),
      )}
      {smallScreen && (
        <CompareScroller
          currentScroll={currentScroll}
          divisions={3}
          divisionWidth={340}
          onClick={scrollClickHandler}
        />
      )}
      {!smallScreen && empties}
    </div><commit_msg>Update CompareHeader.jsx (#18561)<commit_after>import React, { useEffect } from 'react';
import appendQuery from 'append-query';
import classNames from 'classnames';
import Checkbox from './Checkbox';
import SchoolClassification from './SchoolClassification';
import { Link } from 'react-router-dom';
import CompareScroller from './CompareScroller';
import { focusElement } from 'platform/utilities/ui';

export default function({
  currentScroll,
  institutions,
  setPromptingFacilityCode,
  setShowDifferences,
  scrollClickHandler,
  showDifferences,
  smallScreen,
  version,
}) {
  useEffect(() => {
    focusElement('.compare-page-description-label');
  }, []);

  const empties = [];
  for (let i = 0; i < 3 - institutions.length; i++) {
    empties.push(
      <div key={i} className="small-screen:vads-l-col--3 institution-card">
        <div className="compare-header empty-header" />
        <div className="compare-action">
          <Link to={'/search'}>Return to search to add</Link>
        </div>
      </div>,
    );
  }

  const smallWrap = cards => {
    return smallScreen ? (
      <div className="card-wrapper">
        {cards}
        {empties}
      </div>
    ) : (
      cards
    );
  };

  return (
    <div
      className={classNames({
        'vads-l-row': !smallScreen,
      })}
    >
      <div className="small-screen:vads-l-col--3 compare-controls non-scroll-parent">
        <div className="non-scroll-label">
          <div className="test-header compare-header vads-u-padding-right--1">
            <div className="compare-page-description-label">
              Institution comparison:
            </div>
            Compare schools, employers and VET TEC providers side-by-side
          </div>
          <div className="compare-action">
            <Checkbox
              checked={showDifferences}
              label={
                <span>
                  <i className={`fas fa-asterisk`} /> Highlight differences
                </span>
              }
              name="highlight-differences"
              className="vads-u-display--inline-block"
              onChange={e => setShowDifferences(e.target.checked)}
            />
          </div>
        </div>
      </div>
      {smallWrap(
        institutions.map((institution, index) => {
          const profileLink = version
            ? appendQuery(`/institution/${institution.facilityCode}`, {
                version,
              })
            : `/institution/${institution.facilityCode}`;
          return (
            <div
              className="small-screen:vads-l-col--3 institution-card"
              key={index}
            >
              <div className="compare-header institution-header">
                <div>
                  <SchoolClassification
                    institution={institution}
                    displayTraits={false}
                  />
                  <div className="header-fields">
                    <div className="institution-name">
                      <Link
                        to={{
                          pathname: profileLink,
                          state: { prevPath: location.pathname },
                        }}
                        aria-labelledby={`${institution.facilityCode}-label ${
                          institution.facilityCode
                        }-classification`}
                      >
                        <span
                          aria-label={`${institution.name}, `}
                          id={`${institution.facilityCode}-label`}
                        >
                          {institution.name}
                        </span>
                      </Link>
                    </div>
                  </div>
                </div>
              </div>
              <div className="compare-action">
                <button
                  type="button"
                  className="va-button-link learn-more-button"
                  onClick={() => {
                    setPromptingFacilityCode(institution.facilityCode);
                  }}
                  aria-label={`Remove ${institution.name} from comparison`}
                >
                  Remove
                </button>
              </div>
            </div>
          );
        }),
      )}
      {smallScreen && (
        <CompareScroller
          currentScroll={currentScroll}
          divisions={3}
          divisionWidth={340}
          onClick={scrollClickHandler}
        />
      )}
      {!smallScreen && empties}
    </div>
{'fraction_non_alphanumeric': 0.12007128536422365, 'fraction_numerical': 0.002784584539986634, 'mean_word_length': 1.3791732909379968, 'pattern_counts': {'":': 0, '<': 95, '<?xml version=': 0, '>': 103, 'https://': 0, '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': '5322159', 'n_tokens_mistral': 2311, 'n_tokens_neox': 2223, 'n_words': 403}