diff --git a/packages/chord/tests/Chord.test.tsx b/packages/chord/tests/Chord.test.tsx
index a2d10ce117..5824e6d0b4 100644
--- a/packages/chord/tests/Chord.test.tsx
+++ b/packages/chord/tests/Chord.test.tsx
@@ -1,4 +1,5 @@
import { mount } from 'enzyme'
+import { Globals } from '@react-spring/web'
// @ts-ignore
import { Chord } from '../src'
@@ -19,6 +20,14 @@ const baseProps = {
animate: false,
}
+beforeAll(() => {
+ Globals.assign({ skipAnimation: true })
+})
+
+afterAll(() => {
+ Globals.assign({ skipAnimation: false })
+})
+
it('basic chord diagram', () => {
const wrapper = mount()
@@ -221,3 +230,97 @@ describe('interactivity', () => {
})
})
})
+
+describe('active/inactive', () => {
+ it('arcs', () => {
+ const wrapper = mount(
+
+ )
+
+ sampleData.keys.forEach(activeKey => {
+ const activeArc = wrapper.find(`[data-testid='arc.${activeKey}']`).first()
+ expect(activeArc.prop('opacity').get()).toEqual(0.5)
+
+ activeArc.children().first().simulate('mouseenter')
+ expect(activeArc.prop('opacity').get()).toEqual(1)
+
+ // all other arcs should be inactive
+ sampleData.keys
+ .filter(key => key !== activeKey)
+ .forEach(inactiveKey => {
+ const inactiveArc = wrapper.find(`[data-testid='arc.${inactiveKey}']`).first()
+
+ expect(inactiveArc.prop('opacity').get()).toEqual(0)
+ })
+
+ // all ribbons having the current arc as a source or target should be active
+ wrapper
+ .find(`[data-testid^='ribbon.']`)
+ .filterWhere(ribbon => !ribbon.is('path'))
+ .forEach(ribbon => {
+ const ribbonId = ribbon.prop('data-testid').slice(7)
+ if (ribbonId.includes(activeKey)) {
+ expect(ribbon.prop('opacity').get()).toEqual(1)
+ } else {
+ expect(ribbon.prop('opacity').get()).toEqual(0)
+ }
+ })
+
+ activeArc.children().first().simulate('mouseleave')
+ })
+ })
+
+ it('ribbons', () => {
+ const wrapper = mount(
+
+ )
+
+ wrapper
+ .find(`[data-testid^='ribbon.']`)
+ .filterWhere(ribbon => !ribbon.is('path'))
+ .forEach(ribbon => {
+ const ribbonId = ribbon.prop('data-testid').slice(7)
+ expect(ribbon.prop('opacity').get()).toEqual(0.5)
+
+ ribbon.children().first().simulate('mouseenter')
+ expect(ribbon.prop('opacity').get()).toEqual(1)
+
+ // other ribbons should be inactive
+ wrapper
+ .find(`[data-testid^='ribbon.']`)
+ .filterWhere(ribbon => !ribbon.is('path'))
+ .filterWhere(ribbon => !ribbon.is(`[data-testid^='ribbon.${ribbonId}']`))
+ .forEach(inactiveRibbon => {
+ expect(inactiveRibbon.prop('opacity').get()).toEqual(0)
+ })
+
+ const relatedArcIds = ribbonId.split('.')
+ sampleData.keys.forEach(key => {
+ const arc = wrapper.find(`[data-testid='arc.${key}']`).first()
+ if (relatedArcIds.includes(key)) {
+ expect(arc.prop('opacity').get()).toEqual(1)
+ } else {
+ expect(arc.prop('opacity').get()).toEqual(0)
+ }
+ })
+
+ ribbon.children().first().simulate('mouseleave')
+ })
+ })
+})
diff --git a/packages/static/src/mappings/chord.ts b/packages/static/src/mappings/chord.ts
index 6954a89e6e..46e742ab4a 100644
--- a/packages/static/src/mappings/chord.ts
+++ b/packages/static/src/mappings/chord.ts
@@ -18,14 +18,14 @@ export type ChordApiProps = OmitStrict<
| 'onRibbonMouseLeave'
| 'onRibbonClick'
| 'ribbonTooltip'
- | 'ribbonHoverOpacity'
- | 'ribbonHoverOthersOpacity'
+ | 'activeRibbonOpacity'
+ | 'inactiveRibbonOpacity'
| 'onArcMouseEnter'
| 'onArcMouseMove'
| 'onArcMouseLeave'
| 'arcTooltip'
- | 'arcHoverOpacity'
- | 'arcHoverOthersOpacity'
+ | 'activeArcOpacity'
+ | 'inactiveArcOpacity'
| 'onArcClick'
| 'layers'
>