How to add a custom button to the left of the 'import' button?

[Bradly-s]

How to add a custom button to the left of the 'import' button?

[heidi-humansignal]

Hello,

You can add a custom button to the Data Manager toolbar by creating a new “instrument” and inserting it into the toolbar configuration where you want it to appear (for example, before the “import-button”). Here’s a simple outline of how you might do it:

1. In the file that defines the Data Manager toolbar instruments, for example "web/libs/datamanager/src/components/DataManager/Toolbar/instruments.jsx", create a new item in the exported instruments object. For example:

   export const instruments = { ... "my-custom-button": ({ size }) => { return ( <button style= onClick={() => alert('Custom Button Clicked!')} > Custom Button ); }, "import-button": ({ size }) => { // Existing import button code }, ...};

2. In the Data Explorer or wherever you configure the toolbar array, insert "my-custom-button" to the left of "import-button", for example:

   const toolbar = [[ "columns", "filters", "my-custom-button", // Insert your custom button "import-button", "export-button",],];

That’s it! Your custom button should then show up in the toolbar to the left of the “Import” button.

Try this and let us know.

Thank you,
Abu

Comment by Abubakar Saad
Workflow Run

[Bradly-s]

Hello,

You can add a custom button to the Data Manager toolbar by creating a new “instrument” and inserting it into the toolbar configuration where you want it to appear (for example, before the “import-button”). Here’s a simple outline of how you might do it:

1. In the file that defines the Data Manager toolbar instruments, for example "web/libs/datamanager/src/components/DataManager/Toolbar/instruments.jsx", create a new item in the exported instruments object. For example:
   export const instruments = { ... "my-custom-button": ({ size }) => { return ( <button style= onClick={() => alert('Custom Button Clicked!')} > Custom Button ); }, "import-button": ({ size }) => { // Existing import button code }, ...};
2. In the Data Explorer or wherever you configure the toolbar array, insert "my-custom-button" to the left of "import-button", for example:
   const toolbar = [[ "columns", "filters", "my-custom-button", // Insert your custom button "import-button", "export-button",],];

That’s it! Your custom button should then show up in the toolbar to the left of the “Import” button.

Try this and let us know.

Thank you, Abu

Comment by Abubakar Saad
Workflow Run

After completing these tasks, only run the Django backend service? python label_studio/manage.py runserver

[heidi-humansignal]

Hello,
If you’re modifying the Label Studio frontend code (such as adding a new instrument in "instruments.jsx"), simply running the Django backend with “python label_studio/manage.py runserver” won’t be enough on its own. You also need to compile or rebuild the frontend for your code changes to appear.
There are two main approaches:

1. Build the Frontend Once:

• Make your changes to the code.

• In the Label Studio frontend repository (for example, in “web/”), run something like:

npm install
npm run build
This creates the updated static assets. Then, start the server using your usual backend command.
2. Use a Dev Environment for Iteration:

• Run a development server (e.g., “npm start” or “yarn start”) for the Data Manager.

• Point your Label Studio instance to that dev server by setting the environment variables or config so it loads the toolbar scripts directly from your local dev server.

• This way, changes immediately appear without rebuilding each time.
Whichever approach you choose, you’ll need to do some form of frontend build process for those changes to show up in the Data Manager UI—simply running “runserver” alone won’t serve any newly-edited JavaScript code.

Hope this helps!

Thank you,
Abu

Comment by Abubakar Saad
Workflow Run