Style fixes

modules/ROOT/pages/ask-docs.adoc

@@ -1,7 +1,7 @@
 = Ask Docs
 :toc: true
 
-:page-title: Ask TSE Docs
+:page-title: Ask Visual Embed SDK Docs
 :page-pageid: ask-docs
 :page-description: ThoughtSpot Embed SDK docs GPT Q&A
 

modules/ROOT/pages/best-practices.adoc

@@ -62,7 +62,7 @@ appEmbed.render();
 
 == Related resources
 
-* link:{{visualEmbedSDKPrefix}}/modules.html[Visual Embed SDK Reference Guide, window=_blank] 
+* xref:VisualEmbedSdk.adoc[Visual Embed SDK Reference Guide]
 * link:https://github.com/thoughtspot/visual-embed-sdk/blob/main/README.md[Visual Embed SDK GitHub repository, window=_blank]
 * link:https://github.com/thoughtspot/ts_everywhere_resources[ThoughtSpot Everywhere Resources on GitHub, window=_blank]
 * link:https://developers.thoughtspot.com/guides[Visual Embed Tutorials]

modules/ROOT/pages/code-samples.adoc

@@ -319,7 +319,7 @@ See the following pages:
 * xref:home.adoc[Developer documentation] +
 * xref:rest-api-reference.adoc[REST API Reference Guide] +
 * link:https://developers.thoughtspot.com/guides[Tutorials, window=_blank] +
-* link:{{visualEmbedSDKPrefix}}/modules.html[Visual Embed SDK Reference Guide, window=_blank] +
+* xref:VisualEmbedSdk.adoc[Visual Embed SDK Reference Guide] +
 * link:https://github.com/thoughtspot/visual-embed-sdk/blob/main/README.md[Visual Embed SDK GitHub respository, window=_blank] +
 * link:https://github.com/thoughtspot/ts_rest_api_and_tml_tools[REST API and TML Python library and examples, window=_blank] +
 * link:https://github.com/thoughtspot/ts_everywhere_resources[Visual Embed SDK examples, window=_blank] +

modules/ROOT/pages/common/nav.adoc

@@ -4,7 +4,7 @@
 
 [navSection]
 
-* link:{{navprefix}}/ask-docs[AskDocs ^New^]
+* link:{{navprefix}}/ask-docs[AskDocs ^Beta^]
 
 * link:{{navprefix}}/whats-new[What's New]
 ** link:{{navprefix}}/whats-new[New features]
@@ -29,16 +29,16 @@
 
 * link:{{navprefix}}/getting-started[Embed ThoughtSpot]
 ** link:{{navprefix}}/getting-started[Get started]
-** Embed with Visual Embed SDK
-** link:{{navprefix}}/embed-liveboard[Embed a ThoughtSpot components]
-*** link:{{navprefix}}/embed-liveboard[Embed a Liveboard]
-**** link:{{navprefix}}/Liveboard-new-experience[Embed a Liveboard]
-*** link:{{navprefix}}/embed-a-viz[Embed a visualization]
-*** link:{{navprefix}}/full-embed[Embed full application]
-*** link:{{navprefix}}/search-embed[Embed search page]
-**** link:{{navprefix}}/search-assist[Enable Search Assist]
-*** link:{{navprefix}}/embed-searchbar[Embed search bar]
-** link:{{navprefix}}/react-app-embed[Embed in a React app]
+** Embed using Visual Embed SDK
+*** link:{{navprefix}}/embed-liveboard[Embed a ThoughtSpot components]
+**** link:{{navprefix}}/embed-liveboard[Embed a Liveboard]
+***** link:{{navprefix}}/Liveboard-new-experience[Liveboard new experience]
+**** link:{{navprefix}}/embed-a-viz[Embed a visualization]
+**** link:{{navprefix}}/full-embed[Embed full application]
+**** link:{{navprefix}}/search-embed[Embed search page]
+***** link:{{navprefix}}/search-assist[Enable Search Assist]
+**** link:{{navprefix}}/embed-searchbar[Embed search bar]
+*** link:{{navprefix}}/react-app-embed[Embed in a React app]
 ** link:{{navprefix}}/VisualEmbedSdk[Visual Embed SDK Reference]
 *** Embed components
 **** link:{{navprefix}}/Class_SearchEmbed[SearchEmbed]

modules/ROOT/pages/embed-pinboard.adoc

@@ -267,8 +267,3 @@ liveboardEmbed.render();
 image::./images/embed-lb.png[Liveboard embed]
 
 . Explore the charts and tables, and verify if objects render and show the desired data.
-
-== Additional resources
-
-* For code examples, see xref:code-samples.adoc[Code samples].
-* For more information about the SDK APIs and attributes, see xref:sdk-reference.adoc[Visual Embed SDK Reference].

modules/ROOT/pages/embed-search.adoc

@@ -304,9 +304,4 @@ image::./images/embed-search.png[Search embed]
 The following figure shows a chart created from search query on an embedded Search page:
 +
 [.bordered]
-image::./images/searchembed-with-chart.png[Search page embed]
-
-== Additional resources
-
-* For code examples, see xref:code-samples.adoc[Code samples].
-* For more information about the SDK APIs and attributes, see xref:sdk-reference.adoc[Visual Embed SDK Reference].
+image::./images/searchembed-with-chart.png[Search page embed]

modules/ROOT/pages/embed-ts-react-app.adoc

@@ -702,7 +702,13 @@ export default App;
 
 == Additional resources
 
-* For information about events, see xref:embed-events.adoc[Interact with events].
-* For information about Action enumerations, see xref:embed-actions.adoc[Show or hide UI actions].
-* For more information about the SDK APIs and attributes, see xref:sdk-reference.adoc[Visual Embed SDK Reference].
+* xref:LiveboardEmbed.adoc[LiveboardEmbed]
+* xref:LiveboardViewConfig.adoc[LiveboardViewConfig]
+* xref:SearchEmbed.adoc[SearchEmbed]
+* xref:SearchViewConfig.adoc[SearchViewConfig]
+* xref:AppEmbed.adoc[AppEmbed]
+* xref:AppViewConfig.adoc[LiveboardViewConfig]
+* xref:HostEvent.adoc[HostEvent]
+* xref:EmbedEvent.adoc[EmbedEvent]
+* xref:Actions.adoc[Actions]
 * For Javascript code examples, see link:https://github.com/thoughtspot/quickstarts/tree/main/react-starter-app[Code samples, window=_blank].

modules/ROOT/pages/enable-liveboardv2.adoc

@@ -167,4 +167,4 @@ For more information, see link:https://docs.thoughtspot.com/cloud/latest/liveboa
 
 * For information about how to embed a Liveboard, see xref:embed-pinboard.adoc[Embed a Liveboard].
 * For code examples, see xref:code-samples.adoc[Code samples].
-* For more information about the SDK APIs and attributes, see xref:sdk-reference.adoc[Visual Embed SDK Reference].
+* For more information about the SDK APIs and attributes, see xref:VisualEmbedSdk.adoc[Visual Embed SDK Reference Guide].

modules/ROOT/pages/faqs.adoc

@@ -337,7 +337,7 @@ To learn more about the SDK, see the following resources: +
 
 * xref:visual-embed-sdk.adoc[Visual Embed SDK] in Developer Documentation
 * link:https://developers.thoughtspot.com/guides[Quick starts and tutorials, window=_blank]
-* link:{{visualEmbedSDKPrefix}}/modules.html[Visual Embed SDK Reference Guide, window=_blank]
+* xref:VisualEmbedSdk.adoc[Visual Embed SDK Reference Guide]
 ====
 
 .Where can I find code samples for Visual Embed SDK?

modules/ROOT/pages/full-embed.adoc

@@ -317,8 +317,3 @@ For more information about events, see the following pages:
 image::./images/appEmbed.png[Full application embed]
 
 . Explore the charts and tables, and verify if objects render and show the desired data.
-
-== Additional resources
-
-* For code examples, see xref:code-samples.adoc[Code samples].
-* For more information about the SDK APIs and attributes, see xref:sdk-reference.adoc[Visual Embed SDK Reference].

modules/ROOT/pages/getting-started.adoc

@@ -61,13 +61,13 @@ import { LiveboardEmbed } from '@thoughtspot/visual-embed-sdk';
 
 // NPM <script>
 <script src="https://cdn.jsdelivr.net/npm/@thoughtspot/visual-embed-sdk/dist/tsembed.js"></script>;
-// Makes the SDK available on global namespace window.tsembed
+// Make the SDK available on global namespace window.tsembed
 
 // ES6 from web
 import {
-LiveboardEmbed,
-AuthType,
-init,
+    LiveboardEmbed,
+    AuthType,
+    init,
 } from 'https://cdn.jsdelivr.net/npm/@thoughtspot/visual-embed-sdk/dist/tsembed.es.js';
 ----
 
@@ -107,23 +107,20 @@ Use the **SearchBarEmbed** component to embed only the ThoughtSpot Search bar an
 ++++
 
 [#initSdk]
-=== Initialize the SDK
+== Initialize the SDK
 
-After importing the package, specify the hostname or IP address of your ThoughtSpot application instance and the authentication type.
+After importing the package, specify the hostname or IP address of your ThoughtSpot application instance and the authentication type. For other supported authentication methods, see xref:embed-authentication.adoc[Authentication].
 
 [source,JavaScript]
 ----
 init({
     thoughtSpotHost: "https://<hostname>:<port>",
-    authType: AuthType.EmbeddedSSO,
+    authType: <AuthType>,
+    ... // other authType dependent properties.
 });
 ----
-thoughtSpotHost::
-_String_. Hostname or IP address of the ThoughtSpot application.
 
-For other supported authentication methods, see xref:embed-authentication.adoc[Authentication].
-
-== Define the object instance and properties
+=== Define the object instance and properties
 Create an object instance and define object properties. This example shows the code sample for a Liveboard object:
 
 [source,JavaScript]
@@ -142,11 +139,19 @@ const liveboardEmbed = new LiveboardEmbed(
 
 == Register events
 
-Subscribe and listen to events triggered when the embedded object interacts with your app.
+Subscribe and listen to events triggered when the embedded object interacts with your app. The following example registers `LiveboardRendered` and `SetVisibleVizs` events. The `LiveboardRendered` embed event is emitted when the embedding application renders the Liveboard and triggers the `SetVisibleVizs` event to show specific visualizations on the Liveboard.
+
+[source,JavaScript]
+----
+liveboardEmbed.on(EmbedEvent.LiveboardRendered, () => {
+    liveboardEmbed.trigger(HostEvent.SetVisibleVizs, ['viz1', 'viz2']);
+});
+----
 
 * xref:HostEvent.adoc[HostEvent]
 * xref:EmbedEvent.adoc[EmbedEvent]
 
+
 == Render the embedded object
 
 Render the embedded application.
@@ -159,35 +164,71 @@ liveboardEmbed.render();
 == Code sample
 [source,Javascript]
 ----
-// NPM
-import { LiveboardEmbed, AuthType, init } from '@thoughtspot/visual-embed-sdk';
-// or ES6
-// import { LiveboardEmbed, AuthType, init } from 'https://cdn.jsdelivr.net/npm/@thoughtspot/visual-embed-sdk/dist/tsembed.es.js';
-
-init({
-    thoughtSpotHost: '<%=tshost%>',
-    authType: AuthType.None,
+import {
+    LiveboardEmbed,
+    EmbedEvent,
+    HostEvent,
+} from '@thoughtspot/visual-embed-sdk';
+
+const lb = new LiveboardEmbed('#container', {
+    frameParams: {
+        width: '100%',
+        height: '100%',
+    },
+    liveboardId: '<%=liveboardGUID%>',
+    runtimeFilters: [],
+});
+// [Optional]: Register event listeners.
+lb.on(EmbedEvent.LiveboardRendered, (e) => {
+    /* handler */
 });
 
-const liveboardEmbed = new LiveboardEmbed(
-    document.getElementById('ts-embed'),
+// Do not forget to call render.
+lb.render();
+
+// [Optional]: Trigger events on the lb
+lb.trigger(HostEvent.UpdateRuntimeFilters, [
     {
-        frameParams: {
-            width: '100%',
-            height: '100%',
-        },
-        liveboardId: '<%=liveboardGUID%>',
-        vizId: '<%=vizGUID%>',
+        columnName: 'col1',
+        operator: RuntimeFilterOp.EQ,
+        values: ['val1'],
     },
-});
+]);
+----
 
-liveboardEmbed.render();
+`#container` is a selector for the DOM node which the code assumes is already attached to DOM. The SDK will render the ThoughtSpot component inside this container element.
 
-liveboardEmbed.on(EmbedEvent.LiveboardRendered, () => {
-    liveboardEmbed.trigger(HostEvent.SetVisibleVizs, ['viz1', 'viz2']);
-});
+
+== Embed in a React app
+ThoughtSpot provides React components for embedding Search, Liveboard, and the full ThoughtSpot application in a React app. The following code sample shows how to embed a Liveboard component in a React app:
+
+[source,TypeScript]
+----
+import { LiveboardEmbed } from '@thoughtspot/visual-embed-sdk/react';
+
+const App = () => {
+    const embedRef = useEmbedRef();
+    const onLiveboardRendered = () => {
+        embedRef.current.trigger(HostEvent.UpdateRuntimeFilters, [
+            {
+                columnName: 'col1',
+                operator: RuntimeFilterOp.EQ,
+                values: ['val1'],
+            },
+        ]);
+    };
+    return (
+        <LiveboardEmbed
+            ref={embedRef}
+            liveboardId="<liveboard-guid>"
+            onLiveboardRendered={onLiveboardRendered}
+        />
+    );
+};
 ----
 
+For more information, see xref:embed-ts-react-app.adoc[Embed ThoughtSpot in a React app].
+
 ////
 === Embed ThoughtSpot objects
 After you initialize the SDK, create embed object classes and define object properties. +
@@ -208,4 +249,3 @@ For more information about embedding ThoughtSpot app or its objects using SDK, s
 * link:https://github.com/thoughtspot/visual-embed-sdk/blob/main/README.md[Visual Embed SDK GitHub repository, window=_blank]
 * link:https://github.com/thoughtspot/ts_everywhere_resources[ThoughtSpot Everywhere Resources on GitHub, window=_blank]
 * link:https://developers.thoughtspot.com/guides[Visual Embed Tutorials, window=_blank]
-

modules/ROOT/pages/rel-page-sw.adoc

@@ -39,7 +39,7 @@ The minimum SDK version required for embedding ThoughtSpot Software in your app
 
 You can upgrade to a later version if required. However, you must exercise caution before upgrading to a new version because the new versions may introduce breaking changes. The new version may also include APIs, methods, and attributes for features that are not yet available on your ThoughtSpot Software release.
 
-For more information about the SDK versions, supported methods and classes, see xref:api-changelog.adoc[Visual Embed Changelog] and link:{{visualEmbedSDKPrefix}}/modules.html[Visual Embed SDK Reference Guide, window=_blank].
+For more information about the SDK versions, supported methods and classes, see xref:api-changelog.adoc[Visual Embed Changelog] and xref:VisualEmbedSdk.adoc[Visual Embed SDK Reference Guide].
 
 == REST API
 

modules/ROOT/pages/sdk-reference.adoc

@@ -24,8 +24,7 @@ For more specific information on Embed options and functions, see the  link:http
 * link:{{visualEmbedSDKPrefix}}/classes/SearchEmbed.html[SearchEmbed, window=_blank]
 * link:{{visualEmbedSDKPrefix}}/classes/SearchBarEmbed.html[SearchBarEmbed, window=_blank]
 
-For more specific information on Embed options and functions, see the link:{{visualEmbedSDKPrefix}}/modules.html[Visual Embed SDK Reference Guide, window=_blank].
-
+For more specific information on Embed options and functions, see the xref:VisualEmbedSdk.adoc[Visual Embed SDK Reference Guide].
 
 
 == Additional resources

modules/ROOT/pages/visual-embed-sdk.adoc

@@ -98,7 +98,7 @@ Learn how to xref:embed-ts-react-app.adoc[Embed ThoughtSpot in a React app].
 [div boxDiv boxFullWidth]
 --
 
-* link:{{visualEmbedSDKPrefix}}/modules.html[Visual Embed SDK Reference Guide, window=_blank] 
+* xref:VisualEmbedSdk.adoc[Visual Embed SDK Reference Guide]
 * link:https://developers.thoughtspot.com/guides[Visual Embed Tutorials]
 * link:https://github.com/thoughtspot/visual-embed-sdk[Visual Embed SDK GitHub repository, window=_blank]
 * link:https://github.com/thoughtspot/ts_everywhere_resources[ThoughtSpot Everywhere Resources on GitHub, window=_blank]