feat: fixed dropdown open triggering the api calls for single-select …

…and misc
SigNoz · Dec 11, 2024 · 421d355 · 421d355
1 parent eb75e63
commit 421d355
Show file tree

Hide file tree

Showing 3 changed files with 50 additions and 18 deletions.
diff --git a/...end/src/container/NewDashboard/DashboardVariablesSelection/DashboardVariableSelection.tsx b/...end/src/container/NewDashboard/DashboardVariablesSelection/DashboardVariableSelection.tsx
@@ -6,6 +6,7 @@ import { IDashboardVariable } from 'types/api/dashboard/getAll';
 import {
 	buildDependencies,
 	buildDependencyGraph,
+	buildParentDependencyGraph,
 	onUpdateVariableNode,
 	VariableGraph,
 } from './util';
@@ -29,6 +30,7 @@ function DashboardVariableSelection(): JSX.Element | null {
 	const [dependencyData, setDependencyData] = useState<{
 		order: string[];
 		graph: VariableGraph;
+		parentDependencyGraph: VariableGraph;
 	} | null>(null);
 
 	useEffect(() => {
@@ -59,9 +61,11 @@ function DashboardVariableSelection(): JSX.Element | null {
 		if (variablesTableData.length > 0 && !initializationRef.current) {
 			const depGrp = buildDependencies(variablesTableData);
 			const { order, graph } = buildDependencyGraph(depGrp);
+			const parentDependencyGraph = buildParentDependencyGraph(graph);
 			setDependencyData({
 				order,
 				graph,
+				parentDependencyGraph,
 			});
 			initializationRef.current = true;
 		}
@@ -120,7 +124,7 @@ function DashboardVariableSelection(): JSX.Element | null {
 					dependencyData.order,
 					(node) => updatedVariables.push(node),
 				);
-				setVariablesToGetUpdated(updatedVariables.filter((v) => v !== name)); // question?
+				setVariablesToGetUpdated(updatedVariables.filter((v) => v !== name));
 			} else if (isMountedCall) {
 				setVariablesToGetUpdated((prev) => prev.filter((v) => v !== name));
 			}

diff --git a/frontend/src/container/NewDashboard/DashboardVariablesSelection/VariableItem.tsx b/frontend/src/container/NewDashboard/DashboardVariablesSelection/VariableItem.tsx
@@ -35,7 +35,12 @@ import { popupContainer } from 'utils/selectPopupContainer';
 
 import { variablePropsToPayloadVariables } from '../utils';
 import { SelectItemStyle } from './styles';
-import { areArraysEqual, checkAPIInvocation, VariableGraph } from './util';
+import {
+	areArraysEqual,
+	checkAPIInvocation,
+	onUpdateVariableNode,
+	VariableGraph,
+} from './util';
 
 const ALL_SELECT_VALUE = '__ALL__';
 
@@ -59,6 +64,7 @@ interface VariableItemProps {
 	dependencyData: {
 		order: string[];
 		graph: VariableGraph;
+		parentDependencyGraph: VariableGraph;
 	} | null;
 }
 
@@ -212,11 +218,14 @@ function VariableItem({
 			`${maxTime}`,
 		],
 		{
-			// enabled: variableData && variableData.type === 'QUERY',
 			enabled:
 				variableData &&
 				variableData.type === 'QUERY' &&
-				checkAPIInvocation(variablesToGetUpdated, variableData, dependencyData),
+				checkAPIInvocation(
+					variablesToGetUpdated,
+					variableData,
+					dependencyData?.parentDependencyGraph,
+				),
 			queryFn: () =>
 				dashboardVariablesQuery({
 					query: variableData.queryValue || '',
@@ -225,6 +234,21 @@ function VariableItem({
 			refetchOnWindowFocus: false,
 			onSuccess: (response) => {
 				getOptions(response.payload);
+				if (
+					dependencyData?.parentDependencyGraph[variableData.name || ''].length === 0
+				) {
+					const updatedVariables: string[] = [];
+					onUpdateVariableNode(
+						variableData.name || '',
+						dependencyData.graph,
+						dependencyData.order,
+						(node) => updatedVariables.push(node),
+					);
+					setVariablesToGetUpdated((prev) => [
+						...prev,
+						...updatedVariables.filter((v) => v !== variableData.name),
+					]);
+				}
 			},
 			onError: (error: {
 				details: {
@@ -246,6 +270,15 @@ function VariableItem({
 	);
 
 	const handleChange = (value: string | string[]): void => {
+		// if value is equal to selected value then return
+		if (
+			value === variableData.selectedValue ||
+			(Array.isArray(value) &&
+				Array.isArray(variableData.selectedValue) &&
+				areArraysEqual(value, variableData.selectedValue))
+		) {
+			return;
+		}
 		if (variableData.name) {
 			if (
 				value === ALL_SELECT_VALUE ||

diff --git a/frontend/src/container/NewDashboard/DashboardVariablesSelection/util.ts b/frontend/src/container/NewDashboard/DashboardVariablesSelection/util.ts
@@ -1,3 +1,4 @@
+import { isEmpty } from 'lodash-es';
 import { Dashboard, IDashboardVariable } from 'types/api/dashboard/getAll';
 
 export function areArraysEqual(
@@ -161,32 +162,26 @@ export const buildParentDependencyGraph = (
 export const checkAPIInvocation = (
 	variablesToGetUpdated: string[],
 	variableData: IDashboardVariable,
-	dependencyData: {
-		order: string[];
-		graph: VariableGraph;
-	} | null,
+	parentDependencyGraph?: VariableGraph,
 ): boolean => {
-	console.log(variableData.name, dependencyData, variablesToGetUpdated);
-	if (!dependencyData) {
-		return true;
-	}
-
-	if (!variableData.name) {
+	if (isEmpty(variableData.name)) {
 		return false;
 	}
 
-	const parentDependencies = buildParentDependencyGraph(dependencyData.graph);
+	if (isEmpty(parentDependencyGraph)) {
+		return true;
+	}
 
 	// if no dependency then true
-	const haveDependency = parentDependencies[variableData.name]?.length > 0;
+	const haveDependency =
+		parentDependencyGraph?.[variableData.name || '']?.length > 0;
 	if (!haveDependency) {
 		return true;
 	}
 
 	// if variable is in the list and has dependency then check if its the top element in the queue then true else false
 	return (
-		variablesToGetUpdated &&
-		variablesToGetUpdated.includes(variableData.name) &&
+		variablesToGetUpdated.length > 0 &&
 		variablesToGetUpdated[0] === variableData.name
 	);
 };