HumanSignal / HumanSignal/label-studio
prd: hovering over a region should show all incoming and outgoing relations
- Dominant language
- TypeScript
- Stars
- 28.3k
- Forks
- 3.7k
- Avg merge
- 14h
- Merged PRs (30d)
- 15
Description
*Problem*: Annotated text with a large number of relations is hard to work with: the relation arrows obscure the view, and it is often hard to see which regions have relations and which have none, and where the relations go. In the "Relations" panel, relations can be hidden, and when the user's mouse hovers over a relation in that panel, the relevant arrow is highlighted; but with lots of relations in the panel, and no way to filter the relations, finding a specific one is searching for a needle in a haystack.
*Proof of Concept (PoC) Notes*: There are multiple ways to make working with relations easier:
1. in the "Regions" panel (bottom right): show the number of ingoing/outgoing relations for each region;
2. in the "Relations" panel (bottom right): add a filter for the region number;
3. in a region's "Info" box (top right): add a list of all its existing relations below the "Create a relation between regions" button;
4. clicking an arrow should select the relation.
I think all of these should be implemented, but this prd is about a last option: **hovering over a region should show all incoming and outgoing relations**
Label Studio already has the capability to highlight a relation arrow (when hovered over in the "Relations" panel); this feature reuses the same mechanism.
I have a [fork](https://github.com/pverkind/label-studio/tree/feature/relation-hover-highlight) (of release 1.22.0, not dev) that has implemented this. This GIF shows how it works:
When relations are not hidden, the relations related to the hovered region are highlighted; when relations are hidden, the relations related to the hovered region are shown.
The fork's code was adapted using Claude, with explicit instructions to keep the diff minimal - this issue was written by myself, without LLM assistance.
If the maintainers of the project think this is valuable, I'll be happy to implement this in a fork from the development branch and create pull request.
*User Stories*:
* As a user, I want to be able to see which other regions a specific region is connected so that I can spot mistakes or add missing connections.
* As a user, I want to be able to hover over a region to see its relation so that I can check that each region is connected to the correct region.
Contributor guide
Research direction
Start by comparing the feature/relation-hover-highlight fork with the development branch, focusing on the existing relation-arrow hover highlighting mechanism. Reproduce the annotated-text case with many relations, then verify that hovering a region highlights all incoming and outgoing relations, including when relations are hidden.
Written by the indexing model from the issue text.
Assessment
- Tech stack
- typescript
- Domain
- frontend
- Issue type
- Feature
- Difficulty
- 3/5
- Estimated time
- 1-2 days
- Activity status
- Active
- Clarity
- Mostly clear
- Newbie friendliness
- 68/100