1import React, { useCallback } from 'react';
2import {
3  DataTransformerID,
4  FieldNamePickerConfigSettings,
5  PluginState,
6  StandardEditorsRegistryItem,
7  TransformerRegistryItem,
8  TransformerUIProps,
9} from '@grafana/data';
10
11import { InlineField, InlineFieldRow } from '@grafana/ui';
12import { FieldNamePicker } from '@grafana/ui/src/components/MatchersUI/FieldNamePicker';
13import { GazetteerPathEditor } from 'app/plugins/panel/geomap/editor/GazetteerPathEditor';
14import { GazetteerPathEditorConfigSettings } from 'app/plugins/panel/geomap/types';
15import { FieldLookupOptions, fieldLookupTransformer } from './fieldLookup';
16import { FieldType } from '../../../../../../packages/grafana-data/src';
17
18const fieldNamePickerSettings: StandardEditorsRegistryItem<string, FieldNamePickerConfigSettings> = {
19  settings: {
20    width: 30,
21    filter: (f) => f.type === FieldType.string,
22    placeholderText: 'Select text field',
23    noFieldsMessage: 'No text fields found',
24  },
25  name: '',
26  id: '',
27  editor: () => null,
28};
29
30const fieldLookupSettings: StandardEditorsRegistryItem<string, GazetteerPathEditorConfigSettings> = {
31  settings: {},
32} as any;
33
34export const FieldLookupTransformerEditor: React.FC<TransformerUIProps<FieldLookupOptions>> = ({
35  input,
36  options,
37  onChange,
38}) => {
39  const onPickLookupField = useCallback(
40    (value: string | undefined) => {
41      onChange({
42        ...options,
43        lookupField: value,
44      });
45    },
46    [onChange, options]
47  );
48
49  const onPickGazetteer = useCallback(
50    (value: string | undefined) => {
51      onChange({
52        ...options,
53        gazetteer: value,
54      });
55    },
56    [onChange, options]
57  );
58  return (
59    <div>
60      <InlineFieldRow>
61        <InlineField label={'Field'} labelWidth={12}>
62          <FieldNamePicker
63            context={{ data: input }}
64            value={options?.lookupField ?? ''}
65            onChange={onPickLookupField}
66            item={fieldNamePickerSettings as any}
67          />
68        </InlineField>
69      </InlineFieldRow>
70      <InlineFieldRow>
71        <InlineField label={'Lookup'} labelWidth={12}>
72          <GazetteerPathEditor
73            value={options?.gazetteer ?? ''}
74            context={{ data: input }}
75            item={fieldLookupSettings}
76            onChange={onPickGazetteer}
77          />
78        </InlineField>
79      </InlineFieldRow>
80    </div>
81  );
82};
83
84export const fieldLookupTransformRegistryItem: TransformerRegistryItem<FieldLookupOptions> = {
85  id: DataTransformerID.fieldLookup,
86  editor: FieldLookupTransformerEditor,
87  transformation: fieldLookupTransformer,
88  name: 'Field lookup',
89  description: `Use a field value to lookup additional fields from an external source.  This currently supports spatial data, but will eventually support more formats`,
90  state: PluginState.alpha,
91};
92