From c53b81dcdbf0389ca2d54a6f6d2332815d9668d6 Mon Sep 17 00:00:00 2001 From: Alexandre Fauquette <45398769+alexfauquette@users.noreply.github.com> Date: Fri, 6 Dec 2024 02:15:47 +0100 Subject: [PATCH] Show data from OFF (#1089) * wip * vite config * show data --- src/pages/nutrition/NutrimentCell.tsx | 52 +++- src/pages/nutrition/index.tsx | 267 ++++++++++++------ .../nutrition/useRobotoffPredicitions.ts | 67 ++++- src/pages/nutrition/utils.ts | 7 + vite.config.js | 3 + 5 files changed, 287 insertions(+), 109 deletions(-) diff --git a/src/pages/nutrition/NutrimentCell.tsx b/src/pages/nutrition/NutrimentCell.tsx index 88c836faa..696a37261 100644 --- a/src/pages/nutrition/NutrimentCell.tsx +++ b/src/pages/nutrition/NutrimentCell.tsx @@ -8,11 +8,24 @@ interface NutrimentCellProps { tabIndex: number; value?: string; unit?: string; + productValue?: number; + productUnit?: string; + displayOFFValue: boolean; setValues: (object) => void; } export const NutrimentCell = (props: NutrimentCellProps) => { - const { nutrimentId, nutrimentKey, tabIndex, value, unit, setValues } = props; + const { + nutrimentId, + nutrimentKey, + tabIndex, + value, + unit, + setValues, + productValue, + productUnit, + displayOFFValue, + } = props; return ( { element.classList.remove("focused"); }} > - - setValues((p) => ({ - ...p, - [nutrimentKey]: { - ...p[nutrimentKey], - value: event.target.value, - }, - })) - } - /> +
+ + setValues((p) => ({ + ...p, + [nutrimentKey]: { + ...p[nutrimentKey], + value: event.target.value, + }, + })) + } + /> +
+ {displayOFFValue && ( + + {productValue} + {productUnit} + + )} +
{isValidUnit(unit) ? ( - - - {nutrimentsDetected.map((nutrimentId) => { - const key100g = `${nutrimentId}_100g`; - const { value: value100g, unit: unit100g } = - values[key100g] ?? {}; + + + Nutriments + 100g + + serving{" "} +
+ + setValues((p) => ({ + ...p, + serving_size: { + ...p.serving_size, + value: event.target.value, + }, + })) + } + style={{ width: 100 }} + /> +
+ {displayOFFValue && ( + + {product?.serving_size} + + )} +
+ + + + + {nutrimentsDetected.map((nutrimentId) => { + const key100g = `${nutrimentId}_100g`; + const { value: value100g, unit: unit100g } = + values[key100g] ?? {}; + + const keyServing = `${nutrimentId}_serving`; + const { value: valueServing, unit: unitServing } = + values[keyServing] ?? {}; - const keyServing = `${nutrimentId}_serving`; - const { value: valueServing, unit: unitServing } = - values[keyServing] ?? {}; + const product100g = product?.nutriments?.[key100g]; + const productServing = product?.nutriments?.[keyServing]; + const productUnit = + product?.nutriments?.[`${nutrimentId}_unit`]; - return ( - - - {NUTRIMENTS[nutrimentId] ?? nutrimentId} - - + + {NUTRIMENTS[nutrimentId] ?? nutrimentId} + + + + + ); + })} + + + + + + + + + - - - - - + variant="contained" + color="success" + sx={{ ml: 1, mt: 2 }} + onClick={() => { + postRobotoff({ + insightId: insight.id, + data: values, + type: "serving", + }); + nextItem(); + apiRef.current.resetTransform(); + }} + > + Valider (serving) + + + + diff --git a/src/pages/nutrition/useRobotoffPredicitions.ts b/src/pages/nutrition/useRobotoffPredicitions.ts index 6c726ba13..a92092c83 100644 --- a/src/pages/nutrition/useRobotoffPredicitions.ts +++ b/src/pages/nutrition/useRobotoffPredicitions.ts @@ -1,13 +1,23 @@ import * as React from "react"; import robotoff from "../../robotoff"; import { InsightType } from "./insight.types"; +import axios from "axios"; -export function useRobotoffPredicitions() { +export function useRobotoffPredicitions(partiallyFilled: boolean) { const [isLoading, setIsLoading] = React.useState(false); const [count, setCount] = React.useState(0); const [insights, setInsights] = React.useState([]); + const [offData, setOffData] = React.useState<{ + [barecode: string]: + | "loading" + | { images: Record; serving_size?: any; nutriments?: any }; + }>({}); const [insightIndex, setInsightIndex] = React.useState(0); + const campaign = partiallyFilled + ? "incomplete-nutrition" + : "missing-nutrition"; + React.useEffect(() => { if (isLoading || insightIndex < insights.length - 1) { return; @@ -23,13 +33,14 @@ export function useRobotoffPredicitions() { "not_annotated", 1, 25, - "missing-nutrition", + campaign, ) .then(({ data }) => { if (!valid) { return; } + console.log({ campaign }); setCount(data.count); setInsights((prev) => data.insights.length === 0 ? prev : [...prev, ...data.insights], @@ -43,6 +54,53 @@ export function useRobotoffPredicitions() { }; }, [insightIndex, insights]); + React.useEffect(() => { + let valid = true; + setIsLoading(true); + + robotoff + .getInsights( + "", + "nutrient_extraction", + "", + "not_annotated", + 1, + 25, + campaign, + ) + .then(({ data }) => { + if (!valid) { + return; + } + + setCount(data.count); + setInsights(data.insights); + setIsLoading(false); + }); + + return () => { + valid = false; + }; + }, [campaign]); + + React.useEffect(() => { + const barecodeToImport = insights + .slice(insightIndex, insightIndex + 5) + .filter((insight) => offData[insight.barcode] === undefined) + .map((insight) => insight.barcode); + + barecodeToImport.forEach((code) => { + setOffData((prev) => ({ ...prev, [code]: "loading" })); + axios + .get( + `https://world.openfoodfacts.org/api/v2/product/${code}.json?fields=serving_size,nutriments,images`, + ) + .then(({ data: { product } }) => { + setOffData((prev) => ({ ...prev, [code]: product })); + }); + }); + }, [insightIndex, insights]); + const nextItem = React.useCallback(() => { setInsightIndex((p) => p + 1); setCount((p) => p - 1); @@ -50,10 +108,15 @@ export function useRobotoffPredicitions() { const insight = insights[insightIndex]; + console.log(offData); + + const product = insight !== undefined ? offData[insight.barcode] : undefined; + return { isLoading, insight, nextItem, count, + product: product === "loading" ? undefined : product, }; } diff --git a/src/pages/nutrition/utils.ts b/src/pages/nutrition/utils.ts index 73367a247..c8ff42652 100644 --- a/src/pages/nutrition/utils.ts +++ b/src/pages/nutrition/utils.ts @@ -93,3 +93,10 @@ export function deleteRobotoff(config: Pick) { { withCredentials: true }, ); } + +/** + * Extract xxx from the pattern 'yyy/yyyy/yyy/xxx.jpg' or 'yyy/yyyy/yyy/xxx.jpg' + */ +export function getImageId(source: string) { + return source.split("/")[source.split("/").length - 1].split(".")[0]; +} diff --git a/vite.config.js b/vite.config.js index 081c8d9f6..654265249 100644 --- a/vite.config.js +++ b/vite.config.js @@ -3,4 +3,7 @@ import react from "@vitejs/plugin-react"; export default defineConfig({ plugins: [react()], + optimizeDeps: { + exclude: ["js-big-decimal"], + }, });