Geomap: Add network layer (#70192)

* Geomap: Add network layer * Support text labels for nodes * Add solid styling for edges * Remove symbol option for edge style menu * Add support for edge text labels * Fix linter issues * Simplify multiple data frame handling * Add TODO notes * Add node and edge style categories for options * Remove data frame hardcoding * Hide legend, attempt to hide tooltip by default * Mark network layer as beta * refactor updateEdge * Fix some linter issues * Remove attempt at disabling tooltip for network layer * For edge text add a stroke and increase z index * Restrict field selection based on frame type * refactor * add basic bad data handling (prevent entire panel from breaking) * generate non hard coded graph frames for style editor filtering * code cleanup; remove hardcoded reference to "edges" frame * fix select clearing for Data option * fix styling * fix lookup --------- Co-authored-by: nmarrs <[email protected]> Co-authored-by: Adela Almasan <[email protected]>
grafana · Jul 26, 2023 · 59bed9e · 59bed9e
1 parent 982624c
commit 59bed9e
Show file tree

Hide file tree

Showing 11 changed files with 444 additions and 51 deletions.
diff --git a/.betterer.results b/.betterer.results
@@ -208,7 +208,9 @@ exports[`better eslint`] = {
       [0, 0, 0, "Unexpected any. Specify a different type.", "7"]
     ],
     "packages/grafana-data/src/geo/layer.ts:5381": [
-      [0, 0, 0, "Unexpected any. Specify a different type.", "0"]
+      [0, 0, 0, "Unexpected any. Specify a different type.", "0"],
+      [0, 0, 0, "Unexpected any. Specify a different type.", "1"],
+      [0, 0, 0, "Unexpected any. Specify a different type.", "2"]
     ],
     "packages/grafana-data/src/panel/PanelPlugin.ts:5381": [
       [0, 0, 0, "Unexpected any. Specify a different type.", "0"],

diff --git a/packages/grafana-data/src/geo/layer.ts b/packages/grafana-data/src/geo/layer.ts
@@ -5,6 +5,7 @@ import { ReactNode } from 'react';
 import { MapLayerOptions, FrameGeometrySourceMode } from '@grafana/schema';
 
 import { EventBus } from '../events';
+import { StandardEditorContext } from '../field/standardFieldConfigEditorRegistry';
 import { GrafanaTheme2 } from '../themes';
 import { PanelData } from '../types';
 import { PanelOptionsEditorBuilder } from '../utils';
@@ -39,7 +40,10 @@ export interface MapLayerHandler<TConfig = any> {
   /**
    * Show custom elements in the panel edit UI
    */
-  registerOptionsUI?: (builder: PanelOptionsEditorBuilder<MapLayerOptions<TConfig>>) => void;
+  registerOptionsUI?: (
+    builder: PanelOptionsEditorBuilder<MapLayerOptions<TConfig>>,
+    context: StandardEditorContext<any, any>
+  ) => void;
 }
 
 /**

diff --git a/packages/grafana-ui/src/components/MatchersUI/FieldsByFrameRefIdMatcher.tsx b/packages/grafana-ui/src/components/MatchersUI/FieldsByFrameRefIdMatcher.tsx
@@ -56,7 +56,7 @@ export function RefIDPicker({ value, data, onChange, placeholder }: Props) {
 
   const onFilterChange = useCallback(
     (v: SelectableValue<string>) => {
-      onChange(v.value!);
+      onChange(v?.value!);
     },
     [onChange]
   );

diff --git a/public/app/features/geo/utils/frameVectorSource.ts b/public/app/features/geo/utils/frameVectorSource.ts
@@ -9,7 +9,7 @@ import { getGeometryField, LocationFieldMatchers } from './location';
 export interface FrameVectorSourceOptions {}
 
 export class FrameVectorSource<T extends Geometry = Geometry> extends VectorSource<T> {
-  constructor(private location: LocationFieldMatchers) {
+  constructor(public location: LocationFieldMatchers) {
     super({});
   }
 

diff --git a/public/app/plugins/panel/geomap/editor/StyleEditor.tsx b/public/app/plugins/panel/geomap/editor/StyleEditor.tsx
@@ -1,9 +1,9 @@
 import { capitalize } from 'lodash';
-import React from 'react';
+import React, { useMemo } from 'react';
 import { useObservable } from 'react-use';
 import { Observable, of } from 'rxjs';
 
-import { FieldConfigPropertyItem, StandardEditorProps, StandardEditorsRegistryItem } from '@grafana/data';
+import { FieldConfigPropertyItem, StandardEditorProps, StandardEditorsRegistryItem, FrameMatcher } from '@grafana/data';
 import {
   ScaleDimensionConfig,
   ResourceDimensionConfig,
@@ -39,11 +39,22 @@ export interface StyleEditorOptions {
   layerInfo?: Observable<LayerContentInfo>;
   simpleFixedValues?: boolean;
   displayRotation?: boolean;
+  hideSymbol?: boolean;
+  frameMatcher?: FrameMatcher;
 }
 
 type Props = StandardEditorProps<StyleConfig, StyleEditorOptions>;
 
-export const StyleEditor = ({ value, context, onChange, item }: Props) => {
+export const StyleEditor = (props: Props) => {
+  const { value, onChange, item } = props;
+  const context = useMemo(() => {
+    if (!item.settings?.frameMatcher) {
+      return props.context;
+    }
+
+    return { ...props.context, data: props.context.data.filter(item.settings.frameMatcher) };
+  }, [props.context, item.settings]);
+
   const settings = item.settings;
 
   const onSizeChange = (sizeValue: ScaleDimensionConfig | undefined) => {
@@ -188,24 +199,26 @@ export const StyleEditor = ({ value, context, onChange, item }: Props) => {
           }
         />
       </Field>
-      <Field label={'Symbol'}>
-        <ResourceDimensionEditor
-          value={value?.symbol ?? defaultStyleConfig.symbol}
-          context={context}
-          onChange={onSymbolChange}
-          item={
-            {
-              settings: {
-                resourceType: MediaType.Icon,
-                folderName: ResourceFolderName.Marker,
-                placeholderText: hasTextLabel ? 'Select a symbol' : 'Select a symbol or add a text label',
-                placeholderValue: defaultStyleConfig.symbol.fixed,
-                showSourceRadio: false,
-              },
-            } as StandardEditorsRegistryItem
-          }
-        />
-      </Field>
+      {!settings?.hideSymbol && (
+        <Field label={'Symbol'}>
+          <ResourceDimensionEditor
+            value={value?.symbol ?? defaultStyleConfig.symbol}
+            context={context}
+            onChange={onSymbolChange}
+            item={
+              {
+                settings: {
+                  resourceType: MediaType.Icon,
+                  folderName: ResourceFolderName.Marker,
+                  placeholderText: hasTextLabel ? 'Select a symbol' : 'Select a symbol or add a text label',
+                  placeholderValue: defaultStyleConfig.symbol.fixed,
+                  showSourceRadio: false,
+                },
+              } as StandardEditorsRegistryItem
+            }
+          />
+        </Field>
+      )}
       <Field label={'Color'}>
         <ColorDimensionEditor
           value={value?.color ?? defaultStyleConfig.color}

diff --git a/public/app/plugins/panel/geomap/editor/layerEditor.tsx b/public/app/plugins/panel/geomap/editor/layerEditor.tsx
@@ -106,7 +106,7 @@ export function getLayerEditor(opts: LayerEditorOptions): NestedPanelOptions<Map
         addLocationFields('Location', 'location.', builder, options.location, data);
       }
       if (handler.registerOptionsUI) {
-        handler.registerOptionsUI(builder);
+        handler.registerOptionsUI(builder, context);
       }
       if (!isEqual(opts.category, ['Base layer'])) {
         if (!layer.hideOpacity) {

diff --git a/public/app/plugins/panel/geomap/layers/data/index.ts b/public/app/plugins/panel/geomap/layers/data/index.ts
@@ -4,19 +4,21 @@ import { geojsonLayer } from './geojsonLayer';
 import { heatmapLayer } from './heatMap';
 import { lastPointTracker } from './lastPointTracker';
 import { markersLayer } from './markersLayer';
+import { networkLayer } from './networkLayer';
 import { photosLayer } from './photosLayer';
 import { routeLayer } from './routeLayer';
 
 /**
  * Registry for layer handlers
  */
 export const dataLayers = [
-    markersLayer, 
-    heatmapLayer, 
-    lastPointTracker, 
-    geojsonLayer, 
-    dynamicGeoJSONLayer, 
-    dayNightLayer, 
-    routeLayer,
-    photosLayer
+  markersLayer,
+  heatmapLayer,
+  lastPointTracker,
+  geojsonLayer,
+  dynamicGeoJSONLayer,
+  dayNightLayer,
+  routeLayer,
+  photosLayer,
+  networkLayer,
 ];