...

import { uniq } from 'lodash';
import { useEffect, useMemo, useState } from 'react';

import { SelectableValue } from '@grafana/data';
import { t } from '@grafana/i18n';
import { EditorList } from '@grafana/plugin-ui';
import { Field } from '@grafana/ui';

import { AzureTracesFilter } from '../../types/query';
import { AzureQueryEditorFieldProps } from '../../types/types';

import { makeRenderItem } from './Filter';
import { tablesSchema } from './consts';
import { setFilters } from './setQueryValue';

const Filters = ({ query, datasource, onQueryChange, variableOptionGroup, range }: AzureQueryEditorFieldProps) => {
  const { azureTraces } = query;
  const queryTraceTypes = azureTraces?.traceTypes ? azureTraces.traceTypes : Object.keys(tablesSchema);

const excludedProperties = new Set([
    'customDimensions',
    'customMeasurements',
    'details',
    'duration',
    'id',
    'itemId',
    'operation_Id',
    'operation_ParentId',
    'timestamp',
  ]);
  const properties = uniq(queryTraceTypes.map((type) => Object.keys(tablesSchema[type])).flat()).filter(
    (item) => !excludedProperties.has(item)
  );

const [propertyMap, setPropertyMap] = useState(new Map<string, Array<SelectableValue<string>>>());
  const queryFilters = useMemo(() => query.azureTraces?.filters ?? [], [query.azureTraces?.filters]);
  const [filters, updateFilters] = useState(queryFilters);

useEffect(() => {
    setPropertyMap(new Map<string, Array<SelectableValue<string>>>());
  }, [query.azureTraces?.resources, query.azureTraces?.traceTypes, query.azureTraces?.operationId]);

return (
    <Field label={t('components.filters.label-filters', 'Filters')}>
      <EditorList
        items={filters}
        onChange={changedFunc}
        renderItem={makeRenderItem({
          query,
          datasource,
          propertyMap,
          setPropertyMap,
          queryTraceTypes,
          properties,
          variableOptionGroup,
          range,
        })}
      />
    </Field>
  );
};

export default Filters;

.	Edit
..	Edit
Filter.tsx	Edit
Filters.test.tsx	Edit
Filters.tsx	Edit
TraceTypeField.test.tsx	Edit
TraceTypeField.tsx	Edit
TracesQueryEditor.test.tsx	Edit
TracesQueryEditor.tsx	Edit
consts.ts	Edit
setQueryValue.ts	Edit