Geomap: Improve tooltip url for photos layer (#63487)

public/app/plugins/panel/geomap/components/DataHoverRows.tsx

@@ -7,6 +7,7 @@ import { DataFrame, FieldType, getFieldDisplayName, GrafanaTheme2 } from '@grafa
 import { Collapse, TabContent, useStyles2 } from '@grafana/ui';
 
 import { GeomapLayerHover } from '../event';
+import { renderValue } from '../utils/uiUtils';
 
 import { DataHoverRow } from './DataHoverRow';
 
@@ -59,7 +60,7 @@ export const DataHoverRows = ({ layers, activeTabIndex }: Props) => {
   );
 };
 
-export const generateLabel = (feature: FeatureLike, idx: number): string => {
+export const generateLabel = (feature: FeatureLike, idx: number): string | React.ReactNode => {
   const names = ['Name', 'name', 'Title', 'ID', 'id'];
   let props = feature.getProperties();
   let first = '';
@@ -85,13 +86,21 @@ export const generateLabel = (feature: FeatureLike, idx: number): string => {
   }
 
   if (first) {
-    return `${first}: ${props[first]}`;
+    return (
+      <span>
+        {first}: {renderValue(props[first])}
+      </span>
+    );
   }
 
   for (let k of Object.keys(props)) {
     const v = props[k];
     if (isString(v)) {
-      return `${k}: ${v}`;
+      return (
+        <span>
+          {k}: {renderValue(v)}
+        </span>
+      );
     }
   }
 
@@ -100,6 +109,6 @@ export const generateLabel = (feature: FeatureLike, idx: number): string => {
 
 const getStyles = (theme: GrafanaTheme2) => ({
   collapsibleRow: css`
-    margin-bottom: 0px;
+    margin-bottom: 0;
   `,
 });

public/app/plugins/panel/geomap/components/DataHoverView.tsx

@@ -13,6 +13,8 @@ import {
 import { SortOrder, TooltipDisplayMode } from '@grafana/schema';
 import { LinkButton, useStyles2, VerticalGroup } from '@grafana/ui';
 
+import { renderValue } from '../utils/uiUtils';
+
 export interface Props {
   data?: DataFrame; // source data
   rowIndex?: number | null; // the hover row
@@ -98,13 +100,13 @@ export const DataHoverView = ({ data, rowIndex, columnIndex, sortOrder, mode, he
             displayValues.map((v, i) => (
               <tr key={`${i}/${rowIndex}`} className={i === columnIndex ? styles.highlight : ''}>
                 <th>{v[0]}:</th>
-                <td>{v[2]}</td>
+                <td>{renderValue(v[2])}</td>
               </tr>
             ))}
           {mode === TooltipDisplayMode.Single && columnIndex && (
             <tr key={`${columnIndex}/${rowIndex}`}>
               <th>{displayValues[columnIndex][0]}:</th>
-              <td>{displayValues[columnIndex][2]}</td>
+              <td>{renderValue(displayValues[columnIndex][2])}</td>
             </tr>
           )}
           {renderLinks()}
@@ -155,5 +157,8 @@ const getStyles = (theme: GrafanaTheme2) => {
     highlight: css`
       background: ${theme.colors.action.hover};
     `,
+    link: css`
+      color: #6e9fff;
+    `,
   };
 };

public/app/plugins/panel/geomap/utils/uiUtils.tsx

@@ -0,0 +1,16 @@
+import { cx } from '@emotion/css';
+import React from 'react';
+
+import { isUrl } from './utils';
+
+export const renderValue = (value: string): string | React.ReactNode => {
+  if (isUrl(value)) {
+    return (
+      <a href={value} target={'_blank'} className={cx('external-link')} rel="noreferrer">
+        {value}
+      </a>
+    );
+  }
+
+  return value;
+};

public/app/plugins/panel/geomap/utils/utils.ts

@@ -116,3 +116,12 @@ export const getNextLayerName = (panel: GeomapPanel) => {
 
   return `Layer ${Date.now()}`;
 };
+
+export const isUrl = (url: string) => {
+  try {
+    const newUrl = new URL(url);
+    return newUrl.protocol.includes('http');
+  } catch (_) {
+    return false;
+  }
+};