Add Toolbar Icons for Zoom In, Zoom Out and Reset.

Signed-off-by: muddana-satish <satish.muddana@ericsson.com>
eclipse-cdt-cloud · Jun 22, 2021 · 110cf9a · 110cf9a
1 parent 334b102
commit 110cf9a
Show file tree

Hide file tree

Showing 5 changed files with 125 additions and 3 deletions.
diff --git a/packages/base/src/signals/signal-manager.ts b/packages/base/src/signals/signal-manager.ts
@@ -17,6 +17,8 @@ export declare interface SignalManager {
     fireSelectionChangedSignal(payload: { [key: string]: string }): void;
     fireCloseTraceViewerTabSignal(traceUUID: string): void;
     fireTraceViewerTabActivatedSignal(experiment: Experiment): void;
+    fireZoomTimeGraphSignal(hasZoomedIn: boolean): void;
+    fireResetTimeGraphSignal(): void;
 }
 
 export const Signals = {
@@ -32,7 +34,9 @@ export const Signals = {
     THEME_CHANGED: 'theme changed',
     SELECTION_CHANGED: 'selection changed',
     CLOSE_TRACEVIEWERTAB: 'tab closed',
-    TRACEVIEWERTAB_ACTIVATED: 'widget activated'
+    TRACEVIEWERTAB_ACTIVATED: 'widget activated',
+    TIMEGRAPH_ZOOMED: 'timegraph zoomed',
+    TIMEGRAPH_RESET: 'timegraph reset'
 };
 
 export class SignalManager extends EventEmitter implements SignalManager {
@@ -72,6 +76,12 @@ export class SignalManager extends EventEmitter implements SignalManager {
     fireTraceViewerTabActivatedSignal(experiment: Experiment): void {
         this.emit(Signals.TRACEVIEWERTAB_ACTIVATED, experiment);
     }
+    fireZoomTimeGraphSignal(hasZoomedIn: boolean): void {
+        this.emit(Signals.TIMEGRAPH_ZOOMED, hasZoomedIn);
+    }
+    fireResetTimeGraphSignal(): void {
+        this.emit(Signals.TIMEGRAPH_RESET);
+    }
 }
 
 let instance: SignalManager = new SignalManager();

diff --git a/packages/react-components/src/components/timegraph-output-component.tsx b/packages/react-components/src/components/timegraph-output-component.tsx
@@ -53,10 +53,10 @@ export class TimegraphOutputComponent extends AbstractTreeOutputComponent<Timegr
     private styleMap = new Map<string, TimeGraphStateStyle>();
 
     private selectedElement: TimeGraphStateComponent | undefined;
-    private tooltipElement: TimeGraphStateComponent | undefined;
-    private tooltipInfo: { [key: string]: string } | undefined;
 
     private onSelectionChanged = (payload: { [key: string]: string; }) => this.doHandleSelectionChangedSignal(payload);
+    private onTimeGraphZoomed = (hasZoomedIn: boolean) => this.doHandleTimeGraphZoomedSignal(hasZoomedIn);
+    private onTimeGraphReset = () => this.doHandleTimeGraphResetSignal();
 
     constructor(props: TimegraphOutputProps) {
         super(props);
@@ -113,6 +113,8 @@ export class TimegraphOutputComponent extends AbstractTreeOutputComponent<Timegr
             }
         });
         signalManager().on(Signals.SELECTION_CHANGED, this.onSelectionChanged);
+        signalManager().on(Signals.TIMEGRAPH_ZOOMED, this.onTimeGraphZoomed);
+        signalManager().on(Signals.TIMEGRAPH_RESET, this.onTimeGraphReset);
     }
 
     synchronizeTreeScroll(): void {
@@ -131,6 +133,8 @@ export class TimegraphOutputComponent extends AbstractTreeOutputComponent<Timegr
     componentWillUnmount(): void {
         super.componentWillUnmount();
         signalManager().off(Signals.SELECTION_CHANGED, this.onSelectionChanged);
+        signalManager().off(Signals.TIMEGRAPH_ZOOMED, this.onTimeGraphZoomed);
+        signalManager().off(Signals.TIMEGRAPH_RESET, this.onTimeGraphReset);
     }
 
     async fetchTree(): Promise<ResponseStatus> {
@@ -212,6 +216,14 @@ export class TimegraphOutputComponent extends AbstractTreeOutputComponent<Timegr
         }
     }
 
+    private doHandleTimeGraphZoomedSignal(hasZoomedIn: boolean) {
+        this.chartLayer.adjustZoom(undefined, hasZoomedIn);
+    }
+
+    private doHandleTimeGraphResetSignal() {
+        this.props.unitController.viewRange = { start: 0, end: this.props.unitController.absoluteRange };
+    }
+
     renderTree(): React.ReactNode {
         // TODO Show header, when we can have entries in-line with timeline-chart
         return <EntryTree

diff --git a/theia-extensions/viewer-prototype/src/browser/trace-viewer/trace-viewer-frontend-module.ts b/theia-extensions/viewer-prototype/src/browser/trace-viewer/trace-viewer-frontend-module.ts
@@ -17,6 +17,8 @@ import { TheiaMessageManager } from '../theia-message-manager';
 import { TraceServerUrlProviderImpl } from '../trace-server-url-provider-frontend-impl';
 import { bindTraceServerPreferences } from '../trace-server-bindings';
 import { TraceServerConfigService, traceServerPath } from '../../common/trace-server-config';
+import { TabBarToolbarContribution } from '@theia/core/lib/browser/shell/tab-bar-toolbar';
+import { TraceViewerToolbarContribution } from './trace-viewer-toolbar-contribution';
 
 export default new ContainerModule(bind => {
     bind(TraceViewerEnvironment).toSelf().inRequestScope();
@@ -26,6 +28,10 @@ export default new ContainerModule(bind => {
     bind(TspClientProvider).toSelf().inSingletonScope();
     bind(TheiaMessageManager).toSelf().inSingletonScope();
 
+    bindViewContribution(bind, TraceViewerToolbarContribution);
+    bind(FrontendApplicationContribution).toService(TraceViewerToolbarContribution);
+    bind(TabBarToolbarContribution).toService(TraceViewerToolbarContribution);
+
     bind(TraceViewerWidget).toSelf();
     bind<WidgetFactory>(WidgetFactory).toDynamicValue(context => ({
         id: TraceViewerWidget.ID,

diff --git a/theia-extensions/viewer-prototype/src/browser/trace-viewer/trace-viewer-toolbar-commands.ts b/theia-extensions/viewer-prototype/src/browser/trace-viewer/trace-viewer-toolbar-commands.ts
@@ -0,0 +1,22 @@
+import { Command } from '@theia/core';
+
+export namespace TraceViewerToolbarCommands {
+
+    export const ZOOM_IN: Command = {
+        id: 'trace.viewer.zoomin',
+        label: 'Zoom In',
+        iconClass: 'fa fa-plus-square-o fa-lg',
+    };
+
+    export const ZOOM_OUT: Command = {
+        id: 'trace.viewer.toolbar.zoomout',
+        label: 'Zoom Out',
+        iconClass: 'fa fa-minus-square-o fa-lg',
+    };
+
+    export const RESET: Command = {
+        id: 'trace.viewer.toolbar.reset',
+        label: 'Reset',
+        iconClass: 'fa fa-home fa-lg',
+    };
+}
diff --git a/...extensions/viewer-prototype/src/browser/trace-viewer/trace-viewer-toolbar-contribution.ts b/...extensions/viewer-prototype/src/browser/trace-viewer/trace-viewer-toolbar-contribution.ts
@@ -0,0 +1,72 @@
+import { injectable, inject } from 'inversify';
+import { AbstractViewContribution, ApplicationShell, Widget } from '@theia/core/lib/browser';
+import { TabBarToolbarContribution, TabBarToolbarRegistry } from '@theia/core/lib/browser/shell/tab-bar-toolbar';
+import { CommandRegistry } from '@theia/core';
+import { TraceViewerToolbarCommands } from './trace-viewer-toolbar-commands';
+import { signalManager } from '@trace-viewer/base/lib/signals/signal-manager';
+import { TraceViewerWidget } from './trace-viewer';
+
+@injectable()
+export class TraceViewerToolbarContribution extends AbstractViewContribution<Widget> implements TabBarToolbarContribution {
+    @inject(ApplicationShell) protected readonly shell: ApplicationShell;
+
+    constructor() {
+        super({
+            widgetId: TraceViewerWidget.ID,
+            widgetName: TraceViewerWidget.LABEL,
+            defaultWidgetOptions: {
+                area: 'main',
+            },
+        });
+    }
+
+    initializeLayout(): void {
+        this.openView({ activate: false });
+    }
+
+    registerCommands(registry: CommandRegistry): void {
+        super.registerCommands(registry);
+        registry.registerCommand(
+            TraceViewerToolbarCommands.ZOOM_IN, {
+            isVisible: (w: Widget) => w instanceof TraceViewerWidget,
+            execute: () => {
+                signalManager().fireZoomTimeGraphSignal(true);
+            }
+        });
+        registry.registerCommand(
+            TraceViewerToolbarCommands.ZOOM_OUT, {
+            isVisible: (w: Widget) => w instanceof TraceViewerWidget,
+            execute: () => {
+                signalManager().fireZoomTimeGraphSignal(false);
+            }
+        });
+        registry.registerCommand(
+            TraceViewerToolbarCommands.RESET, {
+            isVisible: (w: Widget) => w instanceof TraceViewerWidget,
+            execute: () => {
+                signalManager().fireResetTimeGraphSignal();
+            }
+        });
+    }
+
+    registerToolbarItems(registry: TabBarToolbarRegistry): void {
+        registry.registerItem({
+            id: TraceViewerToolbarCommands.ZOOM_IN.id,
+            command: TraceViewerToolbarCommands.ZOOM_IN.id,
+            tooltip: TraceViewerToolbarCommands.ZOOM_IN.label,
+            priority: 1,
+        });
+        registry.registerItem({
+            id: TraceViewerToolbarCommands.ZOOM_OUT.id,
+            command: TraceViewerToolbarCommands.ZOOM_OUT.id,
+            tooltip: TraceViewerToolbarCommands.ZOOM_OUT.label,
+            priority: 2,
+        });
+        registry.registerItem({
+            id: TraceViewerToolbarCommands.RESET.id,
+            command: TraceViewerToolbarCommands.RESET.id,
+            tooltip: TraceViewerToolbarCommands.RESET.label,
+            priority: 3,
+        });
+    }
+}