ThoughtSpot For Developers•3mo ago

Binu Manoharan - Hi Team,We are trying to emb...

Hi Team, We are trying to embed a liveboard within our application and are running into issues. We've tried to implement it similar to how it is done on the react sample app. We don't see an obvious console or network error. Would someone be able to help investigate it further?

3 Replies

Binu ManoharanOP•3mo ago

Thoughtspot.tsx

import React, { FunctionComponent } from 'react';
import { AuthStatus, AuthType, EmbedConfig, init } from '@thoughtspot/visual-embed-sdk';
import { constants } from './constants';
import { Box } from '@mui/material';

export const Thoughtspot: FunctionComponent = ({ children }) => {

    const tsInitialize = () => {
        console.log("Initializing ThoughtSpot SDK");

        // init() function defines basic configuration and auth for all ThoughtSpot embed components
        // https://developers.thoughtspot.com/docs/Interface_EmbedConfig for all configurations
        const ee = init({
            thoughtSpotHost: constants.tsURL,
            authType: AuthType.None,
        } as EmbedConfig);

        // Checks for Auth process completed as expected
        if (ee) {
            ee.on(AuthStatus.SUCCESS, () => {
                console.log("Success");
            })
                .on(AuthStatus.SDK_SUCCESS, () => {
                    console.log("SDK Success");
                })
                .on(AuthStatus.FAILURE, (reason) => {
                    console.log("Failure:  " + reason);
                })
                .on(AuthStatus.SAML_POPUP_CLOSED_NO_AUTH, () => {
                    console.log("SAML Popup Closed No Auth");
                })
                .on(AuthStatus.LOGOUT, () => {
                    console.log("Logout");
                })
                .on(AuthStatus.WAITING_FOR_POPUP, () => {
                    console.log("Waiting for Popup");
                });
        }
    };

    tsInitialize();

    return (
        <Box sx={{ display: 'flex', width: '100%', height: '100%' }}>
            <Box sx={{ display: 'flex', width: '100%', height: '100%' }} id="ts-embed">
                {children}
            </Box>
        </Box>
    );
}

import React, { FunctionComponent } from 'react';
import { AuthStatus, AuthType, EmbedConfig, init } from '@thoughtspot/visual-embed-sdk';
import { constants } from './constants';
import { Box } from '@mui/material';

export const Thoughtspot: FunctionComponent = ({ children }) => {

    const tsInitialize = () => {
        console.log("Initializing ThoughtSpot SDK");

        // init() function defines basic configuration and auth for all ThoughtSpot embed components
        // https://developers.thoughtspot.com/docs/Interface_EmbedConfig for all configurations
        const ee = init({
            thoughtSpotHost: constants.tsURL,
            authType: AuthType.None,
        } as EmbedConfig);

        // Checks for Auth process completed as expected
        if (ee) {
            ee.on(AuthStatus.SUCCESS, () => {
                console.log("Success");
            })
                .on(AuthStatus.SDK_SUCCESS, () => {
                    console.log("SDK Success");
                })
                .on(AuthStatus.FAILURE, (reason) => {
                    console.log("Failure:  " + reason);
                })
                .on(AuthStatus.SAML_POPUP_CLOSED_NO_AUTH, () => {
                    console.log("SAML Popup Closed No Auth");
                })
                .on(AuthStatus.LOGOUT, () => {
                    console.log("Logout");
                })
                .on(AuthStatus.WAITING_FOR_POPUP, () => {
                    console.log("Waiting for Popup");
                });
        }
    };

    tsInitialize();

    return (
        <Box sx={{ display: 'flex', width: '100%', height: '100%' }}>
            <Box sx={{ display: 'flex', width: '100%', height: '100%' }} id="ts-embed">
                {children}
            </Box>
        </Box>
    );
}

Dashboard.tsx

import React, { FunctionComponent } from 'react';
import { Thoughtspot } from './Thoughtspot';
import { Box } from '@mui/material';
import { EmbedEvent, LiveboardEmbed, useEmbedRef } from '@thoughtspot/visual-embed-sdk/react';

export const Dashboard: FunctionComponent = () => {
    const embedRef = useEmbedRef<typeof LiveboardEmbed>();
    const liveboardId = 'e1c79301-d250-457c-a492-29725d0442f4';
    const recordVizPointClick = (e: any) => {
        console.log(e);
    }

    const onLoad = () => {
        console.log(EmbedEvent.Load, {});
    };

    const onLiveboardRendered = () => {
        console.log("liveboard rendered");
    };

    return (
        <Box sx={{ display: 'flex', width: '100%', height: '100%' }}>
            <Thoughtspot>
                <LiveboardEmbed
                    fullHeight={true}
                    ref={embedRef}
                    liveboardId={liveboardId}
                    showLiveboardTitle={true}
                    showLiveboardDescription={true}
                    onLiveboardRendered={onLiveboardRendered}
                    onLoad={onLoad}
                    // visibleActions={[]}
                    onVizPointClick={recordVizPointClick}
                />
            </Thoughtspot>
        </Box>
    );
};

import React, { FunctionComponent } from 'react';
import { Thoughtspot } from './Thoughtspot';
import { Box } from '@mui/material';
import { EmbedEvent, LiveboardEmbed, useEmbedRef } from '@thoughtspot/visual-embed-sdk/react';

export const Dashboard: FunctionComponent = () => {
    const embedRef = useEmbedRef<typeof LiveboardEmbed>();
    const liveboardId = 'e1c79301-d250-457c-a492-29725d0442f4';
    const recordVizPointClick = (e: any) => {
        console.log(e);
    }

    const onLoad = () => {
        console.log(EmbedEvent.Load, {});
    };

    const onLiveboardRendered = () => {
        console.log("liveboard rendered");
    };

    return (
        <Box sx={{ display: 'flex', width: '100%', height: '100%' }}>
            <Thoughtspot>
                <LiveboardEmbed
                    fullHeight={true}
                    ref={embedRef}
                    liveboardId={liveboardId}
                    showLiveboardTitle={true}
                    showLiveboardDescription={true}
                    onLiveboardRendered={onLiveboardRendered}
                    onLoad={onLoad}
                    // visibleActions={[]}
                    onVizPointClick={recordVizPointClick}
                />
            </Thoughtspot>
        </Box>
    );
};

Happy to provide more info if needed. We had Bryant and Bill join us on this. We've managed to identify the issue. On my local system I use a host file entry. e.g.

127.0.0.1 nexus.local

127.0.0.1 nexus.local

When connecting via using nexus.local in my case, it caused this issue.

shikharTS•3mo ago

Is the issue resolved now?

Binu ManoharanOP•3mo ago

Yea, it only works on localhost on dev system, that is good enough for us for now.

Gaming

Programming

Binu Manoharan - Hi Team,We are trying to emb...

Did you find this page helpful?