Feature Hint cards and app walkthrough #1454

tynandebold · 2023-07-17T18:49:38Z

Description

Resolves #1180.

Development notes

I've added what I'm calling the AppOnboarding component and necessary files. I'm opening the PR a little early to get it into our hands so we can test it out. I feels suboptimal right now.

QA notes

Screen.Recording.2023-07-17.at.19.39.28.mov

Look at the Gitpod link and play around with it and reference the design here.

I think there's a wrinkle or two with the concept itself. See my comment here for more details: #1180 (comment).

Other things that we can improve:

The hit area of the small circles that are used to change to another card are much too small. It's too hard to click them.
There's a lot of "to be decided" language in the design concept that hasn't been decided.
The small "New feature" text element in the design doesn't make much sense to me, since a lot of what we want to show isn't actually a new feature. We can improve this language.

Still todo from the dev side:

Write e2e and unit tests

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

Signed-off-by: Tynan DeBold <[email protected]>

stephkaiser · 2023-07-18T19:52:42Z

agree we need some UX + UI improvements here

Signed-off-by: Tynan DeBold <[email protected]>

…ature/app-onboarding Signed-off-by: Tynan DeBold <[email protected]>

stephkaiser · 2023-08-02T16:31:48Z

Thanks Tynan!

Some notes:

When opening the metadata panel, the feature hint moves but the highlight circle stays fixed which looks weird in some situations, can we make the circle move with the feature hint too? (see pics below)

When the metadata panel is open and I navigate to the next feature hint, the highlight circle disappears for the first two hints that are in the flowchart, and then re-appears on card 3 for experiment tracking. I assume this is happening because the flowchart doesnt adjust with the highlight circle when the metadata panel is open? - can we make the flowchart move with the circle when the user navigates from card 1 to card 2 with the panel open?
Learn More button - can we make this aligned to the text above, theres a bit too much padding on the left
Feature hints restart from the first card when I click on experiment tracking and go back to flowchart - could we make it so when the user goes back to the Flowchart view we are on the same current feature hint?
Maybe we should remove the '' in the text for the dismiss toast message: 'Settings' panel.
On second thought, could we remove the last hint "Export visualisation" - I feel like this is maybe more suitable for the future onboarding journey rather than feature hints - what do you guys think? So there will be 5 in total and last hint would be the settings panel.
For the Filters and tags hint - could we add a link to docs here too? maybe a link to how to tag a node?

…ent; rest of the logic and dot adjustments Signed-off-by: Tynan DeBold <[email protected]>

tynandebold · 2023-08-03T11:58:48Z

Thanks for a thorough review @stephkaiser!

I've addressed all your comments now. Feel free to check things again :)

Signed-off-by: Tynan DeBold <[email protected]>

stephkaiser · 2023-08-03T13:52:36Z

looks awesome! @tynandebold no comments from me :)

NeroOkwa

@tynandebold this looks good.

For the first card - If you select the dataset and click Expand Preview Table, The page opens showing the datasets but also the yellow indicator as seen below:

This is a similar experience with the second card when you select 'Price Histogram' and select 'Expand Plotly Visualisation' the yellow indicator is still shown as seen below:

ravi-kumar-pilla

Awesome work !! I have left few comments, nits and questions. I feel neither of them is a major blocker. Approving the PR. Thank you

ravi-kumar-pilla · 2023-08-03T15:23:58Z

package-lock.json

is this change required ?

src/actions/index.js

ravi-kumar-pilla · 2023-08-03T15:32:57Z

src/components/feature-hints/feature-hints-content.js

+    learnMoreLink:
+      'https://docs.kedro.org/en/stable/visualisation/visualise_charts_with_plotly.html',
+    elementId: '.pipeline-node__bg--plotly',
+    image:


can we use image location instead of image data string ? something like - "imageLocation": "../static/images/plotly.png"

Currently we don't have a mechanism that allows us to bundle static images in Viz. We'd need to account for the potential of the path changing in local development versus production, too.

Something to investigate for the future.

src/components/feature-hints/feature-hints.js

ravi-kumar-pilla · 2023-08-03T20:46:28Z

src/components/feature-hints/feature-hints.js

+            {featureHintsContent[featureHintStep].image && (
+              <img
+                alt={featureHintsContent[featureHintStep].title}
+                src={featureHintsContent[featureHintStep].image}


Can we change the text image content and instead have some kind of url src ?

See my comment above about this.

ravi-kumar-pilla · 2023-08-03T20:53:45Z

src/components/feature-hints/feature-hints.scss

+    }
+
+    .button button {
+      color: colors.$black-900;


I could not understand why we use #{colors.$black-100} sometimes like string interpolation and sometimes access direct value like colors.$black-100. What is the major difference regarding the usage ?

I don't think we use it consistently. String interpolation of this kind is only needed when you want to use the variable somewhere it isn't allowed.

ravi-kumar-pilla · 2023-08-03T20:58:54Z

src/components/settings-modal/settings-modal.js

+              description={settingsConfig['showFeatureHints'].description}
+              onToggleChange={(event) => {
+                setShowFeatureHintsValue(event.target.checked);
+                setHasNotInteracted(false);


why do we need setHasNotInteracted ?

This is the state variable that changes the submit button from disabled to active.

src/components/ui/delayed-renderer/delayed-renderer.js

ravi-kumar-pilla · 2023-08-03T21:09:31Z

@tynandebold this looks good.

For the first card - If you select the dataset and click Expand Preview Table, The page opens showing the datasets but also the yellow indicator as seen below:

This is a similar experience with the second card when you select 'Price Histogram' and select 'Expand Plotly Visualisation' the yellow indicator is still shown as seen below:

Nice catch @NeroOkwa .

When someone is in the tour, should we disable/not allow the users to interact with the app or make changes ? @tynandebold @stephkaiser

Signed-off-by: Tynan DeBold <[email protected]>

vladimir-mck

LGTM 🚀

tynandebold added 2 commits July 17, 2023 19:41

First stab at work; all working well. Need UI/UX improvements

5a424b5

Signed-off-by: Tynan DeBold <[email protected]>

Fix failing test

4c59658

Signed-off-by: Tynan DeBold <[email protected]>

tynandebold changed the title ~~Create the app onboarding feature (visual tips~~ Create the app onboarding feature (a.k.a. visual tips) Jul 17, 2023

tynandebold changed the title ~~Create the app onboarding feature (a.k.a. visual tips)~~ Create the app onboarding feature (a.k.a. flashcards) Jul 17, 2023

Merge branch 'main' into feature/app-onboarding

b346b4d

tynandebold marked this pull request as draft July 17, 2023 18:56

tynandebold marked this pull request as ready for review July 18, 2023 08:29

tynandebold marked this pull request as draft July 18, 2023 08:33

Merge branch 'main' into feature/app-onboarding

fc1cca7

tynandebold added 8 commits July 27, 2023 12:07

Merge branch 'main' into feature/app-onboarding

f44b721

Rename files; good progress on hints

f3d43c6

Signed-off-by: Tynan DeBold <[email protected]>

Add renamed files

13b69fb

Signed-off-by: Tynan DeBold <[email protected]>

Add line to settings panel; update z-indicies

12a6a24

Signed-off-by: Tynan DeBold <[email protected]>

Wiring up to Redux

f3dea01

Signed-off-by: Tynan DeBold <[email protected]>

Renaming of variables, reducer, state, etc

275ba1e

Signed-off-by: Tynan DeBold <[email protected]>

Add copy; add exp tracking image

0afb680

Signed-off-by: Tynan DeBold <[email protected]>

Fix failing test

dfb23e2

Signed-off-by: Tynan DeBold <[email protected]>

tynandebold changed the title ~~Create the app onboarding feature (a.k.a. flashcards)~~ Feature Hint cards and app walkthrough Aug 2, 2023

tynandebold requested review from ravi-kumar-pilla, stephkaiser, NeroOkwa and vladimir-mck August 2, 2023 14:28

tynandebold marked this pull request as ready for review August 2, 2023 14:29

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

a5f4770

…ature/app-onboarding Signed-off-by: Tynan DeBold <[email protected]>

Create DelayedRender component; create separate FeatureHintDot compon…

7ad6f8e

…ent; rest of the logic and dot adjustments Signed-off-by: Tynan DeBold <[email protected]>

Small cleanup

3f0f0b2

Signed-off-by: Tynan DeBold <[email protected]>

stephkaiser approved these changes Aug 3, 2023

View reviewed changes

NeroOkwa approved these changes Aug 3, 2023

View reviewed changes

ravi-kumar-pilla approved these changes Aug 3, 2023

View reviewed changes

PR fixes

7b4e8a6

Signed-off-by: Tynan DeBold <[email protected]>

vladimir-mck approved these changes Aug 4, 2023

View reviewed changes

tynandebold merged commit e4346a6 into main Aug 7, 2023
1 check passed

tynandebold deleted the feature/app-onboarding branch August 7, 2023 09:24

tynandebold mentioned this pull request Aug 17, 2023

Release v6.4.0 #1492

Merged

5 tasks

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Feature Hint cards and app walkthrough #1454

Feature Hint cards and app walkthrough #1454

tynandebold commented Jul 17, 2023 •

edited

Loading

stephkaiser commented Jul 18, 2023

stephkaiser commented Aug 2, 2023

tynandebold commented Aug 3, 2023

stephkaiser commented Aug 3, 2023

NeroOkwa left a comment

ravi-kumar-pilla left a comment

ravi-kumar-pilla Aug 3, 2023

ravi-kumar-pilla Aug 3, 2023

tynandebold Aug 4, 2023

ravi-kumar-pilla Aug 3, 2023

tynandebold Aug 4, 2023

ravi-kumar-pilla Aug 3, 2023

tynandebold Aug 4, 2023

ravi-kumar-pilla Aug 3, 2023

tynandebold Aug 4, 2023

ravi-kumar-pilla commented Aug 3, 2023

vladimir-mck left a comment

Feature Hint cards and app walkthrough #1454

Feature Hint cards and app walkthrough #1454

Conversation

tynandebold commented Jul 17, 2023 • edited Loading

Description

Development notes

QA notes

Checklist

stephkaiser commented Jul 18, 2023

stephkaiser commented Aug 2, 2023

tynandebold commented Aug 3, 2023

stephkaiser commented Aug 3, 2023

NeroOkwa left a comment

Choose a reason for hiding this comment

ravi-kumar-pilla left a comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

ravi-kumar-pilla commented Aug 3, 2023

vladimir-mck left a comment

Choose a reason for hiding this comment

tynandebold commented Jul 17, 2023 •

edited

Loading