folder improvements in search and annotator

frontend/src/components/Folder/FolderExplorer/FolderToggleVisibilityButton.tsx

@@ -0,0 +1,29 @@
+import { IconButton, Tooltip } from "@mui/material";
+import React, { memo, useCallback } from "react";
+import { useAppDispatch, useAppSelector } from "../../../plugins/ReduxHooks.ts";
+import { getIconComponent, Icon } from "../../../utils/icons/iconUtils.tsx";
+import { SearchActions } from "../../../views/search/DocumentSearch/searchSlice.ts";
+
+function FolderToggleVisibilityButton() {
+  // redux (global client state)
+  const showFolders = useAppSelector((state) => state.search.showFolders);
+  const dispatch = useAppDispatch();
+
+  const handleClick: React.MouseEventHandler<HTMLButtonElement> = useCallback(
+    (event) => {
+      event.stopPropagation();
+      dispatch(SearchActions.onToggleShowFolders());
+    },
+    [dispatch],
+  );
+
+  return (
+    <Tooltip title="Show/hide folders">
+      <span>
+        <IconButton onClick={handleClick}>{getIconComponent(showFolders ? Icon.FOLDER : Icon.FOLDER_OFF)}</IconButton>
+      </span>
+    </Tooltip>
+  );
+}
+
+export default memo(FolderToggleVisibilityButton);

frontend/src/components/Folder/FolderExplorer/FolderToggleVisibilityMenuItem.tsx

@@ -20,7 +20,7 @@ function FolderToggleVisibilityMenuItem({ onClick, ...props }: MenuItemProps) {
 
   return (
     <MenuItem onClick={handleClick} {...props}>
-      <ListItemIcon>{getIconComponent(showFolders ? Icon.VISIBILITY : Icon.VISIBILITY_OFF)}</ListItemIcon>
+      <ListItemIcon>{getIconComponent(showFolders ? Icon.FOLDER : Icon.FOLDER_OFF)}</ListItemIcon>
       <ListItemText>Show/hide folders</ListItemText>
     </MenuItem>
   );

frontend/src/components/tableSlice.ts

@@ -7,6 +7,7 @@ import {
   MRT_SortingState,
   MRT_VisibilityState,
 } from "material-react-table";
+import { SdocColumns } from "../api/openapi/models/SdocColumns.ts";
 
 export interface TableState {
   searchQuery?: string;
@@ -23,7 +24,7 @@ export const initialTableState: TableState = {
   // project state:
   searchQuery: "",
   rowSelectionModel: {},
-  sortingModel: [],
+  sortingModel: [{ id: SdocColumns.SD_SOURCE_DOCUMENT_NAME, desc: false }],
   columnVisibilityModel: {},
   columnSizingModel: {},
   expandedModel: {},

frontend/src/utils/icons/iconUtils.tsx

@@ -21,6 +21,7 @@ import ExploreIcon from "@mui/icons-material/Explore";
 import FileCopyIcon from "@mui/icons-material/FileCopy";
 import FilterIcon from "@mui/icons-material/Filter";
 import FolderIcon from "@mui/icons-material/Folder";
+import FolderOffIcon from "@mui/icons-material/FolderOff";
 import FormatColorTextIcon from "@mui/icons-material/FormatColorText";
 import FormatListBulletedOutlinedIcon from "@mui/icons-material/FormatListBulletedOutlined";
 import HomeIcon from "@mui/icons-material/Home";
@@ -67,6 +68,7 @@ export enum Icon {
   SENTENCE_ANNOTATION = "sentence_annotation",
   BBOX_ANNOTATION = "bbox_annotation",
   FOLDER = "folder",
+  FOLDER_OFF = "folder_off",
 
   // Document types
   TEXT_DOCUMENT = "text_document",
@@ -183,6 +185,7 @@ const iconMap: Record<Icon, IconFactory> = {
   [Icon.SENTENCE_ANNOTATION]: (iconProps) => <SubjectIcon {...iconProps} />,
   [Icon.BBOX_ANNOTATION]: (iconProps) => <FilterIcon {...iconProps} />,
   [Icon.FOLDER]: (iconProps) => <FolderIcon {...iconProps} />,
+  [Icon.FOLDER_OFF]: (iconProps) => <FolderOffIcon {...iconProps} />,
 
   // Document types
   [Icon.TEXT_DOCUMENT]: (iconProps) => <ArticleIcon {...iconProps} />,

frontend/src/views/annotation/Toolbar/AnnotationToolbar.tsx

@@ -2,7 +2,18 @@ import ChromeReaderModeIcon from "@mui/icons-material/ChromeReaderMode";
 import DoNotDisturbIcon from "@mui/icons-material/DoNotDisturb";
 import FormatOverlineIcon from "@mui/icons-material/FormatOverline";
 import FormatStrikethroughIcon from "@mui/icons-material/FormatStrikethrough";
-import { ToggleButton, ToggleButtonGroup, Tooltip } from "@mui/material";
+import {
+  FormControl,
+  InputLabel,
+  MenuItem,
+  Select,
+  SelectChangeEvent,
+  ToggleButton,
+  ToggleButtonGroup,
+  Tooltip,
+} from "@mui/material";
+import { useNavigate } from "react-router";
+import FolderHooks from "../../../api/FolderHooks.ts";
 import { DocType } from "../../../api/openapi/models/DocType.ts";
 import { SourceDocumentRead } from "../../../api/openapi/models/SourceDocumentRead.ts";
 import LLMAssistanceButton from "../../../components/LLMDialog/LLMAssistanceButton.tsx";
@@ -26,11 +37,30 @@ function AnnotationToolbar({ sdoc }: AnnotationToolbarProps) {
   const isCompareMode = useAppSelector((state) => state.annotations.isCompareMode);
   const tagStyle = useAppSelector((state) => state.annotations.tagStyle);
   const dispatch = useAppDispatch();
+  const sdocFolder = FolderHooks.useGetSdocFolder(sdoc?.folder_id);
+  const folderWithSdocs = FolderHooks.useGetSdocIdsPerDoctypeInSdocFolder(sdocFolder.data?.id);
+  const sdocIds = folderWithSdocs.data?.text;
+  const navigate = useNavigate();
+
+  function handleDocSelect(event: SelectChangeEvent<number>) {
+    navigate(`/project/${sdoc?.project_id}/annotation/${event.target.value}`);
+  }
 
   return (
     <DATSToolbar disableGutters variant="dense">
       {sdoc ? (
         <>
+          {sdocIds && sdocIds.length > 1 ? (
+            <FormControl>
+              <InputLabel>Doc in Folder</InputLabel>
+              <Select size="small" value={sdoc.id} sx={{ minWidth: 120 }} onChange={handleDocSelect}>
+                {sdocIds.map((id, i) => (
+                  <MenuItem value={id}>{i + 1}</MenuItem>
+                ))}
+              </Select>
+            </FormControl>
+          ) : null}
+
           <ToggleButtonGroup
             value={annotationMode}
             exclusive

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

@@ -34,6 +34,7 @@ import NoDocumentsPlaceholder from "../../../components/DocumentUpload/NoDocumen
 import ExportSdocsButton from "../../../components/Export/ExportSdocsButton.tsx";
 import ReduxFilterDialog from "../../../components/FilterDialog/ReduxFilterDialog.tsx";
 import { MyFilter } from "../../../components/FilterDialog/filterUtils.ts";
+import FolderToggleVisibilityButton from "../../../components/Folder/FolderExplorer/FolderToggleVisibilityButton.tsx";
 import FolderMenuButton from "../../../components/Folder/FolderMenu/FolderMenuButton.tsx";
 import FolderRenderer from "../../../components/Folder/FolderRenderer.tsx";
 import LLMAssistanceButton from "../../../components/LLMDialog/LLMAssistanceButton.tsx";
@@ -418,8 +419,12 @@ function SearchDocumentTable({ projectId, onSearchResultsChange }: DocumentTable
     muiTableBodyRowProps: ({ row }) =>
       row.original.is_folder
         ? {
-            onClick: () => {
-              dispatch(SearchActions.onToggleSelectedSdocFolderIdChange(row.original.id));
+            onClick: (event) => {
+              if (event.detail >= 2) {
+                navigate(`/project/${projectId}/annotation/${row.original.id}`);
+              } else {
+                dispatch(SearchActions.onToggleSelectedSdocFolderIdChange(row.original.id));
+              }
             },
             sx: {
               backgroundColor: selectedSdocFolderId === row.original.id ? "lightgrey !important" : undefined,
@@ -527,6 +532,7 @@ function SearchDocumentTable({ projectId, onSearchResultsChange }: DocumentTable
         <MRT_GlobalFilterTextField table={table} />
         <SearchOptionsMenu />
         <DocumentUploadButton />
+        <FolderToggleVisibilityButton />
         <MRT_ShowHideColumnsButton table={table} />
         <MRT_ToggleDensePaddingButton table={table} />
         <ExportSdocsButton sdocIds={selectedSdocIds} />

frontend/src/views/search/DocumentSearch/searchSlice.ts

@@ -63,7 +63,7 @@ const initialState: FilterState & TableState & SearchState = {
   expandedTagIds: [],
   expandedFolderIds: [],
   selectedFolderId: -1, // the root folder is -1
-  showFolders: true,
+  showFolders: false,
   scrollPosition: 0,
   folderSelectionType: FolderSelection.UNKNOWN,
   // app state: