feat: Save a history of any kind of Sequences (not just OEIS)

[gwhitney]

The two main changes in this PR are that (i) the collection of saved OEIS IDs is replaced with a history list of arbitrary sequences that have been used, and (ii) it is now possible to toggle between a thumbnail and list presentations of collections of specimens.

Testing for this commit revealed that the p5.brush addon does not work properly with multiple different sketches all updating asynchronously. Therefore, this commit removes p5.brush and provides a simple hatchRect() method in P5Visualizer (since hatching is all that p5.brush was being used for anyway).

The current sequence is saved/updated in the list of remembered sequences when (a) the Scope view is first loaded; (b) the Scope view is closed; (c) the sequence or visualizer switcher is popped up; or (d) the current specimen is saved to the Gallery. In addition, the when any specimen is selected from a chooser, its sequence is saved/updated in the history list as well.

The removal of the list of OEIS IDs means that the frontscope no longer (pre-)fetches a collection of OEIS sequences immediately on startup; they are loaded only as used. That change has pros (avoids a potential long startup lag) and cons (later operations more likely to pause before completing).

Resolves #430.

By submitting this PR, I am indicating to the Numberscope maintainers that I have read and understood the contributing guidelines and that this PR follows those guidelines to the best of my knowledge. I have also read the pull request checklist and followed the instructions therein.

[gwhitney]

In meeting, decided to just have a toggle between "thumbnail view" and "list view" for all items, and to always show them all.

[gwhitney]

Also noted that we need to add a sequence when a switcher is opened, and clicking on any card should save the destination of that card.

[gwhitney]

OK, the tracking and most-recently-used designation of sequences in the history should now match what we discussed at meeting. Just need to implement the toggle switch and the list view for this to be ready to review (although feel free to pre-review more as you like and let me know if you see anything).

[gwhitney]

All right, there are now working list and thumbnails views in any of the SpecimensGallery choosers that appear (featured specimens in the Gallery, saved specimens, sequence switcher, and visualizer switcher). There is a toggle switch to choose between the views. The thumbnails view is the default. This now implements everything mentioned in #430, so marking this as ready for review.

I wasn't quite sure about the layout/graphic design of the toggle control, so I am definitely open to feedback/suggestions about how to present that.

[katestange]

One thing I notice is that if I add a ton of OEIS sequences, the "standard" (non-deletable) thumbnails get pushed off screen (e.g. Formula). Is this desired?

[katestange]

When the formula gets long, it can push the chooser button offscreen to the right. Here's an example in firefox: http://localhost:5173/?name=Formula%3A+n*sin%28sqrt%282%29*n%29%2B11000%2Bn%5E2&viz=ModFill&modDimension=10000&seq=Formula&formula=n*sin%28sqrt%282%29*n%29%2B11000%2Bn%5E2%2Bn%5E3

[katestange]

From the example above... some more craziness.

[katestange]

I like the list view and the toggle! My only initial suggestion there would be to use the word "list" instead of "table". Also, and this may not be something to deal with in this PR, but just to file an issue for (?) but when I've put enough items in my switcher to make the list have a scrollbar, toggling back to "thumbnail" is laggy, presumably from refreshing so many thumbnails.

[katestange]

Should the sequence switcher remember the state (either list or thumbnails)? Right now if I'm using list and I go to a specimen and then back to the switcher, it reverts to thumbnail view.

[gwhitney]

One thing I notice is that if I add a ton of OEIS sequences, the "standard" (non-deletable) thumbnails get pushed off screen (e.g. Formula). Is this desired?

Well, that's a consequence of the current "most-recently-used" sort order. Am totally open to other suggestions. We could always "float" the most recently used OEIS, most recently used Formula, and most recently used Random to the head of the list, for example. I am going to leave this as-is unless/until there's a consensus on a specific idea to try.

[gwhitney]

When the formula gets long, it can push the chooser button offscreen to the right

OK, I will look into "prettyprinting" the formula into the title of the cards so that it can wrap more gracefully. (Note this issue is not new to this PR, same thing happens in ui2 as it stands, but fine with fixing it here.)

[gwhitney]

when I've put enough items in my switcher to make the list have a scrollbar, toggling back to "thumbnail" is laggy, presumably from refreshing so many thumbnails.

Presumably that will be fixed by not rendering off-screen thumbnails, which is slated for after alpha. So yes, this could go in a comment on that issue.

[gwhitney]

Should the sequence switcher remember the state (either list or thumbnails)? Right now if I'm using list and I go to a specimen and then back to the switcher, it reverts to thumbnail view.

Should it? I made "thumbnails" always the default because it's so pretty. But if there's a consensus that remembering is better, that's possible -- we would just have to decide whether it remembers just within one Numberscope "session" or across runs (i.e. would need to use browser local storage).

Another option is to default to "thumbnails" under some fixed number of items (say mid-teens) and default to list when longer than that, since list is much more compact.

(Again, not taking any action here until there's a definite direction to go.)

[gwhitney]

OK, I will look into "prettyprinting" the formula into the title of the cards so that it can wrap more gracefully. (Note this issue is not new to this PR, same thing happens in ui2 as it stands, but fine with fixing it here.)

OK, there is not a text pretty printer, but there is a facility to convert to MathML so that the formulas would appear in tex-style typeset format (only in the titles, not in the formula entry box), i.e. the n*sin(sqrt(2)*n)+11000 +n^2+n^3 would show up something like $n\sin(\sqrt2n)+11000+n^2+n^3$ in the title. Should I just go ahead and go that way with the pretty printing as long as I am at it, or is that actually not desirable, in that the difference between the entry box and the title would be jarring? Again, I am not actually going to implement anything here until we have settled on a direction. Thanks in advance for more feedback on all of these items!

[Vectornaut]

The thumbnail toggle works well for me overall! That said, here are two details I found confusing.

Naming of list view

I'd call the no-thumbnails option a list view rather than a table view. This matches the naming convention used by file browsers in macOS and Gnome. It does conflict a bit with the Windows file browser, which calls the analogous view details, and uses list for a more compact view. However, I've never seen a file browser that uses table.

Active option highlighting

I initially read the blue-highlighted label for the active option as a link. I was confused about why it would be a link, and why it didn't do anything when I clicked it. For me, it might be clearer to label the active option in black and the inactive option in gray. This would remove the contrast between the options and the "Display as" text, but there are ways to either restore contrast or make the contrast unnecessary. Here are some examples; the subscripted quotes show which text the color applies to.

"Thumbnail view"_black (●○) "List view"_gray

"Thumbnails"_black (●○) "List"_gray

Display as: "thumbnails"_black (●○) "list"_gray

The last idea uses punctuation, rather than color, to separate the options from the "Display as" text.

[Vectornaut]

But if there's a consensus that remembering is better, that's possible -- we would just have to decide whether it remembers just within one Numberscope "session" or across runs (i.e. would need to use browser local storage).

Right now, it seems like thumbnail loading could make the Change sequence dialog unusably slow for users with very long sequence histories, so those users need a way to make sure that thumbnails stay turned off. Since the sequence history is remembered across sessions, the thumbnail toggle would also need to be stored across sessions to make the system work well for those users. I'm not sure this is worth delaying the PR for, though.

[Vectornaut]

Should I just go ahead and [use MathML in formula sequence titles] as long as I am at it, or is that actually not desirable, in that the difference between the entry box and the title would be jarring?

I'd like MathML in formula sequence titles, because it might help clear up a confusion I encountered. When I opened Numberscope for this test run, my initial sequence was Formula: (sqrt(2)n) % 3. I wanted to change the formula, so I clicked the text (sqrt(2)n) % 3, and I was confused when this opened the sequence chooser rather than allowing me to edit the formula. I actually did this twice before realizing I needed to click in the Formula input below the sequence title.

By the way, this makes me more convinced that we should do more to distinguish the sequence and visualizer titles from text inputs. (If y'all agree, I can open an issue for this.) The underline really makes me think "type in this field to change it", not just "this value can be changed". In some cases, the mismatched expectations aren't so bad, because the Choose sequence or Choose visualizer dialog is the way to do what I want to do. If I want to edit a formula, though, the dialog is not the way to do it.

[katestange]

But if there's a consensus that remembering is better, that's possible -- we would just have to decide whether it remembers just within one Numberscope "session" or across runs (i.e. would need to use browser local storage).

I think Aaron and I both like the idea of remembering the state (thumbnail or list), but I would be ok with this being stored only across runs, as a compromise between reminding the user how pretty thumbnails are, and annoying the user who wants it to stay in list mode while they muck around extensively.

[katestange]

I'd like MathML in formula sequence titles, because it might help clear up a confusion I encountered.

I agree, I like MathML in formula sequence titles. It will look more professional. Is it a lot of work, though?

[katestange]

Well, that's a consequence of the current "most-recently-used" sort order. Am totally open to other suggestions. We could always "float" the most recently used OEIS, most recently used Formula, and most recently used Random to the head of the list, for example. I am going to leave this as-is unless/until there's a consensus on a specific idea to try.

After mulling this over, my current leaning is to keep the "undeletable" Formula and Random always top left, and just rotate everything else below that. This seems to match my "user expectation" from other apps and UIs best (as Aaron is often considering), and the newest/current sequence isn't exactly lost, it will always be first row. Those two are very useful and they are top of the list by default for a reason. OEIS sequences are accessible always via the search box, so I don't think they need to be reordered to keep one near the top.

[Vectornaut]

After mulling this over, my current leaning is to keep the "undeletable" Formula and Random always top left, and just rotate everything else below that.

I agree that keeping the "sequence factory" items at top left would be reasonable, since they provide functionality that can't be consistently accessed any other way (as far as I know).

[Vectornaut]

I would be ok with this being stored only across runs, as a compromise between reminding the user how pretty thumbnails are, and annoying the user who wants it to stay in list mode while they muck around extensively.

Personally, I find it infuriating when an app reminds me about a feature that I've explicitly turned off. It's especially bad when the "reminder" takes the form of turning the feature back on without my consent.

If a Numberscope session always starts with thumbnails turned on, the new-session workflow for someone with a long history and a slow computer might look like this:

1. Open a Numberscope tab.
2. Open the sequence chooser.
3. Wait for thirty seconds while thumbnails load—potentially blocking the interface, and maybe even throwing a notification that "a web page is slowing down your browser."
4. Switch to list view.

I'd be more comfortable if we could be confident that the thumbnails will never block the interface, but I'm not sure how we'd test this.

[katestange]

Personally, I find it infuriating when an app reminds me about a feature that I've explicitly turned off. It's especially bad when the "reminder" takes the form of turning the feature back on without my consent.

Hahah, you know, I knew Aaron was going to say this. And yet, I am only now convinced after he said it. But yeah, that's true. I think it should remember across sessions the type of view being used.

[gwhitney]

OK, to try to summarize consensus:

1. Rename table view to list view.
2. MathML in the formula title; I plan to render e.g. the sequence used in polyfactors as $a_n = n^3-n^2$, no word "Formula", just the rendered formula itself. We can see how it looks and if it is too "bare" put a word back in. But always using $a_n =$ harmonizes with the OEIS convention that the sequence under discussion is always referred to as a_n.
3. Remember the last-used view in the browser-local storage, and update the local storage whenever it changes.
4. Keep undeletable "Standard" sequences at the head of the list always. I plan to cut down to just two, Formula n and Random from 0 to 9. I will put the Beatty-sequence formula (sqrt(2)n) % 3 in as a default sequence, like the primes A000040 and VF numbers A000045, letting it be deletable and letting it fade into history, as an initial example that you can do lots more with Formulas.

Remaining points that were brought up about which there is not yet consensus:

5) Styling of words "thumbnails" and "list" in the toggle. I am not a fan of the black active/grey inactive distinction, because the motif we use elsewhere is that items go grey-to-black on hover when they are interactable. When thumbnails are currently active, you can click on "list" or on the toggle switch to change it, so maybe in this state, list should go from grey->black on hover. But I feel like then using black for the in-use and grey for the not-in-use option muddies the grey->black on hover means interactable convention. We don't use the Numberscope blue anywhere else to indicate links, but if it seemed confusing in that way I am happy to switch away from it. So here are some options: (a) no styling on the words thumbnails and list, just let the direction of the toggle do all the work. (b) pale Numberscope-blue background on the word that's active. (c) slightly heavier font weight on the word that's active If we choose either b or c we could combine it with the "grey-to-black on hover means clickable" thing, on the inactive word. Let me know your thoughts on a/b/c/d something else and whether to do the grey-to-black thing for the inactive word.

6) Making the current visualizer and current sequence fields look less like text input boxes. I personally think that with switching to MathML formulas, this will be fine. Remember, we made them look like text input boxes as a deliberate "deception" to invite the visitor to click in them to be able to discover the switcher dialogue, because we didn't want to have the words "change sequence" always up on the screen. And then we compromised a bit more with the change button that has a "change sequence" tooltip. Since changing sequences and visualizers is a critical ability that we want visitors to discover, I am reluctant to do anything that will make these title areas any less inviting to click into unless we get to a point of re-thinking how sequence/visualizer selection will work altogether.

Did I miss anything? I will get to work on (1-4) and am happy for more feedback on (5-6).

[katestange]

5. So here are some options: (a) no styling on the words thumbnails and list, just let the direction of the toggle do all the work. (b) pale Numberscope-blue background on the word that's active. (c) slightly heavier font weight on the word that's active If we choose either b or c we could combine it with the "grey-to-black on hover means clickable" thing, on the inactive word.

Oh geez, I don't feel like I can tell without playing with it, nor did it bother me as is. I'm happy to let you pick something to try. Although (b) seems weird.

[katestange]

6. I personally think that with switching to MathML formulas, this will be fine.

I agree.

[Vectornaut]

Styling of words "thumbnails" and "list" in the toggle. I am not a fan of the black active/grey inactive distinction, because the motif we use elsewhere is that items go grey-to-black on hover when they are interactable.

Good point. I'd be fine with switching the inactive choice from gray to black on hover to make this more consistent. I think my main confusions with the current design are:

• The inactive choice looks like part of the "Display as" text, so the whole line reads like

  Display as thumbnails table

  Using a colon (or other punctuation) to separate "Display as" from the options might help with this.

• The inactive choice stands out more than the active choice, because it has higher contrast with the background.

Another color scheme I could imagine, although I'm not a big fan of it, is dark blue for the active choice and pale blue for the inactive choice. With this scheme, though, it might be hard to meet minimum contrast standards for the inactive choice against the background.

Remember, we made them look like text input boxes as a deliberate "deception" to invite the visitor to click in them to be able to discover the switcher dialogue, because we didn't want to have the words "change sequence" always up on the screen.

Yes—just wanted to document being bitten by the downside of this decision.

[katestange]

Also: when you mouseover the words "thumbnails" and "list" your mouse should be a finger pointer.

[gwhitney]

when you mouseover the words "thumbnails" and "list" your mouse should be a finger pointer.

Only the not-currently-active one, since clicking on the currently active one does nothing.

[katestange]

Only the not-currently-active one, since clicking on the currently active one does nothing.

Right!

[gwhitney]

OK that's everything planned except for the MathML formula, so you can play with it if you like and let me know. Will work on MathML formulas next. Not sure how long it will take me to get them to look nice.

[katestange]

Open with fresh browser history. Open sequence switcher, click A000040, open sequence switcher, click Formula, open sequence switcher. There are too many formula thumbnails shown (I see three). I think we are generating extras.

[katestange]

There are too many formula thumbnails shown (I see three). I think we are generating extras.

Wow, follow that up by choosing Formula, changing the visualizer and then opening the sequence switcher again. Now I have six of them.

[gwhitney]

Open with fresh browser history. Open sequence switcher, click A000040, open sequence switcher, click Formula, open sequence switcher. There are too many formula thumbnails shown (I see three). I think we are generating extras.

OK, I just did that (have you pulled my commit from a few moments ago? Are you seeing MathML formulas?) and indeed after this sequence of operations, I see three Formula sequences, but they are all correct: they are (1) n -- always there; (2) n^3-n^2 -- I happened to open up with Polyfactors, which uses this formula, and (3) √2n % 3 -- the preloaded Beatty formula as an example of a more complicated formula. So I don't see anything wrong so far; will try your further actions.

[gwhitney]

Wow, follow that up by choosing Formula, changing the visualizer and then opening the sequence switcher again. Now I have six of them.

Hmm, I followed these directions exactly and still have only the three I just listed above. So I don't see anything wrong on my end. Can you try again, making sure you have the latest code? In the meantime, I will look at the CI test errors -- likely font issues with the MathML...

[gwhitney]

OK, I got the MathML display of formulas to a point where it seemed to be working well for me. So as far as I can tell, everything is ready in this PR and it can have final review. Of course, I want to take care of overly-replicating Formula cards, if that's still happening for Kate with this latest code. I'll look forward to more feedback.

[katestange]

Can you try again, making sure you have the latest code?

Yeah, with the mathML commit the behaviour seems to be gone. Yay!

[katestange]

The MathML looks good (just starting to try it out!)

1. I'm having a sequence chooser height issue that didn't exist before (image below); there's a scrollbar when there's only one row.
2. Also, now the default non-deletable formula thumbnail is named "a_n=n" which makes it rather less clear that it's the "try your own formula!" option if you've never tried that before. I think that one might still be better named "Formula" like it was before, even as the others use their MathML formulae.

[katestange]

When the formula gets long, it can push the chooser button offscreen to the right.

This is still happening. Some examples: http://localhost:5173/?name=ModFill&viz=ModFill&seq=Formula&formula=combinations%28n%2C4%29%2Bn%5E2%2Bn%2Bn%2Bn%2Bn%2Bn%2Bn%2Bn%2Bn%2Bn

[katestange]

I suggest that the saved "thumbnails" vs "list" be separate for sequences and visualizers.

[katestange]

This is a slightly more intermittent bug, but try this, which seems to cause it:

1. clear cache
2. open numberscope
3. go to visualizers, choose turtle
4. go to sequences, search A0000040
5. click to add one of the dropdown A number options
6. click in the search box to add another dropdown option
7. repeat a few more times
8. some thumbnails start to break, as shown

[katestange]

This is a slightly more intermittent bug, but try this, which seems to cause it:

Seems only to happen with turtle and histogram (webgl?) and going to list and back to thumbnails will sometimes fix. Most often happens with the first sequences listed top left.

[gwhitney]

1. I'm having a sequence chooser height issue that didn't exist before (image below); there's a scrollbar when there's only one row.

I'm not actually reproducing here, but I think I know what's going on. I just pushed a commit that I hope fixes the errant height calculation; give it a try when you can. But I also left in some console.log messages that should help diagnose it further if you're still seeing problematic behavior. So give it a shot in a new Numberscope window with this commit, and if it doesn't look OK, post the result of the two or three messages that start with HEIGHTA, HEIGHTB, and maybe HEIGHTC. Thanks.

[katestange]

I just pushed a commit that I hope fixes the errant height calculation; give it a try when you can.

Yes it appears to be fixed!

[gwhitney]

When the formula gets long, it can push the chooser button offscreen to the right.

This is still happening. Some examples:

Ah, interesting. For me the linebreaking is working fine in Firefox, not in Chromium or Edge. Does that match your experience? I will look into it.

[katestange]

Ah, interesting. For me the linebreaking is working fine in Firefox, not in Chromium or Edge. Does that match your experience? I will look into it.

Yes, that matches.

[katestange]

Ah, interesting. For me the linebreaking is working fine in Firefox, not in Chromium or Edge. Does that match your experience? I will look into it.

Yes, that matches.

Your newest commit appears to fix it!

[gwhitney]

Yes, it turns out that chromium-based browsers have different default css for math elements than gecko-based (Firefox) browsers. So the latest commit should turn on formula wrapping in Chrom(e/ium) and Edge. However, I read that formula wrapping does not work in WebKit-based browsers (Safari, Epiphany) and although I can't run Safari I can confirm that even with these changes, the formula wrapping does not occur in Epiphany, so I assume it is not happening in Safari either.

Thoughts? How hard should we work to overcome Safari's apparently slightly broken implementation of MathML? It is the second most popular browser, with a 20-25% market share. On the other hand, super-long formulas won't necessarily come up that often. On the third hand, when they do, we don't want to look like our software is broken (even if it really is Safari's "fault").

[katestange]

How hard should we work to overcome Safari's apparently slightly broken implementation

I would say it's ok to make a separate issue and discuss priority, unless you have a simple enough idea about how to fix.

[katestange]

@gwhitney ui: Always title the permanent Formula card 'Formula'

Maybe we should also title the permanent Random card "Random" (leaving off "0 to 9").