<commit_before>import React, { useEffect, useReducer, useState } from "react";
import {
  fetchAllPipelinesStates,
  fetchAllPipelinesTypes,
  fetchPagedAnalyses
} from "../../apis/analysis/analysis";
import { Input, Progress, Row, Table, Tag } from "antd";
import { PageWrapper } from "../../components/page/PageWrapper";
import {
  dateColumnFormat,
  idColumnFormat,
  nameColumnFormat
} from "../../components/ant.design/table-renderers";

const initialState = {
  search: "",
  current: 1,
  pageSize: 10,
  order: "descend",
  column: "createdDate",
  filters: {}
};

const TYPES = {
  LOADED: "ANALYSES_TABLE/LOADED",
  SEARCH: "ANALYSES_TABLE/SEARCH",
  TABLE_CHANGE: "ANALYSES_TABLE/TABLE_CHANGE"
};

const reducer = (state, action) => {
  switch (action.type) {
    case TYPES.LOADED:
      return {
        ...state,
        loading: false,
        analyses: action.payload.analyses,
        total: action.payload.total
      };
    case TYPES.SEARCH:
      return { ...state, search: action.payload.search, current: 1 };
    case TYPES.TABLE_CHANGE:
      return {
        ...state,
        ...action.payload
      };
    default:
      return { ...state };
  }
};

export function AnalysesTable() {
  const [state, dispatch] = useReducer(reducer, initialState);
  const [loading, setLoading] = useState(false);
  const [analyses, setAnalyses] = useState(undefined);
  const [total, setTotal] = useState(undefined);
  const [pipelineStates, setPipelineStates] = useState(undefined);
  const [types, setTypes] = useState(undefined);

  useEffect(() => {
    fetchAllPipelinesStates().then(data => setPipelineStates(data));
    fetchAllPipelinesTypes().then(data => setTypes(data));
  }, []);

  useEffect(() => {
    setLoading(true);
    const params = {
      current: state.current - 1,
      pageSize: state.pageSize,
      sortColumn: state.column,
      sortDirection: state.order,
      search: state.search,
      filters: state.filters
    };

    fetchPagedAnalyses(params).then(data => {
      setAnalyses(data.analyses);
      setTotal(data.total);
      setLoading(false);
    });
  }, [state]);

  const handleTableChange = (pagination, filters, sorter) => {
    const { pageSize, current } = pagination;
    const { order, field } = sorter;
    const formattedFilter = {};
    Object.keys(filters).forEach(f => (formattedFilter[f] = filters[f][0]));
    dispatch({
      type: TYPES.TABLE_CHANGE,
      payload: {
        pageSize,
        current,
        order: order || "descend",
        column: field || "createdDate",
        filters: formattedFilter
      }
    });
  };

  const onSearch = value =>
    dispatch({
      type: TYPES.SEARCH,
      payload: { search: value, current: 1 }
    });

  const columns = [
    {
      ...idColumnFormat(),
      title: "ID"
    },
    {
      title: "State",
      key: "state",
      dataIndex: "state",
      width: 100,
      filterMultiple: false,
      filters: pipelineStates,
      render(state, data) {
        return (
          <div style={{ display: "flex", alignItems: "center" }}>
            {data.percentage < 100 && state !== "Error" ? (
              <>
                <Progress
                  type="circle"
                  percent={data.percentage}
                  width={25}
                  style={{ paddingRight: 8 }}
                />
                {state}
              </>
            ) : (
              <Tag color={state === "Error" ? "#f50" : "#87d068"}>{state}</Tag>
            )}
          </div>
        );
      }
    },
    {
      ...nameColumnFormat(`${window.TL.BASE_URL}analysis/`),
      title: "Pipeline Name",
      key: "name"
    },
    {
      title: "Type",
      key: "type",
      dataIndex: "type",
      filterMultiple: false,<commit_msg>Used standard green and red colours<commit_after>import React, { useEffect, useReducer, useState } from "react";
import {
  fetchAllPipelinesStates,
  fetchAllPipelinesTypes,
  fetchPagedAnalyses
} from "../../apis/analysis/analysis";
import { Input, Progress, Row, Table, Tag } from "antd";
import { PageWrapper } from "../../components/page/PageWrapper";
import {
  dateColumnFormat,
  idColumnFormat,
  nameColumnFormat
} from "../../components/ant.design/table-renderers";
import { green6, red6 } from "./../../styles/colors";

const initialState = {
  search: "",
  current: 1,
  pageSize: 10,
  order: "descend",
  column: "createdDate",
  filters: {}
};

const TYPES = {
  LOADED: "ANALYSES_TABLE/LOADED",
  SEARCH: "ANALYSES_TABLE/SEARCH",
  TABLE_CHANGE: "ANALYSES_TABLE/TABLE_CHANGE"
};

const reducer = (state, action) => {
  switch (action.type) {
    case TYPES.LOADED:
      return {
        ...state,
        loading: false,
        analyses: action.payload.analyses,
        total: action.payload.total
      };
    case TYPES.SEARCH:
      return { ...state, search: action.payload.search, current: 1 };
    case TYPES.TABLE_CHANGE:
      return {
        ...state,
        ...action.payload
      };
    default:
      return { ...state };
  }
};

export function AnalysesTable() {
  const [state, dispatch] = useReducer(reducer, initialState);
  const [loading, setLoading] = useState(false);
  const [analyses, setAnalyses] = useState(undefined);
  const [total, setTotal] = useState(undefined);
  const [pipelineStates, setPipelineStates] = useState(undefined);
  const [types, setTypes] = useState(undefined);

  useEffect(() => {
    fetchAllPipelinesStates().then(data => setPipelineStates(data));
    fetchAllPipelinesTypes().then(data => setTypes(data));
  }, []);

  useEffect(() => {
    setLoading(true);
    const params = {
      current: state.current - 1,
      pageSize: state.pageSize,
      sortColumn: state.column,
      sortDirection: state.order,
      search: state.search,
      filters: state.filters
    };

    fetchPagedAnalyses(params).then(data => {
      setAnalyses(data.analyses);
      setTotal(data.total);
      setLoading(false);
    });
  }, [state]);

  const handleTableChange = (pagination, filters, sorter) => {
    const { pageSize, current } = pagination;
    const { order, field } = sorter;
    const formattedFilter = {};
    Object.keys(filters).forEach(f => (formattedFilter[f] = filters[f][0]));
    dispatch({
      type: TYPES.TABLE_CHANGE,
      payload: {
        pageSize,
        current,
        order: order || "descend",
        column: field || "createdDate",
        filters: formattedFilter
      }
    });
  };

  const onSearch = value =>
    dispatch({
      type: TYPES.SEARCH,
      payload: { search: value, current: 1 }
    });

  const columns = [
    {
      ...idColumnFormat(),
      title: "ID"
    },
    {
      title: "State",
      key: "state",
      dataIndex: "state",
      width: 100,
      filterMultiple: false,
      filters: pipelineStates,
      render(state, data) {
        return (
          <div style={{ display: "flex", alignItems: "center" }}>
            {data.percentage < 100 && state !== "Error" ? (
              <>
                <Progress
                  type="circle"
                  percent={data.percentage}
                  width={25}
                  style={{ paddingRight: 8 }}
                />
                {state}
              </>
            ) : (
              <Tag color={state === "Error" ? red6 : green6}>{state}</Tag>
            )}
          </div>
        );
      }
    },
    {
      ...nameColumnFormat(`${window.TL.BASE_URL}analysis/`),
      title: "Pipeline Name",
      key: "name"
    },
    {
      title: "Type",
      key: "type",
      dataIndex: "type",
      filterMultiple: false,
{'fraction_non_alphanumeric': 0.14769594328475777, 'fraction_numerical': 0.005645267165550741, 'mean_word_length': 2.27233676975945, 'pattern_counts': {'":': 0, '<': 19, '<?xml version=': 0, '>': 35, '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': '256085', 'n_tokens_mistral': 2371, 'n_tokens_neox': 2305, 'n_words': 487}