From ebf3e9a6aee3914d79b5dbb44470899b2d3b676b Mon Sep 17 00:00:00 2001
From: Sashank Aryal <sashank2012@gmail.com>
Date: Thu, 14 Nov 2024 21:57:41 -0600
Subject: [PATCH] add e2e for detection mask paths

---
 .../oss/specs/overlays/detection-mask.spec.ts |  89 +++++++++++++++---
 .../grid-detections-chromium-darwin.png       | Bin 0 -> 1034 bytes
 2 files changed, 75 insertions(+), 14 deletions(-)
 create mode 100644 e2e-pw/src/oss/specs/overlays/detection-mask.spec.ts-snapshots/grid-detections-chromium-darwin.png

diff --git a/e2e-pw/src/oss/specs/overlays/detection-mask.spec.ts b/e2e-pw/src/oss/specs/overlays/detection-mask.spec.ts
index e1664cdd378..e4dd48a7dd9 100644
--- a/e2e-pw/src/oss/specs/overlays/detection-mask.spec.ts
+++ b/e2e-pw/src/oss/specs/overlays/detection-mask.spec.ts
@@ -1,10 +1,17 @@
-import { test as base } from "src/oss/fixtures";
+import { test as base, expect } from "src/oss/fixtures";
 import { GridPom } from "src/oss/poms/grid";
 import { ModalPom } from "src/oss/poms/modal";
 import { getUniqueDatasetNameWithPrefix } from "src/oss/utils";
 
 const datasetName = getUniqueDatasetNameWithPrefix("detection-mask");
-const testImgPath = "/tmp/detection-mask-img.png";
+
+const colors = ["#ff0000", "#00ff00", "#0000ff"];
+
+const badDetectionMaskSampleImage = "/tmp/detection-bad-mask-img.png";
+const goodDetectionMaskSampleImage = "/tmp/detection-good-mask-img.png";
+const goodDetectionMaskPathSampleImage = "/tmp/detection-mask-path-img.png";
+
+const goodDetectionMaskOnDisk = "/tmp/detection-mask-on-disk.png";
 
 const test = base.extend<{ modal: ModalPom; grid: GridPom }>({
   modal: async ({ page, eventUtils }, use) => {
@@ -16,22 +23,37 @@ const test = base.extend<{ modal: ModalPom; grid: GridPom }>({
 });
 
 test.beforeAll(async ({ fiftyoneLoader, mediaFactory }) => {
-  await mediaFactory.createBlankImage({
-    outputPath: testImgPath,
-    width: 25,
-    height: 25,
-  });
+  await Promise.all(
+    [
+      badDetectionMaskSampleImage,
+      goodDetectionMaskSampleImage,
+      goodDetectionMaskPathSampleImage,
+    ].map((img, index) => {
+      const fillColor = colors[index];
+      mediaFactory.createBlankImage({
+        outputPath: img,
+        width: 25,
+        height: 25,
+        fillColor: fillColor,
+      });
+    })
+  );
 
   await fiftyoneLoader.executePythonCode(
     `
         import fiftyone as fo
+        import numpy as np
+
+        from PIL import Image
 
         dataset = fo.Dataset("${datasetName}")
         dataset.persistent = True
-        
-        dataset.add_sample(fo.Sample(filepath="${testImgPath}"))
-        sample = dataset.first()
-        sample["ground_truth"] = fo.Detections(
+
+        samples = []
+
+        # sample with bad detection mask
+        badDetectionMaskSample = fo.Sample(filepath="${badDetectionMaskSampleImage}")
+        badDetectionMaskSample["ground_truth"] = fo.Detections(
             detections=[
                 fo.Detection(
                     label="bad_mask_detection",
@@ -40,7 +62,34 @@ test.beforeAll(async ({ fiftyoneLoader, mediaFactory }) => {
                 ),
             ]
         )
-        sample.save()
+        samples.append(badDetectionMaskSample)
+
+        # sample with good detection mask
+        goodDetectionMaskSample = fo.Sample(filepath="${goodDetectionMaskSampleImage}")
+        goodDetectionMaskSample["ground_truth"] = fo.Detections(
+            detections=[
+                fo.Detection(
+                    label="good_mask_detection",
+                    bounding_box=[0.0, 0.0, 0.5, 0.5],
+                    mask=np.ones((15, 15)),
+                ),
+            ]
+        )
+        samples.append(goodDetectionMaskSample)
+
+        # sample with good detection mask _path_
+        img = Image.fromarray(np.ones((15, 15), dtype=np.uint8))
+        img.save("${goodDetectionMaskOnDisk}")
+
+        goodDetectionMaskPathSample = fo.Sample(filepath="${goodDetectionMaskPathSampleImage}")
+        goodDetectionMaskPathSample["prediction"] = fo.Detection(
+                    label="good_mask_detection_path",
+                    bounding_box=[0.0, 0.0, 0.5, 0.5],
+                    mask_path="${goodDetectionMaskOnDisk}",
+                )
+        samples.append(goodDetectionMaskPathSample)
+        
+        dataset.add_samples(samples)
         `
   );
 });
@@ -50,9 +99,21 @@ test.beforeEach(async ({ page, fiftyoneLoader }) => {
 });
 
 test.describe("detection-mask", () => {
-  test("should load empty mask fine", async ({ grid, modal }) => {
-    await grid.assert.isEntryCountTextEqualTo("1 sample");
+  test("should load all masks fine", async ({ grid, modal }) => {
+    await grid.assert.isEntryCountTextEqualTo("3 samples");
+
+    // bad sample, assert it loads in the modal fine, too
     await grid.openFirstSample();
     await modal.waitForSampleLoadDomAttribute();
+
+    // close modal and assert grid screenshot (compares all detections)
+    await modal.close();
+
+    await expect(grid.getForwardSection()).toHaveScreenshot(
+      "grid-detections.png",
+      {
+        animations: "allow",
+      }
+    );
   });
 });
diff --git a/e2e-pw/src/oss/specs/overlays/detection-mask.spec.ts-snapshots/grid-detections-chromium-darwin.png b/e2e-pw/src/oss/specs/overlays/detection-mask.spec.ts-snapshots/grid-detections-chromium-darwin.png
new file mode 100644
index 0000000000000000000000000000000000000000..f01eeba86afbd4b706ce325b1cf8d56bf7817cad
GIT binary patch
literal 1034
zcmeAS@N?(olHy`uVBq!ia0y~yU_J(9&*fkOl0SpK*#jxY;vjb?hIQv;UIJy0c)B=-
zRLpsMYoqV%K#8`C-Yrj>nuJpHA8_u8XiJcpme6y>Lo+sDhu5qC<&Q`Ht6#7b-g7B;
zp8qcM-+${E85ri5eon7q{D1f1U!SVlUpve4FBh+SU$nhX|MeG}y~*6a5C49=&u;D3
z+4D9xo{l=c)$g+Lwhi~?m#H&+@Z5fxdB?K5w|D)wwSDyK9RFo*w>Q^z&A+#y@$(l3
zh95WjUjmK)u+=k*fx$z?lz~BIk`x1jkS8w#L+27Uh6a})W(EhPm5dAu6R$8ZOz;?0
zMqz+}qvP~lD|?^*9s5q-{n8{jee1c)(q;uS<ro;`CttaL>tkxw!7#acU;P{R3abvJ
z$t`DRIKZy*b$eOWyto5j=PYAqVEF&Tdo+URoD_d@>$Xer)xI@&49wgNp00i_>zopr
E0A!~lHUIzs

literal 0
HcmV?d00001