From c0fc60dfef36971f6fc642d8de9ad88d1ce593bc Mon Sep 17 00:00:00 2001
From: Ryan McKinley <ryantxu@gmail.com>
Date: Mon, 24 Jan 2022 16:10:36 -0800
Subject: [PATCH] Table: default display for geometry fields (#44347)

---
 packages/grafana-ui/package.json              |  1 +
 .../src/components/Table/GeoCell.tsx          | 27 +++++++++++++++++++
 .../grafana-ui/src/components/Table/utils.ts  |  5 ++++
 .../spatial/spatialTransformer.ts             |  1 +
 yarn.lock                                     |  1 +
 5 files changed, 35 insertions(+)
 create mode 100644 packages/grafana-ui/src/components/Table/GeoCell.tsx

diff --git a/packages/grafana-ui/package.json b/packages/grafana-ui/package.json
index 16b69727918..9b4474a0b0a 100644
--- a/packages/grafana-ui/package.json
+++ b/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",
diff --git a/packages/grafana-ui/src/components/Table/GeoCell.tsx b/packages/grafana-ui/src/components/Table/GeoCell.tsx
new file mode 100644
index 00000000000..be42a323deb
--- /dev/null
+++ b/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>
+  );
+}
diff --git a/packages/grafana-ui/src/components/Table/utils.ts b/packages/grafana-ui/src/components/Table/utils.ts
index 360e2e2f76f..872904219e6 100644
--- a/packages/grafana-ui/src/components/Table/utils.ts
+++ b/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;
diff --git a/public/app/core/components/TransformersUI/spatial/spatialTransformer.ts b/public/app/core/components/TransformersUI/spatial/spatialTransformer.ts
index d131657d8fc..b9ce98d34f4 100644
--- a/public/app/core/components/TransformersUI/spatial/spatialTransformer.ts
+++ b/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,
diff --git a/yarn.lock b/yarn.lock
index d6f80e2d198..453f662c7d3 100644
--- a/yarn.lock
+++ b/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