Add control to reset local view state

[jpellizzari]

Fix for #1872

Added a little 'trash can' icon on the help menu that will clear the 'scopeViewState' key in localStorage. It is possible to get into a loop where you are in an invalid view state because refreshing the page reads from localStorage. Clicking the trash can then refreshing should load a clean UI.

[bowenli]

appears slightly outside the modal when i run it:

[rade]

I have run into #1872 too, so we should not assume that this is exceedingly rate.

Few user encountering this will think "hang on, let me look at the help menu for an obscure trash can icon hidden in a corner". More so since everything else in the help menu concerns keyboard controls and search syntax.

IMO @davkal's original suggestion from #1872, before he changed his mind, of adding an icon to the icon group in the bottom right corner makes more sense. Several of these icons already are "rendering logic controls". Yes, I know that corner is getting busy, but that's a separate issue.

The labelling of the button, and iconography, also needs some more thought. "Clear UI state" does not mean anything to a user. "Reset View"? And perhaps use as the icon.

[davkal]

• I discourage the use of an icon here and prefer a clearly labeled button "Reset User Interface"
• I would put it in the help overlay for 2 reasons: the button will be used very little (we should track its usage) and users will have seen it there already while they explored the UI
• the button should have an explanation above it containing typical error descriptions that clicking it would solve, as well as assurances that nothing gets deleted (apart from the UI state)
• to give another entrypoint, we could add a new overlay that appears when the bug icon is clicked. That overlay then has the usual button to link to the bug tracker, and could have a preamble section giving users hints on trying to reset the UI first, with a reset button

[rade]

I discourage the use of an icon here and prefer a clearly labeled button "Reset User Interface"

Why? We already have seven icons in the bottom right corner!

I would put it in the help overlay for 2 reasons: the button will be used very little (we should track its usage) and users will have seen it there already while they explored the UI

I really don't think anybody will look for the Reset in the Help screen. Even if they have been there before. That's because everything else (i.e. 99%) of the help screen is passive, info only.

the button should have an explanation above it containing typical error descriptions that clicking it would solve, as well as assurances that nothing gets deleted (apart from the UI state)

Other icons provide such info in their bubbles, e.g. "Force re-layout (might reduce edge crossings, but might shift nodes around)"

to give another entrypoint, we could add a new overlay that appears when the bug icon is clicked.

That seems like the best option to me. Then we could also move: "Save Canvas" and "Save Raw Data" to that overlay, since they are mainly useful for debugging.

[davkal]

[Label instead of icon] Why? [and ] Other icons provide such info in their bubbles, e.g. "Force re-layout (might reduce edge crossings, but might shift nodes around)"

It's a destructive action and should be clearly labeled in what it does. It potentially triggers a page reload which is disorienting if clicked accidentally (therefor the tooltip will be of no help).

We already have seven icons in the bottom right corner!

I dont understand this argument.

I really don't think anybody will look for the Reset in the Help screen. Even if they have been there before. That's because everything else (i.e. 99%) of the help screen is passive, info only.

This could be answered by user research.

That seems like the best option to me. Then we could also move: "Save Canvas" and "Save Raw Data" to that overlay, since they are mainly useful for debugging.

Very much agree. Those could be grouped together and I think it's not too much work to include this in this PR.

[rade]

This could be answered by user research.

I can give you one data point: me :)

[jpellizzari]

I have made a change to add a 'Debugging/Troubleshooting' to to contain related buttons:

Note that the 'Save raw data as json' button has been removed from the footer and placed in the new dialog.

Feedback is welcome; @davkal could you review the code when you get a chance?

[bowenli]

The power symbol (circle broken by line) is an IEEE/IEC standard (https://en.wikipedia.org/wiki/Power_symbol), which would be not appropriate to use here.

Can we use something like fa-undo for the reset state?

[rade]

As per #2080 (comment), the "Save Canvas" button should be moved into this new dialog too.

[jpellizzari]

@bowenli I do not recognize the authority of the IEEE, but I do think that icon makes more sense, since it reloads the page.

[jpellizzari]

Updated with feedback:

[rade]

nice

[davkal]

Works great and code LGTM!

UI consistency nit: this introduces a new styling. Although the underlining invites clicking, I would have chosen a more button-y approach based on an existing element, like the view mode selector (mostly because it's a button and has an icon):

with the click state as seen left, and the neutral state as seen right.

Or we use this opportunity to import a ui-components button!

[jpellizzari]

@davkal I added a mouseover effect to keep the styling more consistent.

In general, underlined links in scope are navigation actions, which is what I would classify these actions as. There is no shared state between the buttons, so an active/inactive paradigm doesn't make sense to me.

I tried this with a more button-y approach, and it didn't add any meaning and looked weird: