updated frontend to update query cache with additional information provdided by the search endpoint

Author: bigabig

INSTRUCTIONS.md

@@ -0,0 +1,39 @@
+# DATS Coding Instructions
+
+useCallback: wrap all functions in useCallback if
+
+- it uses dispatch
+- it uses a mutation
+- the function is used by a non-presentational component. Presentational components are simple components that are either plain MUI components, or components that compose multiple MUI component with NO additional complex logic.
+
+Hi, I want you to help me start optimizing my components. I plan to properly memoize my components using useCallback, useMemo and memo.
+Please optimize all components in this directory (and all sub-directories) frontend/src/components/Memo/ according to the following guidelines:
+
+Functions:
+I want you to memoize all functions with useCallback. If there are any inline function definitions (in the rendering part), please create a new callback function for this.
+
+Components:
+If possible, try to memoize the component itself using memo. All my components should be normal functions and exported default at the bottom. If you think the component can be memoized with memo(), wrap the export default!
+If there are multiple components defined inside a file, still, only wrap the component that is exported.
+If the component is a very basic presentational component, there is no need to memoize it.
+
+Mutations:
+Sometimes, I am using react query mutations. Beware! The mutation is not a stable reference and should not used in dependency arrays of useCallbacks. We need to destructure the mutation like that {mutate: functionName, isPending } = useMyMutation(). The functionName is now a stable reference that can be used
+
+Computed variables:
+In case you see any variables that are a result of heavy computation, please consider using useMemo.
+
+Rendering:
+By default, please do not useMemo to memoize components that are rendered. Instead, first see if we can optimize the rendered component.
+Only as a last resort, memoize the component with useMemo.
+
+Comments:
+Keep all my comments! Never delete my comments! You may add new comments if you think that is necessary, but DO NOT delete my comments.
+
+General Guidelines:
+
+- DO NOT rename existing variables, functions, components, except if they have typos!
+- only optimize Components, do not optimize hooks
+- DO NOT move (sub-)components inside a file, the order is fine!
+
+Sometimes, the component is already optimized. Then, you can simply skip it!

frontend/src/api/SdocHooks.ts

@@ -110,6 +110,7 @@ const useGetAnnotators = (sdocId: number | null | undefined) =>
       SourceDocumentService.getAnnotators({
         sdocId: sdocId!,
       }),
+    staleTime: 1000 * 60 * 5,
     enabled: !!sdocId,
   });
 

frontend/src/api/openapi/models/PaginatedSDocHits.ts

@@ -0,0 +1,28 @@
+/* generated using openapi-typescript-codegen -- do not edit */
+/* istanbul ignore file */
+/* tslint:disable */
+/* eslint-disable */
+import type { ElasticSearchDocumentHit } from "./ElasticSearchDocumentHit";
+import type { SourceDocumentRead } from "./SourceDocumentRead";
+export type PaginatedSDocHits = {
+  /**
+   * The IDs, scores and (optional) highlights of Document search results on the requested page.
+   */
+  hits: Array<ElasticSearchDocumentHit>;
+  /**
+   * A dictionary with the additional information about the documents. The key is the document ID and the value is a dictionary with the additional information.
+   */
+  sdocs: Record<string, SourceDocumentRead>;
+  /**
+   * A dictionary with the additional information about the documents. The key is the document ID and the value is a dictionary with the additional information.
+   */
+  annotators: Record<string, Array<number>>;
+  /**
+   * A dictionary with the additional information about the documents. The key is the document ID and the value is a dictionary with the additional information.
+   */
+  tags: Record<string, Array<number>>;
+  /**
+   * The total number of hits. Used for pagination.
+   */
+  total_results: number;
+};

frontend/src/api/openapi/services/SearchService.ts

@@ -7,7 +7,7 @@ import type { Body_search_find_similar_sentences } from "../models/Body_search_f
 import type { Body_search_search_sdocs } from "../models/Body_search_search_sdocs";
 import type { ColumnInfo_SdocColumns_ } from "../models/ColumnInfo_SdocColumns_";
 import type { KeywordStat } from "../models/KeywordStat";
-import type { PaginatedElasticSearchDocumentHits } from "../models/PaginatedElasticSearchDocumentHits";
+import type { PaginatedSDocHits } from "../models/PaginatedSDocHits";
 import type { SimSearchImageHit } from "../models/SimSearchImageHit";
 import type { SimSearchSentenceHit } from "../models/SimSearchSentenceHit";
 import type { SpanEntityStat } from "../models/SpanEntityStat";
@@ -39,7 +39,7 @@ export class SearchService {
   }
   /**
    * Returns all SourceDocument Ids and their scores and (optional) hightlights that match the query parameters.
-   * @returns PaginatedElasticSearchDocumentHits Successful Response
+   * @returns PaginatedSDocHits Successful Response
    * @throws ApiError
    */
   public static searchSdocs({
@@ -58,7 +58,7 @@ export class SearchService {
     requestBody: Body_search_search_sdocs;
     pageNumber?: number | null;
     pageSize?: number | null;
-  }): CancelablePromise<PaginatedElasticSearchDocumentHits> {
+  }): CancelablePromise<PaginatedSDocHits> {
     return __request(OpenAPI, {
       method: "POST",
       url: "/search/sdoc",

frontend/src/components/Tag/TagMenu/TagMenu.tsx

@@ -100,7 +100,6 @@ function TagMenuContent({
   const { mutate: addTagsMutation } = TagHooks.useBulkLinkDocumentTags();
   const { mutate: removeTagsMutation } = TagHooks.useBulkUnlinkDocumentTags();
   const handleClickTag = (tagId: number) => () => {
-    console.log("HI!");
     if (initialChecked.get(tagId) === CheckboxState.CHECKED) {
       removeTagsMutation({
         requestBody: {

frontend/src/openapi.json

@@ -2802,9 +2802,7 @@
         "responses": {
           "200": {
             "description": "Successful Response",
-            "content": {
-              "application/json": { "schema": { "$ref": "#/components/schemas/PaginatedElasticSearchDocumentHits" } }
-            }
+            "content": { "application/json": { "schema": { "$ref": "#/components/schemas/PaginatedSDocHits" } } }
           },
           "422": {
             "description": "Validation Error",
@@ -8091,6 +8089,42 @@
         "required": ["hits", "total_results"],
         "title": "PaginatedElasticSearchDocumentHits"
       },
+      "PaginatedSDocHits": {
+        "properties": {
+          "hits": {
+            "items": { "$ref": "#/components/schemas/ElasticSearchDocumentHit" },
+            "type": "array",
+            "title": "Hits",
+            "description": "The IDs, scores and (optional) highlights of Document search results on the requested page."
+          },
+          "sdocs": {
+            "additionalProperties": { "$ref": "#/components/schemas/SourceDocumentRead" },
+            "type": "object",
+            "title": "Sdocs",
+            "description": "A dictionary with the additional information about the documents. The key is the document ID and the value is a dictionary with the additional information."
+          },
+          "annotators": {
+            "additionalProperties": { "items": { "type": "integer" }, "type": "array" },
+            "type": "object",
+            "title": "Annotators",
+            "description": "A dictionary with the additional information about the documents. The key is the document ID and the value is a dictionary with the additional information."
+          },
+          "tags": {
+            "additionalProperties": { "items": { "type": "integer" }, "type": "array" },
+            "type": "object",
+            "title": "Tags",
+            "description": "A dictionary with the additional information about the documents. The key is the document ID and the value is a dictionary with the additional information."
+          },
+          "total_results": {
+            "type": "integer",
+            "title": "Total Results",
+            "description": "The total number of hits. Used for pagination."
+          }
+        },
+        "type": "object",
+        "required": ["hits", "sdocs", "annotators", "tags", "total_results"],
+        "title": "PaginatedSDocHits"
+      },
       "PreProProjectStatus": {
         "properties": {
           "project_id": {

frontend/src/views/search/DocumentSearch/SearchDocumentTable.tsx

@@ -17,6 +17,7 @@ import { ElasticSearchDocumentHit } from "../../../api/openapi/models/ElasticSea
 import { PaginatedElasticSearchDocumentHits } from "../../../api/openapi/models/PaginatedElasticSearchDocumentHits.ts";
 import { SdocColumns } from "../../../api/openapi/models/SdocColumns.ts";
 import { SortDirection } from "../../../api/openapi/models/SortDirection.ts";
+import { SourceDocumentRead } from "../../../api/openapi/models/SourceDocumentRead.ts";
 import { SearchService } from "../../../api/openapi/services/SearchService.ts";
 import { useAuth } from "../../../auth/useAuth.ts";
 import DocumentUploadButton from "../../../components/DocumentUpload/DocumentUploadButton.tsx";
@@ -34,6 +35,7 @@ import SdocRenderer from "../../../components/SourceDocument/SdocRenderer.tsx";
 import SdocTagsRenderer from "../../../components/SourceDocument/SdocTagRenderer.tsx";
 import TagMenuButton from "../../../components/Tag/TagMenu/TagMenuButton.tsx";
 import { selectSelectedDocumentIds } from "../../../components/tableSlice.ts";
+import queryClient from "../../../plugins/ReactQueryClient.ts";
 import { useAppDispatch, useAppSelector } from "../../../plugins/ReduxHooks.ts";
 import { RootState } from "../../../store/store.ts";
 import { useReduxConnector } from "../../../utils/useReduxConnector.ts";
@@ -166,8 +168,8 @@ function SearchDocumentTable({ projectId, onSearchResultsChange }: DocumentTable
       sortingModel, // refetch when sorting changes
       fetchSize,
     ],
-    queryFn: ({ pageParam }) =>
-      SearchService.searchSdocs({
+    queryFn: async ({ pageParam }) => {
+      const data = await SearchService.searchSdocs({
         searchQuery: searchQuery || "",
         projectId: projectId!,
         highlight: true,
@@ -181,7 +183,26 @@ function SearchDocumentTable({ projectId, onSearchResultsChange }: DocumentTable
         },
         pageNumber: pageParam as number,
         pageSize: fetchSize,
-      }),
+      });
+
+      // initialize the query cache
+      console.log("Initializing sdoc query cache");
+      Object.entries(data.sdocs).forEach(([sdocId, sdoc]) => {
+        queryClient.setQueryData<SourceDocumentRead>([QueryKey.SDOC, parseInt(sdocId)], sdoc);
+        queryClient.setQueryData<number>([QueryKey.SDOC_ID, projectId, sdoc.filename], sdoc.id);
+      });
+
+      console.log("Initializing annotators query cache");
+      Object.entries(data.annotators).forEach(([sdocId, annotators]) => {
+        queryClient.setQueryData<number[]>([QueryKey.SDOC_ANNOTATORS, parseInt(sdocId)], annotators);
+      });
+
+      console.log("Initializing tags query cache");
+      Object.entries(data.tags).forEach(([sdocId, tags]) => {
+        queryClient.setQueryData<number[]>([QueryKey.SDOC_TAGS, parseInt(sdocId)], tags);
+      });
+      return data;
+    },
     initialPageParam: 0,
     enabled: !!projectId,
     getNextPageParam: (_lastGroup, groups) => {