Trouble connecting to indigo service using ketcher-react

[bhans-uvic]

I am using ketcher-react for my project and want to connect to indigo-service to use the calculate functionality. I am using NextJS as framework of preference but I am pretty sure it should work with other frameworks as well. Does anyone have any ideas on how to make it work or how can I use the ketcher object to fetch information from the editor?

I have the indigo service running as a docker container on my local machine on port 8002.

Here's my component code:

const SketcherEditor = () => {
  //const structServiceProvider = new StandaloneStructServiceProvider();
  const structServiceProvider = new RemoteStructServiceProvider(
    process.env.REACT_APP_API_PATH!,
    {
      "custom header": "value", // optionally you can add custom headers object
    },
  );

  return (
    <Editor
      errorHandler={(message: string) => console.log(message)}
      staticResourcesUrl={process.env.PUBLIC_URL!}
      structServiceProvider={structServiceProvider}
      onInit={(ketcher: Ketcher) => {
        window.ketcher = ketcher;
        window.parent.postMessage(
          {
            eventType: "init",
          },
          "*",
        );
      }}
    />
  );
};

The evironment variables are:
REACT_APP_API_PATH="/v2/indigo"
PUBLIC_URL="http://localhost:8002"

[rrodionov91]

Hi @bhans-uvic
Thank you for raising the issue.
Look's like your code is correct. I did the same and it works:

We have an example of ketcher usage with ssr, but for standalone indigo here https://github.com/epam/ketcher/blob/master/example-ssr/src/app/editor.tsx

Could you please explain the problem in more details?

[bhans-uvic]

That helped, thanks. Please do let me know if your team follows a specific contribution workflow/guide, otherwise I can create a PR with commits similar to the ones I am seeing in the log.

What are your thoughts on the following?
async calculate(options?: CalculateData): Promise<CalculateResult> { if (window.isPolymerEditorTurnedOn) { throw new Error('Calculate is not available in macro mode'); } return await this._indigo.calculate(this.#editor.struct(), options); }

I ended up forking the project and trying it out, I am facing issues with tests when pushing though. Some tests doesn't run and the push stays in stasis for a long time, so I have created the PR by skipping the tests during push:

[bhans-uvic]

Hi @rrodionov91, wanted to follow-up on my PR. We have an event coming up where I would like to present our application. But, we need the calculate functionality for the ideal scenario. Would it be possible to have the API available in a minor release by next week?

[rrodionov91]

Hi @bhans-uvic
Thank you for PR. I just merged it.
Next release date from master branch is on 1 December. I can create dev release for you.

[rrodionov91]

@bhans-uvic
We published 2.28.0-dev.1 with your changes.
Please let me know if something else needed. And thank you again.

[bhans-uvic]

Thank you so much for the quick release @rrodionov91. Truly appreciate it.
You guys are just awesome for making this amazing codebase and application open source for everyone. Please continue the great work! 👍 💯