SCAL-314115 host-event subscription

visual-embed/host-event-parameterized/README.md

@@ -46,6 +46,8 @@ const App = () => {
 };
 ```
 
+> **Triggering host events at load time?** These examples are button-driven, so no readiness handling is needed. For triggers fired automatically at load, use the `subscribedEvent` readiness pattern (requires `useHostEventsV2: true`) — see [update-filters-and-params](../update-filters-and-params/README.md).
+
 ## Documentation
 
 - [Host Event Parameterization](https://developers.thoughtspot.com/docs/events-app-integration#hostEventParameterization)

visual-embed/liveboard/package.json

@@ -10,7 +10,7 @@
     "preview": "vite preview"
   },
   "dependencies": {
-    "@thoughtspot/visual-embed-sdk": "latest",
+    "@thoughtspot/visual-embed-sdk": "^1.50.1",
     "react": "^19.0.0",
     "react-dom": "^19.0.0",
     "react-router": "^7.5.2"

visual-embed/liveboard/src/pages/EmbedWithReactWithOptions.tsx

@@ -1,30 +1,43 @@
+import { useEffect } from "react";
 import Header from "../components/Header";
 import { EmbedEvent, HostEvent, LiveboardEmbed, RuntimeFilterOp, useEmbedRef } from "@thoughtspot/visual-embed-sdk/react";
 
 function EmbedWithReactWithOptions() {
 
     const ref = useEmbedRef<typeof LiveboardEmbed>();
     //apply runtime filters
-    
+
     const runtimeFilters = [
         {
             columnName: "state",
             operator: RuntimeFilterOp.EQ,
             values: ["michigan"],
         },
     ];
-    
+
     const onLoad = () => {
         console.log(EmbedEvent.Load, {});
     };
-
-    //Register an event handler to trigger the SetVisibleVizs event when the Liveboard is rendered
-    const onLiveboardRendered = () => {
-        ref.current.trigger(HostEvent.SetVisibleVizs, [
-            "3f84d633-e325-44b2-be25-c6650e5a49cf",
-            "28b73b4a-1341-4535-ab71-f76b6fe7bf92",
-        ]);
-      };
+
+    // Standard pattern for triggering a host event at load time: listen for the
+    // "<Event> Subscribed" ready signal via subscribedEvent() — it fires the moment
+    // the embedded app has registered its handler, so the trigger cannot be dropped.
+    // Requires useHostEventsV2 on the embed (SDK 1.45.2+ / ThoughtSpot 26.3.0.cl+).
+    useEffect(() => {
+        const embed = ref.current;
+        if (!embed) return;
+        const subscribed = embed.subscribedEvent(HostEvent.SetVisibleVizs) as EmbedEvent;
+        const onReady = () => {
+            embed.trigger(HostEvent.SetVisibleVizs, [
+                "3f84d633-e325-44b2-be25-c6650e5a49cf",
+                "28b73b4a-1341-4535-ab71-f76b6fe7bf92",
+            ]);
+        };
+        embed.on(subscribed, onReady);
+        return () => {
+            embed.off(subscribed, onReady);
+        };
+    }, []);
 
     return (
         <>
@@ -38,11 +51,11 @@ function EmbedWithReactWithOptions() {
                     liveboardId={import.meta.env.VITE_LIVEBOARD_ID}
                     runtimeFilters={runtimeFilters}
                     onLoad={onLoad}
-                    onLiveboardRendered={onLiveboardRendered}
+                    useHostEventsV2
                     fullHeight={true} />
             </div>
         </>
     )
 }
 
-export default EmbedWithReactWithOptions;
+export default EmbedWithReactWithOptions;