Skip to content
This repository was archived by the owner on Apr 18, 2024. It is now read-only.

Commit 04c7c24

Browse files
bmartelbmartel
authored
fix: LSDV-5250: Hotkey for creating relations not working (#1472)
* fix: LSDV-5250: Hotkey for creating relations not working * fix the bound usage of relation button to defer to global hotkey when not clicked. * use the updated helpers * Update RegionItem.tsx * linting
1 parent b2b2048 commit 04c7c24

File tree

5 files changed

+197
-25
lines changed

5 files changed

+197
-25
lines changed

‎src/components/SidePanels/DetailsPanel/RegionItem.tsx‎

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -92,7 +92,9 @@ const RegionAction: FC<any> = observer(({
9292
key="relation"
9393
icon={<IconLink/>}
9494
primary={annotation.relationMode}
95-
onClick={() => {
95+
onClick={(_e: any, hotkey?: any) => {
96+
// If this is triggered by a hotkey, defer to the global bound handler for relations to avoid contention.
97+
if (hotkey) return;
9698
if (annotation.relationMode) {
9799
annotation.stopRelationMode();
98100
} else {

‎src/stores/AppStore.js‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -348,7 +348,7 @@ export default types
348348
});
349349

350350
// create relation
351-
hotkeys.overwriteNamed('region:relation', () => {
351+
hotkeys.addNamed('region:relation', () => {
352352
const c = self.annotationStore.selected;
353353

354354
if (c && c.highlightedNode && !c.relationMode) {

‎tests/functional/package.json‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -18,7 +18,7 @@
1818
"cvg:summary": "nyc report --temp-dir=.nyc_output --reporter=text-summary --cwd=. --exclude-after-remap false"
1919
},
2020
"dependencies": {
21-
"@heartexlabs/ls-test": "git+ssh://[email protected]/heartexlabs/ls-frontend-test#10db18256ff84d66da756ab628fd699d6c7f0105"
21+
"@heartexlabs/ls-test": "git+ssh://[email protected]/heartexlabs/ls-frontend-test#0684277a96bd754c7eb0adc3d4d253f443f21566"
2222
},
2323
"devDependencies": {
2424
"ts-loader": "^9.4.2",

‎tests/functional/specs/relations/image_rectangle_regions.cy.ts‎

Lines changed: 190 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,190 @@
1+
import { ImageView, LabelStudio, Relations, Sidebar } from '@heartexlabs/ls-test/helpers/LSF';
2+
3+
const config = `
4+
<View>
5+
<Image name="img" value="$image"></Image>
6+
<RectangleLabels name="tag" toName="img">
7+
<Label value="Planet"></Label>
8+
<Label value="Moonwalker" background="blue"></Label>
9+
<Label value="Moonwalker 1" background="red"></Label>
10+
<Label value="Moonwalker 2" background="pink"></Label>
11+
<Label value="Moonwalker 3" background="yellow"></Label>
12+
</RectangleLabels>
13+
</View>
14+
`;
15+
16+
const image =
17+
'https://htx-misc.s3.amazonaws.com/opensource/label-studio/examples/images/nick-owuor-astro-nic-visuals-wDifg5xc9Z4-unsplash.jpg';
18+
19+
const task = {
20+
id: 1,
21+
annotations: [
22+
{
23+
id: 1001,
24+
result: [
25+
{
26+
id: 'Dx_aB91ISN',
27+
source: '$image',
28+
from_name: 'tag',
29+
to_name: 'img',
30+
type: 'rectanglelabels',
31+
origin: 'manual',
32+
value: {
33+
height: 10.458911419423693,
34+
rotation: 0,
35+
width: 12.4,
36+
x: 50.8,
37+
y: 5.866,
38+
rectanglelabels: ['Moonwalker'],
39+
},
40+
},
41+
{
42+
id: 'Dx_aB91INs',
43+
source: '$image',
44+
from_name: 'tag',
45+
to_name: 'img',
46+
type: 'rectanglelabels',
47+
origin: 'manual',
48+
value: {
49+
height: 10.458911419423693,
50+
rotation: 0,
51+
width: 12.4,
52+
x: 50.8,
53+
y: 25.866,
54+
rectanglelabels: ['Moonwalker 2'],
55+
},
56+
},
57+
{
58+
id: 'Dx_aB91ANs',
59+
source: '$image',
60+
from_name: 'tag',
61+
to_name: 'img',
62+
type: 'rectanglelabels',
63+
origin: 'manual',
64+
value: {
65+
height: 10.458911419423693,
66+
rotation: 0,
67+
width: 12.4,
68+
x: 50.8,
69+
y: 45.866,
70+
rectanglelabels: ['Moonwalker 3'],
71+
},
72+
},
73+
{
74+
id: 'Dx_aB19ISN',
75+
source: '$image',
76+
from_name: 'tag',
77+
to_name: 'img',
78+
type: 'rectanglelabels',
79+
origin: 'manual',
80+
value: {
81+
height: 10.458911419423693,
82+
rotation: 0,
83+
width: 12.4,
84+
x: 50.8,
85+
y: 65.866,
86+
rectanglelabels: ['Planet'],
87+
},
88+
},
89+
],
90+
},
91+
],
92+
predictions: [],
93+
data: { image },
94+
};
95+
96+
describe('Relations: Image Rectangle Regions', () => {
97+
it('Check hotkeys work with the relations action button visible', () => {
98+
LabelStudio.init({
99+
config,
100+
task,
101+
});
102+
103+
Relations.hasRelations(0);
104+
105+
// Select the first region
106+
Sidebar.toggleRegionSelection(0);
107+
108+
// Check that the hotkeys work
109+
Relations.toggleCreationWithHotkey();
110+
111+
// Select the second region
112+
ImageView.clickAtRelative(0.51, 0.26);
113+
114+
// Check that the region is created in the relations panel
115+
Relations.hasRelations(1);
116+
Relations.hasRelation('Moonwalker', 'Moonwalker 2');
117+
118+
// Reslect the first region and create a relation with the third region
119+
ImageView.clickAtRelative(0.51, 0.06);
120+
121+
Relations.toggleCreation();
122+
123+
// Select the third region
124+
ImageView.clickAtRelative(0.51, 0.46);
125+
126+
// Check that the region is created in the relations panel
127+
Relations.hasRelations(2);
128+
Relations.hasRelation('Moonwalker', 'Moonwalker 3');
129+
130+
// Create a relation between the last region and the first
131+
ImageView.clickAtRelative(0.51, 0.66);
132+
133+
Relations.toggleCreation();
134+
135+
ImageView.clickAtRelative(0.51, 0.06);
136+
137+
// Check that the region is created in the relations panel
138+
Relations.hasRelations(3);
139+
Relations.hasRelation('Planet', 'Moonwalker');
140+
});
141+
142+
it('Check hotkeys work without the relations action button visible', () => {
143+
LabelStudio.init({
144+
config,
145+
task,
146+
});
147+
148+
Relations.hasRelations(0);
149+
150+
// With the relations action button not visible
151+
Sidebar.collapseDetailsRightPanel();
152+
153+
// Select the first region
154+
Sidebar.toggleRegionSelection(0);
155+
156+
// Check that the hotkeys work
157+
Relations.toggleCreationWithHotkey();
158+
159+
// Select the second region
160+
ImageView.clickAtRelative(0.51, 0.26);
161+
162+
// Check that the region is created in the relations panel
163+
Sidebar.expandDetailsRightPanel();
164+
Relations.hasRelations(1);
165+
Relations.hasRelation('Moonwalker', 'Moonwalker 2');
166+
167+
// Reslect the first region and create a relation with the third region
168+
ImageView.clickAtRelative(0.51, 0.06);
169+
170+
Relations.toggleCreation();
171+
172+
// Select the third region
173+
ImageView.clickAtRelative(0.51, 0.46);
174+
175+
// Check that the region is created in the relations panel
176+
Relations.hasRelations(2);
177+
Relations.hasRelation('Moonwalker', 'Moonwalker 3');
178+
179+
// Create a relation between the last region and the first
180+
ImageView.clickAtRelative(0.51, 0.66);
181+
182+
Relations.toggleCreation();
183+
184+
ImageView.clickAtRelative(0.51, 0.06);
185+
186+
// Check that the region is created in the relations panel
187+
Relations.hasRelations(3);
188+
Relations.hasRelation('Planet', 'Moonwalker');
189+
});
190+
});

‎tests/functional/yarn.lock‎

Lines changed: 2 additions & 22 deletions
Original file line numberDiff line numberDiff line change
@@ -264,29 +264,9 @@
264264
resolved "https://registry.yarnpkg.com/@discoveryjs/json-ext/-/json-ext-0.5.7.tgz#1d572bfbbe14b7704e0ba0f39b74815b84870d70"
265265
integrity sha512-dBVuXR082gk3jsFp7Rd/JI4kytwGHecnCoTtXFb7DB6CNHp4rg5k1bhg0nWdLGLnOV71lmDzGQaLMy8iPLY0pw==
266266

267-
"@heartexlabs/ls-test@git+ssh://[email protected]/heartexlabs/ls-frontend-test#10db18256ff84d66da756ab628fd699d6c7f0105":
267+
"@heartexlabs/ls-test@git+ssh://[email protected]/heartexlabs/ls-frontend-test#0684277a96bd754c7eb0adc3d4d253f443f21566":
268268
version "1.0.8"
269-
resolved "git+ssh://[email protected]/heartexlabs/ls-frontend-test#10db18256ff84d66da756ab628fd699d6c7f0105"
270-
dependencies:
271-
"@cypress/code-coverage" "^3.10.0"
272-
"@cypress/webpack-preprocessor" "^5.17.0"
273-
chai "^4.3.7"
274-
cypress "^12.9.0"
275-
cypress-multi-reporters "^1.6.2"
276-
cypress-parallel "^0.12.0"
277-
cypress-plugin-snapshots "^1.4.4"
278-
cypress-terminal-report "^5.1.1"
279-
pixelmatch "^5.3.0"
280-
pngjs "^7.0.0"
281-
ts-loader "^9.4.2"
282-
typescript "^4.9.5"
283-
webpack "^5.77.0"
284-
webpack-cli "^5.0.1"
285-
yargs "^17.7.1"
286-
287-
"@heartexlabs/ls-test@git+ssh://[email protected]/heartexlabs/ls-frontend-test#a246796099e14bb83b2fa4b032def594217f2aa6":
288-
version "1.0.8"
289-
resolved "git+ssh://[email protected]/heartexlabs/ls-frontend-test#a246796099e14bb83b2fa4b032def594217f2aa6"
269+
resolved "git+ssh://[email protected]/heartexlabs/ls-frontend-test#0684277a96bd754c7eb0adc3d4d253f443f21566"
290270
dependencies:
291271
"@cypress/code-coverage" "^3.10.0"
292272
"@cypress/webpack-preprocessor" "^5.17.0"

0 commit comments

Comments
 (0)