Fix ingredients game paper cuts (#915)

* show number of scans * Remove show OCR if not available * fix dark theme * support lower case * Update src/pages/ingredients/ImageAnnotation.tsx Co-authored-by: Pierre Slamich <[email protected]> --------- Co-authored-by: Pierre Slamich <[email protected]>
openfoodfacts · Mar 10, 2024 · 30bc43a · 30bc43a
1 parent 27f485d
commit 30bc43a
Show file tree

Hide file tree

Showing 4 changed files with 40 additions and 19 deletions.
diff --git a/src/pages/ingredients/ImageAnnotation.tsx b/src/pages/ingredients/ImageAnnotation.tsx
@@ -92,7 +92,7 @@ function Annotation({
             ),
           )}
       {showOCR && (
-        <p>
+        <p style={{ marginTop: 5 * 4 }}>
           {splitText(data).map(({ isIngredient, text }, i) => (
             <React.Fragment key={`${text}-${i}`}>
               {isIngredient ? (
@@ -108,15 +108,16 @@ function Annotation({
         </p>
       )}
 
-      <Button
-        sx={{ my: 5 }}
-        variant="outlined"
-        onClick={() => {
-          setShowOCR((p) => !p);
-        }}
-      >
-        {showOCR ? "Hidde OCR" : "Show OCR"}
-      </Button>
+      {data && (
+        <Button
+          variant="outlined"
+          onClick={() => {
+            setShowOCR((p) => !p);
+          }}
+        >
+          {showOCR ? "Hide OCR" : "Show OCR"}
+        </Button>
+      )}
     </React.Fragment>
   );
 }
@@ -142,6 +143,7 @@ export default function ImageAnnotation({
       />
       <Button
         fullWidth
+        sx={{ mt: 5 }}
         disabled={isLoading || error !== null || data !== null}
         onClick={getData}
         variant="outlined"

diff --git a/src/pages/ingredients/IngeredientDisplay.tsx b/src/pages/ingredients/IngeredientDisplay.tsx
@@ -5,6 +5,7 @@ import Stack from "@mui/material/Stack";
 import Typography from "@mui/material/Typography";
 import Tooltip from "@mui/material/Tooltip";
 import LoadingButton from "@mui/lab/LoadingButton";
+import { useTheme } from "@mui/material";
 
 import { useTranslation } from "react-i18next";
 
@@ -45,11 +46,21 @@ function ColorText({
   text: string;
   ingredients?: ParsedIngredientsType[];
 }) {
+  const theme = useTheme();
+  const isDark = theme.palette.mode === "dark";
+
+  const lightColors = ["gray", "black"];
+  const darkColors = ["lightgray", "white"];
+
   if (ingredients === undefined) {
     // Without parsing, we just split with coma
     return text.split(",").map((txt, i) => (
       <React.Fragment key={i}>
-        <span style={{ color: i % 2 === 0 ? "gray" : "black" }}>{txt}</span>
+        <span
+          style={{ color: isDark ? darkColors[i % 2] : lightColors[i % 2] }}
+        >
+          {txt}
+        </span>
         {i === text.split(",").length - 1 ? "" : ","}
       </React.Fragment>
     ));
@@ -64,11 +75,9 @@ function ColorText({
   return [
     ...flattendIngredients.map((ingredient, i) => {
       // Don't ask me why OFF use this specific character
-      const ingredientText = ingredient.text.replace("‚", ",");
+      const ingredientText = ingredient.text.replace("‚", ",").toLowerCase();
 
-      console.log(ingredientText);
-      console.log(text.slice(lastIndex));
-      const startIndex = text.indexOf(ingredientText, lastIndex);
+      const startIndex = text.toLowerCase().indexOf(ingredientText, lastIndex);
       if (startIndex < 0) {
         return null;
       }
@@ -115,6 +124,9 @@ export function useIngredientParsing() {
 export function IngeredientDisplay(props) {
   const { text, onChange, parsings } = props;
 
+  const theme = useTheme();
+  const isDark = theme.palette.mode === "dark";
+
   return (
     <div
       id="demoSource-:rd:"
@@ -134,7 +146,7 @@ export function IngeredientDisplay(props) {
         float: "left",
         minWidth: "100%",
         minHeight: "3rem",
-        border: "solid black 1px",
+        border: `solid ${isDark ? "white" : "black"} 1px`,
       }}
     >
       <pre
@@ -205,6 +217,7 @@ export function IngeredientDisplay(props) {
           resize: "none",
           overflow: "hidden",
           padding: "16px",
+          color: isDark ? "white" : "black",
           WebkitTextFillColor: "transparent",
         }}
         value={text}
@@ -267,6 +280,8 @@ export function IngredientAnotation(props) {
           onClick={() => fetchIngredients(text, lang)}
           fullWidth
           loading={isLoading}
+          disabled={!text}
+          variant="outlined"
         >
           {t("ingredients.parsing")}
         </LoadingButton>

diff --git a/src/pages/ingredients/index.tsx b/src/pages/ingredients/index.tsx
@@ -27,7 +27,7 @@ function ProductInterface(props) {
   const { product, next } = props;
   const { t } = useTranslation();
 
-  const { selectedImages, product_name, code } = product;
+  const { selectedImages, product_name, code, scans_n } = product;
   const [imageTab, setImageTab] = React.useState(selectedImages[0].countryCode);
 
   React.useEffect(() => {
@@ -41,8 +41,9 @@ function ProductInterface(props) {
   return (
     <div style={{ padding: "0 5px" }}>
       <Typography variant="h6">
-        {product_name || "No product name"} (
-        <a href={off.getProductUrl(code)}>{code}</a>)
+        {product_name || "No product name"} (scan: {scans_n})
+        <br />
+        <a href={off.getProductUrl(code)}>{code}</a>
       </Typography>
       <Stack direction="column">
         {selectedImages?.length > 0 && (

diff --git a/src/pages/ingredients/useData.tsx b/src/pages/ingredients/useData.tsx
@@ -30,6 +30,7 @@ const formatData = (product) => {
     product_name,
     ingredient,
     images,
+    scans_n,
     ...other
   } = product;
 
@@ -81,6 +82,7 @@ const formatData = (product) => {
     image_ingredients_url,
     product_name,
     ingredient,
+    scans_n,
     ...ingredientTexts,
     // images,
   };
@@ -124,6 +126,7 @@ export default function useData(countryCode): [any[], () => void, boolean] {
               return isNew;
             })
             .map(formatData);
+
           if (prevCountry.current !== countryCode) {
             setData(rep);
             prevCountry.current = countryCode;