Is there an event that fires only when dashboard variables are updated? (and not when the panel is resized)

[aduda9]

Hi all, apologies if this is covered somewhere else. I've got an HTMLGraphics panel that needs to rerender whenever the dashboard's variables are changed. However, this process is complex, and shouldn't run every time the panel is resized. Is there an event I can attach to that fires only when the variables change?

I've tried attaching a handler to the 'panelupdate' event in onInit, but this also fires whenever the panel is resized.

[ZuperZee]

No. There aren't any events for just variable changes. You could store the previous variable value and manually check if it has changed.

only-update-on-variable-change1.mp4

onInit

let myVar = htmlGraphics.props.replaceVariables("$var");

function doSomething() {
  console.log(`Doing stuff (${myVar})`);
}

htmlNode.addEventListener("panelupdate", () => {
  const newMyVar = htmlGraphics.props.replaceVariables("$var");

  if (myVar !== newMyVar) {
    myVar = newMyVar;
    doSomething();
  }
});

Dashboard JSON Model

{
  "annotations": {
    "list": [
      {
        "builtIn": 1,
        "datasource": {
          "type": "grafana",
          "uid": "-- Grafana --"
        },
        "enable": true,
        "hide": true,
        "iconColor": "rgba(0, 211, 255, 1)",
        "name": "Annotations & Alerts",
        "type": "dashboard"
      }
    ]
  },
  "editable": true,
  "fiscalYearStartMonth": 0,
  "graphTooltip": 0,
  "id": 31,
  "links": [],
  "liveNow": false,
  "panels": [
    {
      "datasource": {
        "type": "datasource",
        "uid": "grafana"
      },
      "fieldConfig": {
        "defaults": {
          "color": {
            "mode": "thresholds"
          },
          "mappings": [],
          "thresholds": {
            "mode": "absolute",
            "steps": [
              {
                "color": "green",
                "value": null
              },
              {
                "color": "red",
                "value": 80
              }
            ]
          }
        },
        "overrides": []
      },
      "gridPos": {
        "h": 4,
        "w": 10,
        "x": 0,
        "y": 0
      },
      "id": 1,
      "options": {
        "SVGBaseFix": true,
        "add100Percentage": true,
        "calcsMutation": "standard",
        "centerAlignContent": true,
        "codeData": "{\n  \"text\": \"Random text\"\n}",
        "css": "* {\n  font-family: Open Sans;\n}\n",
        "dynamicData": false,
        "dynamicFieldDisplayValues": false,
        "dynamicHtmlGraphics": false,
        "dynamicProps": false,
        "html": "",
        "onInit": "let myVar = htmlGraphics.props.replaceVariables(\"$var\");\r\n\r\nfunction doSomething() {\r\n  console.log(`Doing stuff (${myVar})`);\r\n}\r\n\r\nhtmlNode.addEventListener(\"panelupdate\", () => {\r\n  const newMyVar = htmlGraphics.props.replaceVariables(\"$var\");\r\n\r\n  if (myVar !== newMyVar) {\r\n    myVar = newMyVar;\r\n    doSomething();\r\n  }\r\n});\r\n",
        "onInitOnResize": false,
        "onRender": "",
        "overflow": "visible",
        "panelupdateOnMount": true,
        "reduceOptions": {
          "calcs": [
            "lastNotNull",
            "last",
            "firstNotNull",
            "first",
            "min",
            "max",
            "mean",
            "sum",
            "count",
            "range",
            "delta",
            "step",
            "diff",
            "logmin",
            "allIsZero",
            "allIsNull",
            "diffperc"
          ]
        },
        "renderOnMount": true,
        "rootCSS": "",
        "useGrafanaScrollbar": true
      },
      "type": "gapit-htmlgraphics-panel"
    }
  ],
  "refresh": "",
  "schemaVersion": 38,
  "style": "dark",
  "tags": [],
  "templating": {
    "list": [
      {
        "current": {
          "selected": true,
          "text": "c",
          "value": "c"
        },
        "hide": 0,
        "includeAll": false,
        "multi": false,
        "name": "var",
        "options": [
          {
            "selected": false,
            "text": "a",
            "value": "a"
          },
          {
            "selected": false,
            "text": "b",
            "value": "b"
          },
          {
            "selected": true,
            "text": "c",
            "value": "c"
          },
          {
            "selected": false,
            "text": "d",
            "value": "d"
          },
          {
            "selected": false,
            "text": "e",
            "value": "e"
          },
          {
            "selected": false,
            "text": "f",
            "value": "f"
          },
          {
            "selected": false,
            "text": "g",
            "value": "g"
          }
        ],
        "query": "a,b,c,d,e,f,g",
        "queryValue": "",
        "skipUrlSync": false,
        "type": "custom"
      }
    ]
  },
  "time": {
    "from": "now-6h",
    "to": "now"
  },
  "timepicker": {},
  "timezone": "",
  "title": "Only update on variable changes",
  "uid": "b24fffb3-6523-439d-b02b-ccfb0698001c",
  "version": 1,
  "weekStart": ""
}

[aduda9]

Ah this totally makes sense. Thank you for the detailed answer!