Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Fixed provider and view to get correct viewRange and absoluteRange #2

Open
wants to merge 1 commit into
base: prototype-timeline-chart
Choose a base branch
from
Open

Fixed provider and view to get correct viewRange and absoluteRange #2

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
1 change: 1 addition & 0 deletions package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,6 +3,7 @@
"license": "EPL-2.0 OR GPL-2.0 WITH Classpath-exception-2.0",
"scripts": {
"prepare": "lerna run prepare",
"watch": "lerna run watch --parallel",
"rebuild:browser": "theia rebuild:browser",
"rebuild:electron": "theia rebuild:electron"
},
Expand Down
32 changes: 13 additions & 19 deletions viewer-prototype/src/browser/timegraph-view/timegraph-view.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -16,9 +16,6 @@ import { TimelineChart } from 'timeline-chart/lib/time-graph-model';
import { TspDataProvider } from './tsp-data-provider';
import { TspClient } from 'tsp-typescript-client/lib/protocol/tsp-client';
import { Trace } from 'tsp-typescript-client/lib/models/trace';
import { QueryHelper } from 'tsp-typescript-client/lib/models/query/query-helper';
import { TimeGraphEntry } from 'tsp-typescript-client/lib/models/timegraph';
import { EntryHeader } from 'tsp-typescript-client/lib/models/entry';

export class TimeGraphView {
protected styleConfig = {
Expand Down Expand Up @@ -64,8 +61,6 @@ export class TimeGraphView {
this.unitController = new TimeGraphUnitController(0);
this.rowController = new TimeGraphRowController(this.rowHeight, this.totalHeight);

this.unitController.scaleSteps = [1, 2];

const providers: TimeGraphChartProviders = {
dataProvider: async (range: TimelineChart.TimeGraphRange, resolution: number) => {
if (this.unitController) {
Expand Down Expand Up @@ -173,24 +168,23 @@ export class TimeGraphView {
protected async initialize() {
const traces: Trace[] = await this.tspClient.fetchTraces();
if (traces && traces.length) {
const resourcesTreeParameters = QueryHelper.timeQuery([0, 1]);
const treeResponse = await this.tspClient.fetchTimeGraphTree<TimeGraphEntry, EntryHeader>(
traces[0].UUID,
'org.eclipse.tracecompass.internal.analysis.os.linux.core.threadstatus.ResourcesStatusDataProvider',
resourcesTreeParameters);
const nbEntries = treeResponse.model ? treeResponse.model.entries.length : 1;
const traceStart = traces[0].start;
const traceEnd = traces[0].end;
const traceRange = traceEnd - traceStart;
this.unitController.absoluteRange = traceRange;
const traceData = await this.dataProvider.getData();
this.unitController.absoluteRange = traceData.totalLength;
this.unitController.numberTranslator = (theNumber: number) => {
return (theNumber - Math.trunc(theNumber)) !== 0 ? '' : theNumber.toString();
const originalStart = traceData.data && traceData.data.originalStart ? traceData.data.originalStart : 0;
theNumber += originalStart;
const milli = Math.floor(theNumber / 1000000);
const micro = Math.floor((theNumber % 1000000) / 1000);
const nano = Math.floor((theNumber % 1000000) % 1000);
return milli + ':' + micro + ':' + nano; // THAT IS TOO LONG, need to find better format
// return (theNumber - Math.trunc(theNumber)) !== 0 ? '' : theNumber.toString();

};
this.unitController.viewRange = {
start: traceStart,
end: traceEnd// this.unitController.absoluteRange
start: 0,
end: this.unitController.absoluteRange
};
this.totalHeight = nbEntries * this.rowHeight;
this.totalHeight = traceData.rows.length * this.rowHeight;
this.rowController.totalHeight = this.totalHeight;
}
window.onresize = () => this.onWidgetResize();
Expand Down
56 changes: 30 additions & 26 deletions viewer-prototype/src/browser/timegraph-view/tsp-data-provider.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
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, TimeGraphModel } 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";
import { EntryHeader } from "tsp-typescript-client/lib/models/entry";
Expand Down Expand Up @@ -33,7 +33,7 @@ export class TspDataProvider {
}
}

async getData(viewRange: TimelineChart.TimeGraphRange, resolution: number): Promise<TimelineChart.TimeGraphModel> {
async getData(viewRange?: TimelineChart.TimeGraphRange, resolution?: number): Promise<TimelineChart.TimeGraphModel> {
if(!this.traceUUID) {
return {
id: 'model',
Expand All @@ -48,38 +48,33 @@ export class TspDataProvider {
'org.eclipse.tracecompass.internal.analysis.os.linux.core.threadstatus.ResourcesStatusDataProvider',
resourcesTreeParameters);
this.timeGraphEntries = treeResponse.model.entries;
this.totalRange = this.timeGraphEntries[0].endTime - this.timeGraphEntries[0].startTime; // 1332170682540133097 - starttime
const selectedItems = new Array<number>();
this.timeGraphEntries.forEach(timeGraphEntry => {
selectedItems.push(timeGraphEntry.id);
});
// let startRange: number = this.timeGraphEntries[0].startTime;
// let endRange: number = startRange + this.totalRange;
// if (viewRange) {
// startRange = viewRange.start;
// endRange = viewRange.end;
// }
// const resolution: number = 1000; // viewRange ? this.canvasDisplayWidth / (viewRange.end - viewRange.start) : this.canvasDisplayWidth / this.totalRange;


// TODO: This should be something like that QueryHelper.splitRangeIntoEqualParts(viewRange.start, viewRange.end, resolution)
const statesParameters = QueryHelper.selectionTimeQuery(QueryHelper.splitRangeIntoEqualParts(1332170682440133097, 1332170682540133097, 1000), selectedItems); // QueryHelper.selectionTimeQuery(QueryHelper.splitRangeIntoEqualParts(startRange, endRange, resolution), selectedItems);
const stateResponse = await this.client.fetchTimeGraphStates<TimeGraphModel>(this.traceUUID,
'org.eclipse.tracecompass.internal.analysis.os.linux.core.threadstatus.ResourcesStatusDataProvider', statesParameters);

this.timeGraphRows = stateResponse.model.rows;


// the start time which is normalized to logical 0 in timeline chart.
const chartStart = this.timeGraphEntries[0].startTime;

const rows: TimelineChart.TimeGraphRowModel[] = [];
this.timeGraphRows.forEach((row:TimeGraphRow) => {
const rowId: number = (row as any).entryID;
const entry = this.timeGraphEntries.find(entry => entry.id === rowId);
if(entry){
const states = this.getStateModelByRow(row);
const states = this.getStateModelByRow(row, chartStart);
rows.push({
id: rowId,
name: 'row' + rowId,
range: {
start: entry.startTime,
end: entry.endTime
start: entry.startTime - chartStart,
end: entry.endTime - chartStart
},
states
});
Expand All @@ -90,21 +85,30 @@ export class TspDataProvider {
id: 'model',
totalLength: this.totalRange,
arrows: [],
rows
rows,
data: {
originalStart: chartStart
}
}
}

protected getStateModelByRow(row:TimeGraphRow){
protected getStateModelByRow(row:TimeGraphRow, chartStart: number){
const states: TimelineChart.TimeGraphRowElementModel[] = [];
row.states.forEach((state:TimeGraphState, idx:number)=>{
states.push({
id: (row as any).entryID + "-" + idx,
label: state.label,
range: {
start: state.startTime,
end: state.endTime
}
})
row.states.forEach((state:any, idx:number)=>{
// had to use type 'any' for state because there is a difference between TimegraphState from server and in model of tsp-typescript-client
// state has no endTime but duration
const end = state.startTime + state.duration - chartStart
if(state.value > 0 && end < 100000000){
states.push({
id: (row as any).entryID + "-" + idx,
label: state.label,
range: {
start: state.startTime - chartStart,
end
}
})
this.totalRange = this.totalRange < end ? end : this.totalRange;
}
})
return states;
}
Expand Down
20 changes: 10 additions & 10 deletions viewer-prototype/src/browser/trace-viewer-widget.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -26,7 +26,7 @@ import { TraceManager } from '../common/trace-manager';
import { Trace } from 'tsp-typescript-client/lib/models/trace';
import { Entry, EntryHeader } from 'tsp-typescript-client/lib/models/entry';
import { Line } from 'react-chartjs-2';
import { TimeGraphModel, TimeGraphEntry } from 'tsp-typescript-client/lib/models/timegraph';
import { TimeGraphEntry } from 'tsp-typescript-client/lib/models/timegraph';
import { XYSeries } from 'tsp-typescript-client/lib/models/xy';
import { ResponseStatus } from 'tsp-typescript-client/lib/models/response/responses';
import { QueryHelper } from 'tsp-typescript-client/lib/models/query/query-helper';
Expand Down Expand Up @@ -55,7 +55,7 @@ export class TraceViewerWidget extends ReactWidget {
private timeGraphView: TimeGraphView | undefined;
private timeGraphTree: string = '';
private timeGraphTitle: string = '';
private timeGraphState: string = '';
// private timeGraphState: string = '';
private selectedState: TimeGraphRowElement | undefined;
private hoveredState: TimeGraphRowElement | undefined;

Expand Down Expand Up @@ -107,7 +107,7 @@ export class TraceViewerWidget extends ReactWidget {
this.handleResourcesTimeGraph = this.handleResourcesTimeGraph.bind(this);
this.handleCpuXY = this.handleCpuXY.bind(this);
return <div className='trace-viewer-container'>
<GridLayout className='viewer-grid' cols={1} rowHeight={100} width={1600} draggableHandle={'.widget-handle'}>
<GridLayout className='viewer-grid' cols={1} rowHeight={100} width={1600} draggableHandle={'.widget-handle'}>
<div className='trace-info-container' key='trace-info' data-grid={{x: 0, y: 0, w: 1, h: 3}}>
{this.renderTraceInfo()}
</div>
Expand All @@ -120,7 +120,7 @@ export class TraceViewerWidget extends ReactWidget {
</div>
<div className='timegraph-info' key='time-graph-area' data-grid={{x: 0, y: 0, w: 1, h: 4}}>
{this.renderTimeGraph()}
</div>
</div>
<div className='xy-info' key='xy-area' data-grid={{x: 0, y: 0, w: 1, h: 6}}>
{this.renderLineChart()}
</div>
Expand Down Expand Up @@ -149,7 +149,7 @@ export class TraceViewerWidget extends ReactWidget {
// if (!this.openedTrace) {
// return;
// }
console.log(this.timeGraphState);

return <div className='timegraph-view'>
<div className='widget-handle'>
{this.timeGraphTitle}
Expand Down Expand Up @@ -287,12 +287,12 @@ export class TraceViewerWidget extends ReactWidget {
selectedItems.push(timeGraphEntry.id);
});

const statesParameters = QueryHelper.selectionTimeQuery(QueryHelper.splitRangeIntoEqualParts(1332170682440133097, 1332170682540133097, 1165), selectedItems);
const stateResponse = await this.tspClient.fetchTimeGraphStates<TimeGraphModel>(this.openedTrace.UUID,
'org.eclipse.tracecompass.internal.analysis.os.linux.core.threadstatus.ResourcesStatusDataProvider', statesParameters);
// const statesParameters = QueryHelper.selectionTimeQuery(QueryHelper.splitRangeIntoEqualParts(1332170682440133097, 1332170682540133097, 1165), selectedItems);
// const stateResponse = await this.tspClient.fetchTimeGraphStates<TimeGraphModel>(this.openedTrace.UUID,
// 'org.eclipse.tracecompass.internal.analysis.os.linux.core.threadstatus.ResourcesStatusDataProvider', statesParameters);

const stateModel = stateResponse.model;
this.timeGraphState = JSON.stringify(stateModel);
// const stateModel = stateResponse.model;
// this.timeGraphState = JSON.stringify(stateModel);
this.update();
}

Expand Down
Loading