feat: Statistics View - Annotations

api-editor/gui/src/common/MenuBar.tsx

@@ -38,6 +38,7 @@ import { DeleteAllAnnotations } from './DeleteAllAnnotations';
 import { GenerateAdapters } from './GenerateAdapters';
 import { FilterInput } from './FilterInput';
 import { selectNumberOfMatchedNodes } from '../features/packageData/apiSlice';
+import { useNavigate } from 'react-router-dom';
 
 interface MenuBarProps {
     displayInferErrors: (errors: string[]) => void;
@@ -46,6 +47,7 @@ interface MenuBarProps {
 export const MenuBar: React.FC<MenuBarProps> = function ({ displayInferErrors }) {
     const { colorMode, toggleColorMode } = useColorMode();
     const dispatch = useAppDispatch();
+    const navigate = useNavigate();
 
     const annotationStore = useAppSelector(selectAnnotations);
     const sortingMode = useAppSelector(selectSortingMode);
@@ -61,6 +63,10 @@ export const MenuBar: React.FC<MenuBarProps> = function ({ displayInferErrors })
         a.click();
     };
 
+    const setStatisticsViewPath = () => {
+        navigate(`/statisticsView`);
+    };
+
     const colorModeArray: string[] = [];
     if (colorMode === 'dark') {
         colorModeArray.push('darkMode');
@@ -142,6 +148,10 @@ export const MenuBar: React.FC<MenuBarProps> = function ({ displayInferErrors })
                                 </MenuItemOption>
                             </MenuOptionGroup>
                             <MenuDivider />
+                            <MenuItemOption value={'statistics'} onClick={setStatisticsViewPath}>
+                                Statistics
+                            </MenuItemOption>
+                            <MenuDivider />
                             <MenuGroup title="Module/Class/Function Sorting">
                                 <MenuOptionGroup
                                     type="radio"

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

@@ -11,10 +11,24 @@ import { ModuleView } from './ModuleView';
 import { ParameterView } from './ParameterView';
 import { useAppSelector } from '../../../app/hooks';
 import { selectRawPythonPackage } from '../apiSlice';
+import { StatisticsView } from './StatisticsView';
 
 export const SelectionView: React.FC = function () {
     const rawPythonPackage = useAppSelector(selectRawPythonPackage);
     const declaration = rawPythonPackage.getDeclarationById(useLocation().pathname.split('/').splice(1).join('/'));
+    const location = useLocation().pathname;
+
+    if (location === '/statisticsView') {
+        return (
+            <VStack h="100%">
+                <Box w="100%" flexGrow={1} overflowY="scroll">
+                    <Box padding={4}>
+                        <StatisticsView />
+                    </Box>
+                </Box>
+            </VStack>
+        );
+    }
 
     if (!declaration) {
         return null;

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

@@ -0,0 +1,111 @@
+import { Button, Heading, VStack, Wrap, WrapItem } from '@chakra-ui/react';
+import React from 'react';
+import { selectAnnotations } from '../../annotations/annotationSlice';
+import { useAppDispatch, useAppSelector } from '../../../app/hooks';
+import { selectFilterString, setFilterString } from '../../ui/uiSlice';
+
+export const StatisticsView: React.FC = function () {
+    const annotations = useAppSelector(selectAnnotations);
+    const filterString = useAppSelector(selectFilterString);
+    const dispatch = useAppDispatch();
+
+    const boundariesSize = Object.keys(annotations.boundaries).length;
+    const constantsSize = Object.keys(annotations.constants).length;
+    const descriptionSize = Object.keys(annotations.descriptions).length;
+    const enumsSize = Object.keys(annotations.enums).length;
+    const optionalsSize = Object.keys(annotations.optionals).length;
+    const movesSize = Object.keys(annotations.moves).length;
+    const groupsSize = Object.keys(annotations.groups).length;
+    const calledAftersSize = Object.keys(annotations.calledAfters).length;
+    const attributesSize = Object.keys(annotations.attributes).length;
+    const puresSize = Object.keys(annotations.pures).length;
+    const renamingsSize = Object.keys(annotations.renamings).length;
+    const requiredsSize = Object.keys(annotations.requireds).length;
+    const removesSize = Object.keys(annotations.removes).length;
+    const todoSize = Object.keys(annotations.todos).length;
+
+    const filterAction = (annotation: string) => {
+        const annotationFilterPrefix = 'annotation:@';
+        const annotationFilterString = annotationFilterPrefix + annotation;
+
+        //Remove existing annotation filter
+        const filterList = filterString.split(' ');
+        let newFilter = '';
+        for (const element of filterList) {
+            if (!element.startsWith(annotationFilterPrefix)) {
+                newFilter += element;
+                newFilter += ' ';
+            }
+        }
+
+        newFilter += annotationFilterString;
+        dispatch(setFilterString(newFilter));
+    };
+
+    return (
+        <VStack spacing={4}>
+            <Heading as="h2" size="md">
+                Statistics
+            </Heading>
+            <Heading as="h3" size="md">
+                Annotations
+            </Heading>
+            <Wrap mx="auto" padding="10px 10px 10px 10px">
+                <WrapItem>
+                    <Button
+                        onClick={() => filterAction('attribute')}
+                        children={'Attributes: ' + attributesSize}
+                    ></Button>
+                </WrapItem>
+                <WrapItem>
+                    <Button
+                        onClick={() => filterAction('boundary')}
+                        children={'Boundaries: ' + boundariesSize}
+                    ></Button>
+                </WrapItem>
+                <WrapItem>
+                    <Button
+                        onClick={() => filterAction('calledAfter')}
+                        children={'CalledAfter: ' + calledAftersSize}
+                    ></Button>
+                </WrapItem>
+                <WrapItem>
+                    <Button onClick={() => filterAction('constant')} children={'Constants: ' + constantsSize}></Button>
+                </WrapItem>
+                <WrapItem>
+                    <Button
+                        onClick={() => filterAction('description')}
+                        children={'Descriptions: ' + descriptionSize}
+                    ></Button>
+                </WrapItem>
+                <WrapItem>
+                    <Button onClick={() => filterAction('enum')} children={'Enums: ' + enumsSize}></Button>
+                </WrapItem>
+                <WrapItem>
+                    <Button onClick={() => filterAction('group')} children={'Groups: ' + groupsSize}></Button>
+                </WrapItem>
+                <WrapItem>
+                    <Button onClick={() => filterAction('move')} children={'Move: ' + movesSize}></Button>
+                </WrapItem>
+                <WrapItem>
+                    <Button onClick={() => filterAction('optional')} children={'Optionals: ' + optionalsSize}></Button>
+                </WrapItem>
+                <WrapItem>
+                    <Button onClick={() => filterAction('pure')} children={'Pures: ' + puresSize}></Button>
+                </WrapItem>
+                <WrapItem>
+                    <Button onClick={() => filterAction('remove')} children={'Removes: ' + removesSize}></Button>
+                </WrapItem>
+                <WrapItem>
+                    <Button onClick={() => filterAction('rename')} children={'Renaming: ' + renamingsSize}></Button>
+                </WrapItem>
+                <WrapItem>
+                    <Button onClick={() => filterAction('required')} children={'Requireds: ' + requiredsSize}></Button>
+                </WrapItem>{' '}
+                <WrapItem>
+                    <Button onClick={() => filterAction('todo')} children={'Todos: ' + todoSize}></Button>
+                </WrapItem>
+            </Wrap>
+        </VStack>
+    );
+};