feat: Added undo and redo buttons for annotation editing (#665)

* feat: Added undo and redo buttons for annotation editing. Importing annotations are broken

* revert(gui): changes to filter files

* fix(gui): build errors

* style: apply automatic fixes of linters

* feat(gui): update access keys

* fix(gui): array bounds check

* fix(gui): crash when element in tree view is selected

* style: apply automatic fixes of linters

* feat(gui): allow undoing annotation import

* feat(gui): allow undoing "delete all annotations"

* style: apply automatic fixes of linters

* feat(gui): allow undoing batch operations

* feat(gui): reduce code duplication

* style: apply automatic fixes of linters

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

Author: Masara

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

@@ -18,7 +18,8 @@ import {
     AnnotationStore,
     initializeAnnotations,
     persistAnnotations,
-    selectAnnotations,
+    selectAnnotationSlice,
+    selectAnnotationStore,
 } from '../features/annotations/annotationSlice';
 import { BoundaryForm } from '../features/annotations/forms/BoundaryForm';
 import { CalledAfterForm } from '../features/annotations/forms/CalledAfterForm';
@@ -71,7 +72,7 @@ export const App: React.FC = function () {
     useIndexedDB();
 
     const rawPythonPackage = useAppSelector(selectRawPythonPackage);
-    const annotationStore = useAppSelector(selectAnnotations);
+    const annotationStore = useAppSelector(selectAnnotationStore);
     const usages = useAppSelector(selectUsages);
     const filter = useAppSelector(selectFilter);
 
@@ -233,7 +234,7 @@ const useIndexedDB = function () {
 
 const usePersistentAnnotations = function () {
     const dispatch = useAppDispatch();
-    const annotationStore = useAppSelector(selectAnnotations);
+    const annotationSlice = useAppSelector(selectAnnotationSlice);
     const [isInitialized, setIsInitialized] = useState(false);
 
     useEffect(() => {
@@ -245,9 +246,9 @@ const usePersistentAnnotations = function () {
 
     useEffect(() => {
         if (isInitialized) {
-            dispatch(persistAnnotations(annotationStore));
+            dispatch(persistAnnotations(annotationSlice));
         }
-    }, [dispatch, annotationStore, isInitialized]);
+    }, [dispatch, annotationSlice, isInitialized]);
 };
 
 const usePersistentAPIState = function () {

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

@@ -12,7 +12,7 @@ import {
 } from '@chakra-ui/react';
 import React, { useRef, useState } from 'react';
 import { useAppDispatch } from '../app/hooks';
-import { resetAnnotations } from '../features/annotations/annotationSlice';
+import { resetAnnotationStore } from '../features/annotations/annotationSlice';
 
 export const DeleteAllAnnotations = function () {
     const dispatch = useAppDispatch();
@@ -22,7 +22,7 @@ export const DeleteAllAnnotations = function () {
     // Event handlers ----------------------------------------------------------
 
     const handleConfirm = () => {
-        dispatch(resetAnnotations());
+        dispatch(resetAnnotationStore());
         setIsOpen(false);
     };
     const handleCancel = () => setIsOpen(false);

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

@@ -16,7 +16,7 @@ import {
 } from '@chakra-ui/react';
 import React, { useRef, useState } from 'react';
 import { useAppSelector } from '../app/hooks';
-import { selectAnnotations } from '../features/annotations/annotationSlice';
+import { selectAnnotationStore } from '../features/annotations/annotationSlice';
 import { AnnotatedPythonPackageBuilder } from '../features/annotatedPackageData/model/AnnotatedPythonPackageBuilder';
 import { selectRawPythonPackage } from '../features/packageData/apiSlice';
 
@@ -30,7 +30,7 @@ export const GenerateAdapters: React.FC<GenerateAdaptersProps> = function ({ dis
     const [shouldValidate, setShouldValidate] = useState(false);
     const cancelRef = useRef(null);
 
-    const annotationStore = useAppSelector(selectAnnotations);
+    const annotationStore = useAppSelector(selectAnnotationStore);
     const pythonPackage = useAppSelector(selectRawPythonPackage);
 
     const packageNameIsValid = !shouldValidate || newPackageName !== '';

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

@@ -19,7 +19,7 @@ import {
 import React from 'react';
 import { FaChevronDown } from 'react-icons/fa';
 import { useAppDispatch, useAppSelector } from '../app/hooks';
-import { selectAnnotations } from '../features/annotations/annotationSlice';
+import { selectAnnotationStore } from '../features/annotations/annotationSlice';
 import { FilterHelpButton } from './FilterHelpButton';
 import {
     BatchMode,
@@ -49,7 +49,7 @@ export const MenuBar: React.FC<MenuBarProps> = function ({ displayInferErrors })
     const dispatch = useAppDispatch();
     const navigate = useNavigate();
 
-    const annotationStore = useAppSelector(selectAnnotations);
+    const annotationStore = useAppSelector(selectAnnotationStore);
     const sortingMode = useAppSelector(selectSortingMode);
     const heatMapMode = useAppSelector(selectHeatMapMode);
 

api-editor/gui/src/features/annotations/AnnotationImportDialog.tsx

@@ -17,23 +17,23 @@ import React, { useState } from 'react';
 import { useAppDispatch } from '../../app/hooks';
 import { StyledDropzone } from '../../common/StyledDropzone';
 import { isValidJsonFile } from '../../common/util/validation';
-import { AnnotationStore, initialState, mergeAnnotations, setAnnotations } from './annotationSlice';
+import { AnnotationStore, initialAnnotationStore, mergeAnnotationStore, setAnnotationStore } from './annotationSlice';
 import { hideAnnotationImportDialog, toggleAnnotationImportDialog } from '../ui/uiSlice';
 
 export const AnnotationImportDialog: React.FC = function () {
     const [fileName, setFileName] = useState('');
-    const [newAnnotationStore, setNewAnnotationStore] = useState<AnnotationStore>(initialState);
+    const [newAnnotationStore, setNewAnnotationStore] = useState<AnnotationStore>(initialAnnotationStore);
     const dispatch = useAppDispatch();
 
     const merge = () => {
         if (fileName) {
-            dispatch(mergeAnnotations(newAnnotationStore));
+            dispatch(mergeAnnotationStore(newAnnotationStore));
         }
         dispatch(hideAnnotationImportDialog());
     };
     const replace = () => {
         if (fileName) {
-            dispatch(setAnnotations(newAnnotationStore));
+            dispatch(setAnnotationStore(newAnnotationStore));
         }
         dispatch(hideAnnotationImportDialog());
     };