Allow editing trace set labels via Opened Traces widget. Fixes issue #384. Made each menu item into its own react component.

Author: thefinaljob

packages/base/src/signals/signal-manager.ts

@@ -23,7 +23,7 @@ export declare interface SignalManager {
 }
 
 export const Signals = {
-    TABNAME_CHANGED: 'tab changed',
+    EXPERIMENT_CHANGED: 'tab changed',
     TRACE_OPENED: 'trace opened',
     TRACE_CLOSED: 'trace closed',
     EXPERIMENT_OPENED: 'experiment opened',
@@ -44,8 +44,8 @@ export const Signals = {
 };
 
 export class SignalManager extends EventEmitter implements SignalManager {
-    fireTabChangedSignal(tabName: string, expirementUUID: string): void {
-        this.emit(Signals.TABNAME_CHANGED, {tabName, expirementUUID});
+    fireExperimentChangedSignal(tabName: string, experimentUUID: string): void {
+        this.emit(Signals.EXPERIMENT_CHANGED, { tabName, experimentUUID });
     }
     fireTraceOpenedSignal(trace: Trace): void {
         this.emit(Signals.TRACE_OPENED, trace);

packages/react-components/src/trace-explorer/menu-item-trace.tsx

@@ -9,15 +9,15 @@ interface MenuItemProps {
     experimentName: string;
     experimentUUID: string;
     traces: Trace[];
-    onTabNameChange: (tabEditingOpen: string, index: number) => void;
+    onExperimentNameChange: (newExperimentName: string, index: number) => void;
     menuItemTraceContainerClassName: string;
     handleClickEvent: (event: React.MouseEvent<HTMLDivElement>, experimentName: string) => void;
     handleContextMenuEvent: (event: React.MouseEvent<HTMLDivElement>, experimentUUID: string) => void;
 }
 interface MenuItemState {
     editingTab: boolean;
-    oldexpirementName: string;
-    expirementNameState: string;
+    oldExperimentName: string;
+    experimentNameState: string;
 }
 
 export class MenuItemTrace extends React.Component<MenuItemProps, MenuItemState> {
@@ -27,66 +27,66 @@ export class MenuItemTrace extends React.Component<MenuItemProps, MenuItemState>
     constructor(menuItemProps: MenuItemProps) {
         super(menuItemProps);
         this.state = {
-            oldexpirementName: this.props.experimentName,
-            expirementNameState: this.props.experimentName,
+            oldExperimentName: this.props.experimentName,
+            experimentNameState: this.props.experimentName,
             editingTab: false
         };
         this.wrapper = React.createRef();
         this.handleClickOutside = this.handleClickOutside.bind(this);
     }
 
-    submitNewTab(): void {
-        if (this.state.expirementNameState.length > 0) {
+    submitNewExperimentName(): void {
+        if (this.state.experimentNameState.length > 0) {
             this.setState({
                 editingTab: false,
-                oldexpirementName: this.state.expirementNameState
+                oldExperimentName: this.state.experimentNameState
             });
-            this.props.onTabNameChange(this.state.expirementNameState, this.props.index);
+            this.props.onExperimentNameChange(this.state.experimentNameState, this.props.index);
         } else {
             this.setState({
                 editingTab: false,
-                expirementNameState: this.state.oldexpirementName
+                experimentNameState: this.state.oldExperimentName
             });
-            const tabName = 'Trace: ' + this.state.oldexpirementName;
-            signalManager().fireTabChangedSignal(tabName, this.props.experimentUUID);
+            const tabName = 'Trace: ' + this.state.oldExperimentName;
+            signalManager().fireExperimentChangedSignal(tabName, this.props.experimentUUID);
         }
         document.removeEventListener('click', this.handleClickOutside);
     }
 
     handleClickOutside = (event: Event): void => {
         const node = this.wrapper.current;
         if ((!node || !node.contains(event.target as Node)) && this.state.editingTab === true) {
-            this.submitNewTab();
+            this.submitNewExperimentName();
         }
     };
 
     protected handleEnterPress(event: React.KeyboardEvent<HTMLInputElement>): void{
         if (event.key === 'Enter' && this.state.editingTab === true){
-            this.submitNewTab();
+            this.submitNewExperimentName();
         }
     }
 
     protected changeText(event: React.ChangeEvent<HTMLInputElement>): void{
         let newName = event.target.value.toString();
         this.setState({
-            expirementNameState : newName
+            experimentNameState : newName
         });
         newName = 'Trace: ' + newName;
-        signalManager().fireTabChangedSignal(newName,  this.props.experimentUUID);
+        signalManager().fireExperimentChangedSignal(newName,  this.props.experimentUUID);
     }
     protected inputTab(): React.ReactNode {
         if (!this.state.editingTab) {
             return (
-            <div>
-                {this.state.expirementNameState}
+            <div className='wrapper'>
+                {this.state.experimentNameState}
                 <div className='edit-trace-name' onClick={e => {this.renderEditTraceName(e);}}>
                     <FontAwesomeIcon icon={faPencilAlt} />
                 </div>
             </div>
             );
         }
         return (<input name="tab-name" className="theia-input name-input-box"
-            defaultValue = {this.state.expirementNameState}
+            defaultValue = {this.state.experimentNameState}
             onChange = {e => (this.changeText(e))}
             onClick = {e => e.stopPropagation()}
             onKeyPress = {e => (this.handleEnterPress(e))}

packages/react-components/src/trace-explorer/trace-explorer-opened-traces-widget.tsx

@@ -45,7 +45,7 @@ export class ReactOpenTracesWidget extends React.Component<ReactOpenTracesWidget
         signalManager().on(Signals.EXPERIMENT_CLOSED, this._onExperimentClosed);
         signalManager().on(Signals.TRACEVIEWERTAB_ACTIVATED, this._onOpenedTracesWidgetActivated);
 
-        this.handleTabNameUpdate = this.handleTabNameUpdate.bind(this);
+        this.handleExperimentNameUpdate = this.handleExperimentNameUpdate.bind(this);
         this._experimentManager = this.props.tspClientProvider.getExperimentManager();
         this.props.tspClientProvider.addTspClientChangeListener(() => {
             this._experimentManager = this.props.tspClientProvider.getExperimentManager();
@@ -111,7 +111,6 @@ export class ReactOpenTracesWidget extends React.Component<ReactOpenTracesWidget
     render(): React.ReactNode {
         const totalHeight = this.getTotalHeight();
         this._forceUpdateKey = !this._forceUpdateKey;
-        const key = Number(this._forceUpdateKey);
         return (
             <>
                 <ReactModal isOpen={this._showShareDialog} onRequestClose={this.handleShareModalClose}
@@ -153,7 +152,7 @@ export class ReactOpenTracesWidget extends React.Component<ReactOpenTracesWidget
             traceContainerClassName = traceContainerClassName + ' theia-mod-selected';
         }
         return <MenuItemTrace
-            onTabNameChange = {this.handleTabNameUpdate}
+            onExperimentNameChange = {this.handleExperimentNameUpdate}
             menuItemTraceContainerClassName = {traceContainerClassName}
             traces={this.state.openedExperiments[props.index].traces}
             experimentName={traceName}
@@ -247,17 +246,12 @@ export class ReactOpenTracesWidget extends React.Component<ReactOpenTracesWidget
         signalManager().fireOpenedTracesChangedSignal(new OpenedTracesUpdatedSignalPayload(remoteExperiments ? remoteExperiments.length : 0));
     }
 
-    protected handleTabNameUpdate(tabEditingOpen: string, index: number): void {
-        this.setState(({openedExperiments}) => ({
-            openedExperiments: [
-                ...openedExperiments.slice(0,index),
-                {
-                    ...openedExperiments[index],
-                    name: tabEditingOpen,
-                },
-                ...openedExperiments.slice(index + 1)
-            ]
-        }));
+    protected handleExperimentNameUpdate(newExperimentName: string, index: number): void {
+        const modifiedOpenedExperiments = this.state.openedExperiments.slice();
+        modifiedOpenedExperiments[index].name = newExperimentName;
+        this.setState({
+            openedExperiments: modifiedOpenedExperiments
+        });
     }
 
     protected handleShareButtonClick = (index: number): void => this.doHandleShareButtonClick(index);

packages/react-components/style/trace-explorer.css

@@ -53,11 +53,29 @@
 
 .trace-list-container.theia-mod-selected,
 .outputs-list-container.theia-mod-selected {
-    background-color: var(--theia-selection-background);
+    background-color: #3b3a4a;
 }
 
-.edit-trace-name {
-    display: inline-block;
+.trace-list-container:hover .edit-trace-name {
+    visibility: visible;
+    float: right;
+}
+
+.trace-list-container:hover .wrapper {
+    background-color: #151515;
+}
+
+.trace-list-container .edit-trace-name {
+    visibility: hidden;
+}
+
+.name-input-box {
+    background-color: #151515;
+    margin-bottom: 5px;
+    width: 100%;
+    height: 18px;
+    -webkit-box-sizing: border-box;
+    box-sizing: border-box;
 }
 
 /* Share options have been commented out, grid is disabled to optimize horizontal space */
@@ -79,7 +97,10 @@
 
 .trace-element-name, .outputs-element-name {
     font-weight: bold;
-    margin: unset;
+    margin-top: unset;
+    margin-left: unset;
+    margin-right: unset;
+    margin-bottom: 2px;
     height: var(--trace-extension-list-line-height);
 }
 

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

@@ -54,7 +54,7 @@ export class TraceViewerWidget extends ReactWidget {
     private onOutputAdded = (payload: OutputAddedSignalPayload): void => this.doHandleOutputAddedSignal(payload);
     private onExperimentSelected = (experiment: Experiment): void => this.doHandleExperimentSelectedSignal(experiment);
     private onCloseExperiment = (UUID: string): void => this.doHandleCloseExperimentSignal(UUID);
-    private onTabNameChange = (payload: { tabName: string, expirementUUID: string; }): void => this.doHandleTabeNameChange(payload);
+    private onExperimentNameChange = (payload: { tabName: string, experimentUUID: string; }): void => this.doHandleExperimentNameChange(payload);
 
     @inject(TraceViewerWidgetOptions) protected readonly options: TraceViewerWidgetOptions;
     @inject(TspClientProvider) protected tspClientProvider: TspClientProvider;
@@ -112,16 +112,16 @@ export class TraceViewerWidget extends ReactWidget {
         signalManager().on(Signals.OUTPUT_ADDED, this.onOutputAdded);
         signalManager().on(Signals.EXPERIMENT_SELECTED, this.onExperimentSelected);
         signalManager().on(Signals.CLOSE_TRACEVIEWERTAB, this.onCloseExperiment);
-        signalManager().on(Signals.TABNAME_CHANGED, this.onTabNameChange);
+        signalManager().on(Signals.EXPERIMENT_CHANGED, this.onExperimentNameChange);
     }
 
     protected updateBackgroundTheme(): void {
         const currentThemeType = ThemeService.get().getCurrentTheme().type;
         signalManager().fireThemeChangedSignal(currentThemeType);
     }
 
-    protected doHandleTabeNameChange(payload: { tabName: string, expirementUUID: string; }): void {
-        if (payload.expirementUUID === this.options.traceUUID) {
+    protected doHandleExperimentNameChange(payload: { tabName: string, experimentUUID: string; }): void {
+        if (payload.experimentUUID === this.options.traceUUID) {
             this.title.label = payload.tabName;
         }
     }