feat(gui): breadcrumbs for selected element (#786)

* feat(gui): breadcrumbs for selected element

* style: apply automatic fixes of linters

Co-authored-by: lars-reimann <[email protected]>

Author: lars-reimann

api-editor/gui/src/features/menuBar/MenuBar.tsx

@@ -12,6 +12,7 @@ import {
     MenuItemOption,
     MenuList,
     MenuOptionGroup,
+    Spacer,
     useColorMode,
 } from '@chakra-ui/react';
 import React from 'react';
@@ -57,6 +58,7 @@ import {
 } from '../packageData/apiSlice';
 import { selectUsages } from '../usages/usageSlice';
 import { useLocation, useNavigate } from 'react-router-dom';
+import { SelectionBreadcrumbs } from './SelectionBreadcrumbs';
 
 interface MenuBarProps {
     displayInferErrors: (errors: string[]) => void;
@@ -424,6 +426,12 @@ export const MenuBar: React.FC<MenuBarProps> = function ({ displayInferErrors })
                     </Menu>
                 </Box>
             </HStack>
+
+            <Spacer />
+
+            <HStack>
+                <SelectionBreadcrumbs />
+            </HStack>
         </Flex>
     );
 };

api-editor/gui/src/features/menuBar/SelectionBreadcrumbs.tsx

@@ -0,0 +1,27 @@
+import { Breadcrumb, BreadcrumbItem } from '@chakra-ui/react';
+import React from 'react';
+import { Link as RouterLink, useLocation } from 'react-router-dom';
+import { useAppSelector } from '../../app/hooks';
+import { selectRawPythonPackage } from '../packageData/apiSlice';
+import { PythonPackage } from '../packageData/model/PythonPackage';
+
+export const SelectionBreadcrumbs = function () {
+    const pythonPackage = useAppSelector(selectRawPythonPackage);
+    const selectedDeclaration = pythonPackage.getDeclarationById(useLocation().pathname.split('/').splice(1).join('/'));
+
+    if (!selectedDeclaration || selectedDeclaration instanceof PythonPackage) {
+        return null;
+    }
+
+    const declarations = [...selectedDeclaration.ancestorsOrSelf()].reverse().splice(1);
+
+    return (
+        <Breadcrumb>
+            {declarations.map((it) => (
+                <BreadcrumbItem>
+                    <RouterLink to={it.id}>{it.name}</RouterLink>
+                </BreadcrumbItem>
+            ))}
+        </Breadcrumb>
+    );
+};

api-editor/gui/src/features/packageData/model/PythonDeclaration.ts

@@ -15,6 +15,14 @@ export abstract class PythonDeclaration {
         return this.name;
     }
 
+    *ancestorsOrSelf(): Generator<PythonDeclaration> {
+        let current: Optional<PythonDeclaration> = this;
+        while (current) {
+            yield current;
+            current = current.parent();
+        }
+    }
+
     *descendantsOrSelf(): Generator<PythonDeclaration> {
         yield this;
         for (const child of this.children()) {