Skip to content

Commit

Permalink
Panelize widget
Browse files Browse the repository at this point in the history
Signed-off-by: Kenneth Marut <kenneth.marut@ericsson.com>
  • Loading branch information
kenneth-marut-work authored and bhufmann committed Jan 22, 2021
1 parent 5b8c4bc commit d5cc7a3
Show file tree
Hide file tree
Showing 15 changed files with 817 additions and 516 deletions.
4 changes: 2 additions & 2 deletions packages/base/src/signal-manager.ts
Original file line number Diff line number Diff line change
Expand Up @@ -25,7 +25,7 @@ export class SignalManager extends EventEmitter implements SignalManager {
this.emit(Signals.TOOLTIP_UPDATED, { tooltip });
}

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

Expand All @@ -37,7 +37,7 @@ export class SignalManager extends EventEmitter implements SignalManager {

let instance: SignalManager = new SignalManager();

export const setSignalManagerInstance = (sm: SignalManager) => {
export const setSignalManagerInstance = (sm: SignalManager): void => {
instance = sm;
};

Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -113,7 +113,7 @@ export class TraceContextComponent extends React.Component<TraceContextProps, Tr
signalManager().on(Signals.THEME_CHANGED, (theme: string) => this.updateBackgroundTheme(theme));
}

public updateBackgroundTheme(theme: string) {
public updateBackgroundTheme(theme: string): void {
this.setState({
style: {
width: this.DEFAULT_COMPONENT_WIDTH,
Expand Down
67 changes: 34 additions & 33 deletions packages/react-components/src/style/trace-explorer.css
Original file line number Diff line number Diff line change
@@ -1,36 +1,21 @@
.trace-explorer-tab-icon {
-webkit-mask: url('chart-line-solid.svg');
mask: url('chart-line-solid.svg');
:root {
--trace-extension-list-line-height: 16px;
}

/* Main container */
.trace-explorer-container {
display: grid;
grid-template-columns: 100%;
grid-template-rows: 1fr 1fr; /*1fr*/
grid-row-gap: 10px;
color: var(--theia-ui-font-color0);
#trace-explorer-analysis-widget,
#trace-explorer-opened-traces-widget {
height: 100%;
}

.trace-explorer-opened {
grid-row-start: 1;
display: grid;
grid-template-columns: 100%;
grid-template-rows: 25px 1fr;
.trace-explorer-tab-icon {
-webkit-mask: url('chart-line-solid.svg');
mask: url('chart-line-solid.svg');
}

/* .trace-explorer-files {
grid-row-start: 2;
display: grid;
grid-template-columns: 100%;
grid-template-rows: 25px 1fr;
} */

.trace-explorer-analysis {
grid-row-start: 2;
display: grid;
grid-template-columns: 100%;
grid-template-rows: 25px 1fr;
.trace-explorer-opened,
.trace-explorer-analysis,
.trace-explorer-tooltip {
margin: 0 2px;
}

.trace-explorer-panel-title {
Expand All @@ -46,7 +31,6 @@
grid-row-start: 2;
border: 1px solid var(--theia-layout-color4);
/* color: white; */
padding-inline-start: 5px;
white-space: nowrap;
}

Expand All @@ -61,18 +45,27 @@
white-space: nowrap;
}

.trace-list-container:hover,
.outputs-list-container:hover {
background-color: var(--theia-list-hoverBackground);
cursor: pointer;
}

.trace-list-container.theia-mod-selected,
.outputs-list-container.theia-mod-selected {
background-color: var(--theia-selection-background);
}

.trace-element-container {
/* Share options have been commented out, grid is disabled to optimize horizontal space */
/* .trace-element-container {
display: grid;
grid-template-columns: minmax(0, 1fr) 50px;
grid-template-rows: auto;
}
} */

.trace-element-container.theia-mod-selected {
background-color: var(--theia-selection-background);
/* Remove focus outline on grid when selected */
.ReactVirtualized__Grid {
outline: none;
}

.trace-element-info {
Expand All @@ -82,12 +75,20 @@

.trace-element-name, .outputs-element-name {
font-weight: bold;
margin: unset;
height: var(--trace-extension-list-line-height);
}

.trace-element-path, .outputs-element-description {
.trace-element-path-container, .outputs-element-description {
margin: unset;
color: var(--theia-ui-font-color2);
/* color: rgb(160, 160, 160); */
white-space: pre;
font-size: .95em;
}

.child-element {
height: var(--trace-extension-list-line-height);
}

.trace-element-options {
Expand Down
2 changes: 2 additions & 0 deletions viewer-prototype/src/browser/theia-message-manager.ts
Original file line number Diff line number Diff line change
Expand Up @@ -2,6 +2,8 @@ import * as Messages from '@trace-viewer/base/lib/message-manager';
import { inject, injectable } from 'inversify';
import { StatusBar, StatusBarAlignment } from '@theia/core/lib/browser';

/* eslint-disable @typescript-eslint/no-unused-vars */

@injectable()
export class TheiaMessageManager implements Messages.MessageManager {

Expand Down
Original file line number Diff line number Diff line change
@@ -0,0 +1,20 @@
import { OutputDescriptor } from 'tsp-typescript-client/lib/models/output-descriptor';
import { Experiment } from 'tsp-typescript-client/lib/models/experiment';

export class OutputAddedSignalPayload {
private outputDescriptor: OutputDescriptor;
private experiment: Experiment;

constructor(outputDescriptor: OutputDescriptor, trace: Experiment) {
this.outputDescriptor = outputDescriptor;
this.experiment = trace;
}

public getOutputDescriptor(): OutputDescriptor {
return this.outputDescriptor;
}

public getExperiment(): Experiment {
return this.experiment;
}
}
Original file line number Diff line number Diff line change
@@ -1,22 +1,23 @@
import { injectable } from 'inversify';
import { AbstractViewContribution } from '@theia/core/lib/browser/shell/view-contribution';
import { TraceExplorerWidget, TRACE_EXPLORER_ID, TRACE_EXPLORER_LABEL } from './trace-explorer-widget';
import { TraceExplorerWidget, } from './trace-explorer-widget';
import { FrontendApplicationContribution, FrontendApplication } from '@theia/core/lib/browser';

@injectable()
export class TraceExplorerContribution extends AbstractViewContribution<TraceExplorerWidget> implements FrontendApplicationContribution {

constructor() {
super({
widgetId: TRACE_EXPLORER_ID,
widgetName: TRACE_EXPLORER_LABEL,
widgetId: TraceExplorerWidget.ID,
widgetName: TraceExplorerWidget.LABEL,
defaultWidgetOptions: {
area: 'left'
},
toggleCommandId: 'trace-explorer:toggle'
});
}

async initializeLayout(_app: FrontendApplication): Promise<void> {
await this.openView({ activate: false });
initializeLayout(_app: FrontendApplication): void {
this.openView({ activate: false });
}

}
Original file line number Diff line number Diff line change
@@ -0,0 +1,133 @@
import { inject, injectable, postConstruct } from 'inversify';
import { ReactWidget, Widget, Message } from '@theia/core/lib/browser';
import * as React from 'react';
import { List, ListRowProps, AutoSizer } from 'react-virtualized';
import { TraceExplorerOpenedTracesWidget } from './trace-explorer-opened-traces-widget';
import { Emitter } from '@theia/core';
import { OutputAddedSignalPayload } from '../output-added-signal-payload';

@injectable()
export class TraceExplorerAnalysisWidget extends ReactWidget {
static ID = 'trace-explorer-analysis-widget';
static LABEL = 'Available Analysis';
static LIST_MARGIN = 2;
static LINE_HEIGHT = 16;
static ROW_HEIGHT = (2 * TraceExplorerAnalysisWidget.LINE_HEIGHT) + TraceExplorerAnalysisWidget.LIST_MARGIN;

protected forceUpdateKey = false;

protected outputAddedEmitter = new Emitter<OutputAddedSignalPayload>();
outputAddedSignal = this.outputAddedEmitter.event;

@inject(TraceExplorerOpenedTracesWidget) protected readonly openedTracesWidget!: TraceExplorerOpenedTracesWidget;

@postConstruct()
init(): void {
this.id = TraceExplorerAnalysisWidget.ID;
this.title.label = TraceExplorerAnalysisWidget.LABEL;
this.toDispose.push(this.openedTracesWidget.availableOutputDescriptorsDidChange(() => {
this.update();
}));
this.toDispose.push(this.outputAddedEmitter);
this.update();
}

render(): React.ReactNode {
this.forceUpdateKey = !this.forceUpdateKey;
const key = Number(this.forceUpdateKey);
const { openedExperiments, availableOutputDescriptors, selectedExperimentIndex } = this.openedTracesWidget;
let outputsRowCount = 0;
const outputs = availableOutputDescriptors.get(openedExperiments[selectedExperimentIndex]?.UUID);
if (outputs) {
outputsRowCount = outputs.length;
}
const totalHeight = this.getTotalHeight();
return (
<div className='trace-explorer-analysis'>
<div className='trace-explorer-panel-content'>
<AutoSizer>
{({ width }) =>
<List
key={key}
height={totalHeight}
width={width}
rowCount={outputsRowCount}
rowHeight={TraceExplorerAnalysisWidget.ROW_HEIGHT}
rowRenderer={this.renderRowOutputs}
/>
}
</AutoSizer>
</div>
</div>
);
}

protected renderRowOutputs = (props: ListRowProps): React.ReactNode => this.doRenderRowOutputs(props);

private doRenderRowOutputs(props: ListRowProps): React.ReactNode {
let outputName = '';
let outputDescription = '';
const { openedExperiments, availableOutputDescriptors, selectedExperimentIndex, lastSelectedOutputIndex } = this.openedTracesWidget;
const selectedTrace = openedExperiments[selectedExperimentIndex];
if (selectedTrace) {
const outputDescriptors = availableOutputDescriptors.get(selectedTrace.UUID);
if (outputDescriptors && outputDescriptors.length && props.index < outputDescriptors.length) {
outputName = outputDescriptors[props.index].name;
outputDescription = outputDescriptors[props.index].description;
}
}
let traceContainerClassName = 'outputs-list-container';
if (props.index === lastSelectedOutputIndex) {
traceContainerClassName = traceContainerClassName + ' theia-mod-selected';
}
return <div className={traceContainerClassName}
id={`${traceContainerClassName}-${props.index}`}
key={props.key}
style={props.style}
onClick={this.handleOutputClicked}
data-id={`${props.index}`}
>
<h4 className='outputs-element-name'>
{outputName}
</h4>
<div className='outputs-element-description child-element'>
{outputDescription}
</div>
</div>;
}

protected getTotalHeight(): number {
let totalHeight = 0;
const { openedExperiments, availableOutputDescriptors, selectedExperimentIndex } = this.openedTracesWidget;
const selectedTrace = openedExperiments[selectedExperimentIndex];
if (selectedTrace) {
const outputDescriptors = availableOutputDescriptors.get(selectedTrace.UUID);
outputDescriptors?.forEach(() => totalHeight += TraceExplorerAnalysisWidget.ROW_HEIGHT);
}
return totalHeight;
}

protected handleOutputClicked = (e: React.MouseEvent<HTMLDivElement>): void => this.doHandleOutputClicked(e);

private doHandleOutputClicked(e: React.MouseEvent<HTMLDivElement>) {
const index = Number(e.currentTarget.getAttribute('data-id'));
const { openedExperiments, selectedExperimentIndex, availableOutputDescriptors } = this.openedTracesWidget;
this.openedTracesWidget.lastSelectedOutputIndex = index;
const trace = openedExperiments[selectedExperimentIndex];
const outputs = availableOutputDescriptors.get(trace.UUID);
if (outputs) {
this.outputAddedEmitter.fire(new OutputAddedSignalPayload(outputs[index], trace));
}
this.update();
}

protected onResize(msg: Widget.ResizeMessage): void {
super.onResize(msg);
this.update();
}

protected onAfterShow(msg: Message): void {
super.onAfterShow(msg);
this.update();
}
}
Loading

0 comments on commit d5cc7a3

Please sign in to comment.