Integrating Label Studio Data: A Step-by-Step Guide Using Jet Admin

Published on March 13, 2023

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 essesntial requirements.

Create Project

Assume that you have an account at jetadmin.io. Go to https://app.jetadmin.io and choose New App.

image

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.

image

Establish database connection

Enter your database connection information then click on the Test Connection to 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.

image

Prepare your data using SQL

Choose Blank layout. Then, hover over the database icon and choose PostgreSQL

image

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.

SELECT project.id, project.title AS title, project.description, SUM(CASE WHEN task.is_labeled THEN 1 ELSE 0 END) AS done_tasks, COUNT(task.id) AS total_tasks,
    string_agg(DISTINCT CASE WHEN htx_user.id > 0 THEN CONCAT(htx_user.first_name, '(',  user_task_counter.total_completed, ')') ELSE NULL END, ', ') AS completed_by_list
FROM project
INNER JOIN task ON task.project_id = project.id
LEFT JOIN task_completion ON task_completion.task_id = task.id
LEFT JOIN htx_user ON htx_user.id = task_completion.completed_by_id
LEFT JOIN (
    SELECT DISTINCT(completed_by_id), COUNT(task.id) as total_completed, task.project_id
    FROM task, task_completion
    WHERE task_completion.task_id = task.id
    GROUP BY completed_by_id, project_id
) user_task_counter ON (task.project_id = user_task_counter.project_id AND htx_user.id = user_task_counter.completed_by_id)
GROUP BY project.id
ORDER BY id DESC

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.

image

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

image

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:

image

Now the list is ready.

Let’s add a search box. Drag and drop Filter from the Lists section on the right-hand side of the screen.

image

Click Bind to Component button, then select Projects with number of done tasks or whatever you named the data source.

image

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.

image

Preview and publish

Let us press the Preview button on the header. If you like it, click the Publish button.

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.