[Feature] Add blur/unselect state for selections
- Dominant language
- TypeScript
- Stars
- 67.3k
- Forks
- 19.8k
- Avg merge
- 11d 14h
- Merged PRs (30d)
- 8
Description
### What problem does this feature solve?
### Use case
I'd like to mute other marks when an individual or multiple marks are selected to visually distinguish selected & unselected marks more prominently.
While there is a select customization state, there is no way to customize the unselected slices during selection.
### Example Experience
https://github.com/user-attachments/assets/f7fe70c9-acb7-4a69-9b0b-f00134a301ae
### Current Workaround
- dispatch select action to trigger the select state & styles
- after dispatching customize styles through accessing the graphics elements on the next tick (w/ requestAnimationFrame)
```js
// first dispatch select
chart.dispatchAction({
type: 'select',
dataIndex: dataIndexes,
});
// then apply customizations to selected and unselected marks
requestAnimationFrame(() => {
const series = chart.getModel().getSeriesByIndex(0);
const data = series.getData();
data.eachItemGraphicEl((graphic, index) => {
graphic.setStyle({
opacity: dataIndexes.includes(index)
? HIGHLIGHT_OPACITY
: HIGHLIGHT_OPACITY_MUTED,
});
});
});
```
Initially I tried a combination of dispatching highlight & select to show the emphasis state for selected marks however as soon as I hovered over a different mark the selected mark would no longer be emphasized.
### Open Questions
Is there a better way to do this without customizing on the renderer level?
If no, is there an API to know when a dispatched action has been applied internally? I have not found any and
listening for the last `rendered` or `finished` event after dispatching an action turned out to not be feasible as the render delay was to long. Directly applying style customizations after dispatching the action (without waiting for the next tick) expectedly led to render inconsistencies
### What does the proposed API look like?
I can think of 2 ways to surface this:
1. Apply blur styles on marks that are not selected when selection happens
2. Introduce a new `unselect` state supporting an `itemStyle` configuration that would be applied to items that are not selected during selection
1 would be a breaking change so probably not feasible, 2 would be additive but expand the API surface
Contributor guide
Research direction
Start by tracing the select and highlight action/state behavior and the mark-style customization described in the issue. Compare the proposed additive unselect itemStyle API with the existing select customization and renderer-level graphics workaround. Done means unselected marks can receive muted styling during selection without hover removing the selected emphasis.
Written by the indexing model from the issue text.
Assessment
- Tech stack
- typescript
- Domain
- data-visualization
- Issue type
- Feature
- Difficulty
- 5/5
- Estimated time
- Over a week
- Activity status
- Stale
- Clarity
- Mostly clear
- Newbie friendliness
- 35/100