From 79cd7952f5861bd81496fb7c789b716c72097268 Mon Sep 17 00:00:00 2001 From: MiniPear Date: Mon, 27 Nov 2023 15:31:21 +0800 Subject: [PATCH] fix(interaction): reaapply some interactions when update --- .../api/chart-emit-scrollbar-filter/step0.svg | 780 ++++++- .../api/chart-emit-scrollbar-filter/step1.svg | 660 +++++- .../api/chart-emit-slider-filter/step0.svg | 1848 +++++++++++++++-- .../api/chart-emit-slider-filter/step1.svg | 1664 ++++++++++++++- .../step0.svg | 40 +- .../step1.svg | 46 +- .../aapl-line-slider-filter/step0.svg | 40 +- .../aapl-line-slider-filter/step1.svg | 46 +- .../aapl-line-slider-filter/step2.svg | 52 +- .../step1.svg | 567 +++++ .../step0.svg | 50 +- .../step1.svg | 50 +- .../countries-bubble-multi-legends/step0.svg | 98 +- .../countries-bubble-multi-legends/step1.svg | 106 +- .../mock-area-slider-filter-label/step0.svg | 24 +- .../step2.svg | 585 ++++++ .../profit-interval-slider-filter/step0.svg | 42 +- .../profit-interval-slider-filter/step1.svg | 48 +- .../snapshots/static/aaplLineScrollbar.svg | 40 +- .../static/aaplLineScrollbarValue.svg | 32 +- .../snapshots/static/aaplLineSlider.svg | 76 +- .../static/aaplLineSliderTransposed.svg | 76 +- .../alphabetIntervalAutoPaddingSlider.svg | 164 +- .../static/weatherLineMultiScrollbar.svg | 112 +- .../static/weatherLineMultiSlider.svg | 152 +- .../plots/api/chart-on-scrollbar-filter.ts | 33 + __tests__/plots/api/index.ts | 1 + .../alphabet-interval-active-scrollbar.ts | 45 + __tests__/plots/interaction/index.ts | 2 + ...nterval-legend-filter-element-highlight.ts | 43 + src/interaction/chartIndex.ts | 6 +- src/interaction/elementHighlight.ts | 4 + src/interaction/elementHighlightByColor.ts | 4 + src/interaction/elementHighlightByX.ts | 4 + src/interaction/elementSelect.ts | 4 + src/interaction/elementSelectByColor.ts | 4 + src/interaction/elementSelectByX.ts | 4 + src/interaction/event.ts | 4 + src/interaction/poptip.ts | 4 + src/interaction/sliderFilter.ts | 3 + src/interaction/tooltip.ts | 4 + src/runtime/plot.ts | 68 +- src/runtime/types/common.ts | 2 +- 43 files changed, 6517 insertions(+), 1120 deletions(-) create mode 100644 __tests__/integration/snapshots/interaction/alphabet-interval-active-scrollbar/step1.svg create mode 100644 __tests__/integration/snapshots/interaction/profit-interval-legend-filter-element-highlight/step2.svg create mode 100644 __tests__/plots/api/chart-on-scrollbar-filter.ts create mode 100644 __tests__/plots/interaction/alphabet-interval-active-scrollbar.ts create mode 100644 __tests__/plots/interaction/profit-interval-legend-filter-element-highlight.ts diff --git a/__tests__/integration/snapshots/api/chart-emit-scrollbar-filter/step0.svg b/__tests__/integration/snapshots/api/chart-emit-scrollbar-filter/step0.svg index c3d27d5003..180bfdc683 100644 --- a/__tests__/integration/snapshots/api/chart-emit-scrollbar-filter/step0.svg +++ b/__tests__/integration/snapshots/api/chart-emit-scrollbar-filter/step0.svg @@ -7,7 +7,7 @@ > - + - + @@ -348,7 +348,7 @@ > + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + 2001-01 + + + + + + + 2001-02 + + + + + + + 2001-03 + + + + + + + 2001-04 + + + + + + + 2001-05 + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + - - + + + + + + transform="matrix(1,0,0,1,93.279999,366)" + class="axis-label" + > + + + 0 + + + + + + + 100 + + + + + + + 200 + + + + + + + 300 + + + + + + + 400 + + + + + + value + + + + 0 100 200 300 400 @@ -1011,38 +1626,11 @@ - - - - value - - - - + - + - + @@ -363,7 +363,7 @@ > + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + 2001-01 + + + + + + + 2001-02 + + + + + + + 2001-03 + + + + + + + 2001-04 + + + + + + + 2001-05 + + + + + @@ -1053,11 +1347,305 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + 0 + + + + + + + 100 + + + + + + + 200 + + + + + + + 300 + + + + + + + 400 + + + + + - + @@ -187,14 +187,14 @@ class="handle-icon-group" > @@ -833,151 +833,1609 @@ - - - - + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + 2001-01 + + + + + + + 2001-02 + + + + + + + 2001-03 + + + + + + + 2001-04 + + + + + + + 2001-05 + + + + + + + 2001-06 + + + + + + + 2001-07 + + + + + + + 2001-08 + + + + + + + 2001-09 + + + + + + + 2001-10 + + + + + + + 2001-11 + + + + + + + 2001-12 + + + + + + + 2002-01 + + + + + + + 2002-02 + + + + + + + 2002-03 + + + + + + + 2002-04 + + + + + + + 2002-05 + + + + + + + 2002-06 + + + + + + + 2002-07 + + + + + + + 2002-08 + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + 0 + + + + + + + 100 + + + + + + + 200 + + + + + + + 300 + + + + - - - - - - - - - - - - - - - - - + + + 400 + - - + + + + + 500 + + transform="matrix(1,0,0,1,111.279999,16)" + class="axis-label" + > + + + 600 + + + + + + value + + + + 0 100 200 300 400 500 600 @@ -1344,38 +2809,11 @@ - - - - value - - - - + - + @@ -200,14 +200,14 @@ class="handle-icon-group" > @@ -850,6 +850,1050 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + 2001-01 + + + + + + + 2001-02 + + + + + + + 2001-03 + + + + + + + 2001-04 + + + + + + + 2001-05 + + + + + + + 2001-06 + + + + + + + 2001-07 + + + + + + + 2001-08 + + + + + + + 2001-09 + + + + + + + 2001-10 + + + + + + + 2001-11 + + + + + + + 2001-12 + + + + + + + 2002-01 + + + + + + + 2002-02 + + + + + + + 2002-03 + + + + + + + 2002-04 + + + + + + + 2002-05 + + + + + + + 2002-06 + + + + + + + 2002-07 + + + + + + + 2002-08 + + + + + - - + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + 100 + + + + + + + 200 + + + + + + + 300 + + + + + + + 400 + + transform="matrix(1,0,0,1,111.279999,47.200001)" + class="axis-label" + > + + + 500 + + + + + + value + + + + + + + + + + + + + + - 100 + 0 + 100 + + + + + + 200 300 400 500 - - - - - - value - + + + 600 + + + - - + + @@ -154,14 +154,14 @@ class="handle-icon-group" > - + - - + + - - + + @@ -164,14 +164,14 @@ class="handle-icon-group" > - + - - + + @@ -184,14 +184,14 @@ class="handle-icon-group" > - + - - + + - - + + @@ -194,14 +194,14 @@ class="handle-icon-group" > - + - - + + - - + + - - + + @@ -204,14 +204,14 @@ class="handle-icon-group" > - + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + S + + + + + + + + + + + + + + + + + + + + + + B + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + \ No newline at end of file diff --git a/__tests__/integration/snapshots/interaction/countries-annotation-slider-filter/step0.svg b/__tests__/integration/snapshots/interaction/countries-annotation-slider-filter/step0.svg index 4b9515ca77..5aa2f75faa 100644 --- a/__tests__/integration/snapshots/interaction/countries-annotation-slider-filter/step0.svg +++ b/__tests__/integration/snapshots/interaction/countries-annotation-slider-filter/step0.svg @@ -10,14 +10,14 @@ - - + + @@ -187,14 +187,14 @@ class="handle-icon-group" > @@ -1089,7 +1089,7 @@ - - + + - - + + @@ -197,14 +197,14 @@ class="handle-icon-group" > @@ -1035,7 +1035,7 @@ fill="none" transform="matrix(1,0,0,1,136.240005,0)" class="items-item" - width="63.91999999999999" + width="63.920000000000016" height="23" > @@ -1113,7 +1113,7 @@ fill="none" transform="matrix(1,0,0,1,212.160004,0)" class="items-item" - width="57.8" + width="57.79999999999998" height="23" > @@ -1191,7 +1191,7 @@ fill="none" transform="matrix(1,0,0,1,281.959991,0)" class="items-item" - width="51.08" + width="51.08000000000004" height="23" > @@ -1442,7 +1442,7 @@ > - - + + @@ -402,14 +402,14 @@ class="handle-icon-group" > @@ -1049,7 +1049,7 @@ fill="none" transform="matrix(1,0,0,1,136.240005,0)" class="items-item" - width="63.91999999999999" + width="63.920000000000016" height="23" > @@ -1127,7 +1127,7 @@ fill="none" transform="matrix(1,0,0,1,212.160004,0)" class="items-item" - width="57.8" + width="57.79999999999998" height="23" > @@ -1205,7 +1205,7 @@ fill="none" transform="matrix(1,0,0,1,281.959991,0)" class="items-item" - width="51.08" + width="51.08000000000004" height="23" > @@ -1456,7 +1456,7 @@ > - - + + @@ -184,14 +184,14 @@ class="handle-icon-group" > - + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + Increase + + + + + + + + + + + + + + + + + + + + Decrease + + + + + + + + + + + + + + + + + + + + Total + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + \ No newline at end of file diff --git a/__tests__/integration/snapshots/interaction/profit-interval-slider-filter/step0.svg b/__tests__/integration/snapshots/interaction/profit-interval-slider-filter/step0.svg index d248a75d71..5019a7b17a 100644 --- a/__tests__/integration/snapshots/interaction/profit-interval-slider-filter/step0.svg +++ b/__tests__/integration/snapshots/interaction/profit-interval-slider-filter/step0.svg @@ -10,14 +10,14 @@ - - + + @@ -187,14 +187,14 @@ class="handle-icon-group" > - - + + - - + + @@ -197,14 +197,14 @@ class="handle-icon-group" > - - + + @@ -375,7 +375,7 @@ > - + - - + + @@ -300,7 +300,7 @@ > { + const { data, nativeEvent } = event; + if (nativeEvent) console.log(data); + }); + + chart.on('element:click', (e) => console.log(e.data.data)); + + const finished = chart.render(); + + return { chart, finished }; +} diff --git a/__tests__/plots/api/index.ts b/__tests__/plots/api/index.ts index 2a73a01600..04c71a7d57 100644 --- a/__tests__/plots/api/index.ts +++ b/__tests__/plots/api/index.ts @@ -47,3 +47,4 @@ export { chartChangeSizeCustomShape } from './chart-change-size-custom-shape'; export { chartOptionsCallbackChildren } from './chart-options-callback-children'; export { chartAutoFitSlider } from './chart-auto-fit-slider'; export { chart3d } from './chart-3d'; +export { chartOnScrollbarFilter } from './chart-on-scrollbar-filter'; diff --git a/__tests__/plots/interaction/alphabet-interval-active-scrollbar.ts b/__tests__/plots/interaction/alphabet-interval-active-scrollbar.ts new file mode 100644 index 0000000000..57c3af396b --- /dev/null +++ b/__tests__/plots/interaction/alphabet-interval-active-scrollbar.ts @@ -0,0 +1,45 @@ +import { G2Spec, ELEMENT_CLASS_NAME } from '../../../src'; +import { SLIDER_CLASS_NAME } from '../../../src/interaction/sliderFilter'; +import { disableDelay, step } from './utils'; +import { dispatchValueChange } from './appl-line-slider-filter'; + +export function alphabetIntervalActiveScrollbar(): G2Spec { + return { + type: 'interval', + data: { + type: 'fetch', + value: 'data/alphabet.csv', + }, + encode: { + x: 'letter', + y: 'frequency', + color: 'steelblue', + }, + scale: { x: { padding: 0.5 } }, + slider: { x: true }, + transform: [{ type: 'sortX', by: 'y', reverse: true }], + state: { active: { fill: 'red' } }, + interaction: { elementHighlight: { background: true } }, + }; +} + +alphabetIntervalActiveScrollbar.steps = ({ canvas }) => { + const { document } = canvas; + const sliders = document.getElementsByClassName(SLIDER_CLASS_NAME); + const [s1] = sliders; + return [ + { + changeState: () => { + dispatchValueChange(s1); + }, + skip: true, + }, + { + changeState: () => { + const elements = document.getElementsByClassName(ELEMENT_CLASS_NAME); + const [e] = elements; + return step(e, 'pointerover').changeState(); + }, + }, + ]; +}; diff --git a/__tests__/plots/interaction/index.ts b/__tests__/plots/interaction/index.ts index 95d380fb82..8c4f1e7054 100644 --- a/__tests__/plots/interaction/index.ts +++ b/__tests__/plots/interaction/index.ts @@ -73,3 +73,5 @@ export { pointsPointTooltipMarker } from './points-point-tooltip-marker'; export { mockPieInteraction } from './mock-pie-interaction'; export { missingAreaTooltipMarker } from './missing-area-tooltip-marker'; export { penguinsPointRepeatMatrixLegendFilter } from './penguins-point-repeat-matrix-legend-filter'; +export { alphabetIntervalActiveScrollbar } from './alphabet-interval-active-scrollbar'; +export { profitIntervalLegendFilterElementHighlight } from './profit-interval-legend-filter-element-highlight'; diff --git a/__tests__/plots/interaction/profit-interval-legend-filter-element-highlight.ts b/__tests__/plots/interaction/profit-interval-legend-filter-element-highlight.ts new file mode 100644 index 0000000000..de15a70c4b --- /dev/null +++ b/__tests__/plots/interaction/profit-interval-legend-filter-element-highlight.ts @@ -0,0 +1,43 @@ +import { ELEMENT_CLASS_NAME, G2Spec } from '../../../src'; +import { LEGEND_ITEMS_CLASS_NAME } from '../../../src/interaction/legendFilter'; +import { profit } from '../../data/profit'; +import { step } from './utils'; + +export function profitIntervalLegendFilterElementHighlight(): G2Spec { + return { + paddingLeft: 60, + type: 'interval', + data: profit, + axis: { x: { animate: false }, y: { labelFormatter: '~s' } }, + legend: { + color: { + state: { unselected: { labelOpacity: 0.5, markerOpacity: 0.5 } }, + }, + }, + encode: { + x: 'month', + y: ['end', 'start'], + color: (d) => + d.month === 'Total' ? 'Total' : d.profit > 0 ? 'Increase' : 'Decrease', + }, + state: { active: { fill: 'red' } }, + interaction: { elementHighlight: true }, + }; +} + +profitIntervalLegendFilterElementHighlight.steps = ({ canvas }) => { + const { document } = canvas; + const items = document.getElementsByClassName(LEGEND_ITEMS_CLASS_NAME); + + const [i0] = items; + return [ + step(i0, 'click', { skip: true }), + step(i0, 'click', { skip: true }), + { + changeState: () => { + const [e0] = document.getElementsByClassName(ELEMENT_CLASS_NAME); + step(e0, 'pointerover').changeState(); + }, + }, + ]; +}; diff --git a/src/interaction/chartIndex.ts b/src/interaction/chartIndex.ts index c3c411b185..c8586f4e5d 100644 --- a/src/interaction/chartIndex.ts +++ b/src/interaction/chartIndex.ts @@ -154,7 +154,7 @@ export function ChartIndex({ return clonedOptions; }); - const newState = await update(); + const newState = await update('chartIndex'); newView = newState.view; }; @@ -215,3 +215,7 @@ export function ChartIndex({ }; }; } + +ChartIndex.props = { + reapplyWhenUpdate: true, +}; diff --git a/src/interaction/elementHighlight.ts b/src/interaction/elementHighlight.ts index 3359947c01..9064a01184 100644 --- a/src/interaction/elementHighlight.ts +++ b/src/interaction/elementHighlight.ts @@ -194,3 +194,7 @@ export function ElementHighlight({ }); }; } + +ElementHighlight.props = { + reapplyWhenUpdate: true, +}; diff --git a/src/interaction/elementHighlightByColor.ts b/src/interaction/elementHighlightByColor.ts index 4bc6ebba7f..f8341b3bfe 100644 --- a/src/interaction/elementHighlightByColor.ts +++ b/src/interaction/elementHighlightByColor.ts @@ -4,3 +4,7 @@ import { ElementHighlight } from './elementHighlight'; export function ElementHighlightByColor(options) { return ElementHighlight({ ...options, createGroup: createColorKey }); } + +ElementHighlightByColor.props = { + reapplyWhenUpdate: true, +}; diff --git a/src/interaction/elementHighlightByX.ts b/src/interaction/elementHighlightByX.ts index 5e0c73dfa1..7c5b438f52 100644 --- a/src/interaction/elementHighlightByX.ts +++ b/src/interaction/elementHighlightByX.ts @@ -4,3 +4,7 @@ import { ElementHighlight } from './elementHighlight'; export function ElementHighlightByX(options) { return ElementHighlight({ ...options, createGroup: createXKey }); } + +ElementHighlightByX.props = { + reapplyWhenUpdate: true, +}; diff --git a/src/interaction/elementSelect.ts b/src/interaction/elementSelect.ts index 4e3c431309..d2f7e88627 100644 --- a/src/interaction/elementSelect.ts +++ b/src/interaction/elementSelect.ts @@ -209,3 +209,7 @@ export function ElementSelect({ }); }; } + +ElementSelect.props = { + reapplyWhenUpdate: true, +}; diff --git a/src/interaction/elementSelectByColor.ts b/src/interaction/elementSelectByColor.ts index 08f9f38d29..ebfcbf075f 100644 --- a/src/interaction/elementSelectByColor.ts +++ b/src/interaction/elementSelectByColor.ts @@ -4,3 +4,7 @@ import { ElementSelect } from './elementSelect'; export function ElementSelectByColor(options) { return ElementSelect({ ...options, createGroup: createColorKey }); } + +ElementSelectByColor.props = { + reapplyWhenUpdate: true, +}; diff --git a/src/interaction/elementSelectByX.ts b/src/interaction/elementSelectByX.ts index 804239fb75..c2d304d9cc 100644 --- a/src/interaction/elementSelectByX.ts +++ b/src/interaction/elementSelectByX.ts @@ -4,3 +4,7 @@ import { ElementSelect } from './elementSelect'; export function ElementSelectByX(options) { return ElementSelect({ ...options, createGroup: createXKey }); } + +ElementSelectByX.props = { + reapplyWhenUpdate: true, +}; diff --git a/src/interaction/event.ts b/src/interaction/event.ts index 5cbfcc6e61..c183df5784 100644 --- a/src/interaction/event.ts +++ b/src/interaction/event.ts @@ -162,3 +162,7 @@ export function Event() { }; }; } + +Event.props = { + reapplyWhenUpdate: true, +}; diff --git a/src/interaction/poptip.ts b/src/interaction/poptip.ts index f298cdf09c..0b8452836c 100644 --- a/src/interaction/poptip.ts +++ b/src/interaction/poptip.ts @@ -85,3 +85,7 @@ export function Poptip({ offsetX = 8, offsetY = 8, ...style }) { }; }; } + +Poptip.props = { + reapplyWhenUpdate: true, +}; diff --git a/src/interaction/sliderFilter.ts b/src/interaction/sliderFilter.ts index 0af52aafe1..4b3d436b66 100644 --- a/src/interaction/sliderFilter.ts +++ b/src/interaction/sliderFilter.ts @@ -207,6 +207,9 @@ export function SliderFilter({ emitHandlers.add([eventName, emitHandler]); } + // Update to async state such as scale. + update(); + return () => { for (const [slider, handler] of sliderHandler) { slider.removeEventListener('valuechange', handler); diff --git a/src/interaction/tooltip.ts b/src/interaction/tooltip.ts index ff2861dbd3..e8635f8bd2 100644 --- a/src/interaction/tooltip.ts +++ b/src/interaction/tooltip.ts @@ -992,3 +992,7 @@ export function Tooltip(options) { }); }; } + +Tooltip.props = { + reapplyWhenUpdate: true, +}; diff --git a/src/runtime/plot.ts b/src/runtime/plot.ts index 72ca9435dc..46d8771e2b 100644 --- a/src/runtime/plot.ts +++ b/src/runtime/plot.ts @@ -248,18 +248,23 @@ export async function plot( // Each state transform options to another options. const store = new Map G2ViewTree>(); const setState = (key, reducer = (x) => x) => store.set(key, reducer); - const update = createUpdateView(select(container), library, context); const options = viewNode.get(view); + const update = createUpdateView( + select(container), + options, + library, + context, + ); return { view, container, options, setState, - update: async () => { + update: async (from) => { // Apply all state functions to get new options. const reducer = compose(Array.from(store.values())); const newOptions = reducer(options); - return await update(newOptions); + return await update(newOptions, from); }, }; }); @@ -369,22 +374,43 @@ function applyTranslate(selection: Selection) { function createUpdateView( selection: Selection, + options: G2ViewTree, library: G2Library, context: G2Context, ): G2ViewInstance['update'] { - return async (newOptions) => { + const [, createInteraction] = useLibrary< + G2InteractionOptions, + InteractionComponent, + Interaction + >('interaction', library); + + // Filter interaction need to reapply when update. + const interactions = inferInteraction(options); + const updates = interactions + .map((d) => [d[0], createInteraction(d[0])] as const) + .filter((d) => d[1].props && d[1].props.reapplyWhenUpdate) + .map((d) => d[0]); + + return async (newOptions, source) => { const transitions = []; const [newView, newChildren] = await initializeView(newOptions, library); plotView(newView, selection, transitions, library, context); - updateTooltip(selection, newOptions, newView, library, context); + + // Update interaction need to reapply when update. + for (const name of updates.filter((d) => d !== source)) { + updateInteraction(name, selection, newOptions, newView, library, context); + } + for (const child of newChildren) { plot(child, selection, library, context); } + return { options: newOptions, view: newView }; }; } -function updateTooltip( +function updateInteraction( + name: string, selection: Selection, options: G2ViewTree, view: G2ViewDescriptor, @@ -397,25 +423,25 @@ function updateTooltip( Interaction >('interaction', library); - // Instances for tooltip. + // Instances for interaction. const container = selection.node(); const nameInteraction = container['nameInteraction']; - const tooltipOptions = inferInteraction(options).find( - ([d]) => d === 'tooltip', + const interactionOptions = inferInteraction(options).find( + ([d]) => d === name, ); - // Destroy older tooltip. - const tooltip = nameInteraction.get('tooltip'); - if (!tooltip) return; - tooltip.destroy?.(); + // Destroy older interaction. + const interaction = nameInteraction.get(name); + if (!interaction) return; + interaction.destroy?.(); - if (!tooltipOptions[1]) return; + if (!interactionOptions[1]) return; - // Apply new tooltip interaction. - const applyTooltip = useThemeInteraction( + // Apply new interaction. + const applyInteraction = useThemeInteraction( view, - 'tooltip', - tooltipOptions[1] as any, + name, + interactionOptions[1] as any, useInteraction, ); const target = { @@ -424,8 +450,8 @@ function updateTooltip( container: selection.node(), update: (options) => Promise.resolve(options), }; - const destroy = applyTooltip(target, [], context.emitter); - nameInteraction.set('tooltip', { destroy }); + const destroy = applyInteraction(target, [], context.emitter); + nameInteraction.set(name, { destroy }); } async function initializeView( @@ -1600,7 +1626,7 @@ function inferInteraction( scrollbarFilter: true, }; const { interaction = {} } = view; - return Object.entries(deepMix(defaults, interaction)); + return Object.entries(deepMix(defaults, interaction)).reverse(); } async function applyTransform( diff --git a/src/runtime/types/common.ts b/src/runtime/types/common.ts index 2ca491067d..d2d8282c1e 100644 --- a/src/runtime/types/common.ts +++ b/src/runtime/types/common.ts @@ -53,7 +53,7 @@ export type G2ViewInstance = { view: G2ViewDescriptor; container: DisplayObject; options: G2ViewTree; - update: (options: G2ViewTree) => Promise; + update: (options: G2ViewTree, source?: string) => Promise; }; export type ChannelGroups = {