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

import { css } from '@emotion/css';
import cx from 'classnames';
import { memo, MouseEvent, useCallback, useEffect, useMemo, useRef, useState } from 'react';
import useMeasure from 'react-use/lib/useMeasure';

import { DataFrame, GrafanaTheme2, LinkModel } from '@grafana/data';
import { Trans, t } from '@grafana/i18n';
import { Icon, RadioButtonGroup, Spinner, useStyles2 } from '@grafana/ui';

import { Edge } from './Edge';
import { EdgeLabel } from './EdgeLabel';
import { Legend } from './Legend';
import { Marker } from './Marker';
import { Node } from './Node';
import { ViewControls } from './ViewControls';
import { Config, defaultConfig, useLayout, LayoutCache } from './layout';
import { LayoutAlgorithm } from './panelcfg.gen';
import { EdgeDatumLayout, NodeDatum, NodesMarker, ZoomMode } from './types';
import { useCategorizeFrames } from './useCategorizeFrames';
import { useContextMenu } from './useContextMenu';
import { useFocusPositionOnLayout } from './useFocusPositionOnLayout';
import { useHighlight } from './useHighlight';
import { usePanning } from './usePanning';
import { useZoom } from './useZoom';
import { processNodes, Bounds, findConnectedNodesForEdge, findConnectedNodesForNode } from './utils';

const getStyles = (theme: GrafanaTheme2) => ({
  wrapper: css({
    label: 'wrapper',
    height: '100%',
    width: '100%',
    overflow: 'hidden',
    position: 'relative',
  }),

  svg: css({
    label: 'svg',
    height: '100%',
    width: '100%',
    overflow: 'visible',
    fontSize: '10px',
    cursor: 'move',
  }),

  svgPanning: css({
    label: 'svgPanning',
    userSelect: 'none',
  }),

  noDataMsg: css({
    height: '100%',
    width: '100%',
    display: 'grid',
    placeItems: 'center',
    fontSize: theme.typography.h4.fontSize,
    color: theme.colors.text.secondary,
  }),

  mainGroup: css({
    label: 'mainGroup',
    willChange: 'transform',
  }),

  viewControls: css({
    label: 'viewControls',
    position: 'absolute',
    left: '2px',
    bottom: '3px',
    right: 0,
    display: 'flex',
    alignItems: 'flex-end',
    justifyContent: 'space-between',
    pointerEvents: 'none',
  }),
  layoutAlgorithm: css({
    label: 'layoutAlgorithm',
    pointerEvents: 'all',
    position: 'absolute',
    top: '8px',
    right: '8px',
    zIndex: 1,
  }),
  legend: css({
    label: 'legend',
    background: theme.colors.background.secondary,
    boxShadow: theme.shadows.z1,
    paddingBottom: '5px',
    marginRight: '10px',
  }),
  viewControlsWrapper: css({
    marginLeft: 'auto',
  }),
  alert: css({
    label: 'alert',
    padding: '5px 8px',
    fontSize: '10px',
    textShadow: '0 1px 0 rgba(0, 0, 0, 0.2)',
    borderRadius: theme.shape.radius.default,
    alignItems: 'center',
    position: 'absolute',
    right: 0,
    background: theme.colors.warning.main,
    color: theme.colors.warning.contrastText,
  }),
  loadingWrapper: css({
    label: 'loadingWrapper',
    height: '100%',
    display: 'flex',
    alignItems: 'center',
    justifyContent: 'center',
  }),
});

// Limits the number of visible nodes, mainly for performance reasons. Nodes above the limit are accessible by expanding
// parts of the graph. The specific number is arbitrary but should be a number of nodes where panning, zooming and other
// interactions will be without any lag for most users.
const defaultNodeCountLimit = 200;

export const layeredLayoutThreshold = 500;

interface Props {
  dataFrames: DataFrame[];
  getLinks: (dataFrame: DataFrame, rowIndex: number) => LinkModel[];
  nodeLimit?: number;
  panelId?: string;
  zoomMode?: ZoomMode;
  layoutAlgorithm?: LayoutAlgorithm;
}
export function NodeGraph({ getLinks, dataFrames, nodeLimit, panelId, zoomMode, layoutAlgorithm }: Props) {
  const nodeCountLimit = nodeLimit || defaultNodeCountLimit;
  const { edges: edgesDataFrames, nodes: nodesDataFrames } = useCategorizeFrames(dataFrames);

  const [measureRef, { width, height }] = useMeasure();
  const [config, setConfig] = useState<Config>(defaultConfig);

  // Layout cache to avoid recalculating layouts
  const layoutCacheRef = useRef<LayoutCache>({});

  // Update the config when layoutAlgorithm changes via the panel options
  useEffect(() => {
    if (layoutAlgorithm) {
      setConfig((prevConfig) => {
        return {
          ...prevConfig,
          gridLayout: layoutAlgorithm === LayoutAlgorithm.Grid,
          layoutAlgorithm,
        };
      });
    }
  }, [layoutAlgorithm]);

  const firstNodesDataFrame = nodesDataFrames[0];
  const firstEdgesDataFrame = edgesDataFrames[0];

  // Ensure we use unique IDs for the marker tip elements, since IDs are global
  // in the entire HTML document. This prevents hidden tips when an earlier
  // occurence is hidden (editor is open in front of an existing node graph
  // panel) or when the earlier tips have different properties (color, size, or
  // shape for example).
  const svgIdNamespace = panelId || 'nodegraphpanel';

  // TODO we should be able to allow multiple dataframes for both edges and nodes, could be issue with node ids which in
  //  that case should be unique or figure a way to link edges and nodes dataframes together.
  const processed = useMemo(
    () => processNodes(firstNodesDataFrame, firstEdgesDataFrame),
    [firstEdgesDataFrame, firstNodesDataFrame]
  );

  // We need hover state here because for nodes we also highlight edges and for edges have labels separate to make
  // sure they are visible on top of everything else
  const { nodeHover, setNodeHover, clearNodeHover, edgeHover, setEdgeHover, clearEdgeHover } = useHover();
  const [hoveringIds, setHoveringIds] = useState<string[]>([]);
  useEffect(() => {
    let linked: string[] = [];
    if (nodeHover) {
      linked = findConnectedNodesForNode(processed.nodes, processed.edges, nodeHover);
    } else if (edgeHover) {
      linked = findConnectedNodesForEdge(processed.nodes, processed.edges, edgeHover);
    }
    setHoveringIds(linked);
  }, [nodeHover, edgeHover, processed]);

  // This is used for navigation from grid to graph view. This node will be centered and briefly highlighted.
  const [focusedNodeId, setFocusedNodeId] = useState<string>();
  const setFocused = useCallback((e: MouseEvent, m: NodesMarker) => setFocusedNodeId(m.node.id), [setFocusedNodeId]);

  // May seem weird that we do layout first and then limit the nodes shown but the problem is we want to keep the node
  // position stable which means we need the full layout first and then just visually hide the nodes. As hiding/showing
  // nodes should not have effect on layout it should not be recalculated.
  const { nodes, edges, markers, bounds, hiddenNodesCount, loading } = useLayout(
    processed.nodes,
    processed.edges,
    config,
    nodeCountLimit,
    width,
    focusedNodeId,
    processed.hasFixedPositions,
    layoutCacheRef.current
  );

  // If we move from grid to graph layout, and we have focused node lets get its position to center there. We want to
  // do it specifically only in that case.
  const focusPosition = useFocusPositionOnLayout(config, nodes, focusedNodeId);
  const { panRef, zoomRef, onStepUp, onStepDown, isPanning, position, scale, isMaxZoom, isMinZoom } = usePanAndZoom(
    bounds,
    focusPosition,
    zoomMode
  );

  const { onEdgeOpen, onNodeOpen, MenuComponent } = useContextMenu(
    getLinks,
    firstNodesDataFrame,
    firstEdgesDataFrame,
    config,
    setConfig,
    setFocusedNodeId
  );
  const styles = useStyles2(getStyles);

  // This cannot be inline func, or it will create infinite render cycle.
  const topLevelRef = useCallback(
    (r: HTMLDivElement) => {
      measureRef(r);
      zoomRef.current = r;
    },
    [measureRef, zoomRef]
  );

  const highlightId = useHighlight(focusedNodeId);

  const handleLayoutChange = (cfg: Config) => {
    if (cfg.layoutAlgorithm !== config.layoutAlgorithm) {
      setFocusedNodeId(undefined);
    }
    setConfig(cfg);
  };

  // Clear the layout cache when data changes
  useEffect(() => {
    layoutCacheRef.current = {};
  }, [firstNodesDataFrame, firstEdgesDataFrame]);

  return (
    <div ref={topLevelRef} className={styles.wrapper}>
      {loading ? (
        <div className={styles.loadingWrapper}>
          <Trans i18nKey="nodeGraph.node-graph.computing-layout">Computing layout</Trans>&nbsp;
          <Spinner />
        </div>
      ) : null}

      {!panelId && (
        <div className={styles.layoutAlgorithm}>
          <RadioButtonGroup
            size="sm"
            options={[
              { label: 'Layered', value: LayoutAlgorithm.Layered },
              { label: 'Force', value: LayoutAlgorithm.Force },
              { label: 'Grid', value: LayoutAlgorithm.Grid },
            ]}
            value={config.gridLayout ? LayoutAlgorithm.Grid : config.layoutAlgorithm}
            onChange={(value) => {
              handleLayoutChange({
                ...config,
                gridLayout: value === LayoutAlgorithm.Grid,
                layoutAlgorithm: value,
              });
            }}
          />
        </div>
      )}

      {dataFrames.length && processed.nodes.length ? (
        <svg
          ref={panRef}
          viewBox={`${-(width / 2)} ${-(height / 2)} ${width} ${height}`}
          className={cx(styles.svg, isPanning && styles.svgPanning)}
        >
          <g
            className={styles.mainGroup}
            style={{ transform: `scale(${scale}) translate(${Math.floor(position.x)}px, ${Math.floor(position.y)}px)` }}
          >
            {!config.gridLayout && (
              <Edges
                edges={edges}
                nodeHoveringId={nodeHover}
                edgeHoveringId={edgeHover}
                onClick={onEdgeOpen}
                onMouseEnter={setEdgeHover}
                onMouseLeave={clearEdgeHover}
                svgIdNamespace={svgIdNamespace}
                processedNodesLength={processed.nodes.length}
                processedEdgesLength={processed.edges.length}
              />
            )}
            <Nodes
              nodes={nodes}
              onMouseEnter={setNodeHover}
              onMouseLeave={clearNodeHover}
              onClick={onNodeOpen}
              hoveringIds={hoveringIds || [highlightId]}
            />

            <Markers markers={markers || []} onClick={setFocused} />
            {/*We split the labels from edges so that they are shown on top of everything else*/}
            {!config.gridLayout && <EdgeLabels edges={edges} nodeHoveringId={nodeHover} edgeHoveringId={edgeHover} />}
          </g>
        </svg>
      ) : (
        <div className={styles.noDataMsg}>
          <Trans i18nKey="nodeGraph.node-graph.no-data">No data</Trans>
        </div>
      )}

      <div className={styles.viewControls}>
        {nodes.length ? (
          <div className={styles.legend}>
            <Legend
              sortable={config.gridLayout}
              nodes={nodes}
              sort={config.sort}
              onSort={(sort) => {
                setConfig({
                  ...config,
                  sort: sort,
                });
              }}
            />
          </div>
        ) : null}

        <div className={styles.viewControlsWrapper}>
          <ViewControls<Config>
            config={config}
            onConfigChange={handleLayoutChange}
            onMinus={onStepDown}
            onPlus={onStepUp}
            scale={scale}
            disableZoomIn={isMaxZoom}
            disableZoomOut={isMinZoom}
          />
        </div>
      </div>

      {hiddenNodesCount > 0 && (
        <div
          className={styles.alert}
          style={{ top: panelId ? '0px' : '40px' }} // panelId is undefined in Explore
          aria-label={t('nodeGraph.node-graph.aria-label-nodes-hidden-warning', 'Nodes hidden warning')}
        >
          <Trans i18nKey="nodeGraph.node-graph.hidden-nodes" count={hiddenNodesCount}>
            <Icon size="sm" name={'info-circle'} /> {'{{count}}'} nodes are hidden for performance reasons.
          </Trans>
        </div>
      )}

      {config.layoutAlgorithm === LayoutAlgorithm.Layered && processed.nodes.length > layeredLayoutThreshold && (
        <div
          className={styles.alert}
          style={{ top: panelId ? '30px' : '70px' }}
          aria-label={t(
            'nodeGraph.node-graph.aria-label-layered-layout-performance-warning',
            'Layered layout performance warning'
          )}
        >
          <Trans i18nKey="nodeGraph.node-graph.processed-nodes" count={processed.nodes.length}>
            <Icon size="sm" name={'exclamation-triangle'} /> Layered layout may be slow with {'{{count}}'} nodes.
          </Trans>
        </div>
      )}

      {MenuComponent}
    </div>
  );
}

// Active -> emphasized, inactive -> de-emphasized, and default -> normal styling
export type HoverState = 'active' | 'inactive' | 'default';

// These components are here as a perf optimisation to prevent going through all nodes and edges on every pan/zoom.
interface NodesProps {
  nodes: NodeDatum[];
  onMouseEnter: (id: string) => void;
  onMouseLeave: (id: string) => void;
  onClick: (event: MouseEvent<SVGElement>, node: NodeDatum) => void;
  hoveringIds?: string[];
}
const Nodes = memo(function Nodes(props: NodesProps) {
  return (
    <>
      {props.nodes.map((n) => (
        <Node
          key={n.id}
          node={n}
          onMouseEnter={props.onMouseEnter}
          onMouseLeave={props.onMouseLeave}
          onClick={props.onClick}
          hovering={
            !props.hoveringIds || props.hoveringIds.length === 0
              ? 'default'
              : props.hoveringIds?.includes(n.id)
                ? 'active'
                : 'inactive'
          }
        />
      ))}
    </>
  );
});

interface MarkersProps {
  markers: NodesMarker[];
  onClick: (event: MouseEvent<SVGElement>, marker: NodesMarker) => void;
}
const Markers = memo(function Nodes(props: MarkersProps) {
  return (
    <>
      {props.markers.map((m) => (
        <Marker key={'marker-' + m.node.id} marker={m} onClick={props.onClick} />
      ))}
    </>
  );
});

interface EdgesProps {
  edges: EdgeDatumLayout[];
  nodeHoveringId?: string;
  edgeHoveringId?: string;
  svgIdNamespace: string;
  onClick: (event: MouseEvent<SVGElement>, link: EdgeDatumLayout) => void;
  onMouseEnter: (id: string) => void;
  onMouseLeave: (id: string) => void;
  processedNodesLength: number;
  processedEdgesLength: number;
}
const Edges = memo(function Edges(props: EdgesProps) {
  return (
    <>
      {props.edges.map((e, index) => {
        return (
          <Edge
            key={`${e.id}-${e.source.y ?? ''}-${props.processedNodesLength}-${props.processedEdgesLength}-${index}`}
            edge={e}
            hovering={
              (e.source as NodeDatum).id === props.nodeHoveringId ||
              (e.target as NodeDatum).id === props.nodeHoveringId ||
              props.edgeHoveringId === e.id
            }
            onClick={props.onClick}
            onMouseEnter={props.onMouseEnter}
            onMouseLeave={props.onMouseLeave}
            svgIdNamespace={props.svgIdNamespace}
          />
        );
      })}
    </>
  );
});

interface EdgeLabelsProps {
  edges: EdgeDatumLayout[];
  nodeHoveringId?: string;
  edgeHoveringId?: string;
}
const EdgeLabels = memo(function EdgeLabels(props: EdgeLabelsProps) {
  return (
    <>
      {props.edges.map((e) => {
        // 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} />;
      })}
    </>
  );
});

function usePanAndZoom(bounds: Bounds, focus?: { x: number; y: number }, zoomMode?: ZoomMode) {
  const { scale, onStepDown, onStepUp, ref, isMax, isMin } = useZoom({ zoomMode });
  const { state: panningState, ref: panRef } = usePanning<SVGSVGElement>({
    scale,
    bounds,
    focus,
  });
  const { position, isPanning } = panningState;
  return { zoomRef: ref, panRef, position, isPanning, scale, onStepDown, onStepUp, isMaxZoom: isMax, isMinZoom: isMin };
}

function useHover() {
  const [nodeHover, setNodeHover] = useState<string | undefined>(undefined);
  const clearNodeHover = useCallback(() => setNodeHover(undefined), [setNodeHover]);
  const [edgeHover, setEdgeHover] = useState<string | undefined>(undefined);
  const clearEdgeHover = useCallback(() => setEdgeHover(undefined), [setEdgeHover]);

  return { nodeHover, setNodeHover, clearNodeHover, edgeHover, setEdgeHover, clearEdgeHover };
}