feat(gui): button to expand tree view up to matched nodes (#629)

* fix(gui): make selection view info full width again

* feat(gui): button to expand tree view up to matched nodes

* style: apply automatic fixes of linters

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

Author: lars-reimann

api-editor/gui/src/features/packageData/selectionView/ActionBar.tsx

@@ -7,7 +7,7 @@ import { AnnotationStore, selectAnnotations } from '../../annotations/annotation
 import { useNavigate } from 'react-router';
 import { useAppDispatch, useAppSelector } from '../../../app/hooks';
 import { UsageCountStore } from '../../usages/model/UsageCountStore';
-import { setAllCollapsedInTreeView, setAllExpandedInTreeView } from '../../ui/uiSlice';
+import { setAllCollapsedInTreeView, setAllExpandedInTreeView, setExactlyExpandedInTreeView } from '../../ui/uiSlice';
 
 interface ActionBarProps {
     declaration: PythonDeclaration;
@@ -21,6 +21,8 @@ export const ActionBar: React.FC<ActionBarProps> = function ({ declaration, pyth
     const navigate = useNavigate();
 
     const annotations = useAppSelector(selectAnnotations);
+    const isMatched = (node: PythonDeclaration): boolean =>
+        pythonFilter.shouldKeepDeclaration(node, annotations, usages);
 
     return (
         <HStack borderTop={1} layerStyle="subtleBorder" padding="0.5em 1em" marginTop={0} w="100%">
@@ -86,6 +88,14 @@ export const ActionBar: React.FC<ActionBarProps> = function ({ declaration, pyth
             >
                 Collapse Selected
             </Button>
+            <Button
+                accessKey="m"
+                onClick={() => {
+                    dispatch(setExactlyExpandedInTreeView(getMatchedNodesAndParents(pythonPackage, isMatched)));
+                }}
+            >
+                Expand Matched
+            </Button>
         </HStack>
     );
 };
@@ -190,3 +200,42 @@ const getDescendants = function (current: PythonDeclaration): string[] {
     }
     return childrenList;
 };
+
+const getMatchedNodesAndParents = function (
+    pythonPackage: PythonPackage,
+    isMatched: (declaration: PythonDeclaration) => boolean,
+): string[] {
+    return doGetMatchedNodesAndParents(pythonPackage, isMatched).nodesToExpand;
+};
+
+interface DoGetMatchedNodesAndParentsResult {
+    nodesToExpand: string[];
+    subtreeShouldBeExpanded: boolean;
+}
+
+const doGetMatchedNodesAndParents = function (
+    current: PythonDeclaration,
+    isMatched: (declaration: PythonDeclaration) => boolean,
+): DoGetMatchedNodesAndParentsResult {
+    const nodesToExpand: string[] = [];
+    let shouldExpandThisNode = false;
+
+    for (const child of current.children()) {
+        const { nodesToExpand: childrenNodesToExpand, subtreeShouldBeExpanded } = doGetMatchedNodesAndParents(
+            child,
+            isMatched,
+        );
+
+        nodesToExpand.push(...childrenNodesToExpand);
+        shouldExpandThisNode ||= subtreeShouldBeExpanded;
+    }
+
+    if (shouldExpandThisNode) {
+        nodesToExpand.push(current.pathAsString());
+    }
+
+    return {
+        nodesToExpand,
+        subtreeShouldBeExpanded: isMatched(current) || shouldExpandThisNode,
+    };
+};

api-editor/gui/src/features/packageData/selectionView/SelectionView.tsx

@@ -29,7 +29,7 @@ export const SelectionView: React.FC<SelectionViewProps> = function ({ pythonPac
 
     return (
         <VStack h="100%" spacing={0}>
-            <Box flexGrow={1} overflowY="auto">
+            <Box flexGrow={1} overflowY="auto" width="100%">
                 <Box padding={4}>
                     {declaration instanceof PythonFunction && <FunctionView pythonFunction={declaration} />}
                     {declaration instanceof PythonClass && <ClassView pythonClass={declaration} />}

api-editor/gui/src/features/ui/uiSlice.ts

@@ -228,6 +228,13 @@ const uiSlice = createSlice({
                 delete state.expandedInTreeView[item];
             }
         },
+        setExactlyExpandedInTreeView(state, action: PayloadAction<string[]>) {
+            const all = action.payload;
+            state.expandedInTreeView = {};
+            for (const item of all) {
+                state.expandedInTreeView[item] = true;
+            }
+        },
         setTreeViewScrollOffset(state, action: PayloadAction<number>) {
             state.treeViewScrollOffset = action.payload;
         },
@@ -267,6 +274,7 @@ export const {
     toggleIsExpandedInTreeView,
     setAllExpandedInTreeView,
     setAllCollapsedInTreeView,
+    setExactlyExpandedInTreeView,
     setTreeViewScrollOffset,
     setHeatMapMode,