diff --git a/public/app/plugins/panel/geomap/GeomapPanel.tsx b/public/app/plugins/panel/geomap/GeomapPanel.tsx index b9029618491..0dafcad1391 100644 --- a/public/app/plugins/panel/geomap/GeomapPanel.tsx +++ b/public/app/plugins/panel/geomap/GeomapPanel.tsx @@ -188,6 +188,7 @@ export class GeomapPanel extends Component { hoverPayload.data = undefined; hoverPayload.columnIndex = undefined; hoverPayload.rowIndex = undefined; + hoverPayload.feature = undefined; let ttip: GeomapHoverPayload = {} as GeomapHoverPayload; const features: GeomapHoverFeature[] = []; @@ -198,6 +199,8 @@ export class GeomapPanel extends Component { if (frame) { hoverPayload.data = ttip.data = frame as DataFrame; hoverPayload.rowIndex = ttip.rowIndex = props['rowIndex']; + } else { + hoverPayload.feature = ttip.feature = feature; } } features.push({ feature, layer, geo }); @@ -206,7 +209,11 @@ export class GeomapPanel extends Component { this.props.eventBus.publish(this.hoverEvent); const currentTTip = this.state.ttip; - if (ttip.data !== currentTTip?.data || ttip.rowIndex !== currentTTip?.rowIndex) { + if ( + ttip.data !== currentTTip?.data || + ttip.rowIndex !== currentTTip?.rowIndex || + ttip.feature !== currentTTip?.feature + ) { this.setState({ ttip: { ...hoverPayload } }); } }; @@ -360,7 +367,7 @@ export class GeomapPanel extends Component { - {ttip && ttip.data && ( + {ttip && (ttip.data || ttip.feature) && ( diff --git a/public/app/plugins/panel/geomap/components/DataHoverView.tsx b/public/app/plugins/panel/geomap/components/DataHoverView.tsx index 84604087b58..5f9be545374 100644 --- a/public/app/plugins/panel/geomap/components/DataHoverView.tsx +++ b/public/app/plugins/panel/geomap/components/DataHoverView.tsx @@ -3,9 +3,11 @@ import { stylesFactory } from '@grafana/ui'; import { DataFrame, Field, formattedValueToString, getFieldDisplayName, GrafanaTheme2 } from '@grafana/data'; import { css } from '@emotion/css'; import { config } from 'app/core/config'; +import { FeatureLike } from 'ol/Feature'; export interface Props { data?: DataFrame; // source data + feature?: FeatureLike; rowIndex?: number; // the hover row columnIndex?: number; // the hover column } @@ -14,7 +16,26 @@ export class DataHoverView extends PureComponent { style = getStyles(config.theme2); render() { - const { data, rowIndex, columnIndex } = this.props; + const { data, feature, rowIndex, columnIndex } = this.props; + + if (feature) { + return ( + + + {Object.entries(feature.getProperties()).map( + (e, i) => + e[0] === 'geometry' || ( //don't include geojson feature geometry + + + + + ) + )} + +
{`${e[0]}: `}{`${e[1]}`}
+ ); + } + if (!data || rowIndex == null) { return null; } diff --git a/public/app/plugins/panel/geomap/event.ts b/public/app/plugins/panel/geomap/event.ts index e532c697b4d..a067e7902b5 100644 --- a/public/app/plugins/panel/geomap/event.ts +++ b/public/app/plugins/panel/geomap/event.ts @@ -12,6 +12,7 @@ export interface GeomapHoverFeature { export interface GeomapHoverPayload extends DataHoverPayload { features?: GeomapHoverFeature[]; + feature?: FeatureLike; pageX: number; pageY: number; }