[FEATURE] add trace heatmap chart plugin - #724

Open

shahrokni wants to merge 1 commit into

mainfrom

feat/tracheheatmapchart2

shahrokni commented Jul 8, 2026 •

edited

Loading

Contributor

Relates to perses/perses#3942

This is the bare minimum trace heat map chart. All it needs is traces and the exponential base (default 2) to bucketize the traces according to their time and duration.

The x-axis and y-axis represent the time and duration buckets respectively. Both buckets are generated dynamically.
The following picture shows a base 2 bucketing.
It also supports base 10. Choosing a proper base may vary by different cases.

Demo

Same queries and traces, different bases

Next Steps?

I think more settings could be employed (maybe)
Later we want to have an explorer on top of this. (Check https://www.youtube.com/watch?v=95YWyJpUU-Q)

Checklist

Pull request has a descriptive title and context useful to a reviewer.
Pull request title follows the [<catalog_entry>] <commit message> naming convention using one of the
following catalog_entry values: FEATURE, ENHANCEMENT, BUGFIX, BREAKINGCHANGE, DOC,IGNORE.
All commits have DCO signoffs.

UI Changes

Changes that impact the UI include screenshots and/or screencasts of the relevant changes.
Code follows the UI guidelines.

shahrokni force-pushed the feat/tracheheatmapchart2 branch 3 times, most recently from c40e966 to 139f2ea Compare

July 16, 2026 12:35

shahrokni force-pushed the feat/tracheheatmapchart2 branch 5 times, most recently from b33097f to cad2d04 Compare

July 21, 2026 12:18

shahrokni commented

View reviewed changes

traceheatmapchart/schemas/traceheatmapchart.json Outdated

shahrokni commented

View reviewed changes

traceheatmapchart/src/traceheatmap-chart-model.ts Outdated

shahrokni commented

View reviewed changes

traceheatmapchart/src/traceheatmap-time-bucket-util.ts

shahrokni commented

View reviewed changes

traceheatmapchart/src/traceheatmap-time-bucket-util.ts

shahrokni force-pushed the feat/tracheheatmapchart2 branch 3 times, most recently from e90da96 to 30c30f1 Compare

July 21, 2026 21:57

shahrokni requested review from andreasgerstmayr and jgbernalp

July 21, 2026 21:57

shahrokni force-pushed the feat/tracheheatmapchart2 branch from 30c30f1 to 69d4258 Compare

July 21, 2026 22:01

shahrokni marked this pull request as ready for review

July 21, 2026 22:07

shahrokni requested review from a team, AntoineThebaud and Nexucis as code owners

July 21, 2026 22:07

shahrokni force-pushed the feat/tracheheatmapchart2 branch from 69d4258 to ec0a324 Compare

July 24, 2026 09:33

jgbernalp reviewed

View reviewed changes

scripts/npm/npm.go Outdated

               func MustGetWorkspaces(dirPath string) []string {
-              	excludedWorkspaces := []string{"e2e"}
+              	excludedWorkspaces := []string{"e2e", "traceheatmapchart"}

jgbernalp Jul 24, 2026

Contributor

?

shahrokni Jul 27, 2026 •

edited

Loading

Contributor Author

At the moment this plugin does not include any Go files. Therefore, the pipeline throws an exception. For now, we can exclude the plugin from this part of the pipeline.

jgbernalp Jul 27, 2026

Contributor

not sure why the plugin should not include go files. At least the sdk related files should exist.

jgbernalp reviewed

View reviewed changes

traceheatmapchart/.cjs.swcrc Outdated

jgbernalp Jul 24, 2026

Contributor

we don't need these files as they are included in the repo root.

jgbernalp reviewed

View reviewed changes

traceheatmapchart/.swcrc Outdated

jgbernalp Jul 24, 2026

Contributor

we don't need these files as they are included in the repo root.

jgbernalp reviewed

View reviewed changes

traceheatmapchart/.gitignore Outdated

jgbernalp Jul 24, 2026

Contributor

we don't need these files as they are included in the repo root.

jgbernalp reviewed

View reviewed changes

traceheatmapchart/.eslintrc.js Outdated

jgbernalp Jul 24, 2026

Contributor

we don't need these files as they are included in the repo root.

jgbernalp reviewed

View reviewed changes

traceheatmapchart/LICENSE Outdated

jgbernalp Jul 24, 2026

Contributor

we don't need these files as they are included in the repo root.

jgbernalp reviewed

View reviewed changes

traceheatmapchart/go.mod Outdated

		@@ -0,0 +1,30 @@
		module github.com/perses/plugins/prometheus

jgbernalp Aug 3, 2026

Contributor

Suggested change

      
            module github.com/perses/plugins/prometheus
          
            module github.com/perses/plugins/traceheatmapchart

jgbernalp reviewed

View reviewed changes

traceheatmapchart/cue.mod/module.cue Outdated

		@@ -0,0 +1,17 @@
		module: "github.com/perses/traceheatmapchart@v0"

jgbernalp Aug 3, 2026

Contributor

Suggested change

      
            module: "github.com/perses/traceheatmapchart@v0"
          
            module: "github.com/perses/plugins/traceheatmapchart@v0"

jgbernalp reviewed

View reviewed changes

traceheatmapchart/package.json Outdated

		@@ -0,0 +1,63 @@
		{
		"name": "@perses/traceheatmap-chart-plugin",

jgbernalp Aug 3, 2026

Contributor

Suggested change

      
              "name": "@perses/traceheatmap-chart-plugin",
          
              "name": "@perses-dev/traceheatmap-chart-plugin",

jgbernalp reviewed

View reviewed changes

traceheatmapchart/src/traceheatmap-tooltip-util.ts

+                  })(),
+                });
+                return `<div style="

jgbernalp Aug 3, 2026

Contributor

this HTML is invalid, was this ran to check?

shahrokni Aug 5, 2026

Contributor Author

Surprisingly the HTML works just fine although it has some syntax issue, funny! Let me check.
I also found out this can fall under the XSS attack! Let's see if I can improve it.

shahrokni Aug 5, 2026

Contributor Author

jgbernalp reviewed

View reviewed changes

traceheatmapchart/src/traceheatmap-time-bucket-util.ts Outdated

+                  scale: 'hourly',
+                  getBuckets: (start, end, local) => {
+                    const generateHourlyLabels = (ts: number) => {
+                      const formatter = new Intl.DateTimeFormat('en-US', { hour: 'numeric' });

jgbernalp Aug 3, 2026

Contributor

can we avoid to hardcode the en-US locale?

jgbernalp reviewed

View reviewed changes

traceheatmapchart/src/traceheatmap-tooltip-util.ts Outdated

+                  elementId: generateId(column, row, 'min'),
+                  value: ((): string | undefined => {
+                    const indexes = bucketToFlatResultsMap[column]?.[row];
+                    if (!indexes) return undefined;

jgbernalp Aug 3, 2026

Contributor

since this does not guard against empty arrays, what would be displayed?

shahrokni Aug 5, 2026 •

edited

Loading

Contributor Author

If I understood your point right,
That should be fine to return undefined. When the Tooltip html is being built the undefined values are scaped by the filter

 return bucketDetails
                    .filter((i) => i.value)

jgbernalp Aug 5, 2026

Contributor

What I meant is that indexes can be [] which is thuthy

shahrokni Aug 5, 2026

Contributor Author

After the fix

jgbernalp reviewed

View reviewed changes

traceheatmapchart/src/index.ts

+              // See the License for the specific language governing permissions and
+              // limitations under the License.
+              export { getPluginModule } from './getPluginModule';

jgbernalp Aug 3, 2026

Contributor

We are missing component exports here.

jgbernalp reviewed

View reviewed changes

traceheatmapchart/package.json Outdated

+                  "dev": "rsbuild dev",
+                  "build": "npm run build-mf && concurrently \"npm:build:*\"",
+                  "build-mf": "rsbuild build",
+                  "build:cjs": "swc ./src -d dist/lib/cjs --strip-leading-paths --config-file .cjs.swcrc",

jgbernalp Aug 3, 2026

Contributor

not sure why are we re defining the cjs.swcrc if there is one at the root that can be re used, like other plugins already do.

jgbernalp reviewed

View reviewed changes

traceheatmapchart/src/traceheatmap-time-bucket-util.ts Outdated

+                resultsStartTimes: Array<Pick<TraceSearchResult, 'startTimeUnixMs' | 'durationMs'>>,
+                local?: string
+              ): TraceHeatMapTimeBucket => {
+                const startTimeStamp = min(...resultsStartTimes.map((i) => i.startTimeUnixMs));

jgbernalp Aug 3, 2026

Contributor

This could create a stack overflow with many traces, the min and max functions don't take arrays, they are expanded as variadic parameters, but the V8's has limits on how many parameters you can add. It will be better to use a plain loop and calculate the max and min at the same time.

shahrokni force-pushed the feat/tracheheatmapchart2 branch 4 times, most recently from bb8b075 to 862d55b Compare

August 5, 2026 15:16


          [FEATURE] add trace heatmap chart plugin

62c94d1

Signed-off-by: Mahmoud Shahrokni <seyedmahmoud.shahrokni@amadeus.com>

Signed-off-by: Mahmoud Shahrokni <seyedmahmoud.shahrokni@amadeus.com>

Signed-off-by: Mahmoud Shahrokni <seyedmahmoud.shahrokni@amadeus.com>

Signed-off-by: Mahmoud Shahrokni <seyedmahmoud.shahrokni@amadeus.com>

Signed-off-by: Mahmoud Shahrokni <seyedmahmoud.shahrokni@amadeus.com>

Signed-off-by: Mahmoud Shahrokni <seyedmahmoud.shahrokni@amadeus.com>

Signed-off-by: Mahmoud Shahrokni <seyedmahmoud.shahrokni@amadeus.com>

Signed-off-by: Mahmoud Shahrokni <seyedmahmoud.shahrokni@amadeus.com>

Signed-off-by: Mahmoud Shahrokni <seyedmahmoud.shahrokni@amadeus.com>

Signed-off-by: Mahmoud Shahrokni <seyedmahmoud.shahrokni@amadeus.com>

Signed-off-by: Seyed Mahmoud Shahrokni <39291137+shahrokni@users.noreply.github.com>

Signed-off-by: Seyed Mahmoud Shahrokni <39291137+shahrokni@users.noreply.github.com>

Signed-off-by: Seyed Mahmoud Shahrokni <39291137+shahrokni@users.noreply.github.com>

Signed-off-by: Seyed Mahmoud Shahrokni <39291137+shahrokni@users.noreply.github.com>

Signed-off-by: Seyed Mahmoud Shahrokni <39291137+shahrokni@users.noreply.github.com>

Signed-off-by: Seyed Mahmoud Shahrokni <39291137+shahrokni@users.noreply.github.com>

Signed-off-by: Seyed Mahmoud Shahrokni <39291137+shahrokni@users.noreply.github.com>

Signed-off-by: Seyed Mahmoud Shahrokni <39291137+shahrokni@users.noreply.github.com>

Signed-off-by: Seyed Mahmoud Shahrokni <39291137+shahrokni@users.noreply.github.com>

Signed-off-by: Seyed Mahmoud Shahrokni <39291137+shahrokni@users.noreply.github.com>

Signed-off-by: Seyed Mahmoud Shahrokni <39291137+shahrokni@users.noreply.github.com>

Signed-off-by: Seyed Mahmoud Shahrokni <39291137+shahrokni@users.noreply.github.com>

Signed-off-by: Seyed Mahmoud Shahrokni <39291137+shahrokni@users.noreply.github.com>

Signed-off-by: Seyed Mahmoud Shahrokni <39291137+shahrokni@users.noreply.github.com>

Signed-off-by: Seyed Mahmoud Shahrokni <39291137+shahrokni@users.noreply.github.com>

Signed-off-by: Seyed Mahmoud Shahrokni <39291137+shahrokni@users.noreply.github.com>

Signed-off-by: Seyed Mahmoud Shahrokni <39291137+shahrokni@users.noreply.github.com>

shahrokni force-pushed the feat/tracheheatmapchart2 branch from 862d55b to 62c94d1 Compare

August 5, 2026 15:27

shahrokni requested a review from jgbernalp

August 5, 2026 15:35

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Reviewers

At least 1 approving review is required to merge this pull request.

Labels

None yet