fix: dashboard tooltip and drilldown issue (#2783)

- fix: view panel drilldown issue for same tab.
- fix: on legend click, show only one series.
- fix: for add panel page, chart tooltip not working.

web/src/components/dashboards/PanelSchemaRenderer.vue

@@ -370,7 +370,9 @@ export default defineComponent({
     });
 
     const hideDrilldownPopUp = () => {
-      drilldownPopUpRef.value.style.display = "none";
+      if (drilldownPopUpRef.value) {
+        drilldownPopUpRef.value.style.display = "none";
+      }
     };
 
     // drilldown

web/src/components/dashboards/panels/ChartRenderer.vue

@@ -167,8 +167,11 @@ export default defineComponent({
       // get legend
       const legendOption = chart?.getOption()?.legend[0];
 
-      // set options with selected object
       if (legendOption) {
+        // set selected array
+        legendOption.selected = params.selected;
+
+        // set options with selected object
         chart?.setOption({ legend: [legendOption] });
       }
     };

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

@@ -88,6 +88,7 @@
                   :width="6"
                   @error="handleChartApiError"
                   @updated:data-zoom="onDataZoom"
+                  @update:initialVariableValues="onUpdateInitialVariableValues"
                   data-test="dashboard-viewpanel-panel-schema-renderer"
                 />
               </div>
@@ -153,7 +154,7 @@ export default defineComponent({
       type: Object,
     },
   },
-  emits: ["closePanel"],
+  emits: ["closePanel", "update:initialVariableValues"],
   setup(props, { emit }) {
     // This will be used to copy the chart data to the chart renderer component
     // This will deep copy the data object without reactivity and pass it on to the chart renderer
@@ -412,6 +413,10 @@ export default defineComponent({
       return { value: variableObj };
     };
 
+    const onUpdateInitialVariableValues = (...args: any[]) => {
+      emit("update:initialVariableValues", ...args);
+    };
+
     return {
       t,
       updateDateTime,
@@ -433,6 +438,7 @@ export default defineComponent({
       histogramFields,
       onDataZoom,
       getInitialVariablesData,
+      onUpdateInitialVariableValues,
     };
   },
 });

web/src/utils/dashboard/convertPromQLData.ts

@@ -132,6 +132,7 @@ export const convertPromQLData = (
         // show tooltip for hovered panel only for other we only need axis so just return empty string
         if (
           hoveredSeriesState?.value &&
+          panelSchema.id &&
           hoveredSeriesState?.value?.panelId != panelSchema.id
         )
           return "";

web/src/utils/dashboard/convertSQLData.ts

@@ -249,6 +249,7 @@ export const convertSQLData = (
         // show tooltip for hovered panel only for other we only need axis so just return empty string
         if (
           hoveredSeriesState?.value &&
+          panelSchema.id &&
           hoveredSeriesState?.value?.panelId != panelSchema.id
         )
           return "";
@@ -517,6 +518,7 @@ export const convertSQLData = (
           // show tooltip for hovered panel only for other we only need axis so just return empty string
           if (
             hoveredSeriesState?.value &&
+            panelSchema.id &&
             hoveredSeriesState?.value?.panelId != panelSchema.id
           )
             return "";
@@ -645,6 +647,7 @@ export const convertSQLData = (
           // show tooltip for hovered panel only for other we only need axis so just return empty string
           if (
             hoveredSeriesState?.value &&
+            panelSchema.id &&
             hoveredSeriesState?.value?.panelId != panelSchema.id
           )
             return "";
@@ -695,6 +698,7 @@ export const convertSQLData = (
           // show tooltip for hovered panel only for other we only need axis so just return empty string
           if (
             hoveredSeriesState?.value &&
+            panelSchema.id &&
             hoveredSeriesState?.value?.panelId != panelSchema.id
           )
             return "";
@@ -867,6 +871,7 @@ export const convertSQLData = (
           // show tooltip for hovered panel only for other we only need axis so just return empty string
           if (
             hoveredSeriesState?.value &&
+            panelSchema.id &&
             hoveredSeriesState?.value?.panelId != panelSchema.id
           )
             return "";
@@ -1243,6 +1248,7 @@ export const convertSQLData = (
         // show tooltip for hovered panel only for other we only need axis so just return empty string
         if (
           hoveredSeriesState?.value &&
+          panelSchema.id &&
           hoveredSeriesState?.value?.panelId != panelSchema.id
         )
           return "";
@@ -1367,6 +1373,7 @@ export const convertSQLData = (
         // show tooltip for hovered panel only for other we only need axis so just return empty string
         if (
           hoveredSeriesState?.value &&
+          panelSchema.id &&
           hoveredSeriesState?.value?.panelId != panelSchema.id
         )
           return "";

web/src/views/Dashboards/RenderDashboardCharts.vue

@@ -88,7 +88,7 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
     </div>
 
     <!-- view panel dialog -->
-    <q-dialog v-model="showViewPanel">
+    <q-dialog v-model="showViewPanel" :no-route-dismiss="true">
       <q-card style="min-width: 95vw; min-height: 90vh">
         <ViewPanel
           :panelId="viewPanelId"
@@ -96,6 +96,7 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
           :initialVariableValues="variablesData"
           @close-panel="() => (showViewPanel = false)"
           :class="store.state.theme == 'dark' ? 'dark-mode' : 'bg-white'"
+          @update:initial-variable-values="updateInitialVariableValues"
         />
       </q-card>
     </q-dialog>
@@ -329,6 +330,9 @@ export default defineComponent({
 
     // update initial variable values using the variable value selector ref
     const updateInitialVariableValues = async (...args: any) => {
+      // if view panel is open then close it
+      showViewPanel.value = false;
+
       // first, refresh the dashboard
       refreshDashboard();
       // then, update the initial variable values