Skip to content

Commit

Permalink
Align code with the TSP specification
Browse files Browse the repository at this point in the history 
The trace server protocol and the tsp-typescript-client have been
updated. This makes the trace extension match the newer versions.

It updates the filter-tree (left part of xy and timegraphs) to use
labels and column headers instead of extra keys.

Signed-off-by: Geneviève Bastien <gbastien@versatic.net>
  • Loading branch information
@tahini
tahini committed Oct 20, 2020
1 parent 972030d commit 1e81f15
Show file tree
Hide file tree
Showing 19 changed files with 188 additions and 143 deletions.
5 changes: 2 additions & 3 deletions viewer-prototype/src/browser/trace-viewer/components/abstract-tree-output-component.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,7 +2,6 @@ import { AbstractOutputComponent, AbstractOutputProps, AbstractOutputState } fro
import * as React from 'react';
import { QueryHelper } from 'tsp-typescript-client/lib/models/query/query-helper';
import { ResponseStatus } from 'tsp-typescript-client/lib/models/response/responses';
import { Entry, EntryHeader } from 'tsp-typescript-client/lib/models/entry';

export abstract class AbstractTreeOutputComponent<P extends AbstractOutputProps, S extends AbstractOutputState> extends AbstractOutputComponent<P, S> {
renderMainArea(): React.ReactNode {
Expand Down Expand Up @@ -36,9 +35,9 @@ export abstract class AbstractTreeOutputComponent<P extends AbstractOutputProps,
// TODO Use the output descriptor to find out if the analysis is completed
const xyTreeParameters = QueryHelper.selectionTimeQuery(
QueryHelper.splitRangeIntoEqualParts(this.props.range.getstart(), this.props.range.getEnd(), 1120), []);
let xyTreeResponse = (await tspClient.fetchXYTree<Entry, EntryHeader>(traceUUID, outPutId, xyTreeParameters)).getModel();
let xyTreeResponse = (await tspClient.fetchXYTree(traceUUID, outPutId, xyTreeParameters)).getModel();
while (xyTreeResponse.status === ResponseStatus.RUNNING) {
xyTreeResponse = (await tspClient.fetchXYTree<Entry, EntryHeader>(traceUUID, outPutId, xyTreeParameters)).getModel();
xyTreeResponse = (await tspClient.fetchXYTree(traceUUID, outPutId, xyTreeParameters)).getModel();
}
this.setState({
outputStatus: xyTreeResponse.status
Expand Down
1 change: 1 addition & 0 deletions viewer-prototype/src/browser/trace-viewer/components/data-providers/style-provider.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -89,6 +89,7 @@ export class StyleProvider {
const styleModel = styleResponse.getModel().model;
const styles = styleModel.styles;
this.styles = styles;
return styles;
}
return this.styles;
}
Expand Down
42 changes: 20 additions & 22 deletions viewer-prototype/src/browser/trace-viewer/components/data-providers/tsp-data-provider.ts
View file
Original file line number Diff line number Diff line change
@@ -1,6 +1,5 @@
/* eslint-disable @typescript-eslint/no-explicit-any */
import { TspClient } from 'tsp-typescript-client/lib/protocol/tsp-client';
import { TimeGraphEntry, TimeGraphRow, TimeGraphModel, TimeGraphState } from 'tsp-typescript-client/lib/models/timegraph';
import { TimeGraphEntry, TimeGraphRow, TimeGraphState } from 'tsp-typescript-client/lib/models/timegraph';
import { TimelineChart } from 'timeline-chart/lib/time-graph-model';
import { QueryHelper } from 'tsp-typescript-client/lib/models/query/query-helper';

Expand Down Expand Up @@ -38,33 +37,33 @@ export class TspDataProvider {
};
}

this.totalRange = this.timeGraphEntries[0].endTime - this.timeGraphEntries[0].startTime; // 1332170682540133097 - starttime
this.totalRange = this.timeGraphEntries[0].end - this.timeGraphEntries[0].start; // 1332170682540133097 - starttime
let statesParameters = QueryHelper.selectionTimeQuery(QueryHelper.splitRangeIntoEqualParts(1332170682440133097, 1332170682540133097, 1120), ids);
if (viewRange && resolution) {
const start = viewRange.start + this.timeGraphEntries[0].startTime;
const end = viewRange.end + this.timeGraphEntries[0].startTime;
const start = viewRange.start + this.timeGraphEntries[0].start;
const end = viewRange.end + this.timeGraphEntries[0].start;
statesParameters = QueryHelper.selectionTimeQuery(QueryHelper.splitRangeIntoEqualParts(Math.trunc(start), Math.trunc(end), resolution), ids);
}
const stateResponse = (await this.client.fetchTimeGraphStates<TimeGraphModel>(this.traceUUID,
const stateResponse = (await this.client.fetchTimeGraphStates(this.traceUUID,
this.outputId, statesParameters)).getModel();

this.timeGraphRows = stateResponse.model.rows;
this.timeGraphRowsOrdering(ids);

// the start time which is normalized to logical 0 in timeline chart.
const chartStart = this.timeGraphEntries[0].startTime;
const chartStart = this.timeGraphEntries[0].start;
const rows: TimelineChart.TimeGraphRowModel[] = [];
this.timeGraphRows.forEach((row: TimeGraphRow) => {
const rowId: number = (row as any).entryID;
const rowId: number = row.entryId;
const entry = this.timeGraphEntries.find(tgEntry => tgEntry.id === rowId);
if (entry) {
const states = this.getStateModelByRow(row, chartStart);
rows.push({
id: rowId,
name: entry.labels[0], // 'row' + rowId,
range: {
start: entry.startTime - chartStart,
end: entry.endTime - chartStart
start: entry.start - chartStart,
end: entry.end - chartStart
},
states
});
Expand All @@ -85,11 +84,11 @@ export class TspDataProvider {
private timeGraphRowsOrdering(orderedIds: number[]) {
const newTimeGraphRows: TimeGraphRow[] = [];
orderedIds.forEach(id => {
const timeGraphRow = this.timeGraphRows.find(row => (row as any).entryID === id);
const timeGraphRow = this.timeGraphRows.find(row => row.entryId === id);
if (timeGraphRow) {
newTimeGraphRows.push(timeGraphRow);
} else {
const emptyRow: any = {states: [{value: 0, startTime: 0, duration: 0, label: '', tags: 0}], entryID: id};
const emptyRow: TimeGraphRow = {states: [{start: 0, end: 0, label: '', tags: 0}], entryId: id};
newTimeGraphRows.push(emptyRow);
}
});
Expand All @@ -100,35 +99,34 @@ export class TspDataProvider {
protected getStateModelByRow(row: TimeGraphRow, chartStart: number): TimelineChart.TimeGraphRowElementModel[] {
const states: TimelineChart.TimeGraphRowElementModel[] = [];
row.states.forEach((state: TimeGraphState, idx: number) => {
const end = state.startTime + state.duration - chartStart;
if (state.style || state.value >= 0) {
const end = state.end - chartStart;
if (state.style) {
states.push({
id: (row as any).entryID + '-' + idx,
label: state.label,
id: row.entryId + '-' + idx,
label: state.label || '',
range: {
start: state.startTime - chartStart,
start: state.start - chartStart,
end
},
data: {
stateValue: state.value,
style: state.style
}
});
this.totalRange = this.totalRange < end ? end : this.totalRange;
} else {
const nextIndex = idx + 1;
const nextState = row.states[nextIndex];
if (nextState && nextState.value < 0) {
if (nextState && nextState.start > state.end + 1) {
// Add gap state
states.push({
id: (row as any).entryID + '-' + idx,
id: row.entryId + '-' + idx,
label: 'GAP',
range: {
start: end,
end: nextState.startTime - chartStart
end: nextState.start - chartStart
},
data: {
stateValue: -1

}
});
}
Expand Down
17 changes: 6 additions & 11 deletions viewer-prototype/src/browser/trace-viewer/components/table-output-component.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,7 +3,6 @@ import { AbstractOutputComponent, AbstractOutputProps, AbstractOutputState } fro
import * as React from 'react';
import { AgGridReact } from 'ag-grid-react';
import { ColDef, IDatasource, GridReadyEvent } from 'ag-grid-community';
import { Entry, EntryHeader } from 'tsp-typescript-client/lib/models/entry';
import { QueryHelper } from 'tsp-typescript-client/lib/models/query/query-helper';
import { cloneDeep } from 'lodash';

Expand Down Expand Up @@ -125,8 +124,8 @@ export class TableOutputComponent extends AbstractOutputComponent<TableOutputPro
const outPutId = this.props.outputDescriptor.id;

// Fetch columns
const columnsResponse = (await tspClient.fetchTableColumns<Entry, EntryHeader>(traceUUID, outPutId, QueryHelper.timeQuery([0, 1]))).getModel();
const columnEntries = columnsResponse.model.entries;
const columnsResponse = (await tspClient.fetchTableColumns(traceUUID, outPutId, QueryHelper.timeQuery([0, 1]))).getModel();
const columnEntries = columnsResponse.model;
const colIds: Array<number> = [];
const columnsArray = new Array<any>();

Expand All @@ -140,16 +139,12 @@ export class TableOutputComponent extends AbstractOutputComponent<TableOutputPro
colIds.push(0);
}

columnEntries.forEach(entry => {
const id = this.showIndexColumn ? ++entry.id : entry.id;
columnEntries.forEach(columnHeader => {
const id = this.showIndexColumn ? ++columnHeader.id : columnHeader.id;
colIds.push(id);
let columnName = '';
if (entry.labels.length) {
columnName = entry.labels[0];
}
columnsArray.push({
headerName: columnName,
field: entry.id.toString(),
headerName: columnHeader.name,
field: columnHeader.id.toString(),
width: this.props.columnWidth
});
});
Expand Down
69 changes: 43 additions & 26 deletions viewer-prototype/src/browser/trace-viewer/components/timegraph-output-component.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -7,7 +7,6 @@ import { TimeGraphChartSelectionRange } from 'timeline-chart/lib/layer/time-grap
import { TimeGraphVerticalScrollbar } from 'timeline-chart/lib/layer/time-graph-vertical-scrollbar';
import { TimelineChart } from 'timeline-chart/lib/time-graph-model';
import { TimeGraphRowController } from 'timeline-chart/lib/time-graph-row-controller';
import { EntryHeader } from 'tsp-typescript-client/lib/models/entry';
import { QueryHelper } from 'tsp-typescript-client/lib/models/query/query-helper';
import { ResponseStatus } from 'tsp-typescript-client/lib/models/response/responses';
import { TimeGraphEntry } from 'tsp-typescript-client/lib/models/timegraph';
Expand All @@ -20,6 +19,8 @@ import { ReactTimeGraphContainer } from './utils/timegraph-container-component';
import { OutputElementStyle } from 'tsp-typescript-client/lib/models/styles';
import { EntryTree } from './utils/filtrer-tree/entry-tree';
import { listToTree, getAllExpandedNodeIds } from './utils/filtrer-tree/utils';
import hash from '../../../common/utils/value-hash';
import ColumnHeader from './utils/filtrer-tree/column-header';

type TimegraphOutputProps = AbstractOutputProps & {
addWidgetResizeHandler: (handler: () => void) => void;
Expand All @@ -28,6 +29,7 @@ type TimegraphOutputProps = AbstractOutputProps & {
type TimegraphOutputState = AbstractOutputState & {
timegraphTree: TimeGraphEntry[];
collapsedNodes: number[];
columns: ColumnHeader[];
};

export class TimegraphOutputComponent extends AbstractTreeOutputComponent<TimegraphOutputProps, TimegraphOutputState> {
Expand All @@ -47,7 +49,8 @@ export class TimegraphOutputComponent extends AbstractTreeOutputComponent<Timegr
this.state = {
outputStatus: ResponseStatus.RUNNING,
timegraphTree: [],
collapsedNodes: []
collapsedNodes: [],
columns: []
};
this.onToggleCollapse = this.onToggleCollapse.bind(this);
this.tspDataProvider = new TspDataProvider(this.props.tspClient, this.props.traceId, this.props.outputDescriptor.id);
Expand Down Expand Up @@ -98,17 +101,26 @@ export class TimegraphOutputComponent extends AbstractTreeOutputComponent<Timegr
async componentDidUpdate(_prevProps: TimegraphOutputProps, _prevState: TimegraphOutputState): Promise<void> {
if (this.state.outputStatus !== ResponseStatus.COMPLETED || !this.state.timegraphTree.length) {
const treeParameters = QueryHelper.timeQuery([0, 1]);
const treeResponse = (await this.props.tspClient.fetchTimeGraphTree<TimeGraphEntry, EntryHeader>(this.props.traceId,
const treeResponse = (await this.props.tspClient.fetchTimeGraphTree(this.props.traceId,
this.props.outputDescriptor.id, treeParameters)).getModel();
const nbEntries = treeResponse.model.entries.length;
this.totalHeight = nbEntries * this.props.style.rowHeight;
this.rowController.totalHeight = this.totalHeight;
const columns: ColumnHeader[] = [];
if (treeResponse.model.headers && treeResponse.model.headers.length > 0) {
treeResponse.model.headers.forEach(header => {
columns.push({title: header.name, sortable: true, tooltip: header.tooltip});
});
} else {
columns.push({title: 'Name', sortable: true});
}
// TODO Style should not be retreive in the "initialization" part or at least async
const styleResponse = (await this.props.tspClient.fetchStyles(this.props.traceId, this.props.outputDescriptor.id, QueryHelper.query())).getModel();
this.setState({
// outputStatus: ResponseStatus.COMPLETED,
timegraphTree: treeResponse.model.entries,
styleModel: styleResponse.model
styleModel: styleResponse.model,
columns
});
this.chartLayer.updateChart();
}
Expand Down Expand Up @@ -219,7 +231,7 @@ export class TimegraphOutputComponent extends AbstractTreeOutputComponent<Timegr
}

private async fetchTimegraphData(range: TimelineChart.TimeGraphRange, resolution: number) {
const treeNodes = listToTree(this.state.timegraphTree);
const treeNodes = listToTree(this.state.timegraphTree, this.state.columns);
const orderedTreeIds = getAllExpandedNodeIds(treeNodes, this.state.collapsedNodes);
const length = range.end - range.start;
const overlap = ((length * 5) - length) / 2;
Expand Down Expand Up @@ -252,17 +264,20 @@ export class TimegraphOutputComponent extends AbstractTreeOutputComponent<Timegr
const elementStyle: OutputElementStyle = metadata.style;
const modelStyle = styleModel.styles[elementStyle.parentKey];
if (modelStyle) {
const color = this.hexStringToNumber(modelStyle.styleValues['background-color']);
let height = this.props.style.rowHeight * 0.8;
if (modelStyle.styleValues['height']) {
height = modelStyle.styleValues['height'] * this.props.style.rowHeight;
const currentStyle = Object.assign({}, modelStyle.values, elementStyle.values);
if (currentStyle) {
const color = this.hexStringToNumber(currentStyle['background-color']);
let height = this.props.style.rowHeight * 0.8;
if (currentStyle['height']) {
height = currentStyle['height'] * this.props.style.rowHeight;
}
return {
color: color,
height: height,
borderWidth: element.selected ? 2 : 0,
borderColor: 0xeef20c
};
}
return {
color: color,
height: height,
borderWidth: element.selected ? 2 : 0,
borderColor: 0xeef20c
};
}
}
}
Expand Down Expand Up @@ -305,29 +320,31 @@ export class TimegraphOutputComponent extends AbstractTreeOutputComponent<Timegr
const val = element.label;
const modelData = element.data;
if (modelData) {
const value = modelData.stateValue;
const elementStyle = styles[value.toString()];
if (elementStyle) {
const outputStyle = modelData.style;
if (!outputStyle) {
return {
color: parseInt(elementStyle.color, 16),
height: this.props.style.rowHeight * elementStyle.height,
color: 0xCACACA,
height: this.props.style.rowHeight * 0.5,
borderWidth: element.selected ? 2 : 0,
borderColor: 0xeef20c
};
}

if (value === -1) {
const stateStyle = outputStyle as OutputElementStyle;
const elementStyle = styles[stateStyle.parentKey];
if (elementStyle) {
return {
color: 0xCACACA,
height: this.props.style.rowHeight * 0.5,
color: parseInt(elementStyle.color, 16),
height: this.props.style.rowHeight * elementStyle.height,
borderWidth: element.selected ? 2 : 0,
borderColor: 0xeef20c
};
}
style = this.styleMap.get(value);

style = this.styleMap.get(stateStyle.parentKey);
if (!style) {
style = backupStyles[(value % backupStyles.length)];
this.styleMap.set(value, style);
style = backupStyles[(hash(stateStyle.parentKey) as number % backupStyles.length)];
this.styleMap.set(stateStyle.parentKey, style);
}
return {
color: style.color,
Expand Down
5 changes: 5 additions & 0 deletions viewer-prototype/src/browser/trace-viewer/components/utils/filtrer-tree/column-header.tsx
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,5 @@
export default interface ColumnHeader {
title: string,
tooltip?: string,
sortable?: boolean
}
7 changes: 5 additions & 2 deletions viewer-prototype/src/browser/trace-viewer/components/utils/filtrer-tree/entry-tree.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,6 +3,7 @@ import { Entry } from 'tsp-typescript-client/lib/models/entry';
import { listToTree } from './utils';
import { FilterTree } from './tree';
import { TreeNode } from './tree-node';
import ColumnHeader from './column-header';

interface EntryTreeProps {
entries: Entry[];
Expand All @@ -14,6 +15,7 @@ interface EntryTreeProps {
onToggleCollapse: (id: number, nodes: TreeNode[]) => void;
onOrderChange: (ids: number[]) => void;
showHeader: boolean;
headers: ColumnHeader[];
className: string;
}

Expand All @@ -22,7 +24,8 @@ export class EntryTree extends React.Component<EntryTreeProps> {
showFilter: true,
onOrderChange: () => { /* Nothing to do */ },
showHeader: true,
className: 'table-tree'
className: 'table-tree',
headers: [{title: 'Name', sortable: true}]
};

constructor(props: EntryTreeProps) {
Expand All @@ -34,7 +37,7 @@ export class EntryTree extends React.Component<EntryTreeProps> {

render(): JSX.Element {
return <FilterTree
nodes={listToTree(this.props.entries)}
nodes={listToTree(this.props.entries, this.props.headers)}
{...this.props}
/>;
}
Expand Down
Loading

0 comments on commit 1e81f15

Please # to comment.