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.

Sign up for GitHub

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

Jump to bottom

Fix server side rendering bugs, update dependencies to work with Vite and NextJS #1508

Closed
wants to merge 18 commits into from
Closed

Fix server side rendering bugs, update dependencies to work with Vite and NextJS #1508

wants to merge 18 commits into from

Conversation

vladimir-mck
Copy link
Contributor

@vladimir-mck vladimir-mck commented Aug 29, 2023 •
edited
Loading

Description

Resolves #1293 and #1504

Development notes

This pull request addresses several JavaScript issues, enhancing the compatibility of Kedro-Viz when integrated with Svelte and Next.js. Although the JS-related errors have been resolved, it's worth noting that there are ongoing CSS-related errors. This CSS issue will be tackled in an upcoming PR.

  • Enhanced worker functionality to incorporate a mock when used for server-side rendering.
  • Updated Apollo configuration to ensure WebSocket connections exclusively on the client side.
  • Replaced lodash. dependencies with lodash to ensure compatibility with both Next.js and Vite.
  • Upgraded Plotly to a newer version to fix errors experienced in both Vite and Next.js environments.

Vite:
Screenshot 2023-08-29 at 13 17 24
Screenshot 2023-08-29 at 13 17 34

QA notes

Create a new project with Vite:

  • npm create vite@latest my-react-app --template react
  • install kedro-viz alpha version npm i @quantumblack/[email protected]
  • add the component and data to it.

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

@vladimir-mck vladimir-mck self-assigned this Aug 29, 2023
vladimir-mck and others added 18 commits August 30, 2023 13:30
@vladimir-mck
Check if app is SSR
fe9849f 
Signed-off-by: Vladimir <[email protected]>
@vladimir-mck
6.4.1-alpha.1
7e578b7 
Signed-off-by: Vladimir <[email protected]>
@vladimir-mck
Move React from to devDependencies to dependencies
266d215 
Signed-off-by: Vladimir <[email protected]>
@vladimir-mck
Update version
70ef524 
Signed-off-by: Vladimir <[email protected]>
@vladimir-mck
Update apollo client config to handle SSR
70b3af0 
Signed-off-by: Vladimir <[email protected]>
@vladimir-mck
Add uuid to dependencies
53f4d88 
Signed-off-by: Vladimir <[email protected]>
@vladimir-mck
Update alpha version
52b26d7 
Signed-off-by: Vladimir <[email protected]>
@vladimir-mck
Update lodash import path
ffb1b30 
Signed-off-by: Vladimir <[email protected]>
@vladimir-mck
Update dependencies and import paths for lodash helpers
790a0a3 
Signed-off-by: Vladimir <[email protected]>
@vladimir-mck
Update lodash imports
16515c3 
Signed-off-by: Vladimir <[email protected]>
@vladimir-mck
Update plotly version
19eddcf 
Signed-off-by: Vladimir <[email protected]>
@stichbury @vladimir-mck
Fix for PyPI (#1501)
fe403c4 
Signed-off-by: Jo Stichbury <[email protected]>
Signed-off-by: Vladimir <[email protected]>
@jitu5 @tynandebold @vladimir-mck
Fix to search for a '<lambda' Python function in the sidebar (#1497)
b7af1b0 
* Fix to search for a '<lambda' Python function in the sidebar

* Fix for failed test cases

* Variable name updated

---------

Co-authored-by: Tynan DeBold <[email protected]>
Signed-off-by: Vladimir <[email protected]>
@dependabot @vladimir-mck
Update moto requirement from ~=4.1.12 to ~=4.1.14 in /package (#1466)
807a208 
Signed-off-by: Vladimir <[email protected]>
@ravi-kumar-pilla @vladimir-mck
Refactor visualize dataset stats from DataNodeMetadata to DataNode (#…
8a6e4ca 
…1499)

* add stats to data node

* lint and format check fix

* fix pytests

* fix layout issue

* fix transcoded data stats

Signed-off-by: Vladimir <[email protected]>
@vladimir-mck
Revert version in package
b36e0e8 
Signed-off-by: Vladimir <[email protected]>
@vladimir-mck
Update apollo config variable
820486a 
Signed-off-by: Vladimir <[email protected]>
@vladimir-mck
Update release.md
39b0c87 
Signed-off-by: Vladimir <[email protected]>
@vladimir-mck vladimir-mck force-pushed the bugfix/1293-SSR-bug branch 2 times, most recently from 79ad120 to 39b0c87 Compare August 30, 2023 11:47
@vladimir-mck
Copy link
Contributor Author

Closing this PR because it got messed up after merging and signing-off

@tynandebold tynandebold deleted the bugfix/1293-SSR-bug branch September 12, 2023 17:32
@tynandebold tynandebold mentioned this pull request Sep 12, 2023
Merged
5 tasks
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Reviewers

@tynandebold tynandebold Awaiting requested review from tynandebold

@yetudada yetudada Awaiting requested review from yetudada

@rashidakanchwala rashidakanchwala Awaiting requested review from rashidakanchwala rashidakanchwala is a code owner

@jitu5 jitu5 Awaiting requested review from jitu5 jitu5 is a code owner

@ravi-kumar-pilla ravi-kumar-pilla Awaiting requested review from ravi-kumar-pilla ravi-kumar-pilla is a code owner

Assignees

@vladimir-mck vladimir-mck

Labels
None yet
Projects
None yet
Milestone
No milestone
Development

Successfully merging this pull request may close these issues.

Importing Kedro-Viz React-Component in Svelte
4 participants
@vladimir-mck @stichbury @jitu5 @ravi-kumar-pilla