diff --git a/web/packages/new/photos/components/gallery/PeopleHeader.tsx b/web/packages/new/photos/components/gallery/PeopleHeader.tsx index 14c5a2d40d..50798161a5 100644 --- a/web/packages/new/photos/components/gallery/PeopleHeader.tsx +++ b/web/packages/new/photos/components/gallery/PeopleHeader.tsx @@ -18,9 +18,7 @@ import { type CGroupPerson, type ClusterPerson, type Person, - type PersonSuggestion, type PersonSuggestionsAndChoices, - type PreviewableCluster, } from "@/new/photos/services/ml/people"; import { wait } from "@/utils/promise"; import OverflowMenu from "@ente/shared/components/OverflowMenu/menu"; @@ -276,7 +274,7 @@ interface SuggestionsDialogState { * List of clusters (suitably augmented for the UI display) which might * belong to the person, and being offered to the user as suggestions. */ - suggestions: PersonSuggestion[]; + suggestions: PersonSuggestionsAndChoices["suggestions"]; /** * List of previously saved choices (suitabley augmented for UI display). */ @@ -299,7 +297,7 @@ type SuggestionsDialogAction = personID: string; suggestionsAndChoices: PersonSuggestionsAndChoices; } - | { type: "mark"; suggestion: PreviewableCluster; value: ClusterMark } + | { type: "mark"; clusterID: string; value: ClusterMark } | { type: "save" } | { type: "toggleHistory" } | { type: "close" }; @@ -338,7 +336,7 @@ const suggestionsDialogReducer = ( }; case "mark": { const markedClusterIDs = new Map(state.markedClusterIDs); - const id = action.suggestion.id; + const id = action.clusterID; if (action.value == "yes" || action.value == "no") { markedClusterIDs.set(id, action.value); } else { @@ -398,11 +396,11 @@ const SuggestionsDialog: React.FC = ({ const go = async () => { try { - const { choices, suggestions } = + const suggestionsAndChoices = await suggestionsAndChoicesForPerson(person); - dispatch({ type: "fetched", personID, choices, suggestions }); + dispatch({ type: "fetched", personID, suggestionsAndChoices }); } catch (e) { - log.error("Failed to generate suggestions", e); + log.error("Failed to fetch suggestions and choices", e); dispatch({ type: "fetchFailed", personID }); } }; @@ -429,10 +427,8 @@ const SuggestionsDialog: React.FC = ({ resetPersonAndClose(); }; - const handleMark = (suggestion: PersonSuggestion, value: ClusterMark) => - dispatch({ type: "mark", suggestion, value }); - - const handleToggleHistory = () => dispatch({ type: "toggleHistory" }); + const handleMark = (clusterID: string, value: ClusterMark) => + dispatch({ type: "mark", clusterID, value }); const handleSave = async () => { try { @@ -467,7 +463,7 @@ const SuggestionsDialog: React.FC = ({ dispatch({ type: "toggleHistory" })} aria-label={ !state.showSavedChoices ? pt("Saved suggestions") @@ -505,8 +501,8 @@ const SuggestionsDialog: React.FC = ({ ) : ( )} @@ -534,24 +530,21 @@ const SuggestionsDialog: React.FC = ({ type SuggestionsListProps = Pick< SuggestionsDialogState, - "suggestions" | "markedSuggestionIDs" + "suggestions" | "markedClusterIDs" > & { /** - * Callback invoked when the user toggles the value associated with the - * given suggestion. + * Callback invoked when the user changes the value associated with the + * given cluster. */ - onMarkSuggestion: ( - suggestion: PersonSuggestion, - value: ClusterMark, - ) => void; + onMarkCluster: (clusterID: string, value: ClusterMark) => void; }; const SuggestionsList: React.FC = ({ suggestions, - markedSuggestionIDs, - onMarkSuggestion, + markedClusterIDs, + onMarkCluster, }) => ( - + {suggestions.map((suggestion) => ( = ({ {/* Use the face count as as stand-in for the photo count */} - {t("photos_count", { - count: suggestion.cluster.faces.length, - })} + {t("photos_count", { count: suggestion.faces.length })} - onMarkSuggestion( - suggestion, + onMarkCluster( + suggestion.id, // Dance for TypeScript to recognize the type. v == "yes" ? "yes" : v == "no" ? "no" : undefined, )