<commit_before>import { useCurrentStateAndParams } from '@uirouter/react';
import { FunctionComponent } from 'react';
import { Panel } from 'react-bootstrap';
import Select from 'react-select';

import { LoadingSpinner } from '@waldur/core/LoadingSpinner';
import { translate } from '@waldur/i18n';
import { useTitle } from '@waldur/navigation/title';

import { CustomerMap } from './CustomerMap';
import { StatsTable } from './StatsTable';
import { useChecklistOverview } from './useChecklist';

export const ChecklistOverview: FunctionComponent = () => {
  useTitle(translate('Compliance'));
  const {
    params: { category },
  } = useCurrentStateAndParams();
  const state = useChecklistOverview(category);

  if (state.checklistLoading) {
    return <LoadingSpinner />;
  } else if (state.checklistErred) {
    return <>{translate('Unable to load checklists.')}</>;
  } else if (state.checklistOptions) {
    if (!state.checklist) {
      return <>{translate('There are no checklist yet.')}</>;
    }
    return (
      <>
        <Select
          getOptionValue={(option) => option.uuid}
          getOptionLabel={(option) => option.name}
          value={state.checklist}
          onChange={state.setChecklist}
          options={state.checklistOptions}
          isClearable={false}
          styles={{
            control: (base) => ({
              ...base,
              zIndex: 2000,
            }) /* Because leaflet z-index is 1000 */,
          }}<commit_msg>Fixed project checklists selector in Compliance page<commit_after>import { useCurrentStateAndParams } from '@uirouter/react';
import { FunctionComponent } from 'react';
import { Panel } from 'react-bootstrap';
import Select from 'react-select';

import { LoadingSpinner } from '@waldur/core/LoadingSpinner';
import { reactSelectMenuPortaling } from '@waldur/form/utils';
import { translate } from '@waldur/i18n';
import { useTitle } from '@waldur/navigation/title';

import { CustomerMap } from './CustomerMap';
import { StatsTable } from './StatsTable';
import { useChecklistOverview } from './useChecklist';

export const ChecklistOverview: FunctionComponent = () => {
  useTitle(translate('Compliance'));
  const {
    params: { category },
  } = useCurrentStateAndParams();
  const state = useChecklistOverview(category);

  if (state.checklistLoading) {
    return <LoadingSpinner />;
  } else if (state.checklistErred) {
    return <>{translate('Unable to load checklists.')}</>;
  } else if (state.checklistOptions) {
    if (!state.checklist) {
      return <>{translate('There are no checklist yet.')}</>;
    }
    return (
      <>
        <Select
          getOptionValue={(option: any) => option.uuid}
          getOptionLabel={(option: any) => option.name}
          value={state.checklist}
          onChange={state.setChecklist}
          options={state.checklistOptions}
          isClearable={false}
          {...reactSelectMenuPortaling()}
{'fraction_non_alphanumeric': 0.13862397820163488, 'fraction_numerical': 0.004087193460490463, 'mean_word_length': 3.357566765578635, 'pattern_counts': {'":': 0, '<': 17, '<?xml version=': 0, '>': 22, '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': '1453049', 'n_tokens_mistral': 839, 'n_tokens_neox': 813, 'n_words': 194}