Add select all and deselect all in marker menu

In markers menu add menu item to select/deselect all at once

fixes #770

Signed-off-by: hriday-panchasara <hriday.panchasara@ericsson.com>

Author: hriday-panchasara

theia-extensions/viewer-prototype/src/browser/trace-viewer/trace-viewer-toolbar-contribution.tsx

@@ -194,11 +194,17 @@ export class TraceViewerToolbarContribution implements TabBarToolbarContribution
                 <div id="trace.viewer.toolbar.filter" className="fa fa-filter" title="Markers filter" onClick={async (event: React.MouseEvent) => {
                     const toDisposeOnHide = new DisposableCollection();
                     const menuPath = TraceViewerToolbarMenus.MARKER_CATEGORIES_MENU;
-                    let index = 0;
+                    let index = 1;
                     const traceViewerWidget = widget as TraceViewerWidget;
                     const markerCategories = traceViewerWidget.getMarkerCategories();
+                    let selectAll = true;
                     markerCategories.forEach((categoryInfo, categoryName) => {
                         const toggleInd = categoryInfo.toggleInd;
+
+                        if (!toggleInd) {
+                            selectAll = false;
+                        }
+
                         index += 1;
                         toDisposeOnHide.push(this.menus.registerMenuAction(menuPath, {
                             label: categoryName,
@@ -216,6 +222,22 @@ export class TraceViewerToolbarContribution implements TabBarToolbarContribution
                         }));
                     });
 
+                    toDisposeOnHide.push(this.menus.registerMenuAction(menuPath, {
+                        label: 'Select all',
+                        commandId: 'Select all' + index.toString(),
+                        order: '0',
+                    }));
+                    toDisposeOnHide.push(this.commands.registerCommand({
+                        id: 'Select all' + index.toString(),
+                        label: 'Select all'
+                    }, {
+                        execute: () => {
+                            traceViewerWidget.updateAllMarkerCategoryState(!selectAll);
+                            return;
+                        },
+                        isToggled: () => selectAll,
+                    }));
+
                     return this.contextMenuRenderer.render({
                         menuPath,
                         args: [],

theia-extensions/viewer-prototype/src/browser/trace-viewer/trace-viewer.tsx

@@ -499,7 +499,7 @@ export class TraceViewerWidget extends ReactWidget implements StatefulWidget {
         return this.toolbarMarkerCategoriesMap;
     }
 
-    updateMarkerCategoryState(categoryName: string): void {
+    updateMarkerCategoryState(categoryName: string, skipUpdate?: boolean): void {
         const toggledmarkerCategory = this.toolbarMarkerCategoriesMap.get(categoryName);
         if (toggledmarkerCategory) {
             const categoryCount = toggledmarkerCategory?.categoryCount;
@@ -513,6 +513,19 @@ export class TraceViewerWidget extends ReactWidget implements StatefulWidget {
                 this.selectedMarkerCategoriesMap.set(outputId, selectedMarkerCategories);
             });
         }
+        if (!skipUpdate) {
+            this.update();
+        }
+    }
+
+    updateAllMarkerCategoryState(selectAll: boolean): void {
+        const markerCategories = this.getMarkerCategories();
+        for (const [key, value] of markerCategories) {
+            if (value.toggleInd === selectAll) {
+                continue;
+            }
+            this.updateMarkerCategoryState(key, true);
+        }
         this.update();
     }