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

Commit a75b52f

Browse files
nick-skriabinbmartelyyassi-heartex
authored
feat: LSDV-4583-6: Image preloading (#1187)
* Introduce valueList, unify image URL usage * Add e2e * Pagination support * Test pagination * Remove FF enabled * Introduce hotkeys for image page navigations * Fix comma * Item index: filtering, import/export * Proper import/export + initial zoom fix * Fix single image behavior + export * Fix docs * Fix error handling * Remove parsed value cacheing * Remove item_idex when working with single image * Migrate image regions to mutliImage * Switch image when corresponding region is selected * Add image list pre-region example * Fix docs * Fix error handling * Remove parsed value cacheing * Fix description typo Co-authored-by: bmartel <[email protected]> * Use proper destructuring * Remove excess trace Co-authored-by: yyassi-heartex <[email protected]> * Make `includeBbox` readable Co-authored-by: yyassi-heartex <[email protected]> * Add large image list example * Allow images to be preloaded in the background * Fix image ref and loading to enable tools * Fix the glitch on image switching, remove traces * Change hotkey to Ctrl+A/D * Put scroll to region functionality back * Revert unnecessary changes * Revert unnecessary modified files * Temporarily disable pre-commit hooks * Adjust test to match new hotkey * Rollback unnecessary changes * Fix magic wand coordinates lookup * Remove feature flag * Fix gallery layout * Remove hardcoded feature flags * Fix inability to add new regions * Fix image init phase when the task is not yet attached * Fix pagination page indicator auto-width * Rremove unused variable --------- Co-authored-by: bmartel <[email protected]> Co-authored-by: yyassi-heartex <[email protected]>
1 parent 94c62fa commit a75b52f

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

45 files changed

+6572
-271
lines changed

Diff for: ‎e2e/tests/image-list.test.js

+126
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,126 @@
1+
/* global Feature, Scenario, locate */
2+
3+
const { initLabelStudio } = require('./helpers');
4+
5+
Feature('Image list via `valueList`');
6+
7+
const config = `
8+
<View>
9+
<Image name="img" valueList="$images"/>
10+
<RectangleLabels name="tag" toName="img">
11+
<Label value="Planet"></Label>
12+
<Label value="Moonwalker" background="blue"></Label>
13+
</RectangleLabels>
14+
</View>
15+
`;
16+
17+
const data = {
18+
images: [
19+
'https://data.heartex.net/open-images/train_0/mini/00133643bbf063a9.jpg',
20+
'https://data.heartex.net/open-images/train_0/mini/00155094b7acc33b.jpg',
21+
'https://data.heartex.net/open-images/train_0/mini/000e842c55ab7d14.jpg',
22+
'https://data.heartex.net/open-images/train_0/mini/00766c7816e51125.jpg',
23+
],
24+
};
25+
26+
Scenario('Image list rendering', async ({ I, LabelStudio, AtImageView }) => {
27+
LabelStudio.setFeatureFlags({
28+
feat_front_lsdv_4583_multi_image_segmentation_short: true,
29+
});
30+
31+
const params = {
32+
config,
33+
data,
34+
annotations: [{ id: 1, result: [] }],
35+
};
36+
37+
I.amOnPage('/');
38+
I.executeScript(initLabelStudio, params);
39+
40+
await AtImageView.waitForImage();
41+
await AtImageView.lookForStage();
42+
43+
I.seeElement(`img[src="${data.images[0]}"]`);
44+
});
45+
46+
Scenario('Image list with page navigation', async ({ I, LabelStudio, AtImageView }) => {
47+
LabelStudio.setFeatureFlags({
48+
feat_front_lsdv_4583_multi_image_segmentation_short: true,
49+
});
50+
51+
const params = {
52+
config,
53+
data,
54+
annotations: [{ id: 1, result: [] }],
55+
};
56+
57+
const prevPageButton = locate('.lsf-pagination__btn.lsf-pagination__btn_arrow-left');
58+
const nextPageButton = locate('.lsf-pagination__btn.lsf-pagination__btn_arrow-right');
59+
60+
I.amOnPage('/');
61+
I.executeScript(initLabelStudio, params);
62+
63+
await AtImageView.waitForImage();
64+
await AtImageView.lookForStage();
65+
66+
I.say('Loading first image');
67+
I.seeElement(`img[src="${data.images[0]}"]`);
68+
69+
I.say('Pagination is visible');
70+
I.seeElement('.lsf-pagination');
71+
72+
I.say('The number of pages is correct');
73+
I.see('1 of 4');
74+
75+
I.say('Clicking on the next page');
76+
I.click(nextPageButton);
77+
78+
I.say('Loading second image');
79+
I.seeElement(`img[src="${data.images[1]}"]`);
80+
I.see('2 of 4');
81+
82+
I.say('Clicking on the previous page');
83+
I.click(prevPageButton);
84+
I.seeElement(`img[src="${data.images[0]}"]`);
85+
I.see('1 of 4');
86+
});
87+
88+
Scenario('Image list with hotkey navigation', async ({ I, LabelStudio, AtImageView }) => {
89+
LabelStudio.setFeatureFlags({
90+
feat_front_lsdv_4583_multi_image_segmentation_short: true,
91+
});
92+
93+
const params = {
94+
config,
95+
data,
96+
annotations: [{ id: 1, result: [] }],
97+
};
98+
99+
I.amOnPage('/');
100+
I.executeScript(initLabelStudio, params);
101+
102+
await AtImageView.waitForImage();
103+
await AtImageView.lookForStage();
104+
105+
I.say('Loading first image');
106+
I.seeElement(`img[src="${data.images[0]}"]`);
107+
108+
I.say('Pagination is visible');
109+
I.seeElement('.lsf-pagination');
110+
111+
I.say('The number of pages is correct');
112+
I.see('1 of 4');
113+
114+
I.say('Clicking on the next page');
115+
I.pressKey('Ctrl+d');
116+
117+
I.say('Loading second image');
118+
I.seeElement(`img[src="${data.images[1]}"]`);
119+
I.see('2 of 4');
120+
121+
I.say('Clicking on the previous page');
122+
I.pressKey('Ctrl+a');
123+
I.seeElement(`img[src="${data.images[0]}"]`);
124+
I.see('1 of 4');
125+
});
126+

Diff for: ‎examples/image_list/annotations/1.json

+80
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,80 @@
1+
{
2+
"annotations": [
3+
{
4+
"id": "1001",
5+
"lead_time": 15.053,
6+
"result": [
7+
{
8+
"from_name": "tag",
9+
"id": "Dx_aB91ISN",
10+
"source": "$image",
11+
"to_name": "img",
12+
"type": "rectanglelabels",
13+
"item_index": 0,
14+
"value": {
15+
"height": 10.458911419423693,
16+
"rectanglelabels": [
17+
"Moonwalker"
18+
],
19+
"rotation": 0,
20+
"width": 12.4,
21+
"x": 50.8,
22+
"y": 5.869797225186766
23+
}
24+
}
25+
]
26+
}
27+
],
28+
"data": {
29+
"image": "https://htx-misc.s3.amazonaws.com/opensource/label-studio/examples/images/nick-owuor-astro-nic-visuals-wDifg5xc9Z4-unsplash.jpg"
30+
},
31+
"id": 1,
32+
"predictions": [
33+
{
34+
"created_ago": "3 hours",
35+
"model_version": "model 1",
36+
"result": [
37+
{
38+
"from_name": "tag",
39+
"id": "t5sp3TyXPo",
40+
"source": "$image",
41+
"to_name": "img",
42+
"type": "rectanglelabels",
43+
"value": {
44+
"height": 11.612284069097889,
45+
"rectanglelabels": [
46+
"Moonwalker"
47+
],
48+
"rotation": 0,
49+
"width": 39.6,
50+
"x": 13.2,
51+
"y": 34.702495201535505
52+
}
53+
}
54+
]
55+
},
56+
{
57+
"created_ago": "4 hours",
58+
"model_version": "model 2",
59+
"result": [
60+
{
61+
"from_name": "tag",
62+
"id": "t5sp3TyXPo",
63+
"source": "$image",
64+
"to_name": "img",
65+
"type": "rectanglelabels",
66+
"value": {
67+
"height": 33.61228406909789,
68+
"rectanglelabels": [
69+
"Moonwalker"
70+
],
71+
"rotation": 0,
72+
"width": 39.6,
73+
"x": 13.2,
74+
"y": 54.702495201535505
75+
}
76+
}
77+
]
78+
}
79+
]
80+
}

Diff for: ‎examples/image_list/config.xml

+8
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,8 @@
1+
<View>
2+
<Image name="img" valueList="$images"></Image>
3+
4+
<RectangleLabels name="tag" toName="img" fillOpacity="0.5" strokeWidth="5">
5+
<Label value="Planet"></Label>
6+
<Label value="Moonwalker" background="blue"></Label>
7+
</RectangleLabels>
8+
</View>

Diff for: ‎examples/image_list/index.ts

+5
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
import config from './config.xml';
2+
import tasks from './tasks.json';
3+
import annotation from './annotations/1.json';
4+
5+
export const ImageList = { config, tasks, annotation };

Diff for: ‎examples/image_list/tasks.json

+70
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,70 @@
1+
[
2+
{
3+
"data": {
4+
"images": [
5+
"https://data.heartex.net/open-images/train_0/mini/00133643bbf063a9.jpg",
6+
"https://data.heartex.net/open-images/train_0/mini/00155094b7acc33b.jpg",
7+
"https://data.heartex.net/open-images/train_0/mini/000e842c55ab7d14.jpg",
8+
"https://data.heartex.net/open-images/train_0/mini/00766c7816e51125.jpg"
9+
]
10+
},
11+
"predictions": [
12+
{
13+
"model_version": "model 1",
14+
"created_ago": "3 hours",
15+
"result": [
16+
{
17+
"from_name": "tag",
18+
"id": "t5sp3TyXPo",
19+
"source": "$image",
20+
"to_name": "img",
21+
"type": "rectanglelabels",
22+
"value": {
23+
"height": 11.612284069097889,
24+
"rectanglelabels": [
25+
"Moonwalker"
26+
],
27+
"rotation": 0,
28+
"width": 39.6,
29+
"x": 13.2,
30+
"y": 34.702495201535505
31+
}
32+
}
33+
]
34+
},
35+
{
36+
"model_version": "model 2",
37+
"created_ago": "4 hours",
38+
"result": [
39+
{
40+
"from_name": "tag",
41+
"id": "t5sp3TyXPo",
42+
"source": "$image",
43+
"to_name": "img",
44+
"type": "rectanglelabels",
45+
"value": {
46+
"height": 33.61228406909789,
47+
"rectanglelabels": [
48+
"Moonwalker"
49+
],
50+
"rotation": 0,
51+
"width": 39.6,
52+
"x": 13.2,
53+
"y": 54.702495201535505
54+
}
55+
}
56+
]
57+
}
58+
]
59+
},
60+
{
61+
"data": {
62+
"image": "https://htx-misc.s3.amazonaws.com/opensource/label-studio/examples/images/history-in-hd-e5eDHbmHprg-unsplash.jpg"
63+
}
64+
},
65+
{
66+
"data": {
67+
"image": "https://htx-misc.s3.amazonaws.com/opensource/label-studio/examples/images/soroush-karimi-crjPrExvShc-unsplash.jpg"
68+
}
69+
}
70+
]

0 commit comments

Comments
 (0)