From 7d370df36e2354e606cab79170b393ce0226f831 Mon Sep 17 00:00:00 2001
From: Lumi Pakkanen <lumi.pakkanen@gmail.com>
Date: Thu, 16 May 2024 20:11:24 +0300
Subject: [PATCH] Upload scales to a server for sharing

ref #456
---
 .env.development                   |   1 +
 .gitignore                         |   3 +
 package.json                       |   2 +-
 src/App.vue                        |  10 +--
 src/__tests__/util.spec.ts         |  33 ++++++++-
 src/components/ExporterButtons.vue | 104 ++++++++++++++++++++---------
 src/constants.ts                   |   3 +
 src/main.ts                        |  26 ++++++++
 src/router/index.ts                |   5 ++
 src/scale.ts                       |  33 +++++++++
 src/stores/scale.ts                |  95 +++++++++++++++++++++++---
 src/stores/state.ts                |  13 ++--
 src/utils.ts                       |  79 ++++++++++++++++++++++
 src/views/LoadScaleView.vue        |  65 ++++++++++++++++++
 src/views/PreferencesView.vue      |   9 +++
 src/views/ScaleView.vue            |   5 +-
 src/views/SynthView.vue            |   4 +-
 src/views/VirtualKeyboardView.vue  |   4 +-
 src/views/VirtualQwerty.vue        |   4 +-
 19 files changed, 436 insertions(+), 62 deletions(-)
 create mode 100644 .env.development
 create mode 100644 src/views/LoadScaleView.vue

diff --git a/.env.development b/.env.development
new file mode 100644
index 00000000..8ba9c0cf
--- /dev/null
+++ b/.env.development
@@ -0,0 +1 @@
+VITE_API_URL=http://localhost:17461/
diff --git a/.gitignore b/.gitignore
index 78710161..a1040d94 100644
--- a/.gitignore
+++ b/.gitignore
@@ -27,3 +27,6 @@ coverage
 *.njsproj
 *.sln
 *.sw?
+
+# Production secrets
+.env.production
diff --git a/package.json b/package.json
index 0475f02e..660897f7 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "scale-workshop",
-  "version": "3.0.0-beta.27",
+  "version": "3.0.0-beta.28",
   "scripts": {
     "dev": "vite",
     "build": "run-p type-check \"build-only {@}\" --",
diff --git a/src/App.vue b/src/App.vue
index 2fcbb06b..ffc9915b 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -313,7 +313,7 @@ function typingKeydown(event: CoordinateKeyboardEvent) {
   let index = scale.scale.baseMidiNote + scale.scale.size * scale.equaveShift + scale.degreeShift
 
   if (scale.keyboardMode === 'isomorphic') {
-    index += x * state.isomorphicHorizontal + (2 - y) * state.isomorphicVertical
+    index += x * scale.isomorphicHorizontal + (2 - y) * scale.isomorphicVertical
   } else {
     if (scale.qwertyMapping.has(event.code)) {
       // QWERTY mapping incorporates shifts
@@ -356,8 +356,8 @@ onMounted(() => {
       scale.userBaseFrequency = scaleWorkshopOneData.freq
       scale.autoFrequency = false
       scale.baseMidiNote = scaleWorkshopOneData.midi
-      state.isomorphicHorizontal = scaleWorkshopOneData.horizontal
-      state.isomorphicVertical = scaleWorkshopOneData.vertical
+      scale.isomorphicHorizontal = scaleWorkshopOneData.horizontal
+      scale.isomorphicVertical = scaleWorkshopOneData.vertical
 
       if (scaleWorkshopOneData.data !== undefined) {
         const colors = scaleWorkshopOneData.colors ?? ''
@@ -394,8 +394,8 @@ onMounted(() => {
       scale.userBaseFrequency = decodedState.baseFrequency
       scale.autoFrequency = false
       scale.baseMidiNote = decodedState.baseMidiNote
-      state.isomorphicHorizontal = decodedState.isomorphicHorizontal
-      state.isomorphicVertical = decodedState.isomorphicVertical
+      scale.isomorphicHorizontal = decodedState.isomorphicHorizontal
+      scale.isomorphicVertical = decodedState.isomorphicVertical
       scale.keyboardMode = decodedState.keyboardMode
       scale.pianoMode = pianoMode
       scale.equaveShift = decodedState.equaveShift
diff --git a/src/__tests__/util.spec.ts b/src/__tests__/util.spec.ts
index 0cd95b97..7869a817 100644
--- a/src/__tests__/util.spec.ts
+++ b/src/__tests__/util.spec.ts
@@ -1,6 +1,13 @@
 import { describe, it, expect } from 'vitest'
 
-import { autoKeyColors, formatExponential, formatHertz, gapKeyColors } from '../utils'
+import {
+  autoKeyColors,
+  encodeUrlSafe64,
+  formatExponential,
+  formatHertz,
+  gapKeyColors,
+  randomId
+} from '../utils'
 
 function naiveExponential(x: number, fractionDigits = 3) {
   if (Math.abs(x) < 10000) {
@@ -92,3 +99,27 @@ describe('Gap key color algorithm', () => {
     )
   })
 })
+
+describe('URL safe number encoder', () => {
+  it('encodes the whole range', () => {
+    const expected = '0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ-~'
+    for (let i = 0; i < 64; ++i) {
+      expect(encodeUrlSafe64(i)).toBe(expected[i])
+    }
+  })
+})
+
+describe('Unique ID generator', () => {
+  it('produces a short URL-friendly identifier', () => {
+    const urlSafe = '0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ-~'
+    const id = randomId()
+    expect(id).toHaveLength(9)
+    for (const char of id) {
+      expect(urlSafe).toContain(char)
+    }
+  })
+
+  it("won't collide with this particular identifier for 30 years", () => {
+    expect(randomId()).not.toBe('oKh5gWb04')
+  })
+})
diff --git a/src/components/ExporterButtons.vue b/src/components/ExporterButtons.vue
index 64626b9d..b366b91a 100644
--- a/src/components/ExporterButtons.vue
+++ b/src/components/ExporterButtons.vue
@@ -1,11 +1,11 @@
 <script setup lang="ts">
-import { APP_TITLE } from '@/constants'
+import { API_URL, APP_TITLE } from '@/constants'
 import { exportFile, type ExporterKey } from '@/exporters'
 import type { ExporterParams } from '@/exporters/base'
 import { useScaleStore } from '@/stores/scale'
 import { useStateStore } from '@/stores/state'
-import { sanitizeFilename } from '@/utils'
-import { defineAsyncComponent, ref } from 'vue'
+import { makeEnvelope, sanitizeFilename } from '@/utils'
+import { computed, defineAsyncComponent, ref } from 'vue'
 
 const KorgExportModal = defineAsyncComponent(
   () => import('@/components/modals/export/KorgExport.vue')
@@ -20,41 +20,85 @@ const ReaperExportModal = defineAsyncComponent(
 const state = useStateStore()
 const scale = useScaleStore()
 
-const exportTextClipboard = ref('[URL sharing disabled]')
+const exportTextClipboard = ref(
+  API_URL ? "Copy this scale's unique URL to clipboard" : '[URL sharing disabled]'
+)
 const showKorgExportModal = ref(false)
 const showMtsSysexExportModal = ref(false)
 const showReaperExportModal = ref(false)
 
+const uploadBody = computed(() => {
+  return JSON.stringify({
+    id: scale.id,
+    payload: scale.toJSON(),
+    envelope: makeEnvelope(state.shareStatistics)
+  })
+})
+
+function uploadScale(retries = 1): Promise<string> {
+  const uploadId = scale.id
+  if (scale.uploadedId === uploadId) {
+    return Promise.resolve(`${window.location.host}/scale/${uploadId}`)
+  }
+  return new Promise((resolve) => {
+    if (!API_URL) {
+      return resolve(window.location.host)
+    }
+    fetch(new URL('scale', API_URL), { method: 'POST', body: uploadBody.value })
+      .then((res) => {
+        // Id collision: Retry
+        if (res.status === 409 && retries > 0) {
+          scale.rerollId()
+          return uploadScale(retries - 1).then(resolve)
+        }
+        if (res.ok) {
+          scale.uploadedId = uploadId
+          return resolve(`${window.location.host}/scale/${uploadId}`)
+        } else {
+          return resolve(window.location.host)
+        }
+      })
+      .catch(() => resolve(window.location.host))
+  })
+}
+
+defineExpose({ uploadScale })
+
 function copyToClipboard() {
-  exportTextClipboard.value = 'No!'
-  window.setTimeout(() => {
-    exportTextClipboard.value = '[URL sharing disabled]'
-  }, 5000)
-  /*
-  window.navigator.clipboard.writeText(window.location.href)
-  exportTextClipboard.value = '[Copied URL to clipboard]'
-  window.setTimeout(() => {
-    exportTextClipboard.value = "Copy this scale's unique URL to clipboard"
-  }, 5000)
-  */
+  if (API_URL) {
+    uploadScale().then((url) => {
+      window.navigator.clipboard.writeText(url)
+      exportTextClipboard.value = '[Copied URL to clipboard]'
+      window.setTimeout(() => {
+        exportTextClipboard.value = "Copy this scale's unique URL to clipboard"
+      }, 5000)
+    })
+  } else {
+    exportTextClipboard.value = 'You must have sw-server running for this to work!'
+    window.setTimeout(() => {
+      exportTextClipboard.value = '[URL sharing disabled]'
+    }, 5000)
+  }
 }
 
 function doExport(exporter: ExporterKey) {
-  const params: ExporterParams = {
-    newline: state.newline,
-    scaleUrl: window.location.href,
-    filename: sanitizeFilename(scale.scale.title),
-    relativeIntervals: scale.relativeIntervals,
-    scale: scale.scale,
-    labels: scale.labels,
-    midiOctaveOffset: -1,
-    description: scale.scale.title,
-    sourceText: scale.sourceText,
-    appTitle: APP_TITLE,
-    date: new Date()
-  }
+  uploadScale().then((scaleUrl) => {
+    const params: ExporterParams = {
+      newline: state.newline,
+      scaleUrl,
+      filename: sanitizeFilename(scale.scale.title),
+      relativeIntervals: scale.relativeIntervals,
+      scale: scale.scale,
+      labels: scale.labels,
+      midiOctaveOffset: -1,
+      description: scale.scale.title,
+      sourceText: scale.sourceText,
+      appTitle: APP_TITLE,
+      date: new Date()
+    }
 
-  exportFile(exporter, params)
+    exportFile(exporter, params)
+  })
 }
 </script>
 <template>
@@ -93,7 +137,7 @@ function doExport(exporter: ExporterKey) {
     />
   </Teleport>
   <h2>Export current settings</h2>
-  <a href="#" class="btn disabled" @click="copyToClipboard">
+  <a href="#" :class="{ btn: true, disabled: !API_URL }" @click="copyToClipboard">
     <p><strong>Share scale</strong></p>
     <p>{{ exportTextClipboard }}</p>
   </a>
diff --git a/src/constants.ts b/src/constants.ts
index 41a8acba..c5ad088e 100644
--- a/src/constants.ts
+++ b/src/constants.ts
@@ -2,6 +2,9 @@ import { Interval, TimeMonzo } from 'sonic-weave'
 import { version } from '../package.json'
 import { Fraction, PRIME_CENTS } from 'xen-dev-utils'
 
+// .env config
+export const API_URL: string | undefined = import.meta.env.VITE_API_URL
+
 // GLOBALS
 export const APP_TITLE = `Scale Workshop ${version}`
 
diff --git a/src/main.ts b/src/main.ts
index c74443cb..1ec74768 100644
--- a/src/main.ts
+++ b/src/main.ts
@@ -2,6 +2,32 @@ import { createApp } from 'vue'
 import { createPinia } from 'pinia'
 import App from '@/App.vue'
 import router from '@/router'
+import { API_URL } from './constants'
+
+if (import.meta.env.DEV) {
+  if (API_URL) {
+    fetch(API_URL)
+      .then((res) => res.text())
+      .then((body) => {
+        if (!body.includes('Scale Workshop server')) {
+          console.warn('VITE_API_URL responded with foreign data.')
+          console.log(body)
+        } else {
+          console.info('VITE_API_URL responded. Scale URLs should work.')
+        }
+      })
+      .catch((err) => {
+        console.warn('VITE_API_URL did not respond. Is sw-server running?')
+        console.error(err)
+      })
+  } else {
+    console.warn('VITE_API_URL not configured. Scale URLs will not work.')
+  }
+}
+
+if (!localStorage.getItem('uuid')) {
+  localStorage.setItem('uuid', crypto.randomUUID())
+}
 
 const app = createApp(App)
 
diff --git a/src/router/index.ts b/src/router/index.ts
index cf64acc2..fc56b669 100644
--- a/src/router/index.ts
+++ b/src/router/index.ts
@@ -37,6 +37,11 @@ const router = createRouter({
       // which is lazy-loaded when the route is visited.
       component: () => import('../views/AboutView.vue')
     },
+    {
+      path: '/scale/:id',
+      name: 'load-scale',
+      component: () => import('../views/LoadScaleView.vue')
+    },
     {
       path: '/analysis',
       name: 'analysis',
diff --git a/src/scale.ts b/src/scale.ts
index 6aab29ec..da0bd83e 100644
--- a/src/scale.ts
+++ b/src/scale.ts
@@ -38,6 +38,39 @@ export class Scale {
     return valueToCents(this.equaveRatio)
   }
 
+  /**
+   * Convert this {@link Scale} instance to JSON.
+   * @returns The serialized object with property `type` set to `'ScaleWorkshopScale'`.
+   */
+  toJSON() {
+    return {
+      type: 'ScaleWorkshopScale',
+      intervalRatios: this.intervalRatios,
+      baseFrequency: this.baseFrequency,
+      baseMidiNote: this.baseMidiNote,
+      title: this.title
+    }
+  }
+
+  /**
+   * Revive a {@link Scale} instance produced by `Scale.toJSON()`. Return everything else as is.
+   *
+   * Intended usage:
+   * ```ts
+   * const data = JSON.parse(serializedData, Scale.reviver);
+   * ```
+   *
+   * @param key Property name.
+   * @param value Property value.
+   * @returns Deserialized {@link Scale} instance or other data without modifications.
+   */
+  static reviver(key: string, value: any) {
+    if (typeof value === 'object' && value !== null && value.type === 'ScaleWorkshopScale') {
+      return new Scale(value.intervalRatios, value.baseFrequency, value.baseMidiNote, value.title)
+    }
+    return value
+  }
+
   /**
    * Obtain the ratio agains the base MIDI note.
    * @param index MIDI index of a note.
diff --git a/src/stores/scale.ts b/src/stores/scale.ts
index b0cd55d4..d4e60598 100644
--- a/src/stores/scale.ts
+++ b/src/stores/scale.ts
@@ -4,7 +4,8 @@ import {
   type AccidentalStyle,
   syncValues,
   isBlackMidiNote,
-  midiNoteNumberToName
+  midiNoteNumberToName,
+  randomId
 } from '@/utils'
 import { defineStore } from 'pinia'
 import { computed, ref, watch } from 'vue'
@@ -94,6 +95,9 @@ export const useScaleStore = defineStore('scale', () => {
   const error = ref('')
   const warning = ref('')
 
+  // Isomorphic offsets don't couple to anything else here, but they're part of the shareable live state.
+  const isomorphicVertical = ref(5)
+  const isomorphicHorizontal = ref(1)
   // Keyboard mode affects both physical qwerty and virtual keyboards
   const keyboardMode = ref<'isomorphic' | 'piano'>('isomorphic')
   // QWERTY mapping is coupled to equave and degree shifts
@@ -109,6 +113,9 @@ export const useScaleStore = defineStore('scale', () => {
   const middleAccidentalColor = ref('navy')
   const highAccidentalColor = ref('indigo')
 
+  const id = ref('000000000')
+  const uploadedId = ref('000000000')
+
   // === Computed state ===
   const sourcePrefix = computed(() => {
     const base = `numComponents(${DEFAULT_NUMBER_OF_COMPONENTS})\n`
@@ -334,6 +341,10 @@ export const useScaleStore = defineStore('scale', () => {
   }
 
   // Methods
+  function rerollId() {
+    id.value = randomId()
+  }
+
   function getUserScopeVisitor() {
     const globalVisitor = getGlobalScaleWorkshopVisitor()
     const visitor = new StatementVisitor(globalVisitor)
@@ -435,27 +446,21 @@ export const useScaleStore = defineStore('scale', () => {
     }
   }
 
-  return {
-    // Live state
+  const LIVE_STATE = {
     name,
     baseMidiNote,
     userBaseFrequency,
     autoFrequency,
     autoColors,
-    baseFrequencyDisplay,
-    sourcePrefix,
     sourceText,
     scale,
     relativeIntervals,
     colors,
     labels,
-    latticePermutation,
-    inverseLatticePermutation,
-    latticeIntervals,
-    latticeColors,
-    latticeLabels,
     error,
     warning,
+    isomorphicVertical,
+    isomorphicHorizontal,
     keyboardMode,
     equaveShift,
     degreeShift,
@@ -464,11 +469,76 @@ export const useScaleStore = defineStore('scale', () => {
     lowAccidentalColor,
     middleAccidentalColor,
     highAccidentalColor,
+    id,
+    uploadedId
+  }
+
+  let skipNextRerollWatch = false
+  const watched = []
+  for (const [key, value] of Object.entries(LIVE_STATE)) {
+    if (key === 'id' || key === 'uploadedId') {
+      continue
+    }
+    watched.push(value)
+  }
+  watch(watched, () => {
+    if (skipNextRerollWatch) {
+      skipNextRerollWatch = false
+      return
+    }
+    if (uploadedId.value === id.value) {
+      rerollId()
+    }
+  })
+
+  /**
+   * Convert live state to a format suitable for storing on the server.
+   */
+  function toJSON() {
+    const result: any = {
+      scale: scale.value.toJSON(),
+      relativeIntervals: relativeIntervals.value.map((i) => i.toJSON())
+    }
+    for (const [key, value] of Object.entries(LIVE_STATE)) {
+      if (key === 'id' || key === 'uploadId') {
+        continue
+      }
+      if (key in result) {
+        continue
+      }
+      result[key] = value.value
+    }
+    return result
+  }
+
+  /**
+   * Apply revived state to current state.
+   * @param data JSON revived through {@link Scale.reviver} and {@link Interval.reviver}.
+   */
+  function fromJSON(data: any) {
+    skipNextRerollWatch = true
+    for (const key in LIVE_STATE) {
+      LIVE_STATE[key as keyof typeof LIVE_STATE].value = data[key]
+    }
+  }
+
+  return {
+    // Live state
+    ...LIVE_STATE,
     // Presistent state
     accidentalPreference,
     hasLeftOfZ,
     gas,
     // Computed state
+    // With setters
+    baseFrequencyDisplay,
+    // Get only
+    sourcePrefix,
+    latticePermutation,
+    inverseLatticePermutation,
+    latticeIntervals,
+    latticeColors,
+    latticeLabels,
     frequencies,
     centss,
     qwertyMapping,
@@ -476,10 +546,13 @@ export const useScaleStore = defineStore('scale', () => {
     whiteIndices,
     whiteModeOffset,
     // Methods
+    rerollId,
     getUserScopeVisitor,
     computeScale,
     getFrequency,
     colorForIndex,
-    labelForIndex
+    labelForIndex,
+    toJSON,
+    fromJSON
   }
 })
diff --git a/src/stores/state.ts b/src/stores/state.ts
index a8a93c40..23463e62 100644
--- a/src/stores/state.ts
+++ b/src/stores/state.ts
@@ -4,8 +4,6 @@ import { UNIX_NEWLINE } from '@/constants'
 import { syncValues } from '@/utils'
 
 export const useStateStore = defineStore('state', () => {
-  const isomorphicVertical = ref(5)
-  const isomorphicHorizontal = ref(1)
   // Mapping from MIDI index to number of interfaces currently pressing the key down
   const heldNotes = reactive(new Map<number, number>())
   const typingActive = ref(true)
@@ -48,6 +46,9 @@ export const useStateStore = defineStore('state', () => {
   const degreeUpCode = ref(storage.getItem('degreeUpCode') ?? 'NumpadAdd')
   const degreeDownCode = ref(storage.getItem('degreeDownCode') ?? 'NumpadSubtract')
 
+  // Opt-in for user statistics
+  const shareStatistics = ref(storage.getItem('shareStatistics') === 'true')
+
   // Local storage watchers
   syncValues({
     newline,
@@ -68,7 +69,8 @@ export const useStateStore = defineStore('state', () => {
     equaveUpCode,
     equaveDownCode,
     degreeUpCode,
-    degreeDownCode
+    degreeDownCode,
+    shareStatistics
   })
   watch(
     colorScheme,
@@ -81,8 +83,6 @@ export const useStateStore = defineStore('state', () => {
 
   return {
     // Live state
-    isomorphicVertical,
-    isomorphicHorizontal,
     heldNotes,
     typingActive,
     latticeType,
@@ -106,6 +106,7 @@ export const useStateStore = defineStore('state', () => {
     equaveUpCode,
     equaveDownCode,
     degreeUpCode,
-    degreeDownCode
+    degreeDownCode,
+    shareStatistics
   }
 })
diff --git a/src/utils.ts b/src/utils.ts
index 0166072b..f27c64c2 100644
--- a/src/utils.ts
+++ b/src/utils.ts
@@ -1,6 +1,8 @@
 import { computed, watch, type ComputedRef, type Ref } from 'vue'
 import { gcd, mmod } from 'xen-dev-utils'
 import { evaluateExpression, getSourceVisitor, Interval, parseAST, repr } from 'sonic-weave'
+import { version } from '../package.json'
+import { Scale } from './scale'
 
 /**
  * Calculate the smallest power of two greater or equal to the input value.
@@ -472,3 +474,80 @@ export function padEndOrTruncate<T>(array: T[], targetLength: number, padValue:
   }
   array.length = targetLength
 }
+
+const URL_SAFE_CHARS64 = '0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ-~'
+
+export function encodeUrlSafe64(n: number) {
+  if (n < 0 || n >= 64 || !Number.isInteger(n)) {
+    throw new Error('Number outside integer range 0-63')
+  }
+  return URL_SAFE_CHARS64[n]
+}
+
+/**
+ * Generate a random 9-character identifier
+ * @returns Random identifiers with a low chance of collision
+ */
+export function randomId() {
+  // Coarce timestamp for indexing in ~30 year cycles
+  const msSince1970 = new Date().valueOf()
+  const hour = Math.floor(msSince1970 / (1000 * 60 * 60))
+  const hourLow = hour & 63
+  const hourMid = (hour >> 5) & 63
+  const hourHigh = (hour >> 10) & 63
+
+  const ns = [hourLow, hourMid, hourHigh]
+
+  // Random segment to avoid collisions within one hour
+  // Chance of collision assuming 1000 identifiers per hour ~ 0.047 %
+  const r = new Uint32Array(1)
+  crypto.getRandomValues(r)
+  for (let i = 0; i < 6; ++i) {
+    ns.push(r[0] & 63)
+    r[0] >>>= 5
+  }
+  // 2 bits of randomness wasted
+
+  return ns.map(encodeUrlSafe64).join('')
+}
+
+export function isRandomId(identifier: string) {
+  if (identifier.length !== 9) {
+    return false
+  }
+  for (const char of identifier) {
+    if (!URL_SAFE_CHARS64.includes(char)) {
+      return false
+    }
+  }
+  return true
+}
+
+export function makeEnvelope(shareStatistics = false) {
+  const sonicWeaveVersion = evaluateExpression('VERSION')
+  const msSince1970 = new Date().valueOf()
+  let navigatorPart = null
+  let userUUID = null
+  if (shareStatistics) {
+    navigatorPart = {
+      userAgent: navigator.userAgent,
+      language: navigator.language,
+      languages: navigator.languages
+    }
+    userUUID = localStorage.getItem('uuid')
+  }
+  return {
+    version,
+    sonicWeaveVersion,
+    msSince1970,
+    navigator: navigatorPart,
+    userUUID
+  }
+}
+
+export function unpackPayload(body: string, id: string) {
+  const data = JSON.parse(body, (key, value) => Interval.reviver(key, Scale.reviver(key, value)))
+  data.id = id
+  data.uploadedId = id
+  return data
+}
diff --git a/src/views/LoadScaleView.vue b/src/views/LoadScaleView.vue
new file mode 100644
index 00000000..1cf75af1
--- /dev/null
+++ b/src/views/LoadScaleView.vue
@@ -0,0 +1,65 @@
+<script setup lang="ts">
+import { API_URL } from '@/constants'
+import { useScaleStore } from '@/stores/scale'
+import { isRandomId, unpackPayload } from '@/utils'
+import { onMounted, ref } from 'vue'
+import { useRoute, useRouter } from 'vue-router'
+
+const scale = useScaleStore()
+
+const router = useRouter()
+
+const text = ref('Loading scale...')
+
+onMounted(() => {
+  const route = useRoute()
+  const id = route.params.id as string
+
+  if (id === '000000000') {
+    router.push('/')
+    return
+  }
+
+  if (!isRandomId(id)) {
+    alert('Invalid identifier')
+    return
+  }
+
+  if (!API_URL) {
+    alert('API URL not configured')
+  } else {
+    fetch(new URL(`scale/${id}.json`, API_URL))
+      .then((res) => {
+        if (res.ok) {
+          text.value = 'Scale loaded. Redirecting...'
+          return res.text()
+        } else if (res.status === 404) {
+          text.value = 'Scale not found.'
+        } else {
+          text.value = 'Internal server error.'
+        }
+      })
+      .then((body) => {
+        if (body) {
+          scale.fromJSON(unpackPayload(body, id))
+          router.push('/')
+        }
+      })
+      .catch(() => (text.value = 'Failed to connect to server.'))
+  }
+})
+</script>
+<template>
+  <div>
+    <p>{{ text }}</p>
+  </div>
+</template>
+
+<style scoped>
+div {
+  padding: 1rem;
+}
+p {
+  font-size: large;
+}
+</style>
diff --git a/src/views/PreferencesView.vue b/src/views/PreferencesView.vue
index f26a6355..958ce4a3 100644
--- a/src/views/PreferencesView.vue
+++ b/src/views/PreferencesView.vue
@@ -118,6 +118,15 @@ const scale = useScaleStore()
             />
           </div>
         </div>
+        <h2>Analytics</h2>
+        <div class="control-group">
+          <div class="control checkbox-container">
+            <input id="virtual-qwerty" type="checkbox" v-model="state.shareStatistics" />
+            <label for="virtual-qwerty" class="right-of-checkbox"
+              >Share statistics to help improve the application</label
+            >
+          </div>
+        </div>
       </div>
     </div>
   </main>
diff --git a/src/views/ScaleView.vue b/src/views/ScaleView.vue
index 57054378..9d202ba5 100644
--- a/src/views/ScaleView.vue
+++ b/src/views/ScaleView.vue
@@ -17,6 +17,7 @@ const state = useStateStore()
 const controls = ref<typeof ScaleControls | null>(null)
 const newScale = ref<typeof NewScale | null>(null)
 const modifyScale = ref<typeof ModifyScale | null>(null)
+const exporterButtons = ref<typeof ExporterButtons | null>(null)
 
 const updateScale = debounce(scale.computeScale)
 
@@ -56,8 +57,8 @@ onMounted(() => {
           :labels="scale.labels"
         />
       </div>
-      <div class="column exporters">
-        <ExporterButtons />
+      <div class="column exporters" @mouseenter="exporterButtons!.uploadScale()">
+        <ExporterButtons ref="exporterButtons" />
       </div>
     </div>
   </main>
diff --git a/src/views/SynthView.vue b/src/views/SynthView.vue
index 415dbb73..56098815 100644
--- a/src/views/SynthView.vue
+++ b/src/views/SynthView.vue
@@ -490,11 +490,11 @@ onUnmounted(() => {
           >
             <div class="control" style="width: 50%">
               <label for="vertical">Vertical</label>
-              <input type="number" id="vertical" v-model="state.isomorphicVertical" />
+              <input type="number" id="vertical" v-model="scale.isomorphicVertical" />
             </div>
             <div class="control" style="width: 50%">
               <label for="horizontal">Horizontal</label>
-              <input type="number" id="horizontal" v-model="state.isomorphicHorizontal" />
+              <input type="number" id="horizontal" v-model="scale.isomorphicHorizontal" />
             </div>
           </div>
         </template>
diff --git a/src/views/VirtualKeyboardView.vue b/src/views/VirtualKeyboardView.vue
index 32c99e98..d42ad5fc 100644
--- a/src/views/VirtualKeyboardView.vue
+++ b/src/views/VirtualKeyboardView.vue
@@ -39,8 +39,8 @@ type NoteOnCallback = (index: number) => NoteOff
       v-else
       :baseIndex="baseIndex"
       :baseMidiNote="scale.scale.baseMidiNote"
-      :isomorphicHorizontal="state.isomorphicHorizontal"
-      :isomorphicVertical="state.isomorphicVertical"
+      :isomorphicHorizontal="scale.isomorphicHorizontal"
+      :isomorphicVertical="scale.isomorphicVertical"
       :colorMap="scale.colorForIndex"
       :noteOn="noteOn"
       :heldNotes="state.heldNotes"
diff --git a/src/views/VirtualQwerty.vue b/src/views/VirtualQwerty.vue
index b557e472..abd44f88 100644
--- a/src/views/VirtualQwerty.vue
+++ b/src/views/VirtualQwerty.vue
@@ -25,12 +25,12 @@ const baseIndex = computed(
   <main>
     <VirtualTypingKeyboard
       :baseIndex="baseIndex"
-      :isomorphicHorizontal="state.isomorphicHorizontal"
+      :isomorphicHorizontal="scale.isomorphicHorizontal"
       :keyboardMode="scale.keyboardMode"
       :colorScheme="state.colorScheme"
       :qwertyMapping="scale.qwertyMapping"
       :hasLeftOfZ="scale.hasLeftOfZ"
-      :isomorphicVertical="state.isomorphicVertical"
+      :isomorphicVertical="scale.isomorphicVertical"
       :colorMap="scale.colorForIndex"
       :noteOn="noteOn"
       :heldNotes="state.heldNotes"