Stop using logo.data.bounding_box from insight API (#1019)

fix
openfoodfacts · Aug 21, 2024 · 3f144d6 · 3f144d6
1 parent 495ea1f
commit 3f144d6
Show file tree

Hide file tree

Showing 3 changed files with 70 additions and 58 deletions.
diff --git a/src/components/CroppedLogo.tsx b/src/components/CroppedLogo.tsx
@@ -3,35 +3,41 @@ import * as React from "react";
 import robotoff from "../robotoff";
 import off from "../off";
 
-const fetchData = async (insightId: string) => {
+const fetchData = async (insightId) => {
   const response = await robotoff.insightDetail(insightId);
 
-  if (
-    response?.data?.source_image &&
-    response?.data?.data?.logo_id &&
-    !response?.data?.data?.bounding_box
-  ) {
-    const logoData = await robotoff.getLogosImages([
-      response?.data?.data?.logo_id,
-    ]);
-    const bounding_box = logoData?.data?.logos?.[0]?.bounding_box;
+  if (!response) {
+    return null;
+  }
+
+  let bounding_box = response.data?.bounding_box;
+  const source_image = response.data?.source_image;
+  const logo_id = response.data?.data?.logo_id;
 
-    return { ...response, bounding_box };
+  if (source_image && logo_id && !bounding_box) {
+    const logoData = await robotoff.getLogosImages([logo_id]);
+    bounding_box = logoData?.data?.logos?.[0]?.bounding_box;
   }
 
-  return response;
+  return { source_image, bounding_box };
 };
 
-const getCroppedLogoUrl = (debugResponse) => {
-  const debugData = debugResponse?.data;
-  const bounding_box =
-    debugData?.data?.bounding_box || debugResponse?.bounding_box;
+const getCroppedLogoUrl = (
+  debugResponse: null | {
+    source_image?: string;
+    bounding_box?: number[];
+  },
+) => {
+  if (!debugResponse) {
+    return null;
+  }
+  const { bounding_box, source_image } = debugResponse;
 
-  if (!debugData?.source_image || !bounding_box) {
+  if (!source_image || !bounding_box) {
     return null;
   }
 
-  const sourceImage = off.getImageUrl(debugData?.source_image);
+  const sourceImage = off.getImageUrl(source_image);
   return robotoff.getCroppedImageUrl(sourceImage, bounding_box);
 };
 

diff --git a/src/pages/logosValidator/LogoQuestionValidator.jsx b/src/pages/logosValidator/LogoQuestionValidator.jsx
@@ -37,20 +37,20 @@ import Loader from "../loader";
 const fetchData = async (insightId) => {
   const response = await robotoff.insightDetail(insightId);
 
-  if (
-    response?.data?.source_image &&
-    response?.data?.data?.logo_id &&
-    !response?.data?.data?.bounding_box
-  ) {
-    const logoData = await robotoff.getLogosImages([
-      response?.data?.data?.logo_id,
-    ]);
-    const bounding_box = logoData?.data?.logos?.[0]?.bounding_box;
+  if (!response) {
+    return response;
+  }
 
-    return { ...response, bounding_box };
+  let bounding_box = response.data?.bounding_box;
+  const source_image = response.data?.source_image;
+  const logo_id = response.data?.data?.logo_id;
+
+  if (source_image && logo_id && !bounding_box) {
+    const logoData = await robotoff.getLogosImages([logo_id]);
+    bounding_box = logoData?.data?.logos?.[0]?.bounding_box;
   }
 
-  return response;
+  return { source_image, bounding_box };
 };
 
 const LogoQuesitonCard = (props) => {
@@ -68,23 +68,18 @@ const LogoQuesitonCard = (props) => {
     let isValidQuery = true;
 
     const getImageUrl = async () => {
-      const { data, bounding_box } = await fetchData(question.insight_id);
+      const { source_image, bounding_box } = await fetchData(
+        question.insight_id,
+      );
 
       if (!isValidQuery) {
         return;
       }
 
-      if (data?.data?.bounding_box && data?.source_image) {
-        setCroppedImageUrl(
-          robotoff.getCroppedImageUrl(
-            off.getImageUrl(data?.source_image),
-            data.data.bounding_box,
-          ),
-        );
-      } else if (bounding_box && data?.source_image) {
+      if (bounding_box && source_image) {
         setCroppedImageUrl(
           robotoff.getCroppedImageUrl(
-            off.getImageUrl(data?.source_image),
+            off.getImageUrl(source_image),
             bounding_box,
           ),
         );

diff --git a/src/pages/questions/DebugQuestion.tsx b/src/pages/questions/DebugQuestion.tsx
@@ -20,38 +20,49 @@ import TableCell from "@mui/material/TableCell";
 const fetchData = async (insightId) => {
   const response = await robotoff.insightDetail(insightId);
 
-  if (
-    response?.data?.source_image &&
-    response?.data?.data?.logo_id &&
-    !response?.data?.data?.bounding_box
-  ) {
-    const logoData = await robotoff.getLogosImages([
-      response?.data?.data?.logo_id,
-    ]);
-    const bounding_box = logoData?.data?.logos?.[0]?.bounding_box;
-
-    return { ...response, bounding_box };
+  if (!response) {
+    return null;
+  }
+
+  let bounding_box = response.data?.bounding_box;
+  const source_image = response.data?.source_image;
+  const logo_id = response.data?.data?.logo_id;
+
+  if (source_image && logo_id && !bounding_box) {
+    const logoData = await robotoff.getLogosImages([logo_id]);
+    bounding_box = logoData?.data?.logos?.[0]?.bounding_box;
   }
 
-  return response;
+  return { source_image, bounding_box, data: response.data };
 };
 
-const getCroppedLogoUrl = (debugResponse) => {
-  const debugData = debugResponse?.data;
-  const bounding_box =
-    debugData?.data?.bounding_box || debugResponse?.bounding_box;
+const getCroppedLogoUrl = (
+  debugResponse: null | {
+    source_image?: string;
+    bounding_box?: number[];
+  },
+) => {
+  if (!debugResponse) {
+    return null;
+  }
+  const { bounding_box, source_image } = debugResponse;
 
-  if (!debugData?.source_image || !bounding_box) {
+  if (!source_image || !bounding_box) {
     return null;
   }
 
-  const sourceImage = off.getImageUrl(debugData?.source_image);
+  const sourceImage = off.getImageUrl(source_image);
   return robotoff.getCroppedImageUrl(sourceImage, bounding_box);
 };
+
 const DebugQuestion = (props) => {
   const { insightId } = props;
   const [isLoading, setIsLoading] = React.useState(true);
-  const [debugResponse, setDebugResponse] = React.useState<any>({});
+  const [debugResponse, setDebugResponse] = React.useState<null | {
+    source_image?: string;
+    bounding_box?: number[];
+    data?: any;
+  }>({});
   const [openDetails, setOpenDetails] = React.useState<any>({
     resume: false,
     json_details: false,