feat(gui): graphical progress bar for annotation process (#691)

* refactor(gui): extract components

* refactor(gui): extract components

* feat(gui): progress statistics

* perf(gui): disable serialization check

* feat(gui): only count annotations on matched elements

* feat(gui): shorter labels

* style: apply automatic fixes of linters

Co-authored-by: lars-reimann <lars-reimann@users.noreply.github.com>

Author: lars-reimann

api-editor/gui/src/app/App.tsx

@@ -70,7 +70,7 @@ import { AbstractPythonFilter } from '../features/filter/model/AbstractPythonFil
 import { UsageCountStore } from '../features/usages/model/UsageCountStore';
 import { PythonDeclaration } from '../features/packageData/model/PythonDeclaration';
 import { SaveFilterDialog } from '../features/filter/SaveFilterDialog';
-import { StatisticsView } from '../features/packageData/selectionView/StatisticsView';
+import { StatisticsView } from '../features/statistics/StatisticsView';
 
 export const App: React.FC = function () {
     useIndexedDB();

api-editor/gui/src/app/store.ts

@@ -14,19 +14,7 @@ export const store = configureStore({
     },
     middleware: (getDefaultMiddleware) =>
         getDefaultMiddleware({
-            serializableCheck: {
-                // Ignore these action types
-                ignoredActions: [
-                    'api/initialize',
-                    'api/initialize/fulfilled',
-                    'api/setPythonPackage',
-                    'usages/initialize',
-                    'usages/initialize/fulfilled',
-                    'usages/setUsages',
-                ],
-                // Ignore these paths in the state
-                ignoredPaths: ['api.pythonPackage', 'usages.usages'],
-            },
+            serializableCheck: false,
         }),
 });
 

api-editor/gui/src/features/annotations/annotationSlice.ts

@@ -352,7 +352,6 @@ const annotationsSlice = createSlice({
 
             updateQueue(state);
         },
-        // TODO update
         mergeAnnotationStore(state, action: PayloadAction<AnnotationStore>) {
             for (const annotationType of Object.keys(action.payload)) {
                 if (annotationType === 'calledAfters' || annotationType === 'groups') {
@@ -966,7 +965,7 @@ export const selectTodo =
     (target: string) =>
     (state: RootState): TodoAnnotation | undefined =>
         selectAnnotationStore(state).todos[target];
-export const selectNumberOfAnnotations =
+export const selectNumberOfAnnotationsOnTarget =
     (target: string) =>
     (state: RootState): number => {
         return Object.entries(selectAnnotationStore(state)).reduce((acc, [annotationType, annotations]) => {
@@ -979,5 +978,24 @@ export const selectNumberOfAnnotations =
             }
         }, 0);
     };
+export const selectAllAnnotationsOnTargets =
+    (targets: string[]) =>
+    (state: RootState): Annotation[] =>
+        targets.flatMap((target) => selectAllAnnotationsOnTarget(target)(state));
+const selectAllAnnotationsOnTarget =
+    (target: string) =>
+    (state: RootState): Annotation[] => {
+        return Object.entries(selectAnnotationStore(state)).flatMap(([annotationType, targetToAnnotations]) => {
+            switch (annotationType) {
+                case 'completes':
+                    return [];
+                case 'calledAfters':
+                case 'groups':
+                    return Object.values(targetToAnnotations[target] ?? {});
+                default:
+                    return targetToAnnotations[target] ?? [];
+            }
+        });
+    };
 export const selectUsername = (state: RootState): string => selectAnnotationSlice(state).username;
 export const selectUsernameIsValid = (state: RootState): boolean => isValidUsername(selectUsername(state));

api-editor/gui/src/features/packageData/apiSlice.ts

@@ -70,18 +70,24 @@ export const selectFilteredPythonPackage = createSelector(
         return filter.applyToPackage(pythonPackage, annotations, usages);
     },
 );
-export const selectNumberOfMatchedNodes = createSelector(
+export const selectMatchedNodes = createSelector(
     [selectFilteredPythonPackage, selectAnnotationStore, selectUsages, selectFilter],
     (pythonPackage, annotations, usages, filter) => {
-        let result = -1; // We start with -1, since the PythonPackage is always kept but should not be counted
+        const result = [];
         for (const declaration of pythonPackage.descendantsOrSelf()) {
-            if (filter.shouldKeepDeclaration(declaration, annotations, usages)) {
-                result++;
+            if (
+                !(declaration instanceof PythonPackage) &&
+                filter.shouldKeepDeclaration(declaration, annotations, usages)
+            ) {
+                result.push(declaration);
             }
         }
         return result;
     },
 );
+export const selectNumberOfMatchedNodes = createSelector([selectMatchedNodes], (matchedNodes) => {
+    return matchedNodes.length;
+});
 export const selectFlatSortedDeclarationList = createSelector(
     [selectFilteredPythonPackage, selectSortingMode, selectUsages],
     (pythonPackage, sortingMode, usages) => {