maidr 2.12.0 → 2.13.0

package/dist/maidr.js

@@ -1,81 +1,421 @@
 /**
  * A class representing system vars, user config vars, and helper functions used throughout the application.
- *
  * @class
  */
 class Constants {
+  /**
+   * @namespace HtmlIds
+   */
+  /**
+   * HTML id of the div containing the chart.
+   * @type {string}
+   * @memberof HtmlIds
+   * @default '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';
-  //chart_container_class = 'chart-container'; // remove later
+  /**
+   * HTML id of the div containing the braille display input
+   * @type {string}
+   * @memberof HtmlIds
+   * @default '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';
+  /**
+   * HTML id of the div containing the info box.
+   * @type {string}
+   * @memberof HtmlIds
+   * @default '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';
+  /**
+   * 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';
+  /**
+   * HTML id of the main container div.
+   * @type {string}
+   * @memberof HtmlIds
+   * @default 'container'
+   */
   container_id = 'container';
+  /**
+   * The main project id, used throughout the application.
+   * @type {string}
+   * @memberof HtmlIds
+   * @default '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';
+  /**
+   * HTML id of the review input element.
+   * @type {string}
+   * @memberof HtmlIds
+   * @default '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}
+   * @default null
+   */
   reviewSaveSpot;
+  /**
+   * Storage setting for the braille mode when we enter review mode
+   * @type {("on"|"off")}
+   */
   reviewSaveBrailleMode;
+  /**
+   * HTML id of the actual chart element. Used to connect the application to the chart.
+   * @type {string}
+   * @memberof HtmlIds
+   */
   chartId = '';
+  /**
+   * @typedef {Object} EventListenerSetupObject
+   * @property {HTMLElement} element - The element to attach the event listener to.
+   * @property {string} event - The event type to listen for.
+   * @property {function(Event)} func - The function to run when the event is triggered.
+   */
+  /**
+   * An array of event listeners to be added to the document. This is used so that we can properly create and destroy events when needed and not cause massive memory leaks when the system is run repeatedly.
+   * @type {Array<EventListenerSetupObject>}
+   * @default []
+   */
   events = [];
+  /**
+   * An array of functions to run after the page has loaded. This is used to ensure that the page is fully loaded before running any functions that may rely on that.
+   */
   postLoadEvents = [];
 
   constructor() {}
 
-  // BTS modes initial values
-  textMode = 'verbose'; // off / terse / verbose
-  brailleMode = 'off'; // on / off
-  sonifMode = 'on'; // sep / same / off
-  reviewMode = 'off'; // on / off
+  /**
+   * @namespace BTSModes
+   */
+  /**
+   * The current text mode. Can be 'off', 'terse', or 'verbose'.
+   * @type {("off"|"terse"|"verbose")}
+   * @memberof BTSModes
+   * @default 'verbose'
+   */
+  textMode = 'verbose';
+  /**
+   * The current braille mode. Can be 'off' or 'on'.
+   * @type {("off"|"on")}
+   * @memberof BTSModes
+   * @default 'off'
+   */
+  brailleMode = 'off';
+  /**
+   * The current sonification mode. Can be 'on', 'off', 'sep' (seperated), or 'same' (all played at once).
+   * @type {("on"|"off"|"sep"|"same")}
+   * @memberof BTSModes
+   * @default 'on'
+   */
+  sonifMode = 'on';
+  /**
+   * The current review mode. Can be 'on' or 'off'.
+   * @type {("on"|"off")}
+   * @memberof BTSModes
+   * @default 'off'
+   */
+  reviewMode = 'off';
 
   // basic chart properties
+  /**
+   * @namespace BasicChartProperties
+   */
+  /**
+   * The minimum x value of the chart, set during MAIDR initialization.
+   * @type {number}
+   * @memberof BasicChartProperties
+   * @default 0
+   */
   minX = 0;
+  /**
+   * The maximum x value of the chart, set during MAIDR initialization.
+   * @type {number}
+   * @memberof BasicChartProperties
+   * @default 0
+   */
   maxX = 0;
+  /**
+   * The minimum y value of the chart, set during MAIDR initialization.
+   * @type {number}
+   * @memberof BasicChartProperties
+   * @default 0
+   */
   minY = 0;
+  /**
+   * The maximum y value of the chart, set during MAIDR initialization.
+   * @type {number}
+   * @memberof BasicChartProperties
+   * @default 0
+   */
   maxY = 0;
+
+  /**
+   * The plotID of the chart, used interchangably with chartId.
+   * @type {string}
+   * @memberof HtmlIds
+   * @default ''
+   */
   plotId = ''; // update with id in chart specific js
-  chartType = ''; // set as 'box' or whatever later in chart specific js file
+  /**
+   * The chart type, sort of a short name of the chart such as 'box', 'bar', 'line', etc.
+   * @type {string}
+   * @default ''
+   * @memberof BasicChartProperties
+   */
+  chartType = '';
+  /**
+   * The navigation orientation of the chart. 0 = row navigation (up/down), 1 = col navigation (left/right).
+   * @type {number}
+   * @default 1
+   * @memberof BasicChartProperties
+   */
   navigation = 1; // 0 = row navigation (up/down), 1 = col navigation (left/right)
 
+  /**
+   * @namespace AudioProperties
+   */
   // basic audio properties
+  /**
+   * The max frequency (Hz) of the audio tones to be played when sonifying the chart.
+   * @type {number}
+   * @default 1000
+   * @memberof AudioProperties
+   */
   MAX_FREQUENCY = 1000;
+  /**
+   * The min frequency (Hz) of the audio tones to be played when sonifying the chart.
+   * @type {number}
+   * @default 200
+   * @memberof AudioProperties
+   */
   MIN_FREQUENCY = 200;
+  /**
+   * Frequncy (Hz) to play when there is no data in a cell, plays twice quickly, recommend a low tone here.
+   * @type {number}
+   * @default 100
+   * @memberof AudioProperties
+   */
   NULL_FREQUENCY = 100;
-  combinedVolMin = 0.25; // volume for min amplitude combined tones
+  /**
+   * Minimum volume of the audio tones to be played when sonifying the chart. Expected range is 0 to 2.
+   * @type {number}
+   * @default 0.25
+   * @memberof AudioProperties
+   */
+  combinedVolMin = 0.25;
+  /**
+   * Maximum volume of the audio tones to be played when sonifying the chart. Expected range is 0 to 2.
+   * @type {number}
+   * @default 1.25
+   * @memberof AudioProperties
+   */
   combinedVolMax = 1.25; // volume for max amplitude combined tones
 
   // autoplay speed
+  /**
+   * The maximum speed of the autoplay feature, in milliseconds per tone.
+   * @type {number}
+   * @default 500
+   * @memberof AudioProperties
+   */
   MAX_SPEED = 500;
+  /**
+   * The minimum speed of the autoplay feature, in milliseconds per tone.
+   * @type {number}
+   * @default 50
+   * @memberof AudioProperties
+   */
   MIN_SPEED = 50; // 50;
+  /**
+   * The default speed of the autoplay feature, in milliseconds per tone.
+   * @type {number}
+   * @default 250
+   * @memberof AudioProperties
+   */
   DEFAULT_SPEED = 250;
+  /**
+   * The interval between tones in the autoplay feature, in milliseconds.
+   * @type {number}
+   * @default 20
+   * @memberof AudioProperties
+   */
   INTERVAL = 20;
+  /**
+   * The duration of the autoplay feature, in milliseconds.
+   * @type {number}
+   * @default 5000
+   * @memberof AudioProperties
+   */
   AUTOPLAY_DURATION = 5000; // 5s
 
   // user settings
+  /**
+   * @namespace UserSettings
+   */
+  /**
+   * The volume of the audio tones to be played when sonifying the chart. Expected range is 0 to 1.
+   * @type {number}
+   * @default 0.5
+   * @memberof UserSettings
+   */
   vol = 0.5;
+  /**
+   * Max volume, used only to differentiate points in a scatterplot.
+   * @type {number}
+   * @default 30
+   * @memberof UserSettings
+   */
   MAX_VOL = 30;
-  // autoPlayRate = this.DEFAULT_SPEED; // ms per tone
-  autoPlayRate = this.DEFAULT_SPEED; // ms per tone
+  /**
+   * The speed of the autoplay feature, in milliseconds per tone.
+   * @type {number}
+   * @default 250
+   * @memberof UserSettings
+   */
+  autoPlayRate = this.DEFAULT_SPEED;
+  /**
+   * The color of the selected element in the chart in hex format.
+   * @type {string}
+   * @default '#03C809' (green)
+   * @memberof UserSettings
+   */
   colorSelected = '#03C809';
-  brailleDisplayLength = 32; // num characters in user's braille display.  40 is common length for desktop / mobile applications
+  /**
+   * 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}
+   * @default 32
+   * @memberof UserSettings
+   */
+  brailleDisplayLength = 32;
 
   // advanced user settings
-  showRect = 1; // true / false
+  /**
+   * @namespace AdvancedUserSettings
+   */
+  /**
+   * Whether or not to show the outline of the selected element in the chart.
+   * @type {boolean}
+   * @default true
+   * @memberof AdvancedUserSettings
+   */
+  showRect = 1;
+  /**
+   * Whether or not the chart even has a rectangle to show.
+   * @type {boolean}
+   * @default true
+   * @memberof AdvancedUserSettings
+   */
   hasRect = 1; // true / false
-  hasSmooth = 1; // true / false (for smooth line points)
+  /**
+   * Whether or not the chart has smooth line points.
+   * @type {boolean}
+   * @default true
+   * @memberof AdvancedUserSettings
+   */
+  hasSmooth = 1;
+  /**
+   * Standard tone duration in seconds.
+   * @type {number}
+   * @default 0.3
+   * @memberof AdvancedUserSettings
+   */
   duration = 0.3;
+  /**
+   * Outlier tone duration in seconds.
+   * @type {number}
+   * @default 0.06
+   * @memberof AdvancedUserSettings
+   */
   outlierDuration = 0.06;
-  autoPlayOutlierRate = 50; // ms per tone
-  autoPlayPointsRate = 50; // time between tones in a run
+  /**
+   * The rate at which to play outlier tones in the autoplay feature, in milliseconds per tone.
+   * @type {number}
+   * @default 50
+   * @memberof AdvancedUserSettings
+   */
+  autoPlayOutlierRate = 50;
+  /**
+   * The rate at which to play points in the autoplay feature, in milliseconds per tone.
+   * @type {number}
+   * @default 50
+   * @memberof AdvancedUserSettings
+   */
+  autoPlayPointsRate = 50;
+  /**
+   * The rate at which to play lines in the autoplay feature, in milliseconds per tone. Deprecated.
+   * @type {number}
+   * @default 50
+   * @memberof AdvancedUserSettings
+   */
   colorUnselected = '#595959'; // deprecated, todo: find all instances replace with storing old color method
-  canTrack = 1; // 0 / 1, can we track user data
-  isTracking = 1; // 0 / 1, is tracking currently on or off
+  /**
+   * Whether or not we're logging user data. This is off by default, but is used for research purposes.
+   * @type {boolean}
+   * @default 0
+   * @memberof AdvancedUserSettings
+   */
+  canTrack = 0; // 0 / 1, can we track user data
+  /**
+   * Whether or not we're currently tracking user data.
+   * @type {boolean}
+   * @default 1
+   * @memberof AdvancedUserSettings
+   */
+  isTracking = 1;
+  /**
+   * How are we representing braille? like, is it 1:1 with the chart, or do we do some compression and try to represent as accuratly as we can? Not currently in use.
+   * @type {boolean}
+   * @default false
+   * @memberof AdvancedUserSettings
+   */
   visualBraille = false; // do we want to represent braille based on what's visually there or actually there. Like if we have 2 outliers with the same position, do we show 1 (visualBraille true) or 2 (false)
-  globalMinMax = true;
-  ariaMode = 'assertive'; // assertive (default) / polite
+  /**
+   * The aria mode used throughout the application. Can be 'assertive' or 'polite'.
+   * @type {("assertive"|"polite")}
+   * @default 'assertive'
+   * @memberof AdvancedUserSettings
+   */
+  ariaMode = 'assertive';
 
+  /**
+   * Full list of user settings, used internally to save and load settings.
+   * @type {string[]}
+   */
   userSettingsKeys = [
     'vol',
     'autoPlayRate',
@@ -97,49 +437,206 @@ class Constants {
   ];
 
   // LLM settings
-  openAIAuthKey = null; // OpenAI authentication key, set in menu
-  geminiAuthKey = null; // Gemini authentication key, set in menu
+  /**
+   * @namespace LLMSettings
+   */
+  /**
+   * The OpenAI authentication key, set in the menu.
+   * @type {string}
+   * @default null
+   * @memberof LLMSettings
+   */
+  openAIAuthKey = null;
+  /**
+   * The Gemini authentication key, set in the menu.
+   * @type {string}
+   * @default null
+   * @memberof LLMSettings
+   */
+  geminiAuthKey = null;
+  /**
+   * The maximum number of tokens to send to the LLM, only used if the specific LLM has that feature.
+   * @type {number}
+   * @default 1000
+   * @memberof LLMSettings
+   */
   LLMmaxResponseTokens = 1000; // max tokens to send to LLM, 20 for testing, 1000 ish for real
+  /**
+   * Whether or not to play the LLM waiting sound. It's a 1/sec beep.
+   * @type {boolean}
+   * @default true
+   * @memberof LLMSettings
+   */
   playLLMWaitingSound = true;
+  /**
+   * The detail level of the LLM. Can be 'low' or 'high'. Only used if the specific LLM has that feature.
+   * @type {"low"|"high"}
+   * @default 'high'
+   * @memberof LLMSettings
+   */
   LLMDetail = 'high'; // low (default for testing, like 100 tokens) / high (default for real, like 1000 tokens)
-  LLMModel = 'openai'; // openai (default) / gemini
+  /**
+   * 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';
+  /**
+   * The default system message for the LLM. Helps the LLM understand the context of the chart and its role.
+   * @type {string}
+   * @default 'You are a helpful assistant describing the chart to a blind person. '
+   * @memberof LLMSettings
+   */
   LLMSystemMessage =
     '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
+  /**
+   * Custom skill level, used if the user selects 'other' as their skill level.
+   * @type {string}
+   * @default ''
+   * @memberof LLMSettings
+   */
   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}
+   * @default true
+   * @memberof LLMSettings
+   */
   autoInitLLM = true; // auto initialize LLM on page load
+  /**
+   * An internal variable used to store the current full verbose text, helps gives the LLM context on what's going on in the chart.
+   * @type {string}
+   * @default ''
+   * @memberof LLMSettings
+   */
   verboseText = '';
+  /**
+   * An internal variable used to turn the waiting beep on and off.
+   * @type {number}
+   * @default 0
+   * @memberof LLMSettings
+   */
   waitingQueue = 0;
 
   // user controls (not exposed to menu, with shortcuts usually)
+  /**
+   * Whether or not to show the main display.
+   * @type {boolean}
+   * @default true
+   * @memberof AdvancedUserSettings
+   */
   showDisplay = 1; // true / false
+  /**
+   * Whether or not to show the display in braille.
+   * @type {boolean}
+   * @default true
+   * @memberof AdvancedUserSettings
+   */
   showDisplayInBraille = 1; // true / false
+  /**
+   * Whether or not to show the display in autoplay.
+   * @type {boolean}
+   * @default false
+   * @memberof AdvancedUserSettings
+   */
   showDisplayInAutoplay = 0; // true / false
+  /**
+   * The interval for the outlier. This might not be used anymore.
+   * @type {number}
+   * @default null
+   * @memberof AdvancedUserSettings
+   */
   outlierInterval = null;
 
   // platform controls
+  /**
+   * @namespace PlatformControls
+   */
+  /**
+   * Whether or not the user is on a Mac. Set automatically.
+   * @type {boolean}
+   * @memberof PlatformControls
+   */
   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';
+  /**
+   * 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';
+  /**
+   * 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';
+  /**
+   * 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';
 
   // internal controls
+  // todo: are these even used? Sean doesn't think so (May 2024)
   keypressInterval = 2000; // ms or 2s
   tabMovement = null;
 
   // debug stuff
+  /**
+   * @namespace DebugSettings
+   */
+  /**
+   * The debug level of the application. 0 = no console output, 1 = some console, 2 = more console, etc.
+   * @type {number}
+   * @default 3
+   * @memberof DebugSettings
+   */
   debugLevel = 3; // 0 = no console output, 1 = some console, 2 = more console, etc
+  /**
+   * Whether or not to display the end chime. This is not currently implemented as the end chime is not yet implemented.
+   * @type {boolean}
+   * @default false
+   * @memberof DebugSettings
+   */
   canPlayEndChime = false; //
+  /**
+   * Whether or not the LLM is connected, or generates a fake response for testing.
+   * @type {boolean}
+   * @default false
+   * @memberof DebugSettings
+   */
   manualData = true; // pull from manual data like chart2music (true), or do the old method where we pull from the chart (false)
 
+  /**
+   * Stops the autoplay if it is currently running.
+   *
+   * @return {void}
+   */
   KillAutoplay() {
-    if (this.autoplayId) {
-      clearInterval(this.autoplayId);
-      this.autoplayId = null;
-    }
+    clearInterval(this.autoplayId);
+    this.autoplayId = null;
   }
 
+  /**
+   * Stops the autoplay if it is currently running.
+   *
+   * @return {void}
+   */
   KillSepPlay() {
     if (this.sepPlayId) {
       clearInterval(this.sepPlayId);
@@ -147,18 +644,33 @@ class Constants {
     }
   }
 
+  /**
+   * Speed up the autoplay rate by the specified interval.
+   *
+   * @return {void}
+   */
   SpeedUp() {
     if (constants.autoPlayRate - this.INTERVAL > this.MIN_SPEED) {
       constants.autoPlayRate -= this.INTERVAL;
     }
   }
 
+  /**
+   * Speed down the autoplay rate by the specified interval.
+   *
+   * @return {void}
+   */
   SpeedDown() {
     if (constants.autoPlayRate + this.INTERVAL <= this.MAX_SPEED) {
       constants.autoPlayRate += this.INTERVAL;
     }
   }
 
+  /**
+   * Reset the autoplay rate to the default.
+   *
+   * @return {void}
+   */
   SpeedReset() {
     constants.autoPlayRate = constants.DEFAULT_SPEED;
   }
@@ -167,7 +679,6 @@ class Constants {
    * Function to convert hexadecimal color to string formatted rgb() functional notation.
    * @param hexColorString - hexadecimal color (e.g., "#595959").
    * @returns {string} - rgb() functional notation string (e.g., "rgb(100,100,100)").
-   * @constructor
    */
   ConvertHexToRGBString(hexColorString) {
     return (
@@ -185,7 +696,6 @@ class Constants {
    * Function to convert an rgb() functional notation string to hexadecimal color.
    * @param rgbColorString - color in rgb() functional notation (e.g., "rgb(100,100,100)").
    * @returns {string} - hexadecimal color (e.g., "#595959").
-   * @constructor
    */
   ConvertRGBStringToHex(rgbColorString) {
     let rgb = rgbColorString.replace(/[^\d,]/g, '').split(',');
@@ -197,6 +707,12 @@ class Constants {
     );
   }
 
+  /**
+   * Inverts an RGB color by subtracting each color component from 255.
+   *
+   * @param {string} color - The RGB color to invert, in the format "rgb(r,g,b)".
+   * @return {string} The inverted RGB color, in the format "rgb(r,g,b)".
+   */
   ColorInvert(color) {
     // invert an rgb color
     let rgb = color.replace(/[^\d,]/g, '').split(',');
@@ -205,10 +721,13 @@ class Constants {
     let b = 255 - rgb[2];
     return 'rgb(' + r + ',' + g + ',' + b + ')';
   }
+
+  /**
+   * Determines the best contrast color for the given color, by inverting it if necessary, but if it's just a shade of gray, default to this.colorSelected
+   * @param {string} oldColor - The color to make better
+   * @returns {string} The better color
+   */
   GetBetterColor(oldColor) {
-    // get a highly contrasting color against the current
-    // method: choose an inverted color, but if it's just a shade of gray, default to this.colorSelected
-    // Convert hex color to RGB color string if needed
     if (oldColor.indexOf('#') !== -1) {
       oldColor = this.ConvertHexToRGBString(oldColor);
     }
@@ -232,7 +751,6 @@ class Constants {
    * Function to parse a string containing CSS styles and return an array of strings containing CSS style attributes and values.
    * @param styleString - a string containing CSS styles in inline format.
    * @returns {string[]} - an array of strings containing CSS style attributes and values.
-   * @constructor
    */
   GetStyleArrayFromString(styleString) {
     // Get an array of CSS style attributes and values from a style string
@@ -243,7 +761,6 @@ class Constants {
    * Function to parse an array of strings containing CSS style attributes and values and return a string containing CSS styles.
    * @param styleArray - an array of strings containing CSS style attributes and values.
    * @returns {string} - a string containing the CSS styles.
-   * @constructor
    */
   GetStyleStringFromArray(styleArray) {
     // Get CSS style string from an array of style attributes and values
@@ -264,15 +781,15 @@ class Constants {
 }
 
 /**
- * Resources class contains properties and methods related to language, knowledge level, and strings.
+ * Resources class to hold localization strings
  */
 class Resources {
   constructor() {}
 
-  language = 'en'; // 2 char lang code
+  language = 'en'; // Current language, 2 char lang code
   knowledgeLevel = 'basic'; // basic, intermediate, expert
 
-  // these strings run on getters, which pull in language, knowledgeLevel, chart, and actual requested string
+  // language strings, per 2 char language code
   strings = {
     en: {
       basic: {
@@ -313,7 +830,7 @@ class Resources {
 }
 
 /**
- * Represents a menu object with various settings and keyboard shortcuts.
+ * Represents a menu class that contains the settings menu
  */
 class Menu {
   whereWasMyFocus = null;
@@ -323,6 +840,7 @@ class Menu {
     this.LoadDataFromLocalStorage();
   }
 
+  // initial html for the menu
   menuHtml = `
         <div id="menu" class="modal hidden" role="dialog" tabindex="-1">
             <div class="modal-dialog" role="document" tabindex="0">
@@ -501,6 +1019,8 @@ class Menu {
   /**
    * Creates a menu element and sets up event listeners for opening and closing the menu,
    * and saving and loading data from local storage.
+   *
+   * @returns {void}
    */
   CreateMenu() {
     // menu element creation
@@ -648,10 +1168,7 @@ class Menu {
 
   /**
    * Destroys the menu element and its backdrop.
-   * @function
-   * @name Destroy
-   * @memberof module:constants
-   * @returns {void}
+   * @return {void}
    */
   Destroy() {
     // menu element destruction
@@ -666,8 +1183,9 @@ class Menu {
   }
 
   /**
-   * Toggles the menu on and off.
+   * Toggles the menu on and off, toggling the css 'hidden' class.
    * @param {boolean} [onoff=false] - Whether to turn the menu on or off. Defaults to false (close).
+   * @return {void}
    */
   Toggle(onoff = false) {
     if (typeof onoff == 'undefined') {
@@ -701,7 +1219,8 @@ class Menu {
   }
 
   /**
-   * Populates the form fields in the help menu with the values from the constants object.
+   * Populates the form fields in the help menu with stored values in constants, which pulls from localStorage
+   * @return {void}
    */
   PopulateData() {
     document.getElementById('vol').value = constants.vol;
@@ -791,7 +1310,8 @@ class Menu {
   }
 
   /**
-   * Saves the data from the HTML elements into the constants object.
+   * Saves the data from the HTML elements into the constants object, which is later stored in localStorage
+   * @return {void}
    */
   SaveData() {
     let shouldReset = this.ShouldLLMReset();
@@ -836,11 +1356,7 @@ class Menu {
   }
 
   /**
-   * Updates various html elements and attributes.
-   * Typically used to do things like update the aria-live attributes
-   *
-   * @function
-   * @memberof constants
+   * Sets the aria attributes on the HTML elements in the menu
    * @returns {void}
    */
   UpdateHtml() {
@@ -854,7 +1370,8 @@ class Menu {
   }
 
   /**
-   * Notifies the user that the LLM will be reset.
+   * Adds a textual notification near the submit button to tell the user that the LLM history will be reset
+   * @return {void}
    */
   NotifyOfLLMReset() {
     let html =
@@ -876,8 +1393,9 @@ class Menu {
       );
   }
   /**
-   * Handles changes to the LLM model and multi-modal settings.
-   * We reset if we change the LLM model, multi settings, or skill level.
+   * Checks whether or not we should reset the LLM history.
+   * Criteria: if we've changed the LLM model, multi settings, preferences, or skill level.
+   * @return {boolean} - if we're resetting or not.
    */
   ShouldLLMReset() {
     let shouldReset = false;
@@ -914,9 +1432,7 @@ class Menu {
   }
 
   /**
-   * Saves all data in Menu to local storage.
-   * @function
-   * @memberof constants
+   * Saves all data settings data in local storage. Specifially this saves data in constants variables to settings_data localStorage
    * @returns {void}
    */
   SaveDataToLocalStorage() {
@@ -938,7 +1454,7 @@ class Menu {
     }
   }
   /**
-   * Loads data from local storage and updates the constants object with the retrieved values, to be loaded into the menu
+   * Loads data from 'settings_data' localStorage, and updates contants variables
    */
   LoadDataFromLocalStorage() {
     let data = JSON.parse(localStorage.getItem('settings_data'));
@@ -954,9 +1470,7 @@ class Menu {
 }
 
 /**
- * Creates an html modal with a basic text input,
- * and hooks to send info to an LLM
- * @class
+ * This class creates the chat LLM window, handles events, and handles all of the LLM calls
  */
 class ChatLLM {
   constructor() {
@@ -1031,6 +1545,7 @@ class ChatLLM {
 
   /**
    * Sets events for the chatLLM modal
+   * @return {void}
    */
   SetEvents() {
     // chatLLM close events
@@ -2449,7 +2964,7 @@ class Tracker {
 }
 
 /**
- * Represents a Review object.
+ * The Review class. Review mode is basically an input that users can toggle to that holds the last text output. Very useful for screen reader users who want to copy what was just said.
  * @class
  */
 class Review {
@@ -2482,7 +2997,8 @@ class Review {
 }
 
 /**
- * Represents a class for logging errors.
+ * Represents a class for more easily sending custom errors to the console.
+ * @class
  */
 class LogError {
   constructor() {}
@@ -7615,11 +8131,13 @@ class Control {
           if (e.key == 'x') {
             // X: x label
             let xlabel = '';
-            if (constants.chartType == 'bar' || singleMaidr.type == 'line') {
+            if (singleMaidr.type == 'bar' || singleMaidr.type == 'line') {
               xlabel = plot.plotLegend.x;
+            } else if (singleMaidr.type == 'hist') {
+              xlabel = plot.legendX;
             } else if (
-              constants.chartType == 'heat' ||
-              constants.chartType == 'box' ||
+              singleMaidr.type == 'heat' ||
+              singleMaidr.type == 'box' ||
               singleMaidr.type == 'point' ||
               singleMaidr.type.includes('point')
             ) {
@@ -7630,11 +8148,13 @@ class Control {
           } else if (e.key == 'y') {
             // Y: y label
             let ylabel = '';
-            if (constants.chartType == 'bar' || singleMaidr.type == 'line') {
+            if (singleMaidr.type == 'bar' || singleMaidr.type == 'line') {
               ylabel = plot.plotLegend.y;
+            } else if (singleMaidr.type == 'hist') {
+              ylabel = plot.legendY;
             } else if (
-              constants.chartType == 'heat' ||
-              constants.chartType == 'box' ||
+              singleMaidr.type == 'heat' ||
+              singleMaidr.type == 'box' ||
               singleMaidr.type == 'point' ||
               singleMaidr.type == 'line' ||
               singleMaidr.type.includes('point')
@@ -7691,6 +8211,7 @@ class Control {
       let lastPlayed = '';
 
       // testing for braille cursor routing
+      /*
       document.addEventListener('selectionchange', function (e) {
         // notes:
         // this basically works
@@ -7717,6 +8238,7 @@ class Control {
           audio.playEnd();
         }
       });
+      */
 
       // control eventlisteners
       constants.events.push([