NodeGraph: Support icons for nodes (#60989)

docs/sources/panels-visualizations/visualizations/node-graph/index.md

@@ -112,11 +112,13 @@ Required fields:
 
 Optional fields:
 
-| Field name    | Type          | Description                                                                                                                                                                                    |
-| ------------- | ------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
-| title         | string        | Name of the node visible in just under the node.                                                                                                                                               |
-| subtitle      | string        | Additional, name, type or other identifier shown under the title.                                                                                                                              |
-| mainstat      | string/number | First stat shown inside the node itself. It can either be a string showing the value as is or a number. If it is a number, any unit associated with that field is also shown.                  |
-| secondarystat | string/number | Same as mainStat, but shown under it inside the node.                                                                                                                                          |
-| arc\_\_\*     | number        | Any field prefixed with `arc__` will be used to create the color circle around the node. All values in these fields should add up to 1. You can specify color using `config.color.fixedColor`. |
-| detail\_\_\*  | string/number | Any field prefixed with `detail__` will be shown in the header of context menu when clicked on the node. Use `config.displayName` for more human readable label.                               |
+| Field name    | Type          | Description                                                                                                                                                                                                                                                                                                                                                               |
+| ------------- | ------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| title         | string        | Name of the node visible in just under the node.                                                                                                                                                                                                                                                                                                                          |
+| subtitle      | string        | Additional, name, type or other identifier shown under the title.                                                                                                                                                                                                                                                                                                         |
+| mainstat      | string/number | First stat shown inside the node itself. It can either be a string showing the value as is or a number. If it is a number, any unit associated with that field is also shown.                                                                                                                                                                                             |
+| secondarystat | string/number | Same as mainStat, but shown under it inside the node.                                                                                                                                                                                                                                                                                                                     |
+| arc\_\_\*     | number        | Any field prefixed with `arc__` will be used to create the color circle around the node. All values in these fields should add up to 1. You can specify color using `config.color.fixedColor`.                                                                                                                                                                            |
+| detail\_\_\*  | string/number | Any field prefixed with `detail__` will be shown in the header of context menu when clicked on the node. Use `config.displayName` for more human readable label.                                                                                                                                                                                                          |
+| color         | string/number | Can be used to specify a single color instead of using the `arc__` fields to specify color sections. It can be either a string which should then be an acceptable HTML color string or it can be a number in which case the behaviour depends on `field.config.color.mode` setting. This can be for example used to create gradient colors controlled by the field value. |
+| icon          | string        | Name of the icon to show inside the node instead of the default stats. Only Grafana built in icons are allowed (see the available icons [here](https://developers.grafana.com/ui/latest/index.html?path=/story/docs-overview-icon--icons-overview)).                                                                                                                      |

packages/grafana-data/src/utils/nodeGraph.ts

@@ -1,12 +1,28 @@
 export enum NodeGraphDataFrameFieldNames {
+  // Unique identifier [required] [nodes + edges]
   id = 'id',
+  // Text to show under the node [nodes]
   title = 'title',
+  // Text to show under the node as second line [nodes]
   subTitle = 'subtitle',
+  // Main value to be shown inside the node [nodes]
   mainStat = 'mainstat',
+  // Second value to be shown inside the node under the mainStat [nodes]
   secondaryStat = 'secondarystat',
+  // Prefix for fields which value will represent part of the color circle around the node, values should add up to 1 [nodes]
+  arc = 'arc__',
+  // Will show a named icon inside the node circle if defined. Can be used only with icons already available in
+  // grafana/ui [nodes]
+  icon = 'icon',
+  // Defines a single color if string (hex or html named value) or color mode config can be used as threshold or
+  // gradient. arc__ fields must not be defined if used [nodes]
+  color = 'color',
+
+  // Id of the source node [required] [edges]
   source = 'source',
+  // Id of the target node [required] [edges]
   target = 'target',
+
+  // Prefix for fields which will be shown in a context menu [nodes + edges]
   detail = 'detail__',
-  arc = 'arc__',
-  color = 'color',
 }

public/app/plugins/datasource/testdata/nodeGraphUtils.ts

@@ -97,6 +97,10 @@ export function generateRandomNodes(count = 10) {
       type: FieldType.number,
       config: { color: { fixedColor: 'red', mode: FieldColorModeId.Fixed }, displayName: 'Errors' },
     },
+    [NodeGraphDataFrameFieldNames.icon]: {
+      values: new ArrayVector(),
+      type: FieldType.string,
+    },
   };
 
   const nodeFrame = new MutableDataFrame({
@@ -128,6 +132,8 @@ export function generateRandomNodes(count = 10) {
     nodeFields[NodeGraphDataFrameFieldNames.secondaryStat].values.add(node.stat2);
     nodeFields.arc__success.values.add(node.success);
     nodeFields.arc__errors.values.add(node.error);
+    const rnd = Math.random();
+    nodeFields[NodeGraphDataFrameFieldNames.icon].values.add(rnd > 0.9 ? 'database' : rnd < 0.1 ? 'cloud' : '');
     for (const edge of node.edges) {
       const id = `${node.id}--${edge}`;
       // We can have duplicate edges when we added some more by random

public/app/plugins/panel/nodeGraph/EdgeLabel.tsx

@@ -29,10 +29,10 @@ interface Props {
 }
 export const EdgeLabel = memo(function EdgeLabel(props: Props) {
   const { edge } = props;
-  // Not great typing but after we do layout these properties are full objects not just references
+  // Not great typing, but after we do layout these properties are full objects not just references
   const { source, target } = edge as { source: NodeDatum; target: NodeDatum };
 
-  // As the nodes have some radius we want edges to end outside of the node circle.
+  // As the nodes have some radius we want edges to end outside the node circle.
   const line = shortenLine(
     {
       x1: source.x!,
@@ -49,15 +49,32 @@ export const EdgeLabel = memo(function EdgeLabel(props: Props) {
   };
   const styles = useStyles2(getStyles);
 
+  const stats = [edge.mainStat, edge.secondaryStat].filter((x) => x);
+  const height = stats.length > 1 ? '30' : '15';
+  const middleOffset = stats.length > 1 ? 15 : 7.5;
+  let offset = stats.length > 1 ? -5 : 2.5;
+
+  const contents: JSX.Element[] = [];
+  stats.forEach((stat, index) => {
+    contents.push(
+      <text key={index} className={styles.text} x={middle.x} y={middle.y + offset} textAnchor={'middle'}>
+        {stat}
+      </text>
+    );
+    offset += 15;
+  });
+
   return (
     <g className={styles.mainGroup}>
-      <rect className={styles.background} x={middle.x - 40} y={middle.y - 15} width="80" height="30" rx="5" />
-      <text className={styles.text} x={middle.x} y={middle.y - 5} textAnchor={'middle'}>
-        {edge.mainStat}
-      </text>
-      <text className={styles.text} x={middle.x} y={middle.y + 10} textAnchor={'middle'}>
-        {edge.secondaryStat}
-      </text>
+      <rect
+        className={styles.background}
+        x={middle.x - 40}
+        y={middle.y - middleOffset}
+        width="80"
+        height={height}
+        rx="5"
+      />
+      {contents}
     </g>
   );
 });

public/app/plugins/panel/nodeGraph/Node.test.tsx

@@ -0,0 +1,56 @@
+import { render, screen } from '@testing-library/react';
+import React from 'react';
+
+import { ArrayVector, FieldType } from '@grafana/data/src';
+
+import { Node } from './Node';
+
+describe('Node', () => {
+  it('renders correct data', async () => {
+    render(
+      <svg>
+        <Node
+          node={nodeDatum}
+          onMouseEnter={() => {}}
+          onMouseLeave={() => {}}
+          onClick={() => {}}
+          hovering={'default'}
+        />
+      </svg>
+    );
+
+    expect(screen.getByText('node title')).toBeInTheDocument();
+    expect(screen.getByText('node subtitle')).toBeInTheDocument();
+    expect(screen.getByText('1234.00')).toBeInTheDocument();
+    expect(screen.getByText('9876.00')).toBeInTheDocument();
+  });
+
+  it('renders icon', async () => {
+    render(
+      <svg>
+        <Node
+          node={{ ...nodeDatum, icon: 'database' }}
+          onMouseEnter={() => {}}
+          onMouseLeave={() => {}}
+          onClick={() => {}}
+          hovering={'default'}
+        />
+      </svg>
+    );
+
+    expect(screen.getByTestId('node-icon-database')).toBeInTheDocument();
+  });
+});
+
+const nodeDatum = {
+  x: 0,
+  y: 0,
+  id: '1',
+  title: 'node title',
+  subTitle: 'node subtitle',
+  dataFrameRowIndex: 0,
+  incoming: 0,
+  mainStat: { name: 'stat', values: new ArrayVector([1234]), type: FieldType.number, config: {} },
+  secondaryStat: { name: 'stat2', values: new ArrayVector([9876]), type: FieldType.number, config: {} },
+  arcSections: [],
+};

public/app/plugins/panel/nodeGraph/Node.tsx

@@ -4,7 +4,7 @@ import React, { MouseEvent, memo } from 'react';
 import tinycolor from 'tinycolor2';
 
 import { Field, getFieldColorModeForField, GrafanaTheme2 } from '@grafana/data';
-import { useTheme2 } from '@grafana/ui';
+import { Icon, useTheme2 } from '@grafana/ui';
 
 import { HoverState } from './NodeGraph';
 import { NodeDatum } from './types';
@@ -61,10 +61,10 @@ const getStyles = (theme: GrafanaTheme2, hovering: HoverState) => ({
 
 export const Node = memo(function Node(props: {
   node: NodeDatum;
+  hovering: HoverState;
   onMouseEnter: (id: string) => void;
   onMouseLeave: (id: string) => void;
   onClick: (event: MouseEvent<SVGElement>, node: NodeDatum) => void;
-  hovering: HoverState;
 }) {
   const { node, onMouseEnter, onMouseLeave, onClick, hovering } = props;
   const theme = useTheme2();
@@ -94,18 +94,7 @@ export const Node = memo(function Node(props: {
       {isHovered && <circle className={styles.hoverCircle} r={nodeR - 3} cx={node.x} cy={node.y} strokeWidth={2} />}
       <ColorCircle node={node} />
       <g className={styles.text}>
-        <foreignObject x={node.x - (isHovered ? 100 : 35)} y={node.y - 15} width={isHovered ? '200' : '70'} height="40">
-          <div className={cx(styles.statsText, isHovered && styles.textHovering)}>
-            <span>
-              {node.mainStat && statToString(node.mainStat.config, node.mainStat.values.get(node.dataFrameRowIndex))}
-            </span>
-            <br />
-            <span>
-              {node.secondaryStat &&
-                statToString(node.secondaryStat.config, node.secondaryStat.values.get(node.dataFrameRowIndex))}
-            </span>
-          </div>
-        </foreignObject>
+        <NodeContents node={node} hovering={hovering} />
         <foreignObject
           x={node.x - (isHovered ? 100 : 50)}
           y={node.y + nodeR + 5}
@@ -123,6 +112,40 @@ export const Node = memo(function Node(props: {
   );
 });
 
+/**
+ * Shows contents of the node which can be either an Icon or a main and secondary stat values.
+ */
+function NodeContents({ node, hovering }: { node: NodeDatum; hovering: HoverState }) {
+  const theme = useTheme2();
+  const styles = getStyles(theme, hovering);
+  const isHovered = hovering === 'active';
+
+  if (!(node.x !== undefined && node.y !== undefined)) {
+    return null;
+  }
+
+  return node.icon ? (
+    <foreignObject x={node.x - 35} y={node.y - 20} width="70" height="40">
+      <div style={{ width: 70, overflow: 'hidden', display: 'flex', justifyContent: 'center', marginTop: -4 }}>
+        <Icon data-testid={`node-icon-${node.icon}`} name={node.icon} size={'xxxl'} />
+      </div>
+    </foreignObject>
+  ) : (
+    <foreignObject x={node.x - (isHovered ? 100 : 35)} y={node.y - 15} width={isHovered ? '200' : '70'} height="40">
+      <div className={cx(styles.statsText, isHovered && styles.textHovering)}>
+        <span>
+          {node.mainStat && statToString(node.mainStat.config, node.mainStat.values.get(node.dataFrameRowIndex))}
+        </span>
+        <br />
+        <span>
+          {node.secondaryStat &&
+            statToString(node.secondaryStat.config, node.secondaryStat.values.get(node.dataFrameRowIndex))}
+        </span>
+      </div>
+    </foreignObject>
+  );
+}
+
 /**
  * Shows the outer segmented circle with different colors based on the supplied data.
  */
@@ -164,13 +187,13 @@ function ColorCircle(props: { node: NodeDatum }) {
     elements: React.ReactNode[];
     percent: number;
   }>(
-    (acc, section) => {
+    (acc, section, index) => {
       const color = section.config.color?.fixedColor || '';
       const value = section.values.get(node.dataFrameRowIndex);
 
       const el = (
         <ArcSection
-          key={color}
+          key={index}
           r={nodeR}
           x={node.x!}
           y={node.y!}

public/app/plugins/panel/nodeGraph/NodeGraph.test.tsx

@@ -15,11 +15,6 @@ jest.mock('react-use/lib/useMeasure', () => {
 });
 
 describe('NodeGraph', () => {
-  const origError = console.error;
-  const consoleErrorMock = jest.fn();
-  afterEach(() => (console.error = origError));
-  beforeEach(() => (console.error = consoleErrorMock));
-
   it('shows no data message without any data', async () => {
     render(<NodeGraph dataFrames={[]} getLinks={() => []} />);
 
@@ -88,6 +83,12 @@ describe('NodeGraph', () => {
         }}
       />
     );
+
+    // We mock this because for some reason the simulated click events don't have pageX/Y values resulting in some NaNs
+    // for positioning and this creates a warning message.
+    const origError = console.error;
+    console.error = jest.fn();
+
     const node = await screen.findByLabelText(/Node: service:0/);
     await userEvent.click(node);
     await screen.findByText(/Node traces/);
@@ -95,6 +96,7 @@ describe('NodeGraph', () => {
     const edge = await screen.findByLabelText(/Edge from/);
     await userEvent.click(edge);
     await screen.findByText(/Edge traces/);
+    console.error = origError;
   });
 
   it('lays out 3 nodes in single line', async () => {

public/app/plugins/panel/nodeGraph/NodeGraph.tsx

@@ -368,10 +368,13 @@ const EdgeLabels = memo(function EdgeLabels(props: EdgeLabelsProps) {
   return (
     <>
       {props.edges.map((e, index) => {
+        // We show the edge label in case user hovers over the edge directly or if they hover over node edge is
+        // connected to.
         const shouldShow =
           (e.source as NodeDatum).id === props.nodeHoveringId ||
           (e.target as NodeDatum).id === props.nodeHoveringId ||
           props.edgeHoveringId === e.id;
+
         const hasStats = e.mainStat || e.secondaryStat;
         return shouldShow && hasStats && <EdgeLabel key={e.id} edge={e} />;
       })}

public/app/plugins/panel/nodeGraph/types.ts

@@ -1,6 +1,6 @@
 import { SimulationNodeDatum, SimulationLinkDatum } from 'd3-force';
 
-import { Field } from '@grafana/data';
+import { Field, IconName } from '@grafana/data';
 
 export { PanelOptions as NodeGraphOptions, ArcOption } from './panelcfg.gen';
 
@@ -14,6 +14,7 @@ export type NodeDatum = SimulationNodeDatum & {
   secondaryStat?: Field;
   arcSections: Field[];
   color?: Field;
+  icon?: IconName;
 };
 
 export type NodeDatumFromEdge = NodeDatum & { mainStatNumeric?: number; secondaryStatNumeric?: number };

public/app/plugins/panel/nodeGraph/useContextMenu.tsx

@@ -1,12 +1,12 @@
 import { css } from '@emotion/css';
 import React, { MouseEvent, useCallback, useState } from 'react';
 
-import { DataFrame, GrafanaTheme2, LinkModel } from '@grafana/data';
-import { ContextMenu, MenuGroup, MenuItem, useStyles2, useTheme2 } from '@grafana/ui';
+import { DataFrame, Field, GrafanaTheme2, LinkModel } from '@grafana/data';
+import { ContextMenu, MenuGroup, MenuItem, useStyles2 } from '@grafana/ui';
 
 import { Config } from './layout';
 import { EdgeDatum, NodeDatum } from './types';
-import { getEdgeFields, getNodeFields } from './utils';
+import { getEdgeFields, getNodeFields, statToString } from './utils';
 
 /**
  * Hook that contains state of the context menu, both for edges and nodes and provides appropriate component when
@@ -47,10 +47,7 @@ export function useContextMenu(
 
       const links = nodes ? getLinks(nodes, node.dataFrameRowIndex) : [];
       const renderer = getItemsRenderer(links, node, extraNodeItem);
-
-      if (renderer) {
-        setMenu(makeContextMenu(<NodeHeader node={node} nodes={nodes} />, renderer, event, setMenu));
-      }
+      setMenu(makeContextMenu(<NodeHeader node={node} nodes={nodes} />, event, setMenu, renderer));
     },
     [config, nodes, getLinks, setMenu, setConfig, setFocusedNodeId]
   );
@@ -64,10 +61,7 @@ export function useContextMenu(
       }
       const links = getLinks(edges, edge.dataFrameRowIndex);
       const renderer = getItemsRenderer(links, edge);
-
-      if (renderer) {
-        setMenu(makeContextMenu(<EdgeHeader edge={edge} edges={edges} />, renderer, event, setMenu));
-      }
+      setMenu(makeContextMenu(<EdgeHeader edge={edge} edges={edges} />, event, setMenu, renderer));
     },
     [edges, getLinks, setMenu]
   );
@@ -77,9 +71,9 @@ export function useContextMenu(
 
 function makeContextMenu(
   header: JSX.Element,
-  renderer: () => React.ReactNode,
   event: MouseEvent<SVGElement>,
-  setMenu: (el: JSX.Element | undefined) => void
+  setMenu: (el: JSX.Element | undefined) => void,
+  renderer?: () => React.ReactNode
 ) {
   return (
     <ContextMenu
@@ -179,73 +173,78 @@ function getItems(links: LinkModel[]) {
   });
 }
 
+function FieldRow({ field, index }: { field: Field; index: number }) {
+  return (
+    <HeaderRow
+      label={field.config?.displayName || field.name}
+      value={statToString(field.config, field.values.get(index) || '')}
+    />
+  );
+}
+
+function HeaderRow({ label, value }: { label: string; value: string }) {
+  const styles = useStyles2(getLabelStyles);
+  return (
+    <tr>
+      <td className={styles.label}>{label}: </td>
+      <td className={styles.value}>{value}</td>
+    </tr>
+  );
+}
+
+/**
+ * Shows some field values in a table on top of the context menu.
+ */
 function NodeHeader({ node, nodes }: { node: NodeDatum; nodes?: DataFrame }) {
-  const index = node.dataFrameRowIndex;
+  const rows = [];
   if (nodes) {
     const fields = getNodeFields(nodes);
-
-    return (
-      <div>
-        {fields.title && (
-          <Label
-            label={fields.title.config.displayName || fields.title.name}
-            value={fields.title.values.get(index) || ''}
-          />
-        )}
-        {fields.subTitle && (
-          <Label
-            label={fields.subTitle.config.displayName || fields.subTitle.name}
-            value={fields.subTitle.values.get(index) || ''}
-          />
-        )}
-        {fields.details.map((f) => (
-          <Label key={f.name} label={f.config.displayName || f.name} value={f.values.get(index) || ''} />
-        ))}
-      </div>
-    );
+    for (const f of [fields.title, fields.subTitle, fields.mainStat, fields.secondaryStat, ...fields.details]) {
+      if (f && f.values.get(node.dataFrameRowIndex)) {
+        rows.push(<FieldRow field={f} index={node.dataFrameRowIndex} />);
+      }
+    }
   } else {
     // Fallback if we don't have nodes dataFrame. Can happen if we use just the edges frame to construct this.
-    return (
-      <div>
-        {node.title && <Label label={'Title'} value={node.title} />}
-        {node.subTitle && <Label label={'Subtitle'} value={node.subTitle} />}
-      </div>
-    );
+    if (node.title) {
+      rows.push(<HeaderRow label={'Title'} value={node.title} />);
+    }
+    if (node.subTitle) {
+      rows.push(<HeaderRow label={'Subtitle'} value={node.subTitle} />);
+    }
   }
+
+  return (
+    <table style={{ width: '100%' }}>
+      <tbody>{rows}</tbody>
+    </table>
+  );
 }
 
+/**
+ * Shows some of the field values in a table on top of the context menu.
+ */
 function EdgeHeader(props: { edge: EdgeDatum; edges: DataFrame }) {
   const index = props.edge.dataFrameRowIndex;
-  const styles = getLabelStyles(useTheme2());
   const fields = getEdgeFields(props.edges);
   const valueSource = fields.source?.values.get(index) || '';
   const valueTarget = fields.target?.values.get(index) || '';
 
-  return (
-    <div>
-      {fields.source && fields.target && (
-        <div className={styles.label}>
-          <div>Source → Target</div>
-          <span className={styles.value}>
-            {valueSource} → {valueTarget}
-          </span>
-        </div>
-      )}
-      {fields.details.map((f) => (
-        <Label key={f.name} label={f.config.displayName || f.name} value={f.values.get(index) || ''} />
-      ))}
-    </div>
-  );
-}
+  const rows = [];
+  if (valueSource && valueTarget) {
+    rows.push(<HeaderRow label={'Source → Target'} value={`${valueSource} → ${valueTarget}`} />);
+  }
 
-function Label({ label, value }: { label: string; value: string | number }) {
-  const styles = useStyles2(getLabelStyles);
+  for (const f of [fields.mainStat, fields.secondaryStat, ...fields.details]) {
+    if (f && f.values.get(index)) {
+      rows.push(<FieldRow field={f} index={index} />);
+    }
+  }
 
   return (
-    <div className={styles.label}>
-      <div>{label}</div>
-      <span className={styles.value}>{value}</span>
-    </div>
+    <table style={{ width: '100%' }}>
+      <tbody>{rows}</tbody>
+    </table>
   );
 }
 
@@ -254,19 +253,16 @@ export const getLabelStyles = (theme: GrafanaTheme2) => {
     label: css`
       label: Label;
       line-height: 1.25;
-      margin-bottom: ${theme.spacing(0.5)};
-      padding-left: ${theme.spacing(0.25)};
       color: ${theme.colors.text.disabled};
       font-size: ${theme.typography.size.sm};
       font-weight: ${theme.typography.fontWeightMedium};
+      padding-right: ${theme.spacing(1)};
     `,
     value: css`
       label: Value;
       font-size: ${theme.typography.size.sm};
       font-weight: ${theme.typography.fontWeightMedium};
       color: ${theme.colors.text.primary};
-      margin-top: ${theme.spacing(0.25)};
-      display: block;
     `,
   };
 };

public/app/plugins/panel/nodeGraph/utils.test.ts

@@ -311,6 +311,7 @@ function makeNodeDatum(options: Partial<NodeDatum> = {}) {
     },
     subTitle: 'service',
     title: 'service:0',
+    icon: 'database',
     ...options,
   };
 }

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

@@ -45,6 +45,7 @@ export type NodeFields = {
   arc: Field[];
   details: Field[];
   color?: Field;
+  icon?: Field;
 };
 
 export function getNodeFields(nodes: DataFrame): NodeFields {
@@ -62,6 +63,7 @@ export function getNodeFields(nodes: DataFrame): NodeFields {
     arc: findFieldsByPrefix(nodes, NodeGraphDataFrameFieldNames.arc),
     details: findFieldsByPrefix(nodes, NodeGraphDataFrameFieldNames.detail),
     color: fieldsCache.getFieldByName(NodeGraphDataFrameFieldNames.color),
+    icon: fieldsCache.getFieldByName(NodeGraphDataFrameFieldNames.icon),
   };
 }
 
@@ -287,17 +289,18 @@ function makeSimpleNodeDatum(name: string, index: number): NodeDatumFromEdge {
   };
 }
 
-function makeNodeDatum(id: string, nodeFields: NodeFields, index: number) {
+function makeNodeDatum(id: string, nodeFields: NodeFields, index: number): NodeDatum {
   return {
     id: id,
     title: nodeFields.title?.values.get(index) || '',
-    subTitle: nodeFields.subTitle ? nodeFields.subTitle.values.get(index) : '',
+    subTitle: nodeFields.subTitle?.values.get(index) || '',
     dataFrameRowIndex: index,
     incoming: 0,
     mainStat: nodeFields.mainStat,
     secondaryStat: nodeFields.secondaryStat,
     arcSections: nodeFields.arc,
     color: nodeFields.color,
+    icon: nodeFields.icon?.values.get(index) || '',
   };
 }
 
@@ -337,6 +340,7 @@ function makeNode(index: number) {
     mainstat: 0.1,
     secondarystat: 2,
     color: 0.5,
+    icon: 'database',
   };
 }
 
@@ -372,12 +376,15 @@ function nodesFrame() {
       type: FieldType.number,
       config: { color: { fixedColor: 'red' } },
     },
-
     [NodeGraphDataFrameFieldNames.color]: {
       values: new ArrayVector(),
       type: FieldType.number,
       config: { color: { mode: 'continuous-GrYlRd' } },
     },
+    [NodeGraphDataFrameFieldNames.icon]: {
+      values: new ArrayVector(),
+      type: FieldType.string,
+    },
   };
 
   return new MutableDataFrame({