fix: Don't start filling the cache before parameter changes complete

e2e/tests/gallery.spec.ts

@@ -34,7 +34,7 @@ test.describe('Gallery', () => {
         await expect(page.url()).not.toContain('gallery')
         await expect(
             await page.locator('#sequenceTab .item-name')
-        ).toContainText(/12$/)
+        ).toContainText(/163/)
         await expect(
             await page.locator('#visualiserTab .item-name').innerText()
         ).toMatch('Mod Fill')

e2e/tests/scope.spec.ts

@@ -163,7 +163,7 @@ test.describe('Scope: on Random Modfill', () => {
 
         await page.goBack({waitUntil: 'domcontentloaded'})
         await expect(page.url()).toEqual(oldURL)
-        await expect(page.locator('#modDimension')).toHaveValue('10')
+        await expect(page.locator('#modDimension')).toHaveValue('150')
     })
 
     test('refreshing the specimen', async ({page}) => {

src/main.ts

@@ -6,7 +6,11 @@ import router from './router'
 import {alertMessage} from './shared/alertMessage'
 
 const app = createApp(App)
-if (import.meta.env.VITE_WORKBENCH !== '1') {
+if (import.meta.env.VITE_WORKBENCH === '1') {
+    app.config.errorHandler = (err, vm, info) => {
+        console.error('ERROR HANDLER', err, vm, info)
+    }
+} else {
     app.config.errorHandler = e => {
         window.alert(alertMessage(e))
     }

src/sequences/Cached.ts

@@ -284,6 +284,8 @@ export function Cached<PD extends GenericParamDescription>(desc: PD) {
         async cacheValues(n: bigint) {
             // Let any existing value caching complete
             await this.valueCachingPromise
+            // Let any pending parameter changes complete
+            if (this.parChangePromise) await this.parChangePromise
             if (n > this.lastValueCached) {
                 this.valueCachingPromise = this.fillValueCache(n)
                 await this.valueCachingPromise

src/shared/Paramable.ts

@@ -177,7 +177,7 @@ export interface ParamInterface<PT extends ParamType> {
 :   If the `visibleDependency` property is specified, then this parameter
     will only be visible in the UI if the function given as the
     `visiblePredicate` property of this parameter returns true when called
-    with the value of the parameter nameed by the `visibleDependency`
+    with the value of the parameter named by the `visibleDependency`
     property. Note that the `never` type above simply means that the argument
     to the `visiblePredicate` function may have any type.
 <!-- -->
@@ -437,7 +437,7 @@ export interface ParamableInterface {
     produce a valid entity (typically Sequence or Visualizer)?
 <!-- --> **/
     /** xmd */
-    validate(): Promise<ValidationStatus> /* **/
+    validate(): ValidationStatus /* **/
     /** xmd
 :   This method should determine the overall validity of all of the
     `tentativeValues` of this instance of the `ParamableInterface`. It is
@@ -452,7 +452,7 @@ export interface ParamableInterface {
     /** xmd */
     assignParameters(
         realized?: ParamValues<GenericParamDescription>
-    ): Promise<void> /* **/
+    ): void /* **/
     /** xmd
 :   This method must copy the realized value of the proper type of the
     tentative value of each paramaeter to the location where this instance
@@ -469,11 +469,7 @@ export interface ParamableInterface {
 
     This method may optionally be called with a pre-realized parameter
     values object, which it may then assume is correct, in order to avoid
-    the computation of re-realizing the tentative values. Note the method is
-    typically `async` as indicatd by its Promise return value, in case the
-    consequences of the parameter assignment are computationally intensive
-    (the new parameter values could trigger extensive internal recompuations
-    in the instance object).
+    the computation of re-realizing the tentative values.
 <!-- --> **/
     /** xmd */
     refreshParams(): void /* **/
@@ -568,6 +564,7 @@ export class Paramable implements ParamableInterface {
     tentativeValues: GenericStringFields
     statusOf: Record<string, ValidationStatus> = {}
     validationStatus: ValidationStatus
+    parChangePromise: Promise<void> | undefined = undefined
 
     constructor(params: GenericParamDescription) {
         this.params = params
@@ -612,7 +609,7 @@ export class Paramable implements ParamableInterface {
         ).category
     }
 
-    async validate() {
+    validate() {
         // first handle the individual validations
         const parmNames = Object.keys(this.params)
         const realized = Object.fromEntries(
@@ -629,7 +626,7 @@ export class Paramable implements ParamableInterface {
         }
         this.validationStatus = this.checkParameters(realized)
         if (this.validationStatus.isValid()) {
-            await this.assignParameters(realized)
+            this.assignParameters(realized)
         }
         return this.validationStatus
     }
@@ -701,7 +698,7 @@ export class Paramable implements ParamableInterface {
     properties that have been written into the object.
 <!-- --> **/
 
-    async assignParameters(realized?: ParamValues<GenericParamDescription>) {
+    assignParameters(realized?: ParamValues<GenericParamDescription>) {
         if (!realized)
             realized = realizeAll(this.params, this.tentativeValues)
 
@@ -730,7 +727,15 @@ export class Paramable implements ParamableInterface {
                 }
             }
         }
-        if (changed.length > 0) await this.parametersChanged(changed)
+        if (changed.length > 0) {
+            if (this.parChangePromise) {
+                this.parChangePromise.then(() =>
+                    this.parametersChanged(changed)
+                )
+            } else {
+                this.parChangePromise = this.parametersChanged(changed)
+            }
+        }
     }
 
     refreshParams(): void {

src/shared/Specimen.ts

@@ -201,6 +201,15 @@ export class Specimen {
         }
         return this._visualizer
     }
+    /**
+     * Returns the name of the specimen's visualizer, or '' if not yet
+     * initialized
+     * @returns {string} name
+     */
+    visualizerName(): string {
+        if (this._visualizer) return this._visualizer.name
+        return ''
+    }
     /**
      * Returns the specimen's sequence
      * @returns {SequenceInterface} the sequence shown in this specimen
@@ -212,6 +221,15 @@ export class Specimen {
         return this._sequence
     }
 
+    /**
+     * Returns the name of the specimen's sequence, or '' if not yet initialized
+     * @returns {string} name
+     */
+    sequenceName(): string {
+        if (this._sequence) return this._sequence.name
+        return ''
+    }
+
     /**
      * Ensures that the visualizer is aware that the sequence has been
      * updated.

src/views/minor/NavBar.vue

@@ -32,7 +32,7 @@
                             </div>
                             <div class="leftdented">
                                 <a class="nav-link" :href="vizLink()">
-                                    {{ specimen.visualizer.name }}
+                                    {{ specimen.visualizerName() }}
                                     Visualizer </a>┤
                             </div>
                             <div class="leftdented tweakup">
@@ -77,7 +77,7 @@
     }
 
     function seqWord() {
-        return props.specimen.sequence.name.split(/[\s:]/, 2)[0]
+        return props.specimen.sequenceName().split(/[\s:]/, 2)[0] || ''
     }
     function seqLink() {
         return `/doc/src/sequences/${seqWord()}/`

src/visualizers/ModFill.ts

@@ -187,37 +187,37 @@ class ModFill extends P5Visualizer(paramDesc) {
     drawNew(num: bigint) {
         let drawColor = this.useFillColor
         let alphaFormula = this.alpha
-
+        const value = this.seq.getElement(num)
+        // determine alpha
+        const vars = this.highlightFormula.freevars
+        let useNum = 0
+        let useValue = 0
+        // because safeNumber can fail, we conly want to try it
+        // if we need it in the formula
+        if (vars.includes('n')) {
+            useNum = math.safeNumber(num)
+        }
+        if (vars.includes('a')) {
+            useValue = math.safeNumber(value)
+        }
+        // needs to take BigInt when implemented
+        const high = this.highlightFormula.compute(useNum, useValue)
+        if (Number(math.modulo(high, 2)) === 1) {
+            drawColor = this.useHighColor
+            alphaFormula = this.alphaHigh
+        }
+        let x = this.offsetX
         for (let mod = 1; mod <= this.useMod; mod++) {
-            // determine alpha
-            const value = this.seq.getElement(num)
-            const vars = this.highlightFormula.freevars
-            let useNum = 0
-            let useValue = 0
-            // because safeNumber can fail, we conly want to try it
-            // if we need it in the formula
-            if (vars.includes('n')) {
-                useNum = math.safeNumber(num)
-            }
-            if (vars.includes('a')) {
-                useValue = math.safeNumber(value)
-            }
-            // needs to take BigInt when implemented
-            const high = this.highlightFormula.compute(useNum, useValue)
-            if (Number(math.modulo(high, 2)) === 1) {
-                drawColor = this.useHighColor
-                alphaFormula = this.alphaHigh
-            }
             drawColor.setAlpha(255 * alphaFormula.compute(mod))
 
             // draw rectangle
             this.sketch.fill(drawColor)
-            const x = (mod - 1) * this.rectWidth + this.offsetX
             const y =
                 -this.offsetY
                 + this.sketch.height
                 - Number(math.modulo(value, mod) + 1n) * this.rectHeight
             this.sketch.rect(x, y, this.rectWidth, this.rectHeight)
+            x += this.rectWidth
         }
     }
 
@@ -288,7 +288,10 @@ class ModFill extends P5Visualizer(paramDesc) {
             return
         }
         this.drawNew(this.i)
-        this.i++
+        // Important to increment _after_ drawNew completes, because it
+        // won't complete on a cache miss, and in that case we don't want to
+        // increment the index because we didn't actually draw anything.
+        ++this.i
     }
 }