Gracefully handle failing breadcrumb generation

CHANGELOG.unreleased.md

@@ -26,6 +26,7 @@ For upgrade instructions, please check the [migration guide](MIGRATIONS.released
 - Fixed the validation of some neuroglancer URLs during import. [#6722](https://github.com/scalableminds/webknossos/pull/6722)
 - Fixed a bug where deleting a dataset would fail if its representation on disk was already missing. [#6720](https://github.com/scalableminds/webknossos/pull/6720)
 - Fixed a bug where a user with multiple organizations could not log in anymore after one of their organization accounts got deactivated. [#6719](https://github.com/scalableminds/webknossos/pull/6719)
+- Fixed rare crash in new Datasets tab in dashboard. [#6750](https://github.com/scalableminds/webknossos/pull/6750)
 
 ### Removed
 

frontend/javascripts/dashboard/advanced_dataset/dataset_table.tsx

@@ -548,11 +548,10 @@ class DatasetTable extends React.PureComponent<Props, State> {
                 </Link>
                 <br />
 
-                {"getBreadcrumbs" in this.props.context ? (
+                {"getBreadcrumbs" in this.props.context &&
+                this.props.context.globalSearchQuery != null ? (
                   <BreadcrumbsTag parts={this.props.context.getBreadcrumbs(dataset)} />
-                ) : (
-                  <Tag color={stringToColor(dataset.dataStore.name)}>{dataset.dataStore.name}</Tag>
-                )}
+                ) : null}
               </>
             )}
           />

frontend/javascripts/dashboard/dataset/dataset_collection_context.tsx

@@ -165,10 +165,18 @@ export default function DatasetCollectionContextProvider({
     }
     const { itemById } = folderHierarchyQuery.data;
 
-    let currentFolder = itemById[dataset.folderId];
+    let currentFolder = itemById.get(dataset.folderId);
+    if (currentFolder == null) {
+      console.warn("Breadcrumbs could not be computed.");
+      return [];
+    }
     const breadcrumbs = [currentFolder.title];
     while (currentFolder?.parent != null) {
-      currentFolder = itemById[currentFolder.parent];
+      currentFolder = itemById.get(currentFolder.parent);
+      if (currentFolder == null) {
+        console.warn("Breadcrumbs could not be computed.");
+        return [];
+      }
       breadcrumbs.unshift(currentFolder.title);
     }
 

frontend/javascripts/dashboard/dataset/queries.tsx

@@ -537,13 +537,13 @@ function getUnobtrusivelyUpdatedDatasets(
 
 type FolderHierarchy = {
   tree: FolderItem[];
-  itemById: Record<string, FolderItem>;
+  itemById: Map<string, FolderItem>;
   flatItems: FlatFolderTreeItem[];
 };
 
 export function getFolderHierarchy(folderTree: FlatFolderTreeItem[]): FolderHierarchy {
   const roots: FolderItem[] = [];
-  const itemById: Record<string, FolderItem> = {};
+  const itemById: Map<string, FolderItem> = new Map();
   for (const folderTreeItem of folderTree) {
     const treeItem = {
       key: folderTreeItem.id,
@@ -555,18 +555,25 @@ export function getFolderHierarchy(folderTree: FlatFolderTreeItem[]): FolderHier
     if (folderTreeItem.parent == null) {
       roots.push(treeItem);
     }
-    itemById[folderTreeItem.id] = treeItem;
+    itemById.set(folderTreeItem.id, treeItem);
   }
 
+  // Satisfy TypeScript
+  const get = (id: string): FolderItem =>
+    Utils.enforceValue(
+      itemById.get(id),
+      "Unexpected error during initialization of folder structure",
+    );
+
   for (const folderTreeItem of folderTree) {
     if (folderTreeItem.parent != null) {
-      itemById[folderTreeItem.parent].children.push(itemById[folderTreeItem.id]);
+      get(folderTreeItem.parent).children.push(get(folderTreeItem.id));
     }
   }
 
   for (const folderTreeItem of folderTree) {
     if (folderTreeItem.parent != null) {
-      itemById[folderTreeItem.parent].children.sort((a, b) => a.title.localeCompare(b.title));
+      get(folderTreeItem.parent).children.sort((a, b) => a.title.localeCompare(b.title));
     }
   }
 

frontend/javascripts/dashboard/folders/folder_tree.tsx

@@ -29,13 +29,13 @@ export function FolderTreeSidebar({
   const [treeData, setTreeData] = useState<FolderItem[]>([]);
   const context = useDatasetCollectionContext();
   const [expandedKeys, setExpandedKeys] = useState<string[]>([]);
-  const itemByIdRef = useRef<Record<string, FolderItem>>({});
+  const itemByIdRef = useRef<Map<string, FolderItem>>(new Map());
 
   const { data: folderHierarchy, isLoading } = context.queries.folderHierarchyQuery;
 
   useEffect(() => {
     const newTreeData = folderHierarchy?.tree || [];
-    const itemById = folderHierarchy?.itemById || {};
+    const itemById = folderHierarchy?.itemById || new Map();
     const newExpandedKeys = deriveExpandedTrees(
       newTreeData,
       itemById,
@@ -45,7 +45,7 @@ export function FolderTreeSidebar({
     itemByIdRef.current = itemById;
     if (
       newTreeData.length > 0 &&
-      (context.activeFolderId == null || itemById[context.activeFolderId] == null)
+      (context.activeFolderId == null || itemById.get(context.activeFolderId) == null)
     ) {
       // Select the root if there's no active folder id or if the active folder id doesn't
       // exist in the tree data (e.g., happens when deleting the active folder).
@@ -117,8 +117,8 @@ export function FolderTreeSidebar({
       }
 
       function moveIfAllowed(sourceId: string, targetId: string) {
-        const sourceAllowed = itemByIdRef.current[sourceId]?.isEditable ?? false;
-        const targetAllowed = itemByIdRef.current[targetId]?.isEditable ?? false;
+        const sourceAllowed = itemByIdRef.current.get(sourceId)?.isEditable ?? false;
+        const targetAllowed = itemByIdRef.current.get(targetId)?.isEditable ?? false;
         if (sourceAllowed && targetAllowed) {
           context.queries.moveFolderMutation.mutateAsync([sourceId, targetId]);
         } else {
@@ -361,7 +361,7 @@ const nullableIdToArray = memoizeOne(_nullableIdToArray);
 
 function deriveExpandedTrees(
   roots: FolderItem[],
-  itemById: Record<string, FolderItem>,
+  itemById: Map<string, FolderItem>,
   prevExpandedKeys: string[],
   activeFolderId: string | null,
 ) {
@@ -371,18 +371,18 @@ function deriveExpandedTrees(
   }
 
   for (const oldExpandedKey of prevExpandedKeys) {
-    const maybeItem = itemById[oldExpandedKey];
+    const maybeItem = itemById.get(oldExpandedKey);
     if (maybeItem != null) {
       newExpandedKeySet.add(oldExpandedKey);
     }
   }
 
   // Expand the parent chain of the active folder.
   if (activeFolderId != null) {
-    let currentFolder = itemById[activeFolderId];
+    let currentFolder = itemById.get(activeFolderId);
     while (currentFolder?.parent != null) {
       newExpandedKeySet.add(currentFolder.parent as string);
-      currentFolder = itemById[currentFolder.parent];
+      currentFolder = itemById.get(currentFolder.parent);
     }
   }
 

frontend/javascripts/libs/utils.ts

@@ -124,6 +124,13 @@ export function enforce<A, B>(fn: (arg0: A) => B): (arg0: A | null | undefined)
   };
 }
 
+export function enforceValue<T>(val: T | null, msg?: string): NonNullable<T> {
+  if (val == null) {
+    throw new Error(msg || "Unexpected null value");
+  }
+  return val;
+}
+
 export function maybe<A, B>(fn: (arg0: A) => B): (arg0: A | null | undefined) => Maybe<B> {
   return (nullableA: A | null | undefined) => Maybe.fromNullable(nullableA).map(fn);
 }