OVE: cutsitesSelector slowing down app

[manulera]

Hi @tnrich,

Sorry for the bombardment of issues. I don't expect quick answers!

I have built a small prototype that uses OVE to render the cloning history of a plasmid. Here is a link to an old hosted version using an older OVE version (click on load example to see a tree like below).

I am fairly new to React, but I think I am having some performance issues related to cutsitesSelector. The problem occurs because of this component that uses <CircularView> or <LinearView>. There are several of those components on the screen at the same time.

The problem does not have to do with rendering, because the response is slow even when the component does not re-render or re-run (the code is not executed, I have some console.logs inside). I think the problem is comparing the previous and current state inside these components.

I used the chrome profiler, and this is what it shows:

My understanding is that what is taking up time is comparing states of the cutsites in the <CircularView> or <LinearView> elements. Any advice on how to address this? Is there a way to disable cutsite functionality for the individual components or app-wide? For now I don't really need it.

Thanks for your time!

[tnrich]

Hi @manulera are you using a new <Editor/> component for each visualization? If so that might indeed get pretty heavy. I would recommend checking out the <SimpleCircularOrLinearView/> component:

https://teselagen.github.io/tg-oss/ove/#/SimpleCircularOrLinearView?circular=true&minimalPreviewTypeBtns=false&withChoosePreviewType=true

That component will not try to compute any cutsites by default

[manulera]

Yes! That worked like a charm. Thank you so much! With this I was even be able to remove the OVE store entirely from the application.

[manulera]

Hi @tnrich, just a follow-up on this. I have removed the store import from the component file, and I am able to render the element like this:

<SimpleCircularOrLinearView {...{ sequenceData: seq, editorName, height: seq.circular ? null : 'auto' }} />

However, this does not work without me instantiating the store in the main app store. Am I using it wrong, or would this require a function like the ones in createVectorEditor file? This is how I am currently rendering the main editor, which works even if I dont use the OVE reducers in the main store:

React.useEffect(() => {
    const editorProps = {
      sequenceData: seq,
      ...defaultMainEditorProps,
    };
    const editor = createVectorEditor(nodeRef.current, { editorName, height: '800' });
    editor.updateEditor(editorProps);
  }, [seq]);

  return (<div ref={nodeRef} />);

[manulera]

Hi @tnrich is there a way to prevent cutsitesSelector from running when an editor is displayed via properties? When doing a profiling it takes up almost all the time. If an editor does not need to show them, it would be great if it does not have to re-compute them.

Also, I wonder if it could be memoized in some way so hiding and showing the editor does not need to call cutsitesSelector over an over?

[tnrich]

prevent cutsitesSelector from running when an editor is displayed via properties

Hi @manulera what do you mean by displayed via properties ?

[tnrich]

Can you perhaps show a couple profiling screenshots and a bit more info on when you're experiencing the slowdown @manulera ?