undoing the img to div with backgorund to avoid cors issues detected …

…in selenium test
HumanSignal · Dec 16, 2024 · 6f14092 · 6f14092
1 parent 9874aac
commit 6f14092
Show file tree

Hide file tree

Showing 2 changed files with 29 additions and 77 deletions.
diff --git a/web/libs/datamanager/src/components/CellViews/ImageCell.jsx b/web/libs/datamanager/src/components/CellViews/ImageCell.jsx
@@ -1,5 +1,5 @@
 import { getRoot } from "mobx-state-tree";
-import { FF_LSDV_4711, FF_MEMORY_LEAK_FIX, isFF } from "../../utils/feature-flags";
+import { FF_LSDV_4711, isFF } from "../../utils/feature-flags";
 import { AnnotationPreview } from "../Common/AnnotationPreview/AnnotationPreview";
 
 const imgDefaultProps = {};
@@ -12,7 +12,6 @@ export const ImageCell = (column) => {
     value,
     column: { alias },
   } = column;
-  const isMemoryLeakFixEnabled = isFF(FF_MEMORY_LEAK_FIX);
   const root = getRoot(original);
 
   const renderImagePreview = original.total_annotations === 0 || !root.showPreviews;
@@ -21,32 +20,18 @@ export const ImageCell = (column) => {
   if (!imgSrc) return null;
 
   return renderImagePreview ? (
-    isMemoryLeakFixEnabled ? (
-      <div
-        data-testid="image-cell"
-        style={{
-          backgroundImage: `url(${imgSrc})`,
-          width: "100%",
-          height: "100%",
-          backgroundSize: "contain",
-          backgroundRepeat: "no-repeat",
-          backgroundPosition: "center",
-        }}
-      />
-    ) : (
-      <img
-        {...imgDefaultProps}
-        key={imgSrc}
-        src={imgSrc}
-        alt="Data"
-        style={{
-          maxHeight: "100%",
-          maxWidth: "100px",
-          objectFit: "contain",
-          borderRadius: 3,
-        }}
-      />
-    )
+    <img
+      {...imgDefaultProps}
+      key={imgSrc}
+      src={imgSrc}
+      alt="Data"
+      style={{
+        maxHeight: "100%",
+        maxWidth: "100px",
+        objectFit: "contain",
+        borderRadius: 3,
+      }}
+    />
   ) : (
     <AnnotationPreview
       task={original}

diff --git a/web/libs/datamanager/src/components/Common/AnnotationPreview/AnnotationPreview.jsx b/web/libs/datamanager/src/components/Common/AnnotationPreview/AnnotationPreview.jsx
@@ -2,7 +2,7 @@ import { inject, observer } from "mobx-react";
 import React from "react";
 import { taskToLSFormat } from "../../../sdk/lsf-utils";
 import { cn } from "../../../utils/bem";
-import { FF_LSDV_4711, FF_MEMORY_LEAK_FIX, isFF } from "../../../utils/feature-flags";
+import { FF_LSDV_4711, isFF } from "../../../utils/feature-flags";
 import { Spinner } from "../Spinner";
 import "./AnnotationPreview.scss";
 
@@ -104,7 +104,6 @@ const injector = inject(({ store }) => {
 
 export const AnnotationPreview = injector(
   observer(({ labelingConfig, name, task, annotation, style, ...props }) => {
-    const isMemoryLeakFixEnabled = isFF(FF_MEMORY_LEAK_FIX);
     const generator = React.useMemo(() => {
       if (labelingConfig) return PreviewGenerator.getInstance(labelingConfig);
     }, [labelingConfig]);
@@ -127,29 +126,14 @@ export const AnnotationPreview = injector(
     }, [task, annotation, generator, preview]);
 
     return preview ? (
-      isMemoryLeakFixEnabled ? (
-        <div
-          {...imgDefaultProps}
-          style={{
-            backgroundImage: `url(${preview[`$${name}`][variant]})`,
-            width: props.width,
-            height: props.height,
-            backgroundSize: "contain",
-            backgroundRepeat: "no-repeat",
-            backgroundPosition: "center",
-            ...style,
-          }}
-        />
-      ) : (
-        <img
-          {...imgDefaultProps}
-          src={preview[`$${name}`][variant]}
-          alt=""
-          style={style}
-          width={props.width}
-          height={props.height}
-        />
-      )
+      <img
+        {...imgDefaultProps}
+        src={preview[`$${name}`][variant]}
+        alt=""
+        style={style}
+        width={props.width}
+        height={props.height}
+      />
     ) : (
       <div className={cn("annotation-preview").toString()} width={props.width} height={props.height}>
         <Spinner
@@ -162,30 +146,13 @@ export const AnnotationPreview = injector(
             zIndex: 100,
           }}
         />
-        {isMemoryLeakFixEnabled ? (
-          <div
-            data-testid="annotation-preview-image"
-            {...imgDefaultProps}
-            style={{
-              backgroundImage: `url(${props.fallbackImage})`,
-              width: props.width,
-              height: props.height,
-              backgroundSize: "contain",
-              backgroundRepeat: "no-repeat",
-              backgroundPosition: "center",
-              opacity: 0.5,
-              ...style,
-            }}
-          />
-        ) : (
-          <img
-            src={props.fallbackImage}
-            style={{ ...(style ?? {}), opacity: 0.5 }}
-            alt=""
-            width={props.width}
-            height={props.height}
-          />
-        )}
+        <img
+          src={props.fallbackImage}
+          style={{ ...(style ?? {}), opacity: 0.5 }}
+          alt=""
+          width={props.width}
+          height={props.height}
+        />
       </div>
     );
   }),