ui

frontend/src/app/useDetailPanel.js

@@ -12,24 +12,32 @@ export const useDetailPanel = ({
   const [detailPanelDocIds, setDetailPanelDocIds] = useState([]);
   const [detailPanelDocs, setDetailPanelDocs] = useState([]);
   const lastScrolledDetailDocRef = useRef(null);
+  const latestOrderedDocsRef = useRef([]);
 
   useEffect(() => {
-    if (!orderedSelectedDocuments.length) {
-      setDetailPanelDocIds((prev) => (prev.length ? [] : prev));
-      return;
-    }
-
-    const nextIds = orderedSelectedDocuments
-      .map((doc) => doc?.id)
-      .filter((id) => typeof id === 'string' || typeof id === 'number');
-
-    setDetailPanelDocIds((prev) => {
-      if (prev.length === nextIds.length && prev.every((id, index) => id === nextIds[index])) {
-        return prev;
+    latestOrderedDocsRef.current = orderedSelectedDocuments;
+    if (detailPanelOpen && orderedSelectedDocuments.length) {
+      const snapshotIds = orderedSelectedDocuments
+        .map((doc) => doc?.id)
+        .filter((id) => typeof id === 'string' || typeof id === 'number');
+      if (snapshotIds.length) {
+        setDetailPanelDocIds(snapshotIds);
       }
-      return nextIds;
-    });
-  }, [orderedSelectedDocuments]);
+    }
+  }, [orderedSelectedDocuments, detailPanelOpen]);
+
+  const resolveDocsForIds = useCallback(
+    (ids, fallbackDocs = []) => {
+      if (!ids?.length) {
+        return [];
+      }
+      const fallbackMap = new Map((fallbackDocs || []).map((doc) => [doc?.id, doc]));
+      return ids
+        .map((id) => documentLookup.get(id) || fallbackMap.get(id) || null)
+        .filter(Boolean);
+    },
+    [documentLookup],
+  );
 
   useEffect(() => {
     if (!detailPanelDocIds.length) {
@@ -38,17 +46,13 @@ export const useDetailPanel = ({
     }
 
     setDetailPanelDocs((prevDocs) => {
-      const prevMap = new Map((prevDocs || []).map((doc) => [doc.id, doc]));
-      const next = detailPanelDocIds
-        .map((id) => documentLookup.get(id) || prevMap.get(id) || null)
-        .filter(Boolean);
-
-      if (next.length === prevDocs.length && next.every((doc, index) => doc === prevDocs[index])) {
+      const resolved = resolveDocsForIds(detailPanelDocIds, prevDocs);
+      if (resolved.length === prevDocs.length && resolved.every((doc, index) => doc === prevDocs[index])) {
         return prevDocs;
       }
-      return next;
+      return resolved;
     });
-  }, [detailPanelDocIds, documentLookup]);
+  }, [detailPanelDocIds, resolveDocsForIds]);
 
   useEffect(() => {
     if (!detailPanelOpen) {
@@ -108,9 +112,39 @@ export const useDetailPanel = ({
 
   const detailPanelSelectedDocuments = detailPanelDocs;
 
-  const openDetailPanel = useCallback(() => {
-    setDetailPanelOpen(true);
-  }, []);
+  const openDetailPanel = useCallback(
+    ({ documentIds: explicitIds, documents: explicitDocs } = {}) => {
+      let sourceDocs = Array.isArray(explicitDocs) ? explicitDocs : null;
+      let snapshotIds = Array.isArray(explicitIds)
+        ? explicitIds.filter((id) => typeof id === 'string' || typeof id === 'number')
+        : null;
+
+      if (!snapshotIds?.length) {
+        if (!sourceDocs || !sourceDocs.length) {
+          sourceDocs = latestOrderedDocsRef.current;
+        }
+        snapshotIds = Array.isArray(sourceDocs)
+          ? sourceDocs
+              .map((doc) => doc?.id)
+              .filter((id) => typeof id === 'string' || typeof id === 'number')
+          : [];
+      }
+
+      const uniqueIds = [];
+      snapshotIds.forEach((id) => {
+        if (!uniqueIds.includes(id)) {
+          uniqueIds.push(id);
+        }
+      });
+
+      const resolvedDocs = resolveDocsForIds(uniqueIds, sourceDocs || latestOrderedDocsRef.current);
+
+      setDetailPanelDocIds(uniqueIds);
+      setDetailPanelDocs(resolvedDocs);
+      setDetailPanelOpen(true);
+    },
+    [resolveDocsForIds],
+  );
 
   const closeDetailPanel = useCallback(() => {
     setDetailPanelOpen(false);