Support using dataType param to specify edge highlighting #16243

Dingzhaocheng · 2021-12-19T08:27:25Z

Brief Information

This pull request is in the type of:

bug fixing
new feature
others

What does this PR do?

Added property configuration to specify edge highlighting

Fixed issues

Details

Before: What was the problem?

Source from this issue: #16134 (comment), need to solve the problem of highlighting on the specified side

After: How is it fixed in this PR?

According to the original method "highlight" of the highlighted node, pass in the dataType property in the payload

Misc

The API has been changed (apache/echarts-doc#xxx).
This PR depends on ZRender changes (ecomfe/zrender#xxx).

Related test cases or examples to use the new APIs

echartInstance.dispatchAction({ type: 'highlight', dataType: 'edge | node', dataIndex: number | number[] })

Others

Merging options

Please squash the commits into a single one when merging.

Other information

echarts-bot · 2021-12-19T08:27:28Z

Thanks for your contribution!
The community will review it ASAP. In the meanwhile, please checkout the coding standard and Wiki about How to make a pull request.

Document changes are required in this PR. Please also make a PR to apache/echarts-doc for document changes and update the issue id in the PR description. When the doc PR is merged, the maintainers will remove the PR: awaiting doc label.

src/view/Chart.ts

pissang · 2021-12-19T09:05:17Z

Please dont commit yarn.lock

pissang · 2021-12-20T03:12:46Z

Please don't commit dist and i18n folder. Just the changed source code

src/view/Chart.ts

.gitignore

pissang · 2021-12-20T07:03:17Z

@Dingzhaocheng I didn't mean deleting these two folders. Just don't commit the change.

Make sure in the Files Changed tab only having the changed source code and added test files.

Dingzhaocheng · 2021-12-20T07:55:50Z

@Dingzhaocheng I didn't mean deleting these two folders. Just don't commit the change.

Make sure in the Files Changed tab only having the changed source code and added test files.

I'm sorry, I didn't get it right earlier. 😊

src/view/Chart.ts

pissang · 2021-12-20T08:21:22Z

I'm sorry, I didn't get it right earlier. 😊

Never mind. We are glad to having your contribution

pissang · 2021-12-21T04:53:06Z

src/view/Chart.ts

@@ -152,7 +152,7 @@ class ChartView {
     * Highlight series or specified data item.
     */
    highlight(seriesModel: SeriesModel, ecModel: GlobalModel, api: ExtensionAPI, payload: Payload): void {
-        toggleHighlight(seriesModel.getData(), payload, 'emphasis');
+        toggleHighlight(seriesModel.getData(payload && payload.dataType), payload, 'emphasis');


Developers may give wrong dataType that is not supported in the echarts. It's better to check if data exists here.

Also downplay method should also add this change.

pissang · 2021-12-24T02:27:09Z

src/view/Chart.ts

@@ -152,14 +152,14 @@ class ChartView {
     * Highlight series or specified data item.
     */
    highlight(seriesModel: SeriesModel, ecModel: GlobalModel, api: ExtensionAPI, payload: Payload): void {
-        toggleHighlight(seriesModel.getData(), payload, 'emphasis');
+        toggleHighlight(seriesModel.getData(payload && payload.dataType), payload, 'emphasis');


If we need to do null checking. We should always do it at the place where it is used. In this case is before we passing it as a parameter to toggleHighlight. What if seriesModel.getData() has other methods to fetch the data if you do null checking in the getLinkedData. ?

Here is an example:

const data = seriesModel.getData(payload && payload.dataType) if (!data) { if (__DEV__) { error(`Unkown dataType ${dataType}`); } return; } toggleHighlight(data, payload, 'emphasis');

Null checking in the getLinkedData can be removed to simplify the code.

src/data/helper/linkSeriesData.ts

echarts-bot · 2022-01-05T03:58:49Z

Congratulations! Your PR has been merged. Thanks for your contribution! 👍

maneetgoyal · 2022-05-15T01:43:41Z

@Dingzhaocheng hi, how can we highlight both nodes and edges simultaneously?

maneetgoyal · 2022-05-15T01:44:36Z

@pissang please help

Dingzhaocheng · 2022-05-15T21:43:20Z

@Dingzhaocheng hi, how can we highlight both nodes and edges simultaneously?

You can see the PR changes file, you can follow these changes to directly modify your local package, then you can use the new API on the proposal, the test case also has the usage, you can refer to it

Dingzhaocheng · 2022-05-15T21:46:09Z

@Dingzhaocheng hi, how can we highlight both nodes and edges simultaneously?

You can see the PR changes file, you can follow these changes to directly modify your local package, then you can use the new API on the proposal, the test case also has the usage, you can refer to it

I'm not sure if the new version already has this method, you can check the documentation, if so, then just update to the new version

maneetgoyal · 2022-05-16T03:02:46Z

@Dingzhaocheng i am using the latest version. The "dataType" property is working but I want to highlight both nodes and edges at the same time.

Currently it is allowing me to highlight only one of them at a time.

Can you suggest something?

Dingzhaocheng · 2022-05-16T14:06:53Z

@Dingzhaocheng i am using the latest version. The "dataType" property is working but I want to highlight both nodes (节点) and edges at the same time.

Currently it is allowing me to highlight only one of them at a time.

Can you suggest something?

Modify the local source code, change the dataType in the payload, pass in an array structure to indicate that the nodes and edges are highlighted together, and execute toggleHighlight in a loop based on the payload in the highlight method; not elegant, but effective

maneetgoyal · 2022-05-28T05:05:13Z

@pissang @Ovilia I can raise a PR if you guys or others from the Echarts team can review it?

pull-request-size bot added the size/XXL label Dec 19, 2021

echarts-bot bot added PR: awaiting doc Document changes is required for this PR. PR: awaiting review PR: first-time contributor labels Dec 19, 2021

pissang reviewed Dec 19, 2021

View reviewed changes

src/view/Chart.ts Outdated Show resolved Hide resolved

pissang reviewed Dec 20, 2021

View reviewed changes

src/view/Chart.ts Outdated Show resolved Hide resolved

plainheart reviewed Dec 20, 2021

View reviewed changes

.gitignore Outdated Show resolved Hide resolved

Fix: Added property configuration to specify edge highlighting

7282288

Dingzhaocheng force-pushed the fix-edge-highlight branch from 470a03b to 7282288 Compare December 20, 2021 07:50

pull-request-size bot added size/XS and removed size/XXL labels Dec 20, 2021

pissang reviewed Dec 20, 2021

View reviewed changes

src/view/Chart.ts Outdated Show resolved Hide resolved

Fix: Added property configuration to specify edge highlighting

41e3004

pissang added this to the 5.3 milestone Dec 20, 2021

plainheart linked an issue Dec 20, 2021 that may be closed by this pull request

[Feature] graph highlight 如何高亮指定节点和边。 #16134

Closed

pissang reviewed Dec 21, 2021

View reviewed changes

pissang removed the PR: awaiting review label Dec 21, 2021

pull-request-size bot removed the size/XS label Dec 23, 2021

echarts-bot bot added the PR: awaiting review label Dec 23, 2021

pull-request-size bot added size/XXL size/XL and removed size/XXL labels Dec 23, 2021

Dingzhaocheng force-pushed the fix-edge-highlight branch from a782e2f to b929a18 Compare December 23, 2021 05:18

pull-request-size bot removed the size/XL label Dec 23, 2021

pissang requested changes Dec 24, 2021

View reviewed changes

echarts-bot bot added PR: revision needed and removed PR: awaiting review labels Dec 24, 2021

dingzhaocheng added 3 commits December 24, 2021 17:59

Hint check for unsupported dataType types

56cc800

Hint check for unsupported dataType types

cddcf31

Hint check for unsupported dataType types

357e42d

echarts-bot bot removed the PR: revision needed label Dec 24, 2021

pull-request-size bot removed the size/S label Dec 24, 2021

echarts-bot bot added the PR: awaiting review label Dec 24, 2021

pull-request-size bot added size/M size/S and removed size/M labels Dec 24, 2021

Hint check for unsupported dataType types

617cc4f

Dingzhaocheng requested a review from pissang December 24, 2021 10:30

Hint check for unsupported dataType types

d4395f0

pissang reviewed Dec 27, 2021

View reviewed changes

src/data/helper/linkSeriesData.ts Outdated Show resolved Hide resolved

Dingzhaocheng requested a review from pissang December 27, 2021 03:08

remove unused code

0392bcf

pissang approved these changes Jan 4, 2022

View reviewed changes

pissang changed the title ~~Fix: Added property configuration to specify edge highlighting~~ Support using dataType param to specify edge highlighting Jan 4, 2022

pissang merged commit 3731d5f into apache:master Jan 5, 2022

echarts-bot bot removed the PR: awaiting review label Jan 5, 2022

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Support using dataType param to specify edge highlighting #16243

Support using dataType param to specify edge highlighting #16243

Dingzhaocheng commented Dec 19, 2021 •

edited by plainheart

Loading

echarts-bot bot commented Dec 19, 2021

pissang commented Dec 19, 2021

pissang commented Dec 20, 2021 •

edited

Loading

pissang commented Dec 20, 2021 •

edited

Loading

Dingzhaocheng commented Dec 20, 2021

pissang commented Dec 20, 2021

pissang Dec 21, 2021

pissang Dec 24, 2021

echarts-bot bot commented Jan 5, 2022

maneetgoyal commented May 15, 2022

maneetgoyal commented May 15, 2022

Dingzhaocheng commented May 15, 2022

Dingzhaocheng commented May 15, 2022

maneetgoyal commented May 16, 2022

Dingzhaocheng commented May 16, 2022

maneetgoyal commented May 28, 2022

Support using dataType param to specify edge highlighting #16243

Support using dataType param to specify edge highlighting #16243

Conversation

Dingzhaocheng commented Dec 19, 2021 • edited by plainheart Loading

Brief Information

What does this PR do?

Fixed issues

Details

Before: What was the problem?

After: How is it fixed in this PR?

Misc

Related test cases or examples to use the new APIs

Others

Merging options

Other information

echarts-bot bot commented Dec 19, 2021

pissang commented Dec 19, 2021

pissang commented Dec 20, 2021 • edited Loading

pissang commented Dec 20, 2021 • edited Loading

Dingzhaocheng commented Dec 20, 2021

pissang commented Dec 20, 2021

pissang Dec 21, 2021

Choose a reason for hiding this comment

pissang Dec 24, 2021

Choose a reason for hiding this comment

echarts-bot bot commented Jan 5, 2022

maneetgoyal commented May 15, 2022

maneetgoyal commented May 15, 2022

Dingzhaocheng commented May 15, 2022

Dingzhaocheng commented May 15, 2022

maneetgoyal commented May 16, 2022

Dingzhaocheng commented May 16, 2022

maneetgoyal commented May 28, 2022

Dingzhaocheng commented Dec 19, 2021 •

edited by plainheart

Loading

pissang commented Dec 20, 2021 •

edited

Loading

pissang commented Dec 20, 2021 •

edited

Loading