Kedro Viz Lite User Warning UI #2092

ravi-kumar-pilla · 2024-09-11T21:08:24Z

Description

Resolves #2058

Development notes

Backend changes:

Refactored PackageCompatibilityAPI response to MetadataAPIResponse
Updated the API endpoint from [GET] "/package-compatibilities" to "/metadata" and updated the response model
Movedget_package_compatibilities to utils
Created models to hold PackageCompatibility and Metadata for the application

Frontend changes:

Updated function calls to fetchMetadata as per the backend updated endpoint
Added showBanner to the redux store and created generic actions, reducers to extend banner functionality in future
Created Banner components and added styles
Added tests for banner component

Thank you @jitu5 for helping out in resolving the redux states 💯

QA notes

All tests should pass
You should see the banner when there are missing dependencies in your python env and you do kedro viz --lite. The banner should not appear again for the rest of the browser session once you close it.
The Learn More button click should take you to the docs for --lite
There should not be any changes with the package_compatibility feature we have in deploy and ET.

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

…ature/lite-user-warning-ui

stephkaiser · 2024-09-13T17:03:20Z

thanks Ravi, that was super quick!

some minor design QA comments from me:

font size for the title and description should be 16, looks like its currently 14
height of the banner should be 68px max, looks like its 77px currently

thank you!

…ature/lite-user-warning-ui

…ro-org/kedro-viz into feature/lite-user-warning-ui

Huongg · 2024-09-17T08:51:18Z

src/config.js

@@ -5,6 +5,7 @@ export const localStorageFlowchartLink = 'KedroViz-link-to-flowchart';
 export const localStorageMetricsSelect = 'KedroViz-metrics-chart-select';
 export const localStorageRunsMetadata = 'KedroViz-runs-metadata';
 export const localStorageShareableUrl = 'KedroViz-shareable-url';
+export const localStorageBannerStatus = 'KedroViz-banners';


hey what does this localStorage do? Is it to track if user has seen the banner before? If so? I've done something similar too for feedback component, perhaps we can have a group call "localStoragePopup" something like that, and it can be shared between banner and feedback?

i like that. maybe we can refactor localStorage in a future ticket.

yes we can have a common key in future tickets

Huongg · 2024-09-17T08:52:51Z

src/styles/_variables.scss

@@ -31,6 +31,7 @@ $run-list-controls-height: 95px;
 $z-index-metadata-panel: 3;
 $z-index-metadata-code: 3;
 $z-index-MuiTreeItem-icon: 1;
+$z-index-banner: 6;


6 is a very high number, is there something underneath it that has z-index of 5? 🤔

Yes there is global toolbar and feature hints with z-index:5 . Another reason I thought is we should always have our banners on top of other components, so made it a 6.

Huongg · 2024-09-17T10:17:10Z

this is pretty cool, thanks @ravi-kumar-pilla. Just a quick question about the setup, I'm trying to run it locally, but i have the error Error: No such option: --lite Did you mean --pipeline? when i ran kedro viz --lite

I've tested with your branch with a new environment. Is there anything else I need to do?

rashidakanchwala

It works well. and I have looked through the code quickly. There are some possible refactorings we can focus on FE (not caused by this PR but previous ones as well) in the future which we can look into after this release. Thanks a lott @ravi-kumar-pilla , passing data through api/metadata looks great

…ature/lite-user-warning-ui

Huongg

its working now for me, thanks @ravi-kumar-pilla

ravi-kumar-pilla added 19 commits July 28, 2024 11:02

sync remote

8830cab

Merge branch 'main' of https://github.com/kedro-org/kedro-viz

0a5d1ae

merge main

bf47b47

Merge branch 'main' of https://github.com/kedro-org/kedro-viz

13e905b

Merge branch 'main' of https://github.com/kedro-org/kedro-viz

3d6326c

Merge branch 'main' of https://github.com/kedro-org/kedro-viz

3d3bdda

Merge branch 'main' of https://github.com/kedro-org/kedro-viz

1abfc43

Merge branch 'main' of https://github.com/kedro-org/kedro-viz

1461a3c

Merge branch 'main' of https://github.com/kedro-org/kedro-viz

c3f7cc6

add lite viz banner

61a871b

banner design change

3cc318e

Merge branch 'main' of https://github.com/kedro-org/kedro-viz into fe…

39a5b45

…ature/lite-user-warning-ui

add tests

54f18a1

Merge branch 'main' of https://github.com/kedro-org/kedro-viz into fe…

2191529

…ature/lite-user-warning-ui

refactor metadata api

497d03c

fix permissions

17c85a8

working state

d4bf0d2

comment out banner condition for testing

3495f52

Merge branch 'main' into feature/lite-user-warning-ui

26d8cfb

ravi-kumar-pilla added 3 commits September 13, 2024 15:37

address PR comments

160f18f

Merge branch 'main' of https://github.com/kedro-org/kedro-viz into fe…

f8dbf95

…ature/lite-user-warning-ui

Merge branch 'feature/lite-user-warning-ui' of https://github.com/ked…

a34b677

…ro-org/kedro-viz into feature/lite-user-warning-ui

ravi-kumar-pilla changed the title ~~Feature/lite user warning UI~~ Kedro Viz Lite User Warning UI Sep 13, 2024

ravi-kumar-pilla added 3 commits September 16, 2024 08:07

Merge branch 'main' into feature/lite-user-warning-ui

f887a27

fix tests

405826e

update tests

8563187

ravi-kumar-pilla marked this pull request as ready for review September 17, 2024 04:16

ravi-kumar-pilla requested review from rashidakanchwala and jitu5 as code owners September 17, 2024 04:16

ravi-kumar-pilla requested review from stephkaiser and Huongg September 17, 2024 04:17

Huongg reviewed Sep 17, 2024

View reviewed changes

rashidakanchwala approved these changes Sep 17, 2024

View reviewed changes

stephkaiser approved these changes Sep 17, 2024

View reviewed changes

ravi-kumar-pilla added 2 commits September 17, 2024 09:55

Merge branch 'main' of https://github.com/kedro-org/kedro-viz into fe…

b38d19e

…ature/lite-user-warning-ui

update release

bb54b94

ravi-kumar-pilla requested a review from astrojuanlu as a code owner September 17, 2024 14:58

Huongg approved these changes Sep 17, 2024

View reviewed changes

ravi-kumar-pilla merged commit 30d5cef into main Sep 17, 2024
40 checks passed

ravi-kumar-pilla deleted the feature/lite-user-warning-ui branch September 17, 2024 16:12

ravi-kumar-pilla mentioned this pull request Sep 17, 2024

Update Demo build with metadata API #2098

Merged

5 tasks

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Kedro Viz Lite User Warning UI #2092

Kedro Viz Lite User Warning UI #2092

ravi-kumar-pilla commented Sep 11, 2024 •

edited

Loading

stephkaiser commented Sep 13, 2024

Huongg Sep 17, 2024

rashidakanchwala Sep 17, 2024

ravi-kumar-pilla Sep 17, 2024

Huongg Sep 17, 2024

ravi-kumar-pilla Sep 17, 2024

Huongg commented Sep 17, 2024

rashidakanchwala left a comment •

edited

Loading

Huongg left a comment

Kedro Viz Lite User Warning UI #2092

Kedro Viz Lite User Warning UI #2092

Conversation

ravi-kumar-pilla commented Sep 11, 2024 • edited Loading

Description

Development notes

QA notes

Checklist

stephkaiser commented Sep 13, 2024

Huongg Sep 17, 2024

Choose a reason for hiding this comment

rashidakanchwala Sep 17, 2024

Choose a reason for hiding this comment

ravi-kumar-pilla Sep 17, 2024

Choose a reason for hiding this comment

Huongg Sep 17, 2024

Choose a reason for hiding this comment

ravi-kumar-pilla Sep 17, 2024

Choose a reason for hiding this comment

Huongg commented Sep 17, 2024

rashidakanchwala left a comment • edited Loading

Choose a reason for hiding this comment

Huongg left a comment

Choose a reason for hiding this comment

ravi-kumar-pilla commented Sep 11, 2024 •

edited

Loading

rashidakanchwala left a comment •

edited

Loading