ThoughtSpot For Developers•7mo ago

Hi team!

Hi team! Summary: How can I properly register TS events? Details: I am getting this error from ThoughSpot: Please register event handlers before calling render (it triggers for every single event that I have). I already tried to register ThoughtSpot events in the react useEffect, also at another ts.event like embedRef.current.on(EmbedEvent.APP_INIT, () => {}), also (init, load). Also, on.init didn't work and kind of drives me to a loop because how can I register the init event before render? Any guidance would be much appreciated. Thanks!

15 Replies

GeovaneOP•7mo ago

Example

jbc•7mo ago

@Geovane Do you have a snippet for what you are trying here? For registering the events for react embed, you can directly pass the callbacks as react props but add a on at the front. Sample:

<LiveboardEmbed onAPP_INIT={() => {}} liveboardId={id} />

<LiveboardEmbed onAPP_INIT={() => {}} liveboardId={id} />

https://visual-embed-sdk.vercel.app/docs/react-app-embed#_code_sample_3

Embed with React components

You can use visual embed SDK to embed ThoughtSpot search, Liveboard, visualizations, or the full app in a React application

Justin Mathew•7mo ago

@Geovane you might be calling theses before calling .render() are you using react ? if so you can follow the method suggested by @jbc

GeovaneOP•7mo ago

Thank you @Justin Mathew @jbc . I am using react. I will test the above and back to you with the outcome 😇 @jbc @Justin Mathew I appreciate the help, but I am still getting the same issue. I am using the SearchEmbed instead of the LiveboardEmbed, would it be a problem? I will show you some of my tries to assist: Note:

const registerEvents = () => {} <----- It is a function where I register all my events (searchEmbedRef.current.on(someEvent..., {}))`

const registerEvents = () => {} <----- It is a function where I register all my events (searchEmbedRef.current.on(someEvent..., {}))`

Example1: What you suggested (or closer to)

<SearchEmbed
  ref={searchEmbedRef}
  onAPP_INIT={registerEvents}
  ...
/>

<SearchEmbed
  ref={searchEmbedRef}
  onAPP_INIT={registerEvents}
  ...
/>

---- Example2: Try through the EmbedEvent Another try that I did was, inside of my useEffect:

searchEmbedRef.current.on(EmbedEvent.APP_INIT, () => {
  registerEvents();
});

searchEmbedRef.current.on(EmbedEvent.APP_INIT, () => {
  registerEvents();
});

---- Example3: What you suggested Finally, I repeated what you suggested but now encapsulating the onAPP_INIT function call:

<SearchEmbed
  ref={searchEmbedRef}
  onAPP_INIT={() => {
    registerEvents();
  }}
  ...
/>

<SearchEmbed
  ref={searchEmbedRef}
  onAPP_INIT={() => {
    registerEvents();
  }}
  ...
/>

What could I be missing? Thanks in advance 🙏

jbc•7mo ago

@Geovane With the react elements you would need to send all your events as onSomeEvent to your element. Essentially,

searchEmbedRef.current.on(someEvent1, () => console.log('Some event 1')
searchEmbedRef.current.on(someEvent2, () => console.log('Some event 2')

searchEmbedRef.current.on(someEvent1, () => console.log('Some event 1')
searchEmbedRef.current.on(someEvent2, () => console.log('Some event 2')

This becomes,

<SearchEmbed
    ref={searchEmbedRef}
    onSomeEvent1={() => console.log('Some event 1')}
    onSomeEvent2={() => console.log('Some event 2')}
 />

<SearchEmbed
    ref={searchEmbedRef}
    onSomeEvent1={() => console.log('Some event 1')}
    onSomeEvent2={() => console.log('Some event 2')}
 />

GeovaneOP•7mo ago

@jbc thank you SO much! That did work!!!! But now, my react component has a button that I disabled through a React State when the Answer is at READ_ONLY. Every time it changes it is re-rendering the whole TS Embed 😢 . It may be probably an issue with my React, but even using memo it is not working. Do you know about something that could be helpful? No problem if not 🙂

jbc•7mo ago

I see, let me check if we could optimize some of that part on the Embed SDK. But, you could make sure your all your event handlers are wrapped in useCallback. Without that every re-render creates a new function, and those new functions would be considered change in props causing the SDK to re-render the TS Embed again. Another suggestion, you could move out the TS embed related component along with the event handlers to a different component and wrap it with React.memo. If the changing state is outside this component, and isn't passed as a prop to this component, it should avoid any of the re-renders.

GeovaneOP•7mo ago

Another suggestion, you could move out the TS embed related component along with the event handlers to a different component and wrap it with React.memo. If the changing state is outside this component, and isn't passed as a prop to this component, it should avoid any of the re-renders.

That was my initial try, but it didn't work 😢 . I will try the other suggestion, hope I can make it work. Thanks @jbc ! 🦸 @jbc unfortunately, I am still not able to make it work.

let me check if we could optimize some of that part on the Embed SDK.

Did you get any luck with the optimization? What I have so far is (a summarized version): I want to enable/disable a button when I receive data from my SearchEmbed.

const [isDisabled, setIsDisabled] = useState<boolean>(true);
const MemoizedSearchEmbed = memo(SearchEmbed);
...
<div>
  <MemoizedSearchEmbed
    ref={searchEmbedRef}
    onData={(response) => onDataReceived(response)} <------
  />
</div>
<div>
  <MyButtonComponent disabled={isDisabled}> My Button </MyButtonComponent>
</div>

const [isDisabled, setIsDisabled] = useState<boolean>(true);
const MemoizedSearchEmbed = memo(SearchEmbed);
...
<div>
  <MemoizedSearchEmbed
    ref={searchEmbedRef}
    onData={(response) => onDataReceived(response)} <------
  />
</div>
<div>
  <MyButtonComponent disabled={isDisabled}> My Button </MyButtonComponent>
</div>

Then my function is defined as:

const onDataReceived = useCallback(async (response: MessagePayload) => {
  setIsDisabled(false) <-------- This triggers the TSEmbed re-render. If I remove it, it works...
}, [])

const onDataReceived = useCallback(async (response: MessagePayload) => {
  setIsDisabled(false) <-------- This triggers the TSEmbed re-render. If I remove it, it works...
}, [])

I am stuck on it for days without success 😢 Before when I was doing inside of my useEffect:

searchEmbedRef.current.on(EmbedEvent.Data, async (response) => { setIsDisabled(false) })

searchEmbedRef.current.on(EmbedEvent.Data, async (response) => { setIsDisabled(false) })

It was working well without any re-render (however I was getting that error message "Please register event handlers before calling render")

jbc•7mo ago

You would need to avoid this onData={(response) => onDataReceived(response)} as it creates a new function here. You could pass onData={onDataReceived} the function directly. I will get back on the render optimization part, but I have a internal ticket added to work this.

GeovaneOP•7mo ago

You could pass onData={onDataReceived} the function directly.

@jbc That is right, I did that too later but the issue persisted 😅 At some point I start to try so many things when I am in scenarios like that, that I literally try everything 😅

jbc•7mo ago

Can you try something like this:

const SearchEmbedComp = React.memo(({
  onDataReceived
}) => {
  return (
    <SearchEmbed
      ref={searchEmbedRef}
      onData={onDataReceived}
    />
  );
});

const MainComp = () => {
  const [isDisabled, setIsDisabled] = useState<boolean>(true);

  const onDataReceived = useCallback(async (response: MessagePayload) => {
    setIsDisabled(false);
  }, [])

  return (
    <>
      <div>
        <SearchEmbedComp
          onDataReceived={onDataReceived}
        />
      </div>
      <div>
        <MyButtonComponent disabled={isDisabled}> My Button </MyButtonComponent>
      </div>
    </>
  );
}

const SearchEmbedComp = React.memo(({
  onDataReceived
}) => {
  return (
    <SearchEmbed
      ref={searchEmbedRef}
      onData={onDataReceived}
    />
  );
});

const MainComp = () => {
  const [isDisabled, setIsDisabled] = useState<boolean>(true);

  const onDataReceived = useCallback(async (response: MessagePayload) => {
    setIsDisabled(false);
  }, [])

  return (
    <>
      <div>
        <SearchEmbedComp
          onDataReceived={onDataReceived}
        />
      </div>
      <div>
        <MyButtonComponent disabled={isDisabled}> My Button </MyButtonComponent>
      </div>
    </>
  );
}

memo() needs to be outside the render scope, or it would just be creating new memoised instance every re-render and would be working the same as without it. This should ensure no re-renders are propagated to SearchEmbedComp as none of the props would be changing here, and inside this component, we would embed the SearchEmbed regularly

GeovaneOP•7mo ago

Thank @jbc, but unfortunately the same issue persists. I applied what you suggested. Then, after persisting with the issue I migrated my SearchEmbedComp to another file and exported that to be used on my MainComp . The code in general works, I can visualize and save Answers... However, every time the state of the button changes, my TS SearchEmbed reloads/re-render 😢

jbc•6mo ago

That's odd. I would expect there to be no renders propagated to SearchEmbedComp which causes it to reload. Would you be able to share any codepen example? I can try checking what's going wrong there

GeovaneOP•6mo ago

Yeah me too at this point. I will send in a DM @jbc , but let me try once more and review the code. It was very late for me yesterday when I tired @jbc THE HERO! I still needed to make a few adjustments in my code and refs, but thanks to you I was able to get it through! THANK YOU SO MUCH !!!!

jbc•6mo ago

That's great!!

Gaming

Programming

Hi team!

Did you find this page helpful?