<commit_before>import React from "react";

import NarrowContainer from "~/components/layout/NarrowContainer";
import PipelineVersionSelect from "~/components/views/SampleView/PipelineVersionSelect";
import PropTypes from "~/components/utils/propTypes";
import ViewHeader from "~/components/layout/ViewHeader";

import cs from "./pipeline_viz.scss";

class PipelineVizHeader extends React.Component {
  // See SampleView.jsx
  renderVersionDisplay = () => {
    const { pipelineRun } = this.props;
    if (pipelineRun && pipelineRun.version && pipelineRun.version.pipeline) {
      const versionString = `v${pipelineRun.version.pipeline}`;
      const alignmentDBString = pipelineRun.version.alignment_db
        ? `, NT/NR: ${pipelineRun.version.alignment_db}`
        : "";

      return versionString + alignmentDBString;
    }
    return "";
  };

  handlePipelineVersionSelect = version => {
    const { sample } = this.props;
    window.location = `${location.protocol}//${location.host}/samples/${
      sample.id
    }/pipeline_viz/${version}`;
  };

  render() {
    const {
      pipelineRun,
      pipelineVersions,
      lastProcessedAt,
      sample,
    } = this.props;
    return (
      <NarrowContainer>
        <ViewHeader className={cs.headerSection}>
          <ViewHeader.Content>
            <div className={cs.pipelineInfo}>
              <span>PIPELINE {this.renderVersionDisplay()}</span>
              <PipelineVersionSelect
                pipelineRun={pipelineRun}
                pipelineVersions={pipelineVersions}
                lastProcessedAt={lastProcessedAt}
                onPipelineVersionSelect={this.handlePipelineVersionSelect}
              />
            </div>
            <ViewHeader.Pretitle breadcrumbLink={`/samples/${sample.id}`}>
              {sample.name}
            </ViewHeader.Pretitle>
            <ViewHeader.Title label="Pipeline Vizualization" />
          </ViewHeader.Content>
        </ViewHeader>
        <div className={cs.headerDivider} />
      </NarrowContainer>
    );
  }
}

PipelineVizHeader.propTypes = {
  pipelineRun: PropTypes.PipelineRun,
  sample: PropTypes.Sample,
  pipelineVersions: PropTypes.arrayOf(PropTypes.string),
  lastProcessedAt: PropTypes.string,
};<commit_msg>Fix spelling of 'visualization' (#2534)<commit_after>import React from "react";

import NarrowContainer from "~/components/layout/NarrowContainer";
import PipelineVersionSelect from "~/components/views/SampleView/PipelineVersionSelect";
import PropTypes from "~/components/utils/propTypes";
import ViewHeader from "~/components/layout/ViewHeader";

import cs from "./pipeline_viz.scss";

class PipelineVizHeader extends React.Component {
  // See SampleView.jsx
  renderVersionDisplay = () => {
    const { pipelineRun } = this.props;
    if (pipelineRun && pipelineRun.version && pipelineRun.version.pipeline) {
      const versionString = `v${pipelineRun.version.pipeline}`;
      const alignmentDBString = pipelineRun.version.alignment_db
        ? `, NT/NR: ${pipelineRun.version.alignment_db}`
        : "";

      return versionString + alignmentDBString;
    }
    return "";
  };

  handlePipelineVersionSelect = version => {
    const { sample } = this.props;
    window.location = `${location.protocol}//${location.host}/samples/${
      sample.id
    }/pipeline_viz/${version}`;
  };

  render() {
    const {
      pipelineRun,
      pipelineVersions,
      lastProcessedAt,
      sample,
    } = this.props;
    return (
      <NarrowContainer>
        <ViewHeader className={cs.headerSection}>
          <ViewHeader.Content>
            <div className={cs.pipelineInfo}>
              <span>PIPELINE {this.renderVersionDisplay()}</span>
              <PipelineVersionSelect
                pipelineRun={pipelineRun}
                pipelineVersions={pipelineVersions}
                lastProcessedAt={lastProcessedAt}
                onPipelineVersionSelect={this.handlePipelineVersionSelect}
              />
            </div>
            <ViewHeader.Pretitle breadcrumbLink={`/samples/${sample.id}`}>
              {sample.name}
            </ViewHeader.Pretitle>
            <ViewHeader.Title label="Pipeline Visualization" />
          </ViewHeader.Content>
        </ViewHeader>
        <div className={cs.headerDivider} />
      </NarrowContainer>
    );
  }
}

PipelineVizHeader.propTypes = {
  pipelineRun: PropTypes.PipelineRun,
  sample: PropTypes.Sample,
  pipelineVersions: PropTypes.arrayOf(PropTypes.string),
  lastProcessedAt: PropTypes.string,
};
{'fraction_non_alphanumeric': 0.11903710247349823, 'fraction_numerical': 0.0008833922261484099, 'mean_word_length': 2.8219409282700423, 'pattern_counts': {'":': 0, '<': 33, '<?xml version=': 0, '>': 37, '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': '2560722', 'n_tokens_mistral': 1246, 'n_tokens_neox': 1267, 'n_words': 208}