maidr 2.25.0 → 2.26.0

package/dist/maidr.js

@@ -1222,7 +1222,7 @@ class Menu {
           document
             .getElementById('gemini_multi_container')
             .classList.add('hidden');
-          document.getElementById('openai_multi').checked = true;
+          document.getElementById('openai_multi').checked = true; // refactor note: this hidden checkbox stuff is stupid and should be removed. We're sorta replacing with the visible checkboxes.
           document.getElementById('gemini_multi').checked = false;
         } else if (e.target.value == 'gemini') {
           document
@@ -1492,7 +1492,7 @@ class Menu {
     }
 
     if (constants.emailAuthKey && constants.clientToken) {
-      console.log('email auth key and client token found');
+      //console.log('email auth key and client token found');
       for (let model in constants.LLMModels) {
         document.getElementById(`LLM_model_${model}`).checked = true;
       }
@@ -1566,8 +1566,12 @@ class Menu {
     });
 
     constants.LLMPreferences = document.getElementById('LLM_preferences').value;
-    constants.LLMOpenAiMulti = document.getElementById('openai_multi').checked;
-    constants.LLMGeminiMulti = document.getElementById('gemini_multi').checked;
+    constants.LLMOpenAiMulti =
+      document.getElementById('LLM_model_openai').checked;
+    constants.LLMGeminiMulti =
+      document.getElementById('LLM_model_gemini').checked;
+    constants.LLMClaudeMulti =
+      document.getElementById('LLM_model_claude').checked;
     constants.autoInitLLM = document.getElementById('init_llm_on_load').checked;
 
     // aria
@@ -1797,6 +1801,7 @@ class ChatLLM {
     this.firstMulti = true;
     this.firstOpen = true;
     this.shown = false;
+    this.awaitingNumChats = 0;
     this.CreateComponent();
     this.SetEvents();
     if (constants.autoInitLLM) {
@@ -2005,7 +2010,7 @@ class ChatLLM {
    *
    * @param {Event|undefined} e - The event that triggered the copy action. If undefined, the entire chat history is copied.
    */
-  CopyChatHistory(e) {
+  CopyChatHistory(e, actuallyCopy = true) {
     let text = '';
     let notificationText = '';
     if (typeof e == 'undefined') {
@@ -2067,10 +2072,12 @@ class ChatLLM {
         }
       }
 
-      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);
+      if (actuallyCopy) {
+        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);
+        }
       }
       return markdown;
     }
@@ -2204,7 +2211,7 @@ class ChatLLM {
     let inprogressFreq = freq * 2;
 
     if (onoff) {
-      // if turning on, clear old intervals and timeouts
+      // if turning on clear old intervals and timeouts
       if (constants.waitingInterval) {
         // destroy old waiting sound
         clearInterval(constants.waitingInterval);
@@ -2255,6 +2262,9 @@ class ChatLLM {
         if (constants.LLMOpenAiMulti) {
           constants.waitingQueue++;
         }
+        if (constants.LLMClaudeMulti) {
+          constants.waitingQueue++;
+        }
       }
     }
   }
@@ -2335,7 +2345,7 @@ class ChatLLM {
 
     // if we're tracking, log the data
     if (constants.canTrack) {
-      let chatHist = chatLLM.CopyChatHistory();
+      let chatHist = chatLLM.CopyChatHistory(undefined, false);
       let data = {};
       data.chatHistory = chatHist;
       if (constants.emailAuthKey) data.username = constants.emailAuthKey;
@@ -2721,7 +2731,7 @@ class ChatLLM {
       const API_KEY = constants.geminiAuthKey;
       const genAI = new GoogleGenerativeAI(API_KEY);
       const model = genAI.getGenerativeModel({
-        model: 'gemini-1.5-pro-latest',
+        model: 'gemini-2.0-flash-exp',
       }); // old model was 'gemini-pro-vision'
 
       // Create the prompt
@@ -3256,7 +3266,7 @@ class Tracker {
    * @param {Object} data - The data to be saved.
    */
   async SaveTrackerData(data) {
-    console.log('about to save data', data);
+    //console.log('about to save data', data);
     if (this.isLocal) {
       localStorage.setItem(constants.project_id, JSON.stringify(data));
     } else {
@@ -3275,7 +3285,7 @@ class Tracker {
         }
 
         const result = await response.json();
-        console.log('Data saved successfully:', result);
+        //console.log('Data saved successfully:', result);
         return result;
       } catch (error) {
         console.error('Error saving data:', error);
@@ -8605,7 +8615,8 @@ class Control {
     this.InitChartClass();
     this.SetBTSControls();
     this.SetPrefixControls();
-    this.SetControls();
+    this.SetKeyControls();
+    this.SetMouseControls();
   }
 
   /**
@@ -8868,6 +8879,197 @@ class Control {
     ]);
   }
 
+  /**
+   * Sets up event listeners for mouse controls
+   * If you're on a chart, and within 24px of a point, set your position there and update the chart
+   * If you're near multiple, figure it out.
+   * This requires the selector to be set in the maidr object.
+   * @returns {void}
+   */
+  SetMouseControls() {
+    // to set this up, we run the event at the document level, and then deal with what we've hovered on in individual chart types
+    // for bar hist stacked, we check if we've hovered on an element of the selector
+    // for box line, we use coordinates and find the closest point
+    if ('selector' in singleMaidr) {
+      let selectorElems = document.querySelectorAll(singleMaidr.selector);
+      if (selectorElems.length > 0) {
+        constants.events.push([
+          document,
+          'mousemove',
+          function (e) {
+            if (constants.chartType == 'bar' || constants.chartType == 'hist') {
+              // check if we've hit a selector
+              if (e.target.matches(singleMaidr.selector)) {
+                let index = Array.from(selectorElems).indexOf(e.target);
+                if (index != position.x) {
+                  position.x = index;
+                  control.UpdateAll();
+                }
+              }
+            } else if (constants.chartType == 'box') {
+              // here follows a nasty function where we use bounding boxes from the highlight feature compare to our hover coords
+              let closestDistance = Infinity;
+              let closestIndex = -1;
+              let clickX = e.clientX;
+              let clickY = e.clientY;
+              let expandedBox = null;
+              let padding = 15;
+              const chartBounds = constants.chart.getBoundingClientRect();
+
+              // Iterate through plot.plotBounds using regular loops
+              for (
+                let groupIndex = 0;
+                groupIndex < plot.plotBounds.length;
+                groupIndex++
+              ) {
+                const group = plot.plotBounds[groupIndex];
+
+                for (let boxIndex = 0; boxIndex < group.length; boxIndex++) {
+                  const box = group[boxIndex];
+
+                  if (
+                    box.top === undefined ||
+                    box.left === undefined ||
+                    box.bottom === undefined ||
+                    box.right === undefined
+                  ) {
+                    continue; // Skip invalid boxes
+                  }
+                  // Expand the bounding box by 15px
+                  let expandedBoxAdjustedCoords = {
+                    x: box.left - padding - chartBounds.left,
+                    y: box.top - padding - chartBounds.top,
+                    width: box.width + padding * 2,
+                    height: box.height + padding * 2,
+                  };
+                  expandedBox = {
+                    top: expandedBoxAdjustedCoords.y,
+                    left: expandedBoxAdjustedCoords.x,
+                    bottom:
+                      expandedBoxAdjustedCoords.y +
+                      expandedBoxAdjustedCoords.height,
+                    right:
+                      expandedBoxAdjustedCoords.x +
+                      expandedBoxAdjustedCoords.width,
+                  };
+                  // Calculate the center of the bounding box
+                  const centerX = (expandedBox.left + expandedBox.right) / 2;
+                  const centerY = (expandedBox.top + expandedBox.bottom) / 2;
+
+                  // Calculate the Euclidean distance
+                  const distance = Math.sqrt(
+                    (centerX - clickX) ** 2 + (centerY - clickY) ** 2
+                  );
+
+                  //console.log( 'clicked coords: (', clickX, ', ', clickY, ') | box coords: (', centerX, ', ', centerY, ') | distance: ', distance, 'array index: [', groupIndex, ',', boxIndex, ']');
+
+                  // Update the closest box if this one is nearer, and is inside the bounding box
+                  if (distance < closestDistance) {
+                    if (
+                      clickX >= expandedBox.left &&
+                      clickX <= expandedBox.right &&
+                      clickY >= expandedBox.top &&
+                      clickY <= expandedBox.bottom
+                    ) {
+                      closestDistance = distance;
+                      closestIndex = [groupIndex, boxIndex];
+                    }
+                  }
+                }
+              }
+
+              // did we get one?
+              if (closestDistance < Infinity) {
+                //console.log('found a box, index', closestIndex);
+                if (constants.plotOrientation == 'horz') {
+                  if (
+                    position.x != closestIndex[0] ||
+                    position.y != closestIndex[1]
+                  ) {
+                    position.x = closestIndex[1];
+                    position.y = closestIndex[0];
+                    control.UpdateAll();
+                  }
+                } else {
+                  if (
+                    position.x != closestIndex[0] ||
+                    position.y != closestIndex[1]
+                  ) {
+                    position.x = closestIndex[0];
+                    position.y = closestIndex[1];
+                    control.UpdateAll();
+                  }
+                }
+              }
+            } else if (constants.chartType == 'heat') {
+              // check if we've hit a selector
+              let index = Array.from(selectorElems).indexOf(e.target);
+              if (
+                position.x != Math.floor(index / plot.num_rows) ||
+                position.y != plot.num_rows - (index % plot.num_rows) - 1
+              ) {
+                position.x = Math.floor(index / plot.num_rows);
+                position.y = plot.num_rows - (index % plot.num_rows) - 1;
+                control.UpdateAll();
+              }
+            } else if (constants.chartType == 'line') {
+              // compare coordinates and get the point we're closest to, if we're within 24px
+              let chartBounds = constants.chart.getBoundingClientRect();
+              let scaleX =
+                constants.chart.viewBox.baseVal.width / chartBounds.width;
+              let scaleY =
+                constants.chart.viewBox.baseVal.height / chartBounds.height;
+
+              let closestDistance = Infinity;
+              let closestIndex = -1;
+              let clickX = (e.clientX - chartBounds.left) * scaleX;
+              let clickY = (e.clientY - chartBounds.top) * scaleY;
+              let pointX, pointY;
+              for (let i = 0; i < plot.chartLineX.length; i++) {
+                pointX = plot.chartLineX[i] - chartBounds.left;
+                pointY = plot.chartLineY[i] - chartBounds.top;
+                let distance = Math.sqrt(
+                  (pointX - clickX) ** 2 + (pointY - clickY) ** 2
+                );
+                //console.log( 'distance', distance, 'given clicked coords (', clickX, ', ', clickY, ') and target coords (', pointX, ', ', pointY, ')');
+                if (distance < closestDistance) {
+                  closestDistance = distance;
+                  closestIndex = i;
+                }
+              }
+              if (closestDistance < 24) {
+                if (position.x != closestIndex) {
+                  position.x = closestIndex;
+                  control.UpdateAll();
+                }
+              }
+            } else if (
+              constants.chartType == 'stacked_bar' ||
+              constants.chartType == 'stacked_normalized_bar' ||
+              constants.chartType == 'dodged_bar'
+            ) {
+              // check if we've hit a selector
+              if (e.target.matches(singleMaidr.selector)) {
+                outerLoop: for (let i = 0; i < plot.elements.length; i++) {
+                  for (let j = 0; j < plot.elements[i].length; j++) {
+                    if (plot.elements[i][j] == e.target) {
+                      if (position.x != i || position.y != j) {
+                        position.x = i;
+                        position.y = j;
+                        control.UpdateAll();
+                      }
+                      break outerLoop;
+                    }
+                  }
+                }
+              }
+            }
+          },
+        ]);
+      }
+    }
+  }
+
   /**
    * Sets up event listeners for main controls
    *  - Arrow keys: basic motion
@@ -8880,7 +9082,7 @@ class Control {
    *
    * @returns {void}
    */
-  async SetControls() {
+  async SetKeyControls() {
     constants.events.push([
       document,
       'keydown',