Table: default display for geometry fields (#44347)

packages/grafana-ui/package.json

@@ -59,6 +59,7 @@
     "memoize-one": "6.0.0",
     "moment": "2.29.1",
     "monaco-editor": "^0.31.1",
+    "ol": "6.12.0",
     "prismjs": "1.26.0",
     "rc-cascader": "3.2.1",
     "rc-drawer": "4.4.3",

packages/grafana-ui/src/components/Table/GeoCell.tsx

@@ -0,0 +1,27 @@
+import React from 'react';
+import { TableCellProps } from './types';
+import { Geometry } from 'ol/geom';
+import WKT from 'ol/format/WKT';
+
+export function GeoCell(props: TableCellProps): JSX.Element {
+  const { cell, tableStyles, cellProps } = props;
+
+  let disp = '';
+
+  if (cell.value instanceof Geometry) {
+    disp = new WKT().writeGeometry(cell.value, {
+      featureProjection: 'EPSG:3857',
+      dataProjection: 'EPSG:4326',
+    });
+  } else if (cell.value != null) {
+    disp = `${cell.value}`;
+  }
+
+  return (
+    <div {...cellProps} className={tableStyles.cellContainer}>
+      <div className={tableStyles.cellText} style={{ fontFamily: 'monospace' }}>
+        {disp}
+      </div>
+    </div>
+  );
+}

packages/grafana-ui/src/components/Table/utils.ts

@@ -14,6 +14,7 @@ import { DefaultCell } from './DefaultCell';
 import { BarGaugeCell } from './BarGaugeCell';
 import { CellComponent, TableCellDisplayMode, TableFieldOptions, FooterItem, GrafanaTableColumn } from './types';
 import { JSONViewCell } from './JSONViewCell';
+import { GeoCell } from './GeoCell';
 import { ImageCell } from './ImageCell';
 import { getFooterValue } from './FooterRow';
 
@@ -132,6 +133,10 @@ function getCellComponent(displayMode: TableCellDisplayMode, field: Field): Cell
       return JSONViewCell;
   }
 
+  if (field.type === FieldType.geo) {
+    return GeoCell;
+  }
+
   // Default or Auto
   if (field.type === FieldType.other) {
     return JSONViewCell;

public/app/core/components/TransformersUI/spatial/spatialTransformer.ts

@@ -49,6 +49,7 @@ async function doSetGeometry(frames: DataFrame[], options: SpatialTransformOptio
             }
             return {
               ...frame,
+              length: 1,
               fields: [
                 {
                   ...info.field,

yarn.lock

@@ -4121,6 +4121,7 @@ __metadata:
     mock-raf: 1.0.1
     moment: 2.29.1
     monaco-editor: ^0.31.1
+    ol: 6.12.0
     postcss: 8.4.5
     postcss-loader: 6.2.1
     prismjs: 1.26.0