modify the panel count to vis only and fix the ft

Signed-off-by: Jialiang Liang <[email protected]>

Author: RyanL1997

src/plugins/dashboard/public/application/embeddable/viewport/dashboard_viewport.tsx

@@ -198,16 +198,20 @@ export class DashboardViewport extends React.Component<DashboardViewportProps, S
       useMargins,
     } = this.state;
 
-    const shouldRenderSyncUI = this.syncService.shouldRenderSyncUI();
-    const syncUIProps = this.syncService.getSyncUIProps();
+    // Count only panels that are likely to render visualizations
+    const renderablePanels = Object.values(panels).filter((p) => p.type === 'visualization');
+
+    const shouldRenderSyncUI =
+      this.props.isDirectQuerySyncEnabled && this.syncService?.shouldRenderSyncUI();
+    const syncUIProps = this.syncService?.getSyncUIProps();
 
     return (
       <div>
-        {shouldRenderSyncUI && (
+        {shouldRenderSyncUI && syncUIProps && (
           <DashboardDirectQuerySync loadStatus={this.props.loadStatus} {...syncUIProps} />
         )}
         <div
-          data-shared-items-count={Object.values(panels).length}
+          data-shared-items-count={renderablePanels.length}
           data-shared-items-container
           data-title={title}
           data-description={description}