Created a widget for properties view in react-components

Changes made: - Implemented a properties widget in react-components - Change theia implementation to use the widget from react-components - File name changes and API changes This will move the properties widget to the react-components npm package, so it can be used by both the theia extension and vscode extension. Signed-off-by: Neel Gondalia ngondalia@blackberry.com
eclipse-cdt-cloud · Jan 3, 2023 · ff9c70c · ff9c70c
1 parent b8ce6d4
commit ff9c70c
Show file tree

Hide file tree

Showing 8 changed files with 31 additions and 31 deletions.
diff --git a/packages/base/src/signals/signal-manager.ts b/packages/base/src/signals/signal-manager.ts
@@ -13,7 +13,7 @@ export declare interface SignalManager {
     fireExperimentSelectedSignal(experiment: Experiment | undefined): void;
     fireOpenedTracesChangedSignal(payload: OpenedTracesUpdatedSignalPayload): void;
     fireOutputAddedSignal(payload: OutputAddedSignalPayload): void;
-    fireTooltipSignal(tooltip?: { [key: string]: string }): void;
+    fireItemPropertiesSignalUpdated(properties?: { [key: string]: string }): void;
     fireThemeChangedSignal(theme: string): void;
     fireSelectionChangedSignal(payload: { [key: string]: string }): void;
     fireCloseTraceViewerTabSignal(traceUUID: string): void;
@@ -44,7 +44,7 @@ export const Signals = {
     OPENED_TRACES_UPDATED: 'opened traces updated',
     AVAILABLE_OUTPUTS_CHANGED: 'available outputs changed',
     OUTPUT_ADDED: 'output added',
-    TOOLTIP_UPDATED: 'tooltip updated',
+    ITEM_PROPERTIES_UPDATED: 'item properties updated',
     THEME_CHANGED: 'theme changed',
     SELECTION_CHANGED: 'selection changed',
     CLOSE_TRACEVIEWERTAB: 'tab closed',
@@ -88,8 +88,8 @@ export class SignalManager extends EventEmitter implements SignalManager {
     fireOutputAddedSignal(payload: OutputAddedSignalPayload): void {
         this.emit(Signals.OUTPUT_ADDED, payload);
     }
-    fireTooltipSignal(tooltip?: { [key: string]: string; }): void {
-        this.emit(Signals.TOOLTIP_UPDATED, tooltip);
+    fireItemPropertiesSignalUpdated(properties?: { [key: string]: string; }): void {
+        this.emit(Signals.ITEM_PROPERTIES_UPDATED, properties);
     }
     fireThemeChangedSignal(theme: string): void {
         this.emit(Signals.THEME_CHANGED, theme);

diff --git a/packages/react-components/src/components/table-output-component.tsx b/packages/react-components/src/components/table-output-component.tsx
@@ -233,7 +233,7 @@ export class TableOutputComponent extends AbstractOutputComponent<TableOutputPro
         // Notfiy selection changed
         this.handleRowSelectionChange(itemPropsObj);
         // Notfiy properties changed
-        signalManager().fireTooltipSignal(itemPropsObj);
+        signalManager().fireItemPropertiesSignalUpdated(itemPropsObj);
     }
 
     private fetchItemProperties(columns: Column[] | null, data: any) {
@@ -366,7 +366,7 @@ export class TableOutputComponent extends AbstractOutputComponent<TableOutputPro
             // Notfiy selection changed
             this.handleRowSelectionChange(itemPropsObj);
             // Notify properties changed
-            signalManager().fireTooltipSignal(itemPropsObj);
+            signalManager().fireItemPropertiesSignalUpdated(itemPropsObj);
         }
     }
 
@@ -745,7 +745,7 @@ export class TableOutputComponent extends AbstractOutputComponent<TableOutputPro
                     // Notify selection changed
                     this.handleRowSelectionChange(itemPropsObj);
                     // Notify properties changed
-                    signalManager().fireTooltipSignal(itemPropsObj);
+                    signalManager().fireItemPropertiesSignalUpdated(itemPropsObj);
                     isFound = true;
                     rowNode.setSelected(true);
                 }
@@ -780,7 +780,7 @@ export class TableOutputComponent extends AbstractOutputComponent<TableOutputPro
                 // Notfiy selection changed
                 this.handleRowSelectionChange(itemPropsObj);
                 // Notfiy properties changed
-                signalManager().fireTooltipSignal(itemPropsObj);
+                signalManager().fireItemPropertiesSignalUpdated(itemPropsObj);
                 this.selectRows();
             }
             this.gridMatched = false;

diff --git a/packages/react-components/src/components/timegraph-output-component.tsx b/packages/react-components/src/components/timegraph-output-component.tsx
@@ -581,7 +581,7 @@ export class TimegraphOutputComponent extends AbstractTreeOutputComponent<Timegr
         if (element && this.props.viewRange) {
             tooltipObject = await this.fetchTooltip(element);
         }
-        signalManager().fireTooltipSignal(tooltipObject);
+        signalManager().fireItemPropertiesSignalUpdated(tooltipObject);
     }
 
     private getTimegraphRowIds() {

diff --git a/...xplorer/trace-explorer-tooltip-widget.tsx → ...orer/trace-explorer-properties-widget.tsx b/...xplorer/trace-explorer-tooltip-widget.tsx → ...orer/trace-explorer-properties-widget.tsx
@@ -8,26 +8,26 @@ export interface ReactPropertiesWidgetProps {
 }
 
 export interface ReactPropertiesWidgetState {
-    tooltip: { [key: string]: string };
+    itemProperties: { [key: string]: string };
 }
 
 export class ReactItemPropertiesWidget extends React.Component<ReactPropertiesWidgetProps, ReactPropertiesWidgetState> {
 
     constructor(props: ReactPropertiesWidgetProps) {
         super(props);
         this.state = {
-            tooltip: {}
+            itemProperties: {}
         };
-        signalManager().on(Signals.TOOLTIP_UPDATED, this._onTooltip);
+        signalManager().on(Signals.ITEM_PROPERTIES_UPDATED, this._onItemProperties);
     }
 
     componentWillUnmount(): void {
-        signalManager().off(Signals.TOOLTIP_UPDATED, this._onTooltip);
+        signalManager().off(Signals.ITEM_PROPERTIES_UPDATED, this._onItemProperties);
     }
 
     render(): React.ReactNode {
         return (
-            <div className='trace-explorer-tooltip'>
+            <div className='trace-explorer-item-properties'>
                 <div className='trace-explorer-panel-content'>
                     {this.renderTooltip()}
                 </div>
@@ -37,8 +37,8 @@ export class ReactItemPropertiesWidget extends React.Component<ReactPropertiesWi
 
     private renderTooltip() {
         const tooltipArray: JSX.Element[] = [];
-        if (this.state.tooltip) {
-            Object.entries(this.state.tooltip).forEach(([key, value]) => {
+        if (this.state.itemProperties) {
+            Object.entries(this.state.itemProperties).forEach(([key, value]) => {
                 if (key === 'Source') {
                     const sourceCodeInfo = value;
                     const matches = sourceCodeInfo.match('(.*):(\\d+)');
@@ -68,10 +68,10 @@ export class ReactItemPropertiesWidget extends React.Component<ReactPropertiesWi
     }
 
     /** Tooltip Signal and Signal Handlers */
-    protected _onTooltip = (tooltip: { [key: string]: string }): void => this.doHandleTooltipSignal(tooltip);
+    protected _onItemProperties = (tooltip: { [key: string]: string }): void => this.doHandleItemPropertiesSignal(tooltip);
 
-    private doHandleTooltipSignal(tooltipProps: { [key: string]: string }): void {
-        this.setState({tooltip: tooltipProps});
+    private doHandleItemPropertiesSignal(tooltipProps: { [key: string]: string }): void {
+        this.setState({itemProperties: tooltipProps});
     }
 }
 
diff --git a/packages/react-components/style/trace-explorer.css b/packages/react-components/style/trace-explorer.css
@@ -14,7 +14,7 @@
 
 .trace-explorer-opened,
 .trace-explorer-views,
-.trace-explorer-tooltip {
+.trace-explorer-item-properties {
     margin: 0 2px;
 }
 

diff --git a/...r/trace-explorer/trace-explorer-sub-widgets/theia-trace-explorer-opened-traces-widget.tsx b/...r/trace-explorer/trace-explorer-sub-widgets/theia-trace-explorer-opened-traces-widget.tsx
@@ -6,7 +6,7 @@ import { ExperimentManager } from 'traceviewer-base/lib/experiment-manager';
 import { CommandService } from '@theia/core';
 import { TspClientProvider } from '../../tsp-client-provider-impl';
 import { signalManager} from 'traceviewer-base/lib/signals/signal-manager';
-import { TraceExplorerTooltipWidget } from './trace-explorer-tooltip-widget';
+import { TraceExplorerItemPropertiesWidget } from './theia-trace-explorer-properties-widget';
 import { ContextMenuRenderer } from '@theia/core/lib/browser';
 import { TraceViewerCommand } from '../../trace-viewer/trace-viewer-commands';
 import { ReactOpenTracesWidget} from 'traceviewer-react-components/lib/trace-explorer/trace-explorer-opened-traces-widget';
@@ -21,7 +21,7 @@ export class TraceExplorerOpenedTracesWidget extends ReactWidget {
     static LINE_HEIGHT = 16;
 
     @inject(TspClientProvider) protected readonly tspClientProvider!: TspClientProvider;
-    @inject(TraceExplorerTooltipWidget) protected readonly tooltipWidget!: TraceExplorerTooltipWidget;
+    @inject(TraceExplorerItemPropertiesWidget) protected readonly itemPropertiesWidget!: TraceExplorerItemPropertiesWidget;
     @inject(ContextMenuRenderer) protected readonly contextMenuRenderer!: ContextMenuRenderer;
     @inject(CommandService) protected readonly commandService!: CommandService;
     @inject(WidgetManager) protected readonly widgetManager!: WidgetManager;

diff --git a/...widgets/trace-explorer-tooltip-widget.tsx → ...heia-trace-explorer-properties-widget.tsx b/...widgets/trace-explorer-tooltip-widget.tsx → ...heia-trace-explorer-properties-widget.tsx
@@ -3,19 +3,19 @@ import { Message, ReactWidget, Widget } from '@theia/core/lib/browser';
 import * as React from 'react';
 import { EditorOpenerOptions, EditorManager } from '@theia/editor/lib/browser';
 import URI from '@theia/core/lib/common/uri';
-import { ReactItemPropertiesWidget} from 'traceviewer-react-components/lib/trace-explorer/trace-explorer-tooltip-widget';
+import { ReactItemPropertiesWidget} from 'traceviewer-react-components/lib/trace-explorer/trace-explorer-properties-widget';
 
 @injectable()
-export class TraceExplorerTooltipWidget extends ReactWidget {
-    static ID = 'trace-explorer-tooltip-widget';
+export class TraceExplorerItemPropertiesWidget extends ReactWidget {
+    static ID = 'trace-explorer-item-properties-widget';
     static LABEL = 'Item Properties';
 
     @inject(EditorManager) protected readonly editorManager!: EditorManager;
 
     @postConstruct()
     init(): void {
-        this.id = TraceExplorerTooltipWidget.ID;
-        this.title.label = TraceExplorerTooltipWidget.LABEL;
+        this.id = TraceExplorerItemPropertiesWidget.ID;
+        this.title.label = TraceExplorerItemPropertiesWidget.LABEL;
         this.update();
     }
 

diff --git a/theia-extensions/viewer-prototype/src/browser/trace-explorer/trace-explorer-widget.tsx b/theia-extensions/viewer-prototype/src/browser/trace-explorer/trace-explorer-widget.tsx
@@ -1,7 +1,7 @@
 import { injectable, inject, postConstruct, interfaces, Container } from 'inversify';
 import { TraceExplorerViewsWidget } from './trace-explorer-sub-widgets/theia-trace-explorer-views-widget';
 import { ViewContainer, BaseWidget, Message, PanelLayout } from '@theia/core/lib/browser';
-import { TraceExplorerTooltipWidget } from './trace-explorer-sub-widgets/trace-explorer-tooltip-widget';
+import { TraceExplorerItemPropertiesWidget } from './trace-explorer-sub-widgets/theia-trace-explorer-properties-widget';
 import { TraceExplorerOpenedTracesWidget } from './trace-explorer-sub-widgets/theia-trace-explorer-opened-traces-widget';
 import { TraceExplorerPlaceholderWidget } from './trace-explorer-sub-widgets/trace-explorer-placeholder-widget';
 import { TraceExplorerServerStatusWidget } from './trace-explorer-sub-widgets/trace-explorer-server-status-widget';
@@ -17,7 +17,7 @@ export class TraceExplorerWidget extends BaseWidget {
     private _numberOfOpenedTraces = 0;
     @inject(TraceExplorerViewsWidget) protected readonly viewsWidget!: TraceExplorerViewsWidget;
     @inject(TraceExplorerOpenedTracesWidget) protected readonly openedTracesWidget!: TraceExplorerOpenedTracesWidget;
-    @inject(TraceExplorerTooltipWidget) protected readonly tooltipWidget!: TraceExplorerTooltipWidget;
+    @inject(TraceExplorerItemPropertiesWidget) protected readonly itemPropertiesWidget!: TraceExplorerItemPropertiesWidget;
     @inject(TraceExplorerPlaceholderWidget) protected readonly placeholderWidget!: TraceExplorerPlaceholderWidget;
     @inject(TraceExplorerServerStatusWidget) protected readonly serverStatusWidget!: TraceExplorerServerStatusWidget;
     @inject(ViewContainer.Factory) protected readonly viewContainerFactory!: ViewContainer.Factory;
@@ -46,7 +46,7 @@ export class TraceExplorerWidget extends BaseWidget {
         child.bind(TraceExplorerOpenedTracesWidget).toSelf();
         child.bind(TraceExplorerPlaceholderWidget).toSelf();
         child.bind(TraceExplorerServerStatusWidget).toSelf();
-        child.bind(TraceExplorerTooltipWidget).toSelf();
+        child.bind(TraceExplorerItemPropertiesWidget).toSelf();
         child.bind(TraceExplorerWidget).toSelf().inSingletonScope();
         return child;
     }
@@ -63,7 +63,7 @@ export class TraceExplorerWidget extends BaseWidget {
         });
         this.traceViewsContainer.addWidget(this.openedTracesWidget);
         this.traceViewsContainer.addWidget(this.viewsWidget);
-        this.traceViewsContainer.addWidget(this.tooltipWidget);
+        this.traceViewsContainer.addWidget(this.itemPropertiesWidget);
         this.toDispose.push(this.traceViewsContainer);
         const layout = this.layout = new PanelLayout();
         layout.addWidget(this.serverStatusWidget);