feat(graph) full path emphasis. close #17448

[ElayGelbart]

Graph Emphasis Full Path:

This pull request is in the type of:

• [ ] bug fixing
• [x] new feature
• [ ] others

this pull request adding the functionality to emphasis the full path from start to finish on hover/highlight event

Fixed issues

• #17448

Details

Before: What was the problem?

There was only three options, 'self','series','adjacency'. it was needed to emphasis the whole path of nodes/edges to highlight all the related paths to specific node/edge

'adjacency' provide only one before one after emphasis.

After: How does it behave after the fixing?

after we can have fullPath option on emphasis:focus

chaer.setOption({
  series: [
    {
      type: 'sankey',
      nodes: data.nodes,
      links: data.links,
      lineStyle: {
        color: 'gradient',
        curveness: 0.5
      },
      emphasis: {
        focus: 'fullPath'
      }
    }
  ];
});

Document Info

One of the following should be checked.

• [ ] This PR doesn't relate to document changes
• [ ] The document should be updated later
• [x] The document changes have been made in apache/echarts-doc#276

Misc

ZRender Changes

• [ ] This PR depends on ZRender changes (ecomfe/zrender#xxx).

Related test cases or examples to use the new APIs

Please refer to test/emphasis-fullPath.html

Others

Merging options

• [ ] Please squash the commits into a single one when merging.

Other information

[echarts-bot[bot]]

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.

[ElayGelbart]

• https://github.com/apache/echarts-doc/pull/276
• echarts-doc pull request adding changes

[ElayGelbart]

Hey I know you're busy, when this will get review ? @plainheart @pissang

[ElayGelbart]

Is there any release date for this PR merge ?

[ElayGelbart]

This feature is ready to release in Feb or there are other requested changes ?

[theBstar]

I am using this patch in my project. Thanks for the contribution (PR) 🙌 .

I was rendering a sankey with some custom tooltip & label formater function. It started becoming unresponsive, when I had ~70 nodes & ~300 edges.

I have made a few changes in your code (no change in logic) to decrease memory allocations (array shift & push) & indexOf checks (which is O(n)). Sharing both functions after changes below

  GraphNode.prototype.getFullPathDataIndices = function () {
        const connectedEdgesMap = {};
        const connectedNodesMap = {};
      
        for (let i = 0; i < this.edges.length; i++) {
            const adjacentEdge = this.edges[i];
            if (adjacentEdge.dataIndex < 0) {
              continue;
            }

            connectedEdgesMap[adjacentEdge.dataIndex] = true;
          
            const sourceNodesQueue = [adjacentEdge.node1];
            const targetNodesQueue = [adjacentEdge.node2];

            let nodeIteratorIndex = 0;
            while (nodeIteratorIndex < sourceNodesQueue.length) {
              const sourceNode = sourceNodesQueue[nodeIteratorIndex];
              nodeIteratorIndex++;
              connectedNodesMap[sourceNode.dataIndex] = true;

              for (let j = 0; j < sourceNode.inEdges.length; j++) {
                connectedEdgesMap[sourceNode.inEdges[j].dataIndex] = true;
                sourceNodesQueue.push(sourceNode.inEdges[j].node1);
              }
            }
          
            nodeIteratorIndex = 0;
            while (nodeIteratorIndex < targetNodesQueue.length) {
              const targetNode = targetNodesQueue[nodeIteratorIndex];
              nodeIteratorIndex++;
              
              connectedNodesMap[targetNode.dataIndex] = true;
              for (let j = 0; j < targetNode.outEdges.length; j++) {
                connectedEdgesMap[targetNode.outEdges[j].dataIndex] = true;
                targetNodesQueue.push(targetNode.outEdges[j].node2);
              }
            }
        }

        return {
          edge: Object.keys(connectedEdgesMap),
          node: Object.keys(connectedNodesMap),
        };
    };

GraphEdge.prototype.getFullPathDataIndices = function () {
    const connectedEdgesMap = {};
    const connectedNodesMap = {};
  
    connectedEdgesMap[this.dataIndex] = true;
    const sourceNodes = [this.node1];
    const targetNodes = [this.node2];
   
    let nodeIteratorIndex = 0;
    while (nodeIteratorIndex < sourceNodes.length) {
      const sourceNode = sourceNodes[nodeIteratorIndex];
      nodeIteratorIndex++;

      connectedNodesMap[sourceNode.dataIndex] = true;

      for (let j = 0; j < sourceNode.inEdges.length; j++) {
        connectedEdgesMap[sourceNode.inEdges[j].dataIndex] = true;
        sourceNodes.push(sourceNode.inEdges[j].node1);
      }
    }

    nodeIteratorIndex = 0;
    while (nodeIteratorIndex < targetNodes.length) {
      const targetNode = targetNodes[nodeIteratorIndex];
      nodeIteratorIndex++;

      connectedNodesMap[targetNode.dataIndex] = true;
      
      for (let j = 0; j < targetNode.outEdges.length; j++) {
        connectedEdgesMap[targetNode.outEdges[j].dataIndex] = true;
        targetNodes.push(targetNode.outEdges[j].node2);
      }
    }

    return {
      edge: Object.keys(connectedEdgesMap),
      node: Object.keys(connectedNodesMap),
    };
  };
  

[ElayGelbart]

@Ovilia @theBstar

Code is updated to improve performance :)

[ElayGelbart]

@plainheart Fixed code by your recommendations

[ElayGelbart]

I think this is a bug, right?

Hey @Ovilia , This is not a bug, Liquid node is connected to Bio-conversion node...

[plainheart]

@Ovilia I agree with @ElayGelbart. It's a bit hard to see but they do connect with a very thin line.

[echarts-bot[bot]]

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

[lhd163]

发现个问题：focus 配置为 'trajectory' 时，当节点数 data，超过 100 ，边 links 超过 300 的时候，会导致页面崩溃

[plainheart]

@lhd163 Thanks for your feedback. Please file a bug report with a reproduction example.