Create custom top toolbar buttons

[mwojcikowski]

I'd like to be able to add custom top toolbar icon, which could be linked with certain functionality, preferably custom script.
Currently it looks like I'm only able to toggle on/off the preselected tools. It would be great if you could add more to the right or any other order specified in drawer config.

The click action should be able to grab the current selection so that the operations are performed only on certain bonds/atoms.
In particular I'm interested in setting Molfile reacting center status on bonds using single button click for all selected bonds. Now it requires at least 3 additional clicks, after the user has selected bonds.

[Nitvex]

Hi, @mwojcikowski!
Thank you for your suggestion. We appreciate that.
We have such a feature in our roadmap, but according to our timeline it is highly unlikely that we will develop it till the end of December.

[mwojcikowski]

Hi @Nitvex! Could you elaborate more on the timeline? Not getting it in 2022 should be fine, I think. Could you elaborate more on the timeline? Would you say it's probable to get it done in Q1 2023?

[Nitvex]

Sorry, but, unfortunately, we can not provide you a concrete deadline. Let's stay in touch.

[vanoprenko]

Hi @mwojcikowski, thank you for reaching out. We are thinking about possible solutions and are currently leaning towards the following one:

• You build your custom version of Ketcher modifying a config file and adding your own custom button to the upper toolbar;
• In runtime you use Ketcher JS API to subscribe for 'button pressed' events;
• In the event handler you use Ketcher API to pull needed information about current structure and selection, and then apply needed actions.

Does this sound like something you're looking for? Which exact functions you will need in API?

[yauhen-karmyzau]

As a Developer, I want to easily create custom buttons for the Ketcher application through configuration, so that I can extend the functionality of Ketcher with specific actions that are executed via JavaScript on a button click.

Acceptance Criteria:

1. Developers should be able to define custom buttons in a configuration file. The configuration should specify the icon, the tooltip and the JavaScript code to be executed on click.
2. Each custom button, if it is configured, should have an associated icon.
3. The buttons should represent click behaviour (change background colour when active, as it work with the standard buttons).
4. Upon clicking a custom button, the JavaScript code associated with that button should be executed.
5. Custom buttons should be displayed in the top menu of the Ketcher application, adjacent to existing buttons but separated by a visual divider to distinguish them from default buttons.
6. The process for adding, modifying, or removing custom buttons should be documented clearly to assist developers in making changes efficiently - will be covered in #5434
7. In a small application window, custom buttons should be hidden under a dropdown.

[ivanmaslow]

New AC are added, confirmed with @AlexanderSavelyev:

• If any tool is selected and user clicks to custom button, selection of tools doesn't disappear;
• If view only mode doesn't affect custom button, they are always available;

[ivanmaslow]

Exploratory testing is completed on polymer test environment with custom-buttons-example branch:

• This feature can't be tested on RC env, because it requires special configuration of custom buttons in the code
• Ketcher [Version 2.26.0-rc.1] Build at 2024-10-11; 07:58:35
• Indigo Version 1.25.0-rc.1.0-g704673fcb-wasm32-wasm-clang-19.0.0
• Desktop, Windows 11 Enterprise
• Chrome, Version 129.0.6668.100 (Official Build) (64-bit)

No tests are added to xls, because automation isn't required for this specific use case scenario.
For testing 10 custom buttons are added, the first one changes zoom to 200% on click and outputs in console custom_0:

After clicking the custom buttons 2...10 outputs in console: "custom_0"..."custom_9"
Tests below are covered during exploratory testing:

• Each custom button is clickable and works as expected as defined in code (no errors are in console);
• Each custom button has an appropriate tooltip "CustomButton" as defined in code;
• If a user selects any other tool and clicks on custom button, selection of tool isn't removed;
• Using custom buttons doesn't affect elements on Canvas except for a pre-defined scenario for each custom button;
• If a user switches to Macro and goes back to Mictro - custom buttons are still displayed and clickable;
• If a user refreshes the page - custom buttons are still displayed;
  Video is attached:

chrome_I4SjQCyU0E.mp4