App walkthrough

vnavdulov · March 24, 2023, 2:26pm

Hello all! I am trying to help a user understand how to use my app and what the options are. I’ve seen a demo of a “user walkthrough” for a plotly dash app somewhere. I can’t remember if it was a community-created package or something else. Please help if you can direct me. Thank you!

adamschroeder · March 24, 2023, 2:38pm

hi @vnavdulov

if you go to the dash community components list, you’ll see the Dash Tour Component. I think that might help you.

jinnyzor · March 24, 2023, 2:52pm

Hello @vnavdulov,

I also have a walkthrough agent that you can take a look at here:

github.com

BSd3v/Dashboard-Helper/blob/main/assets/jyada.js

async function playScript(data) {
    $("#jyada").css({'top':'0px', 'left':$('body')[0].getBoundingClientRect().width - 30 - $("#jyada")[0].getBoundingClientRect().width})
    $('#jyada').removeClass('sleeping')
    escaped = false
    $(document).on('keydown', function() {
    if (event.key == 'Escape' || event.which == 27 || event.code == 'Escape') {
        escaped = true
        paused = false
    }})
    $('#jyada').on('click', function() {paused = false})
    for (y=0; y<data.length; y++) {
        if (!$('#'+data[y].target)[0]) {
            await delay(500)
        }
        if ($('#'+data[y].target)[0]) {
            $($('#'+data[y].target)[0]).toggleClass('highlighting')
            tBounds = $('#'+data[y].target)[0].getBoundingClientRect()
            $('#jyada').css({'top':tBounds.top + tBounds.height/4,
            'left':tBounds.left + tBounds.width/2.5})
            $('#jyada').attr('convo', data[y].convo)

This file has been truncated. show original

To register the walkthrough, you do that here (you can do multiples):

github.com

BSd3v/Dashboard-Helper/blob/e469874f6856187c67383f52d34b382a8edfb6dc/pages/home.py#L91-L123


      
          addScripts("Explore the Data",{
              "explore":[
                          {'target':'dataOptions', 'convo':'this is where you can choose all sorts of '
                                                          'options for uploading your data for creation'},
                         {'target':'uploadContent', 'convo':'here you can drag or choose a file to upload'},
                         {'target':'preloadData','convo':'here you can choose from plotly data sets'},
                         {'target':'stockQuery', 'convo':'this is where you can plug in a ticker to pull data from yfinance'},
                         {'target':'contentDisplay', 'convo':'once you choose a data source, the info will be displayed here'},
                          {'target':'collapseData', 'convo':'you can collapse the data to make the design area larger'},
                          {'target':'_pages_content', 'convo':'this is where you can test out different charts'},
                         {'target':'openEditor', 'convo':'here we can make adjustments to the chart options'},
              ],
              "create chart":[
                  {'target':'preloadData', 'convo':'first thing, we need to make sure we have some data,'
                                                   ' let me know when you are ready to continue'},
                  {'target':'toggleEdit', 'convo':'click this button if you are not already in edit mode'},
                  {'target':'openEditor', 'convo':'this will open an editor to create all the available '
                                                        'charts using your info', 'action':'click'},
                  {'target':'chartEditor .dash-dropdown', 'convo':'select a chart type from the options,'
                                                                                  ' click me to continue'},

This file has been truncated. show original

You can check out the whole template here:

vnavdulov · March 24, 2023, 3:05pm

That’s a great solution, I’ll try it out! Thank you @jinnyzor!

vnavdulov · March 24, 2023, 3:07pm

Thank you @adamschroeder, that’s the one I was looking for!

AIMPED · March 24, 2023, 3:11pm

I love this little helper guy!

jinnyzor · March 24, 2023, 3:21pm

I guess I should make him an AIO component? Haha

I think that is the most likely spot for him.

Topic		Replies	Views
Is there a community Dash components repository? Dash Python	2	1229	September 22, 2017
Dash Component Syntax Diagram plotly.js	1	351	October 25, 2018
Dash Chart Editor Dash Python community-components	30	2807	March 12, 2024
Dash beginner questions Dash Python question	0	349	May 31, 2022
Dash Tour Component Dash Python show-and-tell	10	4002	May 17, 2023

App walkthrough

Related Topics