H-6363: Fix ingest results review issues

Author: lunelson

apps/hash-frontend/src/pages/ingest.page/results-panel.tsx

@@ -39,7 +39,7 @@ export const ResultsPanel: FunctionComponent<ResultsPanelProps> = ({
 }) => {
   const isRosterSelected = (entry: RosterEntry) =>
     selection?.kind === "roster" &&
-    selection.entry.canonicalName === entry.canonicalName;
+    selection.entry.rosterEntryId === entry.rosterEntryId;
 
   const isClaimSelected = (claim: ExtractedClaim) =>
     selection?.kind === "claim" && selection.claim.claimId === claim.claimId;
@@ -75,7 +75,7 @@ export const ResultsPanel: FunctionComponent<ResultsPanelProps> = ({
           const selected = isRosterSelected(entry);
           return (
             <ButtonBase
-              key={entry.canonicalName}
+              key={entry.rosterEntryId}
               onClick={() =>
                 onSelect(selected ? null : { kind: "roster", entry })
               }
@@ -155,6 +155,10 @@ export const ResultsPanel: FunctionComponent<ResultsPanelProps> = ({
               </Box>
               {entryClaims.map((claim) => {
                 const selected = isClaimSelected(claim);
+                const firstEvidenceRef = claim.evidenceRefs.at(0);
+                const quote = firstEvidenceRef
+                  ? firstEvidenceRef.quote.substring(0, 60)
+                  : undefined;
                 return (
                   <ButtonBase
                     key={claim.claimId}
@@ -182,17 +186,18 @@ export const ResultsPanel: FunctionComponent<ResultsPanelProps> = ({
                     >
                       {claim.claimText}
                     </Typography>
-                    <Typography
-                      variant="microText"
-                      sx={{
-                        color: "gray.50",
-                        mt: 0.5,
-                        fontStyle: "italic",
-                      }}
-                    >
-                      &quot;{claim.evidenceRefs[0]?.quote.substring(0, 60)}
-                      …&quot;
-                    </Typography>
+                    {quote && (
+                      <Typography
+                        variant="microText"
+                        sx={{
+                          color: "gray.50",
+                          mt: 0.5,
+                          fontStyle: "italic",
+                        }}
+                      >
+                        &quot;{quote}…&quot;
+                      </Typography>
+                    )}
                   </ButtonBase>
                 );
               })}

apps/hash-frontend/src/pages/ingest.page/routing.ts

@@ -43,10 +43,3 @@ export function getIngestResultsPath(source: IngestResultsSource): string {
 
   return `/ingest/results?${params.toString()}`;
 }
-
-export function getDefaultIngestResultsPath(): string {
-  return getIngestResultsPath({
-    kind: "fixture",
-    fixtureId: DEFAULT_FIXTURE_ID,
-  });
-}

apps/hash-frontend/src/pages/ingest/results.page.tsx

@@ -1,7 +1,7 @@
 import { InfinityLightIcon } from "@hashintel/design-system";
 import { Box, Container, Typography } from "@mui/material";
 import { useRouter } from "next/router";
-import { useCallback, useEffect, useMemo, useState } from "react";
+import { useEffect, useMemo, useState } from "react";
 
 import type { NextPageWithLayout } from "../../shared/layout";
 import { getLayoutWithSidebar } from "../../shared/layout";
@@ -18,13 +18,17 @@ import {
 } from "../ingest.page/routing";
 import type { IngestRunView } from "../ingest.page/types";
 
+const normalizeQueryParam = (
+  value: string | string[] | undefined,
+): string | undefined => (typeof value === "string" ? value : value?.[0]);
+
 const IngestResultsPage: NextPageWithLayout = () => {
   const router = useRouter();
   const source = useMemo(
     () =>
       getIngestResultsSource({
-        runId: router.query.runId as string | undefined,
-        fixture: router.query.fixture as string | undefined,
+        runId: normalizeQueryParam(router.query.runId),
+        fixture: normalizeQueryParam(router.query.fixture),
       }),
     [router.query.runId, router.query.fixture],
   );
@@ -35,7 +39,9 @@ const IngestResultsPage: NextPageWithLayout = () => {
   const [currentPage, setCurrentPage] = useState(1);
   const [loading, setLoading] = useState(false);
 
-  const fetchResults = useCallback(async () => {
+  useEffect(() => {
+    const abortController = new AbortController();
+
     setView(null);
     setError(null);
     setSelection(null);
@@ -44,36 +50,55 @@ const IngestResultsPage: NextPageWithLayout = () => {
 
     const endpoint =
       source.kind === "fixture"
-        ? `/api/ingest-fixtures/${source.fixtureId}/view`
-        : `/api/ingest/${source.runId}/view`;
+        ? `/api/ingest-fixtures/${encodeURIComponent(source.fixtureId)}/view`
+        : `/api/ingest/${encodeURIComponent(source.runId)}/view`;
+
+    void (async () => {
+      try {
+        const response = await fetch(endpoint, {
+          signal: abortController.signal,
+        });
+        if (!response.ok) {
+          throw new Error(`Failed to load results: ${response.status}`);
+        }
+        const data = (await response.json()) as IngestRunView;
+        if (!abortController.signal.aborted) {
+          setView(data);
+        }
+      } catch (err) {
+        if (
+          abortController.signal.aborted ||
+          (err instanceof Error && err.name === "AbortError")
+        ) {
+          return;
+        }
 
-    try {
-      const response = await fetch(endpoint);
-      if (!response.ok) {
-        throw new Error(`Failed to load results: ${response.status}`);
+        setError(err instanceof Error ? err.message : String(err));
+      } finally {
+        if (!abortController.signal.aborted) {
+          setLoading(false);
+        }
       }
-      const data = (await response.json()) as IngestRunView;
-      setView(data);
-    } catch (err) {
-      setError(err instanceof Error ? err.message : String(err));
-    } finally {
-      setLoading(false);
-    }
+    })();
+
+    return () => {
+      abortController.abort();
+    };
   }, [source]);
 
-  useEffect(() => {
-    void fetchResults();
-  }, [fetchResults]);
+  const evidence = useMemo(
+    () =>
+      view && selection
+        ? resolveEvidence(selection, view.corpus.blocks)
+        : { blockIds: [], targetPage: null },
+    [selection, view],
+  );
 
   useEffect(() => {
-    if (!view || !selection) {
-      return;
-    }
-    const { targetPage } = resolveEvidence(selection, view.corpus.blocks);
-    if (targetPage !== null) {
-      setCurrentPage(targetPage);
+    if (evidence.targetPage !== null) {
+      setCurrentPage(evidence.targetPage);
     }
-  }, [selection, view]);
+  }, [evidence]);
 
   const handleFixtureChange = (fixtureId: string) => {
     void router.push(getIngestResultsPath({ kind: "fixture", fixtureId }));
@@ -163,11 +188,7 @@ const IngestResultsPage: NextPageWithLayout = () => {
             <PageViewer
               pageImages={view.pageImages}
               blocks={view.corpus.blocks}
-              highlightedBlockIds={
-                selection
-                  ? resolveEvidence(selection, view.corpus.blocks).blockIds
-                  : []
-              }
+              highlightedBlockIds={evidence.blockIds}
               currentPage={currentPage}
               onPageChange={setCurrentPage}
             />