without apply or outside click want api call on refresh

web/src/components/dashboards/settings/VariableQueryValueSelector.vue

@@ -85,7 +85,7 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
         </q-item>
       </template>
 
-      <template v-if="variableItem.multiSelect" v-slot:after-options>
+      <!-- <template v-if="variableItem.multiSelect" v-slot:after-options>
         <div class="q-pa-sm tw-text-end">
           <q-btn
             @click="applySelection"
@@ -98,7 +98,7 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
             Apply
           </q-btn>
         </div>
-      </template>
+      </template> -->
     </q-select>
   </div>
 </template>

web/src/components/dashboards/viewPanel/ViewPanel.vue

@@ -121,7 +121,7 @@
                   :dashboard-id="dashboardId"
                   :folder-id="folderId"
                   :selectedTimeObj="dashboardPanelData.meta.dateTime"
-                  :variablesData="variablesData"
+                  :variablesData="refreshVariableDataRef"
                   :width="6"
                   :searchType="searchType"
                   @error="handleChartApiError"
@@ -220,10 +220,13 @@ export default defineComponent({
     const router = useRouter();
     const route = useRoute();
     const store = useStore();
+
+    const refreshVariableDataRef: any = reactive({});
+    
     let parser: any;
     const dashboardPanelDataPageKey = inject(
       "dashboardPanelDataPageKey",
-      "dashboard"
+      "dashboard",
     );
     const { dashboardPanelData, promqlMode, resetDashboardPanelData } =
       useDashboardPanelData(dashboardPanelDataPageKey);
@@ -237,6 +240,16 @@ export default defineComponent({
     const variablesDataUpdated = (data: any) => {
       Object.assign(variablesData, data);
 
+      // when this is called 1st time, we need to set the data for the updated variables data as well
+      // from the second time, it will only be updated after the apply button is clicked
+      if (
+        !refreshVariableDataRef?.values?.length && // Previous value of variables is empty
+        variablesData?.values?.length > 0 // new values of variables is NOT empty
+      ) {
+        // assign the variables so that it can allow the panel to wait for them to load which is manual after hitting "Apply"
+        Object.assign(refreshVariableDataRef, variablesData);
+      }
+
       // resize the chart when variables data is updated
       // because if variable requires some more space then need to resize chart
       // NOTE: need to improve this logic it should only called if the variable requires more space
@@ -301,7 +314,7 @@ export default defineComponent({
                 if (!histogramInterval.value.value) {
                   histogramExpr.args.value = histogramExpr.args.value.slice(
                     0,
-                    1
+                    1,
                   );
                 }
 
@@ -334,7 +347,7 @@ export default defineComponent({
         chartData.value = JSON.parse(JSON.stringify(dashboardPanelData.data));
         // refresh the date time based on current time if relative date is selected
         dateTimePickerRef.value && dateTimePickerRef.value.refresh();
-      }
+      },
     );
 
     const onDataZoom = (event: any) => {
@@ -371,11 +384,11 @@ export default defineComponent({
           route.query.dashboard,
           props.panelId,
           route.query.folder,
-          route.query.tab ?? dashboardPanelData.data.panels[0]?.tabId
+          route.query.tab ?? dashboardPanelData.data.panels[0]?.tabId,
         );
         Object.assign(
           dashboardPanelData.data,
-          JSON.parse(JSON.stringify(panelData))
+          JSON.parse(JSON.stringify(panelData)),
         );
         await nextTick();
         chartData.value = JSON.parse(JSON.stringify(dashboardPanelData.data));
@@ -388,8 +401,8 @@ export default defineComponent({
           : dashboardPanelData.data.queries
               .map((q: any) =>
                 [...q.fields.x, ...q.fields.y, ...q.fields.z].find(
-                  (f: any) => f.aggregationFunction == "histogram"
-                )
+                  (f: any) => f.aggregationFunction == "histogram",
+                ),
               )
               .filter((field: any) => field != undefined);
 
@@ -423,6 +436,10 @@ export default defineComponent({
 
     const refreshData = () => {
       dateTimePickerRef.value.refresh();
+      Object.assign(
+        refreshVariableDataRef,
+        JSON.parse(JSON.stringify(variablesData))
+      );
     };
 
     const currentDashboard = toRaw(store.state.currentSelectedDashboard);
@@ -433,9 +450,9 @@ export default defineComponent({
           await getDashboard(
             store,
             route.query.dashboard,
-            route.query.folder ?? "default"
-          )
-        )
+            route.query.folder ?? "default",
+          ),
+        ),
       );
       currentDashboardData.data = data;
 
@@ -476,7 +493,7 @@ export default defineComponent({
       props?.initialVariableValues?.values?.forEach((variable: any) => {
         if (variable.type === "dynamic_filters") {
           const filters = (variable.value || []).filter(
-            (item: any) => item.name && item.operator && item.value
+            (item: any) => item.name && item.operator && item.value,
           );
           const encodedFilters = filters.map((item: any) => ({
             name: item.name,
@@ -484,7 +501,7 @@ export default defineComponent({
             value: item.value,
           }));
           variableObj[`${variable.name}`] = encodeURIComponent(
-            JSON.stringify(encodedFilters)
+            JSON.stringify(encodedFilters),
           );
         } else {
           variableObj[`${variable.name}`] = variable.value;
@@ -510,12 +527,12 @@ export default defineComponent({
     // provide variablesAndPanelsDataLoadingState to share data between components
     provide(
       "variablesAndPanelsDataLoadingState",
-      variablesAndPanelsDataLoadingState
+      variablesAndPanelsDataLoadingState,
     );
 
     const searchRequestTraceIds = computed(() => {
       const searchIds = Object.values(
-        variablesAndPanelsDataLoadingState.searchRequestTraceIds
+        variablesAndPanelsDataLoadingState.searchRequestTraceIds,
       ).filter((item: any) => item.length > 0);
       return searchIds.flat() as string[];
     });
@@ -531,7 +548,7 @@ export default defineComponent({
 
     watch(variablesAndPanelsDataLoadingState, () => {
       const panelsValues = Object.values(
-        variablesAndPanelsDataLoadingState.panels
+        variablesAndPanelsDataLoadingState.panels,
       );
       disable.value = panelsValues.some((item: any) => item === true);
     });
@@ -566,6 +583,7 @@ export default defineComponent({
       cancelViewPanelQuery,
       disable,
       config,
+      refreshVariableDataRef,
     };
   },
 });

web/src/views/Dashboards/addPanel/AddPanel.vue

@@ -246,7 +246,7 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
                           :dashboard-id="queryParams?.dashboard"
                           :folder-id="queryParams?.folder"
                           :selectedTimeObj="dashboardPanelData.meta.dateTime"
-                          :variablesData="variablesData"
+                          :variablesData="updatedVariablesData"
                           :width="6"
                           @error="handleChartApiError"
                           @updated:data-zoom="onDataZoom"