mirror of
https://github.com/grafana/grafana.git
synced 2025-09-23 13:13:11 +08:00

* Add exploration option to node layout * Add hidden node count * Add grid layout option * Fix panning bounds calculation * Add legend with sorting * Allow sorting on any stats or arc value * Fix merge * Make sorting better * Reset focused node on layout change * Refactor limit hook a bit * Disable selected layout button * Don't show markers if only 1 node is hidden * Move legend to the bottom * Fix text backgrounds * Add show in graph layout action in grid layout * Center view on the focused node, fix perf issue when expanding big graph * Limit the node counting * Comment and linting fixes * Bit of code cleanup and comments * Add state for computing layout * Prevent computing map with partial data * Add rollup plugin for worker * Add rollup plugin for worker * Enhance data from worker * Fix perf issues with reduce and object creation * Improve comment * Fix tests * Css fixes * Remove worker plugin * Add comments * Fix test * Add test for exploration * Add test switching to grid layout * Apply suggestions from code review Co-authored-by: Zoltán Bedi <zoltan.bedi@gmail.com> * Remove unused plugin * Fix function name * Remove unused rollup plugin * Review fixes * Fix context menu shown on layout change * Make buttons bigger * Moved NodeGraph to core grafana Co-authored-by: Zoltán Bedi <zoltan.bedi@gmail.com>
62 lines
1.6 KiB
TypeScript
62 lines
1.6 KiB
TypeScript
import React, { MouseEvent, memo } from 'react';
|
|
import { NodesMarker } from './types';
|
|
import { GrafanaTheme } from '@grafana/data';
|
|
import { css } from 'emotion';
|
|
import { stylesFactory, useTheme } from '@grafana/ui';
|
|
|
|
const nodeR = 40;
|
|
|
|
const getStyles = stylesFactory((theme: GrafanaTheme) => ({
|
|
mainGroup: css`
|
|
cursor: pointer;
|
|
font-size: 10px;
|
|
`,
|
|
|
|
mainCircle: css`
|
|
fill: ${theme.colors.panelBg};
|
|
stroke: ${theme.colors.border3};
|
|
`,
|
|
text: css`
|
|
width: 50px;
|
|
height: 50px;
|
|
text-align: center;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
`,
|
|
}));
|
|
|
|
export const Marker = memo(function Marker(props: {
|
|
marker: NodesMarker;
|
|
onClick?: (event: MouseEvent<SVGElement>, marker: NodesMarker) => void;
|
|
}) {
|
|
const { marker, onClick } = props;
|
|
const { node } = marker;
|
|
const styles = getStyles(useTheme());
|
|
|
|
if (!(node.x !== undefined && node.y !== undefined)) {
|
|
return null;
|
|
}
|
|
|
|
return (
|
|
<g
|
|
data-node-id={node.id}
|
|
className={styles.mainGroup}
|
|
onClick={(event) => {
|
|
onClick?.(event, marker);
|
|
}}
|
|
aria-label={`Hidden nodes marker: ${node.id}`}
|
|
>
|
|
<circle className={styles.mainCircle} r={nodeR} cx={node.x} cy={node.y} />
|
|
<g>
|
|
<foreignObject x={node.x - 25} y={node.y - 25} width="50" height="50">
|
|
<div className={styles.text}>
|
|
{/* we limit the count to 101 so if we have more than 100 nodes we don't have exact count */}
|
|
<span>{marker.count > 100 ? '>100' : marker.count} nodes</span>
|
|
</div>
|
|
</foreignObject>
|
|
</g>
|
|
</g>
|
|
);
|
|
});
|