maidr 2.18.0 → 2.19.0

package/dist/maidr.js

@@ -12,77 +12,77 @@ class Constants {
    * @memberof HtmlIds
    * @default 'chart-container'
    */
-  chart_container_id = "chart-container";
+  chart_container_id = 'chart-container';
   /**
    * HTML id of the main container div.
    * @type {string}
    * @memberof HtmlIds
    * @default 'maidr-container'
    */
-  main_container_id = "maidr-container";
+  main_container_id = 'maidr-container';
   /**
    * HTML id of the div containing the braille display input
    * @type {string}
    * @memberof HtmlIds
    * @default 'braille-div'
    */
-  braille_container_id = "braille-div";
+  braille_container_id = 'braille-div';
   /**
    * HTML id of the actual braille input element.
    * @type {string}
    * @memberof HtmlIds
    * @default 'braille-input'
    */
-  braille_input_id = "braille-input";
+  braille_input_id = 'braille-input';
   /**
    * HTML id of the div containing the info box.
    * @type {string}
    * @memberof HtmlIds
    * @default 'info'
    */
-  info_id = "info";
+  info_id = 'info';
   /**
    * HTML id of the div containing announcements that hook directly into the screen reader via aria-live.
    * @type {string}
    * @memberof HtmlIds
    * @default 'announcements'
    */
-  announcement_container_id = "announcements";
+  announcement_container_id = 'announcements';
   /**
    * HTML id of the div containing the end chime. To be implemented in the future.
    * @type {string}
    * @memberof HtmlIds
    * @default 'end_chime'
    */
-  end_chime_id = "end_chime";
+  end_chime_id = 'end_chime';
   /**
    * HTML id of the main container div.
    * @type {string}
    * @memberof HtmlIds
    * @default 'container'
    */
-  container_id = "container";
+  container_id = 'container';
   /**
    * The main project id, used throughout the application.
    * @type {string}
    * @memberof HtmlIds
    * @default 'maidr'
    */
-  project_id = "maidr";
+  project_id = 'maidr';
   /**
    * HTML id of the div containing the review text.
    * @type {string}
    * @memberof HtmlIds
    * @default 'review_container'
    */
-  review_id_container = "review_container";
+  review_id_container = 'review_container';
   /**
    * HTML id of the review input element.
    * @type {string}
    * @memberof HtmlIds
    * @default 'review'
    */
-  review_id = "review";
+  review_id = 'review';
   /**
    * Storage element, used to store the last focused element before moving to the review input so we can switch back to it easily.
    * @type {HTMLElement}
@@ -99,7 +99,7 @@ class Constants {
    * @type {string}
    * @memberof HtmlIds
    */
-  chartId = "";
+  chartId = '';
   /**
    * @typedef {Object} EventListenerSetupObject
    * @property {HTMLElement} element - The element to attach the event listener to.
@@ -128,14 +128,15 @@ class Constants {
    * @memberof BTSModes
    * @default 'verbose'
    */
-  textMode = "verbose";
+  textMode = 'verbose';
+
   /**
    * The current braille mode. Can be 'off' or 'on'.
    * @type {("off"|"on")}
    * @memberof BTSModes
    * @default 'off'
    */
-  brailleMode = "off";
+  brailleMode = 'off';
 
   /**
    * We lock the selection so we don't pick up programatic selection changes
@@ -150,14 +151,14 @@ class Constants {
    * @memberof BTSModes
    * @default 'on'
    */
-  sonifMode = "on";
+  sonifMode = 'on';
   /**
    * The current review mode. Can be 'on' or 'off'.
    * @type {("on"|"off")}
    * @memberof BTSModes
    * @default 'off'
    */
-  reviewMode = "off";
+  reviewMode = 'off';
 
   // basic chart properties
   /**
@@ -198,14 +199,14 @@ class Constants {
    * @memberof HtmlIds
    * @default ''
    */
-  plotId = ""; // update with id in chart specific js
+  plotId = ''; // update with id in chart specific js
   /**
    * The chart type, sort of a short name of the chart such as 'box', 'bar', 'line', etc.
    * @type {string}
    * @default ''
    * @memberof BasicChartProperties
    */
-  chartType = "";
+  chartType = '';
   /**
    * The navigation orientation of the chart. 0 = row navigation (up/down), 1 = col navigation (left/right).
    * @type {number}
@@ -219,7 +220,7 @@ class Constants {
    * @default 'horz'
    * @memberof BasicChartProperties
    */
-  plotOrientation = "horz";
+  plotOrientation = 'horz';
 
   /**
    * @namespace AudioProperties
@@ -296,7 +297,7 @@ class Constants {
    * @default 5000
    * @memberof AudioProperties
    */
-  AUTOPLAY_DURATION = 5000; // 5s
+  AUTOPLAY_DURATION = 2000; // 5s
 
   // user settings
   /**
@@ -329,7 +330,7 @@ class Constants {
    * @default '#03C809' (green)
    * @memberof UserSettings
    */
-  colorSelected = "#03C809";
+  colorSelected = '#03C809';
   /**
    * The length of the braille display in characters. Braille displays have a variety of sizes; 40 is pretty common, 32 is quite reliable. Set this to your actual display length so that the system can scale and display braille properly for you (where possible).
    * @type {number}
@@ -397,7 +398,7 @@ class Constants {
    * @default 50
    * @memberof AdvancedUserSettings
    */
-  colorUnselected = "#595959"; // deprecated, todo: find all instances replace with storing old color method
+  colorUnselected = '#595959'; // deprecated, todo: find all instances replace with storing old color method
   /**
    * Whether or not we're logging user data. This is off by default, but is used for research purposes.
    * @type {boolean}
@@ -425,30 +426,30 @@ class Constants {
    * @default 'assertive'
    * @memberof AdvancedUserSettings
    */
-  ariaMode = "assertive";
+  ariaMode = 'assertive';
 
   /**
    * Full list of user settings, used internally to save and load settings.
    * @type {string[]}
    */
   userSettingsKeys = [
-    "vol",
-    "autoPlayRate",
-    "brailleDisplayLength",
-    "colorSelected",
-    "MIN_FREQUENCY",
-    "MAX_FREQUENCY",
-    "keypressInterval",
-    "ariaMode",
-    "openAIAuthKey",
-    "geminiAuthKey",
-    "skillLevel",
-    "skillLevelOther",
-    "LLMModel",
-    "LLMPreferences",
-    "LLMOpenAiMulti",
-    "LLMGeminiMulti",
-    "autoInitLLM",
+    'vol',
+    'autoPlayRate',
+    'brailleDisplayLength',
+    'colorSelected',
+    'MIN_FREQUENCY',
+    'MAX_FREQUENCY',
+    'AUTOPLAY_DURATION',
+    'ariaMode',
+    'openAIAuthKey',
+    'geminiAuthKey',
+    'skillLevel',
+    'skillLevelOther',
+    'LLMModel',
+    'LLMPreferences',
+    'LLMOpenAiMulti',
+    'LLMGeminiMulti',
+    'autoInitLLM',
   ];
 
   // LLM settings
@@ -489,14 +490,14 @@ class Constants {
    * @default 'high'
    * @memberof LLMSettings
    */
-  LLMDetail = "high"; // low (default for testing, like 100 tokens) / high (default for real, like 1000 tokens)
+  LLMDetail = 'high'; // low (default for testing, like 100 tokens) / high (default for real, like 1000 tokens)
   /**
    * Current LLM model in use. Can be 'openai' (default) or 'gemini' or 'multi'. More to be added.
    * @type {("openai"|"gemini"|"multi")}
    * @default 'openai'
    * @memberof LLMSettings
    */
-  LLMModel = "openai";
+  LLMModel = 'openai';
   /**
    * The default system message for the LLM. Helps the LLM understand the context of the chart and its role.
    * @type {string}
@@ -504,21 +505,21 @@ class Constants {
    * @memberof LLMSettings
    */
   LLMSystemMessage =
-    "You are a helpful assistant describing the chart to a blind person. ";
+    'You are a helpful assistant describing the chart to a blind person. ';
   /**
    * The level of skill the user has with statistical charts. Can be 'basic', 'intermediate', 'expert', or 'other'. This is passed to the LLM on the initial message to help it speak correctly to the user. If 'other' is selected, the user can provide a custom skill level.
    * @type {("basic"|"intermediate"|"expert"|"other")}
    * @default 'basic'
    * @memberof LLMSettings
    */
-  skillLevel = "basic"; // basic / intermediate / expert
+  skillLevel = 'basic'; // basic / intermediate / expert
   /**
    * Custom skill level, used if the user selects 'other' as their skill level.
    * @type {string}
    * @default ''
    * @memberof LLMSettings
    */
-  skillLevelOther = ""; // custom skill level
+  skillLevelOther = ''; // custom skill level
   /**
    * The LLM can send the first default message containing the chart image on initialization, so when the user opens the chat window the LLM already has an initial response and is ready for a conversation.
    * @type {boolean}
@@ -532,7 +533,7 @@ class Constants {
    * @default ''
    * @memberof LLMSettings
    */
-  verboseText = "";
+  verboseText = '';
   /**
    * An internal variable used to turn the waiting beep on and off.
    * @type {number}
@@ -580,35 +581,38 @@ class Constants {
    * @type {boolean}
    * @memberof PlatformControls
    */
-  isMac = navigator.userAgent.toLowerCase().includes("mac"); // true if macOS
+  isMac = navigator.userAgent.toLowerCase().includes('mac'); // true if macOS
   /**
    * The control key for the user's platform. Can be 'Cmd' or 'Ctrl'. Used in keyboard shortcut display in help.
    * @type {"Cmd"|"Ctrl"}
    * @memberof PlatformControls
    */
-  control = this.isMac ? "Cmd" : "Ctrl";
+  control = this.isMac ? 'Cmd' : 'Ctrl';
   /**
    * The alt key for the user's platform. Can be 'option' or 'Alt'. Used in keyboard shortcut display in help.
    * @type {"option"|"Alt"}
    * @memberof PlatformControls
    */
-  alt = this.isMac ? "option" : "Alt";
+  alt = this.isMac ? 'option' : 'Alt';
   /**
    * The home key for the user's platform. Can be 'fn + Left arrow' or 'Home'. Used in keyboard shortcut display in help.
    * @type {"fn + Left arrow"|"Home"}
    * @memberof PlatformControls
    */
-  home = this.isMac ? "fn + Left arrow" : "Home";
+  home = this.isMac ? 'fn + Left arrow' : 'Home';
   /**
    * The end key for the user's platform. Can be 'fn + Right arrow' or 'End'. Used in keyboard shortcut display in help.
    * @type {"fn + Right arrow"|"End"}
    * @memberof PlatformControls
    */
-  end = this.isMac ? "fn + Right arrow" : "End";
+  end = this.isMac ? 'fn + Right arrow' : 'End';
+  /**
+   * The interval we wait for an L + X prefix event
+   */
+  keypressInterval = 2000; // ms or 2s
 
   // internal controls
   // todo: are these even used? Sean doesn't think so (May 2024)
-  keypressInterval = 2000; // ms or 2s
   tabMovement = null;
 
   // debug stuff
@@ -697,13 +701,13 @@ class Constants {
    */
   ConvertHexToRGBString(hexColorString) {
     return (
-      "rgb(" +
+      'rgb(' +
       parseInt(hexColorString.slice(1, 3), 16) +
-      "," +
+      ',' +
       parseInt(hexColorString.slice(3, 5), 16) +
-      "," +
+      ',' +
       parseInt(hexColorString.slice(5, 7), 16) +
-      ")"
+      ')'
     );
   }
 
@@ -713,12 +717,12 @@ class Constants {
    * @returns {string} - hexadecimal color (e.g., "#595959").
    */
   ConvertRGBStringToHex(rgbColorString) {
-    let rgb = rgbColorString.replace(/[^\d,]/g, "").split(",");
+    let rgb = rgbColorString.replace(/[^\d,]/g, '').split(',');
     return (
-      "#" +
-      rgb[0].toString(16).padStart(2, "0") +
-      rgb[1].toString(16).padStart(2, "0") +
-      rgb[2].toString(16).padStart(2, "0")
+      '#' +
+      rgb[0].toString(16).padStart(2, '0') +
+      rgb[1].toString(16).padStart(2, '0') +
+      rgb[2].toString(16).padStart(2, '0')
     );
   }
 
@@ -730,11 +734,11 @@ class Constants {
    */
   ColorInvert(color) {
     // invert an rgb color
-    let rgb = color.replace(/[^\d,]/g, "").split(",");
+    let rgb = color.replace(/[^\d,]/g, '').split(',');
     let r = 255 - rgb[0];
     let g = 255 - rgb[1];
     let b = 255 - rgb[2];
-    return "rgb(" + r + "," + g + "," + b + ")";
+    return 'rgb(' + r + ',' + g + ',' + b + ')';
   }
 
   /**
@@ -743,11 +747,11 @@ class Constants {
    * @returns {string} The better color
    */
   GetBetterColor(oldColor) {
-    if (oldColor.indexOf("#") !== -1) {
+    if (oldColor.indexOf('#') !== -1) {
       oldColor = this.ConvertHexToRGBString(oldColor);
     }
     let newColor = this.ColorInvert(oldColor);
-    let rgb = newColor.replace(/[^\d,]/g, "").split(",");
+    let rgb = newColor.replace(/[^\d,]/g, '').split(',');
     if (
       rgb[1] < rgb[0] + 10 &&
       rgb[1] > rgb[0] - 10 &&
@@ -769,7 +773,7 @@ class Constants {
    */
   GetStyleArrayFromString(styleString) {
     // Get an array of CSS style attributes and values from a style string
-    return styleString.replaceAll(" ", "").split(/[:;]/);
+    return styleString.replaceAll(' ', '').split(/[:;]/);
   }
 
   /**
@@ -779,16 +783,16 @@ class Constants {
    */
   GetStyleStringFromArray(styleArray) {
     // Get CSS style string from an array of style attributes and values
-    let styleString = "";
+    let styleString = '';
     for (let i = 0; i < styleArray.length; i++) {
       if (i % 2 === 0) {
         if (i !== styleArray.length - 1) {
-          styleString += styleArray[i] + ": ";
+          styleString += styleArray[i] + ': ';
         } else {
           styleString += styleArray[i];
         }
       } else {
-        styleString += styleArray[i] + "; ";
+        styleString += styleArray[i] + '; ';
       }
     }
     return styleString;
@@ -801,35 +805,35 @@ class Constants {
 class Resources {
   constructor() {}
 
-  language = "en"; // Current language, 2 char lang code
-  knowledgeLevel = "basic"; // basic, intermediate, expert
+  language = 'en'; // Current language, 2 char lang code
+  knowledgeLevel = 'basic'; // basic, intermediate, expert
 
   // language strings, per 2 char language code
   strings = {
     en: {
       basic: {
-        upper_outlier: "Upper Outlier",
-        lower_outlier: "Lower Outlier",
-        min: "Minimum",
-        max: "Maximum",
-        25: "25%",
-        50: "50%",
-        75: "75%",
-        q1: "25%",
-        q2: "50%",
-        q3: "75%",
-        son_on: "Sonification on",
-        son_off: "Sonification off",
-        son_des: "Sonification descrete",
-        son_comp: "Sonification compare",
-        son_ch: "Sonification chord",
-        son_sep: "Sonification separate",
-        son_same: "Sonification combined",
-        empty: "Empty",
-        openai: "OpenAI Vision",
-        gemini: "Gemini Pro Vision",
-        multi: "Multiple AI",
-        processing: "Processing Chart...",
+        upper_outlier: 'Upper Outlier',
+        lower_outlier: 'Lower Outlier',
+        min: 'Minimum',
+        max: 'Maximum',
+        25: '25%',
+        50: '50%',
+        75: '75%',
+        q1: '25%',
+        q2: '50%',
+        q3: '75%',
+        son_on: 'Sonification on',
+        son_off: 'Sonification off',
+        son_des: 'Sonification descrete',
+        son_comp: 'Sonification compare',
+        son_ch: 'Sonification chord',
+        son_sep: 'Sonification separate',
+        son_same: 'Sonification combined',
+        empty: 'Empty',
+        openai: 'OpenAI Vision',
+        gemini: 'Gemini Pro Vision',
+        multi: 'Multiple AI',
+        processing: 'Processing Chart...',
       },
     },
   };
@@ -991,25 +995,20 @@ class Menu {
                             <h5 class="modal-title">Settings</h5>
                             <p><input type="range" id="vol" name="vol" min="0" max="1" step=".05"><label for="vol">Volume</label></p>
                             <!-- <p><input type="checkbox" id="show_rect" name="show_rect"><label for="show_rect">Show Outline</label></p> //-->
-                            <p><input type="number" min="4" max="2000" step="1" id="braille_display_length" name="braille_display_length"><label for="braille_display_length">Braille Display Size</label></p>
-                            <p><input type="number" min="${
-                              constants.MIN_SPEED
-                            }" max="500" step="${
-    constants.INTERVAL
-  }" id="autoplay_rate" name="autoplay_rate"><label for="autoplay_rate">Autoplay Rate</label></p>
                             <p><input type="color" id="color_selected" name="color_selected"><label for="color_selected">Outline Color</label></p>
+                            <p><input type="number" min="4" max="2000" step="1" id="braille_display_length" name="braille_display_length"><label for="braille_display_length">Braille Display Size</label></p>
                             <p><input type="number" min="10" max="2000" step="10" id="min_freq" name="min_freq"><label for="min_freq">Min Frequency (Hz)</label></p>
                             <p><input type="number" min="20" max="2010" step="10" id="max_freq" name="max_freq"><label for="max_freq">Max Frequency (Hz)</label></p>
-                            <p><input type="number" min="500" max="5000" step="500" id="keypress_interval" name="keypress_interval"><label for="keypress_interval">Keypress Interval (ms)</label></p>
+                                                     <p>                            <p><input type="number" min="500" max="500000" step="500" id="AUTOPLAY_DURATION">Autoplay Duration (ms)</label></p>
                             <div><fieldset>
                               <legend>Aria Mode</legend>
                               <p><input type="radio" id="aria_mode_assertive" name="aria_mode" value="assertive" ${
-                                constants.ariaMode == "assertive"
-                                  ? "checked"
-                                  : ""
+                                constants.ariaMode == 'assertive'
+                                  ? 'checked'
+                                  : ''
                               }><label for="aria_mode_assertive">Assertive</label></p>
                               <p><input type="radio" id="aria_mode_polite" name="aria_mode" value="polite" ${
-                                constants.ariaMode == "polite" ? "checked" : ""
+                                constants.ariaMode == 'polite' ? 'checked' : ''
                               }><label for="aria_mode_polite">Polite</label></p>
                               </fieldset></div>
                             <h5 class="modal-title">LLM Settings</h5>
@@ -1030,7 +1029,7 @@ class Menu {
                               <input type="password" size="50" id="gemini_auth_key"><button aria-label="Delete Gemini key" title="Delete Gemini key" id="delete_gemini_key" class="invis_button">&times;</button><label for="gemini_auth_key">Gemini Authentication Key</label>
                             </p>
                             <p><input type="checkbox" ${
-                              constants.autoInitLLM ? "checked" : ""
+                              constants.autoInitLLM ? 'checked' : ''
                             } id="init_llm_on_load" name="init_llm_on_load"><label for="init_llm_on_load">Start first LLM chat chart load</label></p>
                             <p>
                                 <select id="skill_level">
@@ -1067,33 +1066,33 @@ class Menu {
   CreateMenu() {
     // menu element creation
     document
-      .querySelector("body")
-      .insertAdjacentHTML("beforeend", this.menuHtml);
+      .querySelector('body')
+      .insertAdjacentHTML('beforeend', this.menuHtml);
 
     // menu close events
-    let allClose = document.querySelectorAll("#close_menu, #menu .close");
+    let allClose = document.querySelectorAll('#close_menu, #menu .close');
     for (let i = 0; i < allClose.length; i++) {
       constants.events.push([
         allClose[i],
-        "click",
+        'click',
         function (e) {
           menu.Toggle(false);
         },
       ]);
     }
     constants.events.push([
-      document.getElementById("save_and_close_menu"),
-      "click",
+      document.getElementById('save_and_close_menu'),
+      'click',
       function (e) {
         menu.SaveData();
         menu.Toggle(false);
       },
     ]);
     constants.events.push([
-      document.getElementById("menu"),
-      "keyup",
+      document.getElementById('menu'),
+      'keyup',
       function (e) {
-        if (e.key == "Esc") {
+        if (e.key == 'Esc') {
           // esc
           menu.Toggle(false);
         }
@@ -1103,15 +1102,15 @@ class Menu {
     // Menu open events
     constants.events.push([
       document,
-      "keyup",
+      'keyup',
       function (e) {
         // don't fire on input elements
         if (
-          e.target.tagName.toLowerCase() == "input" ||
-          e.target.tagName.toLowerCase() == "textarea"
+          e.target.tagName.toLowerCase() == 'input' ||
+          e.target.tagName.toLowerCase() == 'textarea'
         ) {
           return;
-        } else if (e.key == "h") {
+        } else if (e.key == 'h') {
           menu.Toggle(true);
         }
       },
@@ -1119,71 +1118,71 @@ class Menu {
 
     // toggle auth key fields
     constants.events.push([
-      document.getElementById("LLM_model"),
-      "change",
+      document.getElementById('LLM_model'),
+      'change',
       function (e) {
-        if (e.target.value == "openai") {
+        if (e.target.value == 'openai') {
           document
-            .getElementById("openai_auth_key_container")
-            .classList.remove("hidden");
+            .getElementById('openai_auth_key_container')
+            .classList.remove('hidden');
           document
-            .getElementById("gemini_auth_key_container")
-            .classList.add("hidden");
+            .getElementById('gemini_auth_key_container')
+            .classList.add('hidden');
           document
-            .getElementById("openai_multi_container")
-            .classList.add("hidden");
+            .getElementById('openai_multi_container')
+            .classList.add('hidden');
           document
-            .getElementById("gemini_multi_container")
-            .classList.add("hidden");
-          document.getElementById("openai_multi").checked = true;
-          document.getElementById("gemini_multi").checked = false;
-        } else if (e.target.value == "gemini") {
+            .getElementById('gemini_multi_container')
+            .classList.add('hidden');
+          document.getElementById('openai_multi').checked = true;
+          document.getElementById('gemini_multi').checked = false;
+        } else if (e.target.value == 'gemini') {
           document
-            .getElementById("openai_auth_key_container")
-            .classList.add("hidden");
+            .getElementById('openai_auth_key_container')
+            .classList.add('hidden');
           document
-            .getElementById("gemini_auth_key_container")
-            .classList.remove("hidden");
+            .getElementById('gemini_auth_key_container')
+            .classList.remove('hidden');
           document
-            .getElementById("openai_multi_container")
-            .classList.add("hidden");
+            .getElementById('openai_multi_container')
+            .classList.add('hidden');
           document
-            .getElementById("gemini_multi_container")
-            .classList.add("hidden");
-          document.getElementById("openai_multi").checked = false;
-          document.getElementById("gemini_multi").checked = true;
-        } else if (e.target.value == "multi") {
+            .getElementById('gemini_multi_container')
+            .classList.add('hidden');
+          document.getElementById('openai_multi').checked = false;
+          document.getElementById('gemini_multi').checked = true;
+        } else if (e.target.value == 'multi') {
           document
-            .getElementById("openai_auth_key_container")
-            .classList.remove("hidden");
+            .getElementById('openai_auth_key_container')
+            .classList.remove('hidden');
           document
-            .getElementById("gemini_auth_key_container")
-            .classList.remove("hidden");
+            .getElementById('gemini_auth_key_container')
+            .classList.remove('hidden');
           document
-            .getElementById("openai_multi_container")
-            .classList.remove("hidden");
+            .getElementById('openai_multi_container')
+            .classList.remove('hidden');
           document
-            .getElementById("gemini_multi_container")
-            .classList.remove("hidden");
-          document.getElementById("openai_multi").checked = true;
-          document.getElementById("gemini_multi").checked = true;
+            .getElementById('gemini_multi_container')
+            .classList.remove('hidden');
+          document.getElementById('openai_multi').checked = true;
+          document.getElementById('gemini_multi').checked = true;
         }
       },
     ]);
 
     // Skill level other events
     constants.events.push([
-      document.getElementById("skill_level"),
-      "change",
+      document.getElementById('skill_level'),
+      'change',
       function (e) {
-        if (e.target.value == "other") {
+        if (e.target.value == 'other') {
           document
-            .getElementById("skill_level_other_container")
-            .classList.remove("hidden");
+            .getElementById('skill_level_other_container')
+            .classList.remove('hidden');
         } else {
           document
-            .getElementById("skill_level_other_container")
-            .classList.add("hidden");
+            .getElementById('skill_level_other_container')
+            .classList.add('hidden');
         }
       },
     ]);
@@ -1191,16 +1190,16 @@ class Menu {
     // trigger notification that LLM will be reset
     // this is done on change of LLM model, multi settings, or skill level
     let LLMResetIds = [
-      "LLM_model",
-      "openai_multi",
-      "gemini_multi",
-      "skill_level",
-      "LLM_preferences",
+      'LLM_model',
+      'openai_multi',
+      'gemini_multi',
+      'skill_level',
+      'LLM_preferences',
     ];
     for (let i = 0; i < LLMResetIds.length; i++) {
       constants.events.push([
         document.getElementById(LLMResetIds[i]),
-        "change",
+        'change',
         function (e) {
           menu.NotifyOfLLMReset();
         },
@@ -1214,11 +1213,11 @@ class Menu {
    */
   Destroy() {
     // menu element destruction
-    let menu = document.getElementById("menu");
+    let menu = document.getElementById('menu');
     if (menu) {
       menu.remove();
     }
-    let backdrop = document.getElementById("menu_modal_backdrop");
+    let backdrop = document.getElementById('menu_modal_backdrop');
     if (backdrop) {
       backdrop.remove();
     }
@@ -1230,16 +1229,16 @@ class Menu {
    * @return {void}
    */
   Toggle(onoff = false) {
-    if (typeof onoff == "undefined") {
-      if (document.getElementById("menu").classList.contains("hidden")) {
+    if (typeof onoff == 'undefined') {
+      if (document.getElementById('menu').classList.contains('hidden')) {
         onoff = true;
       } else {
         onoff = false;
       }
     }
     // don't open if we have another modal open already
-    if (onoff && document.getElementById("chatLLM")) {
-      if (!document.getElementById("chatLLM").classList.contains("hidden")) {
+    if (onoff && document.getElementById('chatLLM')) {
+      if (!document.getElementById('chatLLM').classList.contains('hidden')) {
         return;
       }
     }
@@ -1248,13 +1247,13 @@ class Menu {
       this.whereWasMyFocus = document.activeElement;
       this.PopulateData();
       constants.tabMovement = 0;
-      document.getElementById("menu").classList.remove("hidden");
-      document.getElementById("menu_modal_backdrop").classList.remove("hidden");
-      document.querySelector("#menu .close").focus();
+      document.getElementById('menu').classList.remove('hidden');
+      document.getElementById('menu_modal_backdrop').classList.remove('hidden');
+      document.querySelector('#menu .close').focus();
     } else {
       // close
-      document.getElementById("menu").classList.add("hidden");
-      document.getElementById("menu_modal_backdrop").classList.add("hidden");
+      document.getElementById('menu').classList.add('hidden');
+      document.getElementById('menu_modal_backdrop').classList.add('hidden');
       this.whereWasMyFocus.focus();
       this.whereWasMyFocus = null;
     }
@@ -1265,89 +1264,88 @@ class Menu {
    * @return {void}
    */
   PopulateData() {
-    document.getElementById("vol").value = constants.vol;
-    document.getElementById("autoplay_rate").value = constants.autoPlayRate;
-    document.getElementById("braille_display_length").value =
+    document.getElementById('vol').value = constants.vol;
+    document.getElementById('braille_display_length').value =
       constants.brailleDisplayLength;
-    document.getElementById("color_selected").value = constants.colorSelected;
-    document.getElementById("min_freq").value = constants.MIN_FREQUENCY;
-    document.getElementById("max_freq").value = constants.MAX_FREQUENCY;
-    document.getElementById("keypress_interval").value =
-      constants.keypressInterval;
-    if (typeof constants.openAIAuthKey == "string") {
-      document.getElementById("openai_auth_key").value =
+    document.getElementById('color_selected').value = constants.colorSelected;
+    document.getElementById('min_freq').value = constants.MIN_FREQUENCY;
+    document.getElementById('max_freq').value = constants.MAX_FREQUENCY;
+    document.getElementById('AUTOPLAY_DURATION').value =
+      constants.AUTOPLAY_DURATION;
+    if (typeof constants.openAIAuthKey == 'string') {
+      document.getElementById('openai_auth_key').value =
         constants.openAIAuthKey;
     }
-    if (typeof constants.geminiAuthKey == "string") {
-      document.getElementById("gemini_auth_key").value =
+    if (typeof constants.geminiAuthKey == 'string') {
+      document.getElementById('gemini_auth_key').value =
         constants.geminiAuthKey;
     }
-    document.getElementById("skill_level").value = constants.skillLevel;
+    document.getElementById('skill_level').value = constants.skillLevel;
     if (constants.skillLevelOther) {
-      document.getElementById("skill_level_other").value =
+      document.getElementById('skill_level_other').value =
         constants.skillLevelOther;
     }
-    document.getElementById("LLM_model").value = constants.LLMModel;
+    document.getElementById('LLM_model').value = constants.LLMModel;
 
     // aria mode
-    if (constants.ariaMode == "assertive") {
-      document.getElementById("aria_mode_assertive").checked = true;
-      document.getElementById("aria_mode_polite").checked = false;
+    if (constants.ariaMode == 'assertive') {
+      document.getElementById('aria_mode_assertive').checked = true;
+      document.getElementById('aria_mode_polite').checked = false;
     } else {
-      document.getElementById("aria_mode_polite").checked = true;
-      document.getElementById("aria_mode_assertive").checked = false;
+      document.getElementById('aria_mode_polite').checked = true;
+      document.getElementById('aria_mode_assertive').checked = false;
     }
     // hide either openai or gemini auth key field
-    if (constants.LLMModel == "openai") {
+    if (constants.LLMModel == 'openai') {
       document
-        .getElementById("openai_auth_key_container")
-        .classList.remove("hidden");
+        .getElementById('openai_auth_key_container')
+        .classList.remove('hidden');
       document
-        .getElementById("gemini_auth_key_container")
-        .classList.add("hidden");
-    } else if (constants.LLMModel == "gemini") {
+        .getElementById('gemini_auth_key_container')
+        .classList.add('hidden');
+    } else if (constants.LLMModel == 'gemini') {
       document
-        .getElementById("openai_auth_key_container")
-        .classList.add("hidden");
+        .getElementById('openai_auth_key_container')
+        .classList.add('hidden');
       document
-        .getElementById("gemini_auth_key_container")
-        .classList.remove("hidden");
-    } else if (constants.LLMModel == "multi") {
+        .getElementById('gemini_auth_key_container')
+        .classList.remove('hidden');
+    } else if (constants.LLMModel == 'multi') {
       // multi LLM mode
       document
-        .getElementById("openai_auth_key_container")
-        .classList.remove("hidden");
+        .getElementById('openai_auth_key_container')
+        .classList.remove('hidden');
       document
-        .getElementById("gemini_auth_key_container")
-        .classList.remove("hidden");
+        .getElementById('gemini_auth_key_container')
+        .classList.remove('hidden');
       document
-        .getElementById("openai_multi_container")
-        .classList.remove("hidden");
+        .getElementById('openai_multi_container')
+        .classList.remove('hidden');
       document
-        .getElementById("gemini_multi_container")
-        .classList.remove("hidden");
-      document.getElementById("openai_multi").checked = false;
+        .getElementById('gemini_multi_container')
+        .classList.remove('hidden');
+      document.getElementById('openai_multi').checked = false;
       if (constants.LLMOpenAiMulti) {
-        document.getElementById("openai_multi").checked = true;
+        document.getElementById('openai_multi').checked = true;
       }
-      document.getElementById("gemini_multi").checked = false;
+      document.getElementById('gemini_multi').checked = false;
       if (constants.LLMGeminiMulti) {
-        document.getElementById("gemini_multi").checked = true;
+        document.getElementById('gemini_multi').checked = true;
       }
     }
     // skill level other
-    if (constants.skillLevel == "other") {
+    if (constants.skillLevel == 'other') {
       document
-        .getElementById("skill_level_other_container")
-        .classList.remove("hidden");
+        .getElementById('skill_level_other_container')
+        .classList.remove('hidden');
     }
     // LLM preferences
     if (constants.LLMPreferences) {
-      document.getElementById("LLM_preferences").value =
+      document.getElementById('LLM_preferences').value =
         constants.LLMPreferences;
     }
-    if (document.getElementById("LLM_reset_notification")) {
-      document.getElementById("LLM_reset_notification").remove();
+    if (document.getElementById('LLM_reset_notification')) {
+      document.getElementById('LLM_reset_notification').remove();
     }
   }
 
@@ -1358,33 +1356,32 @@ class Menu {
   SaveData() {
     let shouldReset = this.ShouldLLMReset();
 
-    constants.vol = document.getElementById("vol").value;
-    constants.autoPlayRate = document.getElementById("autoplay_rate").value;
+    constants.vol = document.getElementById('vol').value;
     constants.brailleDisplayLength = document.getElementById(
-      "braille_display_length"
+      'braille_display_length'
     ).value;
-    constants.colorSelected = document.getElementById("color_selected").value;
-    constants.MIN_FREQUENCY = document.getElementById("min_freq").value;
-    constants.MAX_FREQUENCY = document.getElementById("max_freq").value;
-    constants.keypressInterval =
-      document.getElementById("keypress_interval").value;
-
-    constants.openAIAuthKey = document.getElementById("openai_auth_key").value;
-    constants.geminiAuthKey = document.getElementById("gemini_auth_key").value;
-    constants.skillLevel = document.getElementById("skill_level").value;
+    constants.colorSelected = document.getElementById('color_selected').value;
+    constants.MIN_FREQUENCY = document.getElementById('min_freq').value;
+    constants.MAX_FREQUENCY = document.getElementById('max_freq').value;
+    constants.AUTOPLAY_DURATION =
+      document.getElementById('AUTOPLAY_DURATION').value;
+
+    constants.openAIAuthKey = document.getElementById('openai_auth_key').value;
+    constants.geminiAuthKey = document.getElementById('gemini_auth_key').value;
+    constants.skillLevel = document.getElementById('skill_level').value;
     constants.skillLevelOther =
-      document.getElementById("skill_level_other").value;
-    constants.LLMModel = document.getElementById("LLM_model").value;
-    constants.LLMPreferences = document.getElementById("LLM_preferences").value;
-    constants.LLMOpenAiMulti = document.getElementById("openai_multi").checked;
-    constants.LLMGeminiMulti = document.getElementById("gemini_multi").checked;
-    constants.autoInitLLM = document.getElementById("init_llm_on_load").checked;
+      document.getElementById('skill_level_other').value;
+    constants.LLMModel = document.getElementById('LLM_model').value;
+    constants.LLMPreferences = document.getElementById('LLM_preferences').value;
+    constants.LLMOpenAiMulti = document.getElementById('openai_multi').checked;
+    constants.LLMGeminiMulti = document.getElementById('gemini_multi').checked;
+    constants.autoInitLLM = document.getElementById('init_llm_on_load').checked;
 
     // aria
-    if (document.getElementById("aria_mode_assertive").checked) {
-      constants.ariaMode = "assertive";
-    } else if (document.getElementById("aria_mode_polite").checked) {
-      constants.ariaMode = "polite";
+    if (document.getElementById('aria_mode_assertive').checked) {
+      constants.ariaMode = 'assertive';
+    } else if (document.getElementById('aria_mode_polite').checked) {
+      constants.ariaMode = 'polite';
     }
 
     this.SaveDataToLocalStorage();
@@ -1403,29 +1400,29 @@ class Menu {
    */
   UpdateHtml() {
     // set aria attributes
-    constants.infoDiv.setAttribute("aria-live", constants.ariaMode);
+    constants.infoDiv.setAttribute('aria-live', constants.ariaMode);
     document
       .getElementById(constants.announcement_container_id)
-      .setAttribute("aria-live", constants.ariaMode);
+      .setAttribute('aria-live', constants.ariaMode);
 
-    document.getElementById("init_llm_on_load").checked = constants.autoInitLLM;
-    const scatter = document.getElementsByClassName("highlight_point");
-    const heatmap = document.getElementById("highlight_rect");
-    const line = document.getElementById("highlight_point");
+    document.getElementById('init_llm_on_load').checked = constants.autoInitLLM;
+    const scatter = document.getElementsByClassName('highlight_point');
+    const heatmap = document.getElementById('highlight_rect');
+    const line = document.getElementById('highlight_point');
 
     if (scatter !== null && scatter.length > 0) {
       for (let i = 0; i < scatter.length; i++) {
-        scatter[i].setAttribute("stroke", constants.colorSelected);
-        scatter[i].setAttribute("fill", constants.colorSelected);
+        scatter[i].setAttribute('stroke', constants.colorSelected);
+        scatter[i].setAttribute('fill', constants.colorSelected);
       }
     }
 
     if (heatmap !== null) {
-      heatmap.setAttribute("stroke", constants.colorSelected);
+      heatmap.setAttribute('stroke', constants.colorSelected);
     }
 
     if (line !== null) {
-      line.setAttribute("stroke", constants.colorSelected);
+      line.setAttribute('stroke', constants.colorSelected);
     }
   }
 
@@ -1437,19 +1434,19 @@ class Menu {
     let html =
       '<p id="LLM_reset_notification">Note: Changes in LLM settings will reset any existing conversation.</p>';
 
-    if (document.getElementById("LLM_reset_notification")) {
-      document.getElementById("LLM_reset_notification").remove();
+    if (document.getElementById('LLM_reset_notification')) {
+      document.getElementById('LLM_reset_notification').remove();
     }
     document
-      .getElementById("save_and_close_menu")
-      .parentElement.insertAdjacentHTML("afterend", html);
+      .getElementById('save_and_close_menu')
+      .parentElement.insertAdjacentHTML('afterend', html);
 
     // add to aria button text
     document
-      .getElementById("save_and_close_menu")
+      .getElementById('save_and_close_menu')
       .setAttribute(
-        "aria-labelledby",
-        "save_and_close_text LLM_reset_notification"
+        'aria-labelledby',
+        'save_and_close_text LLM_reset_notification'
       );
   }
   /**
@@ -1461,29 +1458,29 @@ class Menu {
     let shouldReset = false;
     if (
       !shouldReset &&
-      constants.skillLevel != document.getElementById("skill_level").value
+      constants.skillLevel != document.getElementById('skill_level').value
     ) {
       shouldReset = true;
     }
     if (
       !shouldReset &&
       constants.LLMPreferences !=
-        document.getElementById("LLM_preferences").value
+        document.getElementById('LLM_preferences').value
     ) {
       shouldReset = true;
     }
     if (
       !shouldReset &&
-      constants.LLMModel != document.getElementById("LLM_model").value
+      constants.LLMModel != document.getElementById('LLM_model').value
     ) {
       shouldReset = true;
     }
     if (
       !shouldReset &&
       (constants.LLMOpenAiMulti !=
-        document.getElementById("openai_multi").checked ||
+        document.getElementById('openai_multi').checked ||
         constants.LLMGeminiMulti !=
-          document.getElementById("gemini_multi").checked)
+          document.getElementById('gemini_multi').checked)
     ) {
       shouldReset = true;
     }
@@ -1501,27 +1498,28 @@ class Menu {
       data[constants.userSettingsKeys[i]] =
         constants[constants.userSettingsKeys[i]];
     }
-    localStorage.setItem("settings_data", JSON.stringify(data));
+    localStorage.setItem('settings_data', JSON.stringify(data));
 
     // also save to tracking if we're doing that
     if (constants.isTracking) {
       // but not auth keys
-      data.openAIAuthKey = "hidden";
-      data.geminiAuthKey = "hidden";
+      data.openAIAuthKey = 'hidden';
+      data.geminiAuthKey = 'hidden';
       // and need a timestamp
       data.timestamp = new Date().toISOString();
-      tracker.SetData("settings", data);
+      tracker.SetData('settings', data);
     }
   }
   /**
    * Loads data from 'settings_data' localStorage, and updates contants variables
    */
   LoadDataFromLocalStorage() {
-    let data = JSON.parse(localStorage.getItem("settings_data"));
+    let data = JSON.parse(localStorage.getItem('settings_data'));
     if (data) {
       for (let i = 0; i < constants.userSettingsKeys.length; i++) {
         constants[constants.userSettingsKeys[i]] =
-          data[constants.userSettingsKeys[i]];
+          data[constants.userSettingsKeys[i]] ||
+          constants[constants.userSettingsKeys[i]];
       }
     }
     this.PopulateData();
@@ -1543,9 +1541,9 @@ class ChatLLM {
     if (constants.autoInitLLM) {
       // only run if we have API keys set
       if (
-        (constants.LLMModel == "openai" && constants.openAIAuthKey) ||
-        (constants.LLMModel == "gemini" && constants.geminiAuthKey) ||
-        (constants.LLMModel == "multi" &&
+        (constants.LLMModel == 'openai' && constants.openAIAuthKey) ||
+        (constants.LLMModel == 'gemini' && constants.geminiAuthKey) ||
+        (constants.LLMModel == 'multi' &&
           constants.openAIAuthKey &&
           constants.geminiAuthKey)
       ) {
@@ -1600,7 +1598,7 @@ class ChatLLM {
         </div>
         <div id="chatLLM_modal_backdrop" class="modal-backdrop hidden"></div>
     `;
-    document.querySelector("body").insertAdjacentHTML("beforeend", html);
+    document.querySelector('body').insertAdjacentHTML('beforeend', html);
   }
 
   /**
@@ -1609,21 +1607,21 @@ class ChatLLM {
    */
   SetEvents() {
     // chatLLM close events
-    let allClose = document.querySelectorAll("#close_chatLLM, #chatLLM .close");
+    let allClose = document.querySelectorAll('#close_chatLLM, #chatLLM .close');
     for (let i = 0; i < allClose.length; i++) {
       constants.events.push([
         allClose[i],
-        "click",
+        'click',
         function (e) {
           chatLLM.Toggle(false);
         },
       ]);
     }
     constants.events.push([
-      document.getElementById("chatLLM"),
-      "keyup",
+      document.getElementById('chatLLM'),
+      'keyup',
       function (e) {
-        if (e.key == "Esc") {
+        if (e.key == 'Esc') {
           // esc
           chatLLM.Toggle(false);
         }
@@ -1633,9 +1631,9 @@ class ChatLLM {
     // ChatLLM open/close toggle
     constants.events.push([
       document,
-      "keyup",
+      'keyup',
       function (e) {
-        if ((e.key == "?" && (e.ctrlKey || e.metaKey)) || e.key == "¿") {
+        if ((e.key == '?' && (e.ctrlKey || e.metaKey)) || e.key == '¿') {
           chatLLM.Toggle();
         }
       },
@@ -1643,21 +1641,21 @@ class ChatLLM {
 
     // ChatLLM request events
     constants.events.push([
-      document.getElementById("chatLLM_submit"),
-      "click",
+      document.getElementById('chatLLM_submit'),
+      'click',
       function (e) {
-        let text = document.getElementById("chatLLM_input").value;
-        chatLLM.DisplayChatMessage("User", text);
+        let text = document.getElementById('chatLLM_input').value;
+        chatLLM.DisplayChatMessage('User', text);
         chatLLM.Submit(text);
       },
     ]);
     constants.events.push([
-      document.getElementById("chatLLM_input"),
-      "keyup",
+      document.getElementById('chatLLM_input'),
+      'keyup',
       function (e) {
-        if (e.key == "Enter" && !e.shiftKey) {
-          let text = document.getElementById("chatLLM_input").value;
-          chatLLM.DisplayChatMessage("User", text);
+        if (e.key == 'Enter' && !e.shiftKey) {
+          let text = document.getElementById('chatLLM_input').value;
+          chatLLM.DisplayChatMessage('User', text);
           chatLLM.Submit(text);
         }
       },
@@ -1666,15 +1664,15 @@ class ChatLLM {
     // ChatLLM suggestion events
     // actual suggestions:
     let suggestions = document.querySelectorAll(
-      "#chatLLM .LLM_suggestions button:not(#more_suggestions)"
+      '#chatLLM .LLM_suggestions button:not(#more_suggestions)'
     );
     for (let i = 0; i < suggestions.length; i++) {
       constants.events.push([
         suggestions[i],
-        "click",
+        'click',
         function (e) {
           let text = e.target.innerHTML;
-          chatLLM.DisplayChatMessage("User", text);
+          chatLLM.DisplayChatMessage('User', text);
           chatLLM.Submit(text);
         },
       ]);
@@ -1682,24 +1680,24 @@ class ChatLLM {
 
     // Delete OpenAI and Gemini keys
     constants.events.push([
-      document.getElementById("delete_openai_key"),
-      "click",
+      document.getElementById('delete_openai_key'),
+      'click',
       function (e) {
-        document.getElementById("openai_auth_key").value = "";
+        document.getElementById('openai_auth_key').value = '';
       },
     ]);
     constants.events.push([
-      document.getElementById("delete_gemini_key"),
-      "click",
+      document.getElementById('delete_gemini_key'),
+      'click',
       function (e) {
-        document.getElementById("gemini_auth_key").value = "";
+        document.getElementById('gemini_auth_key').value = '';
       },
     ]);
 
     // Reset chatLLM
     constants.events.push([
-      document.getElementById("reset_chatLLM"),
-      "click",
+      document.getElementById('reset_chatLLM'),
+      'click',
       function (e) {
         chatLLM.ResetLLM();
       },
@@ -1707,15 +1705,15 @@ class ChatLLM {
 
     // copy to clipboard
     constants.events.push([
-      document.getElementById("chatLLM"),
-      "click",
+      document.getElementById('chatLLM'),
+      'click',
       function (e) {
         chatLLM.CopyChatHistory(e);
       },
     ]);
     constants.events.push([
-      document.getElementById("chatLLM"),
-      "keyup",
+      document.getElementById('chatLLM'),
+      'keyup',
       function (e) {
         chatLLM.CopyChatHistory(e);
       },
@@ -1733,96 +1731,96 @@ class ChatLLM {
    * @param {Event|undefined} e - The event that triggered the copy action. If undefined, the entire chat history is copied.
    */
   CopyChatHistory(e) {
-    let text = "";
-    if (typeof e == "undefined") {
+    let text = '';
+    if (typeof e == 'undefined') {
       // check for passthrough
       // get html of the full chat history
-      text = document.getElementById("chatLLM_chat_history").innerHTML;
-    } else if (e.type == "click") {
+      text = document.getElementById('chatLLM_chat_history').innerHTML;
+    } else if (e.type == 'click') {
       // check for buttons
-      if (e.target.id == "chatLLM_copy_all") {
+      if (e.target.id == 'chatLLM_copy_all') {
         // get html of the full chat history
-        text = document.getElementById("chatLLM_chat_history").innerHTML;
-      } else if (e.target.classList.contains("chatLLM_message_copy_button")) {
+        text = document.getElementById('chatLLM_chat_history').innerHTML;
+      } else if (e.target.classList.contains('chatLLM_message_copy_button')) {
         // get the text of the element before the button
-        text = e.target.closest("p").previousElementSibling.innerHTML;
+        text = e.target.closest('p').previousElementSibling.innerHTML;
       }
-    } else if (e.type == "keyup") {
+    } else if (e.type == 'keyup') {
       // check for alt shift c or ctrl shift c
-      if (e.key == "C" && (e.ctrlKey || e.metaKey || e.altKey) && e.shiftKey) {
+      if (e.key == 'C' && (e.ctrlKey || e.metaKey || e.altKey) && e.shiftKey) {
         e.preventDefault();
         // get the last message
         let elem = document.querySelector(
-          "#chatLLM_chat_history > .chatLLM_message_other:last-of-type"
+          '#chatLLM_chat_history > .chatLLM_message_other:last-of-type'
         );
         if (elem) {
           text = elem.innerHTML;
         }
       } else if (
-        e.key == "A" &&
+        e.key == 'A' &&
         (e.ctrlKey || e.metaKey || e.altKey) &&
         e.shiftKey
       ) {
         e.preventDefault();
         // get html of the full chat history
-        text = document.getElementById("chatLLM_chat_history").innerHTML;
+        text = document.getElementById('chatLLM_chat_history').innerHTML;
       }
     }
 
-    if (text == "") {
+    if (text == '') {
       return;
     } else {
       // clear the html, removing buttons etc
-      let cleanElems = document.createElement("div");
+      let cleanElems = document.createElement('div');
       cleanElems.innerHTML = text;
-      let removeThese = cleanElems.querySelectorAll(".chatLLM_message_copy");
+      let removeThese = cleanElems.querySelectorAll('.chatLLM_message_copy');
       removeThese.forEach((elem) => elem.remove());
 
       // convert from html to markdown
       let markdown = this.htmlToMarkdown(cleanElems);
       // this messes up a bit with spacing, so kill more than 2 newlines in a row
-      markdown = markdown.replace(/\n{3,}/g, "\n\n");
+      markdown = markdown.replace(/\n{3,}/g, '\n\n');
 
       try {
         navigator.clipboard.writeText(markdown); // note: this fails if you're on the inspector. That's fine as it'll never happen to real users
       } catch (err) {
-        console.error("Failed to copy: ", err);
+        console.error('Failed to copy: ', err);
       }
       return markdown;
     }
   }
 
   htmlToMarkdown(element) {
-    let markdown = "";
+    let markdown = '';
 
     const convertElementToMarkdown = (element) => {
       switch (element.tagName) {
-        case "H1":
+        case 'H1':
           return `# ${element.textContent}`;
-        case "H2":
+        case 'H2':
           return `## ${element.textContent}`;
-        case "H3":
+        case 'H3':
           return `### ${element.textContent}`;
-        case "H4":
+        case 'H4':
           return `#### ${element.textContent}`;
-        case "H5":
+        case 'H5':
           return `##### ${element.textContent}`;
-        case "H6":
+        case 'H6':
           return `###### ${element.textContent}`;
-        case "P":
+        case 'P':
           return element.textContent;
-        case "DIV":
+        case 'DIV':
           // For divs, process each child and add newlines as needed
           return (
             Array.from(element.childNodes)
               .map((child) => convertElementToMarkdown(child))
-              .join("\n") + "\n\n"
+              .join('\n') + '\n\n'
           );
         default:
           // For any other element, process its children recursively
           return Array.from(element.childNodes)
             .map((child) => convertElementToMarkdown(child))
-            .join("");
+            .join('');
       }
     };
 
@@ -1830,7 +1828,7 @@ class ChatLLM {
       markdown += convertElementToMarkdown(element);
     } else if (
       element.nodeType === Node.TEXT_NODE &&
-      element.textContent.trim() !== ""
+      element.textContent.trim() !== ''
     ) {
       markdown += element.textContent.trim();
     }
@@ -1855,14 +1853,14 @@ class ChatLLM {
 
     // if this is the user's first message (or we're gemini, in which case we need to send every time), prepend prompt with user position
     if (
-      (this.firstOpen || constants.LLMModel == "gemini") &&
+      (this.firstOpen || constants.LLMModel == 'gemini') &&
       !firsttime &&
       constants.verboseText.length > 0
     ) {
       text =
         "Here is the current position in the chart; no response necessarily needed, use this info only if it's relevant to future questions: " +
         constants.verboseText +
-        ". My question is: " +
+        '. My question is: ' +
         text;
 
       this.firstOpen = false;
@@ -1873,15 +1871,15 @@ class ChatLLM {
       this.WaitingSound(true);
     }
 
-    if (constants.LLMOpenAiMulti || constants.LLMModel == "openai") {
+    if (constants.LLMOpenAiMulti || constants.LLMModel == 'openai') {
       if (firsttime) {
-        img = await this.ConvertSVGtoJPG(singleMaidr.id, "openai");
+        img = await this.ConvertSVGtoJPG(singleMaidr.id, 'openai');
       }
       chatLLM.OpenAIPrompt(text, img);
     }
-    if (constants.LLMGeminiMulti || constants.LLMModel == "gemini") {
+    if (constants.LLMGeminiMulti || constants.LLMModel == 'gemini') {
       if (firsttime) {
-        img = await this.ConvertSVGtoJPG(singleMaidr.id, "gemini");
+        img = await this.ConvertSVGtoJPG(singleMaidr.id, 'gemini');
       }
       chatLLM.GeminiPrompt(text, img);
     }
@@ -1942,7 +1940,7 @@ class ChatLLM {
       }, 30000);
 
       // set queue for multi
-      if (constants.LLMModel != "multi") {
+      if (constants.LLMModel != 'multi') {
         constants.waitingQueue = 1;
       } else {
         constants.waitingQueue = 0;
@@ -1974,7 +1972,7 @@ class ChatLLM {
     // get name from resource
     let LLMName = resources.GetString(constants.LLMModel);
     this.firstTime = false;
-    this.DisplayChatMessage(LLMName, resources.GetString("processing"), true);
+    this.DisplayChatMessage(LLMName, resources.GetString('processing'), true);
     let defaultPrompt = this.GetDefaultPrompt();
     this.Submit(defaultPrompt, true);
   }
@@ -1986,35 +1984,35 @@ class ChatLLM {
    */
   ProcessLLMResponse(data, model) {
     chatLLM.WaitingSound(false);
-    console.log("LLM response: ", data);
-    let text = "";
+    console.log('LLM response: ', data);
+    let text = '';
     let LLMName = resources.GetString(model);
 
-    if (model == "openai") {
+    if (model == 'openai') {
       text = data.choices[0].message.content;
       let i = this.requestJson.messages.length;
       this.requestJson.messages[i] = {};
-      this.requestJson.messages[i].role = "assistant";
+      this.requestJson.messages[i].role = 'assistant';
       this.requestJson.messages[i].content = text;
 
       if (data.error) {
-        chatLLM.DisplayChatMessage(LLMName, "Error processing request.", true);
+        chatLLM.DisplayChatMessage(LLMName, 'Error processing request.', true);
         chatLLM.WaitingSound(false);
       } else {
         chatLLM.DisplayChatMessage(LLMName, text);
       }
-    } else if (model == "gemini") {
+    } else if (model == 'gemini') {
       if (data.text()) {
         text = data.text();
         chatLLM.DisplayChatMessage(LLMName, text);
       } else {
         if (!data.error) {
-          data.error = "Error processing request.";
+          data.error = 'Error processing request.';
           chatLLM.WaitingSound(false);
         }
       }
       if (data.error) {
-        chatLLM.DisplayChatMessage(LLMName, "Error processing request.", true);
+        chatLLM.DisplayChatMessage(LLMName, 'Error processing request.', true);
         chatLLM.WaitingSound(false);
       } else {
         // todo: display actual response
@@ -2024,7 +2022,7 @@ class ChatLLM {
     // if we're tracking, log the data
     if (constants.isTracking) {
       let chatHist = chatLLM.CopyChatHistory();
-      tracker.SetData("ChatHistory", chatHist);
+      tracker.SetData('ChatHistory', chatHist);
     }
   }
 
@@ -2038,11 +2036,11 @@ class ChatLLM {
     if (this.requestJson.messages.length > 2) {
       // subsequent responses
       responseText = {
-        id: "chatcmpl-8Y44iRCRrohYbAqm8rfBbJqTUADC7",
-        object: "chat.completion",
+        id: 'chatcmpl-8Y44iRCRrohYbAqm8rfBbJqTUADC7',
+        object: 'chat.completion',
         created: 1703129508,
         //model: 'gpt-4-1106-vision-preview',
-        model: "gpt4-o",
+        model: 'gpt4-o',
         usage: {
           prompt_tokens: 451,
           completion_tokens: 16,
@@ -2051,10 +2049,10 @@ class ChatLLM {
         choices: [
           {
             message: {
-              role: "assistant",
-              content: "A fake response from the LLM. Nice.",
+              role: 'assistant',
+              content: 'A fake response from the LLM. Nice.',
             },
-            finish_reason: "length",
+            finish_reason: 'length',
             index: 0,
           },
         ],
@@ -2062,10 +2060,10 @@ class ChatLLM {
     } else {
       // first response
       responseText = {
-        id: "chatcmpl-8Y44iRCRrohYbAqm8rfBbJqTUADC7",
-        object: "chat.completion",
+        id: 'chatcmpl-8Y44iRCRrohYbAqm8rfBbJqTUADC7',
+        object: 'chat.completion',
         created: 1703129508,
-        model: "gpt-4-1106-vision-preview",
+        model: 'gpt-4-1106-vision-preview',
         usage: {
           prompt_tokens: 451,
           completion_tokens: 16,
@@ -2074,11 +2072,11 @@ class ChatLLM {
         choices: [
           {
             message: {
-              role: "assistant",
+              role: 'assistant',
               content:
-                "The chart you're referring to is a bar graph titled \"The Number of Diamonds",
+                'The chart you\'re referring to is a bar graph titled "The Number of Diamonds',
             },
-            finish_reason: "length",
+            finish_reason: 'length',
             index: 0,
           },
         ],
@@ -2097,49 +2095,49 @@ class ChatLLM {
    */
   OpenAIPrompt(text, img = null) {
     // request init
-    let url = "https://api.openai.com/v1/chat/completions";
+    let url = 'https://api.openai.com/v1/chat/completions';
     let auth = constants.openAIAuthKey;
     let requestJson = chatLLM.OpenAIJson(text, img);
-    console.log("LLM request: ", requestJson);
+    console.log('LLM request: ', requestJson);
 
     fetch(url, {
-      method: "POST",
+      method: 'POST',
       headers: {
-        "Content-Type": "application/json",
-        Authorization: "Bearer " + auth,
+        'Content-Type': 'application/json',
+        Authorization: 'Bearer ' + auth,
       },
       body: JSON.stringify(requestJson),
     })
       .then((response) => response.json())
       .then((data) => {
-        chatLLM.ProcessLLMResponse(data, "openai");
+        chatLLM.ProcessLLMResponse(data, 'openai');
       })
       .catch((error) => {
         chatLLM.WaitingSound(false);
-        console.error("Error:", error);
-        chatLLM.DisplayChatMessage("OpenAI", "Error processing request.", true);
+        console.error('Error:', error);
+        chatLLM.DisplayChatMessage('OpenAI', 'Error processing request.', true);
         // also todo: handle errors somehow
       });
   }
   OpenAIJson(text, img = null) {
     let sysMessage = constants.LLMSystemMessage;
     let backupMessage =
-      "Describe " + singleMaidr.type + " charts to a blind person";
+      'Describe ' + singleMaidr.type + ' charts to a blind person';
     // headers and sys message
     if (!this.requestJson) {
       this.requestJson = {};
       //this.requestJson.model = 'gpt-4-vision-preview';
-      this.requestJson.model = "gpt-4o-2024-08-06";
+      this.requestJson.model = 'gpt-4o-2024-08-06';
       this.requestJson.max_tokens = constants.LLMmaxResponseTokens; // note: if this is too short (tested with less than 200), the response gets cut off
 
       // sys message
       this.requestJson.messages = [];
       this.requestJson.messages[0] = {};
-      this.requestJson.messages[0].role = "system";
+      this.requestJson.messages[0].role = 'system';
       this.requestJson.messages[0].content = sysMessage;
       if (constants.LLMPreferences) {
         this.requestJson.messages[1] = {};
-        this.requestJson.messages[1].role = "system";
+        this.requestJson.messages[1].role = 'system';
         this.requestJson.messages[1].content = constants.LLMPreferences;
       }
     }
@@ -2148,16 +2146,16 @@ class ChatLLM {
     // if we have an image (first time only), send the image and the text, otherwise just the text
     let i = this.requestJson.messages.length;
     this.requestJson.messages[i] = {};
-    this.requestJson.messages[i].role = "user";
+    this.requestJson.messages[i].role = 'user';
     if (img) {
       // first message, include the img
       this.requestJson.messages[i].content = [
         {
-          type: "text",
+          type: 'text',
           text: text,
         },
         {
-          type: "image_url",
+          type: 'image_url',
           image_url: { url: img },
         },
       ];
@@ -2182,12 +2180,12 @@ class ChatLLM {
 
       // Import the module
       const { GoogleGenerativeAI } = await import(
-        "https://esm.run/@google/generative-ai"
+        'https://esm.run/@google/generative-ai'
       );
       const API_KEY = constants.geminiAuthKey;
       const genAI = new GoogleGenerativeAI(API_KEY);
       const model = genAI.getGenerativeModel({
-        model: "gemini-1.5-pro-latest",
+        model: 'gemini-1.5-pro-latest',
       }); // old model was 'gemini-pro-vision'
 
       // Create the prompt
@@ -2195,25 +2193,25 @@ class ChatLLM {
       if (constants.LLMPreferences) {
         prompt += constants.LLMPreferences;
       }
-      prompt += "\n\n" + text; // Use the text parameter as the prompt
+      prompt += '\n\n' + text; // Use the text parameter as the prompt
       const image = {
         inlineData: {
           data: imgBase64, // Use the base64 image string
-          mimeType: "image/png", // Or the appropriate mime type of your image
+          mimeType: 'image/png', // Or the appropriate mime type of your image
         },
       };
 
       // Generate the content
-      console.log("LLM request: ", prompt, image);
+      console.log('LLM request: ', prompt, image);
       const result = await model.generateContent([prompt, image]);
       console.log(result.response.text());
 
       // Process the response
-      chatLLM.ProcessLLMResponse(result.response, "gemini");
+      chatLLM.ProcessLLMResponse(result.response, 'gemini');
     } catch (error) {
       chatLLM.WaitingSound(false);
-      chatLLM.DisplayChatMessage("Gemini", "Error processing request.", true);
-      console.error("Error in GeminiPrompt:", error);
+      chatLLM.DisplayChatMessage('Gemini', 'Error processing request.', true);
+      console.error('Error in GeminiPrompt:', error);
       throw error; // Rethrow the error for further handling if necessary
     }
   }
@@ -2225,11 +2223,11 @@ class ChatLLM {
    * @memberof module:constants
    * @returns {void}
    */
-  DisplayChatMessage(user = "User", text = "", isSystem = false) {
-    let hLevel = "h3";
-    if (!isSystem && constants.LLMModel == "multi" && user != "User") {
+  DisplayChatMessage(user = 'User', text = '', isSystem = false) {
+    let hLevel = 'h3';
+    if (!isSystem && constants.LLMModel == 'multi' && user != 'User') {
       if (this.firstMulti) {
-        let multiAIName = resources.GetString("multi");
+        let multiAIName = resources.GetString('multi');
         let titleHtml = `
           <div class="chatLLM_message chatLLM_message_other">
             <h3 class="chatLLM_message_user">${multiAIName} Responses</h3>
@@ -2238,20 +2236,20 @@ class ChatLLM {
         this.RenderChatMessage(titleHtml);
         this.firstMulti = false;
       }
-      hLevel = "h4";
+      hLevel = 'h4';
     }
     let html = `
       <div class="chatLLM_message ${
-        user == "User" ? "chatLLM_message_self" : "chatLLM_message_other"
+        user == 'User' ? 'chatLLM_message_self' : 'chatLLM_message_other'
       }">`;
-    if (text != resources.GetString("processing")) {
+    if (text != resources.GetString('processing')) {
       html += `<${hLevel} class="chatLLM_message_user">${user}</${hLevel}>`;
     }
     html += `<p class="chatLLM_message_text">${text}</p>
       </div>
     `;
     // add a copy button to actual messages
-    if (user != "User" && text != resources.GetString("processing")) {
+    if (user != 'User' && text != resources.GetString('processing')) {
       html += `
         <p class="chatLLM_message_copy"><button class="chatLLM_message_copy_button">Copy</button></p>
       `;
@@ -2261,13 +2259,13 @@ class ChatLLM {
   }
   RenderChatMessage(html) {
     document
-      .getElementById("chatLLM_chat_history")
-      .insertAdjacentHTML("beforeend", html);
-    document.getElementById("chatLLM_input").value = "";
+      .getElementById('chatLLM_chat_history')
+      .insertAdjacentHTML('beforeend', html);
+    document.getElementById('chatLLM_input').value = '';
 
     // scroll to bottom
-    document.getElementById("chatLLM_chat_history").scrollTop =
-      document.getElementById("chatLLM_chat_history").scrollHeight;
+    document.getElementById('chatLLM_chat_history').scrollTop =
+      document.getElementById('chatLLM_chat_history').scrollHeight;
   }
 
   /**
@@ -2275,7 +2273,7 @@ class ChatLLM {
    */
   ResetLLM() {
     // clear the main chat history
-    document.getElementById("chatLLM_chat_history").innerHTML = "";
+    document.getElementById('chatLLM_chat_history').innerHTML = '';
 
     // reset the data
     this.requestJson = null;
@@ -2296,11 +2294,11 @@ class ChatLLM {
    */
   Destroy() {
     // chatLLM element destruction
-    let chatLLM = document.getElementById("chatLLM");
+    let chatLLM = document.getElementById('chatLLM');
     if (chatLLM) {
       chatLLM.remove();
     }
-    let backdrop = document.getElementById("chatLLM_modal_backdrop");
+    let backdrop = document.getElementById('chatLLM_modal_backdrop');
     if (backdrop) {
       backdrop.remove();
     }
@@ -2311,8 +2309,8 @@ class ChatLLM {
    * @param {boolean} [onoff=false] - Whether to turn the chatLLM on or off. Defaults to false (close).
    */
   Toggle(onoff) {
-    if (typeof onoff == "undefined") {
-      if (document.getElementById("chatLLM").classList.contains("hidden")) {
+    if (typeof onoff == 'undefined') {
+      if (document.getElementById('chatLLM').classList.contains('hidden')) {
         onoff = true;
       } else {
         onoff = false;
@@ -2323,19 +2321,19 @@ class ChatLLM {
       // open
       this.whereWasMyFocus = document.activeElement;
       constants.tabMovement = 0;
-      document.getElementById("chatLLM").classList.remove("hidden");
+      document.getElementById('chatLLM').classList.remove('hidden');
       document
-        .getElementById("chatLLM_modal_backdrop")
-        .classList.remove("hidden");
-      document.querySelector("#chatLLM .close").focus();
+        .getElementById('chatLLM_modal_backdrop')
+        .classList.remove('hidden');
+      document.querySelector('#chatLLM .close').focus();
 
       if (this.firstTime) {
         this.InitChatMessage();
       }
     } else {
       // close
-      document.getElementById("chatLLM").classList.add("hidden");
-      document.getElementById("chatLLM_modal_backdrop").classList.add("hidden");
+      document.getElementById('chatLLM').classList.add('hidden');
+      document.getElementById('chatLLM_modal_backdrop').classList.add('hidden');
       this.whereWasMyFocus.focus();
       this.whereWasMyFocus = null;
       this.firstOpen = true;
@@ -2349,11 +2347,11 @@ class ChatLLM {
   async ConvertSVGtoJPG(id, model) {
     let svgElement = document.getElementById(id);
     return new Promise((resolve, reject) => {
-      var canvas = document.createElement("canvas");
-      var ctx = canvas.getContext("2d");
+      var canvas = document.createElement('canvas');
+      var ctx = canvas.getContext('2d');
 
       var svgData = new XMLSerializer().serializeToString(svgElement);
-      if (!svgData.startsWith("<svg xmlns")) {
+      if (!svgData.startsWith('<svg xmlns')) {
         svgData = `<svg xmlns="http://www.w3.org/2000/svg" ${svgData.slice(4)}`;
       }
 
@@ -2365,11 +2363,11 @@ class ChatLLM {
       var img = new Image();
       img.onload = function () {
         ctx.drawImage(img, 0, 0, svgSize.width, svgSize.height);
-        var jpegData = canvas.toDataURL("image/jpeg", 0.9); // 0.9 is the quality parameter
-        if (model == "openai") {
+        var jpegData = canvas.toDataURL('image/jpeg', 0.9); // 0.9 is the quality parameter
+        if (model == 'openai') {
           resolve(jpegData);
-        } else if (model == "gemini") {
-          let base64Data = jpegData.split(",")[1];
+        } else if (model == 'gemini') {
+          let base64Data = jpegData.split(',')[1];
           resolve(base64Data);
           //resolve(jpegData);
         }
@@ -2377,11 +2375,11 @@ class ChatLLM {
       };
 
       img.onerror = function () {
-        reject(new Error("Error loading SVG"));
+        reject(new Error('Error loading SVG'));
       };
 
       var svgBlob = new Blob([svgData], {
-        type: "image/svg+xml;charset=utf-8",
+        type: 'image/svg+xml;charset=utf-8',
       });
       var url = URL.createObjectURL(svgBlob);
       img.src = url;
@@ -2394,25 +2392,25 @@ class ChatLLM {
    * The prompt includes information about the blind person's skill level and the chart's image and raw data, if available.
    */
   GetDefaultPrompt() {
-    let text = "Describe this chart to a blind person";
+    let text = 'Describe this chart to a blind person';
     if (constants.skillLevel) {
-      if (constants.skillLevel == "other" && constants.skillLevelOther) {
+      if (constants.skillLevel == 'other' && constants.skillLevelOther) {
         text +=
-          " who has a " +
+          ' who has a ' +
           constants.skillLevelOther +
-          " understanding of statistical charts. ";
+          ' understanding of statistical charts. ';
       } else {
         text +=
-          " who has a " +
+          ' who has a ' +
           constants.skillLevel +
-          " understanding of statistical charts. ";
+          ' understanding of statistical charts. ';
       }
     } else {
-      text += " who has a basic understanding of statistical charts. ";
+      text += ' who has a basic understanding of statistical charts. ';
     }
-    text += "Here is a chart in image format";
+    text += 'Here is a chart in image format';
     if (singleMaidr) {
-      text += " and raw data in json format: \n";
+      text += ' and raw data in json format: \n';
       text += JSON.stringify(singleMaidr);
     }
 
@@ -2467,26 +2465,26 @@ class Description {
 
     `;
 
-    document.querySelector("body").insertAdjacentHTML("beforeend", html);
+    document.querySelector('body').insertAdjacentHTML('beforeend', html);
 
     // close events
     let allClose = document.querySelectorAll(
-      "#close_desc, #description .close"
+      '#close_desc, #description .close'
     );
     for (let i = 0; i < allClose.length; i++) {
       constants.events.push([
         allClose[i],
-        "click",
+        'click',
         function (e) {
           description.Toggle(false);
         },
       ]);
     }
     constants.events.push([
-      document.getElementById("description"),
-      "keyup",
+      document.getElementById('description'),
+      'keyup',
       function (e) {
-        if (e.key == "Esc") {
+        if (e.key == 'Esc') {
           // esc
           description.Toggle(false);
         }
@@ -2496,9 +2494,9 @@ class Description {
     // open events
     constants.events.push([
       document,
-      "keyup",
+      'keyup',
       function (e) {
-        if (e.key == "d") {
+        if (e.key == 'd') {
           description.Toggle(true);
         }
       },
@@ -2510,11 +2508,11 @@ class Description {
    */
   Destroy() {
     // description element destruction
-    let description = document.getElementById("menu");
+    let description = document.getElementById('menu');
     if (description) {
       description.remove();
     }
-    let backdrop = document.getElementById("desc_modal_backdrop");
+    let backdrop = document.getElementById('desc_modal_backdrop');
     if (backdrop) {
       backdrop.remove();
     }
@@ -2525,8 +2523,8 @@ class Description {
    * @param {boolean} [onoff=false] - Whether to turn the description element on or off.
    */
   Toggle(onoff = false) {
-    if (typeof onoff == "undefined") {
-      if (document.getElementById("description").classList.contains("hidden")) {
+    if (typeof onoff == 'undefined') {
+      if (document.getElementById('description').classList.contains('hidden')) {
         onoff = true;
       } else {
         onoff = false;
@@ -2537,13 +2535,13 @@ class Description {
       this.whereWasMyFocus = document.activeElement;
       constants.tabMovement = 0;
       this.PopulateData();
-      document.getElementById("description").classList.remove("hidden");
-      document.getElementById("desc_modal_backdrop").classList.remove("hidden");
-      document.querySelector("#description .close").focus();
+      document.getElementById('description').classList.remove('hidden');
+      document.getElementById('desc_modal_backdrop').classList.remove('hidden');
+      document.querySelector('#description .close').focus();
     } else {
       // close
-      document.getElementById("description").classList.add("hidden");
-      document.getElementById("desc_modal_backdrop").classList.add("hidden");
+      document.getElementById('description').classList.add('hidden');
+      document.getElementById('desc_modal_backdrop').classList.add('hidden');
       this.whereWasMyFocus.focus();
       this.whereWasMyFocus = null;
     }
@@ -2553,22 +2551,22 @@ class Description {
    * Populates the data for the chart and table based on the chart type and plot data.
    */
   PopulateData() {
-    let descHtml = "";
+    let descHtml = '';
 
     // chart labels and descriptions
-    let descType = "";
-    if (constants.chartType == "bar") {
-      descType = "Bar chart";
-    } else if (constants.chartType == "heat") {
-      descType = "Heatmap";
-    } else if (constants.chartType == "box") {
-      descType = "Box plot";
-    } else if (constants.chartType == "scatter") {
-      descType = "Scatter plot";
-    } else if (constants.chartType == "line") {
-      descType = "Line chart";
-    } else if (constants.chartType == "hist") {
-      descType = "Histogram";
+    let descType = '';
+    if (constants.chartType == 'bar') {
+      descType = 'Bar chart';
+    } else if (constants.chartType == 'heat') {
+      descType = 'Heatmap';
+    } else if (constants.chartType == 'box') {
+      descType = 'Box plot';
+    } else if (constants.chartType == 'scatter') {
+      descType = 'Scatter plot';
+    } else if (constants.chartType == 'line') {
+      descType = 'Line chart';
+    } else if (constants.chartType == 'hist') {
+      descType = 'Histogram';
     }
 
     if (descType) {
@@ -2585,7 +2583,7 @@ class Description {
     }
 
     // table of data, prep
-    let descTableHtml = "";
+    let descTableHtml = '';
     let descLabelX = null;
     let descLabelY = null;
     let descTickX = null;
@@ -2595,7 +2593,7 @@ class Description {
     let descNumColsWithLabels = 0;
     let descNumRows = 0;
     let descNumRowsWithLabels = 0;
-    if (constants.chartType == "bar") {
+    if (constants.chartType == 'bar') {
       if (plot.plotLegend.x != null) {
         descLabelX = plot.plotLegend.x;
         descNumColsWithLabels += 1;
@@ -2620,43 +2618,43 @@ class Description {
 
     // table of data, create
     if (descData != null) {
-      descTableHtml += "<table>";
+      descTableHtml += '<table>';
 
       // header rows
       if (descLabelX != null || descTickX != null) {
-        descTableHtml += "<thead>";
+        descTableHtml += '<thead>';
         if (descLabelX != null) {
-          descTableHtml += "<tr>";
+          descTableHtml += '<tr>';
           if (descLabelY != null) {
-            descTableHtml += "<td></td>";
+            descTableHtml += '<td></td>';
           }
           if (descTickY != null) {
-            descTableHtml += "<td></td>";
+            descTableHtml += '<td></td>';
           }
           descTableHtml += `<th scope="col" colspan="${descNumCols}">${descLabelX}</th>`;
-          descTableHtml += "</tr>";
+          descTableHtml += '</tr>';
         }
         if (descTickX != null) {
-          descTableHtml += "<tr>";
+          descTableHtml += '<tr>';
           if (descLabelY != null) {
-            descTableHtml += "<td></td>";
+            descTableHtml += '<td></td>';
           }
           if (descTickY != null) {
-            descTableHtml += "<td></td>";
+            descTableHtml += '<td></td>';
           }
           for (let i = 0; i < descNumCols; i++) {
             descTableHtml += `<th scope="col">${descTickX[i]}</th>`;
           }
-          descTableHtml += "</tr>";
+          descTableHtml += '</tr>';
         }
-        descTableHtml += "</thead>";
+        descTableHtml += '</thead>';
       }
 
       // body rows
       if (descNumRows > 0) {
-        descTableHtml += "<tbody>";
+        descTableHtml += '<tbody>';
         for (let i = 0; i < descNumRows; i++) {
-          descTableHtml += "<tr>";
+          descTableHtml += '<tr>';
           if (descLabelY != null && i == 0) {
             descTableHtml += `<th scope="row" rowspan="${descNumRows}">${descLabelY}</th>`;
           }
@@ -2666,19 +2664,19 @@ class Description {
           for (let j = 0; j < descNumCols; j++) {
             descTableHtml += `<td>${descData[i][j]}</td>`;
           }
-          descTableHtml += "</tr>";
+          descTableHtml += '</tr>';
         }
-        descTableHtml += "</tbody>";
+        descTableHtml += '</tbody>';
       }
 
-      descTableHtml += "</table>";
+      descTableHtml += '</table>';
     }
 
     // bar: don't need colspan or rowspan stuff, put legendX and Y as headers
 
-    document.getElementById("desc_title").innerHTML = descType + " description";
-    document.getElementById("desc_content").innerHTML = descHtml;
-    document.getElementById("desc_table").innerHTML = descTableHtml;
+    document.getElementById('desc_title').innerHTML = descType + ' description';
+    document.getElementById('desc_content').innerHTML = descHtml;
+    document.getElementById('desc_table').innerHTML = descTableHtml;
   }
 }
 
@@ -2748,11 +2746,11 @@ class Tracker {
    * Downloads the tracker data as a JSON file.
    */
   DownloadTrackerData() {
-    let link = document.createElement("a");
+    let link = document.createElement('a');
     let data = this.GetTrackerData();
-    let fileStr = new Blob([JSON.stringify(data)], { type: "text/plain" });
+    let fileStr = new Blob([JSON.stringify(data)], { type: 'text/plain' });
     link.href = URL.createObjectURL(fileStr);
-    link.download = "tracking.json";
+    link.download = 'tracking.json';
     link.click();
   }
 
@@ -2781,7 +2779,7 @@ class Tracker {
     this.data = null;
 
     if (constants.debugLevel > 0) {
-      console.log("tracking data cleared");
+      console.log('tracking data cleared');
     }
 
     this.DataSetup();
@@ -2789,12 +2787,12 @@ class Tracker {
 
   SaveSettings() {
     // fetch all settings, push to data.settings
-    let settings = JSON.parse(localStorage.getItem("settings_data"));
+    let settings = JSON.parse(localStorage.getItem('settings_data'));
     if (settings) {
       // don't store their auth keys
-      settings.openAIAuthKey = "hidden";
-      settings.geminiAuthKey = "hidden";
-      this.SetData("settings", settings);
+      settings.openAIAuthKey = 'hidden';
+      settings.geminiAuthKey = 'hidden';
+      this.SetData('settings', settings);
     }
   }
 
@@ -2850,9 +2848,6 @@ class Tracker {
     if (!this.isUndefinedOrNull(constants.vol)) {
       eventToLog.volume = Object.assign(constants.vol);
     }
-    if (!this.isUndefinedOrNull(constants.autoPlayRate)) {
-      eventToLog.autoplay_rate = Object.assign(constants.autoPlayRate);
-    }
     if (!this.isUndefinedOrNull(constants.colorSelected)) {
       eventToLog.color = Object.assign(constants.colorSelected);
     }
@@ -2864,6 +2859,9 @@ class Tracker {
     if (!this.isUndefinedOrNull(constants.duration)) {
       eventToLog.tone_duration = Object.assign(constants.duration);
     }
+    if (!this.isUndefinedOrNull(constants.AUTOPLAY_DURATION)) {
+      eventToLog.AUTOPLAY_DURATION = Object.assign(constants.AUTOPLAY_DURATION);
+    }
     if (!this.isUndefinedOrNull(constants.autoPlayOutlierRate)) {
       eventToLog.autoplay_outlier_rate = Object.assign(
         constants.autoPlayOutlierRate
@@ -2888,7 +2886,7 @@ class Tracker {
     }
     if (!this.isUndefinedOrNull(constants.infoDiv.innerHTML)) {
       let textDisplay = Object.assign(constants.infoDiv.innerHTML);
-      textDisplay = textDisplay.replaceAll(/<[^>]*>?/gm, "");
+      textDisplay = textDisplay.replaceAll(/<[^>]*>?/gm, '');
       eventToLog.text_display = textDisplay;
     }
     if (!this.isUndefinedOrNull(location.href)) {
@@ -2896,13 +2894,13 @@ class Tracker {
     }
 
     // chart specific values
-    let x_tickmark = "";
-    let y_tickmark = "";
-    let x_label = "";
-    let y_label = "";
-    let value = "";
-    let fill_value = "";
-    if (constants.chartType == "bar") {
+    let x_tickmark = '';
+    let y_tickmark = '';
+    let x_label = '';
+    let y_label = '';
+    let value = '';
+    let fill_value = '';
+    if (constants.chartType == 'bar') {
       if (!this.isUndefinedOrNull(plot.columnLabels[position.x])) {
         x_tickmark = plot.columnLabels[position.x];
       }
@@ -2915,7 +2913,7 @@ class Tracker {
       if (!this.isUndefinedOrNull(plot.plotData[position.x])) {
         value = plot.plotData[position.x];
       }
-    } else if (constants.chartType == "heat") {
+    } else if (constants.chartType == 'heat') {
       if (!this.isUndefinedOrNull(plot.x_labels[position.x])) {
         x_tickmark = plot.x_labels[position.x].trim();
       }
@@ -2936,11 +2934,11 @@ class Tracker {
       if (!this.isUndefinedOrNull(plot.group_labels[2])) {
         fill_value = plot.group_labels[2];
       }
-    } else if (constants.chartType == "box") {
+    } else if (constants.chartType == 'box') {
       let plotPos =
-        constants.plotOrientation == "vert" ? position.x : position.y;
+        constants.plotOrientation == 'vert' ? position.x : position.y;
       let sectionPos =
-        constants.plotOrientation == "vert" ? position.y : position.x;
+        constants.plotOrientation == 'vert' ? position.y : position.x;
       let sectionLabel = plot.sections[sectionPos];
 
       if (!this.isUndefinedOrNull(plot.x_group_label)) {
@@ -2949,7 +2947,7 @@ class Tracker {
       if (!this.isUndefinedOrNull(plot.y_group_label)) {
         y_label = plot.y_group_label;
       }
-      if (constants.plotOrientation == "vert") {
+      if (constants.plotOrientation == 'vert') {
         if (plotPos > -1 && sectionPos > -1) {
           if (!this.isUndefinedOrNull(sectionLabel)) {
             y_tickmark = sectionLabel;
@@ -2974,7 +2972,7 @@ class Tracker {
           }
         }
       }
-    } else if (constants.chartType == "point") {
+    } else if (constants.chartType == 'point') {
       if (!this.isUndefinedOrNull(plot.x_group_label)) {
         x_label = plot.x_group_label;
       }
@@ -3001,13 +2999,13 @@ class Tracker {
 
     //console.log("x_tickmark: '", x_tickmark, "', y_tickmark: '", y_tickmark, "', x_label: '", x_label, "', y_label: '", y_label, "', value: '", value, "', fill_value: '", fill_value);
 
-    this.SetData("events", eventToLog);
+    this.SetData('events', eventToLog);
     //console.log('logged an event');
   }
 
   SetData(key, value) {
     let data = this.GetTrackerData();
-    let arrayKeys = ["events", "ChatHistory", "settings"];
+    let arrayKeys = ['events', 'ChatHistory', 'settings'];
     if (!arrayKeys.includes(key)) {
       data[key] = value;
     } else {
@@ -3048,20 +3046,20 @@ class Review {
     // true means on or show
     if (onoff) {
       constants.reviewSaveSpot = document.activeElement;
-      constants.review_container.classList.remove("hidden");
+      constants.review_container.classList.remove('hidden');
       constants.reviewSaveBrailleMode = constants.brailleMode;
       constants.review.focus();
 
-      display.announceText("Review on");
+      display.announceText('Review on');
     } else {
-      constants.review_container.classList.add("hidden");
-      if (constants.reviewSaveBrailleMode == "on") {
+      constants.review_container.classList.add('hidden');
+      if (constants.reviewSaveBrailleMode == 'on') {
         // we have to turn braille mode back on
-        display.toggleBrailleMode("on");
+        display.toggleBrailleMode('on');
       } else {
         constants.reviewSaveSpot.focus();
       }
-      display.announceText("Review off");
+      display.announceText('Review off');
     }
   }
 }
@@ -3078,7 +3076,7 @@ class LogError {
    * @param {string} a - The absent element to log.
    */
   LogAbsentElement(a) {
-    console.log(a, "not found. Visual highlighting is turned off.");
+    console.log(a, 'not found. Visual highlighting is turned off.');
   }
 
   /**
@@ -3086,7 +3084,7 @@ class LogError {
    * @param {string} a - The critical element to log.
    */
   LogCriticalElement(a) {
-    consolelog(a, "is critical. MAIDR unable to run");
+    consolelog(a, 'is critical. MAIDR unable to run');
   }
 
   /**
@@ -3097,9 +3095,9 @@ class LogError {
   LogDifferentLengths(a, b) {
     console.log(
       a,
-      "and",
+      'and',
       b,
-      "do not have the same length. Visual highlighting is turned off."
+      'do not have the same length. Visual highlighting is turned off.'
     );
   }
 
@@ -3110,11 +3108,11 @@ class LogError {
    */
   LogTooManyElements(a, b) {
     console.log(
-      "Too many",
+      'Too many',
       a,
-      "elements. Only the first",
+      'elements. Only the first',
       b,
-      "will be highlighted."
+      'will be highlighted.'
     );
   }
 
@@ -3123,7 +3121,7 @@ class LogError {
    * @param {*} a - The parameter that is not an array.
    */
   LogNotArray(a) {
-    console.log(a, "is not an array. Visual highlighting is turned off.");
+    console.log(a, 'is not an array. Visual highlighting is turned off.');
   }
 }
 
@@ -3971,10 +3969,6 @@ class Display {
       let targetLabel = this.boxplotGridPlaceholders[sectionPos];
       let haveTargetLabel = false;
       let adjustedPos = 0;
-      // bookmark: shiny issue: this is being called twice??
-      // and the issue happens on 2nd call, sometimes it skips like 75% or whatever
-      //
-      // on first call, we might call it multiple as we're setting up, I care but let's check that later
 
       if (constants.brailleData) {
         for (let i = 0; i < constants.brailleData.length; i++) {
@@ -4677,6 +4671,10 @@ class Display {
 
       // Step 2: normalize and allocate remaining characters and add to our main braille array
       let charsAvailable = constants.brailleDisplayLength - numAllocatedChars;
+      // Bug happened here: if our numAllocatedChars is bigger than brailleDisplayLength, it cuts off chars
+      // temp fix: just let it overflow by setting charsAvailable to positive if it's below 0. Or maybe 5 to still give us some play
+      // todo: real solution should probably be to kill outliers that are too close together
+      if (charsAvailable < 5) charsAvailable = 5;
       let allocateCharacters = this.AllocateCharacters(lenData, charsAvailable);
       // apply allocation
       let brailleData = lenData;
@@ -5090,9 +5088,8 @@ class BarChart {
       }
     }
     constants.maxX = this.columnLabels.length;
-    constants.autoPlayRate = Math.min(
-      Math.ceil(constants.AUTOPLAY_DURATION / (constants.maxX + 1)),
-      constants.MAX_SPEED
+    constants.autoPlayRate = Math.ceil(
+      constants.AUTOPLAY_DURATION / this.plotData.length
     );
     constants.DEFAULT_SPEED = constants.autoPlayRate;
     if (constants.autoPlayRate < constants.MIN_SPEED) {
@@ -5423,10 +5420,7 @@ class BoxPlot {
       constants.minY = 0;
       constants.maxY = this.plotData.length - 1;
     }
-    constants.autoPlayRate = Math.min(
-      Math.ceil(constants.AUTOPLAY_DURATION / this.plotData.length),
-      constants.MAX_SPEED
-    );
+    constants.autoPlayRate = Math.ceil(constants.AUTOPLAY_DURATION / 7);
     constants.DEFAULT_SPEED = constants.autoPlayRate;
     if (constants.autoPlayRate < constants.MIN_SPEED) {
       constants.MIN_SPEED = constants.autoPlayRate;
@@ -6127,9 +6121,8 @@ class HeatMap {
     constants.maxX = this.data[0].length - 1;
     constants.minY = Math.min(...this.data.map((row) => Math.min(...row)));
     constants.maxY = Math.max(...this.data.map((row) => Math.max(...row)));
-    constants.autoPlayRate = Math.min(
-      Math.ceil(constants.AUTOPLAY_DURATION / (constants.maxX + 1)),
-      constants.MAX_SPEED
+    constants.autoPlayRate = Math.ceil(
+      constants.AUTOPLAY_DURATION / (constants.maxX + 1)
     );
     constants.DEFAULT_SPEED = constants.autoPlayRate;
     if (constants.autoPlayRate < constants.MIN_SPEED) {
@@ -6801,9 +6794,8 @@ class ScatterPlot {
       constants.minY = Math.min(...yValues);
       constants.maxY = Math.max(...yValues);
 
-      constants.autoPlayRate = Math.min(
-        Math.ceil(constants.AUTOPLAY_DURATION / (constants.maxX + 1)),
-        constants.MAX_SPEED
+      constants.autoPlayRate = Math.ceil(
+        constants.AUTOPLAY_DURATION / (constants.maxX + 1)
       );
       constants.DEFAULT_SPEED = constants.autoPlayRate;
       if (constants.autoPlayRate < constants.MIN_SPEED) {
@@ -7353,9 +7345,8 @@ class Histogram {
         }
       }
     }
-    constants.autoPlayRate = Math.min(
-      Math.ceil(constants.AUTOPLAY_DURATION / (constants.maxX + 1)),
-      constants.MAX_SPEED
+    constants.autoPlayRate = Math.ceil(
+      constants.AUTOPLAY_DURATION / this.plotData.length
     );
     constants.DEFAULT_SPEED = constants.autoPlayRate;
     if (constants.autoPlayRate < constants.MIN_SPEED) {
@@ -7376,13 +7367,13 @@ class Histogram {
           this.activeElementColor = this.activeElement.getAttribute('fill');
           // Get new color to highlight and replace fill value
           this.activeElement.setAttribute(
-              'fill',
-              constants.GetBetterColor(this.activeElementColor)
+            'fill',
+            constants.GetBetterColor(this.activeElementColor)
           );
           // Case where fill is within the style attribute
         } else if (
-            this.activeElement.hasAttribute('style') &&
-            this.activeElement.getAttribute('style').indexOf('fill') !== -1
+          this.activeElement.hasAttribute('style') &&
+          this.activeElement.getAttribute('style').indexOf('fill') !== -1
         ) {
           let styleString = this.activeElement.getAttribute('style');
           // Extract all style attributes and values
@@ -7390,7 +7381,7 @@ class Histogram {
           this.activeElementColor = styleArray[styleArray.indexOf('fill') + 1];
           // Get new color to highlight and replace fill value in style array
           styleArray[styleArray.indexOf('fill') + 1] = constants.GetBetterColor(
-              this.activeElementColor
+            this.activeElementColor
           );
           // Recreate style string and set style attribute
           styleString = constants.GetStyleStringFromArray(styleArray);
@@ -7415,8 +7406,8 @@ class Histogram {
         this.activeElement.setAttribute('fill', this.activeElementColor);
         this.activeElement = null;
       } else if (
-          this.activeElement.hasAttribute('style') &&
-          this.activeElement.getAttribute('style').indexOf('fill') !== -1
+        this.activeElement.hasAttribute('style') &&
+        this.activeElement.getAttribute('style').indexOf('fill') !== -1
       ) {
         let styleString = this.activeElement.getAttribute('style');
         let styleArray = constants.GetStyleArrayFromString(styleString);
@@ -7491,9 +7482,8 @@ class LinePlot {
       singleMaidr.data[0].y
     );
 
-    constants.autoPlayRate = Math.min(
-      Math.ceil(constants.AUTOPLAY_DURATION / (constants.maxX + 1)),
-      constants.MAX_SPEED
+    constants.autoPlayRate = Math.ceil(
+      constants.AUTOPLAY_DURATION / (constants.maxX + 1)
     );
     constants.DEFAULT_SPEED = constants.autoPlayRate;
     if (constants.autoPlayRate < constants.MIN_SPEED) {
@@ -7995,9 +7985,8 @@ class Segmented {
       }
     }
     constants.maxX = this.level.length;
-    constants.autoPlayRate = Math.min(
-      Math.ceil(constants.AUTOPLAY_DURATION / (constants.maxX + 1)),
-      constants.MAX_SPEED
+    constants.autoPlayRate = Math.ceil(
+      constants.AUTOPLAY_DURATION / this.plotData.length
     );
     constants.DEFAULT_SPEED = constants.autoPlayRate;
     if (constants.autoPlayRate < constants.MIN_SPEED) {
@@ -11205,54 +11194,51 @@ function InitMaidr(thisMaidr) {
     // actually do eventlisteners for all events
     this.SetEvents();
 
-// Set img role for chart
+    // Set img role for chart
     constants.chart.setAttribute('role', 'img');
-    
+
     // once everything is set up, announce the chart name (or title as a backup) to the user
     // setTimeout(function () {
     if ('name' in singleMaidr) {
-              
-        // Add the aria-label and title attributes to the chart
-        constants.chart.setAttribute('aria-label', announceText);
-        constants.chart.setAttribute('title', announceText);
-
-        // display.announceText(singleMaidr.name);
-      } else if (
-        'title' in singleMaidr ||
-        ('labels' in singleMaidr && 'title' in singleMaidr.labels)
-      ) {
-        let title =
-          'title' in singleMaidr ? singleMaidr.title : singleMaidr.labels.title;
-
-        // Determine whether type is multiple or single. If multiple, put commas and "and" in between. If single, just put the type.
-        let plotTypeString = Array.isArray(singleMaidr.type)
-          ? singleMaidr.type.slice(0, -1).join(', ') +
-            ' and ' +
-            singleMaidr.type.slice(-1)
-          : singleMaidr.type;
+      // Add the aria-label and title attributes to the chart
+      constants.chart.setAttribute('aria-label', announceText);
+      constants.chart.setAttribute('title', announceText);
 
-        // Prepare the instruction text for multi-layered plot
-        let multiLayerInstruction =
-          'This is a multi-layered plot. Use PageUp and PageDown to switch between layers.';
+      // display.announceText(singleMaidr.name);
+    } else if (
+      'title' in singleMaidr ||
+      ('labels' in singleMaidr && 'title' in singleMaidr.labels)
+    ) {
+      let title =
+        'title' in singleMaidr ? singleMaidr.title : singleMaidr.labels.title;
 
-        // Check if plotTypeString has multiple types
-        let isMultiLayered =
-          Array.isArray(singleMaidr.type) && singleMaidr.type.length > 1;
+      // Determine whether type is multiple or single. If multiple, put commas and "and" in between. If single, just put the type.
+      let plotTypeString = Array.isArray(singleMaidr.type)
+        ? singleMaidr.type.slice(0, -1).join(', ') +
+          ' and ' +
+          singleMaidr.type.slice(-1)
+        : singleMaidr.type;
 
-        // Construct the final announceText string
-        let announceText = `${plotTypeString} plot of ${title}: Use Arrows to navigate data points. ${
-          isMultiLayered ? multiLayerInstruction : ' '
-        }Toggle B for Braille, T for Text, S for Sonification, and R for Review mode. Use H for Help.`;
+      // Prepare the instruction text for multi-layered plot
+      let multiLayerInstruction =
+        'This is a multi-layered plot. Use PageUp and PageDown to switch between layers.';
 
-        // Add the aria-label and title attributes to the chart
-        constants.chart.setAttribute('aria-label', announceText);
-        constants.chart.setAttribute('title', announceText);
+      // Check if plotTypeString has multiple types
+      let isMultiLayered =
+        Array.isArray(singleMaidr.type) && singleMaidr.type.length > 1;
 
+      // Construct the final announceText string
+      let announceText = `${plotTypeString} plot of ${title}: Use Arrows to navigate data points. ${
+        isMultiLayered ? multiLayerInstruction : ' '
+      }Toggle B for Braille, T for Text, S for Sonification, and R for Review mode. Use H for Help.`;
 
+      // Add the aria-label and title attributes to the chart
+      constants.chart.setAttribute('aria-label', announceText);
+      constants.chart.setAttribute('title', announceText);
 
-        // Display the announcement text
-        // display.announceText(announceText);
-      }
+      // Display the announcement text
+      // display.announceText(announceText);
+    }
     // }, 100);
   }
 }
@@ -11532,7 +11518,7 @@ function CreateChartComponents() {
         constants.review_id_container +
         '" class="hidden sr-only sr-only-focusable"><input id="' +
         constants.review_id +
-        '" type="text" size="50" /></div>'
+        '" type="text" size="50" autocomplete="off" /></div>'
     );
 
   // some tweaks