feat: human-readable URLs based on query strings

package.json

@@ -89,37 +89,37 @@
         "bigint-mod-arith": "^3.3.1",
         "interactjs": "^1.10.27",
         "p5": "^1.9.2",
-        "vue": "^3.4.24",
-        "vue-router": "^4.3.2"
+        "vue": "^3.4.31",
+        "vue-router": "^4.4.0"
     },
     "devDependencies": {
-        "@rushstack/eslint-patch": "^1.10.2",
+        "@rushstack/eslint-patch": "^1.10.3",
         "@tsconfig/node20": "^20.1.4",
-        "@types/jsdom": "^21.1.6",
-        "@types/node": "^20.12.7",
+        "@types/jsdom": "^21.1.7",
+        "@types/node": "^20.14.10",
         "@types/p5": "^1.7.6",
-        "@vitejs/plugin-vue": "^5.0.4",
+        "@vitejs/plugin-vue": "^5.0.5",
         "@vue/eslint-config-prettier": "^9.0.0",
         "@vue/eslint-config-typescript": "^13.0.0",
-        "@vue/test-utils": "^2.4.5",
+        "@vue/test-utils": "^2.4.6",
         "@vue/tsconfig": "^0.5.1",
         "axios": "^1.6.8",
         "eslint": "^8.57.0",
-        "eslint-plugin-vue": "^9.25.0",
-        "happy-dom": "^14.7.1",
+        "eslint-plugin-vue": "^9.27.0",
+        "happy-dom": "^14.12.3",
         "husky": "^9.0.11",
-        "jsdom": "^24.0.0",
-        "lint-staged": "^15.2.2",
+        "jsdom": "^24.1.0",
+        "lint-staged": "^15.2.7",
         "mathjs": "^12.4.1",
         "npm-run-all": "^4.1.5",
-        "prettier": "^3.2.5",
+        "prettier": "^3.3.3",
         "prettier-eslint": "^16.3.0",
         "prettier-eslint-cli": "^8.0.1",
         "sass": "^1.77.2",
-        "typescript": "^5.4.5",
-        "vite": "^5.2.10",
-        "vitest": "^1.5.0",
-        "vue-tsc": "^2.0.14",
+        "typescript": "^5.5.3",
+        "vite": "^5.3.3",
+        "vitest": "^1.6.0",
+        "vue-tsc": "^2.0.26",
         "vue-unique-id": "^3.2.1"
     },
     "lint-staged": {

src/components/SpecimenBar.vue

@@ -120,35 +120,22 @@
                 if (!(name instanceof HTMLInputElement)) return
                 const specimenName = name.value
 
-                try {
-                    // check if specimen with that name already exists
-                    // if it exists, we should ask the user
-                    // if they want to overwrite it
-                    getSIMByName(specimenName)
+                const existingSpecimen = getSIMByName(specimenName)
+                if (existingSpecimen) {
                     const overwrite =
                         document.getElementById('overwrite-popup')
                     if (!(overwrite instanceof HTMLElement)) return
                     overwrite.style.visibility = 'visible'
                     overwrite.style.opacity = '1'
-                } catch (e) {
+                } else {
                     // not in database, so we can save it without repercussions
                     this.saveCurrent()
                 }
             },
             saveCurrent() {
-                //get rid of overwrite popup (if it is visible)
                 this.removeOverwritePopup()
-                // get specimen encoding
-                const base64 = this.specimen.encode64()
-                // get specimen name
-                const name = document.querySelector('input[type="text"]')
-                if (!(name instanceof HTMLInputElement)) return
-                const specimenName = name.value
-
-                //save to browser
-                saveSpecimen(base64, specimenName)
+                saveSpecimen(this.specimen.query)
 
-                //get notification element
                 const notification = document.getElementById('save-popup')
                 if (!(notification instanceof HTMLElement)) return
 

src/components/SpecimenCard.vue

@@ -1,6 +1,6 @@
 <template>
     <div class="card-body" v-on:click="openSpecimen">
-        <Thumbnail :base64 />
+        <Thumbnail :query />
         <div class="card-title-box">
             <div>
                 <h5 class="card-title">
@@ -25,15 +25,15 @@
 <script lang="ts">
     import {defineComponent} from 'vue'
     import {Specimen} from '../shared/Specimen'
-    import {deleteSpecimen} from '../shared/browserCaching'
+    import {deleteSpecimen, nameOfQuery} from '../shared/browserCaching'
     import Thumbnail from './Thumbnail.vue'
 
     let cid_count = 0
 
     export default defineComponent({
         name: 'SpecimenCard',
         props: {
-            base64: {type: String, required: true},
+            query: {type: String, required: true},
             lastEdited: {type: String},
             subtitle: {type: String},
             permanent: {type: Boolean},
@@ -50,12 +50,7 @@
         methods: {
             openSpecimen() {
                 this.$router
-                    .push({
-                        path: '/',
-                        query: {
-                            specimen: this.base64,
-                        },
-                    })
+                    .push(`/?${this.query}`)
                     .then(_value => window.location.reload())
             },
             deleteSpecimen() {
@@ -64,9 +59,9 @@
             },
         },
         mounted() {
-            this.specimenName = Specimen.getNameFrom64(this.base64)
+            this.specimenName = nameOfQuery(this.query)
             if (this.subtitle) this.useSub = this.subtitle
-            else this.useSub = Specimen.getSequenceNameFrom64(this.base64)
+            else this.useSub = Specimen.getSequenceNameFromQuery(this.query)
         },
         components: {
             Thumbnail,

src/components/SpecimensGallery.vue

@@ -2,8 +2,8 @@
     <div class="gallery">
         <SpecimenCard
             v-for="specimen in currentSpecs()"
-            :key="specimen.base64"
-            :base64="specimen.base64"
+            :key="specimen.query"
+            :query="specimen.query"
             :subtitle="specimen.subtitle"
             :lastEdited="specimen.lastEdited"
             @specimenDeleted="removeSpecimen"
@@ -13,11 +13,11 @@
 
 <script setup lang="ts">
     import SpecimenCard from './SpecimenCard.vue'
-    import {Specimen} from '../shared/Specimen'
+    import {nameOfQuery} from '../shared/browserCaching'
     import {ref} from 'vue'
 
     export interface CardSpecimen {
-        base64: string
+        query: string
         subtitle?: string
         lastEdited?: string
     }
@@ -37,7 +37,7 @@
 
     function removeSpecimen(name: string) {
         const index = currentSpecimens.value.findIndex(
-            spec => name === Specimen.getNameFrom64(spec.base64)
+            spec => name === nameOfQuery(spec.query)
         )
         if (index > -1) currentSpecimens.value.splice(index, 1)
     }

src/components/SwitcherModal.vue

@@ -50,6 +50,7 @@
     import type {CardSpecimen} from '../components/SpecimensGallery.vue'
     import seqMODULES from '../sequences/sequences'
     import vizMODULES from '../visualizers/visualizers'
+    import {specimenQuery} from '../shared/browserCaching'
     import {isMobile} from '../shared/layoutUtilities'
     import {Specimen} from '../shared/Specimen'
 
@@ -153,22 +154,12 @@
                 cat === 'sequence' ? props.specimen.visualizerKey : module
             const seqKey =
                 cat === 'sequence' ? module : props.specimen.sequenceKey
-            const vis64 =
-                cat === 'sequence' ? props.specimen.visualizer.toBase64() : ''
-            const seq64 =
-                cat === 'sequence' ? '' : props.specimen.sequence.toBase64()
-            // TODO: Way to produce Specimen _encodings_ without having to
-            // actually construct the Specimen; maybe do this if/when we
-            // switch to human-readable encodings
-            const alteredSpec = new Specimen(
-                module,
-                visKey,
-                seqKey,
-                vis64,
-                seq64
-            )
+            const visQ =
+                cat === 'sequence' ? props.specimen.visualizer.query : ''
+            const seqQ =
+                cat === 'sequence' ? '' : props.specimen.sequence.query
             const newCard: CardSpecimen = {
-                base64: alteredSpec.encode64(),
+                query: specimenQuery(module, visKey, seqKey, visQ, seqQ),
                 subtitle: options[module],
             }
             cards.push(newCard)

src/components/Thumbnail.vue

@@ -5,21 +5,21 @@
 <script setup lang="ts">
     import {onMounted, onUnmounted, ref} from 'vue'
     import {Specimen} from '@/shared/Specimen'
-    import {defaultSpecimen} from '@/shared/browserCaching'
 
     const canvasContainer = ref<HTMLDivElement | null>(null)
-    let specimen = defaultSpecimen
-    const props = defineProps(['base64'])
+    let specimen: Specimen | undefined = undefined
+    const props = defineProps(['query'])
 
     onMounted(() => {
-        specimen = Specimen.decode64(props.base64)
+        specimen = Specimen.fromQuery(props.query)
         if (!(canvasContainer.value instanceof HTMLElement)) return
         specimen.setup(canvasContainer.value)
-        setTimeout(() => specimen.visualizer.stop(), 4000)
+        setTimeout(() => specimen?.visualizer.stop(), 4000)
     })
 
     onUnmounted(() => {
-        if (!(canvasContainer.value instanceof HTMLElement)) return
+        if (!specimen || !(canvasContainer.value instanceof HTMLElement))
+            return
         specimen.visualizer.depart(canvasContainer.value)
     })
 </script>

src/main.ts

@@ -4,8 +4,10 @@ import router from './router'
 import {alertMessage} from './shared/alertMessage'
 
 const app = createApp(App)
-app.config.errorHandler = e => {
-    window.alert(alertMessage(e))
+if (import.meta.env.VITE_WORKBENCH !== '1') {
+    app.config.errorHandler = e => {
+        window.alert(alertMessage(e))
+    }
 }
 
 app.use(router)

src/shared/ParamType.ts

@@ -42,21 +42,21 @@ export enum ParamType {
      */
     STRING,
     /**
-     * An array of numbers realized as a `number[]`. It is rendered
-     * as a standard input field, but is expected to take the form
-     * of a comma separated list of floating point numbers.
+     * An array of numbers realized as a `number[]`. It is rendered as a
+     * standard input field, but is expected to take the form of a list
+     * of floating point numbers separated by whitespace or commas.
      */
     NUMBER_ARRAY,
     /**
      * An array of integers realized as a `bigint[]`. It is rendered
      * as a standard input field, but is expected to take the form
-     * of a comma separated list of integers.
+     * of a list of integers spearated by whitespace or commas.
      */
     BIGINT_ARRAY,
     /**
      * A two-element vector, realized as `p5.Vector`. It is rendered
-     * as a standard input field, but is expected to take the form
-     * of two floating point numbers separated by a comma.
+     * as a standard input field, but is expected to take the form of
+     * two floating point numbers separated by whitespace or a comma.
      */
     VECTOR,
 }
@@ -105,6 +105,26 @@ export interface ParamTypeFunctions<T> {
     derealize(value: T): string
 }
 
+// Helper function for arrays:
+const validateNumbers = (
+    value: string,
+    status: ValidationStatus,
+    nParts?: number
+) => {
+    const parts = value.trim().split(/\s*[\s,]\s*/)
+    let bad = parts.some(part => isNaN(Number(part)))
+    let many = ' '
+    if (nParts && nParts > 1 && parts.length !== nParts) {
+        bad = true
+        many = `${nParts} `
+    }
+    if (bad)
+        status.addError(
+            `Input must be a list of ${many}`
+                + 'numbers separated by whitespace or commas'
+        )
+}
+
 const typeFunctions: {
     [K in ParamType]: ParamTypeFunctions<RealizedParamType[K]>
 } = {
@@ -172,62 +192,37 @@ const typeFunctions: {
         derealize: value => `${value}`,
     },
     [ParamType.NUMBER_ARRAY]: {
-        validate: (value, status) => {
-            if (
-                value
-                    .trim()
-                    .match(
-                        /^(-?(\d+\.\d*|\.?\d+)(\s*,\s*-?(\d+\.\d*|\.?\d+))*)?$/
-                    ) === null
-            )
-                status.addError(
-                    'Input must be a comma-separated list of numbers'
-                )
-        },
-        realize: value => {
-            const numbers = value.split(',')
-            const array = []
-            for (const number of numbers)
-                array.push(parseFloat(number.trim()))
-            return array
-        },
-        derealize: value => (value as number[]).join(', '),
+        validate: validateNumbers,
+        realize: value =>
+            value
+                .trim()
+                .split(/\s*[\s,]\s*/)
+                .map(part => parseFloat(part)),
+        derealize: value => (value as number[]).join(' '),
     },
     [ParamType.BIGINT_ARRAY]: {
         validate: (value, status) => {
-            if (value.trim().match(/^(-?\d+(\s*,\s*-?\d+)*)?$/) === null)
+            if (value.trim().match(/^(-?\d+(\s*[\s,]\s*-?\d+)*)?$/) === null)
                 status.addError(
-                    'Input must be a comma-separated list of integers'
+                    'Input must be a list of integers '
+                        + 'separated by whitespace or commas'
                 )
         },
-        realize: value => {
-            const numbers = value.split(',')
-            const array = []
-            for (const number of numbers) array.push(BigInt(number.trim()))
-            return array
-        },
-        derealize: value => (value as bigint[]).join(', '),
+        realize: value =>
+            value
+                .trim()
+                .split(/\s*[\s,]\s*/)
+                .map(part => BigInt(part)),
+        derealize: value => (value as bigint[]).join(' '),
     },
     [ParamType.VECTOR]: {
-        validate: (value, status) => {
-            if (
-                value
-                    .trim()
-                    .match(
-                        /^-?(\d+\.\d*|\.?\d+)\s*,\s*-?(\d+\.\d*|\.?\d+)$/
-                    ) === null
-            )
-                status.addError('Input must be two comma-separated numbers')
-        },
+        validate: (value, status) => validateNumbers(value, status, 2),
         realize: value => {
-            const numbers = value.split(',')
-            return new p5.Vector(
-                parseFloat(numbers[0].trim()),
-                parseFloat(numbers[1].trim())
-            )
+            const coords = value.split(/\s*[\s,]\s*/)
+            return new p5.Vector(parseFloat(coords[0]), parseFloat(coords[1]))
         },
         derealize: value =>
-            `${(value as p5.Vector).x}, ${(value as p5.Vector).y}`,
+            `${(value as p5.Vector).x} ${(value as p5.Vector).y}`,
     },
 }