Skip to content

Add global range selection sync to Gantt chart with toggle button #1221

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

Draft
aaanh wants to merge 5 commits into
base: master
Choose a base branch
from
Draft

Add global range selection sync to Gantt chart with toggle button #1221

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
5 commits
Select commit Hold shift + click to select a range
ecfe736
Refactor number translator definition into a generator method
aaanh Aug 22, 2025
b530b98
Gantt: Add global range selection sync to Gantt chart with toggle button
aaanh Aug 22, 2025
e48d4e7
Rename responseType used in switch statement to providerType
aaanh Aug 22, 2025
24bcef5
Update README formatted and include electronmon
aaanh Aug 22, 2025
ab28cc6
wip
aaanh Sep 15, 2025
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
34 changes: 22 additions & 12 deletions README.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -148,6 +148,16 @@ Or, run
yarn start:electron
```

Or, for electron app, run with auto-refresh when there is code change

```bash
# install electronmon in global, only need to do it once
npm i -g electronmon

# then, in the repo root
electronmon examples/electron
```

and use the Electron application.

If there are errors that occurred while starting the app, see [Troubleshooting](#troubleshooting) for known issues.
Expand Down Expand Up @@ -201,10 +211,10 @@ If the **Trace Viewer** icon is not in the left sidebar, select menu **View** fr
There are a few ways to open traces. The main ones are using the **Open Trace Dialog** or the **File Explorer**. There are still some inconsistencies between them.

| Desired action | via Open Trace Dialog | via File Explorer |
|------------------------------------------------|-----------------------|-------------------|
| Open single CTF trace (folder) | ✓ | ✓ |
| Open folder of CTF traces (create trace group) | ✓ | ✓ |
| Open single file trace (ex. JSON Chrome trace) | | ✓ |
| ---------------------------------------------- | --------------------- | ----------------- |
| Open single CTF trace (folder) | ✓ | ✓ |
| Open folder of CTF traces (create trace group) | ✓ | ✓ |
| Open single file trace (ex. JSON Chrome trace) | | ✓ |

Regardless of the opening method used, if the selection is a folder, the tool will look for traces in **Common Trace Format (CTF)** format, such as **Linux Tracing Toolkit traces (LTTng)** Kernel and UST (Userspace) traces, and open all found CTF traces together under the same timeline. The trace events of each CTF trace will be analyzed in chronological order. With this, several traces can be opened as a group (e.g. LTTng Kernel and UST Traces).

Expand Down Expand Up @@ -271,14 +281,14 @@ This section shows detailed information about a selected:

This trace viewer depends on code from several other repos. Sometimes resolving issues in the trace viewer repo requires making changes in these code bases:

| Project | Description | Related issues | Links |
|---------------|----|--------------------------|---|
| [Theia][theia-webpage] | Theia is a framework for making custom IDEs. It provides reusable components (e.g. text editor, terminal) and is extensible. For example, this trace viewer is an extension for Theia-based IDEs. | | [Code][theia-code], [Ecosystem][theia-ecosystem] |
| [Trace Compass][tc-project] | Trace analysis tool and precursor to this trace viewer. | [label:"Trace Compass"][tc-gh-label] | [Dev info][tc-dev-info], [Dev setup][tc-dev-setup] |
| [Trace Compass Server][tc-server] | A reference implementation of a Trace Server. Manages and analyzes trace files and provides this data to the trace viewer over the [Trace Server Protocol (TSP)][tsp]. This Trace Server implementation was originally part of Trace Compass, so it requires the same dev setup. Because a protocol is used for communication (TSP), it is possible to develop alternative Trace Servers that are independent of Trace Compass. | [label:"Trace Server"][tc-server-gh-label] | [Dev setup][tc-dev-setup] (same as Trace Compass), [Code][tci-code] (same repo as Trace Compass incubator) |
| [Trace Server Protocol (TSP)][tsp] | Protocol used by the trace viewer to communicate with the trace server. | [label:"trace server protocol"][tsp-gh-label] | |
| [Client-side Trace Server Protocol implementation][tspc] | A client-side implementation of the Trace Server Protocol. Allows the trace viewer to communicate with the server. | | |
| [Timeline Chart][timeline-chart] | Implements the Gantt charts used in this trace viewer. | [label:timeline-chart][timeline-chart-gh-label] | |
| Project | Description | Related issues | Links |
| -------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ----------------------------------------------- | ---------------------------------------------------------------------------------------------------------- |
| [Theia][theia-webpage] | Theia is a framework for making custom IDEs. It provides reusable components (e.g. text editor, terminal) and is extensible. For example, this trace viewer is an extension for Theia-based IDEs. | | [Code][theia-code], [Ecosystem][theia-ecosystem] |
| [Trace Compass][tc-project] | Trace analysis tool and precursor to this trace viewer. | [label:"Trace Compass"][tc-gh-label] | [Dev info][tc-dev-info], [Dev setup][tc-dev-setup] |
| [Trace Compass Server][tc-server] | A reference implementation of a Trace Server. Manages and analyzes trace files and provides this data to the trace viewer over the [Trace Server Protocol (TSP)][tsp]. This Trace Server implementation was originally part of Trace Compass, so it requires the same dev setup. Because a protocol is used for communication (TSP), it is possible to develop alternative Trace Servers that are independent of Trace Compass. | [label:"Trace Server"][tc-server-gh-label] | [Dev setup][tc-dev-setup] (same as Trace Compass), [Code][tci-code] (same repo as Trace Compass incubator) |
| [Trace Server Protocol (TSP)][tsp] | Protocol used by the trace viewer to communicate with the trace server. | [label:"trace server protocol"][tsp-gh-label] | |
| [Client-side Trace Server Protocol implementation][tspc] | A client-side implementation of the Trace Server Protocol. Allows the trace viewer to communicate with the server. | | |
| [Timeline Chart][timeline-chart] | Implements the Gantt charts used in this trace viewer. | [label:timeline-chart][timeline-chart-gh-label] | |

## Troubleshooting

Expand Down
30 changes: 11 additions & 19 deletions ...libs/traceviewer-libs/react-components/src/components/abstract-gantt-output-component.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -96,15 +96,15 @@ export abstract class AbstractGanttOutputComponent<
private vscrollLayer: TimeGraphVerticalScrollbar;
private chartCursors: TimeGraphChartCursors;
private markerChartCursors: TimeGraphChartCursors;
private arrowLayer: TimeGraphChartArrows;
private rangeEventsLayer: TimeGraphRangeEventsLayer;
protected arrowLayer: TimeGraphChartArrows;
protected rangeEventsLayer: TimeGraphRangeEventsLayer;

private horizontalContainer: React.RefObject<HTMLDivElement>;
protected chartTreeRef: React.RefObject<HTMLDivElement>;
protected markerTreeRef: React.RefObject<HTMLDivElement>;
private containerRef: React.RefObject<ReactTimeGraphContainer>;

private tspDataProvider: TspDataProvider;
protected tspDataProvider: TspDataProvider;
private styleProvider: StyleProvider;
private styleMap = new Map<string, TimeGraphStateStyle>();

Expand All @@ -116,7 +116,7 @@ export abstract class AbstractGanttOutputComponent<
this.doHandleContextMenuContributed(payload);
protected onOrderChange = (ids: number[]) => this.doHandleOrderChange(ids);
protected onOrderReset = () => this.doHandleOrderReset();
private pendingSelection: TimeGraphEntry | undefined;
protected pendingSelection: TimeGraphEntry | undefined;

private _debouncedUpdateChart = debounce(() => {
this.chartLayer.updateChart(this.filterExpressionsMap());
Expand Down Expand Up @@ -435,7 +435,7 @@ export abstract class AbstractGanttOutputComponent<
}
}

private updateTotalHeight() {
protected updateTotalHeight() {
const visibleEntries = [...this.state.chartTree].filter(entry => this.isVisible(entry));
this.totalHeight = visibleEntries.length * this.props.style.rowHeight;
this.rowController.totalHeight = this.totalHeight;
Expand Down Expand Up @@ -679,15 +679,7 @@ export abstract class AbstractGanttOutputComponent<
renderChart(): React.ReactNode {
return (
<React.Fragment>
<div
id={this.props.chartId}
className="ps__child--consume"
onWheel={ev => {
ev.preventDefault();
ev.stopPropagation();
}}
style={{ height: 'auto' }}
>
<div id={this.props.chartId} className="ps__child--consume" style={{ height: 'auto' }}>
{this.renderAbstractGanttContent(`${this.props.chartId}-content`)}
</div>
{this.state.outputStatus === ResponseStatus.RUNNING && (
Expand All @@ -706,7 +698,7 @@ export abstract class AbstractGanttOutputComponent<
return this.state.chartTree.length === 0;
}

private isFilteredIn(row: TimelineChart.TimeGraphRowModel, strategy?: string): boolean {
protected isFilteredIn(row: TimelineChart.TimeGraphRowModel, strategy?: string): boolean {
if (row.states.length === 1 && row.states[0].range.start === row.states[0].range.end) {
// intentionally empty row should be visible
return true;
Expand Down Expand Up @@ -1016,13 +1008,13 @@ export abstract class AbstractGanttOutputComponent<
}
}

private getTimegraphRowIds() {
protected getTimegraphRowIds() {
const { chartTree, columns, collapsedNodes } = this.state;
const rowIds = getAllExpandedNodeIds(listToTree(chartTree, columns), collapsedNodes);
return { rowIds };
}

private async fetchChartData(
protected async fetchChartData(
range: TimelineChart.TimeGraphRange,
resolution: number,
fetchArrows: boolean,
Expand Down Expand Up @@ -1101,7 +1093,7 @@ export abstract class AbstractGanttOutputComponent<
};
}

private updateMarkersData(
protected updateMarkersData(
rangeEvents: TimelineChart.TimeGraphAnnotation[],
newRange: TimelineChart.TimeGraphRange,
newResolution: number
Expand Down Expand Up @@ -1594,7 +1586,7 @@ export abstract class AbstractGanttOutputComponent<
this.setState({ multiSelectedRows: shiftClickedRows });
};

private selectAndReveal(item: TimeGraphEntry) {
protected selectAndReveal(item: TimeGraphEntry) {
const rowIndex = getIndexOfNode(
item.id,
listToTree(this.state.chartTree, this.state.columns),
Expand Down
Loading
Loading