Advanced datasource methods

I have a backend datasource working pretty well for my building automation system. Now I’m interested in exploring a little more and making it a little more advanced. I have been studying this API document to try to imagine the possibilities but there aren’t any descriptions for the methods. Here’s what I’ve learned so far. A few of them are documented in the tutorial and examples, but I’ll include them anyway, for completeness.

  • setConfigEditor() sets the component that configures the datasource itself - for example, URL to the server
  • SetQueryEditor() sets the component that configure each query added to your panels
  • SetMetadataInspector() looks like it’s used for displaying statistics in the stats page of the query inspector, but if you don’t provide one it gives you a generic table
  • SetQueryEditorHelp() is probably what it sounds like

These are listed in the source is deprecated, so I’ll ignore them

  • SetExploreStartPage()
  • SetVariableQueryEditor()
  • SetComponentsFromLegacyExports()

These have the word ‘explore’ in them so I think they are specifically support for the explorer, but I’m not sure what ‘field’ means here.

  • SetExploreMetricsQueryField()
  • SetExploreLogsQueryField()

Similarly, these all have “control” in them and I’m inferring that they mean angular controls, meaning you can ignore them if you’re building a React based datasource:

  • SetConfigCtrl() - an angular datasource configuration component
  • SetQueryCtrl() - an angular style query editor component

but also in the *Ctrl category is this:

  • SetAnnotationQueryCtrl()

which is a small mystery. This Document tells you how to enable annotations but it doesn’t mention how this function is used. A few datasources use it but they are all angular. If you want to provide a custom annotation “query control” does it have to be angular?

Lots of assumptions here … if somebody can clear up any of them for me I would be appreciative.

Your assumptions are all pretty spot on to be honest, so I’ll focus on the annotation editor.

The annotation query editor was one of the last component to be migrated to React so even if you built a React plugin, you’d have to provide an Angular editor for it. In recent versions, the annotation query editor has become more declarative.

Instead of having all plugins build their custom editors, there’s now a single editor for all. It looks at the data frame response and lets you select the fields to use for each dimension. Meaning, you no longer need to build your own annotation query editor.

To enable the new annotation query editor, you’ll need to add annotations: {} to your data source class.

Let me know if you have any specific questions related to the methods you’ve listed!

1 Like