<commit_before>import React from "react";
import { Avatar, Col, Input, List, Row } from "antd";
import { useAppDispatch, useAppSelector } from "../../../hooks/useState";
import {
  fetchSampleAnalyses,
  SampleAnalyses as SampleAnalysesItem,
} from "../../../apis/samples/samples";
import { setSampleAnalyses } from "../sampleAnalysesSlice";
import { SampleAnalysesState } from "./SampleAnalysesState";
import { setBaseUrl } from "../../../utilities/url-utilities";
import { formatInternationalizedDateTime } from "../../../utilities/date-utilities";
import AutoSizer from "react-virtualized-auto-sizer";
import { FixedSizeList as VList } from "react-window";
import { HEADER_HEIGHT_WITH_PADDING } from "./ViewerHeader";

const { Search } = Input;

/**
 * React component to display sample analyses
 *
 * @returns {JSX.Element}
 * @constructor
 */
export default function SampleAnalyses() {
  const [filteredAnalyses, setFilteredAnalyses] = React.useState<
    SampleAnalysesItem[]
  >([]);

  const dispatch = useAppDispatch();

  const { sample } = useAppSelector((state) => state.sampleReducer);

  const { analyses } = useAppSelector((state) => state.sampleAnalysesReducer);

  React.useEffect(() => setFilteredAnalyses(analyses), [analyses]);

  /*
  On page load get the sample analyses
   */
  React.useEffect(() => {
    fetchSampleAnalyses({ sampleId: sample.identifier }).then(
      (analysesList) => {
        dispatch(setSampleAnalyses({ analyses: analysesList }));
      }
    );
  }, [dispatch, sample.identifier]);

  /*
  Filter displayed submissions by name or type
   */
  const searchSubmissions = (searchStr: string) => {
    if (
      searchStr.trim() === "" ||
      searchStr === "undefined" ||
      searchStr === null
    ) {
      setFilteredAnalyses(analyses);
    } else {
      searchStr = String(searchStr).toLowerCase();
      const submissionsContainingSearchValue: SampleAnalysesItem[] =
        analyses.filter(
          (submission: SampleAnalysesItem) =>
            submission.name.toLowerCase().includes(searchStr) ||
            submission.analysisType.toLowerCase().includes(searchStr)
        );
      setFilteredAnalyses(submissionsContainingSearchValue);
    }
  };

  return (
    <Row gutter={[16, 16]}>
      <Col span={24}>
        <Search
          placeholder={i18n("SampleAnalyses.inputSearchText")}
          onChange={(e) => searchSubmissions(e.target.value)}
          allowClear={true}
          className="t-sample-analyses-search-input"
        />
      </Col>
      <Col
        span={24}
        style={{
          height: `calc(80vh - ${HEADER_HEIGHT_WITH_PADDING}px - 72px)`,
        }}
      >
        <AutoSizer>
          {({ height, width = "100%" }) => (
            <VList
              itemCount={filteredAnalyses.length}
              itemSize={70}
              width={width}
              height={height}
              style={{
                border: `1px solid var(--grey-4)`,
              }}
              className="t-sample-analyses"
            ><commit_msg>Modified height so border displays<commit_after>import React from "react";
import { Avatar, Col, Input, List, Row } from "antd";
import { useAppDispatch, useAppSelector } from "../../../hooks/useState";
import {
  fetchSampleAnalyses,
  SampleAnalyses as SampleAnalysesItem,
} from "../../../apis/samples/samples";
import { setSampleAnalyses } from "../sampleAnalysesSlice";
import { SampleAnalysesState } from "./SampleAnalysesState";
import { setBaseUrl } from "../../../utilities/url-utilities";
import { formatInternationalizedDateTime } from "../../../utilities/date-utilities";
import AutoSizer from "react-virtualized-auto-sizer";
import { FixedSizeList as VList } from "react-window";
import { HEADER_HEIGHT_WITH_PADDING } from "./ViewerHeader";

const { Search } = Input;

/**
 * React component to display sample analyses
 *
 * @returns {JSX.Element}
 * @constructor
 */
export default function SampleAnalyses() {
  const [filteredAnalyses, setFilteredAnalyses] = React.useState<
    SampleAnalysesItem[]
  >([]);

  const dispatch = useAppDispatch();

  const { sample } = useAppSelector((state) => state.sampleReducer);

  const { analyses } = useAppSelector((state) => state.sampleAnalysesReducer);

  React.useEffect(() => setFilteredAnalyses(analyses), [analyses]);

  /*
  On page load get the sample analyses
   */
  React.useEffect(() => {
    fetchSampleAnalyses({ sampleId: sample.identifier }).then(
      (analysesList) => {
        dispatch(setSampleAnalyses({ analyses: analysesList }));
      }
    );
  }, [dispatch, sample.identifier]);

  /*
  Filter displayed submissions by name or type
   */
  const searchSubmissions = (searchStr: string) => {
    if (
      searchStr.trim() === "" ||
      searchStr === "undefined" ||
      searchStr === null
    ) {
      setFilteredAnalyses(analyses);
    } else {
      searchStr = String(searchStr).toLowerCase();
      const submissionsContainingSearchValue: SampleAnalysesItem[] =
        analyses.filter(
          (submission: SampleAnalysesItem) =>
            submission.name.toLowerCase().includes(searchStr) ||
            submission.analysisType.toLowerCase().includes(searchStr)
        );
      setFilteredAnalyses(submissionsContainingSearchValue);
    }
  };

  return (
    <Row gutter={[16, 16]}>
      <Col span={24}>
        <Search
          placeholder={i18n("SampleAnalyses.inputSearchText")}
          onChange={(e) => searchSubmissions(e.target.value)}
          allowClear={true}
          className="t-sample-analyses-search-input"
        />
      </Col>
      <Col
        span={24}
        style={{
          height: `calc(80vh - ${HEADER_HEIGHT_WITH_PADDING}px - 73px)`,
        }}
      >
        <AutoSizer>
          {({ height, width = "100%" }) => (
            <VList
              itemCount={filteredAnalyses.length}
              itemSize={70}
              width={width}
              height={height}
              style={{
                border: `1px solid var(--grey-4)`,
              }}
              className="t-sample-analyses"
            >
{'fraction_non_alphanumeric': 0.14170903723142528, 'fraction_numerical': 0.006888633754305396, 'mean_word_length': 2.702489374620522, 'pattern_counts': {'":': 0, '<': 19, '<?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': '6442853', 'n_tokens_mistral': 1831, 'n_tokens_neox': 1721, 'n_words': 348}