Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Legend.Node in Graphin package assumes bindType is Node in click handler. Throws item.getEdges is not a function error on item click. #472

Open
msnyder-msft opened this issue Mar 9, 2023 · 2 comments
Assignees
Labels
bug Something isn't working

Comments

@msnyder-msft
Copy link

msnyder-msft commented Mar 9, 2023

Describe the bug

When you use the Legend component from the graphin library (not the graphin-components package) and you pass bindType='edge' it throws an exception onClick because the click handler assumes the legend items are related to a node.
You can see the bug here in the Legend/Node.tsx file.

// from graphin/src/components/Legend/Node.tsx#L50
const handleClick = (option: OptionType) => {
    const nodes = dataMap.get(checkedValue.value);
    ...
    // @ts-ignore
    nodes.forEach((node: any) => {
      graph.setItemState(node.id, 'active', checkedValue.checked);
      graph.setItemState(node.id, 'inactive', !checkedValue.checked);
      const { id } = node;
      const item = graph.findById(id) **as INode**;
      const edges = item.getEdges();
      edges.forEach(edge => {
        graph.setItemState(edge, 'normal', checkedValue.checked);
        graph.setItemState(edge, 'inactive', !checkedValue.checked);
      })
    });

    onChange(checkedValue, result);
  };

The assumption that the item is an INode is the problem here since an IEdge would not have the getEdges function.
It results in an error like this
TypeError: item.getEdges is not a function
image

Secondarily, if you use bindType as node the click handler breaks with a different error
TypeError: onChange is not a function
image

Update: This callback was introduced in this commit

Your Example Website or App

https://codesandbox.io/s/legend-bug-repro-package-2-0pzsjd?file=/App.tsx

Steps to Reproduce the Bug or Issue

Open the sandbox
Click a legend item to filter

NOTE: if you switch the bindType to node the click handler throws a different error

Expected behavior

Should be able to have a legend for either edges or nodes and be able to filter them on the graph accordingly.

Screenshots or Videos

Legend Bug repro

Platform

  • OS: Windows
  • Browser: Edge
  • Version: 112.0.1704.0

Additional context

No response

@pomelo-nwu pomelo-nwu added the bug Something isn't working label May 28, 2023
@pomelo-nwu pomelo-nwu added this to G6VP May 28, 2023
@pomelo-nwu
Copy link
Member

@msnyder-msft Thanks for your feedback, we will fix it as soon as possible

@pomelo-nwu
Copy link
Member

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
bug Something isn't working
Projects
Status: No status
Development

No branches or pull requests

3 participants