Skip to content

Commit

Permalink
Change widget colors based on theia themes
Browse files Browse the repository at this point in the history 
fixes #76

Signed-off-by: muddana-satish <satish.muddana@ericsson.com>
  • Loading branch information
@bhufmann
muddana-satish authored and bhufmann committed Jan 5, 2021
1 parent 506936c commit fce638a
Show file tree
Hide file tree
Showing 7 changed files with 62 additions and 16 deletions.
8 changes: 7 additions & 1 deletion packages/base/src/signal-manager.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,6 +3,7 @@ import { EventEmitter } from 'events';
export declare interface SignalManager {

fireTooltipSignal(tooltip: { [key: string]: string }): void;
fireThemeChangedSignal(theme: string): void;

}

Expand All @@ -12,7 +13,8 @@ export const Signals = {
EXPERIMENT_OPENED: 'experiment opened',
EXPERIMENT_CLOSED: 'experiment closed',
EXPERIMENT_SELECTED: 'experiment selected',
TOOLTIP_UPDATED: 'tooltip updated'
TOOLTIP_UPDATED: 'tooltip updated',
THEME_CHANGED: 'theme changed'
};

export class SignalManager extends EventEmitter implements SignalManager {
Expand All @@ -21,6 +23,10 @@ export class SignalManager extends EventEmitter implements SignalManager {
this.emit(Signals.TOOLTIP_UPDATED, {tooltip});
}

fireThemeChangedSignal(theme: string) {
this.emit(Signals.THEME_CHANGED, theme);
}

}

let instance: SignalManager = new SignalManager();
Expand Down
1 change: 1 addition & 0 deletions packages/react-components/src/components/abstract-output-component.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -21,6 +21,7 @@ export interface AbstractOutputProps {
// Workaround for it needs width to be explicitly passed
// https://github.com/STRML/react-grid-layout/issues/961
widthWPBugWorkaround: number;
backgroundTheme: string;
onOutputRemove: (outputId: string) => void;
// TODO Not sure
unitController: TimeGraphUnitController;
Expand Down
5 changes: 4 additions & 1 deletion packages/react-components/src/components/abstract-tree-output-component.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -13,7 +13,10 @@ export abstract class AbstractTreeOutputComponent<P extends AbstractOutputProps,
>
{this.renderTree()}
</div>
<div className='output-component-chart' style={{ width: this.props.style.chartWidth, height: this.props.style.height , backgroundColor: '#3f3f3f' }}>
<div className='output-component-chart' style={{
width: this.props.style.chartWidth, height: this.props.style.height,
backgroundColor: '#' + this.props.style.chartBackgroundColor.toString(16)
}}>
{this.renderChart()}
</div>
</React.Fragment>;
Expand Down
4 changes: 3 additions & 1 deletion packages/react-components/src/components/table-output-component.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -51,7 +51,9 @@ export class TableOutputComponent extends AbstractOutputComponent<TableOutputPro
}

renderMainArea(): React.ReactNode {
return <div id='events-table' className='ag-theme-balham-dark' style={{ height: this.props.style.height, width: this.props.widthWPBugWorkaround }}>
return <div id='events-table'
className={this.props.backgroundTheme === 'light' ? 'ag-theme-balham' : 'ag-theme-balham-dark'}
style={{ height: this.props.style.height, width: this.props.widthWPBugWorkaround }}>
<AgGridReact
columnDefs={this.columnArray}
rowModelType='infinite'
Expand Down
47 changes: 35 additions & 12 deletions packages/react-components/src/components/trace-context-component.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -20,6 +20,7 @@ import { XYOutputComponent } from './xy-output-component';
import { NullOutputComponent } from './null-output-component';
import { AbstractOutputProps } from './abstract-output-component';
import * as Messages from '@trace-viewer/base/lib/message-manager';
import { signalManager, Signals } from '@trace-viewer/base/lib/signal-manager';

const ResponsiveGridLayout = WidthProvider(Responsive);

Expand All @@ -31,6 +32,7 @@ interface TraceContextProps {
// Introduce dependency on Theia maybe it should be just a callback
messageManager: Messages.MessageManager;
addResizeHandler: (handler: () => void) => void;
backgroundTheme: string;
}

interface TraceContextState {
Expand All @@ -41,6 +43,7 @@ interface TraceContextState {
experiment: Experiment
traceIndexing: boolean;
style: OutputComponentStyle;
backgroundTheme: string;
}

export class TraceContextComponent extends React.Component<TraceContextProps, TraceContextState> {
Expand Down Expand Up @@ -84,11 +87,12 @@ export class TraceContextComponent extends React.Component<TraceContextProps, Tr
chartWidth: this.DEFAULT_CHART_WIDTH,
height: this.DEFAULT_COMPONENT_HEIGHT,
rowHeight: this.DEFAULT_COMPONENT_ROWHEIGHT,
naviBackgroundColor: 0x3f3f3f,
chartBackgroundColor: 0x3f3f3f,
naviBackgroundColor: this.props.backgroundTheme === 'light' ? 0xf4f7fb : 0x3f3f3f,
chartBackgroundColor: this.props.backgroundTheme === 'light' ? 0xf4f7fb : 0x3f3f3f,
cursorColor: 0x259fd8,
lineColor: 0xbbbbbb
}
lineColor: this.props.backgroundTheme === 'light' ? 0x757575 : 0xbbbbbb
},
backgroundTheme: this.props.backgroundTheme
};
const absoluteRange = traceRange.getDuration();
this.unitController = new TimeGraphUnitController(absoluteRange, { start: 0, end: absoluteRange });
Expand All @@ -106,6 +110,23 @@ export class TraceContextComponent extends React.Component<TraceContextProps, Tr
this.unitController.onViewRangeChanged(viewRangeParam => { this.handleViewRangeChange(viewRangeParam); });
this.traceContextContainer = React.createRef();
this.initialize();
signalManager().on(Signals.THEME_CHANGED, (theme: string) => this.updateBackgroundTheme(theme));
}

public updateBackgroundTheme(theme: string) {
this.setState({
style: {
width: this.DEFAULT_COMPONENT_WIDTH,
chartWidth: this.DEFAULT_CHART_WIDTH,
height: this.DEFAULT_COMPONENT_HEIGHT,
rowHeight: this.DEFAULT_COMPONENT_ROWHEIGHT,
naviBackgroundColor: theme === 'light' ? 0xf4f7fb : 0x3f3f3f,
chartBackgroundColor: theme === 'light' ? 0xf4f7fb : 0x3f3f3f,
cursorColor: 0x259fd8,
lineColor: theme === 'light' ? 0x757575 : 0xbbbbbb
},
backgroundTheme: theme
});
}

private async initialize() {
Expand Down Expand Up @@ -150,6 +171,7 @@ export class TraceContextComponent extends React.Component<TraceContextProps, Tr
}

componentWillUnmount(): void {
signalManager().off(Signals.THEME_CHANGED, (theme: string) => this.updateBackgroundTheme(theme));
this.props.messageManager.removeStatusMessage(this.INDEXING_STATUS_BAR_KEY);
this.props.messageManager.removeStatusMessage(this.TIME_SELECTION_STATUS_BAR_KEY);
}
Expand All @@ -173,14 +195,14 @@ export class TraceContextComponent extends React.Component<TraceContextProps, Tr
category: Messages.MessageCategory.TRACE_CONTEXT
});
this.setState(prevState => ({
currentTimeSelection: new TimeRange(range.start, range.end, prevState.timeOffset)
}));
currentTimeSelection: new TimeRange(range.start, range.end, prevState.timeOffset)
}));
}

private handleViewRangeChange(viewRange: TimelineChart.TimeGraphRange) {
this.setState(prevState => ({
currentViewRange: new TimeRange(viewRange.start, viewRange.end, prevState.timeOffset)
}));
currentViewRange: new TimeRange(viewRange.start, viewRange.end, prevState.timeOffset)
}));
}

render(): JSX.Element {
Expand All @@ -197,8 +219,8 @@ export class TraceContextComponent extends React.Component<TraceContextProps, Tr
<TimeAxisComponent unitController={this.unitController} style={this.state.style} addWidgetResizeHandler={this.addWidgetResizeHandler} />
</div>
{
// Syntax to use ReactGridLayout with Custom Components, while passing resized dimensions to children:
// https://github.com/STRML/react-grid-layout/issues/299#issuecomment-524959229
// Syntax to use ReactGridLayout with Custom Components, while passing resized dimensions to children:
// https://github.com/STRML/react-grid-layout/issues/299#issuecomment-524959229
}
<ResponsiveGridLayout className='outputs-grid-layout' margin={[0, 5]} isResizable={true} isRearrangeable={true} isDraggable={true}
layouts={{ lg: layouts }} cols={{ lg: 1 }} breakpoints={{ lg: 1200 }} rowHeight={this.DEFAULT_COMPONENT_ROWHEIGHT} draggableHandle={'.title-bar-label'}
Expand All @@ -215,12 +237,13 @@ export class TraceContextComponent extends React.Component<TraceContextProps, Tr
style: this.state.style,
onOutputRemove: this.props.onOutputRemove,
unitController: this.unitController,
widthWPBugWorkaround: this.state.style.width
widthWPBugWorkaround: this.state.style.width,
backgroundTheme: this.state.backgroundTheme
};
switch (responseType) {
case 'TIME_GRAPH':
return <TimegraphOutputComponent key={output.id} {...outputProps}
addWidgetResizeHandler={this.addWidgetResizeHandler} />;
addWidgetResizeHandler={this.addWidgetResizeHandler} />;
case 'TREE_TIME_XY':
return <XYOutputComponent key={output.id} {...outputProps} />;
case 'TABLE':
Expand Down
1 change: 1 addition & 0 deletions viewer-prototype/src/browser/trace-viewer/trace-viewer-frontend-module.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -8,6 +8,7 @@ import { CommandContribution } from '@theia/core/lib/common';

import 'ag-grid-community/dist/styles/ag-grid.css';
import 'ag-grid-community/dist/styles/ag-theme-balham-dark.css';
import 'ag-grid-community/dist/styles/ag-theme-balham.css';
import 'react-grid-layout/css/styles.css';
import 'react-resizable/css/styles.css';
// import 'semantic-ui-css/semantic.min.css';
Expand Down
12 changes: 11 additions & 1 deletion viewer-prototype/src/browser/trace-viewer/trace-viewer.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -16,6 +16,8 @@ import { TraceContextComponent } from '@trace-viewer/react-components/lib/compon
import { Experiment } from 'tsp-typescript-client/lib/models/experiment';
import URI from '@theia/core/lib/common/uri';
import { TheiaMessageManager } from '../theia-message-manager';
import { ThemeService } from '@theia/core/lib/browser/theming';
import { signalManager } from '@trace-viewer/base/lib/signal-manager';

export const TraceViewerWidgetOptions = Symbol('TraceViewerWidgetOptions');
export interface TraceViewerWidgetOptions {
Expand All @@ -33,6 +35,7 @@ export class TraceViewerWidget extends ReactWidget {
private tspClient: TspClient;
private traceManager: TraceManager;
private experimentManager: ExperimentManager;
private backgroundTheme: string;

private resizeHandlers: (() => void)[] = [];
private readonly addResizeHandler = (h: () => void) => {
Expand All @@ -59,7 +62,8 @@ export class TraceViewerWidget extends ReactWidget {
this.addClass('theia-trace-open');
this.toDispose.push(TraceExplorerWidget.outputAddedSignal(output => this.onOutputAdded(output)));
this.toDispose.push(TraceExplorerWidget.experimentSelectedSignal(experiment => this.onExperimentSelected(experiment)));

this.backgroundTheme = ThemeService.get().getCurrentTheme().type;
ThemeService.get().onThemeChange(() => this.updateBackgroundTheme());
this.initialize();
this.tspClient = this.tspClientProvider.getTspClient();
this.traceManager = this.tspClientProvider.getTraceManager();
Expand All @@ -71,6 +75,11 @@ export class TraceViewerWidget extends ReactWidget {
});
}

private updateBackgroundTheme() {
const currentThemeType = ThemeService.get().getCurrentTheme().type;
signalManager().fireThemeChangedSignal(currentThemeType);
}

async initialize(): Promise<void> {
/*
* TODO: use backend service to find traces
Expand Down Expand Up @@ -185,6 +194,7 @@ export class TraceViewerWidget extends ReactWidget {
outputs={this.outputDescriptors}
onOutputRemove={this.onOutputRemoved}
addResizeHandler={this.addResizeHandler}
backgroundTheme={this.backgroundTheme}
messageManager={this._signalHandler} /> : 'Trace is loading...'}
</div>;
}
Expand Down

0 comments on commit fce638a

Please sign in to comment.