TFD
ThoughtSpot For Developers•3mo ago
rajatgupta

rajatgupta - Hi Team,Facing issue with pre-ren...

Hi Team, Facing issue with pre-render liveboard react components. I am trying to use PreRenderedLiveboardEmbed react component. Initially, I just give it a preRenderId and render it when my application starts. Later on, in a specific route - I use a LiveboardEmbed and pass the preRenderId to it. Both the iframes are present in the application but with zero height. Is my implementation right? We can do a generic pre-render without specifying liveboardId in advance right? Code in thread.
No description
No description
9 Replies
rajatgupta
rajatguptaOP•3mo ago
// wrapper over all routes

import { PreRenderedLiveboardEmbed } from '@thoughtspot/visual-embed-sdk/react';
import { useThoughtSpotInit } from '../hooks/useThoughtSpotInit';
import { ThoughtSpotProvider } from '../providers/ThoughtSpotProvider';

export const ThoughtSpotWrapper = ({
  children,
  isEligibleForThoughtSpot,
}: {
  children: React.ReactNode;
  isEligibleForThoughtSpot: boolean;
}) => {
  const { isInitialized } = useThoughtSpotInit(isEligibleForThoughtSpot);

  return (
    <ThoughtSpotProvider
      isEligibleForThoughtSpot={isEligibleForThoughtSpot}
      isSdkInitialized={isInitialized}
    >
      {isEligibleForThoughtSpot && isInitialized && (
        <PreRenderedLiveboardEmbed preRenderId={'pre-render-123'} />
      )}
      {children}
    </ThoughtSpotProvider>
  );
};
// wrapper over all routes

import { PreRenderedLiveboardEmbed } from '@thoughtspot/visual-embed-sdk/react';
import { useThoughtSpotInit } from '../hooks/useThoughtSpotInit';
import { ThoughtSpotProvider } from '../providers/ThoughtSpotProvider';

export const ThoughtSpotWrapper = ({
  children,
  isEligibleForThoughtSpot,
}: {
  children: React.ReactNode;
  isEligibleForThoughtSpot: boolean;
}) => {
  const { isInitialized } = useThoughtSpotInit(isEligibleForThoughtSpot);

  return (
    <ThoughtSpotProvider
      isEligibleForThoughtSpot={isEligibleForThoughtSpot}
      isSdkInitialized={isInitialized}
    >
      {isEligibleForThoughtSpot && isInitialized && (
        <PreRenderedLiveboardEmbed preRenderId={'pre-render-123'} />
      )}
      {children}
    </ThoughtSpotProvider>
  );
};
// liveboard embed
import {
  LiveboardEmbed,
  useEmbedRef,
  EmbedEvent,
  resetCachedAuthToken,
} from '@thoughtspot/visual-embed-sdk/react';
import PageTitle from 'components/PageTitle';
import { NavBar } from '../NavBar/NavBar';
import { useEffect } from 'react';

export const Liveboard = ({
  liveboardId = '5f0dc1d9-1f22-4ce9-946a-f0495eee88ca',
}) => {
  console.log('<--- liveboardId', liveboardId);
  const embedRef = useEmbedRef<typeof LiveboardEmbed>();

  const onLoad = () => {
    console.log('<--- LiveboardEmbed onLoad fired', EmbedEvent.Load);
  };
  const onLiveboardRendered = () => {
    console.log('<--- LiveboardEmbed onLiveboardRendered fired');
  };

  const onError = (error: any) => {
    console.error('<--- LiveboardEmbed onError:', error);
  };

  return (
    <>
      <PageTitle text="ThoughtSpot Liveboard" />
      <NavBar />
      <div
        style={{
          height: '85vh',
          display: 'flex',
          flexDirection: 'column',
        }}
      >
        <LiveboardEmbed
          ref={embedRef}
          liveboardId={'LIVEBOARD-ID'}
          preRenderId={'pre-render-123'}
          //todo: not taking height properly
          // fullHeight
          onLoad={onLoad}
          onLiveboardRendered={onLiveboardRendered}
          onError={onError}
        />
      </div>
    </>
  );
};
// liveboard embed
import {
  LiveboardEmbed,
  useEmbedRef,
  EmbedEvent,
  resetCachedAuthToken,
} from '@thoughtspot/visual-embed-sdk/react';
import PageTitle from 'components/PageTitle';
import { NavBar } from '../NavBar/NavBar';
import { useEffect } from 'react';

export const Liveboard = ({
  liveboardId = '5f0dc1d9-1f22-4ce9-946a-f0495eee88ca',
}) => {
  console.log('<--- liveboardId', liveboardId);
  const embedRef = useEmbedRef<typeof LiveboardEmbed>();

  const onLoad = () => {
    console.log('<--- LiveboardEmbed onLoad fired', EmbedEvent.Load);
  };
  const onLiveboardRendered = () => {
    console.log('<--- LiveboardEmbed onLiveboardRendered fired');
  };

  const onError = (error: any) => {
    console.error('<--- LiveboardEmbed onError:', error);
  };

  return (
    <>
      <PageTitle text="ThoughtSpot Liveboard" />
      <NavBar />
      <div
        style={{
          height: '85vh',
          display: 'flex',
          flexDirection: 'column',
        }}
      >
        <LiveboardEmbed
          ref={embedRef}
          liveboardId={'LIVEBOARD-ID'}
          preRenderId={'pre-render-123'}
          //todo: not taking height properly
          // fullHeight
          onLoad={onLoad}
          onLiveboardRendered={onLiveboardRendered}
          onError={onError}
        />
      </div>
    </>
  );
};
shikharTS
shikharTS•3mo ago
@jbc can you take a look at this?
Justin Mathew
Justin Mathew•3mo ago
@rajatgupta this looks correct. i think the reason is because of css can you add some css which targets the div wrapping embed , with height: 100%; or alternatively pass framHeight as viewConfig @rajatgupta i've created a working example with bunch of options here , might be helpful https://codesandbox.io/p/sandbox/github/thoughtspot/developer-examples/tree/main/visual-embed/pre-rendering
rajatgupta
rajatguptaOP•3mo ago
I have tried changing the CSS. If I give the pre-render-id to the liveboard then it doesn't work. Height is still zero. Otherwise, if I pass the frameParams without the pre-render-id then it shows up. 
      <div
        style={{
          width: '100%',
          minHeight: '800px',
          height: 'auto',
          display: 'flex',
          flexDirection: 'column',
        }}
      >
        <LiveboardEmbed
          ref={embedRef}
          liveboardId={''}
          preRenderId={'pre-render-123'}
          frameParams={{
            height: '100vh',
            width: '85vw',
          }}
          onLoad={onLoad}
          onLiveboardRendered={onLiveboardRendered}
          onError={onError}
        />
      <div
        style={{
          width: '100%',
          minHeight: '800px',
          height: 'auto',
          display: 'flex',
          flexDirection: 'column',
        }}
      >
        <LiveboardEmbed
          ref={embedRef}
          liveboardId={''}
          preRenderId={'pre-render-123'}
          frameParams={{
            height: '100vh',
            width: '85vw',
          }}
          onLoad={onLoad}
          onLiveboardRendered={onLiveboardRendered}
          onError={onError}
        />
    <ThoughtSpotProvider
      isEligibleForThoughtSpot={isEligibleForThoughtSpot}
      isSdkInitialized={isInitialized}
    >
      {isEligibleForThoughtSpot && isInitialized && (
        <div className={styles.embedInit}>
          <PreRenderedLiveboardEmbed preRenderId={'pre-render-123'} />
        </div>
      )}
      {children}
    </ThoughtSpotProvider>
    <ThoughtSpotProvider
      isEligibleForThoughtSpot={isEligibleForThoughtSpot}
      isSdkInitialized={isInitialized}
    >
      {isEligibleForThoughtSpot && isInitialized && (
        <div className={styles.embedInit}>
          <PreRenderedLiveboardEmbed preRenderId={'pre-render-123'} />
        </div>
      )}
      {children}
    </ThoughtSpotProvider>
Also, fullHeight param is not working
Justin Mathew
Justin Mathew•3mo ago
@rajatgupta can you pass these to the PreRenderedLiveboardEmbed
rajatgupta
rajatguptaOP•3mo ago
Thanks, passing frameParams to PreRenderedLiveboardEmbed works but instead of liveboard - its opening up the full app embed. Also, when I directly go to the route where liveboard is embedded then it's not showing up.
No description
Justin Mathew
Justin Mathew•3mo ago
@rajatgupta its cause you are not passing liveboard id its empty passing a liveboardid in liveboardEmbed should solve this
rajatgupta
rajatguptaOP•3mo ago
I am passing a liveboardId - in the code sample I have shared - I have intentionally left it. 
  return (
    <ThoughtSpotProvider
      isEligibleForThoughtSpot={isEligibleForThoughtSpot}
      isSdkInitialized={isInitialized}
    >
      {isEligibleForThoughtSpot && isInitialized && (
        <div className={styles.embedInit}>
          <PreRenderedLiveboardEmbed
            preRenderId="pre-render-123"
            frameParams={{
              height: '100vh',
              // width: '85vw',
            }}
          />
        </div>
      )}
      {children}
    </ThoughtSpotProvider>
  );
  return (
    <ThoughtSpotProvider
      isEligibleForThoughtSpot={isEligibleForThoughtSpot}
      isSdkInitialized={isInitialized}
    >
      {isEligibleForThoughtSpot && isInitialized && (
        <div className={styles.embedInit}>
          <PreRenderedLiveboardEmbed
            preRenderId="pre-render-123"
            frameParams={{
              height: '100vh',
              // width: '85vw',
            }}
          />
        </div>
      )}
      {children}
    </ThoughtSpotProvider>
  );
        <LiveboardEmbed
          ref={embedRef}
          liveboardId="LIVEBOARD_ID"
          preRenderId="pre-render-123"
          //todo: not taking height properly
          // fullHeight
          frameParams={{
            height: '100vh',

          }}
          onLoad={onLoad}
          onLiveboardRendered={onLiveboardRendered}
          onError={onError}

        />
        <LiveboardEmbed
          ref={embedRef}
          liveboardId="LIVEBOARD_ID"
          preRenderId="pre-render-123"
          //todo: not taking height properly
          // fullHeight
          frameParams={{
            height: '100vh',

          }}
          onLoad={onLoad}
          onLiveboardRendered={onLiveboardRendered}
          onError={onError}

        />
Justin Mathew
Justin Mathew•3mo ago
@rajatgupta was the other liveboard issue solved ? i hope that was the core issue ?

Did you find this page helpful?