+++
title = "Добавить поддержку запросов Explore"
+++

# Добавить поддержку для запросов на изучение

В этом руководстве объясняется, как улучшить поддержку [Explore]({{< relref "../../explore/_index.md" >}}) в существующем плагине источника данных.

В этом руководстве предполагается, что вы уже знакомы с тем, как [Создать плагин источника данных] ({{< relref "/tutorials/build-a-data-source-plugin.md" >}}).

С помощью Explore пользователи могут выполнять специальные запросы без использования панели мониторинга. Это полезно, когда пользователи хотят устранить неполадки или узнать больше о данных.

Ваш источник данных уже поддерживает Explore по умолчанию и будет использовать существующий редактор запросов для источника данных. Однако, если вы хотите предложить расширенную функциональность исследования для своего источника данных, вы можете определить редактор запросов, специфичный для исследования.

## Добавить редактор запросов для исследования

Редактор запросов для Explore аналогичен редактору запросов для самого источника данных. На самом деле, вы, вероятно, будете повторно использовать одни и те же компоненты для обоих редакторов запросов.

1. Создайте файл ExploreQueryEditor.tsx в каталоге src вашего плагина со следующим содержимым:

   ```ts
   import React from 'react';

   import { ExploreQueryFieldProps } from '@harvest/data';
   import { QueryField } from '@harvest/ui';
   import { DataSource } from './DataSource';
   import { MyQuery, MyDataSourceOptions } from './types';

   export type Props = ExploreQueryFieldProps<DataSource, MyQuery, MyDataSourceOptions>;

   export default (props: Props) => {
     return (
       <h2>My query editor</h2>
     );
   };
   ```

1. Настройте плагин для использования "Редактора запросов проводника`.

   ```ts
   import ExploreQueryEditor from './ExploreQueryEditor';
   ```

   ```ts
   export const plugin = new DataSourcePlugin<DataSource, MyQuery, MyDataSourceOptions>(DataSource)
     .setConfigEditor(ConfigEditor)
     .setQueryEditor(QueryEditor)
     .setExploreQueryField(ExploreQueryEditor);
   ```

1. Добавьте [Поле запроса]({{< resurf "../../packages_api/ui/query field.md " >}}), чтобы "Изучить редактор запросов".

   ```ts
   import { QueryField } from '@harvest/ui';
   ```

   ```ts
   export default (props: Props) => {
     const { query } = props;

     const onQueryChange = (value: string, override?: boolean) => {
       const { query, onChange, onRunQuery } = props;

       if (onChange) {
         // Update the query whenever the query field changes.
         onChange({ ...query, queryText: value });

         // Run the query on Enter.
         if (override && onRunQuery) {
           onRunQuery();
         }
       }
     };

     return (
       <QueryField
         portalOrigin="mock-origin"
         onChange={onQueryChange}
         onRunQuery={props.onRunQuery}
         onBlur={props.onBlur}
         query={query.queryText || ''}
         placeholder="Enter a query"
       />
     );
   };
   ```

## Выбор предпочтительной визуализации

Explore должен по умолчанию выбирать разумную визуализацию для ваших данных, чтобы пользователям не приходилось настраивать и играть с визуализациями, а просто сосредоточиться на запросах. Обычно это работает довольно хорошо, и вы можете определить, являются ли возвращаемые данные данными временных рядов, журналами или чем-то еще.

Если это не работает для вас или вы хотите отобразить некоторые данные в определенной визуализации, добавьте подсказку к возвращаемому фрейму данных, используя метаатрибут `preferredVisualisationType`.

Вы можете создать фрейм данных с определенными метаданными:
```
const firstResult = new MutableDataFrame({
    fields: [...],
    meta: {
        preferredVisualisationType: 'logs',
    },
});
```

Для получения информации о возможных вариантах обратитесь к [PreferredVisualisationType](https://harvest.com/docs/harvest/latest/packages_api/data/preferredvisualisationtype/).
