Feature("MIG");
|
|
const assert = require("assert");
|
|
const rectConfig = `
|
<View>
|
<Image name="img" valueList="$images"/>
|
<RectangleLabels name="tag" toName="img">
|
<Label value="Planet"></Label>
|
<Label value="Moonwalker" background="blue"></Label>
|
</RectangleLabels>
|
</View>
|
`;
|
|
const brushConfig = `
|
<View>
|
<Image name="img" valueList="$images"/>
|
<BrushLabels name="tag" toName="img">
|
<Label value="Planet"></Label>
|
<Label value="Moonwalker" background="blue"></Label>
|
</BrushLabels>
|
</View>
|
`;
|
|
const data = {
|
images: [
|
"https://data.heartex.net/open-images/train_0/mini/0030019819f25b28.jpg",
|
"https://data.heartex.net/open-images/train_0/mini/00155094b7acc33b.jpg",
|
"https://data.heartex.net/open-images/train_0/mini/00133643bbf063a9.jpg",
|
"https://data.heartex.net/open-images/train_0/mini/0061ec6e9576b520.jpg",
|
],
|
};
|
|
const result = [
|
{
|
original_width: 768,
|
original_height: 576,
|
image_rotation: 0,
|
value: {
|
x: 7.814060788954878,
|
y: 42.05253910374108,
|
width: 11.226011120078905,
|
height: 10.491211550533542,
|
rotation: 0,
|
rectanglelabels: ["Planet"],
|
},
|
id: "SBHuSbuOoI",
|
from_name: "tag",
|
to_name: "img",
|
type: "rectanglelabels",
|
origin: "manual",
|
item_index: 0,
|
},
|
{
|
id: "spPCrj0omt",
|
type: "rectanglelabels",
|
value: {
|
x: 40.237685381355924,
|
y: 22.88135593220339,
|
width: 7.878707627118645,
|
height: 18.64406779661017,
|
rotation: 0,
|
rectanglelabels: ["Moonwalker"],
|
},
|
origin: "manual",
|
to_name: "img",
|
from_name: "tag",
|
item_index: 1,
|
image_rotation: 0,
|
original_width: 768,
|
original_height: 510,
|
},
|
{
|
original_width: 768,
|
original_height: 576,
|
image_rotation: 0,
|
value: {
|
x: 37.190330463635505,
|
y: 50.85521215886758,
|
width: 15.008743610438549,
|
height: 14.539802110423578,
|
rotation: 0,
|
rectanglelabels: ["Planet"],
|
},
|
id: "4SkI4GVN4u",
|
from_name: "tag",
|
to_name: "img",
|
type: "rectanglelabels",
|
origin: "manual",
|
item_index: 0,
|
},
|
];
|
|
Before(async ({ LabelStudio }) => {
|
LabelStudio.setFeatureFlags({
|
fflag_feat_front_lsdv_4583_multi_image_segmentation_short: true,
|
});
|
});
|
|
Scenario("Image list rendering", async ({ I, LabelStudio, AtImageView }) => {
|
const params = {
|
config: rectConfig,
|
data,
|
annotations: [{ id: 1, result: [] }],
|
};
|
|
I.amOnPage("/");
|
LabelStudio.init(params);
|
|
LabelStudio.waitForObjectsReady();
|
await AtImageView.lookForStage();
|
|
I.seeElement(`img[src="${data.images[0]}"]`);
|
});
|
|
Scenario("Image list with page navigation", async ({ I, AtImageView, LabelStudio }) => {
|
const params = {
|
config: rectConfig,
|
data,
|
annotations: [{ id: 1, result: [] }],
|
};
|
|
const prevPageButton = locate(".lsf-pagination__btn.lsf-pagination__btn_arrow-left");
|
const nextPageButton = locate(".lsf-pagination__btn.lsf-pagination__btn_arrow-right");
|
|
I.amOnPage("/");
|
LabelStudio.init(params);
|
|
LabelStudio.waitForObjectsReady();
|
await AtImageView.lookForStage();
|
|
I.say("Loading first image");
|
I.seeElement(`img[src="${data.images[0]}"]`);
|
|
I.say("Pagination is visible");
|
I.seeElement(".lsf-pagination");
|
|
I.say("The number of pages is correct");
|
I.see("1 of 4");
|
|
I.say("Clicking on the next page");
|
I.click(nextPageButton);
|
|
I.say("Loading second image");
|
I.seeElement(`img[src="${data.images[1]}"]`);
|
I.see("2 of 4");
|
|
I.say("Clicking on the previous page");
|
I.click(prevPageButton);
|
I.seeElement(`img[src="${data.images[0]}"]`);
|
I.see("1 of 4");
|
});
|
|
Scenario("Image list with hotkey navigation", async ({ I, AtImageView, LabelStudio }) => {
|
const params = {
|
config: rectConfig,
|
data,
|
annotations: [{ id: 1, result: [] }],
|
};
|
|
I.amOnPage("/");
|
LabelStudio.init(params);
|
|
LabelStudio.waitForObjectsReady();
|
await AtImageView.lookForStage();
|
|
I.say("Loading first image");
|
I.seeElement(`img[src="${data.images[0]}"]`);
|
|
I.say("Pagination is visible");
|
I.seeElement(".lsf-pagination");
|
|
I.say("The number of pages is correct");
|
I.see("1 of 4");
|
|
await AtImageView.multiImageGoForwardWithHotkey();
|
|
I.say("Loading second image");
|
I.seeElement(`img[src="${data.images[1]}"]`);
|
I.see("2 of 4");
|
|
await AtImageView.multiImageGoBackwardWithHotkey();
|
I.seeElement(`img[src="${data.images[0]}"]`);
|
I.see("1 of 4");
|
});
|
|
Scenario("View All disables MIG pagination", async ({ I, AtImageView, LabelStudio }) => {
|
const params = {
|
config: rectConfig,
|
data,
|
annotations: [
|
{ id: 1, result: [] },
|
{ id: 2, result: [] },
|
],
|
additionalInterfaces: ["annotations:view-all"],
|
};
|
|
const prevSelector = ".lsf-pagination__btn_arrow-left";
|
const nextSelector = ".lsf-pagination__btn_arrow-right";
|
|
// FFs for a proper interface with View All button
|
LabelStudio.setFeatureFlags({
|
fflag_feat_front_dev_3873_labeling_ui_improvements_short: true,
|
});
|
|
I.amOnPage("/");
|
LabelStudio.init(params);
|
|
LabelStudio.waitForObjectsReady();
|
await AtImageView.lookForStage();
|
|
I.say("Move to next page to have a changed state");
|
I.click(locate(nextSelector));
|
I.seeElement(`img[src="${data.images[1]}"]`);
|
I.see("2 of 4");
|
|
I.say("Enable View All mode");
|
I.click('[aria-label="Compare all annotations"]');
|
|
I.say("Navigation buttons should be disabled");
|
I.seeElement(locate(`${nextSelector}[class$=disabled]`));
|
I.seeElement(locate(`${prevSelector}[class$=disabled]`));
|
I.see("2 of 4");
|
|
I.say("Hotkeys for navigation should not work");
|
await AtImageView.multiImageGoForwardWithHotkey();
|
I.seeElement(`img[src="${data.images[1]}"]`);
|
I.see("2 of 4");
|
|
await AtImageView.multiImageGoBackwardWithHotkey();
|
I.seeElement(`img[src="${data.images[1]}"]`);
|
I.see("2 of 4");
|
});
|
|
Scenario(
|
"Ensure that results are the same when exporting existing regions",
|
async ({ I, AtImageView, LabelStudio }) => {
|
const params = {
|
config: rectConfig,
|
data,
|
annotations: [{ id: 1, result }],
|
};
|
|
I.amOnPage("/");
|
LabelStudio.init(params);
|
|
LabelStudio.waitForObjectsReady();
|
await AtImageView.lookForStage();
|
|
I.say("Result must be exactly the same as we're not modifying anything");
|
await LabelStudio.resultsNotChanged(result);
|
},
|
);
|
|
Scenario("Image list exports correct data", async ({ I, LabelStudio, AtImageView }) => {
|
const params = {
|
config: rectConfig,
|
data,
|
annotations: [{ id: 1, result }],
|
};
|
|
I.amOnPage("/");
|
LabelStudio.init(params);
|
|
LabelStudio.waitForObjectsReady();
|
await AtImageView.lookForStage();
|
|
AtImageView.multiImageGoForwardWithHotkey();
|
|
LabelStudio.waitForObjectsReady();
|
await AtImageView.lookForStage();
|
I.seeElement(`img[src="${data.images[1]}"]`);
|
|
await LabelStudio.resultsNotChanged(result);
|
});
|
|
Scenario("Regions are not changes when duplicating an annotation", async ({ I, LabelStudio, AtImageView }) => {
|
const params = {
|
config: rectConfig,
|
data,
|
annotations: [{ id: 1, result }],
|
};
|
|
I.amOnPage("/");
|
LabelStudio.init(params);
|
|
LabelStudio.waitForObjectsReady();
|
await AtImageView.lookForStage();
|
|
I.say("Attempting to duplicate an annotaion");
|
I.click('[aria-label="Copy Annotation"]');
|
|
LabelStudio.waitForObjectsReady();
|
await AtImageView.lookForStage();
|
|
I.say("Confirm that result is not changed");
|
await LabelStudio.resultsNotChanged(result);
|
});
|
|
Scenario("No errors during brush export in MIG", async ({ I, LabelStudio, AtImageView, AtLabels, AtPanels }) => {
|
const params = {
|
config: brushConfig,
|
data,
|
annotations: [{ id: 1, result: [] }],
|
};
|
|
const brushRegionPoints = [
|
[20, 20],
|
[20, 40],
|
[40, 40],
|
[40, 20],
|
[20, 20],
|
];
|
const AtDetailsPanel = AtPanels.usePanel(AtPanels.PANEL.DETAILS);
|
|
I.amOnPage("/");
|
LabelStudio.init(params);
|
AtDetailsPanel.collapsePanel();
|
|
LabelStudio.waitForObjectsReady();
|
await AtImageView.lookForStage();
|
|
I.say("Create brush regions on the first image");
|
AtLabels.clickLabel("Moonwalker");
|
AtImageView.drawThroughPoints(brushRegionPoints);
|
|
// @todo: We cannot use these hotkeys due to duplicating regions action used the same hotkey
|
// await AtImageView.multiImageGoForwardWithHotkey();
|
await AtImageView.multiImageGoForward();
|
|
I.pressKey("u");
|
I.say("Create brush regions on the second image");
|
AtLabels.clickLabel("Planet");
|
AtImageView.drawThroughPoints(brushRegionPoints);
|
|
// Brush might not have a chance to finish whatewer it's
|
// doing, so it's safer to wait a little before exporting it
|
I.wait(2);
|
|
const result = await LabelStudio.serialize();
|
|
assert.equal(result.length, 2);
|
});
|
