Feedback on 2.0 (GUI-focussed, Sep 13)

Having converted upward of 250 notebooks to 2.0 in the last few weeks, I increasingly like the vanilla JS and lean interface of 2.0. I think the modifications since the launch have passed my important threshold of “I’m happy to introduce this version to my new students”. Great work by the team for this rewrite (and if anyone’s not seen it yet, I recommend the podcast of Mike and Toph talking about the process: https://youtu.be/oP1RxdJo40w).

Anyway, I’ve also been accumulating more feedback points that I think still apply as of September 13. I realise the team already know about many/most of these, but you did ask for feedback!

Many are user interface issues, although not always clear to me whether or not it is simply an interface issue or the underlying functionality needs working on before it can be incorporated. I’ve tried to indicate the approximate priority from my point of view (1 = highest priority) in case it helps (but recognise others will have different priorities). None is critical because most can be overcome via old.observable if necessary, or they are just minor bits of interface friction.

Higher Priority items:

  1. Order notebooks in a collection according to user-controlled order (as Observable 1)

  2. History pane with ability to inspect/restore older versions (as Observable 1)

  3. Adding /safe to the end of the notebook url to enter safe mode (as Observable 1). This is quite important for students who end up locking their notebook through infinite loops etc. It is also useful for a page-wide Ctrl-F find including hidden and collapsed code cells.

  4. Ability to save locally (using the new extended HTML standard) for use offline / ability to load notebook content from a local file.

  5. Downloading attached files from download panel seems to download an HTML snippet, not the actual file.

Lower Priority items

  1. Drag and drop reordering of cell order on a page (as Observable 1)

  2. Breadcrumbs to indicate if a notebook is a member of more than one collection (currently only shows one, and not necessarily the one via which the notebook was selected).

  3. For errors that can be traced to an individual line in a cell (e.g. syntax), the relevant code could be highlighted (as Observable 1).

  4. Ghost any items in an import {xxx, yyy, zzz} from "..." that doe not exist (as Observable 1.0)

  5. Autocomplete Inputs components (Inputs.range etc.) in a code cell was very useful in 1.0 (I can never remember if function is expecting an array, object or both). Would be good to see this in 2.0.

  6. Documentation: I realise this will be a big job for complete updates, but a high priority from a student learning point of view are the Inputs components using view() rather than viewof, and the (now much clearer) synchronised bind pattern.

  7. In the file attachments panel, show the files in alphabetical order, not insert order

  8. Within cell search area partially blocks the cell it overlays. Currently requires scrolling down to below the cell and back again to remove the overlay.

  9. Plot.version shows correct version number in 1.0, but ‘undefined’ in 2.0

  10. A fenced JS code block in a markdown cell is currently formatted to look identical to an actual code cell. This can be confusing. Syntax highlighting is good, but the grey background with ‘JS’ on the right too similar to real JS code cells. Better to give them a different visual appearance, with the fenced blocks in markdown having less visual prominence.

  11. Drop ‘js’ from the cell types and rename it in the cell type menu as ‘JavaScript/Typescript’ even if the cell on the page just displays ‘ts’ (there may be a good reason why there needs to be separate JS and TS cell types that has passed me by)

Very sorry, forgot to add one item but don’t want to change the numbering above, so :

3b. Top-level inspection to give more explanatory summary of code cells than ‘empty’ when not pinned.

Thanks again for the feedback! Some quick responses…

This is now live; ordered collections now default to Listing order. (You still can’t edit the listing order in New Observable yet, but that will come soon.)

Can you show me how to reproduce this? I seem to be able to download files just fine by clicking on the file name in the files panel, or by opening the file’s menu and clicking Download. A link to the notebook, and the type of file, would be helpful. The only thing that I would expect to download an HTML snippet is if you use the export menu to Export HTML (say from a Markdown cell).

This is now live, too.

This isn’t a Notebooks 2.0 issue per se but an artifact of consuming Plot as an ES module rather than the obsolete UMD bundle; the version is only exported in the latter (see bundle.js). I can add this to subsequent releases.

Agreed with all your feedback and we’re working on it as quickly as we can! Automatic inspection of top-level variables is very high on my list because it feels essential for any non-trivial programming, and one of the biggest current gaps (along with the dataflow panel f.k.a. minimap) according to our core value of making code more interpretable.

I greatly appreciate the encouragement along with the constructive, actionable criticisms. Not only is your feedback helpful in prioritizing our work and pointing out things we can fix, your enthusiasm adds to our energy and excitement, helping us move faster! Thank you.