By Hyuntaek Park
Senior full-stack engineer at TWIGFARM
At TWIGFARM, we use Label Studio extensively for data labeling, such as image classifications, object detection, and text labeling from images. One of the pain points we faced was that there were many tedious tasks just to view who did which tasks in projects.
Label Studio uses Postgres as its database, and integrating it into Jet Admin is quite simple.
Requirements
We needed an admin tool to achieve the above goals, but all of our developers are busy building other products. We wanted to minimize our efforts to build a tool that could show the list with the following columns:
- Project ID
- Title
- Description
- Done tasks
- Total tasks
- Names of contributors
Pagination of the list and filtering features is also essential requirements.
Create Project
Assume that you have an account at jetadmin.io. Go to https://app.jetadmin.io and choose New App.
Choose whatever you want for “WHAT ARE YOU LOOKING TO BUILD” and there might be another questions. You can fill them out or choose Skip.
Choose Resource
The next part is important. Since Label Studio uses PostgreSQL, choose “PostgreSQL,” as shown in the following screenshot.
Establish database connection
Enter your database connection information then click on the Test Connectionto check if the connection is successfully established. Make sure your PostgreSQL is accessible from the Jet Admin IP shown on the screen. If the connection is successful, click Add resource button.
Prepare your data using SQL
Choose Blank layout. Then, hover over the database icon and choose PostgreSQL
Choose Create with SQL query and name it whatever you want. I will just name it “Projects with number of done tasks”. Click Create button.
I have the following SQL query. Some optimizations can be done, but itfulfills the requirements for now.
Press the Play symbol to run the query. Validate if this is the data you would like to see.
I get results like the following. Note that I hid columns with sensitive information.
If you are satisfied with the result, then press Save button, or play more with the SQL query until you get the result that you desire.
Page layouts
Now the recipe is prepared. It is time to configure the list screen with a search feature.
List
Choose Blank and click Continue button.
Drag and drop Container and then a Table component from the right-hand side of the screen to the center of the screen. Choose data sources as the following:
Now the list is ready.
Search Box
Let’s add a search box. Drag and drop Filter from the Lists section on the right-hand side of the screen.
Click Bind to Component button, then select Projects with number of done tasks or whatever you named the data source.
Choose + Add a Filter. I want my filter to be used to display a list containing the substring of the title that the user entered. So it looks like the following screenshot.
Preview and publish
Let us press the Preview button on the header. If you like it, click the Publishbutton.
There might be a few things that you might want to change to make it more intuitive and fancy. It is your time to navigate the rest of Jet Admin and refine as much as you want. Then publish your work.
You might also want to modify the SQL query to fulfill your own requirements. I hope this tutorial about Jet Admin saves your time building the admin page.
