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

504 modal intro page #549

merged 6 commits into from Sep 18, 2017


None yet
2 participants
Copy link

NealHumphrey commented Sep 14, 2017

This PR adds a modal that deploys on initial page load. It has welcome text and allows the user to either take a tour, view an example analysis, or just use the tool. If they are loading a saved state, it does not show them the example analysis option and replaces it with a button to view the saved analysis (this just closes the modal, since the saved analysis is being loaded regardless).

If the user closes the modal before the page is ready to use, it opens a page dimmer with a "loading" spinner until the filterViewLoaded event occurs (which is not 100% at the end of the load process but it is close).

The example analysis button is disabled until the page is finished loading, to avoid triggering the state change before the app can handle it.

The 'tour' functionality is not yet implemented.

This replaces the 'loading saved state' dimmer used previously. The dimmer is only shown on map view - when loading a saved specific project in the project-view, no 'loading' page is shown anymore (the page loads quickly enough that I don't think we need it in that context).

NealHumphrey added some commits Sep 13, 2017

- Working demo of dimmer w/ callback that decides action based on whi…
…ch button is clicked.

- Starting to add a 'loading' dimmer underneath
"Loading" dimmer is displayed if the page is not yet loaded when the …
…welcome modal is cleared

Still need to get proper behavior working when a saved state is loaded
Shows proper buttons based on whether we're loading a saved state or not
Removes the old 'loading saved state' dimmer

- Need to get example to actually work, probably w/ router
- Need to make sure that clicking the example button too soon doesn't mess things up or get lost
- Now load example using the url and decodeState()
- Disabled the 'example analysis' button until the page is ready to accept the decode request
- Added spinner to show loading of button.

This comment has been minimized.

Copy link
Collaborator Author

NealHumphrey commented Sep 14, 2017

@ostermanj the one thing that would be useful for you to QA (besides an overall test drive) is the way that I implemented the loading of an example. I used the decodeState to do this, so that the proper setState AND UI updates would occur. I did this by triggering the window history, and then telling the router to decode.

My question was whether I'm ok using the (useless) object that I put into the first parameter of the replaceState call. Elsewhere, you put the router.stateObj into this, but becuase the state has not been decoded we don't have a proper state object available to us anywhere. It looks like you're not actually using this state object though - it would just be used if you called popState as described here. It looks like you're always using the URL as the master of truth for the state to decode rather than using that state object. Some testing proved it out.

I will be adding the tour to this next, can merge either before or after this.

@NealHumphrey NealHumphrey requested a review from ostermanj Sep 14, 2017

@NealHumphrey NealHumphrey referenced this pull request Sep 14, 2017


Create a Landing Page #504

- Adds disabled spinning loading icons to all modal buttons while pag…
…e is loading

- Adds the 'shepherd' feature tour plugin and style sheet
- Sets up basic intro tour of some key features (needs some more thought as to what is most important to communicate to users).

This comment has been minimized.

Copy link

ostermanj commented Sep 15, 2017

You're right that router.js passes in router.stateObj but that's not really doing the work. The work is all in the paths. My early attempts in router.js tried using the stateObj and popState but I could not get that method to work on a fresh load of a saved state. So instead it always just parses the url parameters. I had a better handle on it a month ago:

router.js sets the window's history.state but in the end this is not ever read back in. the history.state would only be available on browser back or forward, not on a fresh load of a paramified URL, so I opted to rely only on the encoded URL for forwards, backs, and fresh loads. This might avoid some cross-browser issues, too.

Hopefully that's true :)

You have to pass in an object, so I left it, but I think it could just be {}.


This comment has been minimized.

Copy link

ostermanj commented Sep 15, 2017

Looks really great! There's one weird thing: when I load the page without my developer tools open, the modal extends below my screen (1280x800) and won't scroll.

screen shot 2017-09-15 at 8 08 51 am

When I open the tools, the modal will scroll; when I close it again, the modal is fully visible.

The tour is really cool.

One thought: should we provide a "don't show again" option? Would require setting a cookie.

Copy link

ostermanj left a comment

Approving. Positioning problem described in comments.


This comment has been minimized.

Copy link
Collaborator Author

NealHumphrey commented Sep 15, 2017

Thanks @ostermanj. I had a surprising amount of trouble getting the modal to behave as expected - maybe there's some bootstrap/semantic ui conflicts as they both have 'modal' classed objects. I'll mess with the modal to get it viewable.

I figured it's easier to not set the 'don't show again' option because it won't improve performance - they still have to wait the same amount of time for the page to load. I did verify that using both the in-app back and the back button after viewing a project page only display the modal the first time you see the map view and not again (unless you refresh the page)

@NealHumphrey NealHumphrey referenced this pull request Sep 18, 2017


Tell users when the tool has problems #558

0 of 2 tasks complete

@NealHumphrey NealHumphrey merged commit 8231bd1 into dev Sep 18, 2017

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment