Geomap: Add ability to select a data query filter for each layer (#49966)

* Fix random typo I found

* add 'useDataFrame' boolean to each layer type to determine whether the layer queues off of query data

* Add data frame picker to options layout depending on layer type

* change layer update logic to render features from a specific data frame. Lift data frame selection up a level in order to add some more complex error handling.

* add a todo to the MapLayerRegistryItem interface

* update optional arg in function signature for consistency

* move dataframe filtering to paneldata, revert layers to prior state

* commit refactor, need to clean up still

* pull copy-pasted code into its own function

* clean up comments

* Update layer.ts

* remove unused types

* fix spacing

* improve dropdown

* need to add dependency to this callback function, otherwise it will always use the context of the last layer

* add data query recovery logic to handle query renames

Co-authored-by: Ryan McKinley <ryantxu@gmail.com>

public/app/plugins/panel/geomap/layers/data/FrameSelectionEditor.tsx

@@ -0,0 +1,62 @@
+import React, { FC, useCallback, useMemo, useState } from 'react';
+import { FrameMatcherID, getFieldDisplayName, MatcherConfig, SelectableValue, StandardEditorProps } from '@grafana/data';
+import { Select } from '@grafana/ui';
+
+const recoverRefIdMissing = (newRefIds: SelectableValue[], oldRefIds: SelectableValue[], previousValue: string | undefined): SelectableValue | undefined => {
+  if (!previousValue) {
+    return;
+  }
+  // Previously selected value is missing from the new list.
+  // Find the value that is in the new list but isn't in the old list
+  let changedTo = newRefIds.find((refId) => {
+    return !oldRefIds.some((refId2) => {
+      return refId === refId2;
+    });
+  });
+  if (changedTo) {
+    // Found the new value, we assume the old value changed to this one, so we'll use it
+    return changedTo;
+  }
+  return;
+};
+
+export const FrameSelectionEditor: FC<StandardEditorProps<MatcherConfig>> = ({
+  value,
+  context,
+  onChange,
+  item,
+}) => {
+  const listOfRefId = useMemo(() => {
+    return context.data.map(f => ({
+      value: f.refId,
+      label: `Query: ${f.refId} (size: ${f.length})`,
+      description: f.fields.map(f => getFieldDisplayName(f)).join(', '),
+    }));
+  }, [context.data]);
+
+  const [priorSelectionState, updatePriorSelectionState] = useState({
+    refIds: [] as SelectableValue[],
+    value: undefined as string | undefined,
+  });
+
+  const currentValue = useMemo(() => {
+    return listOfRefId.find((refId) => refId.value === value?.options) ?? recoverRefIdMissing(listOfRefId, priorSelectionState.refIds, priorSelectionState.value);
+  }, [value, listOfRefId])
+
+  const onFilterChange = useCallback((v: SelectableValue<string>) => {
+    onChange(v?.value ? {
+      "id": FrameMatcherID.byRefId,
+      "options": v.value
+    } : undefined);
+  }, [context.options.name]);
+
+  if (listOfRefId !== priorSelectionState.refIds || currentValue?.value !== priorSelectionState.value)  {
+    updatePriorSelectionState({
+      refIds: listOfRefId,
+      value: currentValue?.value
+    });
+  }
+  return (
+    <Select options={listOfRefId} onChange={onFilterChange} isClearable={true} placeholder="Change filter" value={currentValue}/>
+  );
+};