<commit_before>import React from 'react';
import PropTypes from 'prop-types';
import 'core-js/stable';
import 'regenerator-runtime/runtime';
import { useAsyncDebounce } from 'react-table';

function VariablesGlobalFilter({
  globalFilteredRows,
  globalFilter,
  setGlobalFilter,
}) {
  const matchCount = globalFilteredRows.length;
  const [value, setValue] = React.useState(globalFilter);
  const onChange = useAsyncDebounce((val) => {
    setGlobalFilter(val || undefined);
  }, 200);

  let color = 'grey'; // inactive
  let active = 'true';
  if (value !== '') {
    color = '#007bff'; // active
    active = false;
  }
  return (
    <div className="input-group mb-3">
      <input
        id="filter"
        type="search"
        className="form-control"
        value={value || ''}
        onChange={(e) => {
          setValue(e.target.value);
          onChange(e.target.value);
        }}
        placeholder="Filter..."
      />
      <div className="input-group-append"><commit_msg>Fix clear button of variable filter<commit_after>import React from 'react';
import PropTypes from 'prop-types';
import 'core-js/stable';
import 'regenerator-runtime/runtime';
import { useAsyncDebounce } from 'react-table';

function VariablesGlobalFilter({
  globalFilteredRows,
  globalFilter,
  setGlobalFilter,
}) {
  const matchCount = globalFilteredRows.length;
  const [value, setValue] = React.useState(globalFilter);
  const onChange = useAsyncDebounce((val) => {
    setGlobalFilter(val || undefined);
  }, 200);

  const active = (value !== '');
  let color = 'grey'; // inactive
  if (active) {
    color = '#007bff'; // active
  }
  return (
    <div className="input-group mb-3">
      <input
        id="filter"
        type="search"
        className="form-control"
        value={value || ''}
        onChange={(e) => {
          setValue(e.target.value);
          onChange(e.target.value);
        }}
        placeholder="Filter..."
      />
      <div className="input-group-append">
{'fraction_non_alphanumeric': 0.14814814814814814, 'fraction_numerical': 0.007007007007007007, 'mean_word_length': 2.9900199600798403, 'pattern_counts': {'":': 0, '<': 9, '<?xml version=': 0, '>': 13, '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': '3870929', 'n_tokens_mistral': 610, 'n_tokens_neox': 593, 'n_words': 128}