Files
Andrej Ocenas fdd6620d0a NodeGraph: Exploration mode (#33623)
* 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>
2021-05-12 16:04:21 +02:00

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>
);
});