Feature Request: Disable Auto-Run

As a visualization author, I’d like to be able to turn off the auto-run feature, and instead be able to manually trigger re-runs of the code.

Often while crafting code, I know that it will break during intermediate stages, and want to be able to hit a keyboard shortcut, such as SHIFT+Enter to trigger re-runs.

If edits occur remotely, auto-run should still function for those edits.

Note: pain point around writing for or while loops, as the auto-run in an intermediate step while typing can easily lead to an infinite loop, which crashes the page and leads to frustration and possibly lost work.

Note: Another possible pain point would be where you’re running a visualization that requests a data resource when it’s run. The auto-run would constantly trigger this effect causing unecessary data transfer and possibly even throttling issues when requesting from an API.
It can also trigger costly operations processor wise.

2 Likes

Excellent points!

Static resources should be cached for the most part, but having devtools open may disable cache, and some APIs may have a “do not cache” policy.

I did consider maybe adding in some magic so that network requests are cached by VizHub internally, so that the re-execution is faster. The downside of that is would be stale data, in the case the source data changes. A whole page refresh would be required to get fresh data in that case.

Related Bug: README changes cause re-run

Ah! That’s why the viz was reloading so slowly with the console open!
I have it open most of the time and when the html is loading in the d3 library that adds considerable loading time. Guess I’ll turn caching on in the dev tools for now.

This is definitely a “gotcha” with the platform, which may be difficult to discover.

This is why I work mostly with the dev tools closed - so the data & libraries are cached.

Any update on this? It’s making it hard for me to work in Vizhub because the screen constantly rerenders as I’m still typing code. I’m using the console for feedback but that’s annoying it it constantly throws errors while I’m still writing code.

@Razpudding Thank you for this note. Will prioritize this feature.

Much appreciated!
Had one student already try out vizhub ahead of the rest and she preferred it to her own IDE because of the WYSIWYG :slight_smile: Ill ask students on monday to start using vizhub and leave feedback here.

Excellent! Looking forward to seeing how well it works and what the pain points are.

For reference of students interested in the VizHub project:

Please do upvote issues that you want to see land. Thanks!

1 Like

Idea: First use of CTRL+Enter when editing code will disable auto-run. Refresh page to turn it back on.

Design idea: Show “auto run disabled” in lower left of viz frame

1 Like

OK here are some ideas for the design for enabling and disabling Auto-run. Thoughts?

image

The blue line would move around the circle instead of across the bottom of the viz as it does now. Clicking the “pause button” would turn off auto-run.

While auto-run is off, the program would run only when you press CTRL+ENTER.

An alternative design for the timer indicator:

Also, when auto-run is disabled AND you’ve made code changes that have not yet been run, the icon can change to show you that the viz is stale, looking something like this:

image

In this case, clicking on this button would run the program.

Inspired by Chrome’s download progress indicator.

image

Also Twitter’s character limit indicator.
image

Sounds like a good setup @curran. It would be nice if the window alerted you of unsaved changes when you close it or navigate away.

I’m not a big fan of the timer as an overall feature because it’s somewhat distracting and gives you the feeling you’re running out of time. Personally I’m a big fan of tech that requires as little of your attention as necessary and the timer doesn’t seem necessary on auto-run because you simply know it will happen. (this btw is in line with the calm tech principles which I can highly recommend https://calmtech.com/)

Thanks for this feedback. TIL Calm Tech! Excellent ideas there. Based on that idea, I think the designs could be “toned down” a bit.

By the way, in VizHub 1 there was no visual feedback for the timer. It just happened sort of in the background. Multiple students mentioned that it was a bit confusing that the auto-run “just happened”, and I thought there could be some sort of non-intrusuve visual feedback to inform the user about the timing mechanism. So, I think there should be something there, but I agree with you that it should not be too distracting.

Here’s another pass at the visual design taking calm tech principles into account:

image

Blue progress indicator for timer follows the same outline as already exists. Should not be too visually distracting as it’s only a subtle color change. No change to outline structure, but if you look directly at it you can tell it’s there and moving.

If no changes are pending, this will appear black and clicking this will resume auto-run.

If changes are pending, this will appear blue and clicking this will run the currently pending changes. The color transitions here can be made smooth, so as not to distract too much.

By the way, running and saving are disconnected. All changes are saved in real-time, and not synchronized to when the code is run here. I agree that the user should be informed of the saving status, but I think that’s a separate concern. Related: Feature Request: Saving/Saved Indicator

Great implementation! Such a simple change but it really does fit better with calm tech in mind. Glad you support those principles as well.
I also understand the background of the feature now. Auto-run itself is a major element to the development experience so it does make sense users are being made aware of it. I remember it was also something that annoyed me on codepen and I’ve turned it off there in most of my ‘pens’. But once it’s optional I think it’s a great feature to have.

I guess I knew already that saving and running are separated, must’ve slipped my mind.

1 Like

Thanks!

Saving and running are related, though. Maybe the “Saving…” / “Saved.” indicator should appear close to the run timer indicator. Not sure…

This is done now and deployed. Woohoo!

Decided to go with the design where the blue semicircle is inside the black circle, because if they are the same thickness it’s actually nearly impossible to tell that it’s changing at all!

Please give it a spin and let me know what you think.

The Shift+Enter mapping is set up to trigger a manual run.

There may be an opportunity to save the setting to localStorage or something, but right now auto-run is re-enabled each time you load a page. The idea is it’s easy enough to just hit Shift+Enter to turn it off when you start editing code.

Details:

  • Stops auto-run timer mid-progress in the case of Shift+Enter pressed during auto-run timer.
  • Stops auto-run timer mid-progress in the case of Shift+Enter pressed during auto-run timer.
  • If auto-run is on and you hit Shift+Enter, it turns auto-run off.