Standard options editor for field selection

[marcusolsson]

What would you like to be added:

A standard editor for selecting fields from the query result.

The editor would wrap a Select component, and populate it with the names of the data frame fields returned by the query.

Optionally, the editor would let the developer filter fields to include by type.

Why is this needed:

Selecting the field to use for visualization is a common use case when developing panel plugins. Developers either depend on the order of fields in the returned data frame, or by defining the field to use in a text input.

By adding this as a standard editor we promote a consistent way of selecting data to use for a visualization.

[marcusolsson]

I wrote a custom editor for one of my plugins that might serve as inspiration for the standard editor:

import React from 'react';
import { StandardEditorProps, FieldType } from '@grafana/data';
import { Select } from '@grafana/ui';

interface Settings {
  filterByType: FieldType;
}

interface Props extends StandardEditorProps<string, Settings> {}

export const FieldSelectEditor: React.FC<Props> = ({ item, value, onChange, context }) => {
  if (context.data && context.data.length > 0) {
    const options = context.data
      .flatMap(frame => frame.fields)
      .filter(field => (item.settings?.filterByType ? field.type === item.settings?.filterByType : true))
      .map(field => ({
        label: field.name,
        value: field.name,
      }));

    return <Select<string> isLoading={false} value={value} onChange={e => onChange(e.value)} options={options} />;
  }

  return <Select onChange={() => {}} disabled={true} />;
};

Here's how you would use it:

      .addCustomEditor({
        id: 'sizeField',
        path: 'sizeField',
        name: 'Size',
        description: 'Field to use for size. Defaults to the first numeric field.',
        editor: FieldSelectEditor,
        category: ['Dimensions'],
        settings: {
          filterByType: FieldType.number,
        },
      })

[torkelo]

@ryantxu thoughts? this feels like a really good standard editor option

[ryantxu]

yes!

Although I would like to make the "dimensions" concept a standard panel property -- somethign like:

https://app.rawgraphs.io/

[raulsperoni]

I wrote a custom editor for one of my plugins that might serve as inspiration for the standard editor:

import React from 'react';
import { StandardEditorProps, FieldType } from '@grafana/data';
import { Select } from '@grafana/ui';

interface Settings {
  filterByType: FieldType;
}

interface Props extends StandardEditorProps<string, Settings> {}

export const FieldSelectEditor: React.FC<Props> = ({ item, value, onChange, context }) => {
  if (context.data && context.data.length > 0) {
    const options = context.data
      .flatMap(frame => frame.fields)
      .filter(field => (item.settings?.filterByType ? field.type === item.settings?.filterByType : true))
      .map(field => ({
        label: field.name,
        value: field.name,
      }));

    return <Select<string> isLoading={false} value={value} onChange={e => onChange(e.value)} options={options} />;
  }

  return <Select onChange={() => {}} disabled={true} />;
};

Here's how you would use it:

      .addCustomEditor({
        id: 'sizeField',
        path: 'sizeField',
        name: 'Size',
        description: 'Field to use for size. Defaults to the first numeric field.',
        editor: FieldSelectEditor,
        category: ['Dimensions'],
        settings: {
          filterByType: FieldType.number,
        },
      })

Hi, I'm trying to use this Custom Editor but I'm getting context as undefined. Any ideas?

Thank you

[marcusolsson]

I've improved on the custom editor. The current version is available here.

export const FieldSelectEditor: React.FC<Props> = ({
  item,
  value,
  onChange,
  context,
}) => {
  if (context.data && context.data.length > 0) {
    const options = context.data
      .flatMap((frame) => frame.fields)
      .filter((field) =>
        item.settings?.filterByType
          ? item.settings?.filterByType.some((_) => field.type === _)
          : true
      )
      .map((field) => ({
        label: field.name,
        value: field.name,
      }));

    if (item.settings?.multi) {
      return (
        <MultiSelect
          isClearable
          isLoading={false}
          value={value as string[]}
          onChange={(e) => onChange(e.map((_) => _.value!))}
          options={options}
        />
      );
    } else {
      return (
        <Select
          isClearable
          isLoading={false}
          value={value as string | null}
          onChange={(e) => {
            onChange(e?.value);
          }}
          options={options}
        />
      );
    }
  }

  return <Select onChange={() => {}} disabled={true} />;
};

Use it like this:

      .addCustomEditor({
        id: 'startField',
        path: 'startField',
        name: 'Start time',
        description: 'Field to use for the start time. Defaults to the first time field.',
        editor: FieldSelectEditor,
        category: ['Dimensions'],
        settings: {
          filterByType: [FieldType.time, FieldType.string, FieldType.number],
        },
      })

Note: This requires context that was added in 7.0.3.

[pkolyvas]

We're in the process of moving Grafana feature requests to GitHub Discussions. This issue is being moved to Discussions or has been moved from our issues list, depending on where you're seeing this message.

We hope to use the discussion thread to continue building use cases, and additional evidence based on engagement/voting, in order to help us prioritize this feature request later on down the road.

As with all things Grafana, we value your input and participation in this project and appreciate your patience during this transitional period. Looking forward to the discussion!

[gelicia]

Hello, as you may have heard, we are transitioning away from using discussions to discuss feature requests. We are migrating this discussion to an issue and closing the discussion. The issue is #83010. Feel free to continue the discussion around this there. Thank you!