diff --git a/frontend/src/container/NewDashboard/DashboardVariablesSelection/DashboardVariableSelection.tsx b/frontend/src/container/NewDashboard/DashboardVariablesSelection/DashboardVariableSelection.tsx index 5a3c48ad46..8276266cec 100644 --- a/frontend/src/container/NewDashboard/DashboardVariablesSelection/DashboardVariableSelection.tsx +++ b/frontend/src/container/NewDashboard/DashboardVariablesSelection/DashboardVariableSelection.tsx @@ -66,8 +66,17 @@ function DashboardVariableSelection(): JSX.Element | null { const depGrp = buildDependencies(variablesTableData); const { order, graph } = buildDependencyGraph(depGrp); const parentDependencyGraph = buildParentDependencyGraph(graph); + + // cleanup order to only include variables that are of type 'QUERY' + const cleanedOrder = order.filter((variable) => { + const variableData = variablesTableData.find( + (v: IDashboardVariable) => v.name === variable, + ); + return variableData?.type === 'QUERY'; + }); + setDependencyData({ - order, + order: cleanedOrder, graph, parentDependencyGraph, }); diff --git a/frontend/src/container/NewDashboard/DashboardVariablesSelection/util.ts b/frontend/src/container/NewDashboard/DashboardVariablesSelection/util.ts index 03c6f2c585..3b79111bfa 100644 --- a/frontend/src/container/NewDashboard/DashboardVariablesSelection/util.ts +++ b/frontend/src/container/NewDashboard/DashboardVariablesSelection/util.ts @@ -1,4 +1,4 @@ -import { isEmpty } from 'lodash-es'; +import { isEmpty, isNull } from 'lodash-es'; import { Dashboard, IDashboardVariable } from 'types/api/dashboard/getAll'; export function areArraysEqual( @@ -31,29 +31,39 @@ export const convertVariablesToDbFormat = ( return result; }, {}); -const getDependentVariables = (queryValue: string): string[] => { - // Combined pattern for all formats: - // {{.variable_name}} - original format - // $variable_name - dollar prefix format - // [[variable_name]] - square bracket format - // {{variable_name}} - without dot format - const variableRegexPattern = /(?:\{\{\s*\.?([^\s}]+)\s*\}\}|\$([^\s\W]+)|\[\[([^\]]+)\]\])/g; - - const matches = queryValue.match(variableRegexPattern); - - // Extract variable names from the matches array, handling all formats - return matches - ? matches.map((match) => { - if (match.startsWith('$')) { - return match.slice(1); // Remove $ prefix - } - if (match.startsWith('[[')) { - return match.slice(2, -2); // Remove [[ and ]] +const getDependentVariablesBasedOnVariableName = ( + variableName: string, + variables: IDashboardVariable[], +): string[] => { + if (!variables || !Array.isArray(variables)) { + return []; + } + + return variables + ?.map((variable: any) => { + if (variable.type === 'QUERY') { + // Combined pattern for all formats + // {{.variable_name}} - original format + // $variable_name - dollar prefix format + // [[variable_name]] - square bracket format + // {{variable_name}} - without dot format + const patterns = [ + `\\{\\{\\s*?\\.${variableName}\\s*?\\}\\}`, // {{.var}} + `\\{\\{\\s*${variableName}\\s*\\}\\}`, // {{var}} + `\\$${variableName}\\b`, // $var + `\\[\\[\\s*${variableName}\\s*\\]\\]`, // [[var]] + ]; + const combinedRegex = new RegExp(patterns.join('|')); + + const queryValue = variable.queryValue || ''; + const dependVarReMatch = queryValue.match(combinedRegex); + if (dependVarReMatch !== null && dependVarReMatch.length > 0) { + return variable.name; } - // Handle both {{.var}} and {{var}} formats - return match.replace(/\{\{\s*\.?([^\s}]+)\s*\}\}/, '$1'); - }) - : []; + } + return null; + }) + .filter((val: string | null) => !isNull(val)); }; export type VariableGraph = Record; @@ -64,24 +74,21 @@ export const buildDependencies = ( // Initialize empty arrays for all variables first variables.forEach((variable) => { - if (variable.name && variable.type === 'QUERY') { + if (variable.name) { graph[variable.name] = []; } }); // For each QUERY variable, add it as a dependent to its referenced variables variables.forEach((variable) => { - if (variable.type === 'QUERY' && variable.name) { - const dependentVariables = getDependentVariables(variable.queryValue || ''); + if (variable.name) { + const dependentVariables = getDependentVariablesBasedOnVariableName( + variable.name, + variables, + ); // For each referenced variable, add the current query as a dependent - dependentVariables.forEach((referencedVar) => { - if (graph[referencedVar]) { - graph[referencedVar].push(variable.name as string); - } else { - graph[referencedVar] = [variable.name as string]; - } - }); + graph[variable.name] = dependentVariables; } });