Hello! I am tasked to improve UI of my app that embeds Thoughtspot Liveboard. The plan is now to divide one Liveboard embedding into separate iframes per chart (Visualisation) so we can achieve most of the UI improvements that are not available through the Full Liveboard Embed like chart specific filters, dynamic titles, redesigned legend, potential annotations for a chart The problem is that splitting those charts into separate entities (iframes) causes huge performance hit. Sometimes just PC runs out of memory due to the 6-8 iframes per tab. And this is on PC with 32 GBs of RAM. Do you have any ideas or best practices from architectural standpoint how to do it?

message has been deleted

Solution: Yes — your current architecture (6–8 separate ThoughtSpot iframes per tab) is very likely the root cause of the memory and performance issues. From ThoughtSpot’s own guidance: - Prefer one Liveboard embed over many single-viz embeds for performance. - If you must split visualizations, keep it to ~4 max visible at once. - Use prefetch + cache of static assets. - Call

init()

early and complete auth early. A practical architecture that usually works best: 1. Primary view: one

LiveboardEmbed

(single iframe). 2. Custom UI layer in your app: dynamic titles, annotations, external legend panel, etc., rendered outside TS iframe. 3. Viz-focused interactions: use

vizId

mode only for drill-in/detail panels, not for all charts simultaneously. 4. Virtualize tabs/sections: mount only visible embeds; unmount hidden ones. 5. If you still need per-chart embeds: hard-cap concurrent embeds (e.g., 2–4), lazy-load the rest on scroll/user action.

javascript
import { init, AuthType, prefetch, LiveboardEmbed } from "@thoughtspot/visual-embed-sdk";

await prefetch("https://your-instance.thoughtspot.cloud");

init({
  thoughtSpotHost: "https://your-instance.thoughtspot.cloud",
  authType: AuthType.None,
  // or callPrefetch: true (alternative to prefetch())
});

const liveboard = new LiveboardEmbed(document.getElementById("ts-liveboard"), {
  liveboardId: "YOUR_LIVEBOARD_ID",
  fullHeight: true
});

liveboard.render();

Suggestions: - Treat each ThoughtSpot iframe as a “heavy process”; don’t keep many alive. - For chart-specific filters, prefer controlling state in host app and applying scoped embed configuration only to the currently focused visualization. - Use browser performance tooling to track heap growth when switching tabs; verify embeds are actually destroyed on unmount.