link variable reserved tokens

provisioning/dashboardData/links.yaml

@@ -89,3 +89,9 @@ cells:
     link:
       url: "\\\\< > bad link ${animationSiteVar} variable data"
       params: null
+  andrew:
+    dataRef: "andy"
+    link:
+      url: "https://github.com/${cell.dataRef}${urlSiteWebsiteSurname}/${cell.name}b${urlSiteWebsiteSurname}-flow-panel"
+      params: null
+

src/components/Config.tsx

@@ -23,7 +23,6 @@ export type Threshold = {
 export type Link = {
   url: string;
   params: LinkUrlParams;
-  initialized: boolean | undefined;
 };
 
 export type Background = {

src/components/FlowPanel.tsx

@@ -78,9 +78,10 @@ function clickHandlerFactory(elementAttribs: Map<string, SvgElementAttribs>, lin
   return (event: React.MouseEvent<HTMLElement, MouseEvent>) => {
     if (event.target) {
       const element = event.target as HTMLElement;
-      const link = elementAttribs.get(element.id)?.link;
+      const attribs = elementAttribs.get(element.id);
+      const link = attribs?.link;
       if (link) {
-        const url = constructUrl(link, linkVariables);
+        const url = constructUrl(link, attribs, linkVariables);
         if (url) {
           window.open(getTemplateSrv().replace(url));
         }

src/components/SvgUpdater.tsx

@@ -28,6 +28,8 @@ export type SvgCell = {
 };
 
 export type SvgElementAttribs = {
+  name: string;
+  dataRef: string | null;
   link: Link | null;
   strokeColor: string | null;
   fillColor: string | null;
@@ -197,6 +199,8 @@ export function svgInit(doc: Document, grafanaTheme: GrafanaTheme2, panelConfig:
     [cell.textElements, cell.fillElements].forEach((arr) => {
       arr.forEach((el) => {
         elementAttribs.set(el.id, {
+          name: cellIdShort,
+          dataRef: panelConfigCell?.dataRef || null,
           link: link || null,
           strokeColor: el.getAttribute('stroke'),
           fillColor: el.getAttribute('fill'),

src/components/Utils.tsx

@@ -1,5 +1,5 @@
 import { GrafanaTheme2, colorManipulator } from '@grafana/data';
-import { SvgAttribs, SvgCell } from 'components/SvgUpdater'
+import { SvgAttribs, SvgCell, SvgElementAttribs } from 'components/SvgUpdater'
 import { Background, HighlightFactors, Link, PanelConfigCellColor, Threshold, VariableThresholdScalars } from 'components/Config';
 import { HighlightState } from './Highlighter';
 
@@ -52,15 +52,27 @@ export function createUrl(url: string) {
   }
 }
 
-export function constructUrl(link: Link, linkVariables: Map<string, string>) {
-  if (!link.initialized) {
-    link.initialized = true;
-    linkVariables.forEach((value: string, key: string) => {
-      const token = '\$\{'.concat(key, '\}');
-      link.url = link.url.split(token).join(value);
-    });
-    link.url = createUrl(link.url) || "";
-  }
+function tokenStr(key: string) {
+  return '\$\{'.concat(key, '\}');
+}
+
+export function constructUrl(link: Link, attribs: SvgElementAttribs, linkVariables: Map<string, string>) {
+  // Blend reserved tokens with variables
+  const linkVars = new Map([
+    ['cell.name', attribs.name],
+    ['cell.dataRef', attribs.dataRef || tokenStr('cell.dataRef')],
+    ...linkVariables]);
+
+  // Substitute tokens
+  linkVars.forEach((value: string, key: string) => {
+    const token = tokenStr(key);
+    link.url = link.url.split(token).join(value);
+  });
+
+  // Generate url
+  link.url = createUrl(link.url) || "";
+
+  // Append window args
   if (link.url.length) {
     let url = link.url;
     if (link.params === 'time') {

yaml_defs/panelConfig.yaml

@@ -45,6 +45,10 @@ zoomPanPinch:
 # Version 1.14.0 onwards: Link variables will be substituted in urls prior to passing through
 # grafana variable substitution. Variables should be defined in the same format as grafana variables.
 # i.e. ${urlBasePlugin}. These variables can be defined in siteConfig or panelConfig.
+# Alongside these bespoke variables there are two reserved variables driven from the cell yaml of:
+# ${cell.name}
+# ${cell.dataRef}
+# Substitution order is: reserved-vars -> siteConfig-vars -> panelConfig-vars -> grafana-vars
 linkVariables:
   urlBasePlugin: "https://github.com/andymchugh/andrewbmchugh-flow-panel/blob/main/"
   urlBaseGrafana: "https://app.diagrams.net/"

yaml_defs/siteConfig.yaml

@@ -23,6 +23,10 @@ variableThresholdScalars:
 # Version 1.14.0 onwards: Link variables will be substituted in urls prior to passing through
 # grafana variable substitution. Variables should be defined in the same format as grafana variables.
 # i.e. ${urlBasePlugin}. These variables can be defined in siteConfig or panelConfig.
+# Alongside these bespoke variables there are two reserved variables driven from the cell yaml of:
+# ${cell.name}
+# ${cell.dataRef}
+# Substitution order is: reserved-vars -> siteConfig-vars -> panelConfig-vars -> grafana-vars
 linkVariables:
   urlBasePlugin: "https://github.com/andymchugh/andrewbmchugh-flow-panel/blob/main/"
   urlBaseGrafana: "https://app.diagrams.net/"