Redirect logos games to other ones (#541)

openfoodfacts · Feb 13, 2023 · 9085376 · 9085376
1 parent 1373651
commit 9085376
Show file tree

Hide file tree

Showing 6 changed files with 119 additions and 38 deletions.
diff --git a/src/components/LogoSearchForm.jsx b/src/components/LogoSearchForm.jsx
@@ -11,7 +11,7 @@ import LabelFilter from "../components/QuestionFilter/LabelFilter";
 
 const TYPE_WITHOUT_VALUE = ["packager_code", "qr_code", "no_logo"];
 
-const logoTypeOptions = [
+export const logoTypeOptions = [
   { value: "", labelKey: "logos.type" },
   { value: "label", labelKey: "logos.label" },
   { value: "brand", labelKey: "logos.brand" },
@@ -69,6 +69,7 @@ const LogoSearchForm = (props) => {
   return (
     <Stack direction="column" spacing={{ xs: 1, sm: 2, md: 4 }} {...other}>
       <Stack direction={{ xs: "column", sm: "row" }} spacing={1} wrap="wrap">
+        <p>{innerType}</p>
         <TextField
           fullWidth
           value={innerType}
@@ -77,8 +78,8 @@ const LogoSearchForm = (props) => {
           label={t("logos.type")}
           size="small"
         >
-          {logoTypeOptions.map(({ value, labelKey }) => (
-            <MenuItem key={labelKey} value={value}>
+          {logoTypeOptions.map(({ value: typeValue, labelKey }) => (
+            <MenuItem key={labelKey} value={typeValue}>
               {t(labelKey)}
             </MenuItem>
           ))}

diff --git a/src/i18n/common.json b/src/i18n/common.json
@@ -201,7 +201,12 @@
     "result_count": "Shows {{showing}} on {{available}} available",
     "flag": "Something wrong? Report/flag the image!",
     "unflag": "Unflag the image",
-    "crop_image_title": "crop of the logo"
+    "crop_image_title": "crop of the logo",
+    "no_more_questions": "No more quesitons about this logo. You can try to find more logo with the following game.",
+    "loading_messages": {
+      "pending_reference_logos": "We are loading some logos example to initialised the serach",
+      "failed_reference_logos": "We did not find any logo with this annotation. Try to use the following game to annotate some of them."
+    }
   },
   "settings": {
     "settings": "Settings",

diff --git a/src/i18n/en.json b/src/i18n/en.json
@@ -201,7 +201,12 @@
     "result_count": "Shows {{showing}} on {{available}} available",
     "flag": "Something wrong? Report/flag the image!",
     "unflag": "Unflag the image",
-    "crop_image_title": "crop of the logo"
+    "crop_image_title": "crop of the logo",
+    "no_more_questions": "No more quesitons about this logo. You can try to find more logo with the following game.",
+    "loading_messages": {
+      "pending_reference_logos": "We are loading some logos example to initialised the serach",
+      "failed_reference_logos": "We did not find any logo with this annotation. Try to use the following game to annotate some of them."
+       }
   },
   "settings": {
     "settings": "Settings",

diff --git a/src/pages/logos/LogoDeepSearch.jsx b/src/pages/logos/LogoDeepSearch.jsx
@@ -5,13 +5,17 @@ import Divider from "@mui/material/Divider";
 import Button from "@mui/material/Button";
 import Typography from "@mui/material/Typography";
 import Paper from "@mui/material/Paper";
+import Link from "@mui/material/Link";
+import CircularProgress from "@mui/material/CircularProgress";
+import LinearProgress from "@mui/material/LinearProgress";
 
 import LogoGrid from "../../components/LogoGrid";
 import LogoForm from "../../components/LogoForm";
 import robotoff from "../../robotoff";
 import off from "../../off";
 import useUrlParams from "../../hooks/useUrlParams";
 import AnnotateLogoModal from "../../components/AnnotateLogoModal";
+import { useTranslation } from "react-i18next";
 
 const DEFAULT_COUNT = 25;
 
@@ -41,6 +45,42 @@ const request = async ({ barcode, value, type, count }) => {
   };
 };
 
+const LoadingReferenceLogos = () => {
+  const { t } = useTranslation();
+  return (
+    <Box sx={{ width: "100%", textAlign: "center", py: 5, m: 0 }}>
+      <Typography variant="subtitle1">
+        {t("logos.loading_messages.pending_reference_logos")}
+      </Typography>
+      <br />
+      <CircularProgress />
+    </Box>
+  );
+};
+
+const FailedReferecnceLogos = ({ type, value }) => {
+  const { t } = useTranslation();
+
+  return (
+    <Box sx={{ width: "100%", textAlign: "center", py: 5, m: 0 }}>
+      <Typography variant="subtitle1">
+        {t("logos.loading_messages.failed_reference_logos")}
+      </Typography>
+      <Button
+        color="secondary"
+        size="small"
+        component={Link}
+        variant="contained"
+        href={`/logos/product-search?tag=${value}&tagtype=${type}`}
+        target="_blank"
+        sx={{ ml: 2, minWidth: 150 }}
+      >
+        Search
+      </Button>
+    </Box>
+  );
+};
+
 export default function LogoSearch() {
   // const [isLoading, setIsLoading] = React.useState(true);
 
@@ -56,6 +96,10 @@ export default function LogoSearch() {
   );
   const pageSize = 50;
   const [page, setPage] = React.useState(1);
+  const [isLoadingAnnotatedLogos, setIsLoadingAnnotatedLogos] =
+    React.useState(true);
+  const [isLoadingToAnnotateLogos, setIsLoadingToAnnotateLogos] =
+    React.useState(false);
 
   const setNewSearchState = ({ type, value }) => {
     setSearchState(DEFAULT_COUNT);
@@ -88,7 +132,12 @@ export default function LogoSearch() {
       } catch (error) {}
     };
 
-    fetchMoreAnnotatedLogos();
+    setIsLoadingAnnotatedLogos(true);
+    fetchMoreAnnotatedLogos().then(() => {
+      if (isValid) {
+        setIsLoadingAnnotatedLogos(false);
+      }
+    });
 
     return () => {
       isValid = false;
@@ -158,7 +207,12 @@ export default function LogoSearch() {
       });
     };
 
-    fetchLogosToAnnotate();
+    setIsLoadingToAnnotateLogos(true);
+    fetchLogosToAnnotate().then(() => {
+      if (isValid) {
+        setIsLoadingToAnnotateLogos(false);
+      }
+    });
 
     return () => {
       isValid = false;
@@ -202,10 +256,7 @@ export default function LogoSearch() {
     const annotatedIds = {};
     annotatedLogos.forEach(({ id }) => (annotatedIds[id] = true));
     setAnnotatedLogos((prev) => [...prev, ...annotatedLogos]);
-    setLogosToAnnotate((prev) => {
-      console.log(prev);
-      return prev.filter((logo) => !annotatedIds[logo.id]);
-    });
+    setLogosToAnnotate((prev) => prev.filter((logo) => !annotatedIds[logo.id]));
   };
 
   const selectAllOnPage = () => {
@@ -254,12 +305,19 @@ export default function LogoSearch() {
       <Typography variant="h5" sx={{ mt: 5, mb: 1 }}>
         Reference logos (logo already annotated with this value)
       </Typography>
-      <LogoGrid
-        logos={annotatedLogos.slice(0, 5)}
-        toggleLogoSelection={null}
-        readOnly
-        sx={{ pt: 0 }}
-      />
+
+      {isLoadingAnnotatedLogos ? (
+        <LoadingReferenceLogos />
+      ) : annotatedLogos == null || annotatedLogos.length === 0 ? (
+        <FailedReferecnceLogos {...searchState} />
+      ) : (
+        <LogoGrid
+          logos={annotatedLogos.slice(0, 5)}
+          toggleLogoSelection={null}
+          readOnly
+          sx={{ pt: 0 }}
+        />
+      )}
 
       <Divider sx={{ my: 3 }} />
 
@@ -283,6 +341,7 @@ export default function LogoSearch() {
         </Button>
       </Box>
 
+      {isLoadingToAnnotateLogos && <LinearProgress />}
       <LogoGrid
         logos={logosToAnnotate.slice((page - 1) * pageSize, page * pageSize)}
         toggleLogoSelection={toggleSelection}

diff --git a/src/pages/logos/ProductLogoAnnotations.jsx b/src/pages/logos/ProductLogoAnnotations.jsx
@@ -7,33 +7,18 @@ import Button from "@mui/material/Button";
 import MenuItem from "@mui/material/MenuItem";
 import TextField from "@mui/material/TextField";
 
+import { useTranslation } from "react-i18next";
+
 import LabelFilter from "../../components/QuestionFilter/LabelFilter";
 import LogoGrid from "../../components/LogoGrid";
 import AnnotateLogoModal from "../../components/AnnotateLogoModal";
+import { logoTypeOptions } from "../../components/LogoSearchForm";
 import robotoff from "../../robotoff";
 import off from "../../off";
 import useUrlParams from "../../hooks/useUrlParams";
 
 const PRODUCT_PAGE_SIZE = 2;
 
-const AVAILABLE_TAG_TYPES = [
-  "brands",
-  "categories",
-  "packaging",
-  "labels",
-  "origins",
-  "manufacturing_places",
-  "emb_codes",
-  "purchase_places",
-  "stores",
-  "countries",
-  "additives",
-  "allergens",
-  "traces",
-  "nutrition_grades",
-  "states",
-];
-
 const OFF_2_ROBOTOFF = {
   categories: "category",
   labels: "label",
@@ -190,6 +175,7 @@ const useLogoFetching = (filter) => {
 };
 
 export default function AnnotateLogosFromProducts() {
+  const { t } = useTranslation();
   const [filter, setFilter] = useUrlParams(
     {
       tagtype: "labels",
@@ -240,9 +226,9 @@ export default function AnnotateLogosFromProducts() {
             label="type"
             sx={{ minWidth: 200 }}
           >
-            {AVAILABLE_TAG_TYPES.map((type) => (
-              <MenuItem key={type} value={type}>
-                {type}
+            {logoTypeOptions.map(({ value: typeValue, labelKey }) => (
+              <MenuItem key={typeValue} value={typeValue}>
+                {t(labelKey)}
               </MenuItem>
             ))}
           </TextField>

diff --git a/src/pages/logosValidator/LogoQuestionValidator.jsx b/src/pages/logosValidator/LogoQuestionValidator.jsx
@@ -124,6 +124,29 @@ const LogoQuesitonCard = (props) => {
   );
 };
 
+const NoMoreLogos = ({ insightType, valueTag }) => {
+  const { t } = useTranslation();
+
+  return (
+    <Box sx={{ width: "100%", textAlign: "center", py: 5, m: 0 }}>
+      <Typography variant="subtitle1">
+        {t("logos.no_more_questions")}
+      </Typography>
+      <Button
+        color="secondary"
+        size="small"
+        component={Link}
+        variant="contained"
+        href={`/logos/deep-search?type=${insightType}&value=${valueTag}`}
+        target="_blank"
+        sx={{ ml: 2, minWidth: 150 }}
+      >
+        Search
+      </Button>
+    </Box>
+  );
+};
+
 export default function LogoQuestionValidator({ predictor }) {
   const { t } = useTranslation();
 
@@ -343,6 +366,8 @@ export default function LogoQuestionValidator({ predictor }) {
           ))}
       </div>
 
+      {remainingQuestionNb === 0 && <NoMoreLogos {...filterState} />}
+
       <Paper
         sx={{
           paddingX: 2,