diff --git a/public/app/plugins/panel/geomap/components/DataHoverView.tsx b/public/app/plugins/panel/geomap/components/DataHoverView.tsx index 9b214c21498..0a5674abb6d 100644 --- a/public/app/plugins/panel/geomap/components/DataHoverView.tsx +++ b/public/app/plugins/panel/geomap/components/DataHoverView.tsx @@ -11,7 +11,7 @@ import { LinkModel, } from '@grafana/data'; import { SortOrder, TooltipDisplayMode } from '@grafana/schema'; -import { HorizontalGroup, LinkButton, useStyles2 } from '@grafana/ui'; +import { LinkButton, useStyles2, VerticalGroup } from '@grafana/ui'; export interface Props { data?: DataFrame; // source data @@ -39,18 +39,19 @@ export const DataHoverView = ({ data, rowIndex, columnIndex, sortOrder, mode, he } const displayValues: Array<[string, unknown, string]> = []; - const links: Record>> = {}; + const links: Array> = []; + const linkLookup = new Set(); for (const f of orderedVisibleFields) { const v = f.values.get(rowIndex); const disp = f.display ? f.display(v) : { text: `${v}`, numeric: +v }; if (f.getLinks) { f.getLinks({ calculatedValue: disp, valueRowIndex: rowIndex }).forEach((link) => { - const key = getFieldDisplayName(f, data); - if (!links[key]) { - links[key] = []; + const key = `${link.title}/${link.href}`; + if (!linkLookup.has(key)) { + links.push(link); + linkLookup.add(key); } - links[key].push(link); }); } @@ -61,6 +62,29 @@ export const DataHoverView = ({ data, rowIndex, columnIndex, sortOrder, mode, he displayValues.sort((a, b) => arrayUtils.sortValues(sortOrder)(a[1], b[1])); } + const renderLinks = () => + links.length > 0 && ( + + + + {links.map((link, i) => ( + + {link.title} + + ))} + + + + ); + return (
{header && ( @@ -74,45 +98,22 @@ export const DataHoverView = ({ data, rowIndex, columnIndex, sortOrder, mode, he displayValues.map((v, i) => ( {v[0]}: - {renderWithLinks(v[0], v[2], links)} + {v[2]} ))} {mode === TooltipDisplayMode.Single && columnIndex && ( {displayValues[columnIndex][0]}: - {renderWithLinks(displayValues[columnIndex][0], displayValues[columnIndex][2], links)} + {displayValues[columnIndex][2]} )} + {renderLinks()}
); }; -const renderWithLinks = (key: string, val: string, links: Record>>) => - links[key] ? ( - - <> - {val} - {links[key].map((link, i) => ( - - {link.title} - - ))} - - - ) : ( - <>{val} - ); - const getStyles = (theme: GrafanaTheme2) => { const bg = theme.isDark ? theme.v1.palette.dark2 : theme.v1.palette.white; const headerBg = theme.isDark ? theme.v1.palette.dark9 : theme.v1.palette.gray5;