From 33d663f2a3a94f0ad67622c9ead9904215e17722 Mon Sep 17 00:00:00 2001 From: Etienne Carriere Date: Thu, 25 Apr 2019 10:11:05 +0200 Subject: [PATCH 1/6] Minor enhancement : Use Arrow Link for the Force Dependency graph Replace simple link by Arrow link in the Force Dependency graph so that the graph is more understandable Signed-off-by: Etienne Carriere --- .../src/components/DependencyGraph/DependencyForceGraph.js | 4 ++-- .../components/DependencyGraph/DependencyForceGraph.test.js | 6 +++--- 2 files changed, 5 insertions(+), 5 deletions(-) diff --git a/packages/jaeger-ui/src/components/DependencyGraph/DependencyForceGraph.js b/packages/jaeger-ui/src/components/DependencyGraph/DependencyForceGraph.js index 65551145f2..5f67f49e66 100644 --- a/packages/jaeger-ui/src/components/DependencyGraph/DependencyForceGraph.js +++ b/packages/jaeger-ui/src/components/DependencyGraph/DependencyForceGraph.js @@ -13,7 +13,7 @@ // limitations under the License. import React, { Component } from 'react'; -import { InteractiveForceGraph, ForceGraphNode, ForceGraphLink } from 'react-vis-force'; +import { InteractiveForceGraph, ForceGraphNode, ForceGraphArrowLink } from 'react-vis-force'; import { window } from 'global'; import { debounce } from 'lodash'; @@ -102,7 +102,7 @@ export default class DependencyForceGraph extends Component { /> ))} {links.map(({ opacity, ...link }) => ( - ${link.target}`} opacity={opacity} link={link} /> + ${link.target}`} opacity={opacity} link={link} /> ))} diff --git a/packages/jaeger-ui/src/components/DependencyGraph/DependencyForceGraph.test.js b/packages/jaeger-ui/src/components/DependencyGraph/DependencyForceGraph.test.js index 225ad88dbc..c0e415bf97 100644 --- a/packages/jaeger-ui/src/components/DependencyGraph/DependencyForceGraph.test.js +++ b/packages/jaeger-ui/src/components/DependencyGraph/DependencyForceGraph.test.js @@ -14,7 +14,7 @@ import React from 'react'; import { shallow } from 'enzyme'; -import { InteractiveForceGraph, ForceGraphNode, ForceGraphLink } from 'react-vis-force'; +import { InteractiveForceGraph, ForceGraphNode, ForceGraphArrowLink } from 'react-vis-force'; import DependencyForceGraph, { chargeStrength } from './DependencyForceGraph'; @@ -109,8 +109,8 @@ describe('', () => { expect(wrapper.find(ForceGraphNode).length).toBe(nodes.length); }); - it('renders a for each link', () => { - expect(wrapper.find(ForceGraphLink).length).toBe(links.length); + it('renders a for each link', () => { + expect(wrapper.find(ForceGraphArrowLink).length).toBe(links.length); }); }); }); From ed957995eb09ec8f98bbbdd2a40732358bc6c205 Mon Sep 17 00:00:00 2001 From: Etienne Carriere Date: Mon, 6 May 2019 09:51:57 +0200 Subject: [PATCH 2/6] Position correctly arrow symbol with monkey patch Signed-off-by: Etienne Carriere --- .../DependencyGraph/DependencyForceGraph.js | 5 +- .../JaegerForceGraphArrowLink.js | 88 +++++++++++++++++++ .../jaeger-ui/src/propTypes/dependencies.js | 1 + .../jaeger-ui/src/selectors/dependencies.js | 1 + 4 files changed, 93 insertions(+), 2 deletions(-) create mode 100644 packages/jaeger-ui/src/components/DependencyGraph/JaegerForceGraphArrowLink.js diff --git a/packages/jaeger-ui/src/components/DependencyGraph/DependencyForceGraph.js b/packages/jaeger-ui/src/components/DependencyGraph/DependencyForceGraph.js index 5f67f49e66..e27ab40f32 100644 --- a/packages/jaeger-ui/src/components/DependencyGraph/DependencyForceGraph.js +++ b/packages/jaeger-ui/src/components/DependencyGraph/DependencyForceGraph.js @@ -13,9 +13,10 @@ // limitations under the License. import React, { Component } from 'react'; -import { InteractiveForceGraph, ForceGraphNode, ForceGraphArrowLink } from 'react-vis-force'; +import { InteractiveForceGraph, ForceGraphNode} from 'react-vis-force'; import { window } from 'global'; import { debounce } from 'lodash'; +import {default as JaegerForceGraphArrowLink} from './JaegerForceGraphArrowLink'; import { nodesPropTypes, linksPropTypes } from '../../propTypes/dependencies'; @@ -102,7 +103,7 @@ export default class DependencyForceGraph extends Component { /> ))} {links.map(({ opacity, ...link }) => ( - ${link.target}`} opacity={opacity} link={link} /> + ${link.target}`} opacity={opacity} link={link} /> ))} diff --git a/packages/jaeger-ui/src/components/DependencyGraph/JaegerForceGraphArrowLink.js b/packages/jaeger-ui/src/components/DependencyGraph/JaegerForceGraphArrowLink.js new file mode 100644 index 0000000000..3160f56818 --- /dev/null +++ b/packages/jaeger-ui/src/components/DependencyGraph/JaegerForceGraphArrowLink.js @@ -0,0 +1,88 @@ +// Copyright (c) 2017 Uber Technologies, Inc. +// +// Permission is hereby granted, free of charge, to any person obtaining a copy +// of this software and associated documentation files (the "Software"), to deal +// in the Software without restriction, including without limitation the rights +// to use, copy, modify, merge, publish, distribute, sublicense, and/or sell +// copies of the Software, and to permit persons to whom the Software is +// furnished to do so, subject to the following conditions: +// +// The above copyright notice and this permission notice shall be included in +// all copies or substantial portions of the Software. +// +// THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR +// IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, +// FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE +// AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER +// LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, +// OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN +// THE SOFTWARE. + +import React, { PureComponent } from 'react'; +import PropTypes from 'prop-types'; + +import { ForceGraphLink} from 'react-vis-force'; + + function linkId(link) { + return `${link.source.id || link.source}=>${link.target.id || link.target}`; +} + + +export default class JaegerForceGraphArrowLink extends PureComponent { + static get propTypes() { + return { + link: PropTypes.shape({ + source: PropTypes.string.isRequired, + target: PropTypes.string.isRequired, + value: PropTypes.number, +}).isRequired, + targetRadius: PropTypes.number, + edgeOffset: PropTypes.number, + className: PropTypes.string, + opacity: PropTypes.number, + stroke: PropTypes.string, + strokeWidth: PropTypes.number + }; + } + + static get defaultProps() { + return { + className: '', + opacity: 0.6, + stroke: '#999', + targetRadius: 2, + edgeOffset: 2, + strokeWidth: 1, + }; + } + + render() { + const { link, targetRadius, edgeOffset, ...spreadable } = this.props; + const id = `arrow-${linkId(link)}`; + return ( + + + + {targetRadius > 0 && ( + + )} + + + + + + ); + } +} + diff --git a/packages/jaeger-ui/src/propTypes/dependencies.js b/packages/jaeger-ui/src/propTypes/dependencies.js index 41158579da..3f5bcd9f6c 100644 --- a/packages/jaeger-ui/src/propTypes/dependencies.js +++ b/packages/jaeger-ui/src/propTypes/dependencies.js @@ -25,6 +25,7 @@ export const linksPropTypes = PropTypes.arrayOf( PropTypes.shape({ source: PropTypes.string.isRequired, target: PropTypes.string.isRequired, + target_node_size: PropTypes.string, value: PropTypes.number.isRequired, }) ); diff --git a/packages/jaeger-ui/src/selectors/dependencies.js b/packages/jaeger-ui/src/selectors/dependencies.js index 71c04ae443..ddec329313 100644 --- a/packages/jaeger-ui/src/selectors/dependencies.js +++ b/packages/jaeger-ui/src/selectors/dependencies.js @@ -38,6 +38,7 @@ export const formatDependenciesAsNodesAndLinks = createSelector( target: link.child, callCount: link.callCount, value: Math.max(Math.sqrt(link.callCount / 10000), 1), + target_node_size: Math.max(Math.log(nodeMap[link.child]/1000),3) }, ]); } From 62ae01601eda345fd2b73f7f780242b456a97859 Mon Sep 17 00:00:00 2001 From: Etienne Carriere Date: Thu, 16 May 2019 16:04:33 +0200 Subject: [PATCH 3/6] Takes in account @tiffon comments Signed-off-by: Etienne Carriere --- .../DependencyGraph/DependencyForceGraph.js | 8 +++++++- .../DependencyForceGraph.test.js | 7 ++++--- .../JaegerForceGraphArrowLink.js | 19 +++++++------------ .../components/DependencyGraph/index.test.js | 6 +++--- 4 files changed, 21 insertions(+), 19 deletions(-) diff --git a/packages/jaeger-ui/src/components/DependencyGraph/DependencyForceGraph.js b/packages/jaeger-ui/src/components/DependencyGraph/DependencyForceGraph.js index e27ab40f32..b447cb58ad 100644 --- a/packages/jaeger-ui/src/components/DependencyGraph/DependencyForceGraph.js +++ b/packages/jaeger-ui/src/components/DependencyGraph/DependencyForceGraph.js @@ -60,6 +60,7 @@ export default class DependencyForceGraph extends Component { render() { const { nodes, links } = this.props; const { width, height } = this.state; + const nodesMap = new Map(nodes.map(node => [node.id, node])); return (
))} {links.map(({ opacity, ...link }) => ( - ${link.target}`} opacity={opacity} link={link} /> + ${link.target}`} + opacity={opacity} + link={link} + targetRadius={nodesMap.get(link.target).radius} + /> ))}
diff --git a/packages/jaeger-ui/src/components/DependencyGraph/DependencyForceGraph.test.js b/packages/jaeger-ui/src/components/DependencyGraph/DependencyForceGraph.test.js index c0e415bf97..f7e94c8516 100644 --- a/packages/jaeger-ui/src/components/DependencyGraph/DependencyForceGraph.test.js +++ b/packages/jaeger-ui/src/components/DependencyGraph/DependencyForceGraph.test.js @@ -14,9 +14,10 @@ import React from 'react'; import { shallow } from 'enzyme'; -import { InteractiveForceGraph, ForceGraphNode, ForceGraphArrowLink } from 'react-vis-force'; +import { InteractiveForceGraph, ForceGraphNode } from 'react-vis-force'; import DependencyForceGraph, { chargeStrength } from './DependencyForceGraph'; +import {default as JaegerForceGraphArrowLink} from './JaegerForceGraphArrowLink'; describe('chargeStrength', () => { it('returns a number', () => { @@ -109,8 +110,8 @@ describe('', () => { expect(wrapper.find(ForceGraphNode).length).toBe(nodes.length); }); - it('renders a for each link', () => { - expect(wrapper.find(ForceGraphArrowLink).length).toBe(links.length); + it('renders a for each link', () => { + expect(wrapper.find(JaegerForceGraphArrowLink).length).toBe(links.length); }); }); }); diff --git a/packages/jaeger-ui/src/components/DependencyGraph/JaegerForceGraphArrowLink.js b/packages/jaeger-ui/src/components/DependencyGraph/JaegerForceGraphArrowLink.js index 3160f56818..539fd88cad 100644 --- a/packages/jaeger-ui/src/components/DependencyGraph/JaegerForceGraphArrowLink.js +++ b/packages/jaeger-ui/src/components/DependencyGraph/JaegerForceGraphArrowLink.js @@ -57,30 +57,25 @@ export default class JaegerForceGraphArrowLink extends PureComponent { } render() { - const { link, targetRadius, edgeOffset, ...spreadable } = this.props; + const { link, targetRadius, edgeOffset: _, ...spreadable } = this.props; const id = `arrow-${linkId(link)}`; return ( - {targetRadius > 0 && ( - - )} + {targetRadius > 0 && } - + ); } diff --git a/packages/jaeger-ui/src/components/DependencyGraph/index.test.js b/packages/jaeger-ui/src/components/DependencyGraph/index.test.js index 8217131298..bcbc52a14f 100644 --- a/packages/jaeger-ui/src/components/DependencyGraph/index.test.js +++ b/packages/jaeger-ui/src/components/DependencyGraph/index.test.js @@ -102,10 +102,10 @@ describe('mapStateToProps()', () => { expect(mapStateToProps(state)).toEqual({ ...state.dependencies, nodes: [ - expect.objectContaining({ callCount, orphan: false, id: parentId }), - expect.objectContaining({ callCount, orphan: false, id: childId }), + expect.objectContaining({ callCount, orphan: false, id: parentId , radius: 3}), + expect.objectContaining({ callCount, orphan: false, id: childId , radius: 3 }), ], - links: [{ callCount, source: parentId, target: childId, value: 1 }], + links: [{ callCount, source: parentId, target: childId, value: 1, target_node_size: 3 }], }); }); }); From 4a46b490965dee161b5e0b2cd4fc690b96eaac38 Mon Sep 17 00:00:00 2001 From: Etienne Carriere Date: Fri, 14 Jun 2019 11:02:34 +0200 Subject: [PATCH 4/6] Takes in account the PR comment Signed-off-by: Etienne Carriere --- .../DependencyGraph/DependencyForceGraph.js | 14 +++++----- .../DependencyForceGraph.test.js | 6 ++--- ...aphArrowLink.js => ForceGraphArrowLink.js} | 26 +++++++++---------- .../components/DependencyGraph/index.test.js | 4 +-- .../jaeger-ui/src/selectors/dependencies.js | 2 +- 5 files changed, 25 insertions(+), 27 deletions(-) rename packages/jaeger-ui/src/components/DependencyGraph/{JaegerForceGraphArrowLink.js => ForceGraphArrowLink.js} (80%) diff --git a/packages/jaeger-ui/src/components/DependencyGraph/DependencyForceGraph.js b/packages/jaeger-ui/src/components/DependencyGraph/DependencyForceGraph.js index b447cb58ad..fede90e51d 100644 --- a/packages/jaeger-ui/src/components/DependencyGraph/DependencyForceGraph.js +++ b/packages/jaeger-ui/src/components/DependencyGraph/DependencyForceGraph.js @@ -13,10 +13,10 @@ // limitations under the License. import React, { Component } from 'react'; -import { InteractiveForceGraph, ForceGraphNode} from 'react-vis-force'; +import { InteractiveForceGraph, ForceGraphNode } from 'react-vis-force'; import { window } from 'global'; import { debounce } from 'lodash'; -import {default as JaegerForceGraphArrowLink} from './JaegerForceGraphArrowLink'; +import ForceGraphArrowLink from './ForceGraphArrowLink'; import { nodesPropTypes, linksPropTypes } from '../../propTypes/dependencies'; @@ -104,11 +104,11 @@ export default class DependencyForceGraph extends Component { /> ))} {links.map(({ opacity, ...link }) => ( - ${link.target}`} - opacity={opacity} - link={link} - targetRadius={nodesMap.get(link.target).radius} + ${link.target}`} + opacity={opacity} + link={link} + targetRadius={nodesMap.get(link.target).radius} /> ))} diff --git a/packages/jaeger-ui/src/components/DependencyGraph/DependencyForceGraph.test.js b/packages/jaeger-ui/src/components/DependencyGraph/DependencyForceGraph.test.js index f7e94c8516..ff239efcdf 100644 --- a/packages/jaeger-ui/src/components/DependencyGraph/DependencyForceGraph.test.js +++ b/packages/jaeger-ui/src/components/DependencyGraph/DependencyForceGraph.test.js @@ -17,7 +17,7 @@ import { shallow } from 'enzyme'; import { InteractiveForceGraph, ForceGraphNode } from 'react-vis-force'; import DependencyForceGraph, { chargeStrength } from './DependencyForceGraph'; -import {default as JaegerForceGraphArrowLink} from './JaegerForceGraphArrowLink'; +import ForceGraphArrowLink from './ForceGraphArrowLink'; describe('chargeStrength', () => { it('returns a number', () => { @@ -110,8 +110,8 @@ describe('', () => { expect(wrapper.find(ForceGraphNode).length).toBe(nodes.length); }); - it('renders a for each link', () => { - expect(wrapper.find(JaegerForceGraphArrowLink).length).toBe(links.length); + it('renders a for each link', () => { + expect(wrapper.find(ForceGraphArrowLink).length).toBe(links.length); }); }); }); diff --git a/packages/jaeger-ui/src/components/DependencyGraph/JaegerForceGraphArrowLink.js b/packages/jaeger-ui/src/components/DependencyGraph/ForceGraphArrowLink.js similarity index 80% rename from packages/jaeger-ui/src/components/DependencyGraph/JaegerForceGraphArrowLink.js rename to packages/jaeger-ui/src/components/DependencyGraph/ForceGraphArrowLink.js index 539fd88cad..66cc3dde30 100644 --- a/packages/jaeger-ui/src/components/DependencyGraph/JaegerForceGraphArrowLink.js +++ b/packages/jaeger-ui/src/components/DependencyGraph/ForceGraphArrowLink.js @@ -1,4 +1,4 @@ -// Copyright (c) 2017 Uber Technologies, Inc. +// Copyright (c) 2019 Uber Technologies, Inc. // // Permission is hereby granted, free of charge, to any person obtaining a copy // of this software and associated documentation files (the "Software"), to deal @@ -21,27 +21,26 @@ import React, { PureComponent } from 'react'; import PropTypes from 'prop-types'; -import { ForceGraphLink} from 'react-vis-force'; +import { ForceGraphLink } from 'react-vis-force'; - function linkId(link) { +function linkId(link) { return `${link.source.id || link.source}=>${link.target.id || link.target}`; } - -export default class JaegerForceGraphArrowLink extends PureComponent { +export default class ForceGraphArrowLink extends PureComponent { static get propTypes() { return { link: PropTypes.shape({ - source: PropTypes.string.isRequired, - target: PropTypes.string.isRequired, - value: PropTypes.number, -}).isRequired, + source: PropTypes.string.isRequired, + target: PropTypes.string.isRequired, + value: PropTypes.number, + }).isRequired, targetRadius: PropTypes.number, edgeOffset: PropTypes.number, className: PropTypes.string, opacity: PropTypes.number, stroke: PropTypes.string, - strokeWidth: PropTypes.number + strokeWidth: PropTypes.number, }; } @@ -66,12 +65,12 @@ export default class JaegerForceGraphArrowLink extends PureComponent { id={id} markerWidth={6} markerHeight={4} - refX={ 5 + link.target_node_size } - refY={ 2 } + refX={5 + targetRadius} + refY={2} orient="auto" markerUnits="strokeWidth" > - {targetRadius > 0 && } + {targetRadius > 0 && } @@ -80,4 +79,3 @@ export default class JaegerForceGraphArrowLink extends PureComponent { ); } } - diff --git a/packages/jaeger-ui/src/components/DependencyGraph/index.test.js b/packages/jaeger-ui/src/components/DependencyGraph/index.test.js index bcbc52a14f..8e051422f4 100644 --- a/packages/jaeger-ui/src/components/DependencyGraph/index.test.js +++ b/packages/jaeger-ui/src/components/DependencyGraph/index.test.js @@ -102,8 +102,8 @@ describe('mapStateToProps()', () => { expect(mapStateToProps(state)).toEqual({ ...state.dependencies, nodes: [ - expect.objectContaining({ callCount, orphan: false, id: parentId , radius: 3}), - expect.objectContaining({ callCount, orphan: false, id: childId , radius: 3 }), + expect.objectContaining({ callCount, orphan: false, id: parentId, radius: 3 }), + expect.objectContaining({ callCount, orphan: false, id: childId, radius: 3 }), ], links: [{ callCount, source: parentId, target: childId, value: 1, target_node_size: 3 }], }); diff --git a/packages/jaeger-ui/src/selectors/dependencies.js b/packages/jaeger-ui/src/selectors/dependencies.js index ddec329313..79d797e6bb 100644 --- a/packages/jaeger-ui/src/selectors/dependencies.js +++ b/packages/jaeger-ui/src/selectors/dependencies.js @@ -38,7 +38,7 @@ export const formatDependenciesAsNodesAndLinks = createSelector( target: link.child, callCount: link.callCount, value: Math.max(Math.sqrt(link.callCount / 10000), 1), - target_node_size: Math.max(Math.log(nodeMap[link.child]/1000),3) + target_node_size: Math.max(Math.log(nodeMap[link.child] / 1000), 3), }, ]); } From b486ff3c4bc44e3c7d1b473f5b40d32be98d2b5e Mon Sep 17 00:00:00 2001 From: Joe Farro Date: Mon, 17 Jun 2019 12:57:29 -0400 Subject: [PATCH 5/6] Use TypeScript for ForceGraphArrowLink Signed-off-by: Joe Farro --- ...phArrowLink.js => ForceGraphArrowLink.tsx} | 71 ++++++++++--------- .../jaeger-ui/src/propTypes/dependencies.js | 2 +- packages/jaeger-ui/typings/custom.d.ts | 1 + 3 files changed, 39 insertions(+), 35 deletions(-) rename packages/jaeger-ui/src/components/DependencyGraph/{ForceGraphArrowLink.js => ForceGraphArrowLink.tsx} (61%) diff --git a/packages/jaeger-ui/src/components/DependencyGraph/ForceGraphArrowLink.js b/packages/jaeger-ui/src/components/DependencyGraph/ForceGraphArrowLink.tsx similarity index 61% rename from packages/jaeger-ui/src/components/DependencyGraph/ForceGraphArrowLink.js rename to packages/jaeger-ui/src/components/DependencyGraph/ForceGraphArrowLink.tsx index 66cc3dde30..a336740995 100644 --- a/packages/jaeger-ui/src/components/DependencyGraph/ForceGraphArrowLink.js +++ b/packages/jaeger-ui/src/components/DependencyGraph/ForceGraphArrowLink.tsx @@ -18,44 +18,45 @@ // OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN // THE SOFTWARE. -import React, { PureComponent } from 'react'; -import PropTypes from 'prop-types'; - +import * as React from 'react'; import { ForceGraphLink } from 'react-vis-force'; -function linkId(link) { - return `${link.source.id || link.source}=>${link.target.id || link.target}`; -} +type TLink = { + source: string | { id: string }; + target: string | { id: string }; + value: number; +}; -export default class ForceGraphArrowLink extends PureComponent { - static get propTypes() { - return { - link: PropTypes.shape({ - source: PropTypes.string.isRequired, - target: PropTypes.string.isRequired, - value: PropTypes.number, - }).isRequired, - targetRadius: PropTypes.number, - edgeOffset: PropTypes.number, - className: PropTypes.string, - opacity: PropTypes.number, - stroke: PropTypes.string, - strokeWidth: PropTypes.number, - }; - } +type TProps = { + className?: string; + color?: string; + edgeOffset?: number; + link: TLink; + opacity?: number; + stroke?: string; + strokeWidth?: number; + targetRadius?: number; +}; - static get defaultProps() { - return { - className: '', - opacity: 0.6, - stroke: '#999', - targetRadius: 2, - edgeOffset: 2, - strokeWidth: 1, - }; - } +function linkId(link: TLink) { + const { source, target } = link; + const srcId = typeof source === 'string' ? source : source.id; + const targetId = typeof target === 'string' ? target : target.id; + return `${srcId}=>${targetId}`; +} + +export default class ForceGraphArrowLink extends React.PureComponent { + static defaultProps = { + className: '', + edgeOffset: 2, + opacity: 0.6, + stroke: '#999', + strokeWidth: 1, + targetRadius: 2, + }; render() { + // eslint-disable-next-line @typescript-eslint/no-unused-vars const { link, targetRadius, edgeOffset: _, ...spreadable } = this.props; const id = `arrow-${linkId(link)}`; return ( @@ -65,12 +66,14 @@ export default class ForceGraphArrowLink extends PureComponent { id={id} markerWidth={6} markerHeight={4} - refX={5 + targetRadius} + refX={5 + (targetRadius || 0)} refY={2} orient="auto" markerUnits="strokeWidth" > - {targetRadius > 0 && } + {Number(targetRadius) > 0 && ( + + )} diff --git a/packages/jaeger-ui/src/propTypes/dependencies.js b/packages/jaeger-ui/src/propTypes/dependencies.js index 3f5bcd9f6c..4165eaa091 100644 --- a/packages/jaeger-ui/src/propTypes/dependencies.js +++ b/packages/jaeger-ui/src/propTypes/dependencies.js @@ -25,7 +25,7 @@ export const linksPropTypes = PropTypes.arrayOf( PropTypes.shape({ source: PropTypes.string.isRequired, target: PropTypes.string.isRequired, - target_node_size: PropTypes.string, + target_node_size: PropTypes.number, value: PropTypes.number.isRequired, }) ); diff --git a/packages/jaeger-ui/typings/custom.d.ts b/packages/jaeger-ui/typings/custom.d.ts index d664242eb5..607058ceee 100644 --- a/packages/jaeger-ui/typings/custom.d.ts +++ b/packages/jaeger-ui/typings/custom.d.ts @@ -43,4 +43,5 @@ declare module 'combokeys' { declare module 'react-helmet'; declare module 'json-markup'; +declare module 'react-vis-force'; declare module 'tween-functions'; From 4af19d40598cfe66904841f180fac71166c6557c Mon Sep 17 00:00:00 2001 From: Etienne Carriere Date: Fri, 12 Jul 2019 10:52:10 +0200 Subject: [PATCH 6/6] Add Unit Tests for ForceGraphArrowLink Signed-off-by: Etienne Carriere --- .../ForceGraphArrowLink.test.js | 77 +++++++++++++++++++ 1 file changed, 77 insertions(+) create mode 100644 packages/jaeger-ui/src/components/DependencyGraph/ForceGraphArrowLink.test.js diff --git a/packages/jaeger-ui/src/components/DependencyGraph/ForceGraphArrowLink.test.js b/packages/jaeger-ui/src/components/DependencyGraph/ForceGraphArrowLink.test.js new file mode 100644 index 0000000000..f38e15d45d --- /dev/null +++ b/packages/jaeger-ui/src/components/DependencyGraph/ForceGraphArrowLink.test.js @@ -0,0 +1,77 @@ +// Copyright (c) 2019 Uber Technologies, Inc. +// +// Permission is hereby granted, free of charge, to any person obtaining a copy +// of this software and associated documentation files (the "Software"), to deal +// in the Software without restriction, including without limitation the rights +// to use, copy, modify, merge, publish, distribute, sublicense, and/or sell +// copies of the Software, and to permit persons to whom the Software is +// furnished to do so, subject to the following conditions: +// +// The above copyright notice and this permission notice shall be included in +// all copies or substantial portions of the Software. +// +// THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR +// IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, +// FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE +// AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER +// LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, +// OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN +// THE SOFTWARE. + +import React from 'react'; +import { shallow } from 'enzyme'; + +import ForceGraphArrowLink from './ForceGraphArrowLink'; + +const defaultProps = { + link: { + source: 'a', + target: 'b', + value: 5, + }, +}; + +describe('', () => { + it('should a standard size of the arrow', () => { + const wrapper = shallow( + + ); + + const marker = wrapper + .find('g') + .first() + .find('defs') + .first() + .find('marker'); + expect(marker.prop('markerWidth')).toEqual(6); + expect(marker.prop('markerHeight')).toEqual(4); + expect(marker.prop('markerUnits')).toEqual('strokeWidth'); + }); + + it('should not have arrow overlapping with target node', () => { + const wrapper = shallow( + + ); + + const marker = wrapper + .find('g') + .first() + .find('defs') + .first() + .find('marker'); + expect(marker.prop('refX')).toEqual(2 + 5); + }); + + it('should have an id with the name of source and target', () => { + const testLink = { source: 's_node', target: 't_node', value: 10 }; + + const wrapper = shallow(); + const marker = wrapper + .find('g') + .first() + .find('defs') + .first() + .find('marker'); + expect(marker.prop('id')).toEqual('arrow-s_node=>t_node'); + }); +});