Let's break down the code that you've shown, step by...

Let's break down the code that you've shown, step by step, to understand what it's doing currently and how we can modify it for your desired behavior:

What the Code Currently Does:

1. Create a Set for Unique Stores:

   const storeSet = new Set();
   

   This initializes a Set to hold unique store names extracted from the series data.

2. Iterate Through Data Series:

   context.panel.data.series.forEach((seriesObj) => {
     storeSet.add(seriesObj.meta.custom.labels["metric.label.store"]);
     console.log(seriesObj.meta.custom.labels["metric.label.store"]);
   });
   

   • It iterates through context.panel.data.series and extracts the value associated with the metric.label.store key from each seriesObj's labels object.
   • Each value is added to the storeSet (a Set ensures only unique values are kept).
   • The value being added to the Set is printed to the console.

3. Convert the Set to an Array:

   const storesArray = Array.from(storeSet);
   

   The Set values are converted into a standard array (storesArray), which might be more flexible for further use.

4. Attach a Mouseover Event to the Chart:

   context.panel.chart.on("mouseover", (params) => {
     context.grafana.locationService.partial({ "var-query0": storesArray }, true);
   });
   

   • An event listener is added to the context.panel.chart object, listening for mouseover events. When a hover occurs, the code does the following:
     • Updates a Grafana variable named var-query0 with the current value of storesArray.
     • Uses the locationService.partial() method to apply this change dynamically.

5. Return a Title Configuration:

   return {
     'title': { "text": "update" }
   };
   

   The code returns a new configuration object, specifically for the panel's title.

How to Modify the Code for Button-Triggered Updates:

To make the variables (storesArray) update only when a button is clicked, instead of on hover, you need to:

1. Replace the mouseover event listener with a click event handler on a button.
2. Create a custom button within the panel.

Here's how you can rewrite the code:

Updated Code:

// Create a Set for unique stores
const storeSet = new Set();

// Function to update stores
function updateStores() {
  // Clear the existing set before updating
  storeSet.clear();

  // Iterate through data series and populate the set
  context.panel.data.series.forEach((seriesObj) => {
    storeSet.add(seriesObj.meta.custom.labels["metric.label.store"]);
    console.log(seriesObj.meta.custom.labels["metric.label.store"]);
  });

  // Convert the set to an array
  const storesArray = Array.from(storeSet);

  // Update the Grafana variable with the updated values
  context.grafana.locationService.partial({ "var-query0": storesArray }, true);
}

// Create a button for triggering the update
const button = document.createElement("button");
button.innerText = "Update Stores";
button.style.padding = "10px";
button.style.cursor = "pointer";

// Attach click event listener to the button
button.addEventListener("click", () => {
  updateStores(); // Call the updateStores function when the button is clicked
});

// Append the button to the panel DOM
if (context.panel && context.panel.chart) {
  const panelContainer = context.panel.chart.getContainer(); // Assuming `getContainer()` gets the panel DOM element
  panelContainer.appendChild(button);
}

// Return the title configuration
return {
  'title': { "text": "Click to Update Stores" }
};

Explanation of Changes:

1. The updateStores Function:

   • This function encapsulates all the logic needed to process context.panel.data.series, extract unique stores into storeSet, convert it to an array, and update the Grafana variable.

2. Creating and Styling a Button:

   • A button is dynamically created using document.createElement.
   • innerText is set to "Update Stores", and basic styling is added for padding and cursor behavior.

3. Attaching the Button to the Panel:

   • The button is appended to the container of the panel chart. This assumes that context.panel.chart.getContainer() can retrieve the DOM element for the panel.

4. Button Click Event:

   • The updateStores function is called only when the button is clicked, ensuring updates happen exclusively on button click.

5. Title Update:

   • The panel title is updated to indicate the user can click to update stores.

Result:

With these changes, the store list and Grafana variable (var-query0) will only update when the "Update Stores" button is clicked, ensuring dynamic updates are triggered explicitly and not on hover. This is particularly useful for better control over when updates occur.