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

  This partially resolves numberscope#430; the only portion remaining is to have a
  limit on the number of sequences that will show as thumbnails (the
  rest will show as a table or something like that).

  Also, 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) a sequence or visualizer is selected in the SwitcherModal; or (d) the
  current specimen is saved to the Gallery.

  This commit removes the former list of OEIS IDs that was being saved in
  browser localStorage, as it is superseded by this sequence-saving feature.
  That removal means that the frontscope no longer (pre-)fetches a collection
  of OEIS sequences immediately on startup; they are loaded only as used.

doc/visualizer-in-depth.md

@@ -435,6 +435,12 @@ you: return `true` if you have handled any need to reset (and so the framework
 should NOT call `reset()`), and false if you do want the framework to
 `reset()`.
 
+### Draw your visualization
+
+The P5Visualizer provides a utility method `hatchRect(x, y, w, h)` that draws
+a rectangle with corner at (x, y) and width w and height h, filled with
+diagonal hatch lines.
+
 ### Show or stop the visualization; depart from a page element
 
 You shouldn't frequently need to implement `show()`, `stop()`, or `depart()`.

e2e/tests/scope.spec.ts

@@ -73,11 +73,12 @@ test.describe('Scope: on some featured visualization', () => {
     })
 
     test('Changing a sequence', async ({page}) => {
+        const lookFor = 'Formula: n'
         await page.locator('#sequenceTab .visualizer-info').click()
-        await page.locator('.results .card-body').first().click()
+        await page.getByText(lookFor).click()
         await expect(
             await page.locator('#sequenceTab .item-name').innerText()
-        ).toMatch('Formula: n')
+        ).toMatch(lookFor)
     })
 
     test('minimizing a tab', async ({page}) => {

package.json

@@ -91,7 +91,6 @@
         "bigint-mod-arith": "^3.3.1",
         "interactjs": "^1.10.27",
         "p5": "^1.11.0",
-        "p5.brush": "^1.1.2",
         "vue": "^3.4.31",
         "vue-router": "^4.4.0"
     },

src/App.vue

@@ -8,10 +8,6 @@
 
 <script setup lang="ts">
     import {RouterView} from 'vue-router'
-
-    import {reactivateOEIS} from '@/sequences/sequences'
-
-    reactivateOEIS()
 </script>
 
 <!-- Global styles. This style tag is explicitly unscoped. -->

src/components/SpecimenCard.vue

@@ -34,11 +34,7 @@
 <script lang="ts">
     import {defineComponent} from 'vue'
     import {Specimen} from '../shared/Specimen'
-    import {
-        deleteSpecimen,
-        nameOfQuery,
-        oeisLinkFor,
-    } from '../shared/browserCaching'
+    import {nameOfQuery, oeisLinkFor} from '../shared/browserCaching'
     import Thumbnail from './Thumbnail.vue'
 
     let cid_count = 0
@@ -75,8 +71,7 @@
                 this.$emit('selected')
             },
             deleteSpecimen() {
-                deleteSpecimen(this.specimenName)
-                this.$emit('specimenDeleted', this.specimenName)
+                this.$emit('specimenDeleted')
             },
             oeisLinkFor,
         },

src/components/SpecimensGallery.vue

@@ -1,29 +1,27 @@
 <template>
     <div class="gallery">
         <SpecimenCard
-            v-for="specimen in currentSpecs()"
+            v-for="specimen in specimens"
             :key="specimen.subtitle + specimen.query"
             :query="specimen.query"
             :subtitle="specimen.subtitle"
             :last-edited="specimen.lastEdited"
-            :permanent="'canDelete' in specimen && !specimen.canDelete"
+            :permanent="!specimen?.canDelete"
             @selected="emit('selected')"
-            @specimen-deleted="removeSpecimen" />
+            @specimen-deleted="removeSpecimen(specimen)" />
     </div>
 </template>
 
 <script setup lang="ts">
     // Note the :key above needs to include the subtitle so that
     // when the subtitle loads, the card will be replaced.
     import SpecimenCard from './SpecimenCard.vue'
-    import {nameOfQuery} from '../shared/browserCaching'
-    import {ref} from 'vue'
 
     export interface CardSpecimen {
         query: string
         subtitle?: string
         lastEdited?: string
-        canDelete: boolean
+        canDelete?: boolean // if not present defaults to false
     }
 
     const props = defineProps<{
@@ -32,20 +30,9 @@
 
     const emit = defineEmits(['removeSpecimen', 'selected'])
 
-    const currentSpecimens = ref(props.specimens)
-
-    function currentSpecs() {
-        if (currentSpecimens.value.length) return currentSpecimens.value
-        currentSpecimens.value = props.specimens
-        return currentSpecimens.value
-    }
-
-    function removeSpecimen(name: string) {
-        const index = currentSpecimens.value.findIndex(
-            spec => name === nameOfQuery(spec.query)
-        )
-        if (index > -1) currentSpecimens.value.splice(index, 1)
-        emit('removeSpecimen', name)
+    function removeSpecimen(spec: CardSpecimen) {
+        const index = props.specimens.indexOf(spec)
+        emit('removeSpecimen', index)
     }
 </script>