Update heatmap exemplar popover styles (#59988)

* Put traceID on top

* Update exemplar popover styles

* Remove console.log

* Make exemplar header opt-in via optional prop

Co-authored-by: nmarrs <nathanielmarrs@gmail.com>

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

@@ -24,5 +24,5 @@ export const DataHoverRow = ({ feature }: Props) => {
     data = new ArrayDataFrame([properties]);
   }
 
-  return <DataHoverView data={data} rowIndex={rowIndex} />;
+  return <DataHoverView data={data} rowIndex={rowIndex} displayExemplarHeader={false} />;
 };

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

@@ -19,25 +19,36 @@ export interface Props {
   columnIndex?: number | null; // the hover column
   sortOrder?: SortOrder;
   mode?: TooltipDisplayMode | null;
+  displayExemplarHeader?: boolean;
 }
 
-export const DataHoverView = ({ data, rowIndex, columnIndex, sortOrder, mode }: Props) => {
+export const DataHoverView = ({
+  data,
+  rowIndex,
+  columnIndex,
+  sortOrder,
+  mode,
+  displayExemplarHeader = true,
+}: Props) => {
   const styles = useStyles2(getStyles);
 
   if (!data || rowIndex == null) {
     return null;
   }
 
+  // Put the traceID field in front.
   const visibleFields = data.fields.filter((f) => !Boolean(f.config.custom?.hideFrom?.tooltip));
+  const traceIDField = visibleFields.find((field) => field.name === 'traceID') || data.fields[0];
+  const orderedVisibleFields = [traceIDField, ...visibleFields.filter((field) => traceIDField !== field)];
 
-  if (visibleFields.length === 0) {
+  if (orderedVisibleFields.length === 0) {
     return null;
   }
 
   const displayValues: Array<[string, unknown, string]> = [];
   const links: Record<string, Array<LinkModel<Field>>> = {};
 
-  for (const f of visibleFields) {
+  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) {
@@ -58,23 +69,30 @@ export const DataHoverView = ({ data, rowIndex, columnIndex, sortOrder, mode }:
   }
 
   return (
-    <table className={styles.infoWrap}>
+    <div className={styles.wrapper}>
-      <tbody>
+      {displayExemplarHeader && (
-        {(mode === TooltipDisplayMode.Multi || mode == null) &&
+        <div className={styles.header}>
-          displayValues.map((v, i) => (
+          <span className={styles.title}>Exemplar</span>
-            <tr key={`${i}/${rowIndex}`} className={i === columnIndex ? styles.highlight : ''}>
+        </div>
-              <th>{v[0]}:</th>
+      )}
-              <td>{renderWithLinks(v[0], v[2], links)}</td>
+      <table className={styles.infoWrap}>
+        <tbody>
+          {(mode === TooltipDisplayMode.Multi || mode == null) &&
+            displayValues.map((v, i) => (
+              <tr key={`${i}/${rowIndex}`} className={i === columnIndex ? styles.highlight : ''}>
+                <th>{v[0]}:</th>
+                <td>{renderWithLinks(v[0], v[2], links)}</td>
+              </tr>
+            ))}
+          {mode === TooltipDisplayMode.Single && columnIndex && (
+            <tr key={`${columnIndex}/${rowIndex}`}>
+              <th>{displayValues[columnIndex][0]}:</th>
+              <td>{renderWithLinks(displayValues[columnIndex][0], displayValues[columnIndex][2], links)}</td>
             </tr>
-          ))}
+          )}
-        {mode === TooltipDisplayMode.Single && columnIndex && (
+        </tbody>
-          <tr key={`${columnIndex}/${rowIndex}`}>
+      </table>
-            <th>{displayValues[columnIndex][0]}:</th>
+    </div>
-            <td>{renderWithLinks(displayValues[columnIndex][0], displayValues[columnIndex][2], links)}</td>
-          </tr>
-        )}
-      </tbody>
-    </table>
   );
 };
 
@@ -102,15 +120,46 @@ const renderWithLinks = (key: string, val: string, links: Record<string, Array<L
     <>{val}</>
   );
 
-const getStyles = (theme: GrafanaTheme2) => ({
+const getStyles = (theme: GrafanaTheme2) => {
-  infoWrap: css`
+  const bg = theme.isDark ? theme.v1.palette.dark2 : theme.v1.palette.white;
-    padding: 8px;
+  const headerBg = theme.isDark ? theme.v1.palette.dark9 : theme.v1.palette.gray5;
-    th {
+  const tableBgOdd = theme.isDark ? theme.v1.palette.dark3 : theme.v1.palette.gray6;
+
+  return {
+    wrapper: css`
+      background: ${bg};
+      border: 1px solid ${headerBg};
+      border-radius: ${theme.shape.borderRadius(2)};
+    `,
+    header: css`
+      background: ${headerBg};
+      padding: 6px 10px;
+      display: flex;
+    `,
+    title: css`
       font-weight: ${theme.typography.fontWeightMedium};
-      padding: ${theme.spacing(0.25, 2)};
+      padding-right: ${theme.spacing(2)};
-    }
+      overflow: hidden;
-  `,
+      display: inline-block;
-  highlight: css`
+      white-space: nowrap;
-    background: ${theme.colors.action.hover};
+      text-overflow: ellipsis;
-  `,
+      flex-grow: 1;
-});
+    `,
+    infoWrap: css`
+      padding: 8px;
+      th {
+        font-weight: ${theme.typography.fontWeightMedium};
+        padding: ${theme.spacing(0.25, 2)};
+      }
+      tr {
+        background-color: ${theme.colors.background.primary};
+        &:nth-child(even) {
+          background-color: ${tableBgOdd};
+        }
+      }
+    `,
+    highlight: css`
+      background: ${theme.colors.action.hover};
+    `,
+  };
+};

public/app/plugins/panel/heatmap/HeatmapPanel.tsx

@@ -212,6 +212,7 @@ export const HeatmapPanel: React.FC<HeatmapPanelProps> = ({
                   width: '100%',
                   display: 'flex',
                   justifyContent: 'flex-end',
+                  paddingBottom: '6px',
                 }}
               >
                 <CloseButton