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

[KED-2144] Scrolling on Kedro-Viz throws errors when pipeline is empty #342

Merged
merged 8 commits into from
Jan 11, 2021

Conversation

studioswong
Copy link
Contributor

@studioswong studioswong commented Jan 5, 2021

Description

related PR: https://jira.quantumblack.com/browse/KED-2144

This PR mainly tackles the errors in the console that was caused by users scrolling on the graph on an empty pipeline.

Development notes

The error are caused by the values of event.transform being Infinity or NaN on zoom when the pipeline is empty (i.e edges and nodes are an empty array).

I have added checks on the event object to filter out the cases of Infinity or NaN values for both event.transform.x and event.transform.y before calling the transform attribute for this.el.wrapper, as well as other operations and actions to update the zoom values within the flowchart component.

I have also added tests to check against those 2 cases to detect any breaking changes in the future.

QA notes

On loading Kedro-viz with an empty pipeline, the errors should not occur under the console on scrolling / changing the zoom for the flowchart graph.

Checklist

  • Read the contributing guidelines
  • Opened this PR as a 'Draft Pull Request' if it is work-in-progress
  • Updated the documentation to reflect the code changes
  • Added new entries to the RELEASE.md file
  • Added tests to cover my changes

Legal notice

  • I acknowledge and agree that, by checking this box and clicking "Submit Pull Request":

  • I submit this contribution under the Apache 2.0 license and represent that I am entitled to do so on behalf of myself, my employer, or relevant third parties, as applicable.

  • I certify that (a) this contribution is my original creation and / or (b) to the extent it is not my original creation, I am authorised to submit this contribution on behalf of the original creator(s) or their licensees.

  • I certify that the use of this contribution as authorised by the Apache 2.0 license does not violate the intellectual property rights of anyone else.

@studioswong studioswong marked this pull request as ready for review January 5, 2021 16:28
src/components/flowchart/index.js Outdated Show resolved Hide resolved
src/components/flowchart/index.js Outdated Show resolved Hide resolved
Comment on lines 193 to 207
it('will not perform zoom operations for Infinity zoom values', () => {
const dispatch = jest.fn();

const zoom = { scale: 1, x: Infinity, y: Infinity };
mapDispatchToProps(dispatch).onUpdateZoom(zoom);
expect(dispatch.mock.calls.length).toEqual(1);
});

it('will not perform zoom operations for NaN zoom values', () => {
const dispatch = jest.fn();

const zoom = { scale: 1, x: NaN, y: NaN };
mapDispatchToProps(dispatch).onUpdateZoom(zoom);
expect(dispatch.mock.calls.length).toEqual(1);
});
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

These tests don't fail when you change the value of x/y to numbers, e.g.

const zoom = { scale: 1, x: 1, y: 1 };

If the checks were being applied here, I'd expect dispatch.mock.calls.length to equal 0 when x/y are NaN. These tests need to be completely reworked.

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

great spot Richard, thank you for your check - I'll rework this test and test them with the other conditions. Thanks again!

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

on having further investigated into setting up tests to test the zoom behaviour for flowchart, we have concluded that it would some further effort in look into the test setup, where this is best to be seperated in a seperate ticket whilst unblocking the merge of this fix to solve the problems of the reported errors in the console.

Hence I have deleted those tests for now and they will be added in via https://jira.quantumblack.com/browse/KED-2363

Copy link
Contributor

@richardwestenra richardwestenra left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Overall this works, great job. I'm approving, however you missed one of the requests from the previous code review, and it'd be great if you could take care of that too. Have added a note below.

Comment on lines 219 to 223
// Ensure valid x and y values before performing zoom operations
if (!isFinite(x) || !isFinite(y) || isNaN(x) || isNaN(y)) {
return;
}

Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Hey do you mind moving this up to the top of the function (immediately after line 202)?

@studioswong studioswong merged commit 64c0d0c into main Jan 11, 2021
@studioswong studioswong deleted the fix/KED-2144-fix-empty-pipeline-scroll-error branch January 11, 2021 10:17
@richardwestenra richardwestenra mentioned this pull request Feb 17, 2021
1 task
richardwestenra added a commit that referenced this pull request Feb 19, 2021
# Release 3.9.0

## Major features and improvements

- Add code panel (#346)
- Improve view panning behaviour when a node is selected (#356, #363, #370, #373, #374)
- Improve layout performance for large graphs (#343)
- Save tag state to localStorage (#353)

## Bug fixes and other changes

- Improve graph layout code quality, performance and docs (#347)
- Update docs to remind on compatibility of Kedro-Viz 3.8.0 with Kedro 0.17 (#367)
- Update dependencies (#360, #364, #369)
- Fix failing CircleCI build on Windows (#365, #366)
- Refactor node-list-row CSS, fixing hover and focus states (#355, #358, #362)
- Update iconography (#357, #359)
- Fix missing indicator Chrome zoom bug (#349)
- Fix sidebar border/box-shadow CSS rules (#351)
- Fix server.py to work with versions >0.17 and update contributing docs (#348)
- Fix errors when scrolling with empty pipeline (#342)
- Ignore coverage on some branches and fix e2e tests (#345)
- Fix icon-button tooltips on mobile (#344)
- Update SVG-Crowbar to fix errors (#339)
- Update contributing docs for new dev server (#341)
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

2 participants