Improve Document Selection Workflows

frontend/src/components/documents/CorpusDocumentCards.tsx

@@ -12,6 +12,7 @@ import {
   authToken,
   filterToLabelId,
   selectedMetaAnnotationId,
+  openedDocument,
 } from "../../graphql/cache";
 import {
   REMOVE_DOCUMENTS_FROM_CORPUS,
@@ -37,6 +38,7 @@ export const CorpusDocumentCards = ({
    * that corpus and let you browse them.
    */
 
+  const selected_document_ids = useReactiveVar(selectedDocumentIds);
   const document_search_term = useReactiveVar(documentSearchTerm);
   const selected_metadata_id_to_filter_on = useReactiveVar(
     selectedMetaAnnotationId
@@ -152,6 +154,23 @@ export const CorpusDocumentCards = ({
       });
   };
 
+  const onSelect = (document: DocumentType) => {
+    // console.log("On selected document", document);
+    if (selected_document_ids.includes(document.id)) {
+      // console.log("Already selected... deselect")
+      const values = selected_document_ids.filter((id) => id !== document.id);
+      // console.log("Filtered values", values);
+      selectedDocumentIds(values);
+    } else {
+      selectedDocumentIds([...selected_document_ids, document.id]);
+    }
+    // console.log("selected doc ids", selected_document_ids);
+  };
+
+  const onOpen = (document: DocumentType) => {
+    openedDocument(document);
+  };
+
   return (
     <DocumentCards
       items={document_items}
@@ -160,6 +179,8 @@ export const CorpusDocumentCards = ({
       pageInfo={documents_response?.documents.pageInfo}
       style={{ minHeight: "70vh" }}
       fetchMore={fetchMoreDocuments}
+      onShiftClick={onSelect}
+      onClick={onOpen}
       removeFromCorpus={opened_corpus_id ? handleRemoveContracts : undefined}
     />
   );

frontend/src/components/documents/DocumentCards.tsx

@@ -16,6 +16,8 @@ interface DocumentCardProps {
   pageInfo: PageInfo | undefined;
   loading: boolean;
   loading_message: string;
+  onShiftClick?: (document: DocumentType) => void;
+  onClick?: (document: DocumentType) => void;
   removeFromCorpus?: (doc_ids: string[]) => void | any;
   fetchMore: (args?: any) => void | any;
 }
@@ -26,6 +28,8 @@ export const DocumentCards = ({
   pageInfo,
   loading,
   loading_message,
+  onShiftClick,
+  onClick,
   removeFromCorpus,
   fetchMore,
 }: DocumentCardProps) => {
@@ -75,6 +79,8 @@ export const DocumentCards = ({
         <DocumentItem
           key={node?.id ? node.id : `doc_item_${index}`}
           item={node}
+          onClick={onClick}
+          onShiftClick={onShiftClick}
           contextMenuOpen={contextMenuOpen}
           setContextMenuOpen={setContextMenuOpen}
           removeFromCorpus={removeFromCorpus}

frontend/src/components/documents/DocumentItem.tsx

@@ -14,25 +14,17 @@ import _ from "lodash";
 
 import {
   editingDocument,
-  openedCorpus,
-  openedDocument,
   selectedDocumentIds,
   showAddDocsToCorpusModal,
   showDeleteDocumentsModal,
   viewingDocument,
 } from "../../graphql/cache";
-import {
-  AnnotationLabelType,
-  CorpusType,
-  DocumentType,
-} from "../../graphql/types";
-import { useMutation, useReactiveVar } from "@apollo/client";
+import { AnnotationLabelType, DocumentType } from "../../graphql/types";
 import { downloadFile } from "../../utils/files";
 import fallback_doc_icon from "../../assets/images/defaults/default_doc_icon.jpg";
 import { getPermissions } from "../../utils/transform";
 import { PermissionTypes } from "../types";
 import { MyPermissionsIndicator } from "../widgets/permissions/MyPermissionsIndicator";
-import { REMOVE_DOCUMENTS_FROM_CORPUS } from "../../graphql/mutations";
 
 interface DocumentItemProps {
   item: DocumentType;
@@ -41,6 +33,8 @@ interface DocumentItemProps {
   edit_caption?: string;
   add_caption?: string;
   contextMenuOpen: string | null;
+  onShiftClick?: (document: DocumentType) => void;
+  onClick?: (document: DocumentType) => void;
   removeFromCorpus?: (doc_ids: string[]) => void | any;
   setContextMenuOpen: (args: any) => any | void;
 }
@@ -52,11 +46,11 @@ export const DocumentItem = ({
   delete_caption = "Delete Document",
   download_caption = "Download PDF",
   contextMenuOpen,
+  onShiftClick,
+  onClick,
   removeFromCorpus,
   setContextMenuOpen,
 }: DocumentItemProps) => {
-  const selected_document_ids = useReactiveVar(selectedDocumentIds);
-
   const contextRef = React.useRef<HTMLElement | null>(null);
 
   const createContextFromEvent = (
@@ -85,23 +79,6 @@ export const DocumentItem = ({
     } as HTMLElement;
   };
 
-  const onSelect = (document: DocumentType) => {
-    // console.log("On selected document", document);
-    if (selected_document_ids.includes(document.id)) {
-      // console.log("Already selected... deselect")
-      const values = selected_document_ids.filter((id) => id !== document.id);
-      // console.log("Filtered values", values);
-      selectedDocumentIds(values);
-    } else {
-      selectedDocumentIds([...selected_document_ids, document.id]);
-    }
-    // console.log("selected doc ids", selected_document_ids);
-  };
-
-  const onOpen = (document: DocumentType) => {
-    openedDocument(document);
-  };
-
   const onDownload = (file_url: string | void | null) => {
     if (file_url) {
       downloadFile(file_url);
@@ -130,13 +107,13 @@ export const DocumentItem = ({
     event.stopPropagation();
     if (event.shiftKey) {
       // console.log("Shift Click - Check onSelect");
-      if (onSelect && _.isFunction(onSelect)) {
+      if (onShiftClick && _.isFunction(onShiftClick)) {
         // console.log("onSelect");
-        onSelect(item);
+        onShiftClick(item);
       }
     } else {
-      if (onOpen && _.isFunction(onOpen)) {
-        onOpen(item);
+      if (onClick && _.isFunction(onClick)) {
+        onClick(item);
       }
     }
   };

frontend/src/components/widgets/modals/SelectDocumentsModal.tsx

@@ -135,11 +135,25 @@ export const SelectDocumentsModal = ({
     selectedDocumentIds([]);
     toggleModal();
   };
+
   const handleCancel = () => {
     selectedDocumentIds([]);
     toggleModal();
   };
 
+  const onSelect = (document: DocumentType) => {
+    // console.log("On selected document", document);
+    if (selected_document_ids.includes(document.id)) {
+      // console.log("Already selected... deselect")
+      const values = selected_document_ids.filter((id) => id !== document.id);
+      // console.log("Filtered values", values);
+      selectedDocumentIds(values);
+    } else {
+      selectedDocumentIds([...selected_document_ids, document.id]);
+    }
+    // console.log("selected doc ids", selected_document_ids);
+  };
+
   return (
     <Modal
       size="fullscreen"
@@ -197,6 +211,7 @@ export const SelectDocumentsModal = ({
           }
         >
           <DocumentCards
+            onClick={onSelect}
             items={document_items}
             pageInfo={documents_data?.documents?.pageInfo}
             loading={documents_loading}

frontend/src/views/Documents.tsx

@@ -115,6 +115,23 @@ export const Documents = () => {
     false
   );
 
+  const onSelect = (document: DocumentType) => {
+    // console.log("On selected document", document);
+    if (selected_document_ids.includes(document.id)) {
+      // console.log("Already selected... deselect")
+      const values = selected_document_ids.filter((id) => id !== document.id);
+      // console.log("Filtered values", values);
+      selectedDocumentIds(values);
+    } else {
+      selectedDocumentIds([...selected_document_ids, document.id]);
+    }
+    // console.log("selected doc ids", selected_document_ids);
+  };
+
+  const onOpen = (document: DocumentType) => {
+    openedDocument(document);
+  };
+
   // If we just logged in, refetch docs in case there are documents that are not public and are only visible to current user
   useEffect(() => {
     if (auth_token) {
@@ -354,6 +371,8 @@ export const Documents = () => {
       }
     >
       <DocumentCards
+        onClick={onOpen}
+        onShiftClick={onSelect}
         items={document_items}
         pageInfo={documents_data?.documents?.pageInfo}
         loading={documents_loading}